:root { --mrn-dot-orange: #ea580c; --mrn-dot-orange-light: #fb923c; --mrn-dot-bg: #f8fafc; --mrn-check-color: rgba(15, 23, 42, 0.05); --mrn-check-size: 22px; } /* Enable via adding `mrn-dot-enabled` on */ .mrn-dot-enabled { background-color: var(--mrn-dot-bg) !important; background-image: none !important; position: relative; } /* Hide other service-page background systems when dots are enabled */ .mrn-dot-enabled .mrn-bg-elements, .mrn-dot-enabled .mrn-bg-pattern, .mrn-dot-enabled .pro-bg-pattern, .mrn-dot-enabled .pro-bg-glow, .mrn-dot-enabled .pro-bg-glow-2, .mrn-dot-enabled .bg-elements, .mrn-dot-enabled .mrn-bg-elements, .mrn-dot-enabled .mrn-bg-elements, .mrn-dot-enabled .bg-pattern, .mrn-dot-enabled .bg-blobs { display: none !important; } .mrn-dot-enabled .mrn-header-spacer, .mrn-dot-enabled header, .mrn-dot-enabled main, .mrn-dot-enabled footer, .mrn-dot-enabled .mrn-final-footer-container { position: relative; } /* Big Orange Dots / Blobs Background */ .mrn-dot-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background-color: var(--mrn-dot-bg); background-image: linear-gradient(var(--mrn-check-color) 1px, transparent 1px), linear-gradient(90deg, var(--mrn-check-color) 1px, transparent 1px); background-size: var(--mrn-check-size) var(--mrn-check-size); background-position: center center; } .mrn-dot-bg.mrn-dot-bg--dots-only { background-image: none; } .mrn-dot { position: absolute; border-radius: 999px; opacity: 0.55; filter: blur(6px); animation: mrnDotFloat 10s ease-in-out infinite alternate; } .mrn-dot-1 { width: 320px; height: 320px; left: -120px; top: 80px; background: radial-gradient(circle at 30% 30%, rgba(234, 88, 12, 0.55), rgba(251, 146, 60, 0.18) 55%, transparent 72%); animation-delay: -1s; } .mrn-dot-2 { width: 260px; height: 260px; right: -110px; top: 180px; background: radial-gradient(circle at 30% 30%, rgba(251, 146, 60, 0.50), rgba(234, 88, 12, 0.14) 55%, transparent 72%); animation-delay: -5s; } .mrn-dot-3 { width: 420px; height: 420px; right: -180px; bottom: -160px; background: radial-gradient(circle at 30% 30%, rgba(234, 88, 12, 0.30), rgba(234, 88, 12, 0.10) 55%, transparent 75%); opacity: 0.35; filter: blur(14px); animation-delay: -3s; } .mrn-dot-4 { width: 220px; height: 220px; left: 8%; bottom: 18%; background: radial-gradient(circle at 30% 30%, rgba(251, 146, 60, 0.40), rgba(234, 88, 12, 0.10) 55%, transparent 75%); opacity: 0.38; animation-delay: -7s; } @keyframes mrnDotFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(30px, -35px, 0) scale(1.05); } }