.bil-home, .bil-home *{ box-sizing: border-box; } .bil-home{ --bil-navy-950: #080d24; --bil-navy-900: #101735; --bil-navy-800: #1a2452; --bil-purple-750: #3f22ad; --bil-purple-650: #5333d2; --bil-purple-550: #6c50ed; --bil-purple-150: #e9e3ff; --bil-purple-075: #f6f3ff; --bil-teal: #69e3eb; --bil-green: #078b63; --bil-amber: #f4b63f; --bil-ink: #17203f; --bil-muted: #64718c; --bil-border: #dce2ef; --bil-off-white: #fafafe; --bil-white: #ffffff; --bil-header-overlap: 150px; width: 100vw; max-width: 100vw; margin: calc(-1 * var(--bil-header-overlap)) calc(50% - 50vw) 0; overflow: hidden; color: var(--bil-ink); background: var(--bil-white); } .bil-home :where(h1, h2, h3, p, ul){ margin: 0; } .bil-home :where(a, button){ font: inherit; } .bil-home a{ text-decoration: none; } .bil-home img, .bil-home video, .bil-home svg{ display: block; max-width: 100%; } .bil-home ul{ padding: 0; list-style: none; } .bil-inner{ width: min(1360px, calc(100% - 48px)); margin-inline: auto; } .bil-eyebrow{ margin-bottom: 15px; } .bil-section-copy{ margin: 16px auto 0; } .bil-section-intro{ margin-bottom: 48px; text-align: center; } @media (hover: hover) and (pointer: fine){ .bil-card-link:hover, .bil-guide-card:hover{ transform: translateY(-3px); } } /* Hero */ .bil-hero{ position: relative; isolation: isolate; min-height: min(880px, 92vh); display: grid; place-items: center; padding: calc(clamp(82px, 8vw, 118px) + var(--bil-header-overlap)) 24px clamp(86px, 8vw, 110px); overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 28%, rgba(109, 80, 237, .32), transparent 34%), radial-gradient(circle at 13% 77%, rgba(105, 227, 235, .12), transparent 28%), radial-gradient(circle at 87% 68%, rgba(139, 114, 244, .15), transparent 31%), linear-gradient(148deg, #070b20 0%, #111735 48%, #25145f 100%); } .bil-hero::before{ position: absolute; z-index: -3; inset: 0; content: ""; background-image: linear-gradient(rgba(255, 255, 255, .036) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .036) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 83%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 83%, transparent); } .bil-hero-glow{ position: absolute; z-index: -2; top: 50%; left: 50%; width: min(64vw, 820px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(164, 150, 255, .13); border-radius: 50%; box-shadow: 0 0 0 90px rgba(139, 114, 244, .035), 0 0 0 180px rgba(105, 227, 235, .018); } .bil-hero-beam{ position: absolute; z-index: -1; top: 50%; left: 50%; width: min(78vw, 1100px); height: 1px; transform-origin: center; background: linear-gradient(90deg, transparent, rgba(105, 227, 235, .65), #fff, rgba(139, 114, 244, .72), transparent); filter: drop-shadow(0 0 9px rgba(105, 227, 235, .45)); opacity: .38; animation: bil-beam-pulse 5s ease-in-out infinite; } .bil-hero-beam:nth-child(2){ transform: translate(-50%, -50%) rotate(38deg); animation-delay: -1.2s; } .bil-hero-beam:nth-child(3){ transform: translate(-50%, -50%) rotate(-38deg); animation-delay: -2.5s; } .bil-hero-beam:nth-child(4){ transform: translate(-50%, -50%) rotate(90deg); animation-delay: -3.7s; } @keyframes bil-beam-pulse{ 0%, 100% { opacity: .16; } 50% { opacity: .56; } } @keyframes bil-panel-aura-float{ 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -10px, 0) scale(1.04); } } @keyframes bil-panel-ring-drift{ 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .92; } 50% { transform: translate3d(8px, -8px, 0) rotate(6deg); opacity: 1; } } .bil-hero-content{ width: min(1030px, 100%); margin-inline: auto; } .bil-hero-kicker{ display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 14px; color: #c9c0ff; border: 1px solid rgba(196, 181, 253, .27); border-radius: 999px; background: rgba(255, 255, 255, .065); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(10px); } .bil-hero-kicker::before{ width: 7px; height: 7px; content: ""; border-radius: 50%; background: var(--bil-teal); box-shadow: 0 0 0 4px rgba(105, 227, 235, .1), 0 0 14px rgba(105, 227, 235, .7); } @media (min-width: 1101px){ .bil-hero-content{ width: min(1185px, 100%); } .bil-proof-grid{ margin-top: 44px; } } .bil-hero-lead{ margin: 24px auto 0; } .bil-sale-panel{ display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 22px; align-items: center; max-width: 980px; margin: 32px auto 0; padding: 17px 19px 17px 21px; overflow: hidden; color: #fff; border: 1px solid rgba(244, 182, 63, .43); border-radius: 18px; background: radial-gradient(circle at 5% 10%, rgba(244, 182, 63, .19), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .065)); box-shadow: 0 18px 48px rgba(0, 0, 0, .2); text-align: left; backdrop-filter: blur(14px); } .bil-sale-copy{ min-width: 0; } .bil-sale-label{ display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #fff; font-size: clamp(16px, 1.8vw, 22px); font-weight: 900; line-height: 1.2; letter-spacing: -.025em; } .bil-sale-label::before{ width: 9px; height: 9px; flex: 0 0 9px; content: ""; border-radius: 50%; background: var(--bil-amber); box-shadow: 0 0 0 5px rgba(244, 182, 63, .12), 0 0 17px rgba(244, 182, 63, .7); } .bil-sale-label span{ padding: 5px 8px; color: #1d1736; border-radius: 999px; background: var(--bil-amber); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .bil-sale-text{ margin-top: 7px !important; color: rgba(255, 255, 255, .71); font-size: 12.5px; font-weight: 600; line-height: 1.55; } .bil-sale-text strong{ color: #fff; } .bil-sale-countdown{ display: grid; grid-template-columns: repeat(4, minmax(60px, 1fr)); gap: 7px; min-width: 310px; } .bil-sale-time{ display: grid; min-height: 64px; place-items: center; align-content: center; padding: 8px 7px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(7, 11, 32, .42); text-align: center; } .bil-sale-number{ color: #fff; font-size: 23px; font-weight: 900; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .bil-sale-unit{ margin-top: 5px; color: rgba(255, 255, 255, .58); font-size: 8px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .bil-sale-panel.is-expired{ border-color: rgba(255, 255, 255, .17); } .bil-sale-panel.is-expired .bil-sale-label::before{ background: #aab3c8; box-shadow: 0 0 0 5px rgba(170, 179, 200, .1); } .bil-sale-ended{ grid-column: 1 / -1; padding: 14px 18px; color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(7, 11, 32, .36); font-size: 12px; font-weight: 800; text-align: center; } .bil-proof-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; margin: 38px auto 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .065); box-shadow: 0 22px 60px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); } .bil-proof-item{ min-width: 0; padding: 19px 13px; } .bil-proof-item + .bil-proof-item{ border-left: 1px solid rgba(255, 255, 255, .11); } .bil-proof-number{ color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1; letter-spacing: -.045em; } .bil-proof-number small{ margin-left: 3px; color: var(--bil-teal); font-size: .4em; font-weight: 900; letter-spacing: 0; } .bil-proof-rating-row{ display: flex; align-items: center; justify-content: center; gap: 8px; } .bil-stars{ display: inline-block; margin: 0; color: var(--bil-amber); font-size: 10px; line-height: 1; letter-spacing: 1px; } .bil-proof-label{ margin-top: 6px; color: rgba(255, 255, 255, .59); font-size: 10.5px; font-weight: 700; line-height: 1.45; } @media (min-width: 1101px){ .bil-proof-grid{ margin-top: 44px; } } /* Scroll cue */ .bil-scroll-cue-wrap{ position: relative; z-index: 10; display: flex; justify-content: center; width: min(520px, calc(100% - 32px)); margin: -31px auto 0; } .bil-scroll-cue{ display: inline-flex; min-width: 210px; align-items: center; flex-direction: column; gap: 8px; padding: 13px 22px 14px; color: var(--bil-ink) !important; border: 1px solid #dfe4ef; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 52px rgba(12, 18, 48, .13); text-align: center; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .bil-scroll-cue-label{ color: var(--bil-navy-900); font-size: 11px; font-weight: 850; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .bil-scroll-mouse{ position: relative; width: 23px; height: 35px; border: 2px solid var(--bil-purple-650); border-radius: 14px; background: linear-gradient(180deg, #fff, var(--bil-purple-075)); box-shadow: inset 0 0 0 1px rgba(83, 51, 210, .04); } .bil-scroll-wheel{ position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; border-radius: 999px; background: linear-gradient(180deg, #21c5d4, #6c50ed); transform: translateX(-50%); animation: bil-scroll-wheel 1.65s ease-in-out infinite; } @keyframes bil-scroll-wheel{ 0% { opacity: 0; transform: translate(-50%, -2px); } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 9px); } } @media (hover: hover) and (pointer: fine){ .bil-scroll-cue:hover{ transform: translateY(-3px); border-color: #c1b5ef; box-shadow: 0 22px 58px rgba(52, 35, 130, .15); } } /* Machines */ .bil-machines{ padding: 96px 0 82px; background: var(--bil-off-white); } .bil-machine-selector{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; } .bil-machine-panel{ position: relative; min-width: 0; overflow: hidden; border: 1px solid #d9def0; border-radius: 24px; background: #fff; box-shadow: 0 13px 42px rgba(15, 23, 42, .075); transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease; } .bil-machine-panel::before{ position: absolute; z-index: 0; inset: 0 0 auto; height: 6px; content: ""; background: linear-gradient(90deg, var(--bil-purple-750), var(--bil-purple-550), #a78bfa); } .bil-machine-panel-hair::before{ background: linear-gradient(90deg, #2777e8, #5147d9 56%, var(--bil-teal)); } .bil-machine-panel-summary{ position: relative; z-index: 1; display: flex; min-height: 585px; flex-direction: column; padding: 24px 24px 30px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 90% 6%, rgba(105, 227, 235, .08), transparent 31%), radial-gradient(circle at 10% 90%, rgba(108, 80, 237, .08), transparent 35%), linear-gradient(145deg, #fff 0%, #f8f6ff 100%); } .bil-machine-panel-summary > *{ position: relative; z-index: 1; } .bil-machine-panel-summary::before, .bil-machine-panel-summary::after{ position: absolute; inset: auto; content: ""; pointer-events: none; z-index: 0; } .bil-machine-panel-hair .bil-machine-panel-summary{ background: linear-gradient(145deg, #0a1338 0%, #16285f 51%, #39217c 100%); } .bil-machine-panel-hair .bil-machine-panel-summary::before{ top: -86px; right: -44px; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient(circle, rgba(96, 237, 235, .28) 0%, rgba(96, 237, 235, .11) 38%, rgba(96, 237, 235, 0) 69%); filter: blur(10px); animation: bil-panel-aura-float 9.5s ease-in-out infinite; } .bil-machine-panel-hair .bil-machine-panel-summary::after{ top: 22px; right: 64px; width: 210px; height: 210px; border: 1px solid rgba(133, 233, 255, .18); border-radius: 50%; box-shadow: 0 0 0 34px rgba(102, 215, 255, .055), 0 0 0 68px rgba(92, 142, 255, .04); animation: bil-panel-ring-drift 12s ease-in-out infinite; } .bil-machine-panel-tattoo .bil-machine-panel-summary{ background: linear-gradient(145deg, #fbfbff 0%, #f4f1ff 55%, #f9f5ff 100%); } .bil-machine-panel-tattoo .bil-machine-panel-summary::before{ top: -58px; right: -32px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(166, 130, 255, .2) 0%, rgba(166, 130, 255, .09) 41%, rgba(166, 130, 255, 0) 72%); filter: blur(9px); animation: bil-panel-aura-float 10.5s ease-in-out infinite reverse; } .bil-machine-panel-tattoo .bil-machine-panel-summary::after{ top: 28px; right: 72px; width: 184px; height: 184px; border: 1px solid rgba(127, 104, 233, .14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(153, 108, 255, .04), 0 0 0 56px rgba(130, 106, 235, .03); animation: bil-panel-ring-drift 13s ease-in-out infinite reverse; } .bil-machine-panel-preview{ position: relative; height: clamp(235px, 22vw, 270px); flex: 0 0 auto; overflow: visible; background: transparent; } .bil-machine-preview-slide{ position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; opacity: 0; pointer-events: none; transition: opacity .42s ease; } .bil-machine-preview-slide.is-active{ opacity: 1; pointer-events: auto; } .bil-machine-panel-preview img, .bil-machine-panel-preview video{ width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; } .bil-machine-panel-preview img{ display: block; width: auto; max-width: min(100%, 420px); margin: 0 auto; transform: translateY(7px) scale(1.05); transform-origin: center center; } .bil-machine-preview-caption{ position: absolute; z-index: 3; top: 6px; left: 50%; width: max-content; max-width: calc(100% - 24px); padding: 8px 12px; color: #fff; border: 1px solid rgba(255, 255, 255, .16); border-radius: 11px; background: rgba(8, 13, 36, .58); text-align: center; transform: translateX(-50%); backdrop-filter: blur(8px); } .bil-machine-preview-caption strong{ display: block; font-size: 14px; font-weight: 850; line-height: 1.25; } .bil-machine-preview-caption span{ display: block; margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 9.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } .bil-machine-carousel-controls{ display: none; } .bil-machine-carousel-button{ display: grid; width: 34px; height: 34px; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: rgba(16, 23, 53, .58); cursor: pointer; backdrop-filter: blur(8px); transition: background .18s ease, border-color .18s ease, transform .18s ease; } .bil-machine-panel-copy{ display: flex; flex: 1; flex-direction: column; padding: 25px 14px 0; } @media (hover: hover) and (pointer: fine){ .bil-machine-carousel-button:hover{ transform: translateY(-1px); border-color: rgba(255, 255, 255, .55); background: rgba(83, 51, 210, .8); } } .bil-machine-panel-meta{ display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bil-machine-panel-label, .bil-machine-panel-count{ display: inline-flex; align-items: center; width: fit-content; min-height: 27px; padding: 6px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .bil-machine-panel-label{ color: var(--bil-purple-750); border: 1px solid #d4c9fb; background: rgba(255, 255, 255, .8); } .bil-machine-panel-count{ color: #fff; background: linear-gradient(135deg, var(--bil-navy-800), var(--bil-purple-650)); box-shadow: 0 7px 18px rgba(83, 51, 210, .2); } .bil-machine-panel-hair .bil-machine-panel-label{ color: #baf7fb; border-color: rgba(126, 227, 235, .42); background: rgba(8, 18, 54, .55); } .bil-machine-panel-hair .bil-machine-panel-count{ color: #07112f; background: linear-gradient(135deg, #90eef3, #67d9ee 48%, #88b7ff); box-shadow: 0 8px 21px rgba(67, 195, 231, .27); } .bil-machine-panel-summary h3{ max-width: 520px; margin-top: 25px; } .bil-machine-panel-copy > p{ max-width: 570px; margin-top: 16px; color: #5d6980; font-size: 14px; font-weight: 540; line-height: 1.72; } .bil-machine-panel-hair .bil-machine-panel-copy > p{ color: rgba(255, 255, 255, .73); } @media (hover: hover) and (pointer: fine){ .bil-machine-panel:not(.is-active):hover{ transform: translateY(-4px); border-color: #c5b9ef; box-shadow: 0 20px 50px rgba(83, 51, 210, .12); } } .bil-machine-selector.has-active{ grid-template-columns: minmax(0, 1fr); } .bil-machine-selector.has-active .bil-machine-panel:not(.is-active){ display: none; } .bil-machine-panel.is-active{ border-color: #c8bdf1; box-shadow: 0 22px 58px rgba(52, 35, 130, .12); } .bil-machine-panel.is-active .bil-machine-panel-summary{ min-height: 0; padding: 29px 34px; } .bil-machine-panel.is-active .bil-machine-panel-preview, .bil-machine-panel.is-active .bil-machine-panel-meta, .bil-machine-panel.is-active .bil-machine-panel-copy > p{ display: none; } .bil-machine-panel.is-active .bil-machine-panel-copy{ padding: 0; } .bil-machine-panel.is-active .bil-machine-panel-summary h3{ max-width: none; margin-top: 0; font-size: clamp(25px, 2.7vw, 36px); } .bil-machine-panel-details{ padding: 30px 32px 34px; border-top: 1px solid #e2e6f0; background: #fff; } .bil-machine-panel-details[hidden]{ display: none !important; } .bil-machine-details-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; } .bil-machine-details-toolbar p{ color: var(--bil-purple-750); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .bil-machine-panel-close{ display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; color: var(--bil-ink); border: 1px solid var(--bil-border); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; } @media (hover: hover) and (pointer: fine){ .bil-machine-panel-close:hover{ color: var(--bil-purple-750); border-color: #bcaef1; background: var(--bil-purple-075); } } .bil-range-foundation{ margin-bottom: 38px; padding: 29px 30px 27px; border: 1px solid #dcd5fb; border-radius: 20px; background: radial-gradient(circle at 100% 0, rgba(105, 227, 235, .1), transparent 28%), linear-gradient(135deg, #fff, #f4f0ff); } .bil-range-foundation-header{ display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr); gap: 24px; align-items: center; } .bil-range-foundation-intro{ color: #596780; font-size: 13px; font-weight: 550; line-height: 1.68; } .bil-range-foundation-intro strong{ color: var(--bil-purple-750); } .bil-range-feature-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 23px; } .bil-range-feature{ min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid rgba(213, 205, 246, .92); border-radius: 15px; background: rgba(255, 255, 255, .78); box-shadow: 0 6px 18px rgba(48, 36, 109, .045); } .bil-range-feature-icon{ display: grid; width: 42px; height: 42px; place-items: center; color: var(--bil-purple-650); border-radius: 12px; background: var(--bil-purple-075); } .bil-range-feature:nth-child(2) .bil-range-feature-icon, .bil-range-feature:nth-child(4) .bil-range-feature-icon, .bil-range-feature:nth-child(6) .bil-range-feature-icon{ color: var(--bil-green); background: #eaf8f3; } .bil-range-feature h4{ margin: 1px 0 0; color: var(--bil-navy-950); font-size: 13px; font-weight: 900; line-height: 1.35; letter-spacing: -.015em; } .bil-range-feature p{ margin-top: 4px; color: #64718c; font-size: 11.5px; font-weight: 560; line-height: 1.55; } .bil-range-note{ display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; padding: 11px 13px; color: #5d6980; border-left: 3px solid var(--bil-green); border-radius: 0 10px 10px 0; background: rgba(234, 248, 243, .72); font-size: 11px; font-weight: 600; line-height: 1.55; } .bil-range-note svg{ flex: 0 0 auto; margin-top: 1px; color: var(--bil-green); } .bil-category{ display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .bil-category::before, .bil-category::after{ height: 1px; flex: 1; content: ""; background: var(--bil-border); } .bil-category span{ color: var(--bil-ink); font-size: 10.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .bil-machine-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .bil-machine-card{ min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bil-border); border-radius: 21px; background: #fff; box-shadow: 0 5px 22px rgba(15, 23, 42, .055); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } @media (hover: hover) and (pointer: fine){ .bil-machine-card:hover{ transform: translateY(-5px); border-color: #c4b8ef; box-shadow: 0 18px 46px rgba(83, 51, 210, .12); } } .bil-machine-media{ position: relative; height: 255px; overflow: hidden; background: #fff; } .bil-machine-media video{ width: 100%; height: 100%; object-fit: cover; } .bil-machine-badge{ position: absolute; top: 13px; left: 13px; z-index: 2; padding: 6px 10px; color: #fff; border-radius: 999px; background: rgba(9, 15, 41, .88); font-size: 9px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; backdrop-filter: blur(8px); } .bil-machine-badge-purple{ background: rgba(83, 51, 210, .92); } .bil-machine-body{ display: flex; flex: 1; flex-direction: column; padding: 23px 24px 25px; } .bil-machine-suitability{ color: var(--bil-muted); font-size: 12px; font-weight: 650; line-height: 1.55; } .bil-machine-suitability strong{ color: var(--bil-ink); font-weight: 800; } .bil-machine-name{ margin-top: 6px; color: var(--bil-navy-950); font-size: clamp(24px, 2.3vw, 31px); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; } .bil-machine-features{ display: grid; gap: 8px; margin-top: 16px; } .bil-machine-features li{ position: relative; padding-left: 25px; color: #3f4b63; font-size: 13px; font-weight: 600; line-height: 1.55; } .bil-machine-features li::before{ position: absolute; top: .22em; left: 0; width: 16px; height: 16px; content: ""; border-radius: 50%; background: #e5f6ef; box-shadow: inset 0 0 0 1px rgba(7, 139, 99, .16); } .bil-machine-features li::after{ position: absolute; top: .38em; left: 5px; width: 4px; height: 7px; content: ""; border: solid var(--bil-green); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); } .bil-finance{ width: fit-content; max-width: 100%; min-width: 188px; margin-top: 19px; padding: 12px 15px; border: 1px solid #c9bef4; border-radius: 13px; background: linear-gradient(135deg, #faf8ff, #ede8ff); } .bil-finance-label{ color: var(--bil-purple-750); font-size: 9.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .bil-finance-row{ display: flex; align-items: baseline; gap: 4px; margin-top: 4px; } .bil-finance-price{ color: var(--bil-navy-950); font-size: 31px; font-weight: 900; line-height: 1; letter-spacing: -.05em; } .bil-finance-period{ color: var(--bil-purple-650); font-size: 12px; font-weight: 750; } .bil-finance-note{ margin-top: 5px; color: var(--bil-green); font-size: 10.5px; font-weight: 750; } .bil-machine-actions{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 19px; } .bil-card-link{ display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .bil-card-link-primary{ color: #fff !important; background: linear-gradient(135deg, var(--bil-navy-800), var(--bil-purple-650)); box-shadow: 0 7px 18px rgba(83, 51, 210, .23); } .bil-card-link-secondary{ color: var(--bil-ink) !important; border: 1px solid var(--bil-border); background: #fff; } .bil-tattoo-wrap{ margin-top: 43px; } .bil-tattoo-card{ display: grid; grid-template-columns: minmax(330px, .88fr) minmax(0, 1.12fr); } .bil-tattoo-card .bil-machine-media{ height: 100%; min-height: 390px; } .bil-tattoo-card .bil-machine-body{ justify-content: center; padding: 34px 38px; } .bil-tattoo-card .bil-machine-features{ grid-template-columns: 1fr 1fr; column-gap: 22px; } .bil-ownership-bar{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 32px; overflow: visible; border: 1px solid var(--bil-border); border-radius: 16px; background: var(--bil-border); } .bil-ownership-item{ min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 13px; color: #344057; background: #fff; font-size: 12px; font-weight: 750; line-height: 1.45; text-align: center; } .bil-ownership-item:first-child{ border-radius: 15px 0 0 15px; } .bil-ownership-item:last-child{ border-radius: 0 15px 15px 0; } .bil-ownership-item svg{ flex: 0 0 auto; color: var(--bil-purple-650); } .bil-finance-disclaimer{ max-width: 900px; margin: 15px auto 0; color: #6c778d; font-size: 10.5px; line-height: 1.6; text-align: center; } /* Why choose us */ .bil-why{ padding: 92px 0 82px; background: #fff; } .bil-benefit-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--bil-border); border-radius: 22px; background: var(--bil-border); } .bil-benefit{ min-width: 0; padding: 30px 28px; background: #fff; } .bil-benefit-icon{ display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 17px; color: var(--bil-purple-650); border-radius: 15px; background: var(--bil-purple-075); } .bil-benefit p{ margin-top: 8px; color: var(--bil-muted); font-size: 13px; font-weight: 520; line-height: 1.72; } .bil-benefit-label{ display: inline-flex; margin-top: 13px; padding: 5px 9px; color: #5636bd; border-radius: 999px; background: #ede8ff; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; } .bil-extra-support{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; margin-top: 36px; padding: 30px 34px; border: 1px solid #ddd6fa; border-radius: 19px; background: linear-gradient(135deg, #fbfaff, #eee9ff); } .bil-extra-support-label{ color: var(--bil-purple-750); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .bil-extra-support h3{ margin-top: 6px; color: var(--bil-navy-950); font-size: clamp(19px, 2.1vw, 26px); font-weight: 900; line-height: 1.25; letter-spacing: -.03em; } .bil-extra-support p{ max-width: 860px; margin-top: 8px; color: #5d6980; font-size: 13px; line-height: 1.68; } /* Clinic support and supplies */ .bil-support{ padding: 92px 0; background: var(--bil-off-white); } .bil-service-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .bil-resource-card{ position: relative; min-width: 0; display: flex; min-height: 250px; flex-direction: column; padding: 27px 27px 25px; overflow: hidden; color: inherit !important; border: 1px solid var(--bil-border); border-radius: 19px; background: #fff; box-shadow: 0 5px 20px rgba(15, 23, 42, .05); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .bil-resource-card::before{ position: absolute; top: 0; right: 0; left: 0; height: 4px; content: ""; background: linear-gradient(90deg, var(--bil-purple-650), var(--bil-teal)); } .bil-resource-icon{ display: block; width: 117px; height: 117px; margin-bottom: 6px; overflow: hidden; background: #fff; } .bil-resource-icon img{ width: 100%; height: 100%; object-fit: contain; } .bil-resource-type{ color: var(--bil-purple-650); font-size: 9.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .bil-resource-card h3{ margin-top: 8px; } .bil-resource-card p{ flex: 1; margin-top: 10px; color: var(--bil-muted); font-size: 13px; line-height: 1.7; } .bil-supplies-wrap{ margin-top: 30px; padding: 28px; border: 1px solid #dcd5fb; border-radius: 20px; background: linear-gradient(135deg, #fff, #f4f0ff); } .bil-supplies-heading{ display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 21px; } .bil-supplies-heading h3{ color: var(--bil-navy-950); font-size: clamp(20px, 2.3vw, 28px); font-weight: 900; line-height: 1.22; letter-spacing: -.03em; } .bil-supplies-heading p{ max-width: 620px; color: var(--bil-muted); font-size: 12.75px; line-height: 1.65; text-align: right; } .bil-supply-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .bil-supply-link{ min-width: 0; display: flex; min-height: 176px; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 14px 19px 19px; color: var(--bil-ink) !important; border: 1px solid var(--bil-border); border-radius: 15px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .bil-supply-icon{ display: block; width: 76px; height: 76px; margin: 0 0 -2px; object-fit: contain; } .bil-supply-link strong{ color: var(--bil-navy-950); font-size: 14px; font-weight: 900; line-height: 1.35; } .bil-supply-link > span{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 9px; color: var(--bil-purple-650); font-size: 10.5px; font-weight: 800; } @media (hover: hover) and (pointer: fine){ .bil-resource-card:hover, .bil-supply-link:hover{ transform: translateY(-4px); border-color: #c4b8ef; box-shadow: 0 16px 38px rgba(83, 51, 210, .11); } } /* Testimonials */ .bil-testimonials{ padding: 92px 0; background: radial-gradient(circle at 12% 10%, rgba(105, 227, 235, .12), transparent 26%), radial-gradient(circle at 85% 70%, rgba(139, 114, 244, .24), transparent 29%), linear-gradient(135deg, var(--bil-navy-950), var(--bil-navy-800) 58%, #28146b); } .bil-rating-line{ display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 13px; color: rgba(255, 255, 255, .74); font-size: 12.5px; font-weight: 750; } .bil-rating-line span:first-child{ color: var(--bil-amber); letter-spacing: 2px; } .bil-testimonial-carousel{ position: relative; } .bil-testimonial-viewport{ overflow: hidden; } .bil-testimonial-track{ display: flex; align-items: stretch; gap: 18px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .bil-testimonial{ min-width: 0; flex: 0 0 calc((100% - 36px) / 3); display: flex; flex-direction: column; padding: 25px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px; background: rgba(255, 255, 255, .072); backdrop-filter: blur(10px); } .bil-testimonial-stars{ color: var(--bil-amber); font-size: 11px; letter-spacing: 2px; } .bil-testimonial blockquote{ position: relative; flex: 1; margin: 15px 0 0 !important; padding: 0 !important; color: #fff; border: 0 !important; border-inline-start: 0 !important; background: transparent !important; font-size: 13.25px; font-style: normal; font-weight: 520; line-height: 1.75; quotes: none; } .bil-testimonial blockquote::before, .bil-testimonial blockquote::after{ display: none !important; content: none !important; } .bil-testimonial--long blockquote{ max-height: 10.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); transition: max-height .35s ease; } .bil-testimonial--long.is-expanded blockquote{ max-height: 60em; -webkit-mask-image: none; mask-image: none; } .bil-review-toggle{ width: fit-content; margin-top: 8px; padding: 0; color: #9ceaf0; border: 0; border-bottom: 1px solid rgba(156, 234, 240, .42); background: transparent; font-size: 11.5px; font-weight: 850; line-height: 1.5; cursor: pointer; } .bil-review-toggle:hover, .bil-review-toggle:focus-visible{ color: #fff; border-bottom-color: #fff; } .bil-testimonial-person{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; } .bil-avatar{ display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg, #3e2aa0, #6b50ed); font-size: 12px; font-weight: 850; } .bil-person-name{ color: #fff; font-size: 12px; font-weight: 850; } .bil-testimonial-controls{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; } .bil-testimonial-arrow{ display: grid; width: 42px; height: 42px; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(255, 255, 255, .075); cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; } .bil-testimonial-arrow:disabled{ opacity: .35; cursor: default; } .bil-testimonial-arrow:not(:disabled):hover, .bil-testimonial-arrow:not(:disabled):focus-visible{ transform: translateY(-2px); border-color: rgba(255, 255, 255, .52); background: rgba(255, 255, 255, .14); } .bil-testimonial-dots{ display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 58px; } .bil-testimonial-dot{ width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .36); cursor: pointer; transition: width .2s ease, background .2s ease; } .bil-testimonial-dot.is-active{ width: 24px; background: #8de8ef; } .bil-demo-strip{ display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 32px; padding: 24px 30px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 17px; background: rgba(255, 255, 255, .065); } .bil-demo-strip p{ color: #a99cff; font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .bil-demo-strip strong{ display: block; margin-top: 5px; color: #fff; font-size: 16px; font-weight: 900; } /* Guides */ .bil-guides{ padding: 92px 0; background: #fff; } .bil-guide-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .bil-guide-card{ min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bil-border); border-radius: 18px; background: #fff; box-shadow: 0 5px 19px rgba(15, 23, 42, .045); transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; } @media (hover: hover) and (pointer: fine){ .bil-guide-card:hover{ border-color: #c4b8ef; box-shadow: 0 17px 39px rgba(83, 51, 210, .1); } } .bil-guide-image{ position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef0f5; } .bil-guide-image img{ width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } @media (hover: hover) and (pointer: fine){ .bil-guide-card:hover .bil-guide-image img{ transform: scale(1.04); } } .bil-guide-tag{ position: absolute; top: 11px; left: 11px; padding: 5px 9px; color: #fff; border-radius: 999px; background: rgba(63, 34, 173, .91); font-size: 8.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .bil-guide-body{ display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; } .bil-guide-category{ color: var(--bil-purple-650); font-size: 9.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .bil-guide-card h3{ margin-top: 8px; } .bil-guide-card h3 a{ color: inherit !important; } .bil-guide-card p{ flex: 1; margin-top: 9px; color: var(--bil-muted); font-size: 12.75px; line-height: 1.68; } .bil-guide-footer{ margin-top: 34px; text-align: center; } /* Final CTA */ .bil-final{ padding: 0; background: var(--bil-off-white); } .bil-final-card{ display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: 40px; align-items: center; padding: 55px 50px; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 87% 10%, rgba(105, 227, 235, .16), transparent 26%), radial-gradient(circle at 12% 82%, rgba(139, 114, 244, .22), transparent 27%), linear-gradient(135deg, var(--bil-navy-950), var(--bil-navy-800) 55%, var(--bil-purple-750)); } .bil-final-label{ color: #a99cff; font-size: 10.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .bil-final h2{ max-width: 720px; margin-top: 9px; color: #fff; font-size: clamp(29px, 3.5vw, 45px); font-weight: 900; line-height: 1.08; letter-spacing: -.045em; } .bil-final h2 span{ background: linear-gradient(135deg, #c9c0ff, #79e4eb); -webkit-background-clip: text; background-clip: text; color: transparent; } .bil-final-copy{ max-width: 670px; margin-top: 13px; color: rgba(255, 255, 255, .69); font-size: 14.5px; line-height: 1.7; } .bil-final-points{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .bil-final-points span{ display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; color: rgba(255, 255, 255, .79); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 10.5px; font-weight: 700; } .bil-final-points span::before{ width: 6px; height: 6px; content: ""; border-radius: 50%; background: #59dda7; } @media (min-width: 1101px){ /* Desktop selector: compact caption centred along the left edge. */ .bil-machine-preview-caption{ top: 50%; left: 23px; max-width: min(235px, calc(100% - 20px)); text-align: left; transform: translateY(-50%) scale(.95); transform-origin: left center; } .bil-machine-preview-caption span{ margin-top: 1px; } .bil-machine-panel-preview img{ transform: translateY(13px) scale(1.134); } .bil-machine-panel-tattoo .bil-machine-panel-preview img{ transform: translateY(13px) scale(1.202); } } @media (min-width: 651px) and (max-width: 1100px){ /* Tablet selector: left-centred caption and larger product artwork. */ .bil-machine-preview-caption{ top: 50%; left: -7px; max-width: min(225px, calc(100% - 20px)); text-align: left; transform: translateY(-50%) scale(.95); transform-origin: left center; } .bil-machine-preview-caption span{ margin-top: 1px; } .bil-machine-panel-preview img{ transform: translateY(7px) scale(1.208); } } @media (max-width: 1100px){ .bil-home{ --bil-header-overlap: 105px; } .bil-machine-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bil-testimonial{ flex-basis: calc((100% - 18px) / 2); } .bil-machine-card:last-child{ grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; } .bil-machine-card:last-child .bil-machine-media{ height: 100%; min-height: 330px; } .bil-benefit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bil-ownership-bar{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .bil-ownership-item{ border-radius: 0; } .bil-ownership-item:nth-child(1){ border-radius: 15px 0 0 0; } .bil-ownership-item:nth-child(3){ border-radius: 0 15px 0 0; } .bil-ownership-item:nth-child(4){ border-radius: 0 0 0 15px; } .bil-ownership-item:nth-child(5){ border-radius: 0 0 15px 0; } .bil-supply-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 850px){ .bil-inner{ width: min(100% - 32px, 1360px); } .bil-proof-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bil-proof-item:nth-child(3){ border-left: 0; border-top: 1px solid rgba(255, 255, 255, .11); } .bil-proof-item:nth-child(4){ border-top: 1px solid rgba(255, 255, 255, .11); } .bil-sale-panel{ grid-template-columns: 1fr; max-width: 720px; text-align: center; } .bil-sale-label{ justify-content: center; } .bil-sale-countdown{ width: 100%; min-width: 0; max-width: 430px; margin-inline: auto; } .bil-machine-selector{ grid-template-columns: 1fr; } .bil-machine-panel-summary{ min-height: 0; } .bil-machine-panel-preview{ height: 250px; } .bil-range-foundation-header, .bil-tattoo-card, .bil-final-card{ grid-template-columns: 1fr; } .bil-range-feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bil-tattoo-card .bil-machine-media{ min-height: 310px; } .bil-extra-support{ grid-template-columns: 1fr; align-items: start; } .bil-guide-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bil-guide-card:last-child{ grid-column: 1 / -1; } .bil-service-grid{ grid-template-columns: 1fr; } .bil-supplies-heading{ align-items: start; flex-direction: column; gap: 8px; } .bil-supplies-heading p{ max-width: 760px; text-align: left; } .bil-final-card{ padding: 42px 28px; border-radius: 20px 20px 0 0; } } @media (max-width: 650px){ .bil-home{ --bil-header-overlap: 72px; } .bil-hero{ min-height: auto; padding: calc(72px + var(--bil-header-overlap)) 16px 82px; } .bil-sale-panel{ gap: 15px; margin-top: 28px; padding: 16px 14px; border-radius: 15px; } .bil-sale-label{ justify-content: center; font-size: 17px; } .bil-sale-label span{ width: fit-content; } .bil-sale-text{ font-size: 11.5px; } .bil-sale-countdown{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .bil-sale-time{ min-height: 57px; padding-inline: 4px; } .bil-sale-number{ font-size: 20px; } .bil-sale-unit{ font-size: 7px; } .bil-scroll-cue-wrap{ width: calc(100% - 24px); margin-top: -24px; } .bil-machines, .bil-why, .bil-testimonials, .bil-support, .bil-guides{ padding-top: 76px; padding-bottom: 72px; } .bil-machine-selector{ gap: 16px; } .bil-machine-panel-summary{ min-height: 0; padding: 20px 20px 26px; } .bil-machine-panel-preview{ height: 255px; } .bil-machine-panel-copy{ padding: 22px 4px 0; } .bil-machine-panel-meta{ display: none; } .bil-machine-panel-preview img{ transform: translateY(59px) scale(1.166); } .bil-machine-preview-caption{ top: 4px; max-width: calc(100% - 18px); padding: 7px 10px; } .bil-machine-panel-summary h3{ margin-top: 22px; } .bil-machine-panel.is-active .bil-machine-panel-summary{ padding: 24px 22px; } .bil-machine-panel-details{ padding: 24px 20px 28px; } .bil-machine-details-toolbar{ align-items: flex-start; flex-direction: column; gap: 12px; } .bil-machine-panel-close{ width: 100%; } .bil-range-foundation{ padding: 23px 21px; } .bil-range-feature-grid{ grid-template-columns: 1fr; gap: 10px; margin-top: 19px; } .bil-range-feature{ padding: 14px; } .bil-machine-grid, .bil-benefit-grid, .bil-guide-grid, .bil-supply-grid{ grid-template-columns: 1fr; } .bil-machine-card:last-child, .bil-guide-card:last-child{ grid-column: auto; display: flex; } .bil-machine-card:last-child .bil-machine-media, .bil-machine-media{ height: 245px; min-height: 0; } .bil-tattoo-card .bil-machine-body{ padding: 25px 24px; } .bil-tattoo-card .bil-machine-features{ grid-template-columns: 1fr; } .bil-finance{ width: 100%; min-width: 0; } .bil-machine-actions{ display: grid; grid-template-columns: 1fr; } .bil-ownership-bar{ grid-template-columns: 1fr; } .bil-ownership-item, .bil-ownership-item:nth-child(1), .bil-ownership-item:nth-child(3), .bil-ownership-item:nth-child(4), .bil-ownership-item:nth-child(5){ border-radius: 0; } .bil-ownership-item:first-child{ border-radius: 15px 15px 0 0; } .bil-ownership-item:last-child{ border-radius: 0 0 15px 15px; } .bil-extra-support{ padding: 25px 23px; } .bil-supplies-wrap{ padding: 23px 20px; } .bil-resource-card{ display: grid; min-height: 0; grid-template-columns: 117px minmax(0, 1fr); grid-template-areas: "icon type" "icon title" "icon link" "copy copy"; column-gap: 17px; align-items: start; padding: 23px 21px; } .bil-resource-icon{ grid-area: icon; width: 117px; height: 117px; margin: 0; align-self: start; } .bil-resource-type{ grid-area: type; align-self: end; padding-top: 3px; } .bil-resource-card h3{ grid-area: title; margin-top: 6px; } .bil-resource-card p{ grid-area: copy; margin-top: 17px; } .bil-testimonial{ flex-basis: 100%; } .bil-demo-strip{ align-items: stretch; flex-direction: column; } } @media (max-width: 430px){ .bil-proof-item{ padding-inline: 8px; } .bil-proof-label{ font-size: 9.5px; } } @media (prefers-reduced-motion: reduce){ .bil-home *, .bil-home *::before, .bil-home *::after{ scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .bil-resource-card{ display: grid; min-height: 292px; grid-template-columns: 152px minmax(0, 1fr); gap: 22px; align-items: center; padding: 27px 25px; } .bil-resource-icon{ width: 152px; height: 152px; margin: 0; align-self: center; } .bil-resource-copy{ display: flex; min-width: 0; flex-direction: column; align-items: flex-start; } .bil-resource-card h3{ margin-top: 7px; } .bil-resource-card p{ flex: none; margin-top: 10px; } .bil-supply-link{ display: grid; min-height: 158px; grid-template-columns: 106px minmax(0, 1fr); gap: 14px; align-items: center; padding: 17px 16px; } .bil-supply-icon{ width: 106px; height: 106px; margin: 0; align-self: center; } .bil-supply-copy{ display: flex; min-width: 0; align-self: stretch; flex-direction: column; justify-content: center; } .bil-supply-copy > span{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--bil-purple-650); font-size: 10.5px; font-weight: 800; line-height: 1.42; } @media (max-width: 650px){ .bil-resource-card{ min-height: 0; grid-template-columns: 152px minmax(0, 1fr); gap: 16px; padding: 22px 19px; } .bil-resource-card p{ font-size: 12px; line-height: 1.6; } .bil-supply-link{ min-height: 148px; grid-template-columns: 106px minmax(0, 1fr); padding: 15px 16px; } } @media (max-width: 390px){ .bil-resource-card{ grid-template-columns: clamp(122px, 38vw, 152px) minmax(0, 1fr); gap: 13px; padding-inline: 16px; } .bil-resource-icon{ width: clamp(122px, 38vw, 152px); height: clamp(122px, 38vw, 152px); } .bil-supply-link{ grid-template-columns: 98px minmax(0, 1fr); gap: 12px; padding-inline: 14px; } .bil-supply-icon{ width: 98px; height: 98px; } } /* Requested subtle refinements */ .bil-card-link > i, .bil-machine-panel-close > i, .bil-supply-copy > span > i, .bil-scroll-cue > i{ flex: 0 0 auto; line-height: 1; } /* Put each benefit heading alongside its smaller icon */ .bil-benefit{ display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 27px 25px; } .bil-benefit-icon{ grid-column: 1; grid-row: 1; width: 44px; height: 44px; margin: 0; border-radius: 13px; } .bil-benefit-icon svg{ width: 24px; height: 24px; } .bil-benefit h3{ grid-column: 2; grid-row: 1; } .bil-benefit p, .bil-benefit-label{ grid-column: 1 / -1; } .bil-benefit p{ margin-top: 14px; } .bil-benefit-label{ justify-self: start; } /* Approximately 15% larger supply-card text on desktop */ @media (min-width: 651px){ .bil-supply-link strong{ font-size: 16.1px; } .bil-supply-copy > span{ font-size: 12.1px; } } @media (max-width: 650px){ /* Keep the machine-name caption fixed while moving the artwork and all following product copy/CTAs down by 20px for clearer separation. */ .bil-machine-panel-preview{ height: 255px; } .bil-machine-panel-preview img{ transform: translateY(59px) scale(1.166); } /* Add clear breathing room between both selector images and the heading, supporting copy and CTA block beneath them. */ .bil-machine-panel:not(.is-active) .bil-machine-panel-copy{ padding-top: 62px; } /* Keep resource badges and CTAs outside the image/text split for symmetry. */ .bil-resource-card{ grid-template-columns: clamp(112px, 34vw, 145px) minmax(0, 1fr); grid-template-areas: "type type" "icon title" "icon copy" "link link"; column-gap: 14px; row-gap: 7px; align-items: start; padding: 20px 18px 18px; } .bil-resource-copy{ display: contents; } .bil-resource-icon{ grid-area: icon; width: clamp(112px, 34vw, 145px); height: clamp(112px, 34vw, 145px); align-self: start; } .bil-resource-type{ grid-area: type; width: fit-content; margin-bottom: 3px; padding: 6px 9px; border-radius: 999px; background: #ede8ff; line-height: 1.2; } .bil-resource-card h3{ grid-area: title; align-self: end; margin: 0; } .bil-resource-card p{ grid-area: copy; align-self: start; margin: 3px 0 0; } .bil-benefit{ grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 24px 22px; } .bil-benefit-icon{ width: 40px; height: 40px; } .bil-benefit-icon svg{ width: 22px; height: 22px; } } /* Keep the cue measurable so its card renders intact, then cancel only the space it contributes below the hero. This makes it a true bridge: half hero, half machines section, with no separate white band between them. */ .bil-scroll-cue-wrap{ --bil-cue-flow-offset: 74px; height: auto; margin-bottom: calc(-1 * var(--bil-cue-flow-offset)); } .bil-machines{ position: relative; z-index: 1; padding-top: 230px; } .bil-machine-preview-caption{ padding-bottom: 5px; } /* Six ownership benefits: one row on desktop, two rows on tablet and a compact two-column grid on mobile. */ .bil-ownership-bar{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .bil-ownership-item, .bil-ownership-item:first-child, .bil-ownership-item:last-child, .bil-ownership-item:nth-child(1), .bil-ownership-item:nth-child(2), .bil-ownership-item:nth-child(3), .bil-ownership-item:nth-child(4), .bil-ownership-item:nth-child(5), .bil-ownership-item:nth-child(6){ border-radius: 0; } @media (min-width: 1101px){ .bil-ownership-item:first-child{ border-radius: 15px 0 0 15px; } .bil-ownership-item:last-child{ border-radius: 0 15px 15px 0; } } @media (min-width: 651px){ /* Move the service badge and CTA into the image column so the descriptive copy is no longer weighted entirely to the right. */ .bil-resource-card{ grid-template-columns: 152px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: none; column-gap: 22px; row-gap: 9px; align-items: start; } .bil-resource-copy{ display: contents; } .bil-resource-icon{ grid-area: auto; grid-column: 1; grid-row: 2; align-self: start; } .bil-resource-type{ grid-area: auto; grid-column: 1; grid-row: 1; align-self: end; width: fit-content; padding: 5px 8px; border-radius: 999px; background: #ede8ff; line-height: 1.2; } .bil-resource-card h3{ grid-area: auto; grid-column: 2; grid-row: 1; align-self: end; margin: 0; } .bil-resource-card p{ grid-area: auto; grid-column: 2; grid-row: 2 / 4; align-self: start; margin: 2px 0 0; } /* The selector artwork grows by approximately 5%; the taller preview naturally moves the tags, heading, copy and CTA down with it. */ .bil-machine-panel-meta{ display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; } .bil-machine-preview-caption{ top: 50%; left: calc(50% + 30px); max-width: calc(50% - 42px); text-align: left; transform: translateY(-50%) scale(.95); transform-origin: left center; } } @media (min-width: 1101px){ .bil-machine-panel-preview{ height: clamp(247px, 23.1vw, 284px); } .bil-machine-panel-preview img{ transform: translateY(13px) scale(1.191); } .bil-machine-panel-tattoo .bil-machine-panel-preview img{ transform: translateY(13px) scale(1.262); } /* Desktop-only supply-card tightening: 10% smaller artwork and headline, with the copy starting roughly 20px further left. */ .bil-supply-link{ grid-template-columns: 95px minmax(0, 1fr); gap: 5px; } .bil-supply-icon{ width: 95px; height: 95px; } .bil-supply-link strong{ font-size: 14.5px; } } @media (min-width: 851px) and (max-width: 1100px){ .bil-machine-panel-preview{ height: clamp(247px, 23.1vw, 254px); } .bil-machine-panel-preview img{ transform: translateY(7px) scale(1.268); } } @media (min-width: 651px) and (max-width: 850px){ .bil-machine-panel-preview{ height: 262px; } .bil-machine-panel-preview img{ transform: translateY(7px) scale(1.268); } } @media (max-width: 1100px){ .bil-ownership-bar{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .bil-ownership-item:nth-child(1){ border-radius: 15px 0 0 0; } .bil-ownership-item:nth-child(3){ border-radius: 0 15px 0 0; } .bil-ownership-item:nth-child(4){ border-radius: 0 0 0 15px; } .bil-ownership-item:nth-child(6){ border-radius: 0 0 15px 0; } } @media (max-width: 650px){ .bil-scroll-cue-wrap{ --bil-cue-flow-offset: 81px; } .bil-machines{ padding-top: 200px; } .bil-final h2{ font-size: clamp(27.55px, 7.2vw, 34px); } .bil-ownership-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .bil-ownership-item:nth-child(1){ border-radius: 15px 0 0 0; } .bil-ownership-item:nth-child(2){ border-radius: 0 15px 0 0; } .bil-ownership-item:nth-child(3), .bil-ownership-item:nth-child(4){ border-radius: 0; } .bil-ownership-item:nth-child(5){ border-radius: 0 0 0 15px; } .bil-ownership-item:nth-child(6){ border-radius: 0 0 15px 0; } } /* Latest selector, benefits and service-card refinements. */ .bil-benefit-grid{ gap: 12px; overflow: visible; border: 0; background: transparent; } .bil-benefit{ border: 1px solid #e2e6f0; border-radius: 16px; background: #fff; box-shadow: 0 7px 22px rgba(15, 23, 42, .045); } .bil-benefit:nth-child(even){ border-color: #e0d9f8; background: linear-gradient(145deg, #fbfaff, #f2efff); } .bil-benefit:nth-child(even) .bil-benefit-icon{ background: #eae4ff; } @media (min-width: 651px){ /* Align every machine caption with the tag row's left edge, while leaving the preview height and all following content in its current position. */ .bil-machine-preview-caption{ top: 8px; left: 14px; max-width: calc(100% - 28px); text-align: left; transform: none; transform-origin: left top; } .bil-resource-card{ grid-template-rows: auto 1fr auto; } .bil-resource-icon{ grid-column: 1; grid-row: 1 / 3; align-self: start; } .bil-resource-card h3{ grid-column: 2; grid-row: 1; } .bil-resource-card p{ grid-column: 2; grid-row: 2; } } @media (min-width: 1101px){ .bil-final h2{ font-size: clamp(27.55px, 3.325vw, 42.75px); } .bil-machine-panel-preview img{ transform: translateY(13px) scale(1.251); } .bil-machine-panel-tattoo .bil-machine-panel-preview img{ transform: translateY(13px) scale(1.325); } } @media (min-width: 651px) and (max-width: 1100px){ .bil-machine-panel-preview img{ transform: translateY(7px) scale(1.331); } } @media (max-width: 650px){ .bil-resource-card{ grid-template-areas: "icon title" "icon copy" "link link"; grid-template-rows: auto 1fr auto; } }

British Institute of Lasers

Professional Hair Removal and Tattoo Removal Laser Machines for UK Clinics

Compare professional hair removal laser machines and tattoo removal laser machines for UK clinics, salons and aesthetics businesses. Review current purchase prices, UK finance where applicable, online or face-to-face demonstrations, training and lifetime support before choosing a system.


4.9

Average customer rating

1,500+

Machines sold

29+ years

Industry experience

72working hrs

machine replacement support

Professional laser systems

Our Professional Machines

Start with the treatment category that fits your clinic. Open either collection to see the full machine specifications, suitability guidance, finance illustrations and ownership support.

Nu TriLaze Lite laser hair removal machine
Nu TriLaze LiteCompact and portable
Nu TriLaze Plus laser hair removal machine
Nu TriLaze PlusMost feature-rich
Nu eRays Plus laser hair removal machine
Nu eRays PlusValue-led performance
Laser hair removal 3 professional systems

Three laser hair removal machines

Compare compact, feature-rich and value-led systems designed around different room sizes, treatment workflows and clinic ambitions.

Nu Tatouage Plus laser tattoo removal machine
Nu Tatouage PlusDedicated tattoo removal system
Laser tattoo removal 1 professional system

One dedicated tattoo removal machine

Explore a Q-switched Nd:YAG system developed for black, grey and selected colour tattoos, with direct handpiece controls and flexible treatment settings.

Free course on Core of Knowledge
Bespoke training and certification
Lifetime UK support
Free digital marketing consultation
Mainland UK free delivery
Online or in-person demonstrations

Finance illustrations are from figures only and are subject to status, affordability checks, lender approval and current terms. A written quotation should be requested. Weekly figures and machine prices exclude VAT unless stated otherwise.

Why choose us

Support That Covers the Realities of Machine Ownership

A laser machine affects training, treatment delivery, maintenance and appointment continuity. Our support is designed around those practical responsibilities, not simply the point of sale.

Established in 2009

Experience across laser equipment, training, servicing and clinic support helps us give practical guidance rather than relying on specifications alone.

1,500+ machines sold

Free Course on Core of Knowledge and Bespoke Training

The included Core of Knowledge courseFoundational laser and IPL safety education covering hazards, eye and skin protection, risk controls and safe operating procedures. It supports an important safety foundation before machine-specific training. covers foundational safety. Bespoke training is then tailored to the chosen machine and may cover consultation, patch testing, settings, controls, cleaning, water changes and aftercare.

Certification on completion

Lifetime UK-Based Support

Our team remains available for operational guidance, troubleshooting, interface questions, routine maintenance advice and refresher support throughout ownership.

Support beyond installation

machine replacement support

Machine replacement support applies where a qualifying machine fault cannot be repaired within 48 working hours. The Warranty page defines the trigger, dispatch and delivery terms.

Qualifying faults

Regulatory Documentation

For every current machine, request the device-specific regulatory documentation for the exact model and legal manufacturer before relying on a regulatory claim. Clinics must also follow applicable training, insurance, safety and local-authority requirements.

Recognised regulatory review

Low Routine Maintenance and Running Costs

Hair removal systems cost approximately 1p per 200 shots. Bespoke training covers everyday checks, cleaning, water changes and the practical care needed to keep the machine in use.

Explained before purchase

Separate purchase support

Practical help beyond the machine itself

Discounted Laser Protection Adviser servicesSpecialist safety support that can help a clinic assess laser risks, document local rules and establish appropriate control measures. The exact requirements depend on the treatment setting and relevant local guidance. are included with every machine purchase. Following a hair removal machine purchase, you also receive a free digital marketing consultation focused on your brand and digital presence. These are separate ownership benefits rather than machine features.

Discuss your requirements

Customer feedback

What Customers Say About British Lasers

Feedback from customers and practitioners about our advice, demonstrations, equipment, training and ongoing support.

4.9 average customer rating

See the machines in action

Compare the range online or in person at our Coventry showroom
Book a no-obligation demo

British Lasers Knowledge Hub

Practical Reading for Better Clinic Decisions

Clear guidance on equipment selection, qualifications, insurance, treatment delivery and clinic ownership.

A practical next step

Compare the Machines in Action. Ask the Questions That Matter.

Book an online or in-person demonstration and compare the range around your space, treatment mix, workflow and expected appointment volume. There is no obligation to purchase and no need to decide on the day.

Mainland UK free delivery includedFinance options availableNo deposit required, subject to statusLifetime support included
(function () { "use strict"; var root = document.querySelector("[data-bil-home]"); if (!root || root.dataset.ready === "true") return; root.dataset.ready = "true"; /* Measure the cue rather than relying on a fixed card height. Its wrapper remains tall enough to render correctly, while the negative bottom margin removes exactly the space below the hero at every breakpoint. */ var scrollCueWrap = root.querySelector(".bil-scroll-cue-wrap"); var cueResizeFrame = null; function syncScrollCueBridge() { if (!scrollCueWrap) return; var styles = window.getComputedStyle(scrollCueWrap); var topOverlap = Math.max(0, -(parseFloat(styles.marginTop) || 0)); var flowOffset = Math.max(0, scrollCueWrap.getBoundingClientRect().height - topOverlap); scrollCueWrap.style.setProperty("--bil-cue-flow-offset", flowOffset.toFixed(2) + "px"); } syncScrollCueBridge(); window.requestAnimationFrame(syncScrollCueBridge); if (document.fonts && document.fonts.ready) { document.fonts.ready.then(syncScrollCueBridge); } window.addEventListener("resize", function () { window.cancelAnimationFrame(cueResizeFrame); cueResizeFrame = window.requestAnimationFrame(syncScrollCueBridge); }); /* Give every major section component a reveal treatment. Repeated groups are staggered and alternate direction so the motion feels varied while still sharing one timing and easing language. */ var reducePageMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; function prepareRevealGroup(selector, effects, delayStep) { var items = Array.prototype.slice.call(root.querySelectorAll(selector)); items.forEach(function (item, index) { item.classList.add("bil-reveal", effects[index % effects.length]); item.style.setProperty("--bil-reveal-delay", ((index % 4) * delayStep) + "ms"); }); } prepareRevealGroup(".bil-section-intro", ["bil-reveal-up"], 0); prepareRevealGroup(".bil-machine-selector", ["bil-reveal-scale"], 0); prepareRevealGroup(".bil-range-foundation", ["bil-reveal-left"], 0); prepareRevealGroup(".bil-machine-grid > .bil-machine-card", ["bil-reveal-left", "bil-reveal-up", "bil-reveal-right"], 90); prepareRevealGroup(".bil-ownership-bar", ["bil-reveal-up"], 0); prepareRevealGroup(".bil-finance-disclaimer", ["bil-reveal-up"], 0); prepareRevealGroup(".bil-benefit-grid > .bil-benefit", ["bil-reveal-left", "bil-reveal-up", "bil-reveal-right"], 85); prepareRevealGroup(".bil-extra-support", ["bil-reveal-scale"], 0); prepareRevealGroup(".bil-service-grid > .bil-resource-card", ["bil-reveal-left", "bil-reveal-up", "bil-reveal-right"], 100); prepareRevealGroup(".bil-supplies-wrap", ["bil-reveal-right"], 0); prepareRevealGroup(".bil-testimonial-carousel", ["bil-reveal-scale"], 0); prepareRevealGroup(".bil-demo-strip", ["bil-reveal-left"], 0); prepareRevealGroup(".bil-guide-grid > .bil-guide-card", ["bil-reveal-left", "bil-reveal-up", "bil-reveal-right"], 100); prepareRevealGroup(".bil-guide-footer", ["bil-reveal-up"], 0); prepareRevealGroup(".bil-final-card", ["bil-reveal-scale"], 0); root.querySelectorAll(".bil-reveal").forEach(function (item) { if (!item.classList.contains("bil-reveal-left") && !item.classList.contains("bil-reveal-right") && !item.classList.contains("bil-reveal-scale") && !item.classList.contains("bil-reveal-up")) { item.classList.add("bil-reveal-up"); } }); root.classList.add("bil-motion-ready"); var revealItems = Array.prototype.slice.call(root.querySelectorAll(".bil-reveal")); if (reducePageMotion || !("IntersectionObserver" in window)) { revealItems.forEach(function (item) { item.classList.add("is-visible"); }); } else { var revealObserver = new IntersectionObserver(function (entries, observer) { entries.forEach(function (entry) { if (!entry.isIntersecting) return; entry.target.classList.add("is-visible"); observer.unobserve(entry.target); }); }, { threshold: .08, rootMargin: "0px 0px -10% 0px" }); revealItems.forEach(function (item) { revealObserver.observe(item); }); } var machineSelector = root.querySelector("[data-machine-selector]"); var activeMachinePanel = null; function setMachinePanel(name, options) { if (!machineSelector) return; options = options || {}; activeMachinePanel = name || null; machineSelector.classList.toggle("has-active", Boolean(activeMachinePanel)); machineSelector.dataset.active = activeMachinePanel || ""; machineSelector.querySelectorAll("[data-machine-panel]").forEach(function (panel) { var isActive = panel.dataset.machinePanel === activeMachinePanel; var details = panel.querySelector(".bil-machine-panel-details"); var trigger = panel.querySelector("[data-machine-trigger]"); panel.classList.toggle("is-active", isActive); if (details) details.hidden = !isActive; if (trigger) trigger.setAttribute("aria-expanded", String(isActive)); }); if (options.focusTrigger && options.focusTrigger.focus) { options.focusTrigger.focus(); } } if (machineSelector) { machineSelector.querySelectorAll("[data-machine-trigger]").forEach(function (trigger) { trigger.addEventListener("click", function () { setMachinePanel(trigger.dataset.machineTrigger); window.requestAnimationFrame(function () { root.querySelector("#machines").scrollIntoView({ behavior: "smooth", block: "start" }); }); }); }); machineSelector.querySelectorAll("[data-machine-close]").forEach(function (closeButton) { closeButton.addEventListener("click", function () { var trigger = machineSelector.querySelector('[data-machine-trigger="' + closeButton.dataset.machineClose + '"]'); setMachinePanel(null, { focusTrigger: trigger }); root.querySelector("#machines").scrollIntoView({ behavior: "smooth", block: "start" }); }); }); document.addEventListener("keydown", function (event) { if (event.key !== "Escape" || !activeMachinePanel) return; var trigger = machineSelector.querySelector('[data-machine-trigger="' + activeMachinePanel + '"]'); setMachinePanel(null, { focusTrigger: trigger }); }); } root.querySelectorAll("[data-machine-carousel]").forEach(function (carousel) { var slides = Array.prototype.slice.call(carousel.querySelectorAll("[data-machine-slide]")); var previous = carousel.querySelector("[data-machine-carousel-prev]"); var next = carousel.querySelector("[data-machine-carousel-next]"); var currentIndex = 0; var timer = null; var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; function showSlide(index) { if (!slides.length) return; currentIndex = (index + slides.length) % slides.length; slides.forEach(function (slide, slideIndex) { var isActive = slideIndex === currentIndex; var video = slide.querySelector("video"); slide.classList.toggle("is-active", isActive); slide.setAttribute("aria-hidden", String(!isActive)); if (video) { if (isActive) { var playPromise = video.play(); if (playPromise && typeof playPromise.catch === "function") playPromise.catch(function () {}); } else { video.pause(); } } }); } function stopRotation() { if (timer) window.clearInterval(timer); timer = null; } function startRotation() { stopRotation(); if (reduceMotion || slides.length < 2) return; timer = window.setInterval(function () { showSlide(currentIndex + 1); }, 5500); } if (previous) previous.addEventListener("click", function () { showSlide(currentIndex - 1); startRotation(); }); if (next) next.addEventListener("click", function () { showSlide(currentIndex + 1); startRotation(); }); carousel.addEventListener("mouseenter", stopRotation); carousel.addEventListener("mouseleave", startRotation); carousel.addEventListener("focusin", stopRotation); carousel.addEventListener("focusout", function (event) { if (!carousel.contains(event.relatedTarget)) startRotation(); }); showSlide(0); startRotation(); }); root.querySelectorAll("[data-review-toggle]").forEach(function (toggle) { toggle.addEventListener("click", function () { var card = toggle.closest(".bil-testimonial--long"); if (!card) return; var expanded = card.classList.toggle("is-expanded"); toggle.setAttribute("aria-expanded", String(expanded)); toggle.textContent = expanded ? "Show less" : "Read more"; }); }); root.querySelectorAll("[data-testimonial-carousel]").forEach(function (carousel) { var track = carousel.querySelector("[data-testimonial-track]"); var slides = Array.prototype.slice.call(carousel.querySelectorAll("[data-testimonial-slide]")); var previous = carousel.querySelector("[data-testimonial-prev]"); var next = carousel.querySelector("[data-testimonial-next]"); var dotsWrap = carousel.querySelector("[data-testimonial-dots]"); var pageIndex = 0; var pageCount = 1; var perView = 3; var touchStartX = null; var resizeTimer = null; function getPerView() { if (window.matchMedia("(max-width: 650px)").matches) return 1; if (window.matchMedia("(max-width: 1100px)").matches) return 2; return 3; } function buildDots() { dotsWrap.innerHTML = ""; for (var index = 0; index = pageCount - 1; } function goToPage(nextPage, skipAnimation) { if (!track || !slides.length) return; pageIndex = Math.max(0, Math.min(nextPage, pageCount - 1)); var targetIndex = Math.min(pageIndex * perView, slides.length - 1); var target = slides[targetIndex]; var offset = target ? target.offsetLeft - track.offsetLeft : 0; if (skipAnimation) track.style.transition = "none"; track.style.transform = "translate3d(" + (-offset) + "px, 0, 0)"; if (skipAnimation) { window.requestAnimationFrame(function () { track.style.transition = ""; }); } updateControls(); } function configureCarousel() { perView = getPerView(); pageCount = Math.max(1, Math.ceil(slides.length / perView)); pageIndex = Math.min(pageIndex, pageCount - 1); buildDots(); goToPage(pageIndex, true); } if (previous) previous.addEventListener("click", function () { goToPage(pageIndex - 1); }); if (next) next.addEventListener("click", function () { goToPage(pageIndex + 1); }); carousel.addEventListener("keydown", function (event) { if (event.key === "ArrowLeft") goToPage(pageIndex - 1); if (event.key === "ArrowRight") goToPage(pageIndex + 1); }); carousel.addEventListener("touchstart", function (event) { touchStartX = event.changedTouches[0].clientX; }, { passive: true }); carousel.addEventListener("touchend", function (event) { if (touchStartX === null) return; var difference = event.changedTouches[0].clientX - touchStartX; touchStartX = null; if (Math.abs(difference) < 45) return; goToPage(pageIndex + (difference < 0 ? 1 : -1)); }, { passive: true }); window.addEventListener("resize", function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(configureCarousel, 120); }); configureCarousel(); }); root.querySelectorAll('a[href^="#"]').forEach(function (link) { link.addEventListener("click", function (event) { var target = root.querySelector(link.getAttribute("href")); if (!target) return; event.preventDefault(); var machinePanel = target.matches("[data-machine-panel]") ? target : target.closest("[data-machine-panel]"); if (machinePanel) { setMachinePanel(machinePanel.dataset.machinePanel); root.querySelector("#machines").scrollIntoView({ behavior: "smooth", block: "start" }); return; } target.scrollIntoView({ behavior: "smooth", block: "start" }); }); }); var countdown = root.querySelector("[data-bil-sale-countdown]"); if (countdown) { var deadline = Date.parse(countdown.getAttribute("data-deadline")); var salePanel = root.querySelector("[data-bil-sale]"); var saleTitle = root.querySelector("[data-bil-sale-title]"); var saleText = root.querySelector("[data-bil-sale-text]"); var daysEl = countdown.querySelector("[data-bil-days]"); var hoursEl = countdown.querySelector("[data-bil-hours]"); var minutesEl = countdown.querySelector("[data-bil-minutes]"); var secondsEl = countdown.querySelector("[data-bil-seconds]"); function twoDigits(value) { return String(value).padStart(2, "0"); } function updateCountdown() { if (!Number.isFinite(deadline)) return false; var remaining = deadline - Date.now(); if (remaining <= 0) { if (salePanel) salePanel.classList.add("is-expired"); if (saleTitle) saleTitle.innerHTML = "The July machine sale has ended"; if (saleText) saleText.textContent = "Contact our team for current machine pricing and finance options."; countdown.innerHTML = '

Sale ended

'; countdown.setAttribute("aria-label", "The July machine sale has ended"); return false; } var totalSeconds = Math.floor(remaining / 1000); var days = Math.floor(totalSeconds / 86400); var hours = Math.floor((totalSeconds % 86400) / 3600); var minutes = Math.floor((totalSeconds % 3600) / 60); var seconds = totalSeconds % 60; daysEl.textContent = twoDigits(days); hoursEl.textContent = twoDigits(hours); minutesEl.textContent = twoDigits(minutes); secondsEl.textContent = twoDigits(seconds); countdown.setAttribute("aria-label", days + " days, " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds remaining until the machine sale ends"); return true; } if (updateCountdown()) { var countdownTimer = window.setInterval(function () { if (!updateCountdown()) window.clearInterval(countdownTimer); }, 1000); } } })();
Scroll

Our site uses cookies. By using this site, you agree to the Privacy Policy and Terms of Use.