/* Loonis Sites additions on top of the template stylesheet */ /* hide animated elements until the motion kit runs (removed instantly if it can't) */ html.lx-motion [animate="fade-up"], html.lx-motion [animate="heading-reveal"], html.lx-motion [animate="stagger"], html.lx-motion [animate="image-reveal"], html.lx-motion [animate="rule-draw"], html.lx-motion [animate="bar-grow"], html.lx-motion [animate="bar-segments"] { opacity: 0; } /* card hover zoom (1.04, 0.6s) */ html:not(.lx-ix) [class*="_card"] img, html:not(.lx-ix) .card-media img { transition: transform var(--motion-slow) var(--ease-1); } html:not(.lx-ix) [class*="_card"]:hover img:not([class*="icon"]), html:not(.lx-ix) .card-media:hover img { transform: scale(1.04); } .card-media { overflow: hidden; } /* lightbox */ .lx-lightbox { position: fixed; inset: 0; z-index: 9999; background: var(--tone-surface-92); display: flex; align-items: center; justify-content: center; } .lx-lightbox img { max-width: 86vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius-8); } .lx-lightbox button { position: absolute; background: none; border: 0; color: var(--role-ink); font-size: calc(var(--size-h2) * var(--scale-headings)); cursor: pointer; padding: var(--spacing-1rem); line-height: var(--leading-100); } .lx-lb-close { top: 1rem; right: 1rem; } .lx-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lx-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); } /* tabs: Webflow hides inactive panes */ .w-tab-pane { display: none; } .w-tab-pane.w--tab-active { display: block; } /* single-page lists: Webflow hides pagination when there is nothing to page */ .w-pagination-wrapper { display: none; } /* menu links the converter added to templates that only had a demo "Pages" dropdown */ .lx-nav-added { white-space: nowrap; } /* Lumis photo areas (Oct 30 2026): their text inherits the page's white text in the original. Restated here at the lowest specificity, it reads Ink, which photo areas set to Text on photos, so it stays white over the photos in the light themes too. Same colour in Original. */ :where(.section_home1_banner, .section_contact2_hero, .plan_plan-box.is-dark, .home1_benefits_card.is-last, .home2_benefits_card.is-last, .about_metrics_card.is-black, .contact1_hero_call, .demo_call, .features2_hero_grid, .features3_hero_number, .contact3_hero_form-box) { color: var(--role-ink); } /* ---- lx-icons: one-colour logo and icons follow the role colours (written by _tools/design-system/icons.mjs) ---- The template's own one-colour SVG files are drawn as a mask filled with a role colour; the file itself is moved out of view. This runs in every theme except Original, and when the Style panel has changed a colour (). In Original the files show as drawn. The selectors match the template's own file names only: an owner logo or a replaced image has another src, so it shows exactly as uploaded and is never recoloured. */ :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/67f3f3202d84261528cddeec_twitter-white-174dd1.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/6887087d50f20ac7bec2523b_Hamburger-menu-412800.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/688713b0471368059ceb5e08_Instagram-566e8c.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/688713b060ff01bc4512dc05_linkedin-5d87c7.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/688713b09297eaa439ea9a6f_twitter-cf3860.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/6890bcdaafee4bd3cb95910d_Plus-5-1f8c24.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/6896fc8d6f608c58f691cf17_Check-circle---1-3bb5a6.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon1.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon2.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon3.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon4.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon5.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Checkmark---1.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Cube3.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Cube5.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Hamburger-menu.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Instagram.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Left---6.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Left.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Plus-5.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right---6.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right---6_1.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right-Up.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/contact1.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/contact2.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/contact3.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/instagram-white.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/linkedin-white.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/linkedin.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/menu/hemisphere.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/menu/home---3.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/menu/messages-bubble---1.svg"], :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/twitter.svg"] { object-position: -99999px 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; background-color: var(--role-ink); background-clip: content-box; } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/67f3f3202d84261528cddeec_twitter-white-174dd1.svg"] { -webkit-mask-image: url(/_t/lumis/cms/67f3f3202d84261528cddeec_twitter-white-174dd1.svg); mask-image: url(/_t/lumis/cms/67f3f3202d84261528cddeec_twitter-white-174dd1.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/6887087d50f20ac7bec2523b_Hamburger-menu-412800.svg"] { -webkit-mask-image: url(/_t/lumis/cms/6887087d50f20ac7bec2523b_Hamburger-menu-412800.svg); mask-image: url(/_t/lumis/cms/6887087d50f20ac7bec2523b_Hamburger-menu-412800.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/688713b0471368059ceb5e08_Instagram-566e8c.svg"] { -webkit-mask-image: url(/_t/lumis/cms/688713b0471368059ceb5e08_Instagram-566e8c.svg); mask-image: url(/_t/lumis/cms/688713b0471368059ceb5e08_Instagram-566e8c.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/688713b060ff01bc4512dc05_linkedin-5d87c7.svg"] { -webkit-mask-image: url(/_t/lumis/cms/688713b060ff01bc4512dc05_linkedin-5d87c7.svg); mask-image: url(/_t/lumis/cms/688713b060ff01bc4512dc05_linkedin-5d87c7.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/688713b09297eaa439ea9a6f_twitter-cf3860.svg"] { -webkit-mask-image: url(/_t/lumis/cms/688713b09297eaa439ea9a6f_twitter-cf3860.svg); mask-image: url(/_t/lumis/cms/688713b09297eaa439ea9a6f_twitter-cf3860.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/6890bcdaafee4bd3cb95910d_Plus-5-1f8c24.svg"] { -webkit-mask-image: url(/_t/lumis/cms/6890bcdaafee4bd3cb95910d_Plus-5-1f8c24.svg); mask-image: url(/_t/lumis/cms/6890bcdaafee4bd3cb95910d_Plus-5-1f8c24.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/cms/6896fc8d6f608c58f691cf17_Check-circle---1-3bb5a6.svg"] { -webkit-mask-image: url(/_t/lumis/cms/6896fc8d6f608c58f691cf17_Check-circle---1-3bb5a6.svg); mask-image: url(/_t/lumis/cms/6896fc8d6f608c58f691cf17_Check-circle---1-3bb5a6.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon1.svg"] { -webkit-mask-image: url(/_t/lumis/images/Benefit-Icon1.svg); mask-image: url(/_t/lumis/images/Benefit-Icon1.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon2.svg"] { -webkit-mask-image: url(/_t/lumis/images/Benefit-Icon2.svg); mask-image: url(/_t/lumis/images/Benefit-Icon2.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon3.svg"] { -webkit-mask-image: url(/_t/lumis/images/Benefit-Icon3.svg); mask-image: url(/_t/lumis/images/Benefit-Icon3.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon4.svg"] { -webkit-mask-image: url(/_t/lumis/images/Benefit-Icon4.svg); mask-image: url(/_t/lumis/images/Benefit-Icon4.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Benefit-Icon5.svg"] { -webkit-mask-image: url(/_t/lumis/images/Benefit-Icon5.svg); mask-image: url(/_t/lumis/images/Benefit-Icon5.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Checkmark---1.svg"] { -webkit-mask-image: url(/_t/lumis/images/Checkmark---1.svg); mask-image: url(/_t/lumis/images/Checkmark---1.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Cube3.svg"] { -webkit-mask-image: url(/_t/lumis/images/Cube3.svg); mask-image: url(/_t/lumis/images/Cube3.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Cube5.svg"] { -webkit-mask-image: url(/_t/lumis/images/Cube5.svg); mask-image: url(/_t/lumis/images/Cube5.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Hamburger-menu.svg"] { -webkit-mask-image: url(/_t/lumis/images/Hamburger-menu.svg); mask-image: url(/_t/lumis/images/Hamburger-menu.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Instagram.svg"] { -webkit-mask-image: url(/_t/lumis/images/Instagram.svg); mask-image: url(/_t/lumis/images/Instagram.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Left---6.svg"] { -webkit-mask-image: url(/_t/lumis/images/Left---6.svg); mask-image: url(/_t/lumis/images/Left---6.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Left.svg"] { -webkit-mask-image: url(/_t/lumis/images/Left.svg); mask-image: url(/_t/lumis/images/Left.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Plus-5.svg"] { -webkit-mask-image: url(/_t/lumis/images/Plus-5.svg); mask-image: url(/_t/lumis/images/Plus-5.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right---6.svg"] { -webkit-mask-image: url(/_t/lumis/images/Right---6.svg); mask-image: url(/_t/lumis/images/Right---6.svg); background-color: var(--role-page-deep); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right---6_1.svg"] { -webkit-mask-image: url(/_t/lumis/images/Right---6_1.svg); mask-image: url(/_t/lumis/images/Right---6_1.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right-Up.svg"] { -webkit-mask-image: url(/_t/lumis/images/Right-Up.svg); mask-image: url(/_t/lumis/images/Right-Up.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/Right.svg"] { -webkit-mask-image: url(/_t/lumis/images/Right.svg); mask-image: url(/_t/lumis/images/Right.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/contact1.svg"] { -webkit-mask-image: url(/_t/lumis/images/contact1.svg); mask-image: url(/_t/lumis/images/contact1.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/contact2.svg"] { -webkit-mask-image: url(/_t/lumis/images/contact2.svg); mask-image: url(/_t/lumis/images/contact2.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/contact3.svg"] { -webkit-mask-image: url(/_t/lumis/images/contact3.svg); mask-image: url(/_t/lumis/images/contact3.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/instagram-white.svg"] { -webkit-mask-image: url(/_t/lumis/images/instagram-white.svg); mask-image: url(/_t/lumis/images/instagram-white.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/linkedin-white.svg"] { -webkit-mask-image: url(/_t/lumis/images/linkedin-white.svg); mask-image: url(/_t/lumis/images/linkedin-white.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/linkedin.svg"] { -webkit-mask-image: url(/_t/lumis/images/linkedin.svg); mask-image: url(/_t/lumis/images/linkedin.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/menu/hemisphere.svg"] { -webkit-mask-image: url(/_t/lumis/images/menu/hemisphere.svg); mask-image: url(/_t/lumis/images/menu/hemisphere.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/menu/home---3.svg"] { -webkit-mask-image: url(/_t/lumis/images/menu/home---3.svg); mask-image: url(/_t/lumis/images/menu/home---3.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/menu/messages-bubble---1.svg"] { -webkit-mask-image: url(/_t/lumis/images/menu/messages-bubble---1.svg); mask-image: url(/_t/lumis/images/menu/messages-bubble---1.svg); } :is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lumis/images/twitter.svg"] { -webkit-mask-image: url(/_t/lumis/images/twitter.svg); mask-image: url(/_t/lumis/images/twitter.svg); } /* logos and icons drawn in several greys: in the themes of the other mode (dark themes of a light template, light themes of a dark one) they are inverted so they stay readable */ html[data-theme="daylight-beta"] img[src$="/_t/lumis/cms/688704bf96d37b0d8de04166_Lumis-logo-323c86.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/cms/688704bf96d37b0d8de04166_Lumis-logo-323c86.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/cms/688704bf96d37b0d8de04166_Lumis-logo-323c86.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/cms/68876d06202ebfd99c892bbc_Integrations-Icon1-0c895a.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/cms/68876d06202ebfd99c892bbc_Integrations-Icon1-0c895a.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/cms/68876d06202ebfd99c892bbc_Integrations-Icon1-0c895a.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/cms/68876e74e5e61bd4076047d5_Integrations-Icon2-fd4333.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/cms/68876e74e5e61bd4076047d5_Integrations-Icon2-fd4333.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/cms/68876e74e5e61bd4076047d5_Integrations-Icon2-fd4333.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/cms/68876eba625055ff00684aa5_Integrations-Icon4-b35fa0.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/cms/68876eba625055ff00684aa5_Integrations-Icon4-b35fa0.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/cms/68876eba625055ff00684aa5_Integrations-Icon4-b35fa0.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/cms/68876ec5933801f4332ec1a6_Integrations-Icon3-984ff1.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/cms/68876ec5933801f4332ec1a6_Integrations-Icon3-984ff1.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/cms/68876ec5933801f4332ec1a6_Integrations-Icon3-984ff1.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/Logo6.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/Logo6.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/Logo6.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/Lumis-logo.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/Lumis-logo.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/Lumis-logo.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/logo1.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/logo1.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/logo1.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/logo2.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/logo2.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/logo2.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/logo3.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/logo3.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/logo3.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/logo4.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/logo4.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/logo4.svg"], html[data-theme="daylight-beta"] img[src$="/_t/lumis/images/logo5.svg"], html[data-theme="pitch-deck"] img[src$="/_t/lumis/images/logo5.svg"], html[data-theme="inverted"] img[src$="/_t/lumis/images/logo5.svg"] { filter: invert(1); } /* ---- end lx-icons ---- */