diff --git a/docs/favicon/favicon.ico b/docs/favicon/favicon.ico new file mode 100644 index 00000000..c4739a9e Binary files /dev/null and b/docs/favicon/favicon.ico differ diff --git a/docs/favicon/favicon_144.png b/docs/favicon/favicon_144.png new file mode 100644 index 00000000..bda6888e Binary files /dev/null and b/docs/favicon/favicon_144.png differ diff --git a/docs/favicon/favicon_32.png b/docs/favicon/favicon_32.png new file mode 100644 index 00000000..23792c9e Binary files /dev/null and b/docs/favicon/favicon_32.png differ diff --git a/docs/favicon/favicon_48.png b/docs/favicon/favicon_48.png new file mode 100644 index 00000000..bdddff9e Binary files /dev/null and b/docs/favicon/favicon_48.png differ diff --git a/docs/favicon/favicon_96.png b/docs/favicon/favicon_96.png new file mode 100644 index 00000000..31eec83b Binary files /dev/null and b/docs/favicon/favicon_96.png differ diff --git a/docs/img/adblock.svg b/docs/img/adblock.svg new file mode 100644 index 00000000..a64d1cad --- /dev/null +++ b/docs/img/adblock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/bg-bottom.svg b/docs/img/bg-bottom.svg new file mode 100644 index 00000000..7b905e2b --- /dev/null +++ b/docs/img/bg-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/bg-top.svg b/docs/img/bg-top.svg new file mode 100644 index 00000000..07c3ad19 --- /dev/null +++ b/docs/img/bg-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/code.svg b/docs/img/code.svg new file mode 100644 index 00000000..9867dbf1 --- /dev/null +++ b/docs/img/code.svg @@ -0,0 +1 @@ +</> \ No newline at end of file diff --git a/docs/img/download.svg b/docs/img/download.svg new file mode 100644 index 00000000..ab5defb5 --- /dev/null +++ b/docs/img/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/footer.svg b/docs/img/footer.svg new file mode 100644 index 00000000..81f1831b --- /dev/null +++ b/docs/img/footer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/plugins.svg b/docs/img/plugins.svg new file mode 100644 index 00000000..d499c520 --- /dev/null +++ b/docs/img/plugins.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/youtube-music.png b/docs/img/youtube-music.png new file mode 100644 index 00000000..ae7ad737 Binary files /dev/null and b/docs/img/youtube-music.png differ diff --git a/docs/img/youtube-music.svg b/docs/img/youtube-music.svg new file mode 100644 index 00000000..c7674c63 --- /dev/null +++ b/docs/img/youtube-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..86eb9c70 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,495 @@ + + + + + + + + YouTube Music Desktop App (Unofficial) + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

+ + YouTube Music + +

+
+
+
+
+ +
+
+
+
+ +
+
+
+
+

+ Custom YouTube Music Desktop App +

+

+ Open source, cross-platform, unofficial YouTube Music Desktop + App with built-in ad blocker and + downloader +

+
+ Download +
+
+
+
+ YouTube Music +
+
+
+
+
+ +
+
+
+
+
+
+ Adblocker +
+
+

Built-in adblocker

+

Block all ads and tracking out of the box

+
+
+
+
+ Downloader +
+
+

Built-in downloader

+

+ Download (like youtube-dl) to custom formats (mp3, opus, + etc) directly from the interface +

+
+
+
+
+ Plugins +
+
+

Many other plugins in one click

+

+ Enhance your user experience with media keys, integrations + (Discord), cosmetic filters, notifications, TouchBar, + auto-unpause and many more! Every plugin can be enabled or + disabled in one click. +

+
+
+
+
+ Code +
+
+

Open source & Cross platform

+

+ Available for Windows (installer and portable), Mac and + Linux (AppImage, deb, etc) +

+
+
+
+
+
+
+ +
+
+
+ + +
+ + + + diff --git a/docs/js/main.js b/docs/js/main.js new file mode 100644 index 00000000..bcbd69d6 --- /dev/null +++ b/docs/js/main.js @@ -0,0 +1,262 @@ +// Constants +const element = document.documentElement, + body = document.body, + revealOnScroll = (window.sr = ScrollReveal({ mobile: false })); + +// Load animations +element.classList.remove("no-js"); +element.classList.add("js"); +window.addEventListener("load", function () { + body.classList.add("is-loaded"); +}); + +if (body.classList.contains("has-animations")) { + window.addEventListener("load", function () { + revealOnScroll.reveal(".feature-extended .device-mockup", { + duration: 600, + distance: "100px", + easing: "cubic-bezier(0.215, 0.61, 0.355, 1)", + origin: "bottom", + viewFactor: 0.6, + }); + revealOnScroll.reveal(".feature-extended .feature-extended-body", { + duration: 600, + distance: "40px", + easing: "cubic-bezier(0.215, 0.61, 0.355, 1)", + origin: "top", + viewFactor: 0.6, + }); + }); +} + +// Bubble canvas +let bubbleCanvas = function (t) { + let e = this; + e.parentNode = t; + e.setCanvasSize(); + window.addEventListener("resize", function () { + e.setCanvasSize(); + }); + e.mouseX = 0; + e.mouseY = 0; + window.addEventListener("mousemove", function (t) { + (e.mouseX = t.clientX), (e.mouseY = t.clientY); + }); + e.randomise(); +}; + +bubbleCanvas.prototype.setCanvasSize = function () { + this.canvasWidth = this.parentNode.clientWidth; + this.canvasHeight = this.parentNode.clientHeight; +}; + +bubbleCanvas.prototype.generateDecimalBetween = function (start, end) { + return (Math.random() * (start - end) + end).toFixed(2); +}; + +bubbleCanvas.prototype.update = function () { + let t = this; + t.translateX = t.translateX - t.movementX; + t.translateY = t.translateY - t.movementY; + t.posX += (t.mouseX / (t.staticity / t.magnetism) - t.posX) / t.smoothFactor; + t.posY += (t.mouseY / (t.staticity / t.magnetism) - t.posY) / t.smoothFactor; + if ( + t.translateY + t.posY < 0 || + t.translateX + t.posX < 0 || + t.translateX + t.posX > t.canvasWidth + ) { + t.randomise(); + t.translateY = t.canvasHeight; + } +}; + +bubbleCanvas.prototype.randomise = function () { + this.colors = ["195,53,46", "172,54,46"]; + + this.velocity = 20; + this.smoothFactor = 50; + this.staticity = 30; + this.magnetism = 0.1 + 4 * Math.random(); + this.color = this.colors[Math.floor(Math.random() * this.colors.length)]; + this.alpha = this.generateDecimalBetween(5, 10) / 10; + this.size = this.generateDecimalBetween(1, 4); + this.posX = 0; + this.posY = 0; + this.movementX = this.generateDecimalBetween(-2, 2) / this.velocity; + this.movementY = this.generateDecimalBetween(1, 20) / this.velocity; + this.translateX = this.generateDecimalBetween(0, this.canvasWidth); + this.translateY = this.generateDecimalBetween(0, this.canvasHeight); +}; + +let drawBubbleCanvas = function (t) { + this.canvas = document.getElementById(t); + this.ctx = this.canvas.getContext("2d"); + this.dpr = window.devicePixelRatio; +}; + +drawBubbleCanvas.prototype.start = function (bubbleDensity) { + let t = this; + t.bubbleDensity = bubbleDensity; + t.setCanvasSize(); + window.addEventListener("resize", function () { + t.setCanvasSize(); + }); + t.bubblesList = []; + t.generateBubbles(); + t.animate(); +}; + +drawBubbleCanvas.prototype.setCanvasSize = function () { + this.container = this.canvas.parentNode; + this.w = this.container.offsetWidth; + this.h = this.container.offsetHeight; + this.wdpi = this.w * this.dpr; + this.hdpi = this.h * this.dpr; + this.canvas.width = this.wdpi; + this.canvas.height = this.hdpi; + this.canvas.style.width = this.w + "px"; + this.canvas.style.height = this.h + "px"; + this.ctx.scale(this.dpr, this.dpr); +}; + +drawBubbleCanvas.prototype.animate = function () { + let t = this; + t.ctx.clearRect(0, 0, t.canvas.clientWidth, t.canvas.clientHeight); + t.bubblesList.forEach(function (e) { + e.update(); + t.ctx.translate(e.translateX, e.translateY); + t.ctx.beginPath(); + t.ctx.arc(e.posX, e.posY, e.size, 0, 2 * Math.PI); + t.ctx.fillStyle = "rgba(" + e.color + "," + e.alpha + ")"; + t.ctx.fill(); + t.ctx.setTransform(t.dpr, 0, 0, t.dpr, 0, 0); + }); + requestAnimationFrame(this.animate.bind(this)); +}; + +drawBubbleCanvas.prototype.addBubble = function (t) { + return this.bubblesList.push(t); +}; + +drawBubbleCanvas.prototype.generateBubbles = function () { + let t = this; + for (let e = 0; e < t.bubbleDensity; e++) + t.addBubble(new bubbleCanvas(t.canvas.parentNode)); +}; + +// Night sky with stars canvas +let starCanvas = function (t) { + this.canvas = document.getElementById(t); + this.ctx = this.canvas.getContext("2d"); + this.dpr = window.devicePixelRatio; +}; + +starCanvas.prototype.start = function () { + let w; + let h; + + const setCanvasExtents = () => { + w = document.body.clientWidth; + h = document.body.clientHeight; + this.canvas.width = w; + this.canvas.height = h; + }; + + setCanvasExtents(); + + window.onresize = () => { + setCanvasExtents(); + }; + + const makeStars = (count) => { + const out = []; + for (let i = 0; i < count; i++) { + const s = { + x: Math.random() * w - w / 2, + y: Math.random() * h - h / 2, + z: Math.random() * 1000, + }; + out.push(s); + } + return out; + }; + + let stars = makeStars(10000); + + const clear = () => { + this.ctx.fillStyle = "#212121"; + this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); + }; + + const putPixel = (x, y, brightness) => { + const intensity = brightness * 255; + const rgb = "rgb(" + intensity + "," + intensity + "," + intensity + ")"; + this.ctx.beginPath(); + this.ctx.arc(x, y, 0.9, 0, 2 * Math.PI); + this.ctx.fillStyle = rgb; + this.ctx.fill(); + }; + + const moveStars = (distance) => { + const count = stars.length; + for (var i = 0; i < count; i++) { + const s = stars[i]; + s.z -= distance; + while (s.z <= 1) { + s.z += 1000; + } + } + }; + + let prevTime; + const init = (time) => { + prevTime = time; + requestAnimationFrame(tick); + }; + + const tick = (time) => { + let elapsed = time - prevTime; + prevTime = time; + + moveStars(elapsed * 0.1); + + clear(); + + const cx = w / 2; + const cy = h / 2; + + const count = stars.length; + for (var i = 0; i < count; i++) { + const star = stars[i]; + + const x = cx + star.x / (star.z * 0.001); + const y = cy + star.y / (star.z * 0.001); + + if (x < 0 || x >= w || y < 0 || y >= h) { + continue; + } + + const d = star.z / 1000.0; + const b = 1 - d * d; + + putPixel(x, y, b); + } + + requestAnimationFrame(tick); + }; + + requestAnimationFrame(init); +}; + +// Start canvas animations +window.addEventListener("load", function () { + // Stars + const headCanvas = new starCanvas("hero-particles"); + // Bubbles + const footerCanvas = new drawBubbleCanvas("footer-particles"); + const mainCanvas = new drawBubbleCanvas("main-particles"); + + headCanvas.start(); + footerCanvas.start(30); + mainCanvas.start(200); +}); diff --git a/docs/style/fonts.css b/docs/style/fonts.css new file mode 100644 index 00000000..8183c438 --- /dev/null +++ b/docs/style/fonts.css @@ -0,0 +1,48 @@ +/* hebrew */ +@font-face { + font-family: 'Heebo'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2'); + unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* latin */ +@font-face { + font-family: 'Heebo'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* hebrew */ +@font-face { + font-family: 'Heebo'; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2'); + unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* latin */ +@font-face { + font-family: 'Heebo'; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Oxygen'; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzZmW5Kb8VZBHR.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Oxygen'; + font-style: normal; + font-weight: 700; + src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzaGW5Kb8VZA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/docs/style/style.css b/docs/style/style.css new file mode 100644 index 00000000..dea047b9 --- /dev/null +++ b/docs/style/style.css @@ -0,0 +1,1561 @@ +html { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +footer, +header, +nav, +section { + display: block; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +figcaption, +figure, +main { + display: block; +} +figure { + margin: 1em 40px; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +pre { + font-family: monospace, monospace; + font-size: 1em; +} +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +b, +strong { + font-weight: inherit; +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +dfn { + font-style: italic; +} +mark { + background-color: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +audio, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +img { + border-style: none; +} +svg:not(:root) { + overflow: hidden; +} +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + padding: 0.35em 0.75em 0.625em; +} +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} +progress { + display: inline-block; + vertical-align: baseline; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +details, +menu { + display: block; +} +summary { + display: list-item; +} +canvas { + display: inline-block; +} +template { + display: none; +} +[hidden] { + display: none; +} +html { + box-sizing: border-box; +} +*, +*:before, +*:after { + box-sizing: inherit; +} +body { + background: #3f4042; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +hr { + border: 0; + display: block; + height: 1px; + background: #3f4042; + margin-top: 24px; + margin-bottom: 24px; +} +ul, +ol { + margin-top: 0; + margin-bottom: 24px; + padding-left: 24px; +} +ul { + list-style: disc; +} +ol { + list-style: decimal; +} +li > ul, +li > ol { + margin-bottom: 0; +} +dl { + margin-top: 0; + margin-bottom: 24px; +} +dt { + font-weight: 600; +} +dd { + margin-left: 24px; + margin-bottom: 24px; +} +img { + height: auto; + max-width: 100%; + vertical-align: middle; +} +figure { + margin: 24px 0; +} +figcaption { + font-size: 16px; + line-height: 24px; + padding: 8px 0; +} +img, +svg { + display: block; +} +table { + border-collapse: collapse; + margin-bottom: 24px; + width: 100%; +} +tr { + border-bottom: 1px solid #e4e8ee; +} +th { + text-align: left; +} +th, +td { + padding: 10px 16px; +} +th:first-child, +td:first-child { + padding-left: 0; +} +th:last-child, +td:last-child { + padding-right: 0; +} +html { + font-size: 20px; + line-height: 30px; +} +body { + color: #b7bbc1; + font-size: 1rem; +} +body, +button, +input, +select, +textarea { + font-family: "Heebo", sans-serif; +} +a { + color: #c3352e; + text-decoration: none; +} +a:hover, +a:active { + outline: 0; + text-decoration: underline; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + clear: both; + color: #fff; + font-family: "Oxygen", sans-serif; + font-weight: 600; +} +h1, +.h1 { + font-size: 38px; + line-height: 48px; + letter-spacing: 0px; +} +@media (min-width: 641px) { + h1, + .h1 { + font-size: 44px; + line-height: 54px; + letter-spacing: 0px; + } +} +h2, +.h2 { + font-size: 32px; + line-height: 42px; + letter-spacing: 0px; +} +@media (min-width: 641px) { + h2, + .h2 { + font-size: 38px; + line-height: 48px; + letter-spacing: 0px; + } +} +h3, +.h3, +blockquote { + font-size: 28px; + line-height: 34px; + letter-spacing: 0px; +} +@media (min-width: 641px) { + h3, + .h3, + blockquote { + font-size: 32px; + line-height: 42px; + letter-spacing: 0px; + } +} +h4, +.h4 { + font-size: 28px; + line-height: 34px; + letter-spacing: 0px; +} +h5, +.h5, +h6, +.h6 { + font-size: 20px; + line-height: 30px; + letter-spacing: -0.1px; +} +@media (max-width: 640px) { + .h1-mobile { + font-size: 38px; + line-height: 48px; + letter-spacing: 0px; + } + .h2-mobile { + font-size: 32px; + line-height: 42px; + letter-spacing: 0px; + } + .h3-mobile { + font-size: 28px; + line-height: 34px; + letter-spacing: 0px; + } + .h4-mobile { + font-size: 28px; + line-height: 34px; + letter-spacing: 0px; + } + .h5-mobile, + .h6-mobile { + font-size: 20px; + line-height: 30px; + letter-spacing: -0.1px; + } +} +.text-light { + color: #606483; +} +.text-light a { + color: #606483; +} +.text-light h1, +.text-light h2, +.text-light h3, +.text-light h4, +.text-light h5, +.text-light h6, +.text-light .h1, +.text-light .h2, +.text-light .h3, +.text-light .h4, +.text-light .h5, +.text-light .h6 { + color: #fff !important; +} +.text-sm { + font-size: 18px; + line-height: 27px; + letter-spacing: -0.1px; +} +.text-xs { + font-size: 16px; + line-height: 24px; + letter-spacing: -0.1px; +} +h1, +h2, +.h1, +.h2 { + margin-top: 48px; + margin-bottom: 16px; +} +h3, +.h3 { + margin-top: 36px; + margin-bottom: 12px; +} +h4, +h5, +h6, +.h4, +.h5, +.h6 { + margin-top: 24px; + margin-bottom: 4px; +} +p { + margin-top: 0; + margin-bottom: 24px; +} +dfn, +cite, +em, +i { + font-style: italic; +} +blockquote { + color: #b7bbc1; + font-style: italic; + margin-top: 24px; + margin-bottom: 24px; + margin-left: 24px; +} +blockquote::before { + content: "\201C"; +} +blockquote::after { + content: "\201D"; +} +blockquote p { + display: inline; +} +address { + color: #b7bbc1; + border-width: 1px 0; + border-style: solid; + border-color: #e4e8ee; + padding: 24px 0; + margin: 0 0 24px; +} +pre, +pre h1, +pre h2, +pre h3, +pre h4, +pre h5, +pre h6, +pre .h1, +pre .h2, +pre .h3, +pre .h4, +pre .h5, +pre .h6 { + font-family: "Courier 10 Pitch", Courier, monospace; +} +pre, +code, +kbd, +tt, +var { + background: #f3f4ff; +} +pre { + font-size: 16px; + line-height: 24px; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 24px; + margin-top: 24px; + margin-bottom: 24px; +} +code, +kbd, +tt, +var { + font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; + font-size: 16px; + padding: 2px 4px; +} +abbr, +acronym { + cursor: help; +} +mark, +ins { + text-decoration: none; +} +small { + font-size: 18px; + line-height: 27px; + letter-spacing: -0.1px; +} +b, +strong { + font-weight: 600; +} +button, +input, +select, +textarea, +label { + font-size: 20px; + line-height: 30px; +} +.container, +.container-sm { + width: 100%; + margin: 0 auto; + padding-left: 16px; + padding-right: 16px; +} +@media (min-width: 481px) { + .container, + .container-sm { + padding-left: 24px; + padding-right: 24px; + } +} +.container { + max-width: 1128px; +} +.container-sm { + max-width: 848px; +} +.container .container-sm { + max-width: 800px; + padding-left: 0; + padding-right: 0; +} +.screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + word-wrap: normal !important; +} +.screen-reader-text:focus { + border-radius: 2px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + display: block; + font-size: 14px; + letter-spacing: 0px; + font-weight: 600; + line-height: 16px; + text-decoration: none; + text-transform: uppercase; + background-color: #fff; + color: #c3352e !important; + border: none; + height: auto; + left: 8px; + padding: 16px 40px; + top: 8px; + width: auto; + z-index: 100000; +} +.list-reset { + list-style: none; + padding: 0; +} +.text-left { + text-align: left; +} +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +.text-primary { + color: #c3352e; +} +.text-secondary { + color: #ff6c50; +} +.has-top-divider { + position: relative; +} +.has-top-divider::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + display: block; + height: 1px; + background: #e4e8ee; +} +.has-bottom-divider { + position: relative; +} +.has-bottom-divider::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + display: block; + height: 1px; + background: #e4e8ee; +} +.m-0 { + margin: 0; +} +.mt-0 { + margin-top: 0; +} +.mr-0 { + margin-right: 0; +} +.mb-0 { + margin-bottom: 0; +} +.ml-0 { + margin-left: 0; +} +.m-8 { + margin: 8px; +} +.mt-8 { + margin-top: 8px; +} +.mr-8 { + margin-right: 8px; +} +.mb-8 { + margin-bottom: 8px; +} +.ml-8 { + margin-left: 8px; +} +.m-16 { + margin: 16px; +} +.mt-16 { + margin-top: 16px; +} +.mr-16 { + margin-right: 16px; +} +.mb-16 { + margin-bottom: 16px; +} +.ml-16 { + margin-left: 16px; +} +.m-24 { + margin: 24px; +} +.mt-24 { + margin-top: 24px; +} +.mr-24 { + margin-right: 24px; +} +.mb-24 { + margin-bottom: 24px; +} +.ml-24 { + margin-left: 24px; +} +.m-32 { + margin: 32px; +} +.mt-32 { + margin-top: 32px; +} +.mr-32 { + margin-right: 32px; +} +.mb-32 { + margin-bottom: 32px; +} +.ml-32 { + margin-left: 32px; +} +.m-40 { + margin: 40px; +} +.mt-40 { + margin-top: 40px; +} +.mr-40 { + margin-right: 40px; +} +.mb-40 { + margin-bottom: 40px; +} +.ml-40 { + margin-left: 40px; +} +.m-48 { + margin: 48px; +} +.mt-48 { + margin-top: 48px; +} +.mr-48 { + margin-right: 48px; +} +.mb-48 { + margin-bottom: 48px; +} +.ml-48 { + margin-left: 48px; +} +.m-56 { + margin: 56px; +} +.mt-56 { + margin-top: 56px; +} +.mr-56 { + margin-right: 56px; +} +.mb-56 { + margin-bottom: 56px; +} +.ml-56 { + margin-left: 56px; +} +.m-64 { + margin: 64px; +} +.mt-64 { + margin-top: 64px; +} +.mr-64 { + margin-right: 64px; +} +.mb-64 { + margin-bottom: 64px; +} +.ml-64 { + margin-left: 64px; +} +.p-0 { + padding: 0; +} +.pt-0 { + padding-top: 0; +} +.pr-0 { + padding-right: 0; +} +.pb-0 { + padding-bottom: 0; +} +.pl-0 { + padding-left: 0; +} +.p-8 { + padding: 8px; +} +.pt-8 { + padding-top: 8px; +} +.pr-8 { + padding-right: 8px; +} +.pb-8 { + padding-bottom: 8px; +} +.pl-8 { + padding-left: 8px; +} +.p-16 { + padding: 16px; +} +.pt-16 { + padding-top: 16px; +} +.pr-16 { + padding-right: 16px; +} +.pb-16 { + padding-bottom: 16px; +} +.pl-16 { + padding-left: 16px; +} +.p-24 { + padding: 24px; +} +.pt-24 { + padding-top: 24px; +} +.pr-24 { + padding-right: 24px; +} +.pb-24 { + padding-bottom: 24px; +} +.pl-24 { + padding-left: 24px; +} +.p-32 { + padding: 32px; +} +.pt-32 { + padding-top: 32px; +} +.pr-32 { + padding-right: 32px; +} +.pb-32 { + padding-bottom: 32px; +} +.pl-32 { + padding-left: 32px; +} +.p-40 { + padding: 40px; +} +.pt-40 { + padding-top: 40px; +} +.pr-40 { + padding-right: 40px; +} +.pb-40 { + padding-bottom: 40px; +} +.pl-40 { + padding-left: 40px; +} +.p-48 { + padding: 48px; +} +.pt-48 { + padding-top: 48px; +} +.pr-48 { + padding-right: 48px; +} +.pb-48 { + padding-bottom: 48px; +} +.pl-48 { + padding-left: 48px; +} +.p-56 { + padding: 56px; +} +.pt-56 { + padding-top: 56px; +} +.pr-56 { + padding-right: 56px; +} +.pb-56 { + padding-bottom: 56px; +} +.pl-56 { + padding-left: 56px; +} +.p-64 { + padding: 64px; +} +.pt-64 { + padding-top: 64px; +} +.pr-64 { + padding-right: 64px; +} +.pb-64 { + padding-bottom: 64px; +} +.pl-64 { + padding-left: 64px; +} +.sr .has-animations .is-revealing { + visibility: hidden; +} +.button { + display: inline-flex; + font-size: 14px; + letter-spacing: 0px; + font-weight: 700; + line-height: 16px; + text-decoration: none !important; + text-transform: uppercase; + background-color: #fff; + background: #fff; + color: #c3352e !important; + border: none; + border-radius: 2px; + cursor: pointer; + justify-content: center; + padding: 16px 40px; + height: 48px; + text-align: center; + white-space: nowrap; +} +.button:active { + outline: 0; +} +.button::before { + border-radius: 2px; +} +.button-shadow { + position: relative; +} +.button-shadow::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + box-shadow: 0 8px 16px rgba(22, 30, 42, 0.12); + mix-blend-mode: multiply; + transition: box-shadow 0.15s ease; +} +.button-shadow:hover::before { + box-shadow: 0 8px 16px rgba(22, 30, 42, 0.16); +} +.button-sm { + padding: 8px 24px; + height: 32px; +} +.button-sm.button-shadow::before { + box-shadow: 0 4px 16px rgba(22, 30, 42, 0.12); +} +.button-sm.button-shadow:hover::before { + box-shadow: 0 4px 16px rgba(22, 30, 42, 0.16); +} +.button-primary, +.button-secondary { + color: #fff !important; + transition: background 0.15s ease; +} +.button-primary { + background: #c3352e; +} +.button-primary:hover { + background: #ac362e; +} +.button-primary.button-shadow::before { + box-shadow: 0 8px 16px rgba(66, 52, 248, 0.24); +} +.button-primary.button-shadow:hover::before { + box-shadow: 0 8px 16px rgba(66, 52, 248, 0.32); +} +.button-primary .button-sm.button-shadow::before { + box-shadow: 0 4px 16px rgba(66, 52, 248, 0.24); +} +.button-primary .button-sm.button-shadow:hover::before { + box-shadow: 0 4px 16px rgba(66, 52, 248, 0.32); +} +.button-secondary { + background: #ff6c50; +} +.button-secondary:hover { + background: #ac362e; +} +.button-secondary.button-shadow::before { + box-shadow: 0 8px 16px rgba(255, 108, 80, 0.24); +} +.button-secondary.button-shadow:hover::before { + box-shadow: 0 8px 16px rgba(255, 108, 80, 0.32); +} +.button-secondary .button-sm.button-shadow::before { + box-shadow: 0 4px 16px rgba(255, 108, 80, 0.24); +} +.button-secondary .button-sm.button-shadow:hover::before { + box-shadow: 0 4px 16px rgba(255, 108, 80, 0.32); +} +.button-block { + display: flex; + width: 100%; +} +@media (max-width: 640px) { + .button-wide-mobile { + width: 100%; + max-width: 280px; + } +} +.site-header { + padding: 24px 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 1; +} +.site-header-inner { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; +} +.header-links { + display: inline-flex; +} +.header-links li { + display: inline-flex; +} +.header-links a:not(.button) { + font-size: 16px; + line-height: 24px; + letter-spacing: -0.1px; + font-weight: 600; + color: #606483; + text-transform: uppercase; + text-decoration: none; + line-height: 16px; + padding: 8px 24px; +} +.header-links a:not(.button):hover, +.header-links a:not(.button):active { + color: #fff; +} +.hero { + position: relative; + padding-top: 128px; + padding-bottom: 88px; + z-index: 0; +} +.hero .hero-bg { + position: absolute; + top: 0; + bottom: 42%; + left: 0; + right: 0; + background: #363636; + z-index: -2; +} +.hero .hero-particles-container { + position: absolute; + top: 0; + bottom: 42%; + left: 0; + right: 0; +} +.hero::before, +.hero::after { + content: ""; + position: absolute; + left: calc(50% - 360px); + width: 720px; + background-repeat: no-repeat; +} +.hero::before { + top: 0; + height: 159px; + background-image: url("../img/bg-top.svg"); + background-size: 720px 159px; +} +.hero::after { + bottom: 42%; + height: 173px; + background-image: url("../img/bg-bottom.svg"); + background-size: 720px 173px; +} +.hero-inner { + position: relative; + z-index: 1; +} +.hero-copy { + position: relative; + margin-bottom: 48px; +} +@media (min-width: 641px) { + .hero { + padding-top: 160px; + padding-bottom: 128px; + } + .hero::before, + .hero::after { + left: calc(50% - 720px); + width: 1440px; + } + .hero::before { + height: 318px; + background-size: 1440px 318px; + } + .hero::after { + height: 347px; + background-size: 1440px 347px; + } + .hero-copy { + margin-bottom: 88px; + } + .hero-paragraph { + padding-left: 72px; + padding-right: 72px; + } +} +.has-animations .hero .hero-bg, +.has-animations .hero::before, +.has-animations .hero::after, +.has-animations .hero-particles-container, +.has-animations .site-header, +.has-animations .hero-title, +.has-animations .hero-paragraph, +.has-animations .hero-cta, +.has-animations .hero .mockup-bg, +.has-animations .hero .device-mockup { + opacity: 0; +} +.has-animations.is-loaded .hero .hero-bg { + -webkit-animation: heroBg 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; + animation: heroBg 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; +} +.has-animations.is-loaded .hero::before, +.has-animations.is-loaded .hero::after { + -webkit-animation: heroFadeIn 0.6s ease forwards 0.45s; + animation: heroFadeIn 0.6s ease forwards 0.45s; +} +.has-animations.is-loaded .site-header, +.has-animations.is-loaded .hero-particles-container, +.has-animations.is-loaded .hero .mockup-bg { + -webkit-animation: heroFadeIn 0.6s ease forwards 0.45s; + animation: heroFadeIn 0.6s ease forwards 0.45s; +} +.has-animations.is-loaded .hero-title { + -webkit-animation: heroContent 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) + forwards 0.15s; + animation: heroContent 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.15s; +} +.has-animations.is-loaded .hero-paragraph { + -webkit-animation: heroContent 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) + forwards 0.3s; + animation: heroContent 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s; +} +.has-animations.is-loaded .hero-cta { + -webkit-animation: heroContent 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) + forwards 0.45s; + animation: heroContent 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.45s; +} +.has-animations.is-loaded .hero .device-mockup { + -webkit-animation: heroMockup 0.6s ease forwards 0.6s; + animation: heroMockup 0.6s ease forwards 0.6s; +} +@-webkit-keyframes heroBg { + from { + -webkit-transform: scaleY(0) scaleX(1.2) skewY(30deg); + transform: scaleY(0) scaleX(1.2) skewY(30deg); + opacity: 1; + } + to { + -webkit-transform: scaleY(1) scaleX(1) skewY(0); + transform: scaleY(1) scaleX(1) skewY(0); + opacity: 1; + } +} +@keyframes heroBg { + from { + -webkit-transform: scaleY(0) scaleX(1.2) skewY(30deg); + transform: scaleY(0) scaleX(1.2) skewY(30deg); + opacity: 1; + } + to { + -webkit-transform: scaleY(1) scaleX(1) skewY(0); + transform: scaleY(1) scaleX(1) skewY(0); + opacity: 1; + } +} +@-webkit-keyframes heroContent { + from { + -webkit-transform: translateY(40px) skewY(2deg); + transform: translateY(40px) skewY(2deg); + opacity: 0; + } + to { + -webkit-transform: translateY(0) skewY(0); + transform: translateY(0) skewY(0); + opacity: 1; + } +} +@keyframes heroContent { + from { + -webkit-transform: translateY(40px) skewY(2deg); + transform: translateY(40px) skewY(2deg); + opacity: 0; + } + to { + -webkit-transform: translateY(0) skewY(0); + transform: translateY(0) skewY(0); + opacity: 1; + } +} +@-webkit-keyframes heroMockup { + from { + -webkit-transform: translateY(80px); + transform: translateY(80px); + opacity: 0; + } + to { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} +@keyframes heroMockup { + from { + -webkit-transform: translateY(80px); + transform: translateY(80px); + opacity: 0; + } + to { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} +@-webkit-keyframes heroFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes heroFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.mockup-container { + position: relative; +} +#mockup-header-img { + position: relative; + height: 100%; + -moz-box-shadow: 3px 3px 13px #212121; + -webkit-box-shadow: 3px 3px 13px #212121; + box-shadow: 3px 3px 13px #212121; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} +.mockup-bg { + pointer-events: none; +} +.mockup-bg img, +.mockup-bg svg { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, 0%); + transform: translate(-50%, 0%); + width: 100%; + height: auto; + max-width: 300% !important; +} +.device-mockup { + position: relative; + width: 350px; + height: auto; + margin: 0 auto; + z-index: 1; +} +.has-animations .features-extended { + opacity: 0; +} +.has-animations.is-loaded .features-extended { + opacity: 1; + position: relative; +} +.features-extended-header { + margin-bottom: 32px; +} +.features-extended-wrap { + display: flex; + flex-wrap: wrap; + margin-top: -24px; +} +.features-extended-wrap:last-of-type { + margin-bottom: -24px; +} +.features-extended-wrap:not(:last-of-type) { + margin-bottom: 24px; +} +.feature-extended { + padding: 24px 0; +} +.feature-extended-image { + position: relative; + margin-bottom: 32px; +} +.feature-extended-image img, +.feature-extended-image svg { + width: 100%; + max-width: 200px; + height: auto; + margin-left: auto; + margin-right: auto; + overflow: visible; +} +.feature-extended-body { + text-align: center; +} +@media (min-width: 641px) { + .features-extended .container { + max-width: 912px; + } + .features-extended .section-inner { + padding-bottom: 128px; + } + .features-extended .section-paragraph { + padding-left: 72px; + padding-right: 72px; + margin-bottom: 0; + } + .features-extended-header { + margin-bottom: 80px; + } + .features-extended-wrap { + margin-top: -64px; + } + .features-extended-wrap:last-of-type { + margin-bottom: -64px; + } + .features-extended-wrap:not(:last-of-type) { + margin-bottom: 64px; + } + .feature-extended { + display: flex; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-end; + padding: 64px 0; + } + .feature-extended .feature-extended-image { + width: 440px; + margin-right: 96px; + margin-bottom: 0; + } + .feature-extended .feature-extended-image img, + .feature-extended .feature-extended-image svg { + width: auto; + } + .feature-extended .feature-extended-image img.device-mockup, + .feature-extended .feature-extended-image svg.device-mockup { + max-width: 200px; + } + .feature-extended:nth-child(even) { + justify-content: flex-start; + } + .feature-extended:nth-child(even) .feature-extended-image { + order: 1; + margin-left: 96px; + margin-right: 0; + } + .feature-extended-body { + display: flex; + flex-direction: column; + justify-content: center; + flex-shrink: 0; + width: 360px; + text-align: left; + } +} +@media (min-width: 1025px) { + .features-extended .container { + max-width: 944px; + } + .feature-extended .feature-extended-image { + margin-right: 64px; + } + .feature-extended:nth-child(even) .feature-extended-image { + margin-left: 64px; + } + .feature-extended-body { + width: 392px; + } +} +.cta .section-paragraph { + margin-bottom: 32px; +} +@media (min-width: 641px) { + .cta .section-paragraph { + margin-bottom: 32px; + padding-left: 72px; + padding-right: 72px; + } +} +.body-wrap { + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 100vh; +} +.boxed-container { + max-width: 1440px; + margin: 0 auto; + box-shadow: 0 20px 48px rgba(22, 30, 42, 0.16); +} +main { + flex: 1 0 auto; +} +.section-inner { + position: relative; + padding-top: 48px; + padding-bottom: 48px; +} +@media (min-width: 641px) { + .section-inner { + padding-top: 88px; + padding-bottom: 88px; + } +} +.site-footer { + position: relative; + background: #212121; +} +.site-footer::before { + content: ""; + position: absolute; + top: -76px; + left: calc(50% - 360px); + width: 720px; + height: 291px; + background-image: url("../img/footer.svg"); + background-size: 720px 291px; + background-repeat: no-repeat; +} +.site-footer .footer-particles-container, +.main-particles-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.site-footer-bottom { + font-size: 14px; + line-height: 22px; + letter-spacing: 0px; + z-index: 1; +} +.site-footer-bottom a { + color: #606483; + text-decoration: none; +} +.site-footer-bottom a:hover, +.site-footer-bottom a:active { + text-decoration: underline; +} +.site-footer-inner { + position: relative; + display: flex; + flex-wrap: wrap; + padding-top: 48px; + padding-bottom: 48px; + position: relative; +} +.footer-brand, +.footer-links, +.footer-social-links, +.footer-copyright { + flex: none; + width: 100%; + display: inline-flex; + justify-content: center; +} +.footer-brand, +.footer-links, +.footer-social-links { + margin-bottom: 24px; +} +.footer-links li + li, +.footer-social-links li + li { + margin-left: 16px; +} +.footer-social-links li { + display: inline-flex; +} +.footer-social-links li a { + padding: 8px; +} +@media (min-width: 641px) { + .site-footer::before { + top: -152px; + left: calc(50% - 720px); + width: 1440px; + height: 582px; + background-size: 1440px 582px; + } + .site-footer-inner { + justify-content: space-between; + padding-top: 64px; + padding-bottom: 64px; + } + .footer-brand, + .footer-links, + .footer-social-links, + .footer-copyright { + flex: 50%; + } + .footer-brand, + .footer-copyright { + justify-content: flex-start; + } + .footer-links, + .footer-social-links { + justify-content: flex-end; + } + .footer-links { + order: 1; + margin-bottom: 0; + } +}