/** * Motarva — floating UI cards over a product picture (Stripe/Linear style). * * The SHARED part, moved out of homepage.css on 2026-10-04 so the region * landers' "Rather draw your own route?" card can use the same components * (Ayrton: "zoals de zigzag op de homepage met de extra modellen die * rondzweven"). Each page keeps its own float POSITIONS. * * A stage reveals its floats once it is in view: the homepage zigzag block * (.mot-zigzag__block.is-visible, homepage.js) or any .mot-floats container * that gets .is-visible. Reduced motion: shown at once, no idle bob. */ /* ── Floating composition layers (Stripe/Linear style) ─────────────────── */ .mot-zigzag__image { overflow: visible; } .mot-zigzag__float { position: absolute; z-index: 2; opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); pointer-events: none; } .mot-zigzag__block.is-visible .mot-zigzag__float, .mot-floats.is-visible .mot-zigzag__float { opacity: 1; transform: translateY(0); } .mot-zigzag__block.is-visible .mot-zigzag__float--d1, .mot-floats.is-visible .mot-zigzag__float--d1 { transition-delay: .25s; } .mot-zigzag__block.is-visible .mot-zigzag__float--d2, .mot-floats.is-visible .mot-zigzag__float--d2 { transition-delay: .5s; } /* Floating UI card (solid bg, strong shadow, 1px edge highlight) */ .mot-zigzag__ui-card { background: var(--mot-bg-card, #131313); border-radius: var(--mot-radius-lg, 16px); padding: var(--sp-4, 16px); font-family: var(--mot-font); color: var(--mot-text); box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.06); } /* Icon box — square container with tinted bg + colored glyph */ .mot-home-float__icon-box { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--mot-radius-sm); background: var(--mot-bg-raised); color: var(--mot-text-muted); } .mot-home-float__icon-box--lg { width: 40px; height: 40px; } .mot-home-float__icon-box--md { width: 36px; height: 36px; } .mot-home-float__icon-box--sm { width: 32px; height: 32px; } .mot-home-float__icon-box--circle { border-radius: 50%; } /* These mockups depict the product, and the product's UI went monochrome (teal retired 2026-08-15) — a teal-highlighted tool and a colored stat trio advertised a UI that no longer exists. --teal marks the mock's "selected tool", so it inverts like a real selected state; the others are neutral tiles. */ /* Renamed from --teal 2026-08-21: the name outlived the colour by six days and then described a token it no longer used. It marks the mock toolbar's ACTIVE tool, so it inverts, like every selected state in the system. */ .mot-home-float__icon-box--selected { background: var(--mot-selected-fill, var(--mot-text)); color: var(--mot-selected-label, var(--mot-bg)); } .mot-home-float__icon-box--green, .mot-home-float__icon-box--blue { background: var(--mot-bg-raised); color: var(--mot-text); } .mot-home-float__icon-box--accent { background: var(--mot-accent-dim); color: var(--mot-accent); } .mot-home-float__icon-box > svg, .mot-home-float__icon-box > i { width: 20px; height: 20px; } .mot-home-float__icon-box--md > svg, .mot-home-float__icon-box--md > i { width: 18px; height: 18px; } .mot-home-float__icon-box--sm > svg, .mot-home-float__icon-box--sm > i { width: 16px; height: 16px; } /* Stat block (big number + small uppercase label) */ .mot-home-float__stat { display: flex; flex-direction: column; } .mot-home-float__stat-row { display: flex; align-items: center; gap: var(--sp-3); } .mot-home-float__stat-num { font-size: 1.1rem; font-weight: 700; line-height: 1.1; color: var(--mot-text); } .mot-home-float__stat-label { font-size: .625rem; color: var(--mot-text-muted); text-transform: uppercase; letter-spacing: .03em; } /* Meta row (inline icon + muted label) */ .mot-home-float__meta-item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: .85rem; color: var(--mot-text-muted); } .mot-home-float__meta-item > svg, .mot-home-float__meta-item > i { width: 16px; height: 16px; } .mot-home-float__meta-sep { color: var(--mot-border); } /* Optional subtle idle float (hero element only) */ @keyframes mot-zigzag-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .mot-zigzag__float--idle { animation: mot-zigzag-idle 5s ease-in-out infinite; animation-play-state: paused; } .mot-zigzag__block.is-visible .mot-zigzag__float--idle, .mot-floats.is-visible .mot-zigzag__float--idle { animation-play-state: running; animation-delay: 1s; } /* Generate-route card: the Route Maker planner's own controls (.mot-segmented, .mot-field-label, the app's curviness artwork). Positions stay with the page. */ .mot-home-float--planner { pointer-events: auto; /* a link (F8): floats are pointer-events:none by default */ color: inherit; text-decoration: none; width: 268px; padding: var(--sp-3, 12px); display: grid; gap: var(--sp-2, 8px); z-index: 3; } .mot-home-float--planner .mot-segmented { background: var(--mot-bg); } .mot-home-float--planner .mot-segmented__opt { min-height: 32px; font-size: .75rem; } .mot-home-float--planner .mot-field-label { margin: 2px 0 -2px; } .mot-home-float__cta { width: 100%; } .mot-home-float--planner:focus-visible { outline: 2px solid var(--mot-text); outline-offset: 3px; } /* Curviness options carry the app's own curviness artwork (as the Route Maker planner does, motarva_curviness_icon()): stroke="currentColor", so the icon takes the option's colour, muted idle and full on the active one */ .mot-home-float__curve { display: inline-flex; align-items: center; gap: 6px; } .mot-home-float__curve svg { width: 16px; height: 16px; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .mot-zigzag__float { opacity: 1; transform: none; transition: none; } .mot-zigzag__float--idle { animation: none; } }