/* ----- 1. Variables & Easing ----- */ :root { /* Inspired by FIBONACCI for a natural, organic feel. Standard Osmo is (0.625, 0.05, 0, 1). Ours is slightly smoother. */ --cubic-fibonacci: cubic-bezier(0.1, 1, 0.1, 1); --duration-default: 0.3s; --animation-default: var(--duration-default) var(--cubic-fibonacci); /* Layout Variables for Containers */ --container-padding: 2rem; } /* fouc-start */ /* 1. Hide loading screen on live site by default */ .loading-screen { opacity: 0; transition: opacity 0.4s; } /* 2. Show loading screen in Webflow Designer */ .wf-design-mode .loading-screen { opacity: 1; } /* 3. Hide loading screen in Webflow Editor */ .w-editor .loading-screen { opacity: 0; } // Inject critical CSS into const style=document.createElement('style'); style.textContent=` [data-load-reset] { opacity: 0; } [data-image-cycle-item="active"] { opacity: 1; visibility: visible; z-index: 3; } [data-image-cycle-item="previous"] { opacity: 0; visibility: visible; z-index: 2; } [data-image-cycle-item="not-active"] { opacity: 0; visibility: hidden; z-index: 1; } `; document.head.appendChild(style); /* Hide logo-loader in Designer and Editor — live site unaffected */ /* fouc-end */ /* Mobile Padding Override */ @media screen and (max-width: 767px) { :root { --container-padding: 1rem; } } /* -------2. Osmo Scaling System ------- */ /* Desktop */ :root { --size-unit: 16; --size-container-ideal: 1440; --size-container-min: 992px; --size-container-max: 1920px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); } /* Tablet */ @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; } } /* Mobile Landscape */ @media screen and (max-width: 767px) { :root { --size-container-ideal: 550; --size-container-min: 480px; --size-container-max: 767px; } } /* Mobile Portrait */ @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; } } /* Applying scaling to HTML (Root), not Body. */ html { font-size: var(--size-font); } /* Hide Utilities */ .hide { display: none !important; } @media screen and (max-width: 991px) { .hide, .hide-tablet { display: none !important; } } @media screen and (max-width: 767px) { .hide-mobile-landscape { display: none !important; } } @media screen and (max-width: 479px) { .hide-mobile { display: none !important; } } /* Spacing Utilities - Using EM instead of REM */ .margin-0 { margin: 0em !important; } .padding-0 { padding: 0em !important; } .spacing-clean { padding: 0em !important; margin: 0em !important; } .margin-top { margin-right: 0em !important; margin-bottom: 0em !important; margin-left: 0em !important; } .padding-top { padding-right: 0em !important; padding-bottom: 0em !important; padding-left: 0em !important; } .margin-right { margin-top: 0em !important; margin-bottom: 0em !important; margin-left: 0em !important; } .padding-right { padding-top: 0em !important; padding-bottom: 0em !important; padding-left: 0em !important; } .margin-bottom { margin-top: 0em !important; margin-right: 0em !important; margin-left: 0em !important; } .padding-bottom { padding-top: 0em !important; padding-right: 0em !important; padding-left: 0em !important; } .margin-left { margin-top: 0em !important; margin-right: 0em !important; margin-bottom: 0em !important; } .padding-left { padding-top: 0em !important; padding-right: 0em !important; padding-bottom: 0em !important; } .margin-horizontal { margin-top: 0em !important; margin-bottom: 0em !important; } .padding-horizontal { padding-top: 0em !important; padding-bottom: 0em !important; } .margin-vertical { margin-right: 0em !important; margin-left: 0em !important; } .padding-vertical { padding-right: 0em !important; padding-left: 0em !important; } /*