/* Marov Studio demo additions. Appended in its own file so no template stylesheet is modified. */ .marov-demo-notice { margin-top: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, 0.35); background: rgba(127, 127, 127, 0.12); color: inherit; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(-4px); } .marov-demo-notice.is-in { animation: marov-demo-in 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes marov-demo-in { to { opacity: 1; transform: translateY(0); } } .marov-demo-map { display: flex; align-items: center; justify-content: center; min-height: 260px; width: 100%; border-radius: 6px; background: repeating-linear-gradient(45deg, rgba(127,127,127,0.07) 0 12px, rgba(127,127,127,0.12) 12px 24px); color: inherit; font-size: 15px; letter-spacing: 0.04em; opacity: 0.75; } @media (prefers-reduced-motion: reduce) { .marov-demo-notice.is-in { animation: none; opacity: 1; transform: none; } } /* ─── Mobile overflow guard ────────────────────────────────────────────── Two of these six templates scroll sideways on a phone — measured on the deployed demos at 375px: furniture overflowed by 417px (a tiny-slider testimonial track 1755px wide whose wrapper is overflow:visible) and restaurant by 112px. This is the ONLY layout rule added to any template, and it deliberately changes nothing visible: it stops the DOCUMENT from scrolling sideways and leaves every element's size, position and animation exactly as the author wrote them. `clip` rather than `hidden`, and on rather than : `overflow: hidden` creates a scroll container, which silently breaks `position: sticky` headers inside it. `clip` does not. The `hidden` line stays as a fallback for browsers too old for `clip`, where a broken sticky header is still better than a page that slides around. */ html { overflow-x: hidden; } @supports (overflow-x: clip) { html { overflow-x: clip; } }