/* ============================================================================ tm-aura.css · Weicher Blur-Hintergrund (Aurora) für die App-Seiten ---------------------------------------------------------------------------- Eigenständiges Add-on. NACH text2motion_v2.css einbinden. Verändert die bestehende App-CSS NICHT. Nutzt ausschliesslich vorhandene Tokens: --tm-primary · --tm-ease Markup (als ERSTES Kind von ): WICHTIG: KEINE Overrides an .tm-header / .tm-main / .tm-corner-Position! Der Header ist bereits sticky (z-index:10), .tm-main bereits relative (z-index:1). Wird der Header fälschlich auf z-index:1 gesetzt, legt sich .tm-main über das Dropdown -> Menü-Links nicht mehr klickbar. ============================================================================ */ .tm-aura { position: fixed; inset: 0; z-index: 0; /* hinter dem Seiteninhalt; header (z10) und main (z1) liegen darüber */ overflow: hidden; pointer-events: none; /* nur im oberen Bereich sichtbar, blendet nach unten weich aus */ -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 38%, transparent 78%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 38%, transparent 78%); } .tm-aura-blob { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; opacity: .55; /* dezent – hier wird gearbeitet */ } .tm-aura-blob--1 { width: 42vw; height: 42vw; max-width: 580px; max-height: 580px; top: -18%; left: -8%; background: color-mix(in oklab, var(--tm-primary) 20%, transparent); animation: tm-aura-1 46s var(--tm-ease) infinite alternate; } .tm-aura-blob--2 { width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; top: -14%; right: -8%; background: color-mix(in oklab, #0089b7 16%, transparent); animation: tm-aura-2 52s var(--tm-ease) infinite alternate; } .tm-aura-blob--3 { width: 38vw; height: 38vw; max-width: 540px; max-height: 540px; top: 0%; left: 40%; background: color-mix(in oklab, var(--tm-primary) 13%, transparent); animation: tm-aura-3 49s var(--tm-ease) infinite alternate; } /* Dark Mode: etwas kräftiger, damit die Aura wahrnehmbar bleibt */ [data-bs-theme="dark"] .tm-aura-blob--1 { background: color-mix(in oklab, var(--tm-primary) 32%, transparent); } [data-bs-theme="dark"] .tm-aura-blob--2 { background: color-mix(in oklab, #0089b7 26%, transparent); } [data-bs-theme="dark"] .tm-aura-blob--3 { background: color-mix(in oklab, var(--tm-primary) 22%, transparent); } @keyframes tm-aura-1 { to { transform: translate3d(5%, 4%, 0) scale(1.08); } } @keyframes tm-aura-2 { to { transform: translate3d(-5%, 4%, 0) scale(1.12); } } @keyframes tm-aura-3 { to { transform: translate3d(4%, -4%, 0) scale(1.06); } } /* Mobil: kleinerer Blur-Radius = weniger GPU-Last */ @media (max-width: 720px) { .tm-aura-blob { filter: blur(72px); opacity: .45; } } /* Bewegung reduzieren: Aura bleibt sichtbar, aber ohne Drift */ @media (prefers-reduced-motion: reduce) { .tm-aura-blob { animation: none; } } /* ============================================================================ DEKORATIVE ECKEN · gleiche Größe wie auf der Startseite (150px) ---------------------------------------------------------------------------- Auf den App-Seiten sind die Ecken sonst max-width:22vw (viel größer als die 150px der Landing). Hier fix auf 150px, ohne die Position anzutasten (bleibt position:fixed, bottom:0 aus text2motion_v2.css). ============================================================================ */ .tm-body .tm-corner { width: 150px; max-width: 150px; height: auto; }