/* Moonlight Companies site overrides (child of Hello Elementor, GPL-3.0-or-later). Hand-written CSS loaded on every page after the plugin and theme CSS. Sections: home deck, floating images, FAQ, news story, product, header, fonts. The relative ../../uploads font URLs are deliberate (local static copy). */ /* ---------- HOME: full-page scroll-snap deck ---------- On desktop the home page (.elementor-16) is a deck: one 100vh panel per top-level section, snapping on scroll. At <=1024px it falls back to normal page scroll (see the @media block near the end). The !importants override Elementor's per-post panel heights. */ .elementor.elementor-16 { height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; scroll-snap-type: y mandatory; /* Hide scrollbar */ scrollbar-width: none; -ms-overflow-style: none; } .elementor.elementor-16::-webkit-scrollbar { display: none; width: 0; } /* Every full-screen section */ .elementor.elementor-16 > .elementor-section, .elementor.elementor-16 > .e-con { width: 100% !important; max-width: 100% !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; } /* Footer: keep it stacked above the preceding content (it sits beside the deck, not inside it) */ footer.elementor-location-footer { position: relative; z-index: 2; } /* Hide scrollbars (all pages) */ html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } body { scrollbar-width: none; -ms-overflow-style: none; } body::-webkit-scrollbar { display: none; } /* ---------- HOME: floating images ---------- Same gentle bob on all three; the delays keep them out of phase. */ .moonlight-float img { animation: moonlightFloat 4s ease-in-out infinite; } .moonlight-float-2 img { animation: moonlightFloat 4s ease-in-out infinite; animation-delay: 1.3s; } .moonlight-float-3 img { animation: moonlightFloat 4s ease-in-out infinite; animation-delay: 2.6s; } @keyframes moonlightFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } } /* Home hero "Rock On" scroll caret: gentle 6px bob. Only index.html and home/ render this SVG. */ .e-font-icon-svg.e-fas-caret-down { animation: rockOnFloat 2.5s ease-in-out infinite !important; will-change: transform; } @keyframes rockOnFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } /* ---------- FAQ page ---------- */ /* Big Q / A letters in the accordion titles and answer panels */ .QA-letter { font-family: 'Komu', sans-serif; font-size: 48px; line-height: 1em; letter-spacing: 0.02em; color: #FFF; text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25); margin-right: 10px; } /* Tablet */ @media screen and (min-width: 768px) and (max-width: 1024px) { .QA-letter { font-size: 26px !important; margin-right: 5px; } } /* Laptop */ @media screen and (min-width: 1025px) and (max-width: 1599px) { .QA-letter { font-size: 32px !important; margin-right: 5px; } } /* Mobile */ @media screen and (max-width: 767px) { .QA-letter { font-size: 22px !important; margin-right: 5px; } } /* FAQ page accordion: white dividers between items */ .dh-faq .e-n-accordion .e-n-accordion-item { border-top: 2px solid #FFF; overflow: hidden; } .dh-faq .e-n-accordion .e-n-accordion-item:last-child { border-bottom: 2px solid #FFF !important; } /* ---------- NEWS articles ---------- */ .funnel-text{ font-family: Funnel Display; font-size: 40px; line-height: 56px; font-weight: 400; margin-top: 60px; margin-bottom: 60px; } /* Laptop */ @media (min-width: 1025px) and (max-width: 1600px) { .funnel-text { font-size: 24px !important; line-height: 1.5em !important; } } /* Tablet: 768px - 1024px */ @media (min-width: 768px) and (max-width: 1024px) { .funnel-text { font-size: 21px !important; line-height: 1.5em !important; margin-top: 40px; margin-bottom: 40px; } } /* Mobile: 0px - 767px */ @media (max-width: 767px) { .funnel-text { font-size: 17px !important; line-height: 1.5em !important; margin-top: 30px; margin-bottom: 30px; } } /* ---------- NEWS listing ---------- */ /* Shown by js/news-filter.js when a category has no stories */ .news-filter-empty { color: #FFF; text-align: center; padding: 40px 0; } /* ---------- PRODUCT page: image sizing at 500px - 750px ---------- */ @media (min-width: 500px) and (max-width: 750px) { .elementor-459 .elementor-element.elementor-element-40d07fc img { width: 50%; } .elementor-459 .elementor-element.elementor-element-153de01 { top: 220px; } } /* ---------- Header ---------- */ .attachment-full.size-full.wp-image-830 { transition: opacity 0.5s ease, transform 0.5s ease !important; } header.elementor-location-header, .elementor-location-header { transition: transform 0.4s ease, opacity 0.4s ease !important; } /* ---------- HOME: deck tweaks ---------- */ /* Tighter grid gaps on phones (393px is the iPhone 14 Pro width) */ @media (max-width: 767px) { .elementor-16 .elementor-element-5b76f49 { row-gap: 40px !important; column-gap: 20px !important; } } @media (max-width: 393px) { .elementor-16 .elementor-element-5b76f49 { row-gap: 20px !important; column-gap: 20px !important; } } @media (max-width: 1024px) { /* Normal page scroll, no full height deck */ .elementor.elementor-16 { height: auto !important; max-height: none !important; overflow-y: visible !important; scroll-snap-type: none !important; } .elementor.elementor-16 > .elementor-section, .elementor.elementor-16 > .e-con { height: auto !important; min-height: auto !important; max-height: none !important; scroll-snap-align: none !important; scroll-snap-stop: normal !important; overflow: visible; background-size: cover; background-position: center bottom; background-repeat: no-repeat; } } /* ---------- Fonts ---------- Funnel Display is declared here for every page. Gotham and Komu come from the inline custom-fonts