/* ============================================================ premium.css — LumaMed RisikoBilanz · Premium-Bewegungsebene ------------------------------------------------------------ A progressive-enhancement layer that sits OVER the existing page: A) a scroll-animated warm gradient background ("Drift, weit") B) a set of disciplined micro-animations Nothing here changes layout or content. Every pre-animation state is gated on .px-armed (added by premium.js) so a JS-less load shows the normal end-state. prefers-reduced-motion forces end-states too. One easing for everything: cubic-bezier(0.2,0.6,0.2,1) Tempo scales all durations via --px-speed (set from the Tweaks panel). ============================================================ */ .lumamed-landing{ --px-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --px-speed: 1; --px-rise: 18px; } /* ============================================================ TEIL A — Scroll-animierter Gradient-Hintergrund ------------------------------------------------------------ A big warm glow whose bright CORE sits in the top-left corner and spills beyond the frame. Its falloff stops short of the hero video on the right, so the video keeps its own clean creme background. On scroll the whole field glides DOWN, then curves DOWN-RIGHT. Geometry is driven entirely by JS via --px / --py (centre, in px) and --s (size multiplier). Transform-only → GPU-smooth. The JS runs a lerp loop so the motion glides independently of scroll cadence. ============================================================ */ .px-bg{ position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; opacity: var(--px-bg-dim, 1); transition: opacity .5s var(--px-ease); } .px-bg[hidden]{ display: none; } /* THEME-SAFE: z-index:-1 keeps the fixed gradient BEHIND every normal element (a WordPress theme's header / menu / footer, and the landing content), above only the body background. It can never paint over page chrome. The landing's own sections are transparent, so the glow shows through them. (Earlier this was z-index:0 + a wrapper lift, purely to satisfy screenshot/export capture; on a real site that covered theme chrome — reverted.) */ /* Suppress the page's STATIC warm cloud while the live layer runs, so warmth never doubles. Desktop carries it on ; the mobile column carries it on .zones. FIX: neutralise to TRANSPARENT, not opaque creme — the drift layer sits at z-index:-1, and an opaque body/.zones background paints OVER it (body bg stops propagating to the canvas as soon as html has a background), which hid the gradient completely on Desktop/Laptop/Tablet. The creme base now lives on , behind the blobs. */ html{ background: #FFFAF4; } body.px-bg-live{ background: transparent !important; } body.px-bg-live[data-device="mobile"] .zones, .lumamed-landing.px-bg-live[data-device="mobile"] .zones{ background: transparent !important; } .px-blob{ position: absolute; left: 0; top: 0; width: var(--bw, 90vw); height: var(--bh, 80vh); --px: 0; --py: 0; --s: 1; /* centre at (--px,--py)px, then centre the box on it, then scale about centre */ transform: translate3d(calc(var(--px) * 1px), calc(var(--py) * 1px), 0) translate(-50%, -50%) scale(var(--s)); will-change: transform; } /* Marken-Warmtöne. The radial CORE is rich; the falloff is wide and soft so the glow reads as one atmospheric field, not a hard disc. DESKTOP / LAPTOP base — very large so it fills the whole top-left of frame 1 and spills far beyond the corner; the JS keeps the warm right edge clear of the hero video. */ .px-blob-1{ --bw: 158vw; --bh: 219vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(250,153,111,0.60) 0%, rgba(250,153,111,0.34) 32%, rgba(250,153,111,0.13) 50%, transparent 68%); } .px-blob-2{ --bw: 132vw; --bh: 171vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,176,120,0.42) 0%, rgba(255,176,120,0.16) 38%, transparent 70%); } .px-blob-3{ --bw: 113vw; --bh: 142vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,214,150,0.34) 0%, transparent 70%); } /* MOBILE (true phones, data-device=mobile on a narrow viewport) — reverted to the earlier smaller, softer glow. The hero video is hidden here, and the warmth fills the top of the centred content column (JS anchors X to it). */ body[data-device="mobile"] .px-blob-1 { --bw: 130vw; --bh: 56vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(250,153,111,0.50) 0%, rgba(250,153,111,0.22) 34%, transparent 64%); } body[data-device="mobile"] .px-blob-2 { --bw: 112vw; --bh: 48vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,176,120,0.36) 0%, rgba(255,176,120,0.14) 38%, transparent 66%); } body[data-device="mobile"] .px-blob-3 { --bw: 120vw; --bh: 52vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,214,150,0.30) 0%, transparent 66%); } /* TABLET — the mobile column layout on a WIDE viewport (>=680px). Same doubled, richer glow as desktop, sized for the wider column. (True phones stay below this breakpoint and keep the reverted look above.) */ @media (min-width: 680px){ body[data-device="mobile"] .px-blob-1 { --bw: 114vw; --bh: 126vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(250,153,111,0.58) 0%, rgba(250,153,111,0.32) 32%, transparent 68%); } body[data-device="mobile"] .px-blob-2 { --bw: 99vw; --bh: 108vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,176,120,0.40) 0%, rgba(255,176,120,0.15) 38%, transparent 70%); } body[data-device="mobile"] .px-blob-3 { --bw: 92vw; --bh: 95vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,214,150,0.32) 0%, transparent 70%); } } @media (prefers-reduced-motion: reduce){ .px-bg{ display: none !important; } /* static page gradient stays visible */ } /* ============================================================ TEIL B — Mikro-Animationen All gated on .lumamed-landing.px-armed[data-px-…="on"]. ============================================================ */ /* 1 · Scroll-Reveals — gestaffelt, einmalig */ .lumamed-landing.px-armed[data-px-reveal="on"] .px-reveal{ opacity: 0; transform: translateY(var(--px-rise)); transition: opacity calc(0.7s * var(--px-speed)) var(--px-ease), transform calc(0.7s * var(--px-speed)) var(--px-ease); transition-delay: var(--px-delay, 0s); will-change: opacity, transform; } .lumamed-landing.px-armed[data-px-reveal="on"] .px-reveal.px-in{ opacity: 1; transform: none; } /* 2 · Hero-Eingang — beim Laden */ .lumamed-landing.px-armed[data-px-hero="on"] .px-hero{ opacity: 0; transform: translateY(16px); transition: opacity calc(0.8s * var(--px-speed)) var(--px-ease), transform calc(0.8s * var(--px-speed)) var(--px-ease); transition-delay: var(--px-delay, 0s); will-change: opacity, transform; } .lumamed-landing.px-armed[data-px-hero="on"] .px-hero.px-in{ opacity: 1; transform: none; } /* 3 · Bild-Reveals — schnelles, sauberes Einblenden (kein Clip-Path-Wisch: der war zu langsam/spät und schwerer für die GPU). Nur opacity + leichtes Anheben — kompositor-freundlich, smooth, früh genug sichtbar. */ .lumamed-landing.px-armed[data-px-img="on"] .px-img > img, .lumamed-landing.px-armed[data-px-img="on"] .px-img > video{ opacity: 0; transform: translateY(12px) scale(1.008); transition: opacity calc(0.5s * var(--px-speed)) var(--px-ease), transform calc(0.6s * var(--px-speed)) var(--px-ease); will-change: opacity, transform; } .lumamed-landing.px-armed[data-px-img="on"] .px-img.px-in > img, .lumamed-landing.px-armed[data-px-img="on"] .px-img.px-in > video{ opacity: 1; transform: none; } /* 4 · Linien zeichnen — every 1px rule draws itself in. Standalone line ELEMENTS (.foot-rule, hr) scale directly. Border-based lines (accordion dividers, the timeline "road") can't be scaled, so the JS overlays a .px-draw span on the border and hides the original while the draw layer is live. Horizontal lines grow from the left; the vertical timeline lines unroll top→bottom (the "Straße rollt sich auf" effect). */ .lumamed-landing.px-armed[data-px-lines="on"] .px-line{ transform: scaleX(0); transform-origin: left center; transition: transform calc(0.9s * var(--px-speed)) var(--px-ease); transition-delay: var(--px-delay, 0s); will-change: transform; } .lumamed-landing.px-armed[data-px-lines="on"] .px-line.px-in{ transform: scaleX(1); } /* Overlay draw-lines (created by JS over border-based rules). Positioned on INTEGER pixel offsets so every line renders at a uniform crisp 1px — a fractional (-0.5px) offset straddled the pixel grid and, under the preview's scale transform, rounded differently per line (“mal dicker, mal dünner”). */ .lumamed-landing .px-line-host{ position: relative; } .lumamed-landing .px-draw{ display: none; position: absolute; pointer-events: none; z-index: 1; } .lumamed-landing .px-draw-h{ left: 0; right: 0; height: 1px; transform-origin: left center; } .lumamed-landing .px-draw-h.px-top{ top: 0; } .lumamed-landing .px-draw-h.px-bottom{ bottom: 0; } .lumamed-landing .px-draw-v{ top: 0; bottom: 0; left: 0; width: 1px; transform-origin: top center; } /* Only when the line layer is live: show the overlay (animatable) and hide the original border so a single drawn line is visible. Off/reduced-motion keeps the static borders and hides the overlays entirely. */ .lumamed-landing.px-armed[data-px-lines="on"] .px-draw{ display: block; } .lumamed-landing.px-armed[data-px-lines="on"] .px-draw-h{ transform: scaleX(0); transition: transform calc(0.9s * var(--px-speed)) var(--px-ease); transition-delay: var(--px-delay, 0s); } .lumamed-landing.px-armed[data-px-lines="on"] .px-draw-h.px-in{ transform: scaleX(1); } .lumamed-landing.px-armed[data-px-lines="on"] .px-draw-v{ transform: scaleY(0); transition: transform calc(1.15s * var(--px-speed)) var(--px-ease); transition-delay: var(--px-delay, 0s); } .lumamed-landing.px-armed[data-px-lines="on"] .px-draw-v.px-in{ transform: scaleY(1); } .lumamed-landing.px-armed[data-px-lines="on"] .px-line-host--top{ border-top-color: transparent !important; } .lumamed-landing.px-armed[data-px-lines="on"] .px-line-host--bottom{ border-bottom-color: transparent !important; } .lumamed-landing.px-armed[data-px-lines="on"] .px-line-host--left{ border-left-color: transparent !important; } /* Timeline node markers (.step-body::before squares the line passes through): transparent fill instead of creme, so the background shows through. */ .lumamed-landing[data-process="timeline"] .step-body::before{ background: transparent !important; } @media (prefers-reduced-motion: reduce){ .lumamed-landing .px-draw{ display: none !important; } } /* 5 · Zahlen zählen hoch — tabular-nums verhindert Layout-Wackeln */ .lumamed-landing[data-px-count="on"] .px-count{ font-variant-numeric: tabular-nums; } /* The coalescing wrapper added around a counted number stays inline so the number and any adjacent glyph (e.g. the "+" in "100+") read as one run. */ .lumamed-landing .px-count-line{ display: inline; } /* 6 · Akkordeons sanft — der Toggle dreht (+ → ×) bereits in der Basis-CSS; hier ergänzen wir nur ein weiches Einblenden des Bodys. */ .lumamed-landing[data-px-accordion="on"] .dd[open] .dd-body{ animation: pxAccordion calc(0.34s * var(--px-speed)) var(--px-ease) both; } @keyframes pxAccordion{ from{ opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* 6b · Toggle-Plus dreht sich einmal, wenn es ins Bild scrollt — eine kleine, elegante 360°-Drehung. One-shot (kein fill-mode), kehrt danach in die Ruhe zurück und stört die Öffnen-Drehung (+ → ×) nicht. JS setzt .px-spin + einen gestaffelten animation-delay; gated über data-px-toggle. */ .lumamed-landing.px-armed[data-px-toggle="on"] .dd-toggle.px-spin{ transform-origin: 50% 50%; animation: pxToggleSpin calc(0.8s * var(--px-speed)) var(--px-ease); } @keyframes pxToggleSpin{ from{ transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .lumamed-landing .dd-toggle.px-spin{ animation: none !important; } } /* 7 · Hover-Feinschliff — folgt dem Design-System (gefüllt → leichte Opacity) */ .lumamed-landing.px-armed .cta-primary{ transition: opacity .22s var(--px-ease), background 160ms ease, color 160ms ease; } .lumamed-landing.px-armed .cta-primary:hover{ opacity: .92; } .lumamed-landing.px-armed .cta-primary:active{ opacity: .85; } /* ============================================================ Reduced motion — belt & suspenders: force every end-state. (premium.js also leaves the layer un-armed under reduced motion, so these are a safety net rather than the primary path.) ============================================================ */ @media (prefers-reduced-motion: reduce){ .lumamed-landing .px-reveal, .lumamed-landing .px-hero{ opacity: 1 !important; transform: none !important; transition: none !important; } .lumamed-landing .px-img > img, .lumamed-landing .px-img > video{ clip-path: none !important; transform: none !important; opacity: 1 !important; transition: none !important; } .lumamed-landing .px-line{ transform: none !important; transition: none !important; } .lumamed-landing[data-px-accordion="on"] .dd[open] .dd-body{ animation: none !important; } }