1<!doctype html> 2<html lang="en"> 3 <head> 4 5 <title>Plugins | Musik Hack</title> 6 7 <meta charset="utf-8" /> 8 <meta 9 name="viewport" 10 content="width=device-width, initial-scale=1, maximum-scale=1" 11 /> 12 <meta name="description" content="Master Plan, FUEL, SweetEQ: AAX/AU/VST3 plugins" /> 13 14 <link rel="canonical" href="https://www.musikhack.com/" /> 15 16 17
17<script> 18 window.staticFilesDir = "https://static.musikhack.com/static/website/"; 19 </script>
19 20 <link 21 id="site-theme-stylesheet" 22 rel="stylesheet" 23 href="https://static.musikhack.com/static/website/dark.2fd7c36888df.css" 24 data-light-href="https://static.musikhack.com/static/website/light.09076e69a855.css" 25 data-dark-href="https://static.musikhack.com/static/website/dark.2fd7c36888df.css" 26 data-current-theme="dark" 27 /> 28 <!-- meta open graph tags for social media sharing / imessage sharing --> 29 30 <meta 31 property="og:title" 32 content="Plugins | Musik Hack" 33 /> 34 35 <meta 36 property="og:description" 37 content="Master Plan, FUEL, SweetEQ: AAX/AU/VST3 plugins" 38 /> 39 40 <meta 41 property="og:image" 42 content="https://downloads.musikhack.com/Images/MHLogoBlackBoxed.png" 43 /> 44 45 <meta 46 property="og:url" 47 content="https://www.musikhack.com/" 48 /> 49 50 <meta property="og:type" content="website" /> 51 52
52<script src="https://static.musikhack.com/static/website/splide/js/splide.min.fb9cda81a969.js"></script>
52 53
53<script src="https://static.musikhack.com/static/website/jquery/jquery.min.4174d2e8b3e4.js"></script>
53 54
54<script src="https://static.musikhack.com/static/website/lodash/lodash_full.00c39243b4d0.js"></script>
54 55 <link 56 rel="stylesheet" 57 href="https://static.musikhack.com/static/website/splide/css/splide.min.f6a86e8018fc.css" 58 /> 59 <link rel="stylesheet" href="https://static.musikhack.com/static/website/style.8f43211ac56e.css" /> 60 <link 61 rel="icon" 62 type="image/png" 63 href="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackLogo/16/BlackPink.8a32c723b40c.png" 64 sizes="16x16" 65 /> 66 <link 67 rel="icon" 68 type="image/png" 69 href="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackLogo/32/BlackPink.0e6cd873661d.png" 70 sizes="32x32" 71 /> 72 <link 73 rel="icon" 74 type="image/png" 75 href="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackLogo/96/BlackPink.86da2846d50f.png" 76 sizes="96x96" 77 /> 78 <link 79 rel="apple-touch-icon" 80 href="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackLogo/152/BlackPink.a67f0b09aea1.png" 81 sizes="152x152" 82 /> 83
83<script type="module" src="https://static.musikhack.com/static/website/js/helper.c9a370a45d40.js"></script>
83 84
84<script> 85 if (typeof window.pixel_loaded !== "function") { 86 window.pixel_loaded = function () { 87 return typeof window.fbq === "function"; 88 }; 89 } 90 </script>
90 91
91<script> 92 window.mhMarketingConfig = { 93 enabled: true, 94 metaPixelId: "298224392717962", 95 capiEnabled: true, 96 loadMetaPixel: true, 97 googleAdsId: "AW-11158464865", 98 googleAdsSignupConversionId: "AW-11158464865/qe3NCIWP3c8YEOHS4sgp", 99 googleAdsPurchaseConversionId: "AW-11158464865/3MJMCJCDk7YZEOHS4sgp", 100 klaviyoSiteId: "XDB5bg", 101 }; 102 window.mhMarketingConsentDeclined = 103 false; 104 window.mhMarketingConsentGranted = !window.mhMarketingConsentDeclined; 105 106 window.mhClarityConfig = { 107 projectId: "yjwcdmo4yo", 108 trackingAllowed: !window.mhMarketingConsentDeclined, 109 }; 110 111 </script>
111 112 113
113<script type="module" src="https://static.musikhack.com/static/website/js/clarity.86248ff40d5d.js"></script>
113 114 115 <link rel="stylesheet" href="https://use.typekit.net/rdl5hwr.css" /> 116 117 118 <link rel="stylesheet" crossorigin href="/static/mh-cloud/assets/index-B2fDTgCc.css" /> 119 120
120<script type="application/ld+json"> 121 {"@context": "https://schema.org", "@graph": [{"@type": "Organization", "name": "Musik Hack", "url": "https://www.musikhack.com", "logo": "https://www.musikhack.comhttps://static.musikhack.com/static/website/img/Musik%20Hack/MusikHackLogo/152/BlackPink.a67f0b09aea1.png"}, {"@type": "WebSite", "name": "Musik Hack", "url": "https://www.musikhack.com"}]} 122 </script>
122 123 124 </head> 125 126 127 128 <body class=""> 129 <div id="site-wrapper"> 130 131 <!-- <div class="header-sale-banner"> 132 <p class="text-poppins" style="text-align: center"> 133 Holiday Sale: <span>50% off </span>applied at checkout 134 </p> 135 </div> --> 136 <div id="product-header"> 137 <div class="main-nav"> 138 <div class="left"> 139 <a href="/" class="logo-link"> 140 <svg 141 xmlns="http://www.w3.org/2000/svg" 142 width="101" 143 height="58" 144 viewBox="0 0 101 58" 145 fill="none" 146 > 147 <g clip-path="url(#clip0_844_304)"> 148 <path 149 fill-rule="evenodd" 150 clip-rule="evenodd" 151 d="M0.0104576 33.7244C5.74296 32.2809 0.01384 33.7329 5.74979 32.2775V36.3769C5.86577 36.7901 6.12714 37.0582 6.47323 37.2451C7.22012 37.2953 7.64374 37.0858 8.20966 36.8594C8.34086 36.808 8.4663 36.7635 8.59544 36.7146C9.18584 36.5077 9.84492 36.2466 10.4281 36.0393C11.2359 35.7524 11.9675 35.5159 12.7915 35.2194C14.1556 34.7287 15.5582 34.2325 16.9393 33.7244C17.8151 33.4019 18.6278 33.1003 19.4473 32.8078C19.7408 32.7032 19.9846 32.6489 20.2672 32.4704C20.406 32.3486 20.5103 32.2076 20.6047 32.0363C20.684 30.8719 20.6526 29.5172 20.653 28.2743C26.337 26.7453 20.6477 28.2806 26.3441 26.7309V55.7656C26.3095 55.9862 26.3256 56.2815 26.2242 56.4898C25.9896 56.9718 25.5209 57.4109 25.042 57.5982C24.6926 57.735 23.8636 57.7428 23.3539 57.743C21.6275 57.7432 21.1188 57.5832 20.7977 56.3442C20.5582 55.4201 20.6047 52.5 20.6047 51.1837V39.7531H20.5082C19.9575 39.945 19.5106 40.1128 19.0132 40.2837C17.9871 40.636 16.9418 41.0108 15.8782 41.3929C12.5581 42.5856 9.03284 43.8592 5.70167 45.1066C5.36154 45.2265 4.48736 45.5604 4.15833 45.6855C2.90536 46.1305 1.67921 46.7133 0.637436 45.3959C-0.112906 44.4473 0.0105195 43.181 0.0104576 41.4894V33.7244Z" 152 fill="#D66790" 153 /> 154 <path 155 fill-rule="evenodd" 156 clip-rule="evenodd" 157 d="M1.7845 0.00779234C3.44067 -0.00595043 4.50774 -0.0905868 5.20877 0.875926C5.84769 1.75673 5.73953 3.34417 5.73932 4.87905V17.9977C5.78867 18.0365 5.75269 18.0148 5.83577 18.0459C6.20243 17.9373 6.73442 17.707 7.13809 17.5636C8.14922 17.2045 9.21443 16.846 10.2731 16.4543C12.6342 15.5803 15.0425 14.8039 17.4594 13.8982C18.5752 13.48 19.7418 13.003 20.8837 12.596C21.3472 12.4307 21.9903 12.1798 22.471 12.0261C23.7551 11.6155 24.2908 11.2502 25.4734 12.1289C25.6075 12.2284 25.7062 12.3689 25.803 12.4995C26.4858 13.4189 26.3336 15.1769 26.3336 16.792V26.2933C20.6502 27.8269 26.329 26.2912 20.6376 27.8312L20.5942 21.4221C20.5748 21.3519 20.5491 21.2837 20.5175 21.2181C20.2999 20.9047 20.1274 20.6224 19.7262 20.5539C19.3274 20.4858 18.707 20.7157 18.4722 20.7951C17.9398 20.9744 17.7469 21.074 17.1698 21.2773C14.5339 22.2066 11.8291 23.1853 9.21197 24.1711C8.39496 24.4788 6.26247 24.9754 5.88409 25.5699C5.61573 25.9912 5.71459 27.0035 5.71438 27.6562C5.67128 31.7727 5.71588 27.6646 5.71626 31.7665L0 33.2866V1.98523C0.0291618 1.55867 0.199471 1.00577 0.434068 0.683014C0.759741 0.235065 1.24934 0.109564 1.7845 0.00779234Z" 158 fill="#F7F4F2" 159 /> 160 <path 161 d="M46.5638 32.89V12.4336C46.5638 11.9043 46.1279 11.5306 45.6298 11.5306H42.485C41.8 11.5306 41.5198 11.8109 41.3641 12.4336L38.6553 23.9228C38.593 24.203 38.3439 24.2342 38.2816 23.9228L35.6039 12.4336C35.4794 11.842 35.1369 11.5306 34.5142 11.5306H31.2449C30.591 11.5306 30.373 11.7486 30.373 12.4024V32.8589C30.373 33.3259 30.7778 33.7619 31.2449 33.7619H32.7394C33.2064 33.7619 33.6423 33.3571 33.6423 32.8589V18.5363C33.6423 18.2249 33.798 18.256 33.8603 18.5363L37.1919 32.89C37.3164 33.3882 37.8146 33.7619 38.3128 33.7619H38.6241C39.1223 33.7619 39.5893 33.3571 39.7139 32.8589L43.0766 18.5674C43.1389 18.2872 43.2945 18.2872 43.2945 18.5674V32.8589C43.2945 33.3571 43.6682 33.7619 44.1664 33.7619H45.6298C46.0657 33.7619 46.5638 33.4194 46.5638 32.89Z" 162 fill="#F7F4F2" 163 /> 164 <path 165 d="M61.8829 26.6005V12.4647C61.8829 11.9665 61.5092 11.5306 60.9799 11.5306H59.3608C58.8315 11.5306 58.4579 11.9043 58.4579 12.4336V27.161C58.4579 29.8387 57.7729 30.8973 56.0293 30.8973C54.2856 30.8973 53.5695 29.8076 53.5695 27.161V12.4336C53.5695 11.8731 53.227 11.5306 52.6666 11.5306H51.0163C50.5182 11.5306 50.1445 11.9665 50.1445 12.4336V26.6317C50.1445 29.4339 50.4559 30.8039 51.4211 32.1428C52.3552 33.4194 54.0366 34.0732 56.0293 34.1043C58.022 34.1355 59.5788 33.4505 60.6063 32.1428C61.5715 30.9285 61.8829 29.4651 61.8829 26.6005Z" 166 fill="#F7F4F2" 167 /> 168 <path 169 d="M77.1087 28.4687C77.1087 24.9192 74.8046 23.3624 72.3137 21.4008L70.7881 20.1865C69.1379 18.8788 68.484 17.8824 68.484 16.6681C68.484 15.3604 69.4492 14.4263 70.6947 14.4263C71.9401 14.4263 72.8431 15.2358 73.4035 16.8549C73.5592 17.322 73.7771 17.5399 74.1508 17.5399C74.2442 17.5399 74.3999 17.5088 74.5244 17.4776L76.0812 17.0106C76.486 16.886 76.7662 16.6058 76.7662 16.2011C76.7662 15.5472 75.3339 11.2193 70.7258 11.2193C67.332 11.2193 64.9033 13.4299 64.9033 16.6681C64.9033 19.0967 66.2111 20.8092 68.017 22.2415L70.2588 24.0162C72.8431 26.0712 73.5281 26.9742 73.5281 28.3753C73.5281 29.8698 72.5006 30.8973 71.006 30.8973C69.4181 30.8973 68.266 29.8387 67.7367 27.8148C67.6122 27.2855 67.3942 27.0987 67.0517 27.0987C66.8961 27.0987 66.6781 27.161 66.429 27.2233L65.1836 27.5969C64.7165 27.7214 64.374 28.0328 64.374 28.4687C64.374 29.2471 65.3704 34.1043 71.006 34.1043C74.649 34.1043 77.1087 31.8314 77.1087 28.4687Z" 170 fill="#F7F4F2" 171 /> 172 <path 173 d="M83.5225 32.9212V12.3713C83.5225 11.9354 83.0866 11.5306 82.6507 11.5306H80.9382C80.44 11.5306 80.0664 11.9043 80.0664 12.4024V32.9212C80.0664 33.3882 80.5023 33.7619 80.9382 33.7619H82.6196C83.0555 33.7619 83.5225 33.3571 83.5225 32.9212Z" 174 fill="#F7F4F2" 175 /> 176 <path 177 d="M100.025 32.8589L95.2921 20.4667C95.043 19.8128 95.1364 19.3769 95.51 18.7231L99.153 12.4336C99.3709 12.0599 99.3086 11.5306 98.7793 11.5306H96.88C96.195 11.5306 95.7903 11.8731 95.4789 12.4336L91.4623 19.8751C91.3066 20.1865 90.9953 20.2176 90.9953 19.8751V12.4336C90.9953 11.9043 90.6217 11.5306 90.0923 11.5306H88.4421C88.0062 11.5306 87.5703 11.9043 87.5703 12.4024V32.89C87.5703 33.3882 88.0062 33.7619 88.4421 33.7619H90.0923C90.5905 33.7619 90.9953 33.3882 90.9953 32.89V27.3478C90.9953 25.1683 91.9916 23.8605 92.521 23.8605C92.77 23.8605 93.1125 23.954 93.1748 24.1719L96.2884 32.8589C96.5064 33.4816 96.8178 33.7619 97.5027 33.7619H99.4955C99.9936 33.7619 100.212 33.3259 100.025 32.8589Z" 178 fill="#F7F4F2" 179 /> 180 <path 181 d="M42.1425 56.7857V36.2981C42.1425 35.8933 41.6443 35.4263 41.2707 35.4263H39.5582C39.1534 35.4263 38.6864 35.8933 38.6864 36.3292V43.7708C38.6864 44.1444 38.1571 44.6737 37.7835 44.6737H34.6698C34.2339 44.6737 33.798 44.2067 33.798 43.7708V36.3292C33.798 35.8933 33.2998 35.4263 32.8951 35.4263H31.2449C30.7778 35.4263 30.373 35.8622 30.373 36.3292V56.7857C30.373 57.2216 30.8401 57.6575 31.2449 57.6575H32.8951C33.2998 57.6575 33.798 57.1905 33.798 56.7857V48.846C33.798 48.3789 34.1717 47.8807 34.6698 47.8807H37.7835C38.2816 47.8807 38.6864 48.3789 38.6864 48.8148V56.7857C38.6864 57.2216 39.1534 57.6575 39.5582 57.6575H41.2396C41.6132 57.6575 42.1425 57.1593 42.1425 56.7857Z" 182 fill="#F7F4F2" 183 /> 184 <path 185 d="M57.648 56.7546L53.538 36.3292C53.4135 35.7376 53.071 35.4263 52.4482 35.4263H49.4903C48.8987 35.4263 48.5562 35.7065 48.4628 36.267L44.5085 56.7546C44.4151 57.2216 44.6642 57.6575 45.1935 57.6575H46.8126C47.3419 57.6575 47.7467 57.315 47.8712 56.7857L48.4628 53.7343C48.5251 53.3296 48.9921 52.8003 49.4903 52.8003H52.4482C53.0087 52.8003 53.4135 53.1739 53.538 53.7343L54.1607 56.7546C54.2541 57.2839 54.5966 57.6575 55.2194 57.6575H56.8696C57.3989 57.6575 57.7414 57.315 57.648 56.7546ZM52.6351 48.7837C52.7285 49.3753 52.4482 49.6555 51.8878 49.6555H50.113C49.6149 49.6555 49.2101 49.3753 49.3346 48.846L50.798 40.6883C50.8292 40.3769 51.0783 40.4392 51.1405 40.6572L52.6351 48.7837Z" 186 fill="#F7F4F2" 187 /> 188 <path 189 d="M71.815 50.7453C71.815 50.1848 71.4413 49.8423 70.8809 49.8423H69.293C68.7636 49.8423 68.39 50.1848 68.39 50.7141C68.3277 53.4541 67.4248 54.793 65.6812 54.793C63.7819 54.793 63.128 53.5787 63.128 49.998V42.6499C63.128 39.474 63.7819 38.2908 65.65 38.2908C67.3002 38.2908 68.2343 39.5051 68.3277 41.8092C68.3589 42.2762 68.7636 42.681 69.2307 42.681H70.8186C
18971.2545 42.681 71.7527 42.2762 71.7527 41.8092C71.7527 37.637 69.4486 35.0838 65.6812 35.0838C63.6262 35.0838 62.0071 35.7999 60.9485 37.1699C59.921 38.5088 59.6719 39.6919 59.6719 43.3349V49.531C59.6719 52.8937 59.921 54.0457 60.7616 55.5091C61.6957 57.0659 63.5016 58 65.7123 58C69.6977 58 71.815 55.4468 71.815 50.7453Z" 190 fill="#F7F4F2" 191 /> 192 <path 193 d="M87.3832 56.7546L82.6505 44.3624C82.4014 43.7085 82.4948 43.2726 82.8684 42.6187L86.5114 36.3292C86.7293 35.9556 86.667 35.4263 86.1377 35.4263H84.2384C83.5534 35.4263 83.1487 35.7688 82.8373 36.3292L78.8207 43.7708C78.6651 44.0821 78.3537 44.1133 78.3537 43.7708V36.3292C78.3537 35.7999 77.9801 35.4263 77.4507 35.4263H75.8005C75.3646 35.4263 74.9287 35.7999 74.9287 36.2981V56.7857C74.9287 57.2839 75.3646 57.6575 75.8005 57.6575H77.4507C77.9489 57.6575 78.3537 57.2839 78.3537 56.7857V51.2435C78.3537 49.0639 79.35 47.7562 79.8794 47.7562C80.1285 47.7562 80.4709 47.8496 80.5332 48.0676L83.6468 56.7546C83.8648 57.3773 84.1762 57.6575 84.8611 57.6575H86.8539C87.352 57.6575 87.57 57.2216 87.3832 56.7546Z" 194 fill="#F7F4F2" 195 /> 196 </g> 197 <defs> 198 <clipPath id="clip0_844_304"> 199 <rect width="100.091" height="58" fill="white" /> 200 </clipPath> 201 </defs> 202 </svg> 203 </a> 204 </div> 205 <div class="header-right"> 206 <div class="header-browse"> 207 <div id="plugins-nav-button" class="plugins nav-text-16"> 208 <div>Products</div> 209 <svg 210 id="dropdown-icon" 211 class="dropdown-icon" 212 xmlns="http://www.w3.org/2000/svg" 213 width="15" 214 height="15" 215 fill="#F7F4F2"
216 viewBox="0 0 256 256" 217 > 218 <path 219 d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" 220 ></path> 221 </svg> 222 </div> 223 <a href="/blog" class="browse-item nav-text-16"> Blog </a> 224 <a 225 href="/demo" 226 class="browse-item nav-text-16 header-desktop-label" 227 style="color: var(--pink-color, #d66790); font-weight: 600; opacity: 1" 228 >Try for Free</a 229 > 230 <a 231 href="/demo" 232 class="browse-item nav-text-16 header-mobile-label" 233 style="color: var(--pink-color, #d66790); font-weight: 600" 234 >Demo</a 235 > 236 </div> 237 238 <a href="/hyfi" class="account-button hyfi-launch-button button-text-16"> 239 <span class="hyfi-launch-label">Launch HyFi</span> 240 <span class="hyfi-launch-mobile-label nav-text-16">HyFi</span> 241 <svg 242 class="hyfi-launch-arrow" 243 xmlns="http://www.w3.org/2000/svg" 244 width="20" 245 height="20"
246 viewBox="0 0 256 256" 247 fill="none" 248 aria-hidden="true" 249 > 250 <path 251 d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" 252 fill="#F7F4F2" 253 /> 254 </svg> 255 </a> 256 <a href="/account" class="account-button button-text-16"> 257 Account 258 <svg 259 xmlns="http://www.w3.org/2000/svg" 260 width="20" 261 height="20" 262 viewBox="0 0 20 20" 263 aspect-ratio="1/1" 264 fill="none" 265 > 266 <path 267 d="M10 1.5625C8.33122 1.5625 6.69992 2.05735 5.31238 2.98448C3.92484 3.9116 2.84338 5.22936 2.20477 6.77111C1.56616 8.31286 1.39907 10.0094 1.72463 11.6461C2.05019 13.2828 2.85379 14.7862 4.03379 15.9662C5.2138 17.1462 6.71721 17.9498 8.35393 18.2754C9.99064 18.6009 11.6871 18.4338 13.2289 17.7952C14.7706 17.1566 16.0884 16.0752 17.0155 14.6876C17.9427 13.3001 18.4375 11.6688 18.4375 10C18.435 7.763 17.5453 5.61833 15.9635 4.03653C14.3817 2.45473 12.237 1.56498 10 1.5625ZM6.21641 15.357C6.65163 14.7619 7.22107 14.2779 7.87849 13.9442C8.5359 13.6106 9.26276 13.4367 10 13.4367C10.7373 13.4367 11.4641 13.6106 12.1215 13.9442C12.7789 14.2779 13.3484 14.7619 13.7836 15.357C12.6778 16.1412 11.3556 16.5625 10 16.5625C8.64436 16.5625 7.32221 16.1412 6.21641 15.357ZM7.8125 9.375C7.8125 8.94235 7.9408 8.51942 8.18116 8.15969C8.42153 7.79996 8.76317 7.51958 9.16288 7.35401C9.5626 7.18845 10.0024 7.14513 10.4268 7.22953C10.8511 7.31394 11.2409 7.52228 11.5468 7.8282C11.8527 8.13413 12.0611 8.52391 12.1455 8.94824C12.2299 9.37257 12.1866 9.81241 12.021 10.2121C11.8554 10.6118 11.575 10.9535 11.2153 11.1938C10.8556 11.4342 10.4327 11.5625 10 11.5625C9.41984 11.5625 8.86344 11.332 8.45321 10.9218C8.04297 10.5116 7.8125 9.95516 7.8125 9.375ZM15.1563 14.0578C14.5486 13.2849 13.7741 12.6595 12.8906 12.2281C13.4537 11.658 13.8355 10.934 13.9881 10.1474C14.1408 9.36074 14.0573 8.54653 13.7484 7.80718C13.4394 7.06783 12.9187 6.43637 12.2517 5.99223C11.5847 5.5481 10.8013 5.31112 10 5.31112C9.19869 5.31112 8.41528 5.5481 7.74831 5.99223C7.08135 6.43637 6.56062 7.06783 6.25165 7.80718C5.94267 8.54653 5.85925 9.36074 6.01187 10.1474C6.16449 10.934 6.54634 11.658 7.10938 12.228
2671C6.22592 12.6595 5.4514 13.2849 4.84375 14.0578C4.08051 13.0903 3.60512 11.9274 3.472 10.7022C3.33888 9.47711 3.55341 8.23925 4.09104 7.13037C4.62867 6.02148 5.46767 5.08639 6.51199 4.43212C7.55631 3.77786 8.76375 3.43086 9.9961 3.43086C11.2284 3.43086 12.4359 3.77786 13.4802 4.43212C14.5245 5.08639 15.3635 6.02148 15.9012 7.13037C16.4388 8.23925 16.6533 9.47711 16.5202 10.7022C16.3871 11.9274 15.9117 13.0903 15.1484 14.0578H15.1563Z" 268 fill="#F7F4F2" 269 /> 270 </svg> 271 </a> 272 </div> 273 </div> 274 <div id="nav-dropdown" class="dropdown"> 275 <a 276 href="/products/masterplan" 277 id="master-plan-dropdown-item" 278 class="master-plan-dropdown-item" 279 > 280 <div class="dropdown-text-container-mp"> 281 <div class="dropdown-item-logo-row"> 282 <svg 283 xmlns="http://www.w3.org/2000/svg" 284 width="236" 285 height="32" 286 viewBox="0 0 236 32" 287 fill="none" 288 class="master-plan-logo-light" 289 > 290 <g clip-path="url(#clip0_560_2295)"> 291 <path 292 fill-rule="evenodd" 293 clip-rule="evenodd" 294 d="M231.027 30.5573V18.2701C231.027 13.5103 229.149 11.2725 225.394 11.2725C221.68 11.2725 219.435 13.9984 219.435 18.2298V30.5573H215.189V8.01751H219.149V10.4182H219.231C220.904 8.26161 223.23 7.40727 225.843 7.40727C231.272 7.40727 235.271 10.8246 235.271 17.0496V30.5573H231.027ZM205.889 27.0581H205.808C204.215 29.7438 201.358 31.1266 198.133 31.1266C191.521 31.1266 186.133 26.1629 186.133 19.6535C186.133 12.4521 191.317 7.40727 197.971 7.40727C201.277 7.40727 204.052 8.62775 205.808 11.1907H205.889V8.01751H210.134V30.5573H205.889V27.0581ZM198.093 11.2725C193.848 11.2725 190.378 14.8937 190.378 19.3283C190.378 23.5597 193.848 27.262 198.093 27.262C202.501 27.262 205.971 23.5999 205.971 19.3283C205.971 14.9339 202.787 11.2725 198.093 11.2725ZM178.084 0.449951H182.33V30.5573H178.084V0.449951ZM164.98 18.6771H160.571V30.5573H156.163V0.449951H164.939C171.429 0.449951 175.552 3.66407 175.552 9.56385C175.552 15.463 171.51 18.6771 164.98 18.6771ZM164.898 4.47813H160.571V14.649H164.939C168.817 14.649 171.143 12.8182 171.143 9.56385C171.143 6.26796 168.735 4.47813 164.898 4.47813ZM135.389 17.904V30.5573H131.143V8.01751H135.103V10.052H135.185C136.205 8.54659 137.96 7.57021 140.94 7.40727V11.7607C137.266 11.8828 135.389 14.1205 135.389 17.904ZM118.422 27.262C120.912 27.262 123.32 26.1629 124.953 24.2511V29.0109C123.279 30.354 120.912 31.1266 117.932 31.1266C111.483 31.1266 106.748 26.0818 106.748 19.2465C106.748 12.3301 111.85 7.40727 118.096 7.40727C122.626 7.40727 126.423 9.76706 128.586 13.6323L114.136 25.8786C115.483 26.8141 116.789 27.262 118.422 27.262ZM123.32 13.2662C122.055 12.0048 120.096 11.2725 118.259 11.2725C114.218 11.2725 110.993 14.4866 110.993 19.0842C110.993 20.5896 111.116 21.6063 111.728 23.1117L123.32 13.2662ZM98.7366 11.8828H95.6749V8.01751H98.7366V0.449951H102.982V30.5573H98.7366V11.8828ZM94.5172 23.9258C94.5172 28.2786 91.3336 31.1266 86.925 31.1266C82.8433 31.1266 78.9251 28.3604 78.9251 23.1526H83.1696C83.3741 25.8786 84.762 27.262 87.0064 27.262C88.9662 27.262 90.272 26.0006 90.272 24.1699C90.272 22.6235 89.0886 21.6063 86.4352 20.7519C80.8842 19.0024 79.9451 16.6023 79.9451 14.0387C79.9451 10.052 83.3331 7.40727 87.0475 7.40727C90.8028 7.40727 93.864 10.0112 93.9864 13.9984H89.7412C89.5374 12.3709 88.5988 11.2725 86.8436 11.2725C85.2108 11.2725 84.1902 12.3709 84.1902 13.6726C84.1902 15.5851 86.1493 16.1544 88.3943 16.8464C91.5785 17.8228 94.5172 19.7347 94.5172 23.9258ZM71.1958 27.0581H71.1144C69.5226 29.7438 66.6653 31.1266 63.4408 31.1266C56.8281 3
2941.1266 51.44 26.1629 51.44 19.6535C51.44 12.4521 56.6243 7.40727 63.2773 7.40727C66.5833 7.40727 69.3591 8.62775 71.1144 11.1907H71.1958V8.01751H75.4409V30.5573H71.1958V27.0581ZM63.3997 11.2725C59.1546 11.2725 55.6851 14.8937 55.6851 19.3283C55.6851 23.5597 59.1546 27.262 63.3997 27.262C67.8084 27.262 71.2778 23.5999 71.2778 19.3283C71.2778 14.9339 68.0937 11.2725 63.3997 11.2725ZM42.9986 7.32611H42.9166L26.2629 30.5573H22.9979V7.32611H22.9159L6.26221 30.5573H0.670166L22.8345 0.449951H27.4059V21.3219H27.488L42.8352 0.449951H47.4067V30.5573H42.9986V7.32611Z" 295 fill="url(#paint0_linear_560_2295)" 296 stroke="#6E6136" 297 /> 298 </g> 299 <defs> 300 <linearGradient 301 id="paint0_linear_560_2295" 302 x1="117.971" 303 y1="0.449951" 304 x2="117.971" 305 y2="31.1266" 306 gradientUnits="userSpaceOnUse" 307 > 308 <stop stop-color="#9C8B5D" /> 309 <stop offset="1" stop-color="#8F7F4E" /> 310 </linearGradient> 311 <clipPath id="clip0_560_2295"> 312 <rect width="236" height="32" fill="white" /> 313 </clipPath> 314 </defs> 315 </svg> 316 </div> 317 <div class="dropdown-item-copy-row"> 318 <span class="dropdown-item-text h6-light" 319 >
319Our flagship<span class="desktop-only-show">, </span 320 ><span class="desktop-only-show">all-in-one</span> mastering 321 plugin</span 322 > 323 </div> 324 </div> 325 <!-- prettier-ignore --> 326 <img 327 class="dropdown-item-image-master-plan" 328 src="https://static.musikhack.com/static/website/img/Musik Hack/MP_Light_Screen_v15.9bcbc492875b.jpg" 329 alt="Master Plan Plugin" 330 /> 331 </a> 332 <a 333 href="/products/fuel" 334 id="fuel-dropdown-item" 335 class="fuel-dropdown-item" 336 > 337 <div class="dropdown-text-container-fuel"> 338 <div class="dropdown-item-logo-row"> 339 <!-- prettier-ignore --> 340 <img class="fuel-hires-logo" src="https://static.musikhack.com/static/website/img/Fuel/fuel_hires_logo.d84b4ce7a3f2.png" alt="Fuel Logo" /> 341 </div> 342 <div class="dropdown-item-copy-row"> 343 <span class="dropdown-item-text h6-light" 344 >Swiss Army Knife of maximization</span 345 > 346 </div> 347 </div> 348 <!-- prettier-ignore --> 349 <img 350 class="dropdown-item-image-fuel" 351 src="https://static.musikhack.com/static/website/img/Fuel/fuel.dcea72b72e73.jpg" 352 alt="Fuel Image" 353 /> 354 </a> 355 <a 356 href="/products/sweeteq" 357 id="sweeteq-dropdown-item" 358 class="sweeteq-dropdown-item" 359 > 360 <div class="dropdown-text-container-sweeteq"> 361 <div class="dropdown-item-logo-row"> 362 <!-- prettier-ignore --> 363 <img class="sweeteq-logo" src="https://static.musikhack.com/static/website/img/SweetEQ/SweetEQLogoPink.74163f301e77.png" alt="SweetEQ Logo" /> 364 </div> 365 <div class="dropdown-item-copy-row"> 366 <span class="dropdown-item-text h6-light" 367 >Full-color <br /> 368 saturating EQ</span 369 > 370 </div> 371 </div> 372 <!-- prettier-ignore --> 373 <img 374 class="dropdown-item-image-sweeteq" 375 src="https://static.musikhack.com/static/website/img/SweetEQ/SweetEQScreenshotDarkPurpleAccent.80f63e9daf94.jpg" 376 alt="SweetEQ Plugin" 377 /> 378 </a> 379 <a 380 href="/products/hyfi" 381 id="hyfi-dropdown-item" 382 class="hyfi-dropdown-item" 383 > 384 <div class="dropdown-text-container-hyfi"> 385 <div class="dropdown-item-logo-row"> 386 <img 387 class="hyfi-dropdown-logo" 388 src="https://static.musikhack.com/static/website/img/HyFi/HYFI.cf520c706fa6.svg" 389 alt="HyFi" 390 /> 391 </div> 392 <div class="dropdown-item-copy-row"> 393 <span class="dropdown-item-text h6-light" 394 >Online Mastering that preserves your mix</span 395 > 396 </div> 397 </div> 398 <img 399 class="hyfi-dropdown-image" 400 src="https://static.musikhack.com/static/website/img/HyFi/HyFi_Header_Peeking_Preview.5fab134e4179.png" 401 alt="HyFi preview" 402 /> 403 </a> 404 </div> 405 </div> 406 407 408 <div id="pink-dividing-line"></div> 409 410 <!-- prettier-ignore --> 411 412 413<!-- prettier-ignore --> 414
415<script type="module" src="/static/mh-cloud/assets/index-B2NzXe39.js"></script>
415 416 417<!-- prettier-ignore -->
418<script id="account-init" type="application/json">{"userId": null, "userIsAuthenticated": false, "userIsSuperuser": false, "userIsOnMailingList": false, "userHasHyFiAdvancedViewAccess": false, "userEmail": null, "cloudUserId": null, "cloudUserStatus": null, "cloudUserCredits": null, "userToken": null, "hyfiSignupAllowed": true, "variant": null, "anonymousHyfiMode": false, "hyfiAccountCreationRequired": false, "hyfiLatestTermsCommitHash": "d6508bd", "hyfiAcceptedTermsHashes": [], "hasAcceptedLatestHyfiTerms": false}</script>
vendor: 1 bytes, line 418
418
419<script id="sample-player-init" type="application/json">{}</script>
vendor: 1 bytes, line 419
419
420<script id="spotlight-reel-init" type="application/json">{}</script>
420 421 422<div 423 id="product-page" 424 style="--hyfi-accent-start: #6f98ff; --hyfi-accent-end: #00b8f0; --hyfi-accent-start-rgb: 111 152 255; --hyfi-accent-end-rgb: 0 184 240;" 425> 426 <div class="content-block hero-block"> 427 <div class="hero-container"> 428 <div class="hero-content"> 429 <div class="hero-testimonials"> 430 <div class="testimonial-avatars"> 431 <img 432 class="avatar-image" 433 src="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/DamienLewis.d46ac6f4f5d8.jpg" 434 alt="" 435 /> 436 <img 437 class="avatar-image overlapped" 438 src="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/MarkParfitt.d862cace2684.jpg" 439 alt="" 440 /> 441 <img 442 class="avatar-image overlapped" 443 src="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/SeanMinor.b73140299b90.jpg" 444 alt="" 445 /> 446 </div> 447 <h6 class="opacity-64">Join 30,000+ creatives using Master Plan</h6> 448 </div> 449 <h1> 450 RELEASE READY <br /> 451 IN MINUTES 452 </h1> 453 <h6 class="centered-mobile"> 454 Our flagship, all-in-one mastering plugin 455 </h6> 456 <!-- prettier-ignore --> 457 <!-- prettier-ignore --> 458<a 459 id="" 460 href="/products/masterplan" 461 class="new-button-container hero-cta hero-cta--desktop" 462 style="--accent-color: #d66790; " 463 464 465 466 467> 468 <p 469 class="text-poppins text-button" 470 style="" 471 > 472 Explore Master Plan 473 </p> 474 <div class="new-button-arrow-box"> 475 <svg 476 width="14" 477 height="12" 478 viewBox="0 0 14 12" 479 fill="none" 480 xmlns="http://www.w3.org/2000/svg" 481 > 482 <path 483 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 484 fill="#F7F4F2" 485 /> 486 </svg> 487 </div> 488</a> 489<style> 490 /* Button Styles */ 491 .new-button-container { 492 position: relative; 493 overflow: hidden; 494 cursor: pointer; 495 height: 56px; 496 display: flex; 497 flex-direction: row; 498 align-items: center; 499 justify-content: center; 500 background-color: var(--accent-color); 501 border-radius: 8px; 502 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 503 gap: 20px; 504 text-decoration: none; 505 } 506 .new-button-container > p { 507 position: relative; 508 z-index: 2; 509 transition: all 0.4s ease-in-out; 510 } 511 .new-button-arrow-box { 512 position: absolute; 513 top: 4px; 514 right: 4px; 515 width: 48px; 516 height: 48px; 517 border-radius: 6px; 518 background-color: rgba(10, 10, 10, 0.4); 519 transition: all 0.2s ease-in-out; 520 z-index: 1; 521 display: flex; 522 flex-direction: row-reverse; 523 justify-content: flex-start; 524 align-items: center; 525 padding-right: 17px; 526 } 527 .new-button-container:hover .new-button-arrow-box { 528 width: calc(100% - 8px); 529 height: calc(100% - 8px); 530 border-radius: 6px; 531 } 532 533 /* Rent to Own Button Styles */ 534 .btn-rto { 535 background-color: transparent; 536 box-shadow: inset 0 0 0 1px var(--accent-color); 537 } 538 539 .btn-rto > p { 540 color: var(--accent-color); 541 } 542 543 .btn-rto .new-button-arrow-box { 544 background-color: transparent; 545 box-shadow: inset 0 0 0 1px var(--accent-color); 546 } 547 548 .btn-rto:hover .new-button-arrow-box { 549 background-color: transparent; 550 } 551 552 .btn-rto svg path { 553 fill: var(--accent-color); 554 } 555</style> 556 557 </div> 558 <div class="hero-image-wrapper"> 559 <div class="hero-image-container"> 560 <a class="hero-image-inner" href="/products/masterplan"> 561 <img 562 class="hero-image" 563 src="https://static.musikhack.com/static/website/img/Musik Hack/MP_Light_Screen_v15.9bcbc492875b.jpg" 564 alt="" 565 /> 566 </a> 567 </div> 568 </div> 569 <!-- Mobile CTA: shows under hero image on small screens --> 570 <!-- prettier-ignore --> 571 <!-- prettier-ignore --> 572<a 573 id="" 574 href="/products/masterplan" 575 class="new-button-container hero-cta hero-cta--mobile" 576 style="--accent-color: #d66790; " 577 578 579 580 581> 582 <p 583 class="text-poppins text-button" 584 style="" 585 > 586 Explore Master Plan 587 </p> 588 <div class="new-button-arrow-box"> 589 <svg 590 width="14" 591 height="12"
592 viewBox="0 0 14 12" 593 fill="none" 594 xmlns="http://www.w3.org/2000/svg" 595 > 596 <path 597 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 598 fill="#F7F4F2" 599 /> 600 </svg> 601 </div> 602</a> 603<style> 604 /* Button Styles */ 605 .new-button-container { 606 position: relative; 607 overflow: hidden; 608 cursor: pointer; 609 height: 56px; 610 display: flex; 611 flex-direction: row; 612 align-items: center; 613 justify-content: center; 614 background-color: var(--accent-color); 615 border-radius: 8px; 616 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 617 gap: 20px; 618 text-decoration: none; 619 } 620 .new-button-container > p { 621 position: relative; 622 z-index: 2; 623 transition: all 0.4s ease-in-out; 624 } 625 .new-button-arrow-box { 626 position: absolute; 627 top: 4px; 628 right: 4px; 629 width: 48px; 630 height: 48px; 631 border-radius: 6px; 632 background-color: rgba(10, 10, 10, 0.4); 633 transition: all 0.2s ease-in-out; 634 z-index: 1; 635 display: flex; 636 flex-direction: row-reverse; 637 justify-content: flex-start; 638 align-items: center; 639 padding-right: 17px; 640 } 641 .new-button-container:hover .new-button-arrow-box { 642 width: calc(100% - 8px); 643 height: calc(100% - 8px); 644 border-radius: 6px; 645 } 646 647 /* Rent to Own Button Styles */ 648 .btn-rto { 649 background-color: transparent; 650 box-shadow: inset 0 0 0 1px var(--accent-color); 651 } 652 653 .btn-rto > p { 654 color: var(--accent-color); 655 } 656 657 .btn-rto .new-button-arrow-box { 658 background-color: transparent; 659 box-shadow: inset 0 0 0 1px var(--accent-color); 660 } 661 662 .btn-rto:hover .new-button-arrow-box { 663 background-color: transparent; 664 } 665 666 .btn-rto svg path { 667 fill: var(--accent-color); 668 } 669</style> 670 671 </div> 672 </div> 673 <div class="content-block press-block"> 674 <div class="flex-col-gap-40 press-block--desktop"> 675 <h6 id="quote-text" class="text-poppins-light-21"> 676 <!-- This will be populated by JavaScript --> 677 </h6> 678 <div class="press-logos-wrapper"> 679 <div 680 class="press-logo-container" 681 data-quote="...easily one of the best all-in-one mastering plugins I have used or 682 heard." 683 > 684 <img 685 class="press-logo-image" 686 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/recording.858e5c2fc0e2.png" 687 alt="recording magazine logo" 688 /> 689 </div> 690 <div 691 data-link="https://www.soundonsound.com/reviews/musik-hack-master-plan" 692 class="press-logo-container" 693 data-quote="...youâll probably have a grin on your face as you realise just how 694 loud you made your mix." 695 > 696 <img 697 id="sos-logo" 698 class="press-logo-image" 699 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/SOS2.369462f28122.png" 700 alt="SOS logo" 701 /> 702 </div> 703 <div 704 class="press-logo-container" 705 data-quote="...a surprisingly classy plugin thatâs reasonably priced for the sheer 706 quality and variety of results itâs capable of." 707 data-link="https://musictech.com/reviews/plug-ins/musik-hack-fuel-review/" 708 > 709 <img 710 class="press-logo-image" 711 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/musictech-logo-cyan-magenta.cf93ed77c9d9.svg" 712 alt="MusicTech logo" 713 /> 714 </div> 715 <div 716 class="press-logo-container" 717 data-quote="... a hugely impressive modern mastering tool...9/10" 718 data-link="https://www.musicradar.com/reviews/musik-hack-master-plan-review" 719 > 720 <img 721 class="press-logo-image" 722 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/COMPMU.98a1190ebf01.png" 723 alt="Computer Music logo" 724 /> 725 </div> 726 <div 727 class="press-logo-container" 728 data-quote="'...without a doubt itâll be a mainstay on my mix bus...'" 729 data-link="https://happymag.tv/musik-hack-master-plan/" 730 > 731 <img 732 class="press-logo-image" 733 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/happy.1329c8c43829.png" 734 alt="Happy Mag logo" 735 /> 736 </div> 737 </div> 738 </div> 739 <div class="press-block--mobile"> 740 741<div class="press-container"> 742 <div class="press-container-batch"> 743 <a 744 href="https://www.soundonsound.com/reviews/musik-hack-master-plan" 745 target="_blank" 746 class="press-card" 747 > 748 <div class="press-card-img-container"> 749 <img 750 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/SOS2.369462f28122.png" 751 alt="SOS logo" 752 style="width: 75%; object-fit: contain" 753 /> 754 </div> 755 <p class="text-poppins quote"> 756 "...youâll probably have a grin on your face as you realise just how 757 loud you made your mix." 758 </p> 759 <p class="text-poppins" style="margin-top: 10px; font-size: 0.8em"> 760 â Matt Houghton 761 </p> 762 </a> 763 <a 764 class="press-card" 765 href="https://www.musicradar.com/reviews/musik-hack-master-plan-review" 766 target="_blank" 767 > 768 <div class="press-card-img-container"> 769 <img 770 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/COMPMU.98a1190ebf01.png" 771 alt="Computer music logo" 772 style="width: 55%; object-fit: contain" 773 /> 774 </div> 775 <p class="text-poppins quote"> 776 "... a hugely impressive modern mastering tool...<span 777 style="font-weight: bold" 778 >9/10</span 779 >" 780 </p> 781 <p class="text-poppins" style="margin-top: 10px; font-size: 0.8em"> 782 â Dave Gale 783 </p> 784 </a> 785 </div> 786 <div class="press-container-batch"> 787 <div class="press-card"> 788 <div class="press-card-img-container"> 789 <img 790 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/recording.858e5c2fc0e2.png" 791 alt="recording magazine logo" 792 style="width: 100%; object-fit: contain" 793 /> 794 </div> 795 <p class="text-poppins quote"> 796 "...easily one of the best all-in-one mastering plugins I have used or 797 heard." 798 </p> 799 <p class="text-poppins" style="margin-top: 10px; font-size: 0.8em"> 800 â David Blascoe 801 </p> 802 </div> 803 <a 804 href="https://happymag.tv/musik-hack-master-plan/" 805 target="_blank" 806 class="press-card" 807 > 808 <div class="press-card-img-container"> 809 <img 810 src="https://static.musikhack.com/static/website/img/Musik Hack/MusikHackPress/happy.1329c8c43829.png" 811 alt="happy magazine logo" 812 style="width: 100%; object-fit: contain" 813 /> 814 </div> 815 <p class="text-poppins quote"> 816 "...without a doubt itâll be a mainstay on my mix bus..." 817 </p> 818 <p class="text-poppins" style="margin-top: 10px; font-size: 0.8em"> 819 â Oliver Ashby 820 </p> 821 </a> 822 </div> 823</div> 824<style> 825 .press-container { 826 width: 100%; 827 max-width: 1000px; 828 display: flex; 829 flex-direction: row; 830 align-items: center; 831 justify-content: center; 832 gap: 20px; 833 } 834 835 .press-container-batch { 836 display: flex; 837 flex-direction: row; 838 align-items: flex-start; 839 justify-content: center; 840 gap: 20px; 841 flex-wrap: wrap; 842 height: 100%; 843 } 844 845 .press-card { 846 max-width: 200px; 847 width: 100%; 848 padding: 5px; 849 display: flex; 850 flex-direction: column; 851 align-items: center; 852 justify-content: flex-start; 853 text-decoration: none; 854 } 855 .press-card-img-container { 856 height: 120px; 857 display: flex; 858 align-items: center; 859 justify-content: center; 860 } 861 862 .press-card p { 863 text-align: center; 864 line-height: 24px; 865 } 866 867 .quote { 868 font-size: 16px; 869 font-weight: 400; 870 line-height: 24px; 871 872 } 873 874 @media screen and (max-width: 719px) { 875 .press-container-batch { 876 max-width: 200px; 877 flex: 1 0 0; 878 } 879 } 880 881 /* @media screen and (max-width: 500px) { 882 .press-container { 883 flex-direction: column; 884 flex-wrap: wrap; 885 gap: 40px; 886 } 887 .press-container-batch { 888 width: 100%; 889 height: auto; 890 flex-wrap: wrap; 891 justify-content: center; 892 gap: 40px; 893 } 894 } */ 895 896</style> 897 898 </div> 899 </div> 900 <div class="content-block product-card-block"> 901 <div class="product-card product-card-sweeteq"> 902 <div class="product-card-image-column"> 903 <div class="product-card-image-wrapper"> 904 <a href="/products/sweeteq" class="product-card-image-inner"> 905 <img 906 class="product-card-image" 907 src="https://static.musikhack.com/static/website/img/SweetEQ/SweetEQScreenshotDarkPurpleAccent.80f63e9daf94.jpg" 908 alt="SweetEQ screenshot" 909 /> 910 </a> 911 </div> 912 </div> 913 <div class="product-card-content"> 914 <h2> 915 FULL-COLOR <br /> 916 SATURATION 917 </h2> 918 <div class="features-list"> 919 <div class="feature-item"> 920 <div class="feature-icon"> 921 <svg 922 width="10" 923 height="17"
924 viewBox="0 0 10 17" 925 fill="none" 926 xmlns="http://www.w3.org/2000/svg" 927 > 928 <path 929 d="M10 1.125V6.125C10.0001 6.2071 9.98395 6.28841 9.95259 6.36428C9.92122 6.44015 9.87521 6.5091 9.81719 6.56719L5.625 10.7586V14.6164L7.05781 13.1828C7.17509 13.0655 7.33415 12.9997 7.5 12.9997C7.66585 12.9997 7.82491 13.0655 7.94219 13.1828C8.05946 13.3001 8.12535 13.4591 8.12535 13.625C8.12535 13.7909 8.05946 13.9499 7.94219 14.0672L5.44219 16.5672C5.38414 16.6253 5.31521 16.6714 5.23934 16.7029C5.16346 16.7343 5.08213 16.7505 5 16.7505C4.91787 16.7505 4.83654 16.7343 4.76066 16.7029C4.68479 16.6714 4.61586 16.6253 4.55781 16.5672L2.05781 14.0672C1.94054 13.9499 1.87465 13.7909 1.87465 13.625C1.87465 13.4591 1.94054 13.3001 2.05781 13.1828C2.17509 13.0655 2.33415 12.9997 2.5 12.9997C2.66585 12.9997 2.82491 13.0655 2.94219 13.1828L4.375 14.6164V10.7586L0.182812 6.56719C0.124791 6.5091 0.0787826 6.44015 0.0474151 6.36428C0.0160475 6.28841 -6.43662e-05 6.2071 1.93247e-07 6.125V1.125C1.93247e-07 0.95924 0.0658483 0.800269 0.183059 0.683058C0.300269 0.565848 0.45924 0.5 0.625 0.5C0.790761 0.5 0.949732 0.565848 1.06694 0.683058C1.18415 0.800269 1.25 0.95924 1.25 1.125V5.86641L5 9.61641L8.75 5.86641V1.125C8.75 0.95924 8.81585 0.800269 8.93306 0.683058C9.05027 0.565848 9.20924 0.5 9.375 0.5C9.54076 0.5 9.69973 0.565848 9.81694 0.683058C9.93415 0.800269 10 0.95924 10 1.125Z" 930 fill="#F7F4F2" 931 /> 932 </svg> 933 </div> 934 <p class="text-poppins text-poppins-normal-16"> 935 The only saturating EQ you need in your workflow 936 </p> 937 </div> 938 <div class="feature-item"> 939 <div class="feature-icon"> 940 <svg 941 xmlns="http://www.w3.org/2000/svg" 942 width="32" 943 height="32" 944 fill="#000000"
945 viewBox="0 0 256 256" 946 > 947 <path 948 d="M80,96a8,8,0,0,1-8,8H24a8,8,0,0,1,0-16H72A8,8,0,0,1,80,96Zm-8,24H24a8,8,0,0,0,0,16H72a8,8,0,0,0,0-16Zm0,32H24a8,8,0,0,0,0,16H72a8,8,0,0,0,0-16Zm0,32H24a8,8,0,0,0,0,16H72a8,8,0,0,0,0-16Zm80-64H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Zm0,32H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Zm0,32H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Zm80-96H184a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16ZM184,72h48a8,8,0,0,0,0-16H184a8,8,0,0,0,0,16Zm48,48H184a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Zm0,32H184a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Zm0,32H184a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z" 949 fill="#F7F4F2" 950 ></path> 951 </svg> 952 </div> 953 <p class="text-poppins text-poppins-normal-16"> 954 Sweeten bass, add thickness, bring out articulations, or give 955 air and sizzle 956 </p> 957 </div> 958 <div class="feature-item"> 959 <div class="feature-icon"> 960 <svg 961 xmlns="http://www.w3.org/2000/svg" 962 width="32" 963 height="32" 964 fill="#000000"
965 viewBox="0 0 256 256" 966 > 967 <path 968 d="M176,80a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H184A8,8,0,0,1,176,80ZM40,88H144v16a8,8,0,0,0,16,0V56a8,8,0,0,0-16,0V72H40a8,8,0,0,0,0,16Zm176,80H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16ZM88,144a8,8,0,0,0-8,8v16H40a8,8,0,0,0,0,16H80v16a8,8,0,0,0,16,0V152A8,8,0,0,0,88,144Z" 969 fill="#F7F4F2" 970 ></path> 971 </svg> 972 </div> 973 <p class="text-poppins text-poppins-normal-16"> 974 Works on tracks, buses, or even the whole mix 975 </p> 976 </div> 977 </div> 978 <!-- prettier-ignore --> 979 <!-- prettier-ignore --> 980<a 981 id="" 982 href="/products/sweeteq" 983 class="new-button-container " 984 style="--accent-color: #985294; " 985 986 987 988 989> 990 <p 991 class="text-poppins text-button" 992 style="" 993 > 994 Try SweetEQ Now 995 </p> 996 <div class="new-button-arrow-box"> 997 <svg 998 width="14" 999 height="12" 1000 viewBox="0 0 14 12" 1001 fill="none" 1002 xmlns="http://www.w3.org/2000/svg" 1003 > 1004 <path 1005 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 1006 fill="#F7F4F2" 1007 /> 1008 </svg> 1009 </div> 1010</a> 1011<style> 1012 /* Button Styles */ 1013 .new-button-container { 1014 position: relative; 1015 overflow: hidden; 1016 cursor: pointer; 1017 height: 56px; 1018 display: flex; 1019 flex-direction: row; 1020 align-items: center; 1021 justify-content: center; 1022 background-color: var(--accent-color); 1023 border-radius: 8px; 1024 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 1025 gap: 20px; 1026 text-decoration: none; 1027 } 1028 .new-button-container > p { 1029 position: relative; 1030 z-index: 2; 1031 transition: all 0.4s ease-in-out; 1032 } 1033 .new-button-arrow-box { 1034 position: absolute; 1035 top: 4px; 1036 right: 4px; 1037 width: 48px; 1038 height: 48px; 1039 border-radius: 6px; 1040 background-color: rgba(10, 10, 10, 0.4); 1041 transition: all 0.2s ease-in-out; 1042 z-index: 1; 1043 display: flex; 1044 flex-direction: row-reverse; 1045 justify-content: flex-start; 1046 align-items: center; 1047 padding-right: 17px; 1048 } 1049 .new-button-container:hover .new-button-arrow-box { 1050 width: calc(100% - 8px); 1051 height: calc(100% - 8px); 1052 border-radius: 6px; 1053 } 1054 1055 /* Rent to Own Button Styles */ 1056 .btn-rto { 1057 background-color: transparent; 1058 box-shadow: inset 0 0 0 1px var(--accent-color); 1059 } 1060 1061 .btn-rto > p { 1062 color: var(--accent-color); 1063 } 1064 1065 .btn-rto .new-button-arrow-box { 1066 background-color: transparent; 1067 box-shadow: inset 0 0 0 1px var(--accent-color); 1068 } 1069 1070 .btn-rto:hover .new-button-arrow-box { 1071 background-color: transparent; 1072 } 1073 1074 .btn-rto svg path { 1075 fill: var(--accent-color); 1076 } 1077</style> 1078 1079 </div> 1080 </div> 1081 </div> 1082 <div class="content-block product-card-block"> 1083 <div class="product-card product-card-hyfi" id="product-card-hyfi"> 1084 <a 1085 class="product-card-hyfi-link-overlay" 1086 href="/products/hyfi/" 1087 aria-label="Explore HyFi" 1088 ></a> 1089 <div 1090 id="site-hyfi-cta-spectrogram" 1091 class="main-page-hyfi-spectrogram-mount" 1092 aria-hidden="true" 1093 > 1094 <div class="main-page-hyfi-spectrogram-fallback"></div> 1095 </div> 1096 <div class="product-card-content product-card-content--hyfi"> 1097 <div class="main-page-hyfi-card-copy"> 1098 <div class="main-page-hyfi-card-heading"> 1099 <h2 style="text-transform: uppercase"> 1100 FINALLY: Good Online Mastering 1101 </h2> 1102 <h6 class="main-page-hyfi-card-subtitle"> 1103 Meet <span style="font-weight: 800">HyFi</span>: the best-sounding online mastering service around. Get your tracks release-ready while preserving the integrity of your mix. No subscription required. 1104 </h6> 1105 </div> 1106 <div class="main-page-hyfi-card-button-group"> 1107 <!-- prettier-ignore --> 1108 <!-- prettier-ignore --> 1109<a 1110 id="" 1111 href="/hyfi/create_account/" 1112 class="new-button-container btn-rto hyfi-cta-white-button" 1113 style="--accent-color: #F7F4F2; width: 300px;" 1114 1115 1116 1117 1118> 1119 <p 1120 class="text-poppins text-button" 1121 style="" 1122 > 1123 Master with HyFi Today 1124 </p> 1125 <div class="new-button-arrow-box"> 1126 <svg 1127 width="14" 1128 height="12"
1129 viewBox="0 0 14 12" 1130 fill="none" 1131 xmlns="http://www.w3.org/2000/svg" 1132 > 1133 <path 1134 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 1135 fill="#F7F4F2" 1136 /> 1137 </svg> 1138 </div> 1139</a> 1140<style> 1141 /* Button Styles */ 1142 .new-button-container { 1143 position: relative; 1144 overflow: hidden; 1145 cursor: pointer; 1146 height: 56px; 1147 display: flex; 1148 flex-direction: row; 1149 align-items: center; 1150 justify-content: center; 1151 background-color: var(--accent-color); 1152 border-radius: 8px; 1153 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 1154 gap: 20px; 1155 text-decoration: none; 1156 } 1157 .new-button-container > p { 1158 position: relative; 1159 z-index: 2; 1160 transition: all 0.4s ease-in-out; 1161 } 1162 .new-button-arrow-box { 1163 position: absolute; 1164 top: 4px; 1165 right: 4px; 1166 width: 48px; 1167 height: 48px; 1168 border-radius: 6px; 1169 background-color: rgba(10, 10, 10, 0.4); 1170 transition: all 0.2s ease-in-out; 1171 z-index: 1; 1172 display: flex; 1173 flex-direction: row-reverse; 1174 justify-content: flex-start; 1175 align-items: center; 1176 padding-right: 17px; 1177 } 1178 .new-button-container:hover .new-button-arrow-box { 1179 width: calc(100% - 8px); 1180 height: calc(100% - 8px); 1181 border-radius: 6px; 1182 } 1183 1184 /* Rent to Own Button Styles */ 1185 .btn-rto { 1186 background-color: transparent; 1187 box-shadow: inset 0 0 0 1px var(--accent-color); 1188 } 1189 1190 .btn-rto > p { 1191 color: var(--accent-color); 1192 } 1193 1194 .btn-rto .new-button-arrow-box { 1195 background-color: transparent; 1196 box-shadow: inset 0 0 0 1px var(--accent-color); 1197 } 1198 1199 .btn-rto:hover .new-button-arrow-box { 1200 background-color: transparent; 1201 } 1202 1203 .btn-rto svg path { 1204 fill: var(--accent-color); 1205 } 1206</style> 1207 1208 </div> 1209 </div> 1210 </div> 1211 </div> 1212 </div> 1213 <div class="content-block product-card-block"> 1214 <div class="product-card product-card-fuel"> 1215 <div class="product-card-image-column"> 1216 <div class="product-card-image-wrapper"> 1217 <a href="/products/fuel" class="product-card-image-inner"> 1218 <img 1219 class="product-card-image" 1220 src="https://static.musikhack.com/static/website/img/Fuel/fuel_lores_angled_right.ef9fc56dd4be.png" 1221 alt="Fuel screenshot" 1222 /> 1223 </a> 1224 </div> 1225 </div> 1226 <div class="product-card-content"> 1227 <h2> 1228 MAXIMIZE WITH <br /> 1229 MINIMAL EFFORT 1230 </h2> 1231 <div class="features-list"> 1232 <div class="feature-item"> 1233 <div class="feature-icon"> 1234 <svg 1235 width="14" 1236 height="18"
1237 viewBox="0 0 14 18" 1238 fill="none" 1239 xmlns="http://www.w3.org/2000/svg" 1240 > 1241 <path 1242 d="M11.3664 10.9797C11.2043 11.8849 10.7688 12.7188 10.1185 13.369C9.46813 14.0192 8.63418 14.4545 7.72891 14.6164C7.69454 14.6219 7.6598 14.6248 7.625 14.625C7.46822 14.625 7.31719 14.566 7.20185 14.4598C7.08651 14.3536 7.01529 14.208 7.00231 14.0517C6.98933 13.8955 7.03554 13.7401 7.13178 13.6163C7.22802 13.4926 7.36725 13.4095 7.52187 13.3836C8.81641 13.1656 9.91484 12.0672 10.1344 10.7703C10.1621 10.6068 10.2537 10.4611 10.3889 10.3651C10.5242 10.2691 10.692 10.2308 10.8555 10.2586C11.019 10.2864 11.1647 10.3779 11.2607 10.5132C11.3566 10.6484 11.395 10.8162 11.3672 10.9797H11.3664ZM13.875 10.25C13.875 12.0734 13.1507 13.822 11.8614 15.1114C10.572 16.4007 8.82336 17.125 7 17.125C5.17664 17.125 3.42795 16.4007 2.13864 15.1114C0.849328 13.822 0.125 12.0734 0.125 10.25C0.125 8.06875 0.984375 5.83828 2.67656 3.62109C2.73013 3.55088 2.79796 3.49283 2.87559 3.45074C2.95323 3.40866 3.0389 3.3835 3.12696 3.37693C3.21502 3.37036 3.30347 3.38253 3.38649 3.41263C3.46951 3.44273 3.54521 3.49008 3.60859 3.55156L5.49297 5.38046L7.21172 0.660933C7.24606 0.566803 7.30252 0.482309 7.37636 0.414573C7.45019 0.346837 7.53923 0.297845 7.63596 0.271728C7.73269 0.24561 7.83429 0.243133 7.93218 0.264505C8.03007 0.285876 8.12139 0.33047 8.19844 0.394527C9.90703 1.8125 13.875 5.60546 13.875 10.25ZM12.625 10.25C12.625 6.64921 9.82891 3.5375 8.07734 1.94296L6.3375 6.71406C6.30179 6.81205 6.24213 6.89955 6.16395 6.96858C6.08577 7.03761 5.99155 7.08598 5.88989 7.10928C5.78823 7.13258 5.68236 7.13006 5.58192 7.10197C5.48148 7.07388 5.38966 7.02109 5.31484 6.94843L3.25469 4.95C2.00703 6.75078 1.375 8.53125 1.375 10.25C1.375 11.7418 1.96763 13.1726 3.02252 14.2275C4.07742 15.2824 5.50816 15.875 7 15.875C8.49184 15.875 9.92258 15.2824 10.9775 14.2275C12.0324 13.1726 12.625 11.7418 12.625 10.25Z" 1243 fill="#F7F4F2" 1244 /> 1245 </svg> 1246 </div> 1247 <p class="text-poppins text-poppins-normal-16"> 1248 Push levels hard while keeping your sound clean...or saturate it 1249 as much as you want 1250 </p> 1251 </div> 1252 <div class="feature-item"> 1253 <div class="feature-icon"> 1254 <svg 1255 width="18" 1256 height="16"
1257 viewBox="0 0 18 16" 1258 fill="none" 1259 xmlns="http://www.w3.org/2000/svg" 1260 > 1261 <path 1262 d="M9.625 7.375V14.875C9.625 15.0408 9.55915 15.1997 9.44194 15.3169C9.32473 15.4342 9.16576 15.5 9 15.5C8.83424 15.5 8.67527 15.4342 8.55806 15.3169C8.44085 15.1997 8.375 15.0408 8.375 14.875V7.375C8.375 7.20924 8.44085 7.05027 8.55806 6.93306C8.67527 6.81585 8.83424 6.75 9 6.75C9.16576 6.75 9.32473 6.81585 9.44194 6.93306C9.55915 7.05027 9.625 7.20924 9.625 7.375ZM14.625 13C14.4592 13 14.3003 13.0658 14.1831 13.1831C14.0658 13.3003 14 13.4592 14 13.625V14.875C14 15.0408 14.0658 15.1997 14.1831 15.3169C14.3003 15.4342 14.4592 15.5 14.625 15.5C14.7908 15.5 14.9497 15.4342 15.0669 15.3169C15.1842 15.1997 15.25 15.0408 15.25 14.875V13.625C15.25 13.4592 15.1842 13.3003 15.0669 13.1831C14.9497 13.0658 14.7908 13 14.625 13ZM16.5 10.5H15.25V1.125C15.25 0.95924 15.1842 0.800269 15.0669 0.683058C14.9497 0.565848 14.7908 0.5 14.625 0.5C14.4592 0.5 14.3003 0.565848 14.1831 0.683058C14.0658 0.800269 14 0.95924 14 1.125V10.5H12.75C12.5842 10.5 12.4253 10.5658 12.3081 10.6831C12.1908 10.8003 12.125 10.9592 12.125 11.125C12.125 11.2908 12.1908 11.4497 12.3081 11.5669C12.4253 11.6842 12.5842 11.75 12.75 11.75H16.5C16.6658 11.75 16.8247 11.6842 16.9419 11.5669C17.0592 11.4497 17.125 11.2908 17.125 11.125C17.125 10.9592 17.0592 10.8003 16.9419 10.6831C16.8247 10.5658 16.6658 10.5 16.5 10.5ZM3.375 10.5C3.20924 10.5 3.05027 10.5658 2.93306 10.6831C2.81585 10.8003 2.75 10.9592 2.75 11.125V14.875C2.75 15.0408 2.81585 15.1997 2.93306 15.3169C3.05027 15.4342 3.20924 15.5 3.375 15.5C3.54076 15.5 3.69973 15.4342 3.81694 15.3169C3.93415 15.1997 4 15.0408 4 14.875V11.125C4 10.9592 3.93415 10.8003 3.81694 10.6831C3.69973 10.5658 3.54076 10.5 3.375 10.5ZM5.25 8H4V1.125C4 0.95924 3.93415 0.800269 3.81694 0.683058C3.69973 0.565848 3.54076 0.5 3.375 0.5C3.20924 0.5 3.05027 0.565848 2.93306 0.683058C2.81585 0.800269 2.75 0.95924 2.75 1.125V8H1.5C1.33424 8 1.17527 8.06585 1.05806 8.18306C0.940848 8.30027 0.875 8.45924 0.875 8.625C0.875 8.79076 0.940848 8.94973 1.05806 9.06694C1.17527 9.18415 1.33424 9.25 1.5 9.25H5.25C5.41576 9.25 5.57473 9.18415 5.69194 9.06694C5.80915 8.94973 5.875 8.79076 5.875 8.625C5.875 8.45924 5.80915 8.30027 5.69194 8.18306C5.57473 8.06585 5.41576 8 5.25 8ZM10.875 4.25H9.625V1.125C9.625 0.95924 9.55915 0.800269 9.44194 0.683058C9.32473 0.565848 9.16576 0.5 9 0.5C8.83424 0.5 8.67527 0.565848 8.55806 0.683058C8.44085 0.800269 8.375 0.95924 8.375 1.125V4.25H7.125C6.95924 4.25 6.80027 4.31585 6.68306 4.43306C6.56585 4.55027 6.5 4.70924 6.5 4.875C6.5 5.04076 6.56585 5.19973 6.68306 5.31694C6.80027 5.43415 6.95924 5.5 7.125 5.5H10.875C11.0408 5.5 11.1997 5.43415 11.3169 5.31694C11.4342 5.19973 11.5 5.04076 11.5 4.875C11.5 4.70924 11.4342 4.55027 11.3169 4.43306C11.1997 4.31585 11.0408 4.25 10.875 4.25Z" 1263 fill="#F7F4F2" 1264 /> 1265 </svg> 1266 </div> 1267 <p class="text-poppins text-poppins-normal-16"> 1268 Works on any source - vocals, drums, mix bus, or individual tracks 1269 </p> 1270 </div> 1271 <div class="feature-item"> 1272 <div class="feature-icon"> 1273 <svg 1274 width="10" 1275 height="17"
1276 viewBox="0 0 10 17" 1277 fill="none" 1278 xmlns="http://www.w3.org/2000/svg" 1279 > 1280 <path 1281 d="M10 1.125V6.125C10.0001 6.2071 9.98395 6.28841 9.95259 6.36428C9.92122 6.44015 9.87521 6.5091 9.81719 6.56719L5.625 10.7586V14.6164L7.05781 13.1828C7.17509 13.0655 7.33415 12.9997 7.5 12.9997C7.66585 12.9997 7.82491 13.0655 7.94219 13.1828C8.05946 13.3001 8.12535 13.4591 8.12535 13.625C8.12535 13.7909 8.05946 13.9499 7.94219 14.0672L5.44219 16.5672C5.38414 16.6253 5.31521 16.6714 5.23934 16.7029C5.16346 16.7343 5.08213 16.7505 5 16.7505C4.91787 16.7505 4.83654 16.7343 4.76066 16.7029C4.68479 16.6714 4.61586 16.6253 4.55781 16.5672L2.05781 14.0672C1.94054 13.9499 1.87465 13.7909 1.87465 13.625C1.87465 13.4591 1.94054 13.3001 2.05781 13.1828C2.17509 13.0655 2.33415 12.9997 2.5 12.9997C2.66585 12.9997 2.82491 13.0655 2.94219 13.1828L4.375 14.6164V10.7586L0.182812 6.56719C0.124791 6.5091 0.0787826 6.44015 0.0474151 6.36428C0.0160475 6.28841 -6.43662e-05 6.2071 1.93247e-07 6.125V1.125C1.93247e-07 0.95924 0.0658483 0.800269 0.183059 0.683058C0.300269 0.565848 0.45924 0.5 0.625 0.5C0.790761 0.5 0.949732 0.565848 1.06694 0.683058C1.18415 0.800269 1.25 0.95924 1.25 1.125V5.86641L5 9.61641L8.75 5.86641V1.125C8.75 0.95924 8.81585 0.800269 8.93306 0.683058C9.05027 0.565848 9.20924 0.5 9.375 0.5C9.54076 0.5 9.69973 0.565848 9.81694 0.683058C9.93415 0.800269 10 0.95924 10 1.125Z" 1282 fill="#F7F4F2" 1283 /> 1284 </svg> 1285 </div> 1286 <p class="text-poppins text-poppins-normal-16"> 1287 Combines multiple loudness tools into one simple workstation 1288 </p> 1289 </div> 1290 </div> 1291 <!-- prettier-ignore --> 1292 <!-- prettier-ignore --> 1293<a 1294 id="" 1295 href="/products/fuel" 1296 class="new-button-container " 1297 style="--accent-color: #e5884d; " 1298 1299 1300 1301 1302> 1303 <p 1304 class="text-poppins text-button" 1305 style="" 1306 > 1307 Try FUEL Now 1308 </p> 1309 <div class="new-button-arrow-box"> 1310 <svg 1311 width="14" 1312 height="12" 1313 viewBox="0 0 14 12" 1314 fill="none" 1315 xmlns="http://www.w3.org/2000/svg" 1316 > 1317 <path 1318 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 1319 fill="#F7F4F2" 1320 /> 1321 </svg> 1322 </div> 1323</a> 1324<style> 1325 /* Button Styles */ 1326 .new-button-container { 1327 position: relative; 1328 overflow: hidden; 1329 cursor: pointer; 1330 height: 56px; 1331 display: flex; 1332 flex-direction: row; 1333 align-items: center; 1334 justify-content: center; 1335 background-color: var(--accent-color); 1336 border-radius: 8px; 1337 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 1338 gap: 20px; 1339 text-decoration: none; 1340 } 1341 .new-button-container > p { 1342 position: relative; 1343 z-index: 2; 1344 transition: all 0.4s ease-in-out; 1345 } 1346 .new-button-arrow-box { 1347 position: absolute; 1348 top: 4px; 1349 right: 4px; 1350 width: 48px; 1351 height: 48px; 1352 border-radius: 6px; 1353 background-color: rgba(10, 10, 10, 0.4); 1354 transition: all 0.2s ease-in-out; 1355 z-index: 1; 1356 display: flex; 1357 flex-direction: row-reverse; 1358 justify-content: flex-start; 1359 align-items: center; 1360 padding-right: 17px; 1361 } 1362 .new-button-container:hover .new-button-arrow-box { 1363 width: calc(100% - 8px); 1364 height: calc(100% - 8px); 1365 border-radius: 6px; 1366 } 1367 1368 /* Rent to Own Button Styles */ 1369 .btn-rto { 1370 background-color: transparent; 1371 box-shadow: inset 0 0 0 1px var(--accent-color); 1372 } 1373 1374 .btn-rto > p { 1375 color: var(--accent-color); 1376 } 1377 1378 .btn-rto .new-button-arrow-box { 1379 background-color: transparent; 1380 box-shadow: inset 0 0 0 1px var(--accent-color); 1381 } 1382 1383 .btn-rto:hover .new-button-arrow-box { 1384 background-color: transparent; 1385 } 1386 1387 .btn-rto svg path { 1388 fill: var(--accent-color); 1389 } 1390</style> 1391 1392 </div> 1393 </div> 1394 </div> 1395 <div class="content-block standard-block"> 1396 <div 1397 style=" 1398 display: flex; 1399 flex-direction: column; 1400 align-items: center; 1401 justify-content: flex-start; 1402 gap: 40px; 1403 " 1404 > 1405 <div 1406 style=" 1407 display: flex; 1408 flex-direction: column; 1409 align-items: center; 1410 gap: 8px; 1411 " 1412 > 1413 <h3 style="width: 100%; text-align: center"> 1414 Featured on major releases 1415 </h3> 1416 <h6 style="opacity: 0.8; text-align: center"> 1417 Master Plan, FUEL, and SweetEQ are the mixing tools behind the songs dominating 1418 your playlists. 1419 </h6> 1420 </div> 1421 <div class="spotlight-section-wrapper"> 1422 <div 1423 class="spotlight-reel-container" 1424 id="site-spotlight-reel" 1425 data-has-player="false" 1426 ></div> 1427 </div> 1428 </div> 1429 </div> 1430 <div class="content-block standard-block"> 1431 <div 1432 style=" 1433 display: flex; 1434 flex-direction: column; 1435 align-items: center; 1436 justify-content: flex-start; 1437 gap: 40px; 1438 " 1439 > 1440 <div 1441 style=" 1442 display: flex; 1443 flex-direction: column; 1444 align-items: center; 1445 gap: 8px; 1446 " 1447 > 1448 <h3 style="width: 100%; text-align: center"> 1449 Use today, pay over time 1450 </h3> 1451 <h6 style="opacity: 0.8; text-align: center"> 1452 Own Master Plan, FUEL, and SweetEQ after 12 monthly payments. <br /> 1453 No interest. No commitment. 1454 </h6> 1455 </div> 1456 1457 <div 1458 style=" 1459 display: flex; 1460 flex-direction: column; 1461 align-items: center; 1462 justify-content: flex-start; 1463 gap: 60px; 1464 width: 100%; 1465 " 1466 > 1467 <div id="promo-cards-container" class="product-promo-cards" style=""> 1468 <div 1469 id="promo-card-master-play" 1470 class="product-promo-card product-promo-card--pink selected" 1471 > 1472 <div class="product-promo-card__content"> 1473 <div style="height: 40px"> 1474 <img 1475 style=" 1476 display: block; 1477 max-height: 100%; 1478 max-width: 100%; 1479 margin: 0 auto; 1480 object-fit: contain; 1481 " 1482 src="https://static.musikhack.com/static/website/img/Musik Hack/mp_flat_gold_logo.bb32854e9616.png" 1483 alt="" 1484 /> 1485 </div> 1486 <p class="text-poppins text-poppins-normal-16"> 1487 Our flagship, all-in-one mastering plugin 1488 </p> 1489 </div> 1490 <!-- prettier-ignore --> 1491 <!-- prettier-ignore --> 1492<a 1493 id="mp-rto-buy-button" 1494 href="#" 1495 class="new-button-container " 1496 style="--accent-color: #d66790; " 1497 1498 1499 1500 1501> 1502 <p 1503 class="text-poppins text-button" 1504 style="" 1505 > 1506 Rent to Own 1507 </p> 1508 <div class="new-button-arrow-box"> 1509 <svg 1510 width="14" 1511 height="12"
1512 viewBox="0 0 14 12" 1513 fill="none" 1514 xmlns="http://www.w3.org/2000/svg" 1515 > 1516 <path 1517 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 1518 fill="#F7F4F2" 1519 /> 1520 </svg> 1521 </div> 1522</a> 1523<style> 1524 /* Button Styles */ 1525 .new-button-container { 1526 position: relative; 1527 overflow: hidden; 1528 cursor: pointer; 1529 height: 56px; 1530 display: flex; 1531 flex-direction: row; 1532 align-items: center; 1533 justify-content: center; 1534 background-color: var(--accent-color); 1535 border-radius: 8px; 1536 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 1537 gap: 20px; 1538 text-decoration: none; 1539 } 1540 .new-button-container > p { 1541 position: relative; 1542 z-index: 2; 1543 transition: all 0.4s ease-in-out; 1544 } 1545 .new-button-arrow-box { 1546 position: absolute; 1547 top: 4px; 1548 right: 4px; 1549 width: 48px; 1550 height: 48px; 1551 border-radius: 6px; 1552 background-color: rgba(10, 10, 10, 0.4); 1553 transition: all 0.2s ease-in-out; 1554 z-index: 1; 1555 display: flex; 1556 flex-direction: row-reverse; 1557 justify-content: flex-start; 1558 align-items: center; 1559 padding-right: 17px; 1560 } 1561 .new-button-container:hover .new-button-arrow-box { 1562 width: calc(100% - 8px); 1563 height: calc(100% - 8px); 1564 border-radius: 6px; 1565 } 1566 1567 /* Rent to Own Button Styles */ 1568 .btn-rto { 1569 background-color: transparent; 1570 box-shadow: inset 0 0 0 1px var(--accent-color); 1571 } 1572 1573 .btn-rto > p { 1574 color: var(--accent-color); 1575 } 1576 1577 .btn-rto .new-button-arrow-box { 1578 background-color: transparent; 1579 box-shadow: inset 0 0 0 1px var(--accent-color); 1580 } 1581 1582 .btn-rto:hover .new-button-arrow-box { 1583 background-color: transparent; 1584 } 1585 1586 .btn-rto svg path { 1587 fill: var(--accent-color); 1588 } 1589</style> 1590 1591 </div> 1592 <div 1593 id="promo-card-fuel" 1594 class="product-promo-card product-promo-card--orange" 1595 > 1596 <div class="product-promo-card__content"> 1597 <div style="height: 40px"> 1598 <img 1599 style=" 1600 display: block; 1601 max-height: 100%; 1602 max-width: 100%; 1603 margin: 0 auto; 1604 object-fit: contain; 1605 " 1606 src="https://static.musikhack.com/static/website/img/Fuel/fuel_lores_logo.c8aaf6f817e1.png" 1607 alt="" 1608 /> 1609 </div> 1610 <p class="text-poppins text-poppins-normal-16"> 1611 Swiss Army Knife of maximization 1612 </p> 1613 </div> 1614 <!-- prettier-ignore --> 1615 <!-- prettier-ignore --> 1616<a 1617 id="fuel-rto-buy-button" 1618 href="#" 1619 class="new-button-container " 1620 style="--accent-color: #e5884d; " 1621 1622 1623 1624 1625> 1626 <p 1627 class="text-poppins text-button" 1628 style="" 1629 > 1630 Rent to Own 1631 </p> 1632 <div class="new-button-arrow-box"> 1633 <svg 1634 width="14" 1635 height="12" 1636 viewBox="0 0 14 12" 1637 fill="none" 1638 xmlns="http://www.w3.org/2000/svg" 1639 > 1640 <path 1641 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 1642 fill="#F7F4F2" 1643 /> 1644 </svg> 1645 </div> 1646</a> 1647<style> 1648 /* Button Styles */ 1649 .new-button-container { 1650 position: relative; 1651 overflow: hidden; 1652 cursor: pointer; 1653 height: 56px; 1654 display: flex; 1655 flex-direction: row; 1656 align-items: center; 1657 justify-content: center; 1658 background-color: var(--accent-color); 1659 border-radius: 8px; 1660 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 1661 gap: 20px; 1662 text-decoration: none; 1663 } 1664 .new-button-container > p { 1665 position: relative; 1666 z-index: 2; 1667 transition: all 0.4s ease-in-out; 1668 } 1669 .new-button-arrow-box { 1670 position: absolute; 1671 top: 4px; 1672 right: 4px; 1673 width: 48px; 1674 height: 48px; 1675 border-radius: 6px; 1676 background-color: rgba(10, 10, 10, 0.4); 1677 transition: all 0.2s ease-in-out; 1678 z-index: 1; 1679 display: flex; 1680 flex-direction: row-reverse; 1681 justify-content: flex-start;
1682 align-items: center; 1683 padding-right: 17px; 1684 } 1685 .new-button-container:hover .new-button-arrow-box { 1686 width: calc(100% - 8px); 1687 height: calc(100% - 8px); 1688 border-radius: 6px; 1689 } 1690 1691 /* Rent to Own Button Styles */ 1692 .btn-rto { 1693 background-color: transparent; 1694 box-shadow: inset 0 0 0 1px var(--accent-color); 1695 } 1696 1697 .btn-rto > p { 1698 color: var(--accent-color); 1699 } 1700 1701 .btn-rto .new-button-arrow-box { 1702 background-color: transparent; 1703 box-shadow: inset 0 0 0 1px var(--accent-color); 1704 } 1705 1706 .btn-rto:hover .new-button-arrow-box { 1707 background-color: transparent; 1708 } 1709 1710 .btn-rto svg path { 1711 fill: var(--accent-color); 1712 } 1713</style> 1714 1715 </div> 1716 <div 1717 id="promo-card-sweeteq" 1718 class="product-promo-card product-promo-card--purple" 1719 > 1720 <div class="product-promo-card__content"> 1721 <div style="height: 52px"> 1722 <img 1723 style=" 1724 display: block; 1725 max-height: 100%; 1726 max-width: 100%; 1727 margin: 0 auto; 1728 object-fit: contain; 1729 " 1730 src="https://static.musikhack.com/static/website/img/SweetEQ/SweetEQLogoPink.74163f301e77.png" 1731 alt="SweetEQ logo" 1732 /> 1733 </div> 1734 <p class="text-poppins text-poppins-normal-16"> 1735 The only saturating EQ you need 1736 </p> 1737 </div> 1738 <!-- prettier-ignore --> 1739 <!-- prettier-ignore --> 1740<a 1741 id="sweeteq-rto-buy-button" 1742 href="#" 1743 class="new-button-container " 1744 style="--accent-color: #985294; " 1745 1746 1747 1748 1749> 1750 <p 1751 class="text-poppins text-button" 1752 style="" 1753 > 1754 Rent to Own 1755 </p> 1756 <div class="new-button-arrow-box"> 1757 <svg 1758 width="14" 1759 height="12" 1760 viewBox="0 0 14 12" 1761 fill="none" 1762 xmlns="http://www.w3.org/2000/svg" 1763 > 1764 <path 1765 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 1766 fill="#F7F4F2" 1767 /> 1768 </svg> 1769 </div> 1770</a> 1771<style> 1772 /* Button Styles */ 1773 .new-button-container { 1774 position: relative; 1775 overflow: hidden; 1776 cursor: pointer; 1777 height: 56px; 1778 display: flex; 1779 flex-direction: row; 1780 align-items: center; 1781 justify-content: center; 1782 background-color: var(--accent-color); 1783 border-radius: 8px; 1784 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 1785 gap: 20px; 1786 text-decoration: none; 1787 } 1788 .new-button-container > p { 1789 position: relative; 1790 z-index: 2; 1791 transition: all 0.4s ease-in-out; 1792 } 1793 .new-button-arrow-box { 1794 position: absolute; 1795 top: 4px; 1796 right: 4px; 1797 width: 48px; 1798 height: 48px; 1799 border-radius: 6px; 1800 background-color: rgba(10, 10, 10, 0.4); 1801 transition: all 0.2s ease-in-out; 1802 z-index: 1; 1803 display: flex; 1804 flex-direction: row-reverse; 1805 justify-content: flex-start; 1806 align-items: center; 1807 padding-right: 17px; 1808 } 1809 .new-button-container:hover .new-button-arrow-box { 1810 width: calc(100% - 8px); 1811 height: calc(100% - 8px); 1812 border-radius: 6px; 1813 } 1814 1815 /* Rent to Own Button Styles */ 1816 .btn-rto { 1817 background-color: transparent; 1818 box-shadow: inset 0 0 0 1px var(--accent-color); 1819 } 1820 1821 .btn-rto > p { 1822 color: var(--accent-color); 1823 } 1824 1825 .btn-rto .new-button-arrow-box { 1826 background-color: transparent; 1827 box-shadow: inset 0 0 0 1px var(--accent-color); 1828 } 1829 1830 .btn-rto:hover .new-button-arrow-box { 1831 background-color: transparent; 1832 } 1833 1834 .btn-rto svg path { 1835 fill: var(--accent-color); 1836 } 1837</style> 1838 1839 </div> 1840 </div> 1841 <div class="features-panel"> 1842 <div class="feature-item-card"> 1843 <div class="feature-item-card__content"> 1844 <div class="feature-item-card__icon-wrapper"> 1845 <svg 1846 width="18" 1847 height="24"
1848 viewBox="0 0 18 24" 1849 fill="none" 1850 xmlns="http://www.w3.org/2000/svg" 1851 > 1852 <path 1853 d="M17.2303 11.0786C17.2019 10.9584 17.1443 10.847 17.0625 10.7545C16.9807 10.6619 16.8774 10.591 16.7616 10.548L11.3607 8.52203L12.735 1.64734C12.7662 1.48761 12.7445 1.32209 12.6733 1.17576C12.6021 1.02943 12.4852 0.910224 12.3403 0.836138C12.1954 0.762052 12.0304 0.737102 11.8701 0.765053C11.7097 0.793004 11.5629 0.872339 11.4516 0.991087L0.951594 12.2411C0.866314 12.3309 0.804621 12.4405 0.772028 12.5601C0.739435 12.6796 0.736955 12.8053 0.764812 12.926C0.792669 13.0467 0.849993 13.1587 0.931665 13.2518C1.01334 13.345 1.11681 13.4164 1.23284 13.4598L6.63566 15.4858L5.26503 22.353C5.23391 22.5127 5.25558 22.6782 5.32679 22.8245C5.39799 22.9709 5.51485 23.0901 5.65974 23.1642C5.80464 23.2382 5.96969 23.2632 6.13001 23.2352C6.29032 23.2073 6.4372 23.128 6.54847 23.0092L17.0485 11.7592C17.1322 11.6693 17.1926 11.5603 17.2243 11.4416C17.256 11.3229 17.2581 11.1983 17.2303 11.0786ZM7.25347 20.0626L8.23503 15.152C8.27016 14.9779 8.24232 14.7969 8.15648 14.6413C8.07063 14.4858 7.93236 14.3658 7.76628 14.3026L2.81253 12.4417L10.7457 3.94234L9.76503 8.85296C9.7299 9.02712 9.75774 9.20809 9.84358 9.36364C9.92943 9.5192 10.0677 9.63922 10.2338 9.70234L15.1838 11.5586L7.25347 20.0626Z" 1854 fill="#F7F4F2" 1855 /> 1856 </svg> 1857 </div> 1858 <p class="text-poppins text-poppins-normal-16">Instant Access</p> 1859 </div> 1860 <p 1861 class="text-poppins text-poppins-normal text-feature-card-paragraph" 1862 > 1863 Download and start using your plugins immediately after your first 1864 payment. 1865 </p> 1866 </div> 1867 <div class="feature-item-card"> 1868 <div class="feature-item-card__content"> 1869 <div class="feature-item-card__icon-wrapper"> 1870 <svg 1871 width="22" 1872 height="20"
1873 viewBox="0 0 22 20" 1874 fill="none" 1875 xmlns="http://www.w3.org/2000/svg" 1876 > 1877 <path 1878 d="M20.9375 6.51125C20.7263 6.27193 20.4666 6.08028 20.1757 5.94903C19.8847 5.81778 19.5692 5.74994 19.25 5.75H14V4.25C14 3.25544 13.6049 2.30161 12.9017 1.59835C12.1984 0.895088 11.2446 0.5 10.25 0.5C10.1107 0.4999 9.97406 0.538617 9.8555 0.611808C9.73693 0.684999 9.6411 0.789771 9.57875 0.914375L6.03687 8H2C1.60218 8 1.22064 8.15804 0.93934 8.43934C0.658035 8.72064 0.5 9.10218 0.5 9.5V17.75C0.5 18.1478 0.658035 18.5294 0.93934 18.8107C1.22064 19.092 1.60218 19.25 2 19.25H18.125C18.6732 19.2502 19.2025 19.0503 19.6137 18.6878C20.0249 18.3253 20.2896 17.8251 20.3581 17.2812L21.4831 8.28125C21.523 7.9644 21.495 7.64268 21.4009 7.3375C21.3068 7.03232 21.1488 6.75066 20.9375 6.51125ZM2 9.5H5.75V17.75H2V9.5ZM19.9944 8.09375L18.8694 17.0938C18.8465 17.275 18.7583 17.4418 18.6212 17.5626C18.4842 17.6834 18.3077 17.7501 18.125 17.75H7.25V8.92719L10.6916 2.04313C11.2016 2.14521 11.6606 2.4209 11.9903 2.82326C12.32 3.22562 12.5001 3.7298 12.5 4.25V6.5C12.5 6.69891 12.579 6.88968 12.7197 7.03033C12.8603 7.17098 13.0511 7.25 13.25 7.25H19.25C19.3564 7.24996 19.4616 7.27258 19.5587 7.31634C19.6557 7.36011 19.7423 7.42402 19.8127 7.50383C19.8831 7.58363 19.9357 7.67752 19.967 7.77923C19.9984 7.88094 20.0077 7.98816 19.9944 8.09375Z" 1879 fill="#F7F4F2" 1880 /> 1881 </svg> 1882 </div> 1883 <p class="text-poppins text-poppins-normal-16">Simple Approval</p> 1884 </div> 1885 <p 1886 class="text-poppins text-poppins-normal text-feature-card-paragraph" 1887 > 1888 No credit applications or complex approval process required. 1889 </p> 1890 </div> 1891 <div class="feature-item-card"> 1892 <div class="feature-item-card__content"> 1893 <div class="feature-item-card__icon-wrapper"> 1894 <svg 1895 width="18" 1896 height="20"
1897 viewBox="0 0 18 20" 1898 fill="none" 1899 xmlns="http://www.w3.org/2000/svg" 1900 > 1901 <path 1902 d="M16.5 0.75H1.5C1.10218 0.75 0.720644 0.908035 0.43934 1.18934C0.158035 1.47064 0 1.85218 0 2.25V7.5C0 12.4425 2.3925 15.4378 4.39969 17.0803C6.56156 18.8484 8.71219 19.4484 8.80594 19.4738C8.93484 19.5088 9.07078 19.5088 9.19969 19.4738C9.29344 19.4484 11.4413 18.8484 13.6059 17.0803C15.6075 15.4378 18 12.4425 18 7.5V2.25C18 1.85218 17.842 1.47064 17.5607 1.18934C17.2794 0.908035 16.8978 0.75 16.5 0.75ZM16.5 7.5C16.5 10.9753 15.2194 13.7962 12.6937 15.8831C11.5943 16.7885 10.344 17.493 9 17.9644C7.67363 17.5012 6.4387 16.8092 5.35125 15.9197C2.79563 13.8291 1.5 10.9969 1.5 7.5V2.25H16.5V7.5ZM4.71937 10.2806C4.57864 10.1399 4.49958 9.94902 4.49958 9.75C4.49958 9.55098 4.57864 9.36011 4.71937 9.21937C4.86011 9.07864 5.05098 8.99958 5.25 8.99958C5.44902 8.99958 5.63989 9.07864 5.78063 9.21937L7.5 10.9397L12.2194 6.21937C12.2891 6.14969 12.3718 6.09442 12.4628 6.0567C12.5539 6.01899 12.6515 5.99958 12.75 5.99958C12.8485 5.99958 12.9461 6.01899 13.0372 6.0567C13.1282 6.09442 13.2109 6.14969 13.2806 6.21937C13.3503 6.28906 13.4056 6.37178 13.4433 6.46283C13.481 6.55387 13.5004 6.65145 13.5004 6.75C13.5004 6.84855 13.481 6.94613 13.4433 7.03717C13.4056 7.12822 13.3503 7.21094 13.2806 7.28063L8.03063 12.5306C7.96097 12.6004 7.87825 12.6557 7.78721 12.6934C7.69616 12.7312 7.59856 12.7506 7.5 12.7506C7.40144 12.7506 7.30384 12.7312 7.21279 12.6934C7.12175 12.6557 7.03903 12.6004 6.96937 12.5306L4.71937 10.2806Z" 1903 fill="#F7F4F2" 1904 /> 1905 </svg> 1906 </div> 1907 <p class="text-poppins text-poppins-normal-16">Cancel Anytime</p> 1908 </div> 1909 <p 1910 class="text-poppins text-poppins-normal text-feature-card-paragraph" 1911 > 1912 Stop payments anytime with no penalties or fees. 1913 </p> 1914 </div> 1915 <div class="feature-item-card"> 1916 <div class="feature-item-card__content"> 1917 <div class="feature-item-card__icon-wrapper"> 1918 <svg 1919 width="24" 1920 height="19"
1921 viewBox="0 0 24 19" 1922 fill="none" 1923 xmlns="http://www.w3.org/2000/svg" 1924 > 1925 <path 1926 d="M22.5 17.5H21V10.75L21.2194 10.9694C21.3604 11.1101 21.5515 11.1891 21.7507 11.1889C21.9499 11.1887 22.1408 11.1094 22.2816 10.9684C22.4223 10.8275 22.5013 10.6363 22.5011 10.4371C22.5009 10.2379 22.4216 10.047 22.2806 9.90625L13.0603 0.688748C12.779 0.407656 12.3977 0.249756 12 0.249756C11.6023 0.249756 11.221 0.407656 10.9397 0.688748L1.71938 9.90625C1.57877 10.047 1.49983 10.2378 1.49991 10.4367C1.5 10.6357 1.57911 10.8264 1.71984 10.967C1.86057 11.1076 2.0514 11.1866 2.25033 11.1865C2.44927 11.1864 2.64002 11.1073 2.78062 10.9666L3 10.75V17.5H1.5C1.30109 17.5 1.11032 17.579 0.96967 17.7197C0.829018 17.8603 0.75 18.0511 0.75 18.25C0.75 18.4489 0.829018 18.6397 0.96967 18.7803C1.11032 18.921 1.30109 19 1.5 19H22.5C22.6989 19 22.8897 18.921 23.0303 18.7803C23.171 18.6397 23.25 18.4489 23.25 18.25C23.25 18.0511 23.171 17.8603 23.0303 17.7197C22.8897 17.579 22.6989 17.5 22.5 17.5ZM4.5 9.25L12 1.75L19.5 9.25V17.5H15V12.25C15 12.0511 14.921 11.8603 14.7803 11.7197C14.6397 11.579 14.4489 11.5 14.25 11.5H9.75C9.55109 11.5 9.36032 11.579 9.21967 11.7197C9.07902 11.8603 9 12.0511 9 12.25V17.5H4.5V9.25ZM13.5 17.5H10.5V13H13.5V17.5Z" 1927 fill="#F7F4F2" 1928 /> 1929 </svg> 1930 </div> 1931 <p class="text-poppins text-poppins-normal-16">Yours Forever</p> 1932 </div> 1933 <p 1934 class="text-poppins text-poppins-normal text-feature-card-paragraph" 1935 > 1936 After 12 payments, you own your plugins forever with future 1937 updates included. 1938 </p> 1939 </div> 1940 </div> 1941 </div> 1942 </div> 1943 </div> 1944 <div class="content-block standard-block"> 1945 <div class="testimonials-section"> 1946 <div class="testimonials-section__header"> 1947 <h3 class="testimonials-section__title"> 1948 Trusted by the best in the industry 1949 </h3> 1950 <h6 class="testimonials-section__subtitle"> 1951 From Grammy winning engineers to Billboard producers, professionals 1952 rely on our plugins. 1953 </h6> 1954 </div> 1955 <!-- Mobile slider version (shown under 1200px) --> 1956 <div class="testimonials-mobile"> 1957 <div 1958 class="splide" 1959 id="mobile-testimonials-splide" 1960 aria-label="Testimonials" 1961 > 1962 <div class="splide__track"> 1963 <ul class="splide__list"> 1964 <li class="splide__slide"> 1965 <div 1966 class="mobile-testimonial-card" 1967 style=" 1968 --bg: url('https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/RoarkBailey.c77d23673164.jpg'); 1969 --border-color: #986892; 1970 " 1971 > 1972 <div class="mobile-testimonial-card__content"> 1973 <div class="mobile-testimonial-card__quote-container"> 1974 <h5 class="mobile-testimonial-card__quote"> 1975 â⦠great for getting transparent loudness. Simply put: 1976 get it now.â 1977 </h5> 1978 </div> 1979 <h5 class="mobile-testimonial-card__author"> 1980 Roark Bailey 1981 </h5> 1982 <p class="text-poppins mobile-testimonial-card__credit"> 1983 Post Malone, Drake, Playboi Carti 1984 </p> 1985 </div> 1986 </div> 1987 </li> 1988 <li class="splide__slide"> 1989 <div 1990 class="mobile-testimonial-card" 1991 style=" 1992 --bg: url('https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/NealPogue.2344a7fee2ed.jpg'); 1993 --border-color: #849868; 1994 " 1995 > 1996 <div class="mobile-testimonial-card__content"> 1997 <div class="mobile-testimonial-card__quote-container"> 1998 <h5 class="mobile-testimonial-card__quote"> 1999 âMaster Plan is so amazing that when I decide not to use 2000 it on a mix (which is very rare), I feel a little 2001 insecure.â 2002 </h5> 2003 </div> 2004 <h5 class="mobile-testimonial-card__author">Neal Pogue</h5> 2005 <p class="text-poppins mobile-testimonial-card__credit"> 2006 7x Grammy Winner 2007 </p> 2008 </div> 2009 </div> 2010 </li> 2011 <li class="splide__slide"> 2012 <div 2013 class="mobile-testimonial-card" 2014 style=" 2015 --bg: url('https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/MarkParfitt.d862cace2684.jpg'); 2016 --border-color: #687c98; 2017 " 2018 > 2019 <div class="mobile-testimonial-card__content"> 2020 <div class="mobile-testimonial-card__quote-container"> 2021 <h5 class="mobile-testimonial-card__quote"> 2022 âTHIS PLUGIN IS LEGIT.â 2023 </h5> 2024 </div> 2025 <h5 class="mobile-testimonial-card__author"> 2026 Mark Parfitt 2027 </h5> 2028 <p class="text-poppins mobile-testimonial-card__credit"> 2029 Justin Bieber, Kehlani, Ty Dolla $ign 2030 </p> 2031 </div> 2032 </div> 2033 </li> 2034 <li class="splide__slide"> 2035 <div 2036 class="mobile-testimonial-card" 2037 style=" 2038 --bg: url('https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/GeraldKeys.dab2691b3b85.jpg'); 2039 --border-color: #988068; 2040 " 2041 > 2042 <div class="mobile-testimonial-card__content"> 2043 <div class="mobile-testimonial-card__quote-container"> 2044 <h5 class="mobile-testimonial-card__quote"> 2045 âIf I only could put 1 thing on my master buss this 2046 would be it.â 2047 </h5> 2048 </div> 2049 <h5 class="mobile-testimonial-card__author">Gerald Keys</h5> 2050 <p class="text-poppins mobile-testimonial-card__credit"> 2051 Ludacris, Usher 2052 </p> 2053 </div> 2054 </div> 2055 </li> 2056 </ul> 2057 </div> 2058 </div> 2059 </div> 2060 <div class="testimonials-grid"> 2061 <div class="testimonials-grid__row testimonials-grid__row--large"> 2062 <div 2063 id="testimonial-image-card" 2064 class="testimonial-card testimonial-card--image-placeholder" 2065 > 2066 <img 2067 id="testimonial-image" 2068 class="testimonial-card__image" 2069 style="object-position: center 0%" 2070 src="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/NealPogue.2344a7fee2ed.jpg" 2071 alt="Featured testimonial image" 2072 /> 2073 </div> 2074 <div 2075 id="testimonial-quote-card" 2076 class="testimonial-card testimonial-card--quote" 2077 > 2078 <div class="testimonial-card__inner-wrapper"> 2079 <div class="testimonial-card__quote-content"> 2080 <h5 id="testimonial-quote"> 2081 âMaster Plan is so amazing that when I decide not to use it on 2082 a mix (which is very rare), I feel a little insecure.â 2083 </h5> 2084 </div> 2085 <h5 id="testimonial-author" class="testimonial-card__author"> 2086 Neal Pogue 2087 </h5> 2088 <p 2089 id="testimonial-credit" 2090 class="text-poppins text-feature-card-paragraph" 2091 > 2092 7x Grammy Winner 2093 </p> 2094 </div> 2095 </div> 2096 </div> 2097 <div class="testimonials-grid__row testimonials-grid__row--small"> 2098 <div 2099 class="testimonial-card-wrapper--small" 2100 data-image="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/RoarkBailey.c77d23673164.jpg" 2101 data-quote="... great for getting transparent loudne
2101ss. Simply put: get it now." 2102 data-author="Roark Bailey" 2103 data-credit="Post Malone, Drake, Playboi Carti" 2104 data-corner-target="image-bl" 2105 data-color="#986892" 2106 > 2107 <div class="testimonial-card--small"> 2108 <h5 class="testimonial-card__author">Roark Bailey</h5> 2109 <p 2110 class="text-poppins text-feature-card-paragraph testimonial-card__credit" 2111 > 2112 Post Malone, Drake, Playboi Carti 2113 </p> 2114 </div> 2115 </div> 2116 <div 2117 class="testimonial-card-wrapper--small" 2118 data-image="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/NealPogue.2344a7fee2ed.jpg" 2119 data-quote="Master Plan is so amazing that when I decide not to use it on a mix (which is very rare), I feel a little insecure." 2120 data-author="Neal Pogue" 2121 data-credit="7x Grammy Winner" 2122 data-corner-target="image-br" 2123 data-color="#849868" 2124 > 2125 <div class="testimonial-card--small"> 2126 <h5 class="testimonial-card__author">Neal Pogue</h5> 2127 <p class="text-poppins text-feature-card-paragraph"> 2128 7x Grammy Winner 2129 </p> 2130 </div> 2131 </div> 2132 <div 2133 class="testimonial-card-wrapper--small" 2134 data-image="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/MarkParfitt.d862cace2684.jpg" 2135 data-quote="THIS PLUGIN IS LEGIT." 2136 data-author="Mark Parfitt" 2137 data-credit="Justin Bieber, Kehlani, Ty Dolla $ign" 2138 data-corner-target="quote-bl" 2139 data-color="#687C98" 2140 > 2141 <div class="testimonial-card--small"> 2142 <h5 class="testimonial-card__author">Mark Parfitt</h5> 2143 <p class="text-poppins text-feature-card-paragraph"> 2144 Justin Bieber, Kehlani, Ty Dolla $ign 2145 </p> 2146 </div> 2147 </div> 2148 <div 2149 class="testimonial-card-wrapper--small" 2150 data-image="https://static.musikhack.com/static/website/img/Musik Hack/MasterPlanTestimonials/GeraldKeys.dab2691b3b85.jpg" 2151 data-quote="If I only could put 1 thing on my master buss this would be it." 2152 data-author="Gerald Keys" 2153 data-credit="Ludacris, Usher" 2154 data-corner-target="quote-br" 2155 data-color="#988068" 2156 > 2157 <div class="testimonial-card--small"> 2158 <h5 class="testimonial-card__author">Gerald Keys</h5> 2159 <p class="text-poppins text-feature-card-paragraph"> 2160 Ludacris, Usher 2161 </p> 2162 </div> 2163 </div> 2164 </div> 2165 </div> 2166 </div> 2167 </div> 2168 <div class="content-block cta-section"> 2169 <div class="cta-section__container"> 2170 <div class="cta-section__text-wrapper"> 2171 <h3 class="cta-section__title">Hear the difference for yourself</h3> 2172 <h6 class="cta-section__subtitle"> 2173 Download your free 10-day trials and see why our plugins solve 2174 problems other tools can't. 2175 </h6> 2176 </div> 2177 <div class="cta-section__background-images"> 2178 <div id="master-plan-img" class="cta-section__background-image-wrapper"> 2179 <img 2180 class="cta-section__background-image" 2181 src="https://static.musikhack.com/static/website/img/Musik Hack/MP_Light_Screen_v15.9bcbc492875b.jpg" 2182 /> 2183 </div> 2184 <div id="fuel-img" class="cta-section__background-image-wrapper"> 2185 <img 2186 class="cta-section__background-image" 2187 src="https://static.musikhack.com/static/website/img/Fuel/fuel.dcea72b72e73.jpg" 2188 /> 2189 </div> 2190 </div> 2191 <div class="cta-section__buttons-container"> 2192 <!-- prettier-ignore --> 2193 <!-- prettier-ignore --> 2194<a 2195 id="master-plan-btn" 2196 href="#" 2197 class="new-button-container cta-demo-button" 2198 style="--accent-color: #d66790; " 2199 2200 2201 data-product="masterplan" 2202 data-color="#d66790" 2203> 2204 <p 2205 class="text-poppins text-button" 2206 style="" 2207 > 2208 Try Master Plan for Free 2209 </p> 2210 <div class="new-button-arrow-box"> 2211 <svg 2212 width="14" 2213 height="12"
2214 viewBox="0 0 14 12" 2215 fill="none" 2216 xmlns="http://www.w3.org/2000/svg" 2217 > 2218 <path 2219 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2220 fill="#F7F4F2" 2221 /> 2222 </svg> 2223 </div> 2224</a> 2225<style> 2226 /* Button Styles */ 2227 .new-button-container { 2228 position: relative; 2229 overflow: hidden; 2230 cursor: pointer; 2231 height: 56px; 2232 display: flex; 2233 flex-direction: row; 2234 align-items: center; 2235 justify-content: center; 2236 background-color: var(--accent-color); 2237 border-radius: 8px; 2238 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 2239 gap: 20px; 2240 text-decoration: none; 2241 } 2242 .new-button-container > p { 2243 position: relative; 2244 z-index: 2; 2245 transition: all 0.4s ease-in-out; 2246 } 2247 .new-button-arrow-box { 2248 position: absolute; 2249 top: 4px; 2250 right: 4px; 2251 width: 48px; 2252 height: 48px; 2253 border-radius: 6px; 2254 background-color: rgba(10, 10, 10, 0.4); 2255 transition: all 0.2s ease-in-out; 2256 z-index: 1; 2257 display: flex; 2258 flex-direction: row-reverse; 2259 justify-content: flex-start; 2260 align-items: center; 2261 padding-right: 17px; 2262 } 2263 .new-button-container:hover .new-button-arrow-box { 2264 width: calc(100% - 8px); 2265 height: calc(100% - 8px); 2266 border-radius: 6px; 2267 } 2268 2269 /* Rent to Own Button Styles */ 2270 .btn-rto { 2271 background-color: transparent; 2272 box-shadow: inset 0 0 0 1px var(--accent-color); 2273 } 2274 2275 .btn-rto > p { 2276 color: var(--accent-color); 2277 } 2278 2279 .btn-rto .new-button-arrow-box { 2280 background-color: transparent; 2281 box-shadow: inset 0 0 0 1px var(--accent-color); 2282 } 2283 2284 .btn-rto:hover .new-button-arrow-box { 2285 background-color: transparent; 2286 } 2287 2288 .btn-rto svg path { 2289 fill: var(--accent-color); 2290 } 2291</style> 2292 2293 <!-- prettier-ignore --> 2294<a 2295 id="fuel-btn" 2296 href="#" 2297 class="new-button-container cta-demo-button" 2298 style="--accent-color: #e5884d; " 2299 2300 2301 data-product="fuel" 2302 data-color="#e5884d" 2303> 2304 <p 2305 class="text-poppins text-button" 2306 style="" 2307 > 2308 Try FUEL for Free 2309 </p> 2310 <div class="new-button-arrow-box"> 2311 <svg 2312 width="14" 2313 height="12" 2314 viewBox="0 0 14 12" 2315 fill="none" 2316 xmlns="http://www.w3.org/2000/svg" 2317 > 2318 <path 2319 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2320 fill="#F7F4F2" 2321 /> 2322 </svg> 2323 </div> 2324</a> 2325<style> 2326 /* Button Styles */ 2327 .new-button-container { 2328 position: relative; 2329 overflow: hidden; 2330 cursor: pointer; 2331 height: 56px; 2332 display: flex; 2333 flex-direction: row; 2334 align-items: center; 2335 justify-content: center; 2336 background-color: var(--accent-color); 2337 border-radius: 8px; 2338 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 2339 gap: 20px; 2340 text-decoration: none; 2341 } 2342 .new-button-container > p { 2343 position: relative; 2344 z-index: 2; 2345 transition: all 0.4s ease-in-out; 2346 } 2347 .new-button-arrow-box { 2348 position: absolute; 2349 top: 4px; 2350 right: 4px; 2351 width: 48px; 2352 height: 48px; 2353 border-radius: 6px; 2354 background-color: rgba(10, 10, 10, 0.4); 2355 transition: all 0.2s ease-in-out; 2356 z-index: 1; 2357 display: flex; 2358 flex-direction: row-reverse; 2359 justify-content: flex-start;
2360 align-items: center; 2361 padding-right: 17px; 2362 } 2363 .new-button-container:hover .new-button-arrow-box { 2364 width: calc(100% - 8px); 2365 height: calc(100% - 8px); 2366 border-radius: 6px; 2367 } 2368 2369 /* Rent to Own Button Styles */ 2370 .btn-rto { 2371 background-color: transparent; 2372 box-shadow: inset 0 0 0 1px var(--accent-color); 2373 } 2374 2375 .btn-rto > p { 2376 color: var(--accent-color); 2377 } 2378 2379 .btn-rto .new-button-arrow-box { 2380 background-color: transparent; 2381 box-shadow: inset 0 0 0 1px var(--accent-color); 2382 } 2383 2384 .btn-rto:hover .new-button-arrow-box { 2385 background-color: transparent; 2386 } 2387 2388 .btn-rto svg path { 2389 fill: var(--accent-color); 2390 } 2391</style> 2392 2393 <!-- prettier-ignore --> 2394<a 2395 id="sweeteq-btn" 2396 href="#" 2397 class="new-button-container cta-demo-button" 2398 style="--accent-color: #985294; " 2399 2400 2401 data-product="sweeteq" 2402 data-color="#985294" 2403> 2404 <p 2405 class="text-poppins text-button" 2406 style="" 2407 > 2408 Try SweetEQ for Free 2409 </p> 2410 <div class="new-button-arrow-box"> 2411 <svg 2412 width="14" 2413 height="12" 2414 viewBox="0 0 14 12" 2415 fill="none" 2416 xmlns="http://www.w3.org/2000/svg" 2417 > 2418 <path 2419 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2420 fill="#F7F4F2" 2421 /> 2422 </svg> 2423 </div> 2424</a> 2425<style> 2426 /* Button Styles */ 2427 .new-button-container { 2428 position: relative; 2429 overflow: hidden; 2430 cursor: pointer; 2431 height: 56px; 2432 display: flex; 2433 flex-direction: row; 2434 align-items: center; 2435 justify-content: center; 2436 background-color: var(--accent-color); 2437 border-radius: 8px; 2438 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 2439 gap: 20px; 2440 text-decoration: none; 2441 } 2442 .new-button-container > p { 2443 position: relative; 2444 z-index: 2; 2445 transition: all 0.4s ease-in-out; 2446 } 2447 .new-button-arrow-box { 2448 position: absolute; 2449 top: 4px; 2450 right: 4px; 2451 width: 48px; 2452 height: 48px; 2453 border-radius: 6px; 2454 background-color: rgba(10, 10, 10, 0.4); 2455 transition: all 0.2s ease-in-out; 2456 z-index: 1; 2457 display: flex; 2458 flex-direction: row-reverse; 2459 justify-content: flex-start; 2460 align-items: center; 2461 padding-right: 17px; 2462 } 2463 .new-button-container:hover .new-button-arrow-box { 2464 width: calc(100% - 8px); 2465 height: calc(100% - 8px); 2466 border-radius: 6px; 2467 } 2468 2469 /* Rent to Own Button Styles */ 2470 .btn-rto { 2471 background-color: transparent; 2472 box-shadow: inset 0 0 0 1px var(--accent-color); 2473 } 2474 2475 .btn-rto > p { 2476 color: var(--accent-color); 2477 } 2478 2479 .btn-rto .new-button-arrow-box { 2480 background-color: transparent; 2481 box-shadow: inset 0 0 0 1px var(--accent-color); 2482 } 2483 2484 .btn-rto:hover .new-button-arrow-box { 2485 background-color: transparent; 2486 } 2487 2488 .btn-rto svg path { 2489 fill: var(--accent-color); 2490 } 2491</style> 2492 2493 2494 <!-- Mobile-only demo header (appears when a demo is active) --> 2495 <div id="demo-header" class="demo-header" aria-live="polite"></div> 2496 2497<div 2498 id="mini-demo-form" 2499 class="mini-demo-form-obj" 2500 style="--demo-accent-color: #d66790" 2501> 2502 <form 2503 data-clarity-mask="true" 2504 id="contact" 2505 action="/contact/" 2506 method="post" 2507 style="border-radius: 10px" 2508 > 2509 <input type="hidden" name="csrfmiddlewaretoken" value="TD8HixAzdvY5iwJwpgLU48k1PyY92jeTAKLC4wSxjTIn9kqAjTG3aRChLPgILpUq"> 2510 <!-- create a form that takes email and a message --> 2511 <label 2512 for="contact-email-mini-demo-form" 2513 class="text-vinyl form-label" 2514 style="line-height: 1.3em; margin-bottom: 0px" 2515 > 2516 2517 </label> 2518 <!-- this is for the email field and submit button (ROW) --> 2519 <div class="email-field-row-container"> 2520 <!-- this is to encapsulate the email field --> 2521 <div 2522 class="mini-demo-form-email-field-container" 2523 style="margin-right: 10px" 2524 > 2525 2526 <input 2527 type="email" 2528 id="contact-email-mini-demo-form" 2529 name="email" 2530 class="text-poppins mini-demo-form-input-field" 2531 style="font-size: 20px" 2532 placeholder="email" 2533 /> 2534 2535 </div> 2536 <!-- prettier-ignore --> 2537 <!-- prettier-ignore --> 2538<a 2539 id="submit-button-inner" 2540 href="#" 2541 class="new-button-container submit-button-disabled demo-button" 2542 style="--accent-color: var(--demo-accent-color); " 2543 2544 2545 2546 2547> 2548 <p 2549 class="text-poppins text-button" 2550 style="" 2551 > 2552 Get Demo 2553 </p> 2554 <div class="new-button-arrow-box"> 2555 <svg 2556 width="14" 2557 height="12"
2558 viewBox="0 0 14 12" 2559 fill="none" 2560 xmlns="http://www.w3.org/2000/svg" 2561 > 2562 <path 2563 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2564 fill="#F7F4F2" 2565 /> 2566 </svg> 2567 </div> 2568</a> 2569<style> 2570 /* Button Styles */ 2571 .new-button-container { 2572 position: relative; 2573 overflow: hidden; 2574 cursor: pointer; 2575 height: 56px; 2576 display: flex; 2577 flex-direction: row; 2578 align-items: center; 2579 justify-content: center; 2580 background-color: var(--accent-color); 2581 border-radius: 8px; 2582 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 2583 gap: 20px; 2584 text-decoration: none; 2585 } 2586 .new-button-container > p { 2587 position: relative; 2588 z-index: 2; 2589 transition: all 0.4s ease-in-out; 2590 } 2591 .new-button-arrow-box { 2592 position: absolute; 2593 top: 4px; 2594 right: 4px; 2595 width: 48px; 2596 height: 48px; 2597 border-radius: 6px; 2598 background-color: rgba(10, 10, 10, 0.4); 2599 transition: all 0.2s ease-in-out; 2600 z-index: 1; 2601 display: flex; 2602 flex-direction: row-reverse; 2603 justify-content: flex-start; 2604 align-items: center; 2605 padding-right: 17px; 2606 } 2607 .new-button-container:hover .new-button-arrow-box { 2608 width: calc(100% - 8px); 2609 height: calc(100% - 8px); 2610 border-radius: 6px; 2611 } 2612 2613 /* Rent to Own Button Styles */ 2614 .btn-rto { 2615 background-color: transparent; 2616 box-shadow: inset 0 0 0 1px var(--accent-color); 2617 } 2618 2619 .btn-rto > p { 2620 color: var(--accent-color); 2621 } 2622 2623 .btn-rto .new-button-arrow-box { 2624 background-color: transparent; 2625 box-shadow: inset 0 0 0 1px var(--accent-color); 2626 } 2627 2628 .btn-rto:hover .new-button-arrow-box { 2629 background-color: transparent; 2630 } 2631 2632 .btn-rto svg path { 2633 fill: var(--accent-color); 2634 } 2635</style> 2636 2637 <!-- <label id="submit-button"> 2638 <input 2639 id="submit-button-input" 2640 type="submit" 2641 style="margin-top: 0px; display: none" 2642 disabled 2643 /> 2644 <div id="submit-button-inner" class="submit-button-disabled"> 2645 <div class="submit-email-button-box"> 2646 <svg 2647 width="14" 2648 height="12"
2649 viewBox="0 0 14 12" 2650 fill="none" 2651 xmlns="http://www.w3.org/2000/svg" 2652 > 2653 <path 2654 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2655 fill="#F7F4F2" 2656 /> 2657 </svg> 2658 </div> 2659 </div> 2660 </label> --> 2661 </div> 2662 <div id="mini-demo-form-error-container"> 2663 <p id="mini-demo-form-error-message" class="text-poppins"></p> 2664 <span 2665 class="text-poppins" 2666 style="width: 100%; text-align: center; font-size: 0.8em" 2667 > 2668 For assistance, please contact us 2669 <a href="/support/#contact">here</a>. 2670 </span> 2671 </div> 2672 <div class="signup-row"> 2673 <input type="checkbox" name="checkbox" id="contact-checkbox" checked /> 2674 <label 2675 for="contact-checkbox" 2676 name="checkbox" 2677 class="text-poppins" 2678 style="margin-left: 10px; font-size: 0.8em" 2679 > 2680 Sign up for Musik Hack updates 2681 </label> 2682 </div> 2683 <input type="hidden" name="name" id="name" /> 2684 <input 2685 type="hidden" 2686 name="campaign" 2687 id="campaign" 2688 value="1" 2689 /> 2690 <input type="hidden" name="platform" id="platform" value="DI" /> 2691 <input type="hidden" name="product" id="product" value="" /> 2692 </form> 2693 2694 <!-- Cancel button under the form --> 2695 <div class="demo-cancel-row" style="display: flex; justify-content: center"> 2696 <button 2697 id="cancel-demo-button" 2698 type="button" 2699 class="cancel-skeleton-button" 2700 > 2701 go back 2702 </button> 2703 </div> 2704 2705 <div id="demo-form-confirm" class="mini-demo-form-obj" style="display: none; padding-top: 20px;"> 2706 <p class="text-poppins" style="text-align: center"> 2707 Thank you! We sent your demo to 2708 <span style="font-weight: 600" id="confirmation-email-field"></span> 2709 </p> 2710 2711 <!-- Desktop message and buttons --> 2712 <div class="desktop-only"> 2713 <div 2714 id="buy-button-row" 2715 style=" 2716 padding-bottom: 10px; 2717 padding-top: 10px; 2718 margin-top: 30px; 2719 gap: 30px; 2720 " 2721 > 2722 <!-- prettier-ignore --> 2723 <!-- prettier-ignore --> 2724<a 2725 id="mac-download-button" 2726 href="#" 2727 class="new-button-container " 2728 style="--accent-color: var(--demo-accent-color); " 2729 2730 2731 2732 2733> 2734 <p 2735 class="text-poppins text-button" 2736 style="" 2737 > 2738 Download Mac 2739 </p> 2740 <div class="new-button-arrow-box"> 2741 <svg 2742 width="14" 2743 height="12" 2744 viewBox="0 0 14 12" 2745 fill="none" 2746 xmlns="http://www.w3.org/2000/svg" 2747 > 2748 <path 2749 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2750 fill="#F7F4F2" 2751 /> 2752 </svg> 2753 </div> 2754</a> 2755<style> 2756 /* Button Styles */ 2757 .new-button-container { 2758 position: relative; 2759 overflow: hidden; 2760 cursor: pointer; 2761 height: 56px; 2762 display: flex; 2763 flex-direction: row; 2764 align-items: center; 2765 justify-content: center; 2766 background-color: var(--accent-color); 2767 border-radius: 8px; 2768 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 2769 gap: 20px; 2770 text-decoration: none; 2771 } 2772 .new-button-container > p { 2773 position: relative; 2774 z-index: 2; 2775 transition: all 0.4s ease-in-out; 2776 } 2777 .new-button-arrow-box { 2778 position: absolute; 2779 top: 4px; 2780 right: 4px; 2781 width: 48px; 2782 height: 48px; 2783 border-radius: 6px; 2784 background-color: rgba(10, 10, 10, 0.4); 2785 transition: all 0.2s ease-in-out; 2786 z-index: 1; 2787 display: flex; 2788 flex-direction: row-reverse; 2789 justify-content: flex-start;
2790 align-items: center; 2791 padding-right: 17px; 2792 } 2793 .new-button-container:hover .new-button-arrow-box { 2794 width: calc(100% - 8px); 2795 height: calc(100% - 8px); 2796 border-radius: 6px; 2797 } 2798 2799 /* Rent to Own Button Styles */ 2800 .btn-rto { 2801 background-color: transparent; 2802 box-shadow: inset 0 0 0 1px var(--accent-color); 2803 } 2804 2805 .btn-rto > p { 2806 color: var(--accent-color); 2807 } 2808 2809 .btn-rto .new-button-arrow-box { 2810 background-color: transparent; 2811 box-shadow: inset 0 0 0 1px var(--accent-color); 2812 } 2813 2814 .btn-rto:hover .new-button-arrow-box { 2815 background-color: transparent; 2816 } 2817 2818 .btn-rto svg path { 2819 fill: var(--accent-color); 2820 } 2821</style> 2822 2823 <!-- prettier-ignore --> 2824<a 2825 id="win-download-button" 2826 href="#" 2827 class="new-button-container " 2828 style="--accent-color: var(--demo-accent-color); " 2829 2830 2831 2832 2833> 2834 <p 2835 class="text-poppins text-button" 2836 style="" 2837 > 2838 Download PC 2839 </p> 2840 <div class="new-button-arrow-box"> 2841 <svg 2842 width="14" 2843 height="12" 2844 viewBox="0 0 14 12" 2845 fill="none" 2846 xmlns="http://www.w3.org/2000/svg" 2847 > 2848 <path 2849 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 2850 fill="#F7F4F2" 2851 /> 2852 </svg> 2853 </div> 2854</a> 2855<style> 2856 /* Button Styles */ 2857 .new-button-container { 2858 position: relative; 2859 overflow: hidden; 2860 cursor: pointer; 2861 height: 56px; 2862 display: flex; 2863 flex-direction: row; 2864 align-items: center; 2865 justify-content: center; 2866 background-color: var(--accent-color); 2867 border-radius: 8px; 2868 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 2869 gap: 20px; 2870 text-decoration: none; 2871 } 2872 .new-button-container > p { 2873 position: relative; 2874 z-index: 2; 2875 transition: all 0.4s ease-in-out; 2876 } 2877 .new-button-arrow-box { 2878 position: absolute; 2879 top: 4px; 2880 right: 4px; 2881 width: 48px; 2882 height: 48px; 2883 border-radius: 6px; 2884 background-color: rgba(10, 10, 10, 0.4); 2885 transition: all 0.2s ease-in-out; 2886 z-index: 1; 2887 display: flex; 2888 flex-direction: row-reverse; 2889 justify-content: flex-start; 2890 align-items: center; 2891 padding-right: 17px; 2892 } 2893 .new-button-container:hover .new-button-arrow-box { 2894 width: calc(100% - 8px); 2895 height: calc(100% - 8px); 2896 border-radius: 6px; 2897 } 2898 2899 /* Rent to Own Button Styles */ 2900 .btn-rto { 2901 background-color: transparent; 2902 box-shadow: inset 0 0 0 1px var(--accent-color); 2903 } 2904 2905 .btn-rto > p { 2906 color: var(--accent-color); 2907 } 2908 2909 .btn-rto .new-button-arrow-box { 2910 background-color: transparent; 2911 box-shadow: inset 0 0 0 1px var(--accent-color); 2912 } 2913 2914 .btn-rto:hover .new-button-arrow-box { 2915 background-color: transparent; 2916 } 2917 2918 .btn-rto svg path { 2919 fill: var(--accent-color); 2920 } 2921</style> 2922 2923 </div> 2924 </div> 2925 2926 <!-- Mobile message --> 2927 <div class="mobile-only"> 2928 <p class="text-poppins" style="padding: 10px; text-align: center"> 2929 Check your email on your computer and you can download the demo from 2930 there. 2931 </p> 2932 </div> 2933 </div> 2934</div>
2935<script type="module"> 2936 import { 2937 postJSONFetch, 2938 getCookie, 2939 pixel_loaded, 2940 } from "https://static.musikhack.com/static/website/js/helper.c9a370a45d40.js"; 2941 // obtain all the elements we need 2942 const miniDemoForm = document.getElementById("mini-demo-form"); 2943 2944 // const submitButton = document.getElementById("submit-button"); 2945 const submitButtonInner = document.getElementById("submit-button-inner"); 2946 // const submitButtonInput = document.getElementById("submit-button-input"); 2947 const submitForm = document.getElementById("contact"); 2948 const cancelDemoButton = document.getElementById("cancel-demo-button"); 2949 2950 // update additional field 2951 const nameField = document.getElementById("name"); 2952 const emailField = document.getElementById("contact-email-mini-demo-form"); 2953 emailField.onblur = function () { 2954 nameField.value = emailField.value; 2955 }; 2956 2957 // Cancel button should behave like pressing Escape on main page 2958 if (cancelDemoButton) { 2959 cancelDemoButton.addEventListener("click", function (e) { 2960 e.preventDefault(); 2961 try { 2962 const demoFormContainer = document.getElementById("mini-demo-form"); 2963 const demoFormConfirm = document.getElementById("demo-form-confirm"); 2964 const ctaDemoButtons = document.querySelectorAll(".cta-demo-button"); 2965 const demoHeader = document.getElementById("demo-header"); 2966 const mpDemoBtn = document.getElementById("cta-demo-button"); 2967 const mpBuyBtn = document.getElementById("cta-buy-button"); 2968 const mpCtaGroup = document.querySelector(".cta-button-group"); 2969 2970 if (demoFormContainer) demoFormContainer.style.display = "none"; 2971 if (demoFormConfirm) demoFormConfirm.style.display = "none"; 2972 2973 ctaDemoButtons.forEach((b) => { 2974 b.style.display = "flex"; 2975 b.classList.remove("fade-out"); 2976 b.style.width = ""; 2977 b.style.padding = ""; 2978 b.style.margin = ""; 2979 b.style.overflow = ""; 2980 }); 2981 2982 // Restore Master Plan page CTA buttons if present 2983 if (mpDemoBtn) mpDemoBtn.style.display = "flex"; 2984 if (mpBuyBtn) { 2985 mpBuyBtn.classList.remove("fade-out"); 2986 mpBuyBtn.style.display = "flex"; 2987 } 2988 2989 if (demoHeader) { 2990 demoHeader.classList.remove("active"); 2991 demoHeader.textContent = ""; 2992 demoHeader.removeAttribute("style"); 2993 } 2994 2995 // Remove stacked layout on desktop when closing via cancel 2996 if (mpCtaGroup) { 2997 mpCtaGroup.classList.remove("cta-stacked"); 2998 } 2999 } catch (_) {} 3000 }); 3001 } 3002 3003 // when the submit button is clicked, send an ajax request to the backend 3004 function handleSubmit(e) { 3005 // once clicked, disable the button so it doesn't get double-clicked 3006 submitButtonInner.disabled = true; 3007 submitButtonInner.classList.add("submit-button-disabled"); 3008 submitButtonInner.classList.remove("submit-button-enabled"); 3009 3010 let csrfToken = getCookie("csrftoken"); 3011 3012 let body = { 3013 email: emailField.value.trim(), 3014 name: nameField.value.trim(), 3015 campaign: document.getElementById("campaign").value, 3016 platform: document.getElementById("platform").value, 3017 checkbox: document.getElementById("contact-checkbox").checked, 3018 }; 3019 3020 const submitForm = document.getElementById("contact"); 3021 let formAction = submitForm.action; 3022 3023 // call ajax request 3024 postJSONFetch(formAction, body, null, csrfToken).then((resp) => { 3025 // if the response is successful, show the confirmation message with download links 3026 if (resp._status == 200) { 3027 document.getElementById("demo-form-confirm").style.display = "block"; 3028 submitForm.style.display = "none"; 3029 document.getElementById("confirmation-email-field").innerText = 3030 resp.email; 3031 document.getElementById("mac-download-button").href = resp.download_mac; 3032 document.getElementById("win-download-button").href = resp.download_win; 3033 3034 if (window.mhTracking) { 3035 window.mhTracking.trackSignup(resp.meta_event_id); 3036 } 3037 3038 // if there is an error message, display it along with the last email address used 3039 } else if (resp.error_message != undefined) { 3040 emailField.placeholder = resp.autopopulated_email; 3041 emailField.value = resp.autopopulated_email; 3042 document.getElementById( 3043 "mini-demo-form-error-container" 3044 ).style.display = "flex"; 3045 document.getElementById("mini-demo-form-error-message").innerText = 3046 resp.error_message; 3047 3048 // if there is just a generic error, say something went wrong 3049 } else if (resp._status >= 400) { 3050 document.getElementById( 3051 "mini-demo-form-error-container" 3052 ).style.display = "flex"; 3053 document.getElementById("mini-demo-form-error-message").innerText = 3054 "An error occurred. Please try again."; 3055 } 3056 }); 3057 return false;
3058 } 3059 3060 // form validation = must have email 3061 function tryToEnableSubmit() { 3062 let email = emailField.value.trim(); 3063 let validationResult = validateEmail(email); 3064 let isValid = validationResult.is_valid; 3065 enableSubmitButton(isValid); 3066 } 3067 3068 function enableSubmitButton(isValid) { 3069 if (isValid) { 3070 submitButtonInner.disabled = false; 3071 submitButtonInner.classList.add("submit-button-enabled"); 3072 submitButtonInner.classList.remove("submit-button-disabled"); 3073 submitButtonInner.addEventListener("click", handleSubmit); 3074 } else { 3075 submitButtonInner.disabled = true; 3076 submitButtonInner.classList.add("submit-button-disabled"); 3077 submitButtonInner.classList.remove("submit-button-enabled"); 3078 submitButtonInner.removeEventListener("click", handleSubmit); 3079 } 3080 } 3081 3082 function validateEmail(email) { 3083 // Basic client-side validation for immediate feedback 3084 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 3085 const basicValidation = { 3086 is_valid: 3087 emailPattern.test(email) && 3088 !email.includes("@.") && 3089 email.includes("."), 3090 error: "Please enter a valid email address", 3091 }; 3092 3093 return basicValidation; 3094 } 3095 3096 // disable the enter key from kicking off any actions 3097 window.addEventListener( 3098 "keydown", 3099 function (e) { 3100 if ( 3101 e.keyIdentifier == "U+000A" || 3102 e.keyIdentifier == "Enter" || 3103 e.keyCode == 13 3104 ) { 3105 if (e.target.type == "email" || e.target.type == "text") { 3106 e.preventDefault(); 3107 3108 return false; 3109 } 3110 } 3111 }, 3112 true 3113 ); 3114 3115 emailField.addEventListener("keyup", tryToEnableSubmit); 3116 // Run validation once on load to handle prefilled emails 3117 tryToEnableSubmit(); 3118 3119 // Small workaround: when this form becomes visible, re-validate to (re)enable submit 3120 try { 3121 const observer = new MutationObserver(() => { 3122 if (!miniDemoForm) return; 3123 const isVisible = getComputedStyle(miniDemoForm).display !== 'none'; 3124 if (isVisible) { 3125 if (nameField && !nameField.value) nameField.value = emailField.value; 3126 tryToEnableSubmit(); 3127 } 3128 }); 3129 if (miniDemoForm) { 3130 observer.observe(miniDemoForm, { attributes: true, attributeFilter: ['style', 'class'] }); 3131 } 3132 } catch (_) {} 3133</script>
3133 3134<style> 3135 /* Simple skeleton-style cancel button (matches skeletonmode colors) */ 3136 .cancel-skeleton-button { 3137 font-family: poppins, sans-serif; 3138 font-size: 16px; 3139 line-height: 16px; 3140 font-weight: 600; 3141 color: var(--demo-accent-color); 3142 background: transparent; 3143 border: 1px solid var(--demo-accent-color); 3144 border-radius: 8px; 3145 height: 56px; 3146 padding: 0 24px; 3147 cursor: pointer; 3148 } 3149 .cancel-skeleton-button:hover { 3150 background: rgba(255, 255, 255, 0.06); 3151 } 3152</style> 3153<style> 3154 #the-demo-button, 3155 #the-demo-button * { 3156 box-sizing: border-box; 3157 } 3158 3159 .mini-demo-form-input-field { 3160 /* width: 55%; */ 3161 min-width: 300px; 3162 background-color: #f7f4f214; 3163 border: 1px solid var(--demo-accent-color); 3164 border-radius: 8px; 3165 padding: 5px; 3166 padding-left: 15px; 3167 height: 56px; 3168 font-size: 16px; 3169 color: var(--theme-off-white-text); 3170 } 3171 3172 input { 3173 width: unset; 3174 } 3175 3176 .submit-email-button-box { 3177 width: 48px; 3178 height: 48px; 3179 border-radius: 6px; 3180 z-index: 1; 3181 display: flex; 3182 justify-content: center; 3183 align-items: center; 3184 } 3185 #mini-demo-form { 3186 display: none; 3187 flex-direction: row; 3188 align-items: flex-start; 3189 justify-content: center; 3190 } 3191 .mini-demo-form-email-field-container { 3192 margin-right: 10px; 3193 } 3194 3195 #mini-demo-form-error-message { 3196 width: 100%; 3197 text-align: center; 3198 font-size: 0.8em; 3199 padding-top: 2px; 3200 padding-bottom: 2px; 3201 } 3202 3203 #mini-demo-form-error-container { 3204 margin-top: 5px; 3205 display: none; 3206 flex-direction: column; 3207 align-items: center; 3208 padding: 5px; 3209 } 3210 .desktop-only { 3211 display: block; 3212 } 3213 3214 .mobile-only { 3215 display: none; 3216 } 3217 3218 .signup-row { 3219 padding-top: 10px; 3220 display: flex; 3221 flex-direction: row; 3222 align-items: center; 3223 } 3224 3225 #contact-checkbox { 3226 width: auto; 3227 } 3228 3229 .email-field-row-container { 3230 display: flex; 3231 flex-direction: row; 3232 align-items: center; 3233 justify-content: center; 3234 } 3235 @media (max-width: 719px) { 3236 .signup-row { 3237 width: 100%; 3238 justify-content: center; 3239 } 3240 3241 #mini-demo-form-error-container { 3242 width: 100%; 3243 } 3244 } 3245 3246 @media screen and (max-width: 768px) { 3247 .desktop-only { 3248 display: none; 3249 } 3250 3251 .mobile-only { 3252 display: block; 3253 } 3254 3255 .mini-demo-form-email-field-container { 3256 width: 90%; 3257 } 3258 3259 .mini-demo-form-input-field { 3260 width: 100%; 3261 } 3262 3263 .email-field-row-container { 3264 flex-wrap: wrap; 3265 gap: 24px; 3266 } 3267 } 3268</style> 3269 3270 <!-- <a id="fuel-btn" class="new-button-container btn-secondary"> 3271 <p class="text-poppins text-button">Try FUEL for Free</p> 3272 <div class="new-button-arrow-box"> 3273 <svg 3274 width="14" 3275 height="12"
3276 viewBox="0 0 14 12" 3277 fill="none" 3278 xmlns="http://www.w3.org/2000/svg" 3279 > 3280 <path 3281 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 3282 fill="#F7F4F2" 3283 /> 3284 </svg> 3285 </div> 3286 </a> --> 3287 </div> 3288 </div> 3289 </div> 3290 <div class="content-block community-cta-section"> 3291 <div class="community-cta-section__container"> 3292 <div class="community-cta-section__text-wrapper"> 3293 <h3 class="community-cta-section__title">Want to be part of our community?</h3> 3294 <h6 class="community-cta-section__subtitle"> 3295 Get mixing tips and tutorials delivered straight to your inbox 3296 </h6> 3297 </div> 3298 <div 3299 style=" 3300 display: flex; 3301 flex-direction: column; 3302 align-items: center; 3303 gap: 12px; 3304 " 3305 > 3306 3307<div 3308 id="mailing-list-signup-form-container" 3309 class="mailing-list-form-obj" 3310 data-mailing-list-signup="true" 3311> 3312 <form 3313 data-clarity-mask="true" 3314 id="mailing-list-signup-form" 3315 action="/contact/" 3316 method="post" 3317 style="border-radius: 10px; width: 100%" 3318 > 3319 <input type="hidden" name="csrfmiddlewaretoken" value="TD8HixAzdvY5iwJwpgLU48k1PyY92jeTAKLC4wSxjTIn9kqAjTG3aRChLPgILpUq"> 3320 <!-- create a form that takes email and a message --> 3321 <label 3322 for="mailing-list-signup-email" 3323 class="text-vinyl form-label" 3324 style="line-height: 1.3em; margin-bottom: 0px" 3325 > 3326 3327 </label> 3328 <!-- this is for the email field and submit button (ROW) --> 3329 <div class="mailing-list-form-row"> 3330 <!-- this is to encapsulate the email field --> 3331 <div class="mailing-list-form-email-field-container"> 3332 3333 <input 3334 type="email" 3335 id="mailing-list-signup-email" 3336 name="email" 3337 class="text-poppins mailing-list-form-input-field" 3338 placeholder="your email goes here" 3339 /> 3340 3341 </div> 3342 <div id="mailing-list-submit-button-wrapper" class="disabled"> 3343 <!-- prettier-ignore --> 3344<a 3345 id="mailing-list-submit-button-inner" 3346 href="#" 3347 class="new-button-container btn-rto submit-button-disabled" 3348 style="--accent-color: var(--pink-color); " 3349 3350 3351 3352 3353> 3354 <p 3355 class="text-poppins text-button" 3356 style="" 3357 > 3358 Submit 3359 </p> 3360 <div class="new-button-arrow-box"> 3361 <svg 3362 width="14" 3363 height="12" 3364 viewBox="0 0 14 12" 3365 fill="none" 3366 xmlns="http://www.w3.org/2000/svg" 3367 > 3368 <path 3369 d="M13.0306 6.53061L8.53063 11.0306C8.38973 11.1715 8.19863 11.2507 7.99938 11.2507C7.80012 11.2507 7.60902 11.1715 7.46813 11.0306C7.32723 10.8897 7.24807 10.6986 7.24807 10.4994C7.24807 10.3001 7.32723 10.109 7.46813 9.96811L10.6875 6.74999H1.5C1.30109 6.74999 1.11032 6.67097 0.96967 6.53032C0.829018 6.38967 0.75 6.1989 0.75 5.99999C0.75 5.80108 0.829018 5.61031 0.96967 5.46966C1.11032 5.329 1.30109 5.24999 1.5 5.24999H10.6875L7.46937 2.02999C7.32848 1.88909 7.24932 1.69799 7.24932 1.49874C7.24932 1.29948 7.32848 1.10838 7.46937 0.967487C7.61027 0.826591 7.80137 0.747437 8.00062 0.747437C8.19988 0.747437 8.39098 0.826591 8.53187 0.967487L13.0319 5.46749C13.1018 5.53726 13.1573 5.62016 13.1951 5.71142C13.2329 5.80269 13.2523 5.90052 13.2522 5.99931C13.252 6.09809 13.2324 6.19588 13.1944 6.28706C13.1564 6.37824 13.1007 6.46101 13.0306 6.53061Z" 3370 fill="#F7F4F2" 3371 /> 3372 </svg> 3373 </div> 3374</a> 3375<style> 3376 /* Button Styles */ 3377 .new-button-container { 3378 position: relative; 3379 overflow: hidden; 3380 cursor: pointer; 3381 height: 56px; 3382 display: flex; 3383 flex-direction: row; 3384 align-items: center; 3385 justify-content: center; 3386 background-color: var(--accent-color); 3387 border-radius: 8px; 3388 padding: 4px 72px 4px 24px; /* Right padding = 4px (initial) + 48px (arrow) + 20px (gap) */ 3389 gap: 20px; 3390 text-decoration: none; 3391 } 3392 .new-button-container > p { 3393 position: relative; 3394 z-index: 2; 3395 transition: all 0.4s ease-in-out; 3396 } 3397 .new-button-arrow-box { 3398 position: absolute; 3399 top: 4px; 3400 right: 4px; 3401 width: 48px; 3402 height: 48px; 3403 border-radius: 6px; 3404 background-color: rgba(10, 10, 10, 0.4); 3405 transition: all 0.2s ease-in-out; 3406 z-index: 1; 3407 display: flex; 3408 flex-direction: row-reverse; 3409 justify-content: flex-start;
3410 align-items: center; 3411 padding-right: 17px; 3412 } 3413 .new-button-container:hover .new-button-arrow-box { 3414 width: calc(100% - 8px); 3415 height: calc(100% - 8px); 3416 border-radius: 6px; 3417 } 3418 3419 /* Rent to Own Button Styles */ 3420 .btn-rto { 3421 background-color: transparent; 3422 box-shadow: inset 0 0 0 1px var(--accent-color); 3423 } 3424 3425 .btn-rto > p { 3426 color: var(--accent-color); 3427 } 3428 3429 .btn-rto .new-button-arrow-box { 3430 background-color: transparent; 3431 box-shadow: inset 0 0 0 1px var(--accent-color); 3432 } 3433 3434 .btn-rto:hover .new-button-arrow-box { 3435 background-color: transparent; 3436 } 3437 3438 .btn-rto svg path { 3439 fill: var(--accent-color); 3440 } 3441</style> 3442 3443 </div> 3444 </div> 3445 <div id="mailing-list-signup-form-error-container"> 3446 <p id="mailing-list-signup-form-error-message" class="text-poppins"></p> 3447 <span 3448 class="text-poppins" 3449 style="width: 100%; text-align: center; font-size: 0.8em" 3450 > 3451 For assistance, please contact us 3452 <a href="/support/#contact">here</a>. 3453 </span> 3454 </div> 3455 <input type="hidden" name="name" id="mailing-list-hidden-name" /> 3456 <input 3457 type="hidden" 3458 name="campaign" 3459 id="mailing-list-campaign" 3460 value="1" 3461 /> 3462 <input 3463 type="hidden" 3464 name="platform" 3465 id="mailing-list-platform" 3466 value="DI" 3467 /> 3468 </form> 3469 3470 <div 3471 id="mailing-list-signup-form-confirm" 3472 class="mailing-list-form-obj" 3473 style="display: none" 3474 > 3475 <p class="text-poppins" style="text-align: center"> 3476 Thank you for signing up, 3477 <span style="font-weight: 600" id="mailing-list-confirmation-email"></span> 3478 </p> 3479 </div> 3480</div>
3481<script type="module"> 3482 import { 3483 postJSONFetch, 3484 getCookie, 3485 } from "https://static.musikhack.com/static/website/js/helper.c9a370a45d40.js"; 3486 function validateEmail(email) { 3487 // Basic client-side validation for immediate feedback 3488 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 3489 const basicValidation = { 3490 is_valid: 3491 emailPattern.test(email) && 3492 !email.includes("@.") && 3493 email.includes("."), 3494 error: "Please enter a valid email address", 3495 }; 3496 3497 return basicValidation; 3498 } 3499 3500 function initMailingListForm(mailingListFormContainer) { 3501 if (!mailingListFormContainer || mailingListFormContainer.dataset.initialized === "true") { 3502 return; 3503 } 3504 3505 mailingListFormContainer.dataset.initialized = "true"; 3506 3507 const submitButtonInner = mailingListFormContainer.querySelector( 3508 "#mailing-list-submit-button-inner" 3509 ); 3510 const submitButtonWrapper = mailingListFormContainer.querySelector( 3511 "#mailing-list-submit-button-wrapper" 3512 ); 3513 const mailingListForm = mailingListFormContainer.querySelector( 3514 "#mailing-list-signup-form" 3515 ); 3516 const nameField = mailingListFormContainer.querySelector("#mailing-list-hidden-name"); 3517 const emailField = mailingListFormContainer.querySelector( 3518 "#mailing-list-signup-email" 3519 ); 3520 const errorContainer = mailingListFormContainer.querySelector( 3521 "#mailing-list-signup-form-error-container" 3522 ); 3523 const errorMessage = mailingListFormContainer.querySelector( 3524 "#mailing-list-signup-form-error-message" 3525 ); 3526 const confirmContainer = mailingListFormContainer.querySelector( 3527 "#mailing-list-signup-form-confirm" 3528 ); 3529 const confirmationEmail = mailingListFormContainer.querySelector( 3530 "#mailing-list-confirmation-email" 3531 ); 3532 3533 emailField.onblur = function () { 3534 nameField.value = emailField.value; 3535 }; 3536 3537 function handleSubmit(e) { 3538 e.preventDefault(); 3539 3540 if (submitButtonWrapper.classList.contains("disabled")) { 3541 return false; 3542 } 3543 3544 submitButtonInner.classList.add("submit-button-disabled"); 3545 submitButtonInner.classList.remove("submit-button-enabled"); 3546 submitButtonWrapper.classList.add("disabled"); 3547 3548 let csrfToken = getCookie("csrftoken"); 3549 3550 let body = { 3551 email: emailField.value.trim(), 3552 name: nameField.value.trim(), 3553 campaign: mailingListFormContainer.querySelector("#mailing-list-campaign").value, 3554 platform: mailingListFormContainer.querySelector("#mailing-list-platform").value, 3555 }; 3556 3557 let formAction = "/mailinglist/confirm/"; 3558 3559 postJSONFetch(formAction, body, null, csrfToken).then((resp) => { 3560 if (resp._status == 200) { 3561 confirmContainer.style.display = "block"; 3562 mailingListForm.style.display = "none"; 3563 confirmationEmail.innerText = resp.email; 3564 3565 if (window.mhTracking) { 3566 window.mhTracking.trackSignup(resp.meta_event_id); 3567 } 3568 } else if (resp.error_message != undefined) { 3569 emailField.placeholder = resp.autopopulated_email; 3570 emailField.value = resp.autopopulated_email; 3571 errorContainer.style.display = "flex"; 3572 errorMessage.innerText = resp.error_message; 3573 enableSubmitButton(validateEmail(emailField.value.trim()).is_valid); 3574 } else if (resp._status >= 400) { 3575 errorContainer.style.display = "flex"; 3576 errorMessage.innerText = "An error occurred. Please try again."; 3577 enableSubmitButton(validateEmail(emailField.value.trim()).is_valid); 3578 } 3579 }); 3580 return false; 3581 } 3582 3583 function tryToEnableSubmit() { 3584 let email = emailField.value.trim(); 3585 let validationResult = validateEmail(email); 3586 let isValid = validationResult.is_valid; 3587 enableSubmitButton(isValid); 3588 } 3589 3590 function enableSubmitButton(isValid) { 3591 if (isValid) { 3592 submitButtonInner.classList.add("submit-button-enabled"); 3593 submitButtonInner.classList.remove("submit-button-disabled"); 3594 submitButtonWrapper.classList.remove("disabled"); 3595 submitButtonInner.setAttribute("aria-disabled", "false"); 3596 } else { 3597 submitButtonInner.classList.add("submit-button-disabled"); 3598 submitButtonInner.classList.remove("submit-button-enabled"); 3599 submitButtonWrapper.classList.add("disabled"); 3600 submitButtonInner.setAttribute("aria-disabled", "true"); 3601 } 3602 } 3603 3604 emailField.addEventListener("keyup", tryToEnableSubmit); 3605 submitButtonInner.addEventListener("click", handleSubmit); 3606 enableSubmitButton(validateEmail(emailField.value.trim()).is_valid); 3607 } 3608 3609 // disable the enter key from kicking off any actions 3610 if (!window.__mailingListEnterKeyGuardInstalled) { 3611 window.__mailingListEnterKeyGuardInstalled = true; 3612 window.addEventListener( 3613 "keydown", 3614 function (e) { 3615 if ( 3616 e.keyIdentifier == "U+000A" || 3617 e.keyIdentifier == "Enter" || 3618 e.keyCode == 13 3619 ) { 3620 if (e.target.type == "email" || e.target.type == "text") { 3621 e.preventDefault(); 3622 3623 return false;
3624 } 3625 } 3626 }, 3627 true 3628 ); 3629 } 3630 3631 document 3632 .querySelectorAll('[data-mailing-list-signup="true"]') 3633 .forEach(initMailingListForm); 3634</script>
3634 3635<style> 3636 * { 3637 box-sizing: border-box; 3638 } 3639 3640 :root { 3641 --pink-color: #d66790; 3642 } 3643 3644 .mailing-list-form-obj { 3645 width: 100%; 3646 display: flex; 3647 } 3648 3649 #mailing-list-submit-button-wrapper { 3650 opacity: 1; 3651 } 3652 3653 #mailing-list-submit-button-wrapper.disabled { 3654 opacity: 0.5; 3655 cursor: not-allowed; 3656 } 3657 3658 .mailing-list-form-input-field { 3659 width: 500px; 3660 background-color: #f7f4f214; 3661 border: 1px solid transparent; 3662 border-radius: 8px; 3663 padding: 5px; 3664 padding-left: 15px; 3665 height: 56px; 3666 font-size: 16px; 3667 color: var(--theme-off-white-text); 3668 } 3669 3670 #mailing-list-signup-form-container { 3671 flex-direction: row; 3672 align-items: flex-start; 3673 justify-content: center; 3674 } 3675 3676 #mailing-list-signup-form-error-message { 3677 width: 100%; 3678 text-align: center; 3679 font-size: 0.8em; 3680 padding-top: 2px; 3681 padding-bottom: 2px; 3682 } 3683 3684 #mailing-list-signup-form-error-container { 3685 margin-top: 5px; 3686 display: none; 3687 flex-direction: column; 3688 align-items: center; 3689 padding: 5px; 3690 opacity: 0.8; 3691 } 3692 3693 .mailing-list-form-row { 3694 display: flex; 3695 flex-direction: row; 3696 align-items: center; 3697 justify-content: center; 3698 gap: 10px; 3699 } 3700 3701 @media screen and (max-width: 1199px) { 3702 .mailing-list-form-row { 3703 flex-wrap: wrap; 3704 gap: 12px; 3705 } 3706 3707 .mailing-list-form-input-field { 3708 max-width: 500px; 3709 } 3710 } 3711 3712 @media screen and (max-width: 719px) { 3713 .mailing-list-form-email-field-container { 3714 width: 100%; 3715 display: flex; 3716 align-items: center; 3717 justify-content: center; 3718 } 3719 3720 .mailing-list-form-input-field { 3721 width: 100%; 3722 } 3723 } 3724</style> 3725 3726 <p 3727 class="text-poppins" 3728 style=" 3729 font-size: 16px; 3730 opacity: 0.8; 3731 text-align: center; 3732 line-height: 24px; 3733 " 3734 > 3735 No spam, unsubscribe anytime. We respect your inbox. 3736 </p> 3737 </div> 3738 </div> 3739 </div> 3740</div>
3741<script type="module"> 3742 import { prepareFSCheckout } from "https://static.musikhack.com/static/website/js/helper.c9a370a45d40.js"; 3743 3744 // fastspring checkout 3745 let rentToOwnButtonFUEL = document.getElementById("fuel-rto-buy-button") 3746 3747 let rentToOwnButtonMP = document.getElementById("mp-rto-buy-button") 3748 let rentToOwnButtonSweetEQ = document.getElementById("sweeteq-rto-buy-button") 3749 3750 // get referral context 3751 let campaignId = 1 == undefined ? "" : 1; 3752 let platform = 'DI' == '' ? '' : 'DI'; 3753 let userEmail = '' == '' ? '' : ''; 3754 3755 // change it to accepting an object rather than arguments 3756 // obj = {buttonElement, FSProductString, SKU, price, campaignId, platform, couponCode} 3757 let fuelRTOObj = { 3758 buttonElements: [rentToOwnButtonFUEL], 3759 FSProductString: "fuel-rent-to-own", 3760 SKU: "FUEL-01-R", 3761 productName: "FUEL", 3762 price: "5", 3763 campaignId: campaignId, 3764 platform: platform, 3765 email: userEmail, 3766 // couponCode: "BLACK50" 3767 } 3768 3769 let mpRTOObj = { 3770 buttonElements: [rentToOwnButtonMP], 3771 FSProductString: "master-plan-rent-to-own-12-mos", 3772 SKU: "MPLN-02-R", 3773 productName: "Master Plan", 3774 price: "10", 3775 campaignId: campaignId, 3776 platform: platform, 3777 email: userEmail, 3778 // couponCode: "BLACK50" 3779 3780 } 3781 3782 let sweetEQRTOObj = { 3783 buttonElements: [rentToOwnButtonSweetEQ], 3784 FSProductString: "sweeteq-rent-to-own", 3785 SKU: "SWEQ-01-R", 3786 productName: "SweetEQ", 3787 price: "6.50", 3788 campaignId: campaignId, 3789 platform: platform, 3790 email: userEmail, 3791 // couponCode: "BLACK50" 3792 } 3793 3794 prepareFSCheckout([ fuelRTOObj, mpRTOObj, sweetEQRTOObj ]); 3795 3796 3797 document.addEventListener("DOMContentLoaded", function () { 3798 // For the press logos 3799 const quoteText = document.getElementById("quote-text"); 3800 const logoContainers = document.querySelectorAll(".press-logo-container"); 3801 const logosWrapper = document.querySelector(".press-logos-wrapper"); 3802 const defaultQuote = 3803 "Loved by the most prestigious publications in the audio industry, including:"; 3804 3805 quoteText.textContent = `${defaultQuote}`; // Set the initial quote 3806 3807 logoContainers.forEach((container) => { 3808 // Hover: update quote text 3809 container.addEventListener("mouseover", function () { 3810 const newQuote = this.getAttribute("data-quote"); 3811 quoteText.textContent = `"${newQuote}"`; 3812 }); 3813 3814 // Click: open article link in a new tab if provided 3815 container.addEventListener("click", function () { 3816 const link = this.getAttribute("data-link"); 3817 if (link) { 3818 window.open(link, "_blank", "noopener"); 3819 } 3820 }); 3821 }); 3822 3823 logosWrapper.addEventListener("mouseleave", function () { 3824 quoteText.textContent = `${defaultQuote}`; 3825 }); 3826 3827 // For the testimonials 3828 const testimonialImageCard = document.getElementById( 3829 "testimonial-image-card" 3830 ); 3831 const testimonialQuoteCard = document.getElementById( 3832 "testimonial-quote-card" 3833 ); 3834 const testimonialImage = document.getElementById("testimonial-image"); 3835 const testimonialQuote = document.getElementById("testimonial-quote"); 3836 const testimonialAuthor = document.getElementById("testimonial-author"); 3837 const testimonialCredit = document.getElementById("testimonial-credit"); 3838 3839 const smallCardsContainer = document.querySelector( 3840 ".testimonials-grid__row--small" 3841 ); 3842 const smallCards = document.querySelectorAll( 3843 ".testimonial-card-wrapper--small" 3844 ); 3845 let clickedTestimonialCard = smallCards[1]; // Default to the second card 3846 3847 function hexToRgba(hex, alpha = 1) { 3848 if (!hex || hex.length < 7) return "rgba(10,10,10,0.24)"; // Fallback color 3849 const r = parseInt(hex.slice(1, 3), 16); 3850 const g = parseInt(hex.slice(3, 5), 16); 3851 const b = parseInt(hex.slice(5, 7), 16); 3852 return `rgba(${r}, ${g}, ${b}, ${alpha})`; 3853 } 3854 3855 function updateTestimonial(selectedCard) { 3856 smallCards.forEach((c) => c.classList.remove("selected")); 3857 testimonialImageCard.classList.remove("radius-bl-zero", "radiu
3857s-br-zero"); 3858 testimonialQuoteCard.classList.remove("radius-bl-zero", "radius-br-zero"); 3859 3860 if (selectedCard) { 3861 selectedCard.classList.add("selected"); 3862 const activeColor = selectedCard.dataset.color; 3863 3864 // Update content 3865 testimonialImage.src = selectedCard.dataset.image; 3866 testimonialQuote.textContent = `"${selectedCard.dataset.quote}"`; 3867 testimonialAuthor.textContent = selectedCard.dataset.author; 3868 testimonialCredit.textContent = selectedCard.dataset.credit; 3869 3870 // Update the CSS variable on the grid to change the main cards' border color 3871 const grid = document.querySelector(".testimonials-grid"); 3872 grid.style.setProperty("--active-color", activeColor); 3873 grid.style.setProperty( 3874 "--active-gradient-color", 3875 hexToRgba(activeColor, 0.24) 3876 ); 3877 3878 // Update border radius 3879 const cornerTarget = selectedCard.dataset.cornerTarget; 3880 if (cornerTarget === "image-bl") { 3881 testimonialImageCard.classList.add("radius-bl-zero"); 3882 } else if (cornerTarget === "image-br") { 3883 testimonialImageCard.classList.add("radius-br-zero"); 3884 } else if (cornerTarget === "quote-bl") { 3885 testimonialQuoteCard.classList.add("radius-bl-zero"); 3886 } else if (cornerTarget === "quote-br") { 3887 testimonialQuoteCard.classList.add("radius-br-zero"); 3888 } 3889 } 3890 } 3891 3892 smallCards.forEach((card) => { 3893 card.style.setProperty("--card-color", card.dataset.color); 3894 3895 card.addEventListener("click", function () { 3896 clickedTestimonialCard = this; 3897 updateTestimonial(this); 3898 // Stop auto-rotation once user intentionally interacts 3899 autoRotateActive = false; 3900 if (autoRotateTimer) { 3901 clearInterval(autoRotateTimer); 3902 autoRotateTimer = null; 3903 } 3904 }); 3905 3906 card.addEventListener("mouseover", function () { 3907 updateTestimonial(this); 3908 }); 3909 }); 3910 3911 smallCardsContainer.addEventListener("mouseleave", () => { 3912 updateTestimonial(clickedTestimonialCard); 3913 }); 3914 3915 // Set initial state on page load 3916 const grid = document.querySelector(".testimonials-grid"); 3917 const initialColor = clickedTestimonialCard.dataset.color; 3918 grid.style.setProperty("--active-color", initialColor); 3919 grid.style.setProperty( 3920 "--active-gradient-color", 3921 hexToRgba(initialColor, 0.24) 3922 ); 3923 updateTestimonial(clickedTestimonialCard); 3924 3925 // Desktop auto-rotation of testimonials (stops on user click) 3926 let autoRotateTimer = null; 3927 let autoRotateActive = true; 3928 let rotateIndex = Array.from(smallCards).indexOf(clickedTestimonialCard); 3929 3930 function shouldRotate() { 3931 return window.matchMedia('(min-width: 720px)').matches && autoRotateActive && smallCards.length > 0; 3932 } 3933 3934 function startAutoRotate() { 3935 if (autoRotateTimer) return; // already running 3936 if (!shouldRotate()) return; 3937 autoRotateTimer = setInterval(() => { 3938 if (!shouldRotate()) { 3939 clearInterval(autoRotateTimer); 3940 autoRotateTimer = null; 3941 return; 3942 } 3943 rotateIndex = (rotateIndex + 1) % smallCards.length; 3944 const nextCard = smallCards[rotateIndex]; 3945 clickedTestimonialCard = nextCard; 3946 updateTestimonial(nextCard); 3947 }, 6000); 3948 } 3949 3950 function stopAutoRotateIfRunning() { 3951 if (autoRotateTimer) { 3952 clearInterval(autoRotateTimer); 3953 autoRotateTimer = null; 3954 } 3955 } 3956 3957 // Kick off rotation on desktop only 3958 startAutoRotate(); 3959 // Handle viewport changes 3960 window.addEventListener('resize', () => { 3961 if (shouldRotate()) startAutoRotate(); else stopAutoRotateIfRunning(); 3962 }); 3963 }); 3964 3965 // Promo card selection 3966 const promoCardsContainer = document.getElementById("promo-cards-container"); 3967 const promoCards = document.querySelectorAll(".product-promo-card"); 3968 let clickedPromoCard = document.querySelector(".product-promo-card.selected"); 3969 3970 function updatePromoCards(selectedCard) { 3971 promoCards.forEach((c) => c.classList.remove("selected")); 3972 if (selectedCard) { 3973 selectedCard.classList.add("selected"); 3974 } 3975 } 3976 3977 promoCards.forEach((card) => { 3978 card.addEventListener("click", function () { 3979 clickedPromoCard = this; 3980 updatePromoCards(this); 3981 }); 3982 3983 card.addEventListener("mouseover", function () { 3984 updatePromoCards(this); 3985 }); 3986 }); 3987 3988 promoCardsContainer.addEventListener("mouseleave", () => { 3989 updatePromoCards(clickedPromoCard); 3990 }); 3991 3992 const ctaDemoButtons = document.querySelectorAll('.cta-demo-button'); 3993 const demoFormContainer = document.getElementById('mini-demo-form'); // change as needed 3994 const demoFormConfirm = document.getElementById('demo-form-confirm'); 3995 const demoForm = document.getElementById('contact'); 3996 const demoHeader = document.getElementById('demo-header'); 3997 3998 ctaDemoButtons.forEach(clickedBtn => { 3999 clickedBtn.addEventListener('click', function(e) { 4000 e.preventDefault(); 4001 4002 // Hide the clicked button 4003 clickedBtn.style.display = 'none';
4004 demoForm.style.display = 'flex'; 4005 4006 // Fade out the other button(s) 4007 ctaDemoButtons.forEach(otherBtn => { 4008 if (otherBtn !== clickedBtn) { 4009 otherBtn.classList.add('fade-out'); 4010 } 4011 }); 4012 4013 // Get the data attributes 4014 const productName = clickedBtn.getAttribute('data-product'); 4015 const color = clickedBtn.getAttribute('data-color'); 4016 4017 // Set them into your form as needed 4018 demoFormContainer.style.setProperty('--demo-accent-color', color); 4019 4020 const productInput = demoFormContainer.querySelector('input[name="product"]'); 4021 if (productInput) productInput.value = productName; 4022 4023 // Update form action if needed 4024 const form = demoFormContainer.querySelector('form'); 4025 if (form) form.action = `/products/${productName}/demo/confirm/`; 4026 4027 // Show the form 4028 demoFormContainer.style.display = 'block'; 4029 4030 // Update mobile-only demo header 4031 if (demoHeader) { 4032 const label = productName === 'masterplan' ? 'Master Plan' : productName === 'sweeteq' ? 'SweetEQ' : 'FUEL'; 4033 demoHeader.textContent = `Get ${label} Demo`; 4034 demoHeader.style.color = color; 4035 demoHeader.classList.add('active'); 4036 } 4037 }); 4038 }); 4039 4040 document.addEventListener('keydown', function(e) { 4041 if (e.key === "Escape") { 4042 // Hide form 4043 demoFormContainer.style.display = 'none'; 4044 demoFormConfirm.style.display = 'none' 4045 4046 // Show all demo buttons and remove animation class 4047 ctaDemoButtons.forEach(b => { 4048 b.style.display = 'flex'; 4049 b.classList.remove('fade-out'); 4050 // Remove inline styles that might have been added by the animation 4051 b.style.width = ''; 4052 b.style.padding = ''; 4053 b.style.margin = ''; 4054 b.style.overflow = ''; 4055 }); 4056 4057 // Hide mobile-only demo header 4058 if (demoHeader) { 4059 demoHeader.classList.remove('active'); 4060 demoHeader.textContent = ''; 4061 demoHeader.removeAttribute('style'); 4062 } 4063 } 4064 }); 4065</script>
4065 4066<style> 4067 * { 4068 box-sizing: border-box; 4069 } 4070 @keyframes fadeOut { 4071 from { 4072 opacity: 1; 4073 transform: scale(1); 4074 width: 250px; /* Approximate width of the button */ 4075 padding: 16px 32px; 4076 margin: 0 12px; 4077 height: 56px; 4078 } 4079 to { 4080 opacity: 0; 4081 transform: scale(0.95); 4082 width: 0; 4083 padding: 0; 4084 margin: 0; 4085 height: 0; 4086 overflow: hidden; 4087 visibility: hidden; 4088 } 4089 } 4090 4091 .fade-out { 4092 animation: fadeOut 0.3s ease-out forwards; 4093 } 4094 4095 /* General Setup */ 4096 #plugins-page { 4097 background-color: black; 4098 box-sizing: border-box; 4099 } 4100 #plugins-page * { 4101 box-sizing: border-box; 4102 } 4103 4104 /* Layout */ 4105 .content-block { 4106 max-width: 1440px; 4107 width: 100%; 4108 overflow: hidden; 4109 -webkit-mask: linear-gradient( 4110 90deg, 4111 #000000 50%, 4112 rgba(0, 0, 0, 0.8) 93.72%, 4113 rgba(0, 0, 0, 0) 100% 4114 ) 4115 add; 4116 mask: linear-gradient( 4117 90deg, 4118 #000000 50%, 4119 rgba(0, 0, 0, 0.8) 93.72%, 4120 rgba(0, 0, 0, 0) 100% 4121 ) 4122 add; 4123 } 4124 4125 .standard-block { 4126 padding: 96px 64px; 4127 } 4128 4129 .hero-block { 4130 padding: 48px 0px 64px 64px; 4131 } 4132 4133 .press-block { 4134 padding: 128px 64px; 4135 } 4136 4137 .press-block--desktop { 4138 display: flex; 4139 } 4140 4141 .press-block--mobile { 4142 display: none; 4143 } 4144 4145 .product-card-block { 4146 padding: 64px; 4147 } 4148 4149 .hero-container { 4150 display: flex; 4151 flex-direction: row; 4152 justify-content: space-between; 4153 align-items: center; 4154 width: 100%; 4155 } 4156 4157 .hero-content { 4158 display: flex; 4159 flex-direction: column; 4160 align-items: flex-start; 4161 justify-content: flex-start; 4162 width: 57%; 4163 gap: 20px; 4164 } 4165 .hero-testimonials { 4166 display: flex; 4167 flex-direction: row; 4168 align-items: center; 4169 justify-content: flex-start; 4170 width: 100%; 4171 gap: 20px; 4172 } 4173 4174 .testimonial-avatars { 4175 width: min-content; 4176 display: flex; 4177 flex-direction: row; 4178 align-items: center; 4179 justify-content: flex-start; 4180 } 4181 .avatar-image { 4182 width: 34px; 4183 height: 34px; 4184 border-radius: 50%; 4185 border: 1px solid #0a0909; 4186 } 4187 .avatar-image.overlapped { 4188 margin-left: -10px; 4189 } 4190 4191 /* Text Styles */ 4192 .text-poppins-light-21 { 4193 font-size: 21px; 4194 line-height: 21px; 4195 font-weight: 300; 4196 } 4197 4198 .text-poppins-normal-16 { 4199 font-size: 16px; 4200 line-height: 16px; 4201 font-weight: 400; 4202 } 4203 .text-headline { 4204 font-size: 128px; 4205 line-height: 115px; 4206 letter-spacing: -0.04em; 4207 } 4208 .text-button { 4209 font-size: 16px; 4210 line-height: 16px; 4211 font-weight: 600; 4212 text-wrap: nowrap; 4213 } 4214 4215 /* Hero Image */ 4216 .hero-image-wrapper { 4217 width: 40%; 4218 position: relative; 4219 } 4220 .hero-image-container { 4221 border-radius: 8px; 4222 flex: 1 0 0px; 4223 height: 532px; 4224 position: relative; 4225 width: 100%; 4226 } 4227 .hero-image-inner { 4228 position: absolute; 4229 border-radius: inherit; 4230 top: 0; 4231 right: 0; 4232 bottom: 0; 4233 left: 0; 4234 } 4235 .hero-image { 4236 display: block; 4237 width: 100%; 4238 height: 100%; 4239 border-radius: inherit; 4240 object-position: left center; 4241 object-fit: cover; 4242 } 4243 4244 /* CTA visibility defaults */ 4245 .hero-cta--mobile { 4246 display: none; 4247 } 4248 .hero-cta--desktop { 4249 display: inline-flex; 4250 } 4251 4252 /* Press Logos */ 4253 .press-logos-wrapper { 4254 display: flex; 4255 flex-direction: row; 4256 align-items: center; 4257 justify-content: space-around; 4258 width: 100%; 4259 } 4260 .press-logo-container { 4261 max-width: 150px; 4262 display: flex; 4263 align-items: center; 4264 justify-content: center; 4265 opacity: 0.5; 4266 transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out; 4267 cursor: pointer; 4268 } 4269 .press-logo-container:hover { 4270 transform: scale(1.1); 4271 opacity: 1; 4272 } 4273 4274 .press-logo-image { 4275 max-width: 100%; 4276 max-height: 70px; 4277 object-fit: contain; 4278 transition: transform 0.3s ease-in-out; 4279 transform: scale(1); 4280 } 4281 .press-logo-container.selected { 4282 opacity: 1; 4283 } 4284 .press-logo-container.selected .press-logo-image { 4285 transform: scale(1.1); 4286 } 4287 4288 /* Product Card */ 4289 .product-card { 4290 display: flex; 4291 flex-direction: row; 4292 align-items: center; 4293 justify-content: space-between; 4294 border-radius: 24px; 4295 overflow: hidden; 4296 height: 680px; 4297 padding: 48px 0 24px; 4298 } 4299 .product-card-fuel { 4300 border: 1px solid #e5884d; 4301 background: linear-gradient( 4302 68.45deg, 4303 rgba(10, 10, 10, 0.4) 18.91%, 4304 rgba(150, 37, 36, 0.4) 34.76%, 4305 rgba(10, 10, 10, 0.4) 55.46% 4306 ); 4307 } 4308 4309 .product-card-sweeteq { 4310 border: 1px solid #985294; 4311 background: linear-gradient( 4312 68.45deg, 4313 rgba(10, 10, 10, 0.4) 18.91%, 4314 rgba(152, 82, 148, 0.4) 34.76%, 4315 rgba(10, 10, 10, 0.4) 55.46% 4316 ); 4317 } 4318 4319 .product-card-hyfi { 4320 position: relative;
4321 align-items: stretch; 4322 justify-content: center; 4323 border: 1px solid rgb(var(--hyfi-accent-start-rgb) / 0.45); 4324 background: 4325 radial-gradient( 4326 120% 100% at 50% 50%, 4327 rgb(var(--hyfi-accent-end-rgb) / 0.14) 0%, 4328 transparent 56% 4329 ), 4330 linear-gradient( 4331 68.45deg, 4332 rgba(10, 10, 10, 0.58) 18.91%, 4333 rgb(var(--hyfi-accent-start-rgb) / 0.24) 34.76%, 4334 rgb(var(--hyfi-accent-end-rgb) / 0.18) 55.46%, 4335 rgba(10, 10, 10, 0.58) 82% 4336 ); 4337 padding: 0; 4338 isolation: isolate; 4339 } 4340 4341 .product-card-hyfi-link-overlay { 4342 position: absolute; 4343 inset: 0; 4344 z-index: 1; 4345 display: block; 4346 } 4347 4348 .product-card-content--hyfi { 4349 position: relative; 4350 z-index: 2; 4351 width: 100%; 4352 max-width: none; 4353 padding: 72px 40px; 4354 align-items: center; 4355 justify-content: center; 4356 pointer-events: none; 4357 } 4358 4359 .main-page-hyfi-card-copy { 4360 width: 100%; 4361 max-width: 1120px; 4362 min-height: 100%; 4363 display: flex; 4364 flex-direction: column; 4365 align-items: center; 4366 justify-content: center; 4367 gap: 40px; 4368 text-align: center; 4369 pointer-events: none; 4370 } 4371 4372 .main-page-hyfi-card-heading { 4373 display: flex; 4374 flex-direction: column; 4375 align-items: center; 4376 gap: 30px; 4377 } 4378 4379 .main-page-hyfi-card-title { 4380 width: 100%; 4381 max-width: 840px; 4382 text-align: center; 4383 } 4384 4385 .main-page-hyfi-card-subtitle { 4386 max-width: 760px; 4387 opacity: 0.8; 4388 text-align: center; 4389 } 4390 4391 .main-page-hyfi-card-button-group { 4392 position: relative; 4393 z-index: 3; 4394 display: flex; 4395 align-items: center; 4396 justify-content: center; 4397 pointer-events: auto; 4398 } 4399 4400 .main-page-hyfi-card-button-group * { 4401 pointer-events: auto; 4402 } 4403 4404 .main-page-hyfi-spectrogram-mount { 4405 position: absolute; 4406 left: 48px; 4407 right: 48px; 4408 top: 50%; 4409 height: 546px; 4410 transform: translateY(-50%); 4411 z-index: 0; 4412 overflow: visible; 4413 pointer-events: none; 4414 } 4415 4416 .main-page-hyfi-spectrogram-fallback { 4417 width: calc(100% + 160px); 4418 height: 100%; 4419 margin-left: -80px; 4420 background: 4421 linear-gradient( 4422 90deg, 4423 rgb(var(--hyfi-accent-start-rgb) / 0.18), 4424 rgb(var(--hyfi-accent-end-rgb) / 0.18) 4425 ), 4426 rgba(247, 244, 242, 0.03); 4427 } 4428 4429 @media (min-width: 720px) { 4430 .product-card-sweeteq { 4431 flex-direction: row-reverse; 4432 } 4433 4434 .product-card-sweeteq .product-card-content { 4435 width: 50%; 4436 padding-left: 40px; 4437 padding-right: 0; 4438 } 4439 4440 .product-card-sweeteq .product-card-image-column { 4441 width: 45%; 4442 } 4443 4444 .product-card-sweeteq .product-card-image-wrapper { 4445 width: 110%; 4446 } 4447 4448 .product-card-sweeteq .product-card-image-inner { 4449 left: 0; 4450 right: -80px; 4451 } 4452 4453 .product-card-sweeteq .product-card-image { 4454 object-position: left center; 4455 } 4456 } 4457 .product-card-image-column { 4458 width: 32%; 4459 height: 100%; 4460 } 4461 .product-card-image-wrapper { 4462 position: relative; 4463 height: 100%; 4464 width: 121%; 4465 } 4466 .product-card-image-inner { 4467 position: absolute; 4468 border-radius: inherit; 4469 top: 0; 4470 right: -51px; 4471 bottom: 0; 4472 left: -63px; 4473 } 4474 .product-card-image { 4475 display: block; 4476 width: 100%; 4477 height: 100%; 4478 border-radius: inherit; 4479 object-position: right center; 4480 object-fit: cover; 4481 } 4482 .opacity-64 { 4483 opacity: 0.64; 4484 } 4485 4486 .flex-col-gap-40 { 4487 display: flex; 4488 flex-direction: column; 4489 gap: 40px; 4490 } 4491 #quote-text { 4492 width: 100%; 4493 text-align: center; 4494 height: 60px; 4495 transition: all 0.3s ease-in-out; 4496 } 4497 .product-card-content { 4498 width: 57%; 4499 display: flex; 4500 flex-direction: column; 4501 align-items: flex-start; 4502 justify-content: center; 4503 gap: 30px; 4504 padding-right: 5%; 4505 } 4506 4507 .product-card-content.product-card-content--hyfi { 4508 width: 100%; 4509 padding-right: 40px; 4510 align-items: center; 4511 } 4512 4513 .product-card-headline { 4514 font-size: 90px; 4515 line-height: 84px; 4516 letter-spacing: -0.02em; 4517 } 4518 .features-list { 4519 display: flex; 4520 flex-direction: column; 4521 gap: 12px; 4522 opacity: 0.64; 4523 width: 100%; 4524 } 4525 .feature-item { 4526 display: flex; 4527 flex-direction: row; 4528 align-items: center; 4529 justify-content: flex-start; 4530 gap: 8px; 4531 width: 100%; 4532 height: min-content; 4533 } 4534 .feature-icon { 4535 height: 20px;
4536 width: 20px; 4537 display: flex; 4538 align-items: center; 4539 justify-content: center; 4540 } 4541 4542 /* Info Card */ 4543 .info-card { 4544 display: flex; 4545 flex-direction: column; 4546 gap: 20px; 4547 padding: 24px; 4548 border-radius: 16px; 4549 border: 1px solid rgba(255, 255, 255, 0.1); 4550 background: linear-gradient( 4551 180deg, 4552 rgba(255, 255, 255, 0.04) 0%, 4553 rgba(255, 255, 255, 0.01) 100% 4554 ); 4555 box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); 4556 } 4557 4558 .flex-col-gap-4 { 4559 display: flex; 4560 flex-direction: column; 4561 gap: 4px; 4562 } 4563 4564 .feature-icon-container { 4565 height: 20px; 4566 width: 20px; 4567 display: flex; 4568 align-items: center; 4569 justify-content: center; 4570 } 4571 4572 .btn-orange { 4573 background-color: rgb(229, 136, 77); 4574 } 4575 4576 /* Product Promo Cards */ 4577 .product-promo-cards { 4578 display: flex; 4579 flex-direction: row; 4580 gap: 24px; 4581 width: 100%; 4582 align-items: center; 4583 justify-content: center; 4584 } 4585 .product-promo-card { 4586 flex: 1 0 0px; 4587 height: 320px; 4588 position: relative; 4589 border-radius: 16px; 4590 display: flex; 4591 flex-direction: column; 4592 align-items: center; 4593 justify-content: center; 4594 padding: 40px; 4595 gap: 50px; 4596 filter: grayscale(100%); 4597 transition: filter 0.3s ease-in-out; 4598 cursor: pointer; 4599 } 4600 4601 .product-promo-card.selected { 4602 filter: grayscale(0%); 4603 } 4604 4605 .product-promo-card--pink { 4606 border: 1px solid rgb(214, 103, 144); 4607 box-shadow: rgba(214, 103, 144, 0.64) 0px 0px 8px 1px; 4608 background: linear-gradient( 4609 68.45deg, 4610 rgba(10, 10, 10, 0.24) 18.91%, 4611 rgba(214, 103, 144, 0.24) 42.69%, 4612 rgba(10, 10, 10, 0.24) 66.03% 4613 ); 4614 } 4615 4616 .product-promo-card--orange { 4617 border: 1px solid rgb(229, 136, 77); 4618 box-shadow: rgba(229, 136, 77, 0.64) 0px 0px 8px 1px; 4619 background: linear-gradient( 4620 237deg, 4621 rgba(10, 10, 10, 0.24) 23.8369%, 4622 rgba(150, 37, 36, 0.24) 52.7238%, 4623 rgba(10, 10, 10, 0.24) 77.7485% 4624 ); 4625 } 4626 4627 .product-promo-card--purple { 4628 border: 1px solid rgb(152, 82, 148); 4629 box-shadow: rgba(152, 82, 148, 0.64) 0px 0px 8px 1px; 4630 background: linear-gradient( 4631 68.45deg, 4632 rgba(10, 10, 10, 0.24) 18.91%, 4633 rgba(152, 82, 148, 0.24) 42.69%, 4634 rgba(10, 10, 10, 0.24) 66.03% 4635 ); 4636 } 4637 4638 .product-promo-card__content { 4639 display: flex; 4640 flex-direction: column; 4641 align-items: center; 4642 justify-content: flex-start; 4643 gap: 16px; 4644 } 4645 4646 /* Features Panel */ 4647 .features-panel { 4648 width: 100%; 4649 display: flex; 4650 flex-direction: row; 4651 justify-content: space-between; 4652 gap: 20px; 4653 flex-wrap: wrap; 4654 } 4655 4656 .feature-item-card { 4657 padding: 15px; 4658 display: flex; 4659 flex-direction: column; 4660 align-items: center; 4661 justify-content: center; 4662 gap: 12px; 4663 flex: 1 1 calc(25% - 20px); 4664 } 4665 4666 .feature-item-card__content { 4667 display: flex; 4668 flex-direction: column; 4669 gap: 8px; 4670 width: 100%; 4671 align-items: center; 4672 justify-content: center; 4673 } 4674 4675 .feature-item-card__icon-wrapper { 4676 height: 24px; 4677 width: 24px; 4678 } 4679 4680 .text-feature-card-paragraph { 4681 color: rgb(247, 244, 242); 4682 opacity: 0.64; 4683 line-height: 24px; 4684 text-align: center; 4685 text-wrap: balance; 4686 } 4687 4688 /* Testimonials Section */ 4689 .testimonials-section { 4690 display: flex; 4691 flex-direction: column; 4692 align-items: center; 4693 justify-content: flex-start; 4694 gap: 40px; 4695 } 4696 4697 .testimonials-section__header { 4698 display: flex; 4699 flex-direction: column; 4700 align-items: center; 4701 gap: 8px; 4702 } 4703 4704 .testimonials-section__title { 4705 width: 100%; 4706 text-align: center; 4707 } 4708 4709 .testimonials-section__subtitle { 4710 opacity: 0.8; 4711 text-align: center; 4712 line-height: 30px; 4713 } 4714 4715 .testimonials-grid { 4716 width: 100%; 4717 display: flex; 4718 flex-direction: column; 4719 align-items: flex-start; 4720 justify-content: flex-start; 4721 } 4722 4723 /* Mobile testimonials slider (hidden by default) */ 4724 .testimonials-mobile { 4725 display: none; 4726 width: 100%; 4727 } 4728 .mobile-testimonial-card { 4729 position: relative; 4730 border: 1px solid var(--border-color, var(--active-color)); 4731 border-radius: 16px; 4732 overflow: hidden; 4733 min-height: 320px; 4734 background: none; 4735 padding: 40px; 4736 display: flex; /* enable vertical centering */ 4737 align-items: center; /* vertically center content */ 4738 } 4739 .mobile-testimonial-card::before { 4740 content: ""; 4741 position: absolute; 4742 inset: 0; 4743 background-image: var(--bg); 4744 background-size: cover; 4745 background-position: 50% 30%; /* center horizontally, 20% from top vertically */ 4746 opacity: 0.16; 4747 } 4748 4749 .mobile-testimonial-card[style*="NealPogue.jpg"]::before { 4750 background-position: 50% 0%; /* was 50% 30%; move image up ~30% */ 4751 } 4752 .mobile-testimonial-card__content { 4753 position: relative; 4754 z-index: 1; 4755 display: flex; 4756 flex-direction: column; 4757 gap: 24px; 4758 align-items: flex-start; /* left align content */ 4759 text-align: left; 4760 } 4761 4762 .mobile-testimonial-card__quote-container { 4763 min-height: 120px; 4764 display: flex; 4765 flex-direction: column; 4766 align-items: flex-start; 4767 justify-content: center; 4768 } 4769 4770 .mobile-testimonial-card__quote { 4771 text-align: left; 4772 } 4773 .mobile-testimonial-card__author { 4774 text-align: left; 4775 } 4776 .mobile-testimonial-card__credit { 4777 opacity: 0.8; 4778 font-size: 16px; 4779 line-height: 24px; 4780 text-align: left; 4781 } 4782 4783 /* Place pagination dots below the slides for the mobile slider */ 4784 #mobile-testimonials-splide .splide__pagination { 4785 position: static; 4786 margin-top: 20px; 4787 transform: none; 4788 bottom: auto; 4789 left: auto; 4790 right: auto; 4791 display: flex; 4792 justify-content: center; 4793 gap: 8px; 4794 } 4795 4796 .testimonials-grid__row { 4797 display: flex; 4798 gap: 24px; 4799 width: 100%; 4800 } 4801 4802 .testimonials-grid__row--large { 4803 flex-direction: row; 4804 align-items: flex-start; 4805 justify-content: flex-start; 4806 height: 420px; 4807 } 4808 4809 .testimonial-card { 4810 display: flex; 4811 flex: 1 0 0px; 4812 gap: 10px; 4813 height: 100%; 4814 } 4815 4816 .testimonial-card--image-placeholder { 4817 display: flex; 4818 flex-direction: column; 4819 justify-content: flex-start; 4820 border-radius: 16px; 4821 overflow: hidden; 4822 border: 1px solid var(--active-color); 4823 transition: border-color 0.2s ease-in-out; 4824 } 4825 4826 .testimonial-card__image { 4827 width: 100%; 4828 height: 100%; 4829 object-fit: cover; /* This scales the image to cover the container, cropping if necessary */ 4830 } 4831 4832 .testimonial-card--quote { 4833 border-radius: 16px; 4834 background-color: rgba(152, 128, 104, 0.08); 4835 border: 1px solid var(--active-color); 4836 transition: border-color 0.2s ease-in-out; 4837 display: flex; /* Make it a flex container for the inner wrapper */ 4838 flex-direction: column; 4839 justify-content: stretch;
4839 /* Ensure inner wrapper fills height */ 4840 background: linear-gradient( 4841 38.2deg, 4842 rgba(10, 10, 10, 0.24) 20.41%, 4843 var(--active-gradient-color) 43.76%, 4844 rgba(10, 10, 10, 0.24) 66.13% 4845 ); 4846 } 4847 4848 .testimonial-card__inner-wrapper { 4849 padding: 64px; 4850 display: flex; 4851 flex-direction: column; 4852 justify-content: center; 4853 align-items: flex-start; 4854 flex: 1; 4855 gap: 10px; 4856 } 4857 4858 .testimonial-card__quote-content { 4859 display: flex; 4860 flex-direction: column; 4861 flex: 1 0 0px; 4862 align-items: center; 4863 justify-content: center; 4864 } 4865 4866 .testimonial-card__author { 4867 font-size: 28px; 4868 font-weight: 300; 4869 line-height: 36px; 4870 margin: 0; 4871 } 4872 4873 .testimonial-card-wrapper--small .testimonial-card__author, 4874 .testimonial-card-wrapper--small .text-feature-card-paragraph, 4875 .testimonial-card-wrapper--small .testimonial-card__credit { 4876 color: var(--card-color); 4877 transition: color 0.2s ease-in-out; 4878 } 4879 4880 .testimonial-card-wrapper--small { 4881 --card-color: #988068; /* Default color */ 4882 height: 144px; 4883 flex: 1 0 0px; 4884 display: flex; 4885 flex-direction: column; 4886 align-items: center; 4887 justify-content: flex-end; 4888 } 4889 4890 .testimonial-card--small { 4891 display: flex; 4892 flex-direction: column; 4893 align-items: center; 4894 justify-content: center; 4895 height: 120px; 4896 border-radius: 16px; 4897 width: 100%; 4898 border: 1px solid var(--card-color); 4899 transition: all 0.2s ease-in-out; 4900 background-color: transparent; 4901 } 4902 4903 .testimonial-card-wrapper--small.selected .testimonial-card--small { 4904 height: 100%; 4905 border-top-left-radius: 0; 4906 border-top-right-radius: 0; 4907 } 4908 4909 .testimonial-card-wrapper--small.selected .testimonial-card__author, 4910 .testimonial-card-wrapper--small.selected .testimonial-card__credit, 4911 .testimonial-card-wrapper--small.selected .text-feature-card-paragraph { 4912 color: #ffffff; 4913 } 4914 4915 .testimonial-card.radius-bl-zero { 4916 border-bottom-left-radius: 0; 4917 } 4918 .testimonial-card.radius-br-zero { 4919 border-bottom-right-radius: 0; 4920 } 4921 4922 /* CTA Section */ 4923 .cta-section { 4924 display: flex; 4925 flex-direction: column; 4926 align-items: center; 4927 } 4928 4929 .cta-section__container { 4930 align-content: center; 4931 align-items: center; 4932 display: flex; 4933 flex-direction: column; 4934 gap: 40px; 4935 height: 752px; 4936 justify-content: flex-start; 4937 padding-top: 20%; 4938 width: 100%; 4939 position: relative; 4940 overflow: hidden; /* To contain the absolutely positioned background */ 4941 } 4942 4943 .cta-section__text-wrapper { 4944 align-content: center; 4945 align-items: center; 4946 display: flex; 4947 flex-direction: column; 4948 gap: 8px; 4949 justify-content: center; 4950 width: 100%; 4951 z-index: 1; /* Ensure text is above background */ 4952 } 4953 4954 .cta-section__title { 4955 width: 100%; 4956 text-align: center; 4957 } 4958 4959 .cta-section__subtitle { 4960 opacity: 0.8; 4961 text-align: center; 4962 text-wrap: balance; 4963 max-width: 900px; 4964 } 4965 4966 .cta-section__background-images { 4967 filter: blur(4px); 4968 -webkit-filter: blur(4px); 4969 opacity: 0.16; 4970 transform: translate(-50%, -50%); 4971 align-content: flex-start; 4972 align-items: flex-start; 4973 display: flex; 4974 flex-direction: row; 4975 gap: 24px; 4976 justify-content: center; 4977 left: 50%; 4978 position: absolute; 4979 top: 50%; 4980 width: 100%; 4981 z-index: 0; /* Ensure background is behind content */ 4982 } 4983 4984 .cta-section__background-image-wrapper { 4985 border-radius: 8px; 4986 height: 455px; 4987 transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; 4988 filter: grayscale(0%) brightness(100%); 4989 opacity: 1; 4990 } 4991 4992 .cta-section__background-image { 4993 width: 100%; 4994 height: 100%; 4995 object-fit: cover; 4996 border-radius: 8px; 4997 } 4998 4999 .cta-section__buttons-container { 5000 align-items: flex-start; 5001 display: flex; 5002 flex-direction: row; 5003 gap: 32px; 5004 justify-content: center; 5005 z-index: 1; /* Ensure buttons are above background */ 5006 } 5007 5008 .community-cta-section { 5009 display: flex; 5010 flex-direction: column; 5011 align-items: center; 5012 padding: 80px 64px; 5013 } 5014 5015 .community-cta-section__container { 5016 align-content: center;
5017 align-items: center; 5018 display: flex; 5019 flex-direction: column; 5020 gap: 40px; 5021 justify-content: flex-start; 5022 width: 100%; 5023 max-width: 1200px; 5024 } 5025 5026 .community-cta-section__text-wrapper { 5027 align-content: center; 5028 align-items: center; 5029 display: flex; 5030 flex-direction: column; 5031 gap: 8px; 5032 justify-content: center; 5033 width: 100%; 5034 } 5035 5036 .community-cta-section__title { 5037 width: 100%; 5038 text-align: center; 5039 } 5040 5041 .community-cta-section__subtitle { 5042 opacity: 0.8; 5043 text-align: center; 5044 text-wrap: balance; 5045 max-width: 900px; 5046 } 5047 5048 .grayscale { 5049 filter: grayscale(100%) brightness(85%); 5050 opacity: 0.8; 5051 } 5052 5053 #fuel-img.grayscale { 5054 opacity: 1; 5055 } 5056 5057 .btn-inactive { 5058 filter: grayscale(1); 5059 opacity: 0.4; 5060 } 5061 5062 /* Mobile-only demo header above form */ 5063 .demo-header { 5064 display: none; 5065 font-family: poppins, sans-serif; 5066 font-size: 18px; 5067 line-height: 24px; 5068 font-weight: 600; 5069 margin-top: 12px; 5070 margin-bottom: 8px; 5071 } 5072 5073 @media (max-width: 1199px) { 5074 .hero-container { 5075 flex-direction: column; 5076 gap: 24px; 5077 align-items: stretch; 5078 } 5079 .hero-cta--desktop { 5080 display: none !important; 5081 } 5082 .hero-cta--mobile { 5083 display: inline-flex; 5084 align-self: center; 5085 } 5086 5087 .hero-block { 5088 padding: 32px 40px 40px; 5089 } 5090 5091 .hero-container { 5092 flex-direction: column; 5093 align-items: center; 5094 gap: 32px; 5095 } 5096 5097 .hero-content { 5098 align-items: center; 5099 width: 100%; 5100 } 5101 5102 .hero-content h1 { 5103 text-align: center; 5104 } 5105 5106 .hero-testimonials { 5107 align-items: center; 5108 width: auto; 5109 } 5110 5111 .hero-image-wrapper { 5112 width: 100%; 5113 } 5114 5115 .hero-image-container { 5116 width: auto; 5117 height: auto; 5118 aspect-ratio: 1.82857 / 1; 5119 } 5120 5121 .hero-image { 5122 height: auto; 5123 } 5124 5125 .press-block { 5126 padding: 80px 40px; 5127 } 5128 5129 .press-logos-container { 5130 max-width: 15%; 5131 } 5132 5133 .product-card-block { 5134 padding: 80px 40px; 5135 } 5136 5137 .product-card-content--hyfi { 5138 padding-left: 40px; 5139 padding-right: 40px; 5140 } 5141 5142 .main-page-hyfi-spectrogram-mount { 5143 left: 32px; 5144 right: 32px; 5145 height: 494px; 5146 } 5147 5148 .standard-block { 5149 padding: 80px 40px; 5150 } 5151 5152 .feature-item-card { 5153 flex: 1 1 calc(50% - 20px); 5154 } 5155 /* Swap to mobile testimonials slider */ 5156 .testimonials-grid { 5157 display: none; 5158 } 5159 .testimonials-mobile { 5160 display: block; 5161 } 5162 } 5163 5164 @media (max-width: 719px) { 5165 .centered-mobile { 5166 text-align: center; 5167 } 5168 .hero-block { 5169 padding: 24px 24px 32px; 5170 } 5171 .standard-block { 5172 padding: 64px 24px; 5173 } 5174 .demo-header.active { 5175 display: block; 5176 } 5177 .press-block { 5178 padding: 64px 24px; 5179 } 5180 .press-container { 5181 gap: 12px; 5182 } 5183 .press-block--desktop { 5184 display: none; 5185 } 5186 5187 .press-block--mobile { 5188 display: flex; 5189 } 5190 5191 .product-card-block { 5192 padding: 64px 24px; 5193 } 5194 5195 .product-card { 5196 flex-direction: column; 5197 height: auto; 5198 padding: 32px 24px 40px; 5199 gap: 24px; 5200 } 5201 5202 .product-card-hyfi { 5203 padding: 0; 5204 gap: 0; 5205 min-height: 760px; 5206 } 5207 5208 .product-card-image-column { 5209 width: 100%; 5210 aspect-ratio: 1; 5211 } 5212 5213 .product-card-image-wrapper { 5214 width: auto; 5215 } 5216 5217 .product-card-image-inner { 5218 top: 0; 5219 left: 0; 5220 bottom: 0; 5221 right: 0; 5222 } 5223 5224 .product-card-image { 5225 height: auto; 5226 } 5227 5228 .product-card-content { 5229 width: 100%; 5230 align-items: center; 5231 padding-right: 0; 5232 } 5233 5234 .product-card-content h2 { 5235 text-align: center; 5236 } 5237 5238 .product-card-content--hyfi { 5239 padding: 56px 24px; 5240 min-height: 760px; 5241 } 5242 5243 .main-page-hyfi-spectrogram-mount { 5244 left: 24px; 5245 right: 24px; 5246 height: 749px; 5247 } 5248 5249 .main-page-hyfi-card-copy { 5250 gap: 32px; 5251 } 5252 5253 .product-promo-cards { 5254 flex-direction: column; 5255 } 5256 5257 .product-promo-card { 5258 width: 100%; 5259 filter: grayscale(0%); 5260 } 5261 5262 .product-promo-card p { 5263 text-align: center; 5264 } 5265 5266 .feature-item-card { 5267 flex: 1 1 calc(100% - 20px); 5268 } 5269 5270 .cta-section { 5271 padding: 64px 24px; 5272 } 5273 5274 .community-cta-section { 5275 padding: 64px 24px; 5276 } 5277 5278 .cta-section__buttons-container { 5279 flex-direction: column; 5280 width: fit-content; 5281 } 5282 5283 .cta-demo-button { 5284 width: 100%; 5285 } 5286 5287 /* reset this back to default behavior */ 5288 .btn-inactive { 5289 filter: grayscale(0); 5290 opacity: 1; 5291 } 5292 5293 .cta-section__container { 5294 height: fit-content; 5295 } 5296 5297 .cta-section__background-images { 5298 flex-direction: column; 5299 align-items: center; 5300 height: 100%; 5301 justify-content: flex-start; 5302 } 5303 5304 .cta-section__background-image-wrapper { 5305 width: 100%; 5306 height: auto; 5307 } 5308 5309 .cta-section__buttons-container { 5310 align-items: center; 5311 gap: 20px; 5312 } 5313 5314 .cta-section__background-image-wrapper#master-plan-img { 5315 aspect-ratio: 1.82857 / 1; 5316 } 5317 5318 .cta-section__background-image-wrapper#fuel-img { 5319 width: 60%; 5320 } 5321 } 5322</style>
5323<script type="module"> 5324 const HYFI_HUE_ROTATION_DEGREES_PER_SECOND = 8; 5325 const HYFI_COLOR_UPDATE_FPS = 30; 5326 const HYFI_ACCENT_COLORS_EVENT = "mh-hyfi-accent-colors"; 5327 5328 const productPage = document.getElementById("product-page"); 5329 const hyfiProductCard = document.getElementById("product-card-hyfi"); 5330 5331 const clamp01 = (value) => Math.min(1, Math.max(0, value)); 5332 const normalizeHue = (hue) => ((hue % 360) + 360) % 360; 5333 5334 const linearToSrgb = (value) => { 5335 if (value <= 0.0031308) { 5336 return 12.92 * value; 5337 } 5338 return 1.055 * Math.pow(value, 1 / 2.4) - 0.055; 5339 }; 5340 5341 const srgbToLinear = (value) => { 5342 if (value <= 0.04045) { 5343 return value / 12.92; 5344 } 5345 return Math.pow((value + 0.055) / 1.055, 2.4); 5346 }; 5347 5348 const linearRgbToOklab = (r, g, b) => { 5349 const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b; 5350 const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b; 5351 const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b; 5352 const lRoot = Math.cbrt(l); 5353 const mRoot = Math.cbrt(m); 5354 const sRoot = Math.cbrt(s); 5355 return { 5356 L: 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot, 5357 a: 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot, 5358 b: 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot, 5359 }; 5360 }; 5361 5362 const oklabToLinearRgb = (L, a, b) => { 5363 const l = L + 0.3963377774 * a + 0.2158037573 * b; 5364 const m = L - 0.1055613458 * a - 0.0638541728 * b; 5365 const s = L - 0.0894841775 * a - 1.291485548 * b; 5366 const l3 = l * l * l; 5367 const m3 = m * m * m; 5368 const s3 = s * s * s; 5369 return { 5370 r: 4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3, 5371 g: -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3, 5372 b: -0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3, 5373 }; 5374 }; 5375 5376 const isLinearRgbInGamut = (rgb) => 5377 rgb.r >= 0 && 5378 rgb.r <= 1 && 5379 rgb.g >= 0 && 5380 rgb.g <= 1 && 5381 rgb.b >= 0 && 5382 rgb.b <= 1; 5383 5384 const parseHexColor = (value) => { 5385 const normalized = String(value || "").trim().replace("#", ""); 5386 if (!/^[0-9a-fA-F]{6}$/.test(normalized)) { 5387 return null; 5388 } 5389 return { 5390 r: Number.parseInt(normalized.slice(0, 2), 16), 5391 g: Number.parseInt(normalized.slice(2, 4), 16), 5392 b: Number.parseInt(normalized.slice(4, 6), 16), 5393 }; 5394 }; 5395 5396 const rgbToHex = ({ r, g, b }) => 5397 `#${[r, g, b] 5398 .map((channel) => 5399 Math.max(0, Math.min(255, Math.round(channel))) 5400 .toString(16) 5401 .padStart(2, "0") 5402 ) 5403 .join("")}`; 5404 5405 const rgbToOklch = ({ r, g, b }) => { 5406 const lab = linearRgbToOklab( 5407 srgbToLinear(r / 255), 5408 srgbToLinear(g / 255), 5409 srgbToLinear(b / 255) 5410 ); 5411 const chroma = Math.sqrt(lab.a * lab.a + lab.b * lab.b); 5412 return { 5413 lightness: lab.L, 5414 chroma, 5415 hue: normalizeHue((Math.atan2(lab.b, lab.a) * 180) / Math.PI), 5416 }; 5417 }; 5418 5419 const oklchToRgb = ({ lightness, chroma, hue }) => { 5420 const radians = (normalizeHue(hue) * Math.PI) / 180; 5421 let resolvedChroma = Math.max(0, chroma); 5422 let rgbLinear = oklabToLinearRgb( 5423 lightness, 5424 resolvedChroma * Math.cos(radians), 5425 resolvedChroma * Math.sin(radians) 5426 ); 5427 5428 if (!isLinearRgbInGamut(rgbLinear) && resolvedChroma > 0) { 5429 let low = 0; 5430 let high = resolvedChroma; 5431 for (let index = 0; index < 8; index += 1) { 5432 const mid = (low + high) * 0.5; 5433 const candidate = oklabToLinearRgb( 5434 lightness, 5435 mid * Math.cos(radians), 5436 mid * Math.sin(radians) 5437 ); 5438 if (isLinearRgbInGamut(candidate)) { 5439 low = mid; 5440 rgbLinear = candidate; 5441 } else { 5442 high = mid; 5443 } 5444 } 5445 } 5446 5447 return { 5448 r: Math.round(clamp01(linearToSrgb(rgbLinear.r)) * 255), 5449 g: Math.round(clamp01(linearToSrgb(rgbLinear.g)) * 255), 5450 b: Math.round(clamp01(linearToSrgb(rgbLinear.b)) * 255), 5451 }; 5452 }; 5453 5454 const publishHyfiAccentColors = (start, end) => { 5455 const colors = { start, end }; 5456 window.__mhHyfiAccentColors = colors; 5457 window.dispatchEvent( 5458 new CustomEvent(HYFI_ACCENT_COLORS_EVENT, { detail: colors }) 5459 ); 5460 }; 5461 5462 const applyHyfiAccentColors = (startRgb, endRgb) => { 5463 if (!productPage) { 5464 return; 5465 } 5466 const start = rgbToHex(startRgb); 5467 const end = rgbToHex(endRgb); 5468 productPage.style.setProperty("--hyfi-accent-start", start); 5469 productPage.style.setProperty("--hyfi-accent-end", end); 5470 productPage.style.setProperty( 5471 "--hyfi-accent-start-rgb", 5472 `${startRgb.r} ${startRgb.g} ${startRgb.b}` 5473 ); 5474 productPage.style.setProperty( 5475 "--hyfi-accent-end-rgb", 5476 `${endRgb.r} ${endRgb.g} ${endRgb.b}` 5477 ); 5478 publishHyfiAccentColors(start, end); 5479 }; 5480 5481 const startHyfiHueRotation = () => { 5482 if (!productPage || !hyfiProductCard) { 5483 return; 5484 } 5485 const styles = window.getComputedStyle(productPage); 5486 const initialStart = parseHexColor( 5487 styles.getPropertyValue("--hyfi-accent-start") 5488 ); 5489 const initialEnd = parseHexColor(styles.getPropertyValue("--hyfi-accent-end")); 5490 if (!initialStart || !initialEnd) { 5491 return; 5492 } 5493 5494 const startOklch = rgbToOklch(initialStart); 5495 const endOklch = rgbToOklch(initialEnd); 5496 const minFrameMs = 1000 / Math.max(1, HYFI_COLOR_UPDATE_FPS); 5497 const animationStartMs = performance.now(); 5498 let lastUpdateMs = -Infinity; 5499 5500 const renderColors = (timeMs) => { 5501 const elapsedSeconds = Math.max(0, timeMs - animationStartMs) / 1000; 5502 const hueOffset = elapsedSeconds * HYFI_HUE_ROTATION_DEGREES_PER_SECOND; 5503 const nextStart = oklchToRgb({ 5504 ...startOklch, 5505 hue: startOklch.hue + hueOffset, 5506 }); 5507 const nextEnd = oklchToRgb({ 5508 ...endOklch, 5509 hue: endOklch.hue + hueOffset, 5510 }); 5511 applyHyfiAccentColors(nextStart, nextEnd); 5512 }; 5513 5514 renderColors(animationStartMs); 5515 if (HYFI_HUE_ROTATION_DEGREES_PER_SECOND === 0) { 5516 return; 5517 } 5518 5519 const tick = (timeMs) => { 5520 if (timeMs - lastUpdateMs >= minFrameMs) { 5521 lastUpdateMs = timeMs; 5522 renderColors(timeMs); 5523 } 5524 window.requestAnimationFrame(tick); 5525 }; 5526 5527 window.requestAnimationFrame(tick); 5528 }; 5529 5530 startHyfiHueRotation(); 5531</script>
vendor: 1 bytes, line 5531
5531
5532<script> 5533 // Initialize mobile testimonials slider (Splide) if present 5534 document.addEventListener("DOMContentLoaded", function () { 5535 var el = document.getElementById("mobile-testimonials-splide"); 5536 if (el && typeof Splide !== "undefined") { 5537 var splide = new Splide(el, { 5538 type: "loop", 5539 autoplay: true, 5540 interval: 6000, 5541 pauseOnHover: false, 5542 pauseOnFocus: false, 5543 arrows: false, 5544 pagination: true, 5545 speed: 700, 5546 }); 5547 splide.mount(); 5548 } 5549 }); 5550</script>
5550 5551 5552 5553 <div id="pink-dividing-line"></div> 5554 5555 5556 5557 <!-- NEW FOOTER --> 5558 <div id="product-footer" class="product-footer"> 5559 <div class="footer-main-content"> 5560 <div class="slogan"> 5561 <div class="slogan-text-container"> 5562 <img 5563 src="https://static.musikhack.com/static/website/img/Musik Hack/Slogan.46557257914b.png" 5564 alt="Musik Hack - From the Sound Up" 5565 class="footer-logo-icon" 5566 /> 5567 </div> 5568 </div> 5569 <div class="footer-right"> 5570 <!-- Right Side - Navigation Columns --> 5571 <!-- Plugins Column --> 5572 <div class="footer-nav-column"> 5573 <div class="footer-nav-links footer-text-bold">Plugins</div> 5574 <div class="footer-nav-links"> 5575 <a 5576 href="/products/masterplan" 5577 class="footer-button footer-text-16" 5578 > 5579 Master Plan 5580 </a> 5581 </div> 5582 <div class="footer-nav-links"> 5583 <a href="/products/fuel" class="footer-button footer-text-16"> 5584 FUEL 5585 </a> 5586 </div> 5587 <div class="footer-nav-links"> 5588 <a 5589 href="/products/sweeteq" 5590 class="footer-button footer-text-16" 5591 > 5592 SweetEQ 5593 </a> 5594 </div> 5595 </div> 5596 5597 <!-- About Column --> 5598 <div class="footer-nav-column"> 5599 <a class="footer-nav-links footer-text-bold footer-section-heading" href="/products/hyfi">HyFi</a> 5600 <a class="footer-nav-links footer-text-bold footer-section-heading" href="/about">About</a> 5601 <div class="footer-nav-links"> 5602 <a 5603 href="/about" 5604 id="footer-team-button" 5605 class="footer-button footer-text-16" 5606 > 5607 Meet the Team 5608 </a> 5609 </div> 5610 <div class="footer-nav-links"> 5611 <a 5612 href="/blog" 5613 id="footer-blog-button" 5614 class="footer-button footer-text-16" 5615 > 5616 Blog 5617 </a> 5618 </div> 5619 </div> 5620 5621 <!-- Support Column --> 5622 <div class="footer-nav-column"> 5623 <a class="footer-nav-links footer-text-bold" href="/support">Support</a> 5624 <div class="footer-nav-links"> 5625 <a 5626 href="/support#faqs" 5627 id="footer-faq-button" 5628 class="footer-button footer-text-16" 5629 > 5630 FAQ 5631 </a> 5632 </div> 5633 <div class="footer-nav-links"> 5634 <a 5635 href="/support#contact" 5636 id="footer-contact-button" 5637 class="footer-button footer-text-16" 5638 > 5639 Contact Us 5640 </a> 5641 </div> 5642 <div class="footer-nav-links"> 5643 <a href="/redeem" class="footer-button footer-text-16"> 5644 Redeem 5645 </a> 5646 </div> 5647 </div> 5648 5649 </div> 5650 </div> 5651 5652 <!-- Copyright Row --> 5653 <div class="footer-copyright-container"> 5654 <div class="footer-copyright footer-text-16"> 5655 © 2026 Musik Hack LLC 5656 </div> 5657 <div class="footer-social-icons"> 5658 <a href="https://www.instagram.com/musikhack_/" target="_blank"> 5659 <svg 5660 xmlns="http://www.w3.org/2000/svg" 5661 width="24" 5662 height="24"
5663 viewBox="0 0 24 24" 5664 fill="none" 5665 > 5666 <path 5667 d="M12 7.5C11.11 7.5 10.24 7.76392 9.49993 8.25839C8.75991 8.75285 8.18314 9.45566 7.84254 10.2779C7.50195 11.1002 7.41283 12.005 7.58647 12.8779C7.7601 13.7508 8.18868 14.5526 8.81802 15.182C9.44736 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0243 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4067 15 10.8266 14.8241 10.3333 14.4944C9.83994 14.1648 9.45542 13.6962 9.22836 13.1481C9.0013 12.5999 8.94189 11.9967 9.05764 11.4147C9.1734 10.8328 9.45912 10.2982 9.87868 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.1481 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.8241 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15ZM16.5 2.25H7.5C6.10807 2.25149 4.77358 2.80509 3.78933 3.78933C2.80509 4.77358 2.25149 6.10807 2.25 7.5V16.5C2.25149 17.8919 2.80509 19.2264 3.78933 20.2107C4.77358 21.1949 6.10807 21.7485 7.5 21.75H16.5C17.8919 21.7485 19.2264 21.1949 20.2107 20.2107C21.1949 19.2264 21.7485 17.8919 21.75 16.5V7.5C21.7485 6.10807 21.1949 4.77358 20.2107 3.78933C19.2264 2.80509 17.8919 2.25149 16.5 2.25ZM20.25 16.5C20.25 17.4946 19.8549 18.4484 19.1516 19.1516C18.4484 19.8549 17.4946 20.25 16.5 20.25H7.5C6.50544 20.25 5.55161 19.8549 4.84835 19.1516C4.14509 18.4484 3.75 17.4946 3.75 16.5V7.5C3.75 6.50544 4.14509 5.55161 4.84835 4.84835C5.55161 4.14509 6.50544 3.75 7.5 3.75H16.5C17.4946 3.75 18.4484 4.14509 19.1516 4.84835C19.8549 5.55161 20.25 6.50544 20.25 7.5V16.5ZM18 7.125C18 7.3475 17.934 7.56501 17.8104 7.75002C17.6868 7.93502 17.5111 8.07922 17.3055 8.16436C17.1 8.24951 16.8738 8.27179 16.6555 8.22838C16.4373 8.18498 16.2368 8.07783 16.0795 7.9205C15.9222 7.76316 15.815 7.56271 15.7716 7.34448C15.7282 7.12625 15.7505 6.90005 15.8356 6.69448C15.9208 6.48891 16.065 6.31321 16.25 6.1896C16.435 6.06598 16.6525 6 16.875 6C17.1734 6 17.4595 6.11853 17.6705 6.3295C17.8815 6.54048 18 6.82663 18 7.125Z" 5668 fill="#F7F4F2" 5669 /> 5670 </svg> 5671 </a> 5672 <a 5673 href="https://www.youtube.com/channel/UCtHLYpF4j7bxBgeH6HzviDg" 5674 target="_blank" 5675 ><svg 5676 xmlns="http://www.w3.org/2000/svg" 5677 width="24" 5678 height="24"
5679 viewBox="0 0 24 24" 5680 fill="none" 5681 > 5682 <path 5683 d="M15.338 11.3567L10.7016 8.2658C10.5852 8.18814 10.4499 8.14354 10.3101 8.13677C10.1704 8.13 10.0314 8.16131 9.90801 8.22735C9.78465 8.29339 9.68153 8.3917 9.60967 8.51177C9.53781 8.63184 9.49991 8.76916 9.5 8.90909V15.0909C9.49991 15.2308 9.53781 15.3682 9.60967 15.4882C9.68153 15.6083 9.78465 15.7066 9.90801 15.7727C10.0314 15.8387 10.1704 15.87 10.3101 15.8632C10.4499 15.8565 10.5852 15.8119 10.7016 15.7342L15.338 12.6433C15.4439 12.5728 15.5309 12.4771 15.591 12.3649C15.6511 12.2527 15.6826 12.1273 15.6826 12C15.6826 11.8727 15.6511 11.7473 15.591 11.6351C15.5309 11.5229 15.4439 11.4272 15.338 11.3567ZM11.0455 13.6469V10.358L13.5162 12L11.0455 13.6469ZM22.0887 6.35137C21.9977 5.99528 21.8233 5.66594 21.5799 5.39051C21.3366 5.11508 21.0312 4.90146 20.6891 4.76728C17.378 3.48841 12.108 3.5 11.8182 3.5C11.5284 3.5 6.25841 3.48841 2.94727 4.76728C2.60511 4.90146 2.29976 5.11508 2.05641 5.39051C1.81306 5.66594 1.63868 5.99528 1.54767 6.35137C1.2975 7.31534 1 9.07716 1 12C1 14.9228 1.2975 16.6847 1.54767 17.6486C1.63855 18.0049 1.81286 18.3344 2.05622 18.61C2.29958 18.8856 2.605 19.0994 2.94727 19.2337C6.11932 20.4575 11.0841 20.5 11.7544 20.5H11.8819C12.5523 20.5 17.5199 20.4575 20.6891 19.2337C21.0314 19.0994 21.3368 18.8856 21.5801 18.61C21.8235 18.3344 21.9978 18.0049 22.0887 17.6486C22.3389 16.6827 22.6364 14.9228 22.6364 12C22.6364 9.07716 22.3389 7.31534 22.0887 6.35137ZM20.5925 17.2661C20.5631 17.3846 20.506 17.4945 20.4259 17.5867C20.3458 17.6788 20.245 17.7507 20.1318 17.7964C17.0747 18.9768 11.8752 18.9555 11.8249 18.9555H11.8182C11.766 18.9555 6.5704 18.9748 3.51136 17.7964C3.39813 17.7507 3.29734 17.6788 3.21725 17.5867C3.13716 17.4945 3.08006 17.3846 3.05062 17.2661C2.81591 16.3843 2.54545 14.7596 2.54545 12C2.54545 9.2404 2.81591 7.61574 3.04386 6.7387C3.07275 6.61948 3.12961 6.50886 3.20973 6.41598C3.28984 6.3231 3.39092 6.25062 3.5046 6.20455C6.45256 5.06574 11.3922 5.04546 11.7969 5.04546H11.823C11.8752 5.04546 17.0756 5.02807 20.1298 6.20455C20.2431 6.25025 20.3438 6.32213 20.4239 6.41431C20.504 6.50648 20.5611 6.61633 20.5906 6.73483C20.8204 7.61574 21.0909 9.2404 21.0909 12C21.0909 14.7596 20.8204 16.3843 20.5925 17.2613V17.2661Z" 5684 fill="#F7F4F2" 5685 /> 5686 </svg> 5687 </a> 5688 </div> 5689 </div> 5690 </div> 5691
5692 <div id="footer-cookies-spacer"></div> 5693 <div id="cookies-notice"> 5694 <p id="cookies-text" class="text-poppins"> 5695 By using our site, you agree to our 5696 <a class="text-bold" href="/terms/" target="_blank" 5697 >terms of service</a 5698 > 5699 and 5700 <a class="text-bold" href="/privacy/" target="_blank" 5701 >privacy policy</a 5702 >. 5703 <span id="cookie-preferences-error" role="status" hidden></span> 5704 </p> 5705 <div id="cookies-actions"> 5706 <p id="decline-cookies-button" class="poppins-button-text" role="button" tabindex="0">DECLINE</p> 5707 <p id="accept-cookies-button" class="poppins-button-text" role="button" tabindex="0">ACCEPT</p> 5708 </div> 5709 </div> 5710 5711 5712 </div> 5713 </body> 5714 5715 <!-- add one more attribute - "data-continuous='true' - to persist a cart e.g. customer can add to checkout --> 5716
5716<script 5717 id="fsc-api" 5718 src="https://sbl.onfastspring.com/sbl/1.0.1/fastspring-builder.min.js" 5719 type="text/javascript" 5720 data-storefront="musikhack.onfastspring.com/popup-musikhack" 5721 data-after-markup-callback="dataAfterMarkupCallback" 5722 data-popup-webhook-received="popupWebhookReceived" 5723 ></script>
5723 5724
5724<script> 5725 function popupWebhookReceived(data) { 5726 if (window.mhTracking) { 5727 window.mhTracking.trackFastspringPurchase(data); 5728 } 5729 5730 window.dispatchEvent( 5731 new CustomEvent("fastspring:popup-webhook-received", { detail: data }) 5732 ); 5733 } 5734 </script>
5734 5735 5736
5736<script type="module"> 5737 //HEADER 5738 let showPluginsDropdown = false; 5739 5740 let navDropdown = document.getElementById("nav-dropdown"); 5741 let pluginsNavButton = document.getElementById("plugins-nav-button"); 5742 let dropdownIcon = document.getElementById("dropdown-icon"); 5743 5744 if (pluginsNavButton) { 5745 pluginsNavButton.addEventListener("click", () => { 5746 showPluginsDropdown = !showPluginsDropdown; 5747 updateNav(); 5748 }); 5749 } 5750 5751 document.addEventListener("click", (e) => { 5752 if ( 5753 showPluginsDropdown && 5754 !pluginsNavButton.contains(e.target) && 5755 !navDropdown.contains(e.target) 5756 ) { 5757 showPluginsDropdown = false; 5758 updateNav(); 5759 } 5760 }); 5761 5762 function updateNav() { 5763 if (pluginsNavButton && navDropdown) { 5764 if (showPluginsDropdown) { 5765 //navDropdown.style.display = "flex"; 5766 navDropdown.classList.add("open"); 5767 pluginsNavButton.classList.add("active"); 5768 pluginsNavButton.classList.add("nav-text-16"); 5769 pluginsNavButton.classList.remove("button-text-16"); 5770 dropdownIcon.classList.add("rotated"); 5771 } else { 5772 //navDropdown.style.display = "none"; 5773 navDropdown.classList.remove("open"); 5774 pluginsNavButton.classList.remove("active"); 5775 pluginsNavButton.classList.add("nav-text-16"); 5776 pluginsNavButton.classList.remove("button-text-16"); 5777 dropdownIcon.classList.remove("rotated"); 5778 } 5779 } 5780 } 5781 5782 // FOOTER 5783 5784 let footerCopyright = document.getElementById("footer-copyright"); 5785 5786 // COOKIES 5787 5788 let cookiesNotice = document.getElementById("cookies-notice") 5789 ? document.getElementById("cookies-notice") 5790 : null; 5791 5792 let footerCookiesSpacer = document.getElementById("footer-cookie
5792s-spacer") 5793 ? document.getElementById("footer-cookies-spacer") 5794 : null; 5795 5796 let acceptCookiesButton = document.getElementById("accept-cookies-button") 5797 ? document.getElementById("accept-cookies-button") 5798 : null; 5799 5800 let declineCookiesButton = document.getElementById("decline-cookies-button") 5801 ? document.getElementById("decline-cookies-button") 5802 : null; 5803 5804 async function writeCookiesAcceptToSession() { 5805 const response = await fetch("/cookies/accept/", { cache: "no-store" }); 5806 if (!response.ok) { 5807 throw new Error("Could not save cookie preferences."); 5808 } 5809 await response.json(); 5810 } 5811 5812 async function writeCookiesDeclineToSession() { 5813 const response = await fetch("/cookies/decline/", { cache: "no-store" }); 5814 if (!response.ok) { 5815 throw new Error("Could not save cookie preferences."); 5816 } 5817 await response.json(); 5818 } 5819 5820 function updateClarityConsent(granted) { 5821 if (window.mhClarityConfig) { 5822 // Update the config even if the module has not finished loading yet. 5823 window.mhClarityConfig.trackingAllowed = granted; 5824 window.dispatchEvent(new Event("mh:clarity-consent")); 5825 } 5826 } 5827 5828 function hideCookiesNotice() { 5829 if (cookiesNotice) { 5830 cookiesNotice.style.display = "none"; 5831 } 5832 5833 if (footerCookiesSpacer) { 5834 footerCookiesSpacer.style.display = "none"; 5835 } 5836 } 5837 5838 const cookiePreferencesError = document.getElementById("cookie-preferences-error"); 5839 if (acceptCookiesButton && declineCookiesButton && cookiesNotice) { 5840 let savingCookiePreferences = false; 5841 const saveCookiePreferences = async (granted) => { 5842 if (savingCookiePreferences) return; 5843 savingCookiePreferences = true; 5844 acceptCookiesButton.setAttribute("aria-disabled", "true"); 5845 declineCookiesButton.setAttribute("aria-disabled", "true"); 5846 cookiePreferencesError.hidden = true; 5847 5848 if (!granted) { 5849 // Stop recording immediately, even if persisting the choice fails. 5850 updateClarityConsent(false); 5851 void window.mhTracking?.declineMarketingConsent(); 5852 } 5853 5854 try { 5855 if (granted) { 5856 await writeCookiesAcceptToSession(); 5857 updateClarityConsent(true); 5858 void window.mhTracking?.acceptMarketingConsent(); 5859 } else { 5860 await writeCookiesDeclineToSession(); 5861 } 5862 hideCookiesNotice(); 5863 } catch { 5864 cookiePreferencesError.textContent = " Your choice could not be saved. Please try again."; 5865 cookiePreferencesError.hidden = false; 5866 updateCookieSpacer(); 5867 } finally { 5868 savingCookiePreferences = false; 5869 acceptCookiesButton.setAttribute("aria-disabled", "false"); 5870 declineCookiesButton.setAttribute("aria-disabled", "false"); 5871 } 5872 }; 5873 acceptCookiesButton.addEventListener("click", () => saveCookiePreferences(true)); 5874 declineCookiesButton.addEventListener("click", () => saveCookiePreferences(false)); 5875 for (const [button, granted] of [[acceptCookiesButton, true], [declineCookiesButton, false]]) { 5876 button.addEventListener("keydown", (event) => { 5877 if (event.key === "Enter" || event.key === " ") { 5878 event.preventDefault(); 5879 saveCookiePreferences(granted); 5880 } 5881 }); 5882 } 5883 } 5884 5885 function updateCookieSpacer() { 5886 if (footerCookiesSpacer && cookiesNotice) { 5887 footerCookiesSpacer.style.height = `${cookiesNotice.offsetHeight}px`; 5888 } 5889 } 5890 5891 if (cookiesNotice) { 5892 window.addEventListener("resize", updateCookieSpacer); 5893 window.addEventListener("load", updateCookieSpacer, { once: true }); 5894 updateCookieSpacer(); 5895 } 5896 5897 updateNav(); 5898 </script>
5898 5899 <style> 5900 * { 5901 box-sizing: border-box; 5902 } 5903 a { 5904 text-decoration: none; 5905 } 5906 5907 .main-nav { 5908 display: flex; 5909 width: 100%; 5910 height: 156px; 5911 padding: 48px 64px; 5912 box-sizing: border-box; 5913 justify-content: space-between; 5914 align-items: center; 5915 align-self: stretch; 5916 } 5917 5918 5919 #product-header { 5920 width: 100%; 5921 position: relative; 5922 z-index: 1001; 5923 } 5924 5925 .header-sale-banner { 5926 min-height: 40px; 5927 width: 100%; 5928 background-color: var(--pink-color, #d66790); 5929 display: flex; 5930 flex-direction: row; 5931 align-items: center; 5932 justify-content: center; 5933 } 5934 5935 .dropdown { 5936 --dropdown-side-padding: 64px; 5937 --dropdown-gap: 16px; 5938 display: flex; 5939 position: absolute; 5940 top: 100%; 5941 left: 0; 5942 right: 0; 5943 width: 100%; 5944 height: 260px; 5945 padding: 0px var(--dropdown-side-padding); 5946 padding-bottom: 20px; 5947 align-items: center; 5948 gap: var(--dropdown-gap); 5949 flex-wrap: nowrap; 5950 box-sizing: border-box; 5951 visibility: hidden; 5952 opacity: 0; 5953 transition: height 0.3s ease, opacity 0.3s ease; 5954 z-index: 1000; 5955 background-color: black; 5956 } 5957 5958 .dropdown.open { 5959 opacity: 1; 5960 visibility: visible; 5961 z-index: 1001; 5962 } 5963 5964 .left { 5965 display: flex; 5966 width: fit-content; 5967 height: 100%; 5968 padding: 8px 0px 10px 0px; 5969 flex-direction: column; 5970 align-items: flex-start; 5971 gap: 10px; 5972 align-self: stretch; 5973 } 5974 5975 .header-right { 5976 display: flex; 5977 width: 100%; 5978 height: fit-content; 5979 justify-content: flex-end; 5980 align-items: center; 5981 gap: 16px; 5982 flex: 1 0 0; 5983 } 5984 5985 .header-browse { 5986 display: flex; 5987 width: fit-content; 5988 height: fit-content; 5989 justify-content: center; 5990 align-items: center; 5991 gap: 28px; 5992 } 5993 5994 .plugins { 5995 display: flex; 5996 width: fit-content; 5997 height: fit-content; 5998 align-items: center; 5999 gap: 4px; 6000 opacity: 0.64; 6001 transition: opacity 0.2s ease; 6002 background: none; 6003 border: none; 6004 cursor: pointer; 6005 } 6006 6007 .plugins.active { 6008 opacity: 1; 6009 } 6010 6011 .plugin-nav-text { 6012 width: fit-content; 6013 height: fit-content; 6014 } 6015 6016 .browse-item { 6017 background: none; 6018 border: none; 6019 cursor: pointer; 6020 padding: 0; 6021 opacity: 0.64; 6022 transition: opacity 0.2s ease; 6023 } 6024 6025 .browse-item:hover{ 6026 opacity: 1; 6027 } 6028 6029 .account-button { 6030 display: flex; 6031 width: fit-content; 6032 height: 56px; 6033 padding: 12px 16px 12px 20px; 6034 justify-content: center; 6035 align-items: center; 6036 gap: 8px; 6037 border: 1px solid #f7f4f2; 6038 border-radius: 8px; 6039 cursor: pointer; 6040 transition: background-color 0.2s ease, border-color 0.2s ease; 6041 background: none; 6042 box-sizing: border-box; 6043 } 6044 6045 .account-button:hover { 6046 6047 } 6048 6049 .account-icon { 6050 flex-shrink: 0; 6051 width: 20px; 6052 height: 20px; 6053 aspect-ratio: 1/1; 6054 } 6055 6056 .hyfi-launch-mobile-label { 6057 display: none; 6058 } 6059 6060 .dropdown-icon { 6061 display: block; 6062 padding-top: 0; 6063 flex-shrink: 0; 6064 width: 1em; 6065 height: auto; 6066 transform: rotate(180deg); 6067 transition: transform 0.2s ease; 6068 } 6069 6070 .dropdown-icon.rotated { 6071 transform: rotate(0deg); 6072 } 6073 6074 .master-plan-dropdown-item { 6075 display: flex; 6076 box-sizing: border-box; 6077 width: 100%; 6078 height: 100%; 6079 padding: 20px 24px; 6080 align-items: center; 6081 gap: 24px; 6082 flex: 1 0 0; 6083 align-self: stretch; 6084 border-radius: 8px; 6085 overflow: hidden; 6086 border: 1px solid var(--Accent-Pink, #d66790); 6087 background: linear-gradient( 6088 68deg, 6089 rgba(10, 10, 10, 0.24) 18.91%, 6090 rgba(214, 103, 144, 0.24) 42.69%, 6091 rgba(10, 10, 10, 0.24) 66.03% 6092 ), 6093 #0a0a0a; 6094 position: relative; 6095 transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out; 6096 } 6097 6098 .master-plan-dropdown-item, 6099 .fuel-dropdown-item, 6100 .sweeteq-dropdown-item, 6101 .hyfi-dropdown-item { 6102 container-type: inline-size; 6103 } 6104 6105 .master-plan-dropdown-item::before { 6106 content: ''; 6107 position: absolute; 6108 top: 0; 6109 left: 0; 6110 right: 0; 6111 bottom: 0; 6112 background: linear-gradient( 6113 90deg, 6114 rgba(214, 103, 144, 0.3) 0%, 6115 rgba(214, 103, 144, 0.15) 100% 6116 ); 6117 transform: translateX(-100%); 6118 transition: transform 0.25s ease-in-out; 6119 z-index: 0; 6120 } 6121 6122 .master-plan-dropdown-item:hover { 6123 background: linear-gradient( 6124 68deg, 6125 rgba(10, 10, 10, 0.6) 18.91%, 6126 rgba(214, 103, 144, 0.1) 42.69%, 6127 rgba(10, 10, 10, 0.6) 66.03% 6128 ), 6129 #0a0a0a; 6130 cursor: pointer; 6131 box-shadow: 0 0 20px rgba(214, 103, 144, 0.6), 0 0 40px rgba(214, 103, 144, 0.3); 6132 } 6133 6134 .fuel-dropdown-item { 6135 display: flex; 6136 box-sizing: border-box; 6137 padding: 20px 24px; 6138 width: 100%; 6139 height: 100%; 6140 align-items: center; 6141 gap: 24px; 6142 flex: 1 0 0; 6143 align-self: stretch; 6144 border-radius: 8px; 6145 overflow: hidden; 6146 border: 1px solid var(--FUEL-Peach, #e5884d); 6147 background: linear-gradient( 6148 68deg, 6149 rgba(10, 10, 10, 0.24) 18.91%, 6150 rgba(150, 37, 36, 0.24) 34.76%, 6151 rgba(10, 10, 10, 0.24) 55.46% 6152 ), 6153 #0a0a0a; 6154 position: relative; 6155 transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out; 6156 } 6157 6158 .fuel-dropdown-item:hover { 6159 background: linear-gradient( 6160 68deg, 6161 rgba(10, 10, 10, 0.6) 18.91%, 6162 rgba(150, 37, 36, 0.1) 34.76%, 6163 rgba(10, 10, 10, 0.6) 55.46% 6164 ), 6165 #0a0a0a; 6166 cursor: pointer; 6167 box-shadow: 0 0 20px rgba(229, 136, 77, 0.6), 0 0 40px rgba(229, 136, 77, 0.3); 6168 } 6169 6170 .fuel-dropdown-item:hover .dropdown-item-image-fuel { 6171 opacity: 0; 6172 transform: translateX(50px); 6173 } 6174 6175 .sweeteq-dropdown-item { 6176 display: flex; 6177 box-sizing: border-box; 6178 padding: 20px 24px; 6179 width: 100%; 6180 height: 100%; 6181 align-items: center; 6182 gap: 24px; 6183 flex: 1 0 0; 6184 align-self: stretch; 6185 border-radius: 8px; 6186 overflow: hidden; 6187 border: 1px solid var(--pink-color, #d66790); 6188 background: linear-gradient( 6189 68deg, 6190 rgba(10, 10, 10, 0.24) 18.91%, 6191 rgba(152, 82, 148, 0.24) 42.69%, 6192 rgba(10, 10, 10, 0.24) 66.03% 6193 ), 6194 #0a0a0a; 6195 position: relative; 6196 transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out; 6197 } 6198 6199 .sweeteq-dropdown-item:hover { 6200 background: linear-gradient( 6201 68deg, 6202 rgba(10, 10, 10, 0.6) 18.91%, 6203 rgba(152, 82, 148, 0.12) 42.69%, 6204 rgba(10, 10, 10, 0.6) 66.03% 6205 ), 6206 #0a0a0a; 6207 cursor: pointer; 6208 box-shadow: 0 0 20px rgba(152, 82, 148, 0.6), 6209 0 0 40px rgba(152, 82, 148, 0.3); 6210 } 6211 6212 .sweeteq-dropdown-item:hover .dropdown-item-image-sweeteq { 6213 opacity: 0; 6214 transform: translateX(50px); 6215 } 6216 6217 .hyfi-dropdown-item { 6218 display: flex; 6219 box-sizing: border-box; 6220 width: 100%; 6221 height: 100%; 6222 padding: 20px 24px; 6223 align-items: center; 6224 gap: 24px; 6225 flex: 1 0 0; 6226 align-self: stretch; 6227 border-radius: 8px; 6228 overflow: hidden; 6229 border: 1px solid #00b8f0; 6230 background: linear-gradient( 6231 68deg, 6232 rgba(10, 10, 10, 0.24) 18.91%, 6233 rgba(0, 184, 240, 0.24) 42.69%, 6234 rgba(10, 10, 10, 0.24) 66.03% 6235 ), 6236 #0a0a0a; 6237 position: relative; 6238 transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out; 6239 } 6240 6241 .hyfi-dropdown-item:hover { 6242 background: linear-gradient( 6243 68deg, 6244 rgba(10, 10, 10, 0.6) 18.91%, 6245 rgba(0, 184, 240, 0.12) 42.69%, 6246 rgba(10, 10, 10, 0.6) 66.03% 6247 ), 6248 #0a0a0a; 6249 cursor: pointer; 6250 box-shadow: 0 0 20px rgba(0, 184, 240, 0.45), 0 0 40px rgba(0, 184, 240, 0.18); 6251 } 6252 6253 .fuel-hires-logo { 6254 width: 110px; 6255 height: auto; 6256 aspect-ratio: 115/36; 6257 } 6258 6259 .dropdown-text-container-mp, 6260 .dropdown-text-container-fuel, 6261 .dropdown-text-container-sweeteq, 6262 .dropdown-text-container-hyfi { 6263 display: flex; 6264 width: 180px; 6265 min-width: 180px; 6266 height: 100%; 6267 flex-direction: column; 6268 justify-content: flex-start; 6269 align-items: stretch; 6270 gap: 14px; 6271 align-self: stretch; 6272 box-sizing: border-box; 6273 padding-top: 35px; 6274 transition: transform 0.25s ease-in-out; 6275 will-change: transform; 6276 } 6277 6278 .dropdown-item-logo-row { 6279 display: flex; 6280 width: 100%; 6281 height: 36px; 6282 flex: 0 0 36px; 6283 align-items: center; 6284 justify-content: center; 6285 } 6286 6287 .dropdown-item-copy-row { 6288 width: 100%; 6289 flex: 0 0 auto; 6290 text-align: center; 6291 } 6292 6293 .dropdown-item-text { 6294 display: block; 6295 text-align: center; 6296 align-self: stretch; 6297 } 6298 6299 .master-plan-dropdown-item:hover .dropdown-text-container-mp { 6300 transform: translateX(calc(50cqw - 90px)); 6301 } 6302 6303 .fuel-dropdown-item:hover .dropdown-text-container-fuel { 6304 transform: translateX(calc(50cqw - 90px)); 6305 } 6306 6307 .sweeteq-dropdown-item:hover .dropdown-text-container-sweeteq { 6308 transform: translateX(calc(50cqw - 90px)); 6309 } 6310 6311 .hyfi-dropdown-item:hover .dropdown-text-container-hyfi { 6312 transform: translateX(calc(50cqw - 90px)); 6313 } 6314 6315 .dropdown-item-image-master-plan, 6316 .dropdown-item-image-fuel, 6317 .dropdown-item-image-sweeteq, 6318 .hyfi-dropdown-image { 6319 height: 190px; 6320 width: auto; 6321 max-width: none; 6322 flex: 0 0 auto; 6323 align-self: center; 6324 } 6325 6326 .dropdown-item-image-master-plan { 6327 border-radius: 8px; 6328 box-shadow: 0px 0px 24px 2px rgba(247, 244, 242, 0.08); 6329 transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; 6330 will-change: transform, opacity; 6331 } 6332 6333 .master-plan-dropdown-item:hover .dropdown-item-image-master-plan { 6334 opacity: 0; 6335 transform: translateX(50px); 6336 } 6337 6338 .dropdown-item-image-fuel { 6339 border-radius: 4px; 6340 box-shadow: 0px 0px 24px 2px rgba(247, 244, 242, 0.08); 6341 transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; 6342 will-change: transform, opacity; 6343 } 6344 6345 .master-plan-logo-light { 6346 width: 170px; 6347 height: auto; 6348 aspect-ratio: 59/8; 6349 } 6350 6351 .fuel-logo { 6352 width: 115px; 6353 height: 36px; 6354 aspect-ratio: 115/36; 6355 } 6356 6357 .sweeteq-logo { 6358 width: 150px; 6359 height: auto; 6360 } 6361 6362 .hyfi-dropdown-logo { 6363 width: auto; 6364 height: 36px; 6365 } 6366 6367 .hyfi-dropdown-image { 6368 border-radius: 8px; 6369 box-shadow: 0px 0px 24px 2px rgba(247, 244, 242, 0.08); 6370 margin-right: -36px; 6371 transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; 6372 will-change: transform, opacity; 6373 } 6374 6375 .hyfi-dropdown-item:hover .hyfi-dropdown-image { 6376 opacity: 0; 6377 transform: translateX(50px); 6378 } 6379 6380 .dropdown-item-image-sweeteq { 6381 border-radius: 6px; 6382 box-shadow: 0px 0px 24px 2px rgba(247, 244, 242, 0.08); 6383 transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; 6384 will-change: transform, opacity; 6385 } 6386 6387 /* NEW FOOTER */ 6388 6389 .footer-main-content { 6390 display: flex; 6391 position: relative; 6392 width: 100%; 6393 max-width: 1312px; 6394 height: fit-content; 6395 box-sizing: border-box; 6396 padding: 0px; 6397 justify-content: space-between; 6398 align-items: flex-start; 6399 } 6400 6401 .slogan { 6402 display: flex; 6403 position: relative; 6404 width: 18%; 6405 min-width: 220px; 6406 height: fit-content; 6407 justify-content: space-between; 6408 align-items: stretch; 6409 align-self: stretch; 6410 } 6411 6412 6413 .slogan-text-container { 6414 width: 100%; 6415 } 6416 6417 .footer-logo-icon { 6418 width: 100%; 6419 max-width: 100%; 6420 height: auto; 6421 /* Preserve the previous slogan's dimensions and left alignment. */ 6422 aspect-ratio: 1644 / 448; 6423 object-fit: contain; 6424 object-position: left top; 6425 } 6426 6427 .footer-tagline-text { 6428 max-width: 356px; 6429 width: 100%; 6430 height: fit-content; 6431 flex-shrink: 0; 6432 } 6433 6434 .footer-right { 6435 display: flex; 6436 width: 100%; 6437 max-width: 644px; 6438 height: fit-content; 6439 flex-direction: row; 6440 align-items: flex-start; 6441 gap: 8px; 6442 align-self: stretch; 6443 justify-content: flex-start; 6444 box-sizing: border-box; 6445 } 6446 6447 .footer-browse { 6448 display: flex; 6449 width: 100%; 6450 height: fit-content; 6451 justify-content: center; 6452 align-items: center; 6453 gap: 24px; 6454 align-self: stretch; 6455 6456 } 6457 6458 .footer-button { 6459 background: none; 6460 border: none; 6461 cursor: pointer; 6462 width: fit-content; 6463 6464 } 6465 6466 .newsletter { 6467 display: flex; 6468 width: 100%; 6469 height: fit-content; 6470 justify-content: center; 6471 align-items: center; 6472 gap: 8px; 6473 align-self: stretch; 6474 } 6475 6476 .input { 6477 display: flex; 6478 width: 100%; 6479 height: 56px; 6480 padding: 10px; 6481 align-items: flex-start; 6482 gap: 10px; 6483 flex: 1 0 0; 6484 border-radius: 8px; 6485 border: 1px solid #f7f4f2; 6486 } 6487 6488 .subscribe { 6489 display: flex; 6490 height: 100%; 6491 padding: 4px 20px; 6492 justify-content: flex-end; 6493 align-items: center; 6494 gap: 20px; 6495 border-radius: 12px; 6496 border: 1px solid #d66790; 6497 cursor: pointer; 6498 background: none; 6499 } 6500 6501 .subscribe:hover { 6502 opacity: 0.8; 6503 } 6504 6505 .footer-nav-column { 6506 position: relative; 6507 display: flex; 6508 width: 100%; 6509 height: fit-content; 6510 flex-direction: column; 6511 align-items: flex-end; 6512 gap: 12px; 6513 flex: 1 0 0; 6514 border-radius: 8px; 6515 box-sizing: border-box; 6516 } 6517 6518 .footer-nav-links { 6519 positio
6519n: relative; 6520 width: fit-content; 6521 height: fit-content; 6522 text-align: right; 6523 text-wrap: nowrap; 6524 box-sizing: border-box; 6525 } 6526 6527 .footer-nav-link { 6528 background: none; 6529 border: none; 6530 cursor: pointer; 6531 padding: 0; 6532 text-align: left; 6533 opacity: 0.8; 6534 transition: opacity 0.2s ease; 6535 } 6536 6537 .footer-nav-link:hover { 6538 opacity: 1; 6539 } 6540 6541 .footer-copyright-container { 6542 position: relative; 6543 display: flex; 6544 width: 100%; 6545 max-width: 1312px; 6546 height: fit-content; 6547 box-sizing: border-box; 6548 justify-content: space-between; 6549 align-items: flex-start; 6550 } 6551 6552 .footer-copyright { 6553 position: relative; 6554 margin: 0; 6555 opacity: 0.64; 6556 width: fit-content; 6557 height: fit-content; 6558 } 6559 6560 .footer-social-icons { 6561 position: relative; 6562 display: flex; 6563 width: 60px; 6564 height: 24px; 6565 box-sizing: border-box; 6566 align-items: center; 6567 gap: 12px; 6568 opacity: 0.8; 6569 } 6570 6571 .instagram-logo { 6572 width: 24px; 6573 height: 24px; 6574 aspect-ratio: 1/1; 6575 } 6576 6577 .youtube-logo { 6578 width: 24px; 6579 height: 24px; 6580 aspect-ratio: 1/1; 6581 } 6582 6583 .header-mobile-label { 6584 display: none; 6585 } 6586 6587 .header-desktop-label { 6588 display: inline-block; 6589 padding-right: 16px; 6590 } 6591 6592 .desktop-only-show { 6593 display: inline-block; 6594 } 6595 6596 /* Responsive Design */ 6597 @media (max-width: 1199px) and (min-width: 720px) { 6598 6599 .desktop-only-show { 6600 display: none; 6601 } 6602 6603 #product-header { 6604 width: 100%; 6605 max-width: 1200px; 6606 height: fit-content; 6607 position: relative; 6608 } 6609 6610 .main-nav { 6611 height: 156px; 6612 padding: 40px; 6613 justify-content: space-between; 6614 } 6615 6616 .dropdown { 6617 padding: 0px 40px 24px 40px; 6618 gap: 16px; 6619 } 6620 6621 .master-plan-dropdown-item, 6622 .fuel-dropdown-item, 6623 .sweeteq-dropdown-item, 6624 .hyfi-dropdown-item { 6625 padding: 16px 12px; 6626 gap: 16px; 6627 } 6628 6629 /* Disable hover transitions for tablet */ 6630 .master-plan-dropdown-item:hover .dropdown-text-container-mp, 6631 .fuel-dropdown-item:hover .dropdown-text-container-fuel, 6632 .sweeteq-dropdown-item:hover .dropdown-text-container-sweeteq, 6633 .hyfi-dropdown-item:hover .dropdown-text-container-hyfi { 6634 transform: none; 6635 } 6636 6637 .master-plan-dropdown-item:hover .dropdown-item-image-master-plan, 6638 .fuel-dropdown-item:hover .dropdown-item-image-fuel, 6639 .sweeteq-dropdown-item:hover .dropdown-item-image-sweeteq, 6640 .hyfi-dropdown-item:hover .hyfi-dropdown-image { 6641 opacity: 1; 6642 transform: none; 6643 } 6644 6645 .dropdown-text-container-mp, 6646 .dropdown-text-container-fuel, 6647 .dropdown-text-container-sweeteq, 6648 .dropdown-text-container-hyfi { 6649 width: 132px; 6650 min-width: 132px; 6651 gap: 12px; 6652 padding-top: 48px; 6653 } 6654 6655 .dropdown-item-logo-row { 6656 height: 34px; 6657 flex-basis: 34px; 6658 } 6659 6660 .dropdown-item-text { 6661 font-size: 18px; 6662 } 6663 6664 6665 /* Adjust dropdown images */ 6666 .dropdown-item-image-master-plan { 6667 width: 300px; 6668 height: auto; 6669 } 6670 6671 .dropdown-item-image-fuel { 6672 width: 170px; 6673 height: auto; 6674 } 6675 6676 .dropdown-item-image-sweeteq { 6677 height: 150px; 6678 } 6679 6680 .hyfi-dropdown-logo { 6681 width: auto; 6682 height: 36px; 6683 } 6684 6685 .hyfi-dropdown-image { 6686 height: 150px; 6687 margin-right: -26px; 6688 } 6689 6690 .product-footer { 6691 padding: 40px; 6692 } 6693 6694 .header-desktop-label { 6695 padding-right: 0; 6696 } 6697 6698 .footer-main-content { 6699 6700 } 6701 6702 .slogan { 6703 } 6704 6705 .footer-right { 6706 6707 } 6708 6709 .footer-nav-column { 6710 } 6711 6712 .footer-copyright-container { 6713 } 6714 6715 } 6716 6717 @media (max-width: 719px) and (min-width: 0px) { 6718 6719 .desktop-only-show { 6720 display: none; 6721 } 6722 6723 #product-header { 6724 width: 100%; 6725 max-width: 100%; 6726 height: fit-content; 6727 position: relative; 6728 } 6729 6730 .header-mobile-label { 6731 display: inline-block 6732 } 6733 6734 .header-desktop-label { 6735 display: none; 6736 } 6737 6738 .main-nav { 6739 height: auto; 6740 padding: 24px; 6741 flex-direction: row; 6742 gap: 16px; 6743 justify-content: space-between; 6744 align-items: center; 6745 } 6746 6747 .left { 6748 width: auto; 6749 justify-content: center; 6750 padding: 0; 6751 align-items: center; 6752 } 6753 6754 .left svg { 6755 width: 56px; 6756 height: auto; 6757 } 6758 6759 .header-right { 6760 width: auto; 6761 flex-direction: row; 6762 gap: 8px; 6763 justify-content: flex-end; 6764 } 6765 6766 .header-browse { 6767 flex-direction: row; 6768 gap: 12px; 6769 width: auto; 6770 } 6771 6772 .plugins, 6773 .browse-item { 6774 width: 100%; 6775 justify-content: center; 6776 text-align: center; 6777 opacity: 1; 6778 } 6779 6780 .account-button { 6781 width: auto; 6782 padding: 8px; 6783 border: none; 6784 font-size: 0; 6785 gap: 0px; 6786 } 6787 6788 .hyfi-launch-button { 6789 padding: 8px; 6790 } 6791 6792 .hyfi-launch-label, 6793 .hyfi-launch-arrow { 6794 display: none; 6795 } 6796 6797 .hyfi-launch-mobile-label { 6798 display: block; 6799 opacity: 1; 6800 } 6801 6802 .account-button svg { 6803 font-size: 16px; 6804 } 6805 6806 .dropdown { 6807 padding: 0px 24px 24px 24px; /* Exact padding from Framer: T R B L */ 6808 height: auto; 6809 flex-direction: column; 6810 gap: 12px; 6811 align-items: stretch; 6812 background: #0A0A0A; 6813 } 6814 6815 6816 .master-plan-dropdown-item, 6817 .fuel-dropdown-item, 6818 .sweeteq-dropdown-item, 6819 .hyfi-dropdown-item { 6820 padding: 24px 16px; 6821 flex-direction: column; 6822 gap: 16px; 6823 height: auto; 6824 min-height: 162px; 6825 justify-content: center; 6826 } 6827 6828 .dropdown-text-container-mp, 6829 .dropdown-text-container-fuel, 6830 .dropdown-text-container-sweeteq, 6831 .dropdown-text-container-hyfi { 6832 width: 100%; 6833 min-width: 0; 6834 height: auto; 6835 align-items: center; 6836 gap: 12px; 6837 padding-top: 0; 6838 transform: none; 6839 } 6840 6841 .dropdown-item-logo-row { 6842 height: 40px; 6843 } 6844 6845 .dropdown-text-container-sweeteq br { 6846 display: none; 6847 } 6848 6849 .dropdown-item-image-master-plan, 6850 .dropdown-item-image-fuel, 6851 .dropdown-item-image-sweeteq, 6852 .hyfi-dropdown-image { 6853 display: none; 6854 } 6855 6856 /* Disable hover transitions on phone */ 6857 .master-plan-dropdown-item:hover .dropdown-text-container-mp, 6858 .fuel-dropdown-item:hover .dropdown-text-container-fuel, 6859 .sweeteq-dropdown-item:hover .dropdown-text-container-sweeteq, 6860 .hyfi-dropdown-item:hover .dropdown-text-container-hyfi { 6861 transform: none; /* No transition on phone */ 6862 } 6863 6864 .master-plan-dropdown-item:hover .dropdown-item-image-master-plan, 6865 .fuel-dropdown-item:hover .dropdown-item-image-fuel, 6866 .sweeteq-dropdown-item:hover .dropdown-item-image-sweeteq, 6867 .hyfi-dropdown-item:hover .hyfi-dropdown-image { 6868 opacity: 1; 6869 transform: none; /* No transition on phone */ 6870 } 6871 6872 .dropdown-item-text { 6873 width: 100%; 6874 } 6875 6876 .product-footer { 6877 width: 100%; 6878 height: fit-content; 6879 padding: 40px 24px; 6880 position: relative; 6881 } 6882 6883 .footer-main-content { 6884 flex-direction: column; 6885 align-items: center; 6886 justify-content: center; 6887 gap: 40px; 6888 } 6889 6890 6891 .slogan-text-container { 6892 width: auto; 6893 max-width: 100%; 6894 } 6895 6896 .slogan { 6897 width: 100%; 6898 justify-content: center; 6899 align-items: center; 6900 } 6901 6902 .footer-logo-icon { 6903 width: calc(61.5px * 1644 / 448); 6904 max-height: 61.5px; 6905 object-position: center top; 6906 } 6907 6908 .footer-tagline-text { 6909 font-size: 36px; /* Smaller for phone */ 6910 line-height: 35px; 6911 text-align: left; 6912 width: 100%; 6913 max-width: 210px; 6914 } 6915 6916 .footer-right { 6917 width: 100%; 6918 flex-direction: column; 6919 align-items: center; 6920 gap: 40px; 6921 6922 } 6923 6924 .footer-browse { 6925 flex-direction: column; /* Stack nav columns */ 6926 gap: 32px; 6927 align-items: center; 6928 justify-content: center; 6929 } 6930 6931 .footer-nav-column { 6932 width: 100%; 6933 align-items: center; /* Center all links */ 6934 gap: 12px; 6935 min-width: 118px; 6936 justify-content: center; 6937 } 6938 6939 .footer-nav-links { 6940 text-align: center; 6941 } 6942 6943 .footer-section-heading + .footer-section-heading { 6944 margin-top: 20px; 6945 } 6946 6947 .footer-copyright-container { 6948 flex-direction: column; 6949 gap: 12px; 6950 align-items: center; 6951 } 6952 6953 .footer-copyright { 6954 text-align: center; 6955 font-size: 14px; 6956 order: 2; 6957 } 6958 6959 .footer-social-icons { 6960 justify-content: center; 6961 order: 1; 6962 } 6963 } 6964 6965 @media (max-width: 300px ) { 6966 .header-sale-banner p { 6967 font-size: 12px; 6968 } 6969 } 6970 </style> 6971</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.