@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } :root { --break-small: 576px; --break-medium: 768px; --break-large: 1024px; --break-xlarge: 1440px; } html { scroll-behavior: smooth; } body { outline: none; background-color: var(--color-background-general); margin: 0; padding: 0; overflow-x: hidden; } body:has(header.is-open) { overflow: hidden; } svg { display: inline-block; } main { background-color: var(--color-background-cf); } section { width: 100%; } a { cursor: pointer; } * { box-sizing: border-box; font-family: var(--font-family-brand); font-optical-sizing: auto; } main { position: relative; max-width: 100%; overflow: hidden; } .hero-line-item a { font-family: var(--font-family-default); } .content-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 var(--space-500); } @media only screen and (max-width: 1024px) { .content-wrapper { max-width: 805px; max-width: 886px; padding-left: var(--space-1000); padding-right: var(--space-1000); } } @media only screen and (max-width: 885px) { .content-wrapper { max-width: 680px; } } @media only screen and (max-width: 600px) { .content-wrapper { padding-left: var(--space-500); padding-right: var(--space-500); } } .content-wrapper.row { flex-direction: row; } .content-wrapper.center { align-items: center; } .download-buttons-mob { display: none; } @media only screen and (max-width: 1024px) { .download-buttons-mob { display: flex; flex-direction: column; align-items: center; } } .heading-first { color: var(--color-text-pure); font-size: var(--font-size-1100); font-weight: var(--font-weight-bold); line-height: 118.182%; letter-spacing: 0px; } @media only screen and (max-width: 1024px) { .heading-first { margin: 0 auto; text-align: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-800); line-height: 125%; } } .heading-second { text-align: center; font-size: var(--font-size-1100); font-weight: var(--font-weight-bold); line-height: 127.273%; } @media only screen and (max-width: 1024px) { .heading-second { font-size: var(--font-size-800); } } .heading-third { font-size: var(--font-size-800); font-weight: var(--font-weight-bold); line-height: 125%; font-family: var(--font-family-brand); font-optical-sizing: auto; font-style: normal; } @media only screen and (max-width: 1024px) { .heading-third { font-size: var(--font-size-800); font-weight: var(--font-weight-bold); line-height: 125%; text-align: center; } } .download-btn { display: flex; justify-content: center; align-items: center; position: relative; height: var(--space-1200); margin: 0 auto 7px; padding: var(--space-400) var(--space-800); white-space: nowrap; background: var(--color-brand-cf); color: var(--color-text-cta-ow); text-align: center; font-size: var(--font-size-400); font-weight: var(--font-weight-medium); line-height: 110%; text-transform: uppercase; transition: all 0.2s ease-in-out; letter-spacing: var(--font-letter-spacing-regular); } @media only screen and (max-width: 1024px) { .download-btn { margin: 0px auto; padding: var(--space-400) var(--space-500); font-size: var(--font-size-400); } } @media only screen and (max-width: 370px) { .download-btn { padding: var(--space-400) 14px; font-size: var(--font-size-350); } } .download-btn:hover { background: var(--color-surface-brand-cf-hover); } .download-btn .mobile { display: none; } @media only screen and (max-width: 1024px) { .download-btn .desktop { display: none; } } .download-buttons { display: flex; justify-content: center; margin: 36px auto 0; } @media only screen and (max-width: 1024px) { .download-buttons { display: none; } } .download-btn .first-hidden { display: none; } .download-btn .first-hidden.visible { display: flex; } .download-btn .first-visible { display: flex; } .download-btn .first-visible.hidden { display: none; } .download-btn.mac.hidden, .download-btn.pc.hidden { display: none; } .cf-forge-mob { display: none; } @media only screen and (max-width: 1024px) { .cf-forge-mob { display: flex; margin: 39px auto 0; } } .item-text { color: #dfdfdf; font-size: 15px; font-weight: var(--font-weight-medium); line-height: 150%; text-align: center; } @media only screen and (max-width: 1024px) { .item-text { font-size: var(--font-size-300); } } .mods-section button.btn-border, .btn-border { justify-content: center; align-items: center; height: var(--space-1000); padding: 10px 15px; color: var(--color-text-primary); font-family: var(--font-family-default); font-size: var(--font-size-300); font-style: normal; font-weight: var(--font-weight-medium); line-height: 200%; text-align: center; letter-spacing: var(--font-letter-spacing-regular); text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: all 0.2s ease-in-out; cursor: pointer; border: 1px solid var(--surface-on-surface, rgba(255, 255, 255, 0.08)); display: flex; margin: 0 auto; width: 100%; } .mods-section button.btn-border *, .btn-border * { font-family: var(--font-family-default); color: var(--color-text-primary); } .mods-section button.btn-border svg, .btn-border svg { fill: #9F9F9F; transition: all 0.2s ease-in-out; width: var(--space-600); height: var(--space-600); margin-right: 3px; } .mods-section button.btn-border svg.rotate, .btn-border svg.rotate { transform: rotate(180deg); } .mods-section button.btn-border .btn-border-text.is-open, .btn-border .btn-border-text.is-open { display: flex; } .mods-section button.btn-border .btn-border-text.more, .btn-border .btn-border-text.more { display: none; } .mods-section button.btn-border .btn-border-text.more.is-open, .btn-border .btn-border-text.more.is-open { display: flex; } .mods-section button.btn-border .btn-border-text.less, .btn-border .btn-border-text.less { display: none; } .mods-section button.btn-border .btn-border-text.less.is-open, .btn-border .btn-border-text.less.is-open { display: flex; } @media only screen and (max-width: 600px) { .mods-section button.btn-border, .btn-border { display: flex; } } .mods-section button.btn-border:hover, .btn-border:hover { color: var(--color-text-pure); border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.24); } .bottom { position: relative; width: 100%; overflow: hidden; } .inf-icon { border-radius: 50%; border: 3px solid var(--color-background-general); } .link { text-decoration: underline; } .loader { position: relative; margin: auto; width: 18px; height: 18px; animation: rotating 2s linear infinite; justify-content: center; align-items: center; overflow: hidden; display: none; } .loader.is-loading { display: flex; } .loader svg { width: 18px; height: 18px; } .to-top { display: flex; flex-direction: column; align-items: center; margin: 9px auto 0; color: #B2B2B2; font-family: var(--font-family-brand); font-size: var(--font-size-400); font-weight: var(--font-weight-medium); line-height: normal; } @media only screen and (max-width: 1024px) { .to-top { margin: 13px auto 0; font-size: var(--font-size-400); } } .to-top svg { width: var(--space-600); height: var(--space-600); margin: 0 0 10px; } .to-top-section { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; } .to-top-section .content-wrapper { padding-top: 49px; } @media only screen and (max-width: 1024px) { .to-top-section .content-wrapper { padding-top: 0; } } .duck-section { position: relative; margin: 99px auto 0; padding-bottom: 48px; } @media only screen and (max-width: 1024px) { .duck-section { margin: 79px auto 0; } } @media only screen and (max-width: 600px) { .duck-section { margin: 79px auto 22px; } } .duck-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; } .duck-section .img-duck-container { position: relative; width: 202px; } .duck-section .img-duck-container .img-duck { position: absolute; top: 6px; left: 0; } .cf-logo { width: 177px; height: 50px; } a { transition: background-color 0.1s ease-out; } @keyframes appear-from-left { from { opacity: 0.5; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } @keyframes rotating { to { transform: rotate(360deg); } } .hero-section, .mods-section, .about-section { opacity: 0; opacity: 1; } .hero-section.animate, .mods-section.animate, .about-section.animate { animation: fadeInBottomToTopSoft 600ms ease-out forwards; } @keyframes fadeInBottomToTopSoft { 0% { transform: translateY(var(--space-500)); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } @keyframes show-screenshot { 0% { opacity: 0; } to { opacity: 1; } } :root { --font-family-brand: "Montserrat", sans-serif; --font-family-default: "Lato", sans-serif; --font-family-code: "Consolas", sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-line-height-350: 14px; --font-line-height-400: 16px; --font-line-height-450: 18px; --font-line-height-500: 20px; --font-line-height-550: 22px; --font-line-height-600: 24px; --font-line-height-700: 28px; --font-line-height-800: 32px; --font-line-height-1000: 40px; --font-line-height-1300: 52px; --font-line-height-1800: 72px; --font-line-height-2600: 104px; --font-letter-spacing-default: 0px; --font-letter-spacing-regular: 1.2px; --font-size-300: 12px; --font-size-350: 14px; --font-size-400: 16px; --font-size-450: 18px; --font-size-500: 20px; --font-size-550: 22px; --font-size-600: 24px; --font-size-800: 32px; --font-size-1100: 44px; --font-size-1600: 64px; --font-size-2400: 96px; --color-brand-ow: #d34037; --color-brand-ow-hover: #f05c48; --color-brand-cf: #eb622b; --color-brand-cf-hover: #f18536; --color-brand-tb: #41c4c3; --color-brand-tb-hover: #5de3e2; --color-brand-el-1: #9feaf9; --color-brand-el-2: #69c5ea; --color-brand-nt: #b5df30; --color-brand-nt-hover: #c4e559; --color-brand-op: #e6004d; --color-brand-op-hover: #f53b6a; --color-brand-dsrd: #5865f2; --color-brand-dsrd-hover: rgba(88, 101, 242, 0.24); --color-brand-twch: #6441a5; --color-brand-twch-hover: rgba(100, 65, 165, 0.24); --color-neutral-0: #000000; --color-neutral-8: #101010; --color-neutral-16: #202020; --color-neutral-24: #303030; --color-neutral-32: #404040; --color-neutral-40: #505050; --color-neutral-48: #606060; --color-neutral-80: #9f9f9f; --color-neutral-88: #afafaf; --color-neutral-96: #bfbfbf; --color-neutral-104: #cfcfcf; --color-neutral-112: #dfdfdf; --color-neutral-120: #efefef; --color-neutral-128: #ffffff; --color-infographic-info-1: #004697; --color-infographic-info-2: #0063b5; --color-infographic-info-3: #0074c7; --color-infographic-info-4: #0c86d9; --color-infographic-info-5: #1593e7; --color-infographic-info-6: #3ea2ea; --color-infographic-info-7: #62b3ec; --color-infographic-info-8: #8ec8f2; --color-infographic-info-9: #b9ddf7; --color-infographic-info-10: #e2f2fb; --color-infographic-ow-1: var(--color-brand-ow); --color-infographic-ow-2: #942b27; --color-infographic-ow-3: #ffd2d0; --color-infographic-ow-4: #ffa4a1; --color-infographic-ow-5: #ec7068; --color-infographic-cf-1: var(--color-brand-cf); --color-infographic-cf-2: #a4491e; --color-infographic-cf-3: #ffdccb; --color-infographic-cf-4: #ffb897; --color-infographic-cf-5: #f8936d; --color-infographic-tb-1: var(--color-brand-tb); --color-infographic-tb-2: #2e8989; --color-infographic-tb-3: #d4ffff; --color-infographic-tb-4: #aff; --color-infographic-tb-5: #7ed5d6; --color-infographic-el-1: var(--color-brand-el-2); --color-functional-critical-bright: #fe3737; --color-functional-critical-deep: #d93025; --color-functional-warning-bright: #e07400; --color-functional-warning-deep: #c35404; --color-functional-success-bright: #32a100; --color-functional-success-deep: #018901; --color-functional-info-bright: #2690e7; --color-functional-info-deep: #0074c7; --color-transparent-brand: rgba(211, 64, 55, 0.64); --color-transparent-brand-ow-16: rgba(211, 64, 55, 0.16); --color-transparent-brand-ow-20: rgba(211, 64, 55, 0.2); --color-transparent-brand-ow-24: rgba(211, 64, 55, 0.24); --color-transparent-brand-ow-64: rgba(211, 64, 55, 0.64); --color-transparent-brand-cf-16: rgba(235, 98, 43, 0.16); --color-transparent-brand-cf-20: rgba(235, 98, 43, 0.2); --color-transparent-brand-cf-56: rgba(235, 98, 43, 0.56); --color-transparent-brand-cf-64: rgba(235, 98, 43, 0.64); --color-transparent-dark-8: rgba(255, 255, 255, 0.08); --color-transparent-dark-12: rgba(255, 255, 255, 0.12); --color-transparent-dark-16: rgba(255, 255, 255, 0.16); --color-transparent-dark-20: rgba(255, 255, 255, 0.2); --color-transparent-dark-24: rgba(255, 255, 255, 0.24); --color-transparent-dark-32: rgba(255, 255, 255, 0.32); --color-transparent-light-4: rgba(0, 0, 0, 0.04); --color-transparent-light-8: rgba(0, 0, 0, 0.08); --color-transparent-light-12: rgba(0, 0, 0, 0.12); --color-transparent-light-16: rgba(0, 0, 0, 0.16); --color-transparent-light-24: rgba(0, 0, 0, 0.24); --color-transparent-critical-8: rgba(217, 48, 37, 0.08); --color-transparent-critical-16: rgba(217, 48, 37, 0.16); --color-transparent-critical-56: rgba(217, 48, 37, 0.56); --color-transparent-critical-64: rgba(217, 48, 37, 0.64); --color-transparent-warning-8: rgba(195, 84, 4, 0.08); --color-transparent-warning-16: rgba(195, 84, 4, 0.16); --color-transparent-warning-56: rgba(195, 84, 4, 0.56); --color-transparent-warning-64: rgba(195, 84, 4, 0.64); --color-transparent-success-8: rgba(1, 137, 1, 0.08); --color-transparent-success-16: rgba(1, 137, 1, 0.16); --color-transparent-success-56: rgba(1, 137, 1, 0.56); --color-transparent-success-64: rgba(1, 137, 1, 0.64); --color-transparent-info-8: rgba(0, 116, 199, 0.08); --color-transparent-info-16: rgba(0, 116, 199, 0.16); --color-transparent-info-56: rgba(0, 116, 199, 0.56); --color-transparent-info-64: rgba(0, 116, 199, 0.64); --color-transparent-el-16: rgba(159, 234, 249, 0.16); --color-transparent-el-1-20: rgba(159, 234, 249, 0.2); --color-transparent-el-2-56: rgba(159, 234, 249, 0.56); --color-background-general: var(--color-neutral-0); --color-background-cf: var(--color-neutral-8); --color-surface-primary: var(--color-neutral-8); --color-surface-secondary: var(--color-neutral-16); --color-surface-tertiary: var(--color-neutral-24); --color-surface-quaternary: var(--color-neutral-32); --color-surface-invert: var(--color-neutral-128); --color-surface-brand-ow: var(--color-brand-ow); --color-surface-brand-ow-hover: var(--color-brand-ow-hover); --color-surface-brand-ow-focus: var(--color-transparent-brand-ow-20); --color-surface-brand-ow-hover-on-focus: var(--color-transparent-brand-ow-24); --color-surface-brand-cf: var(--color-brand-cf); --color-surface-brand-cf-hover: var(--color-brand-cf-hover); --color-surface-brand-cf-focus: var(--color-transparent-brand-cf-16); --color-surface-brand-tb: var(--color-brand-tb); --color-surface-brand-tb-hover: var(--color-brand-tb-hover); --color-surface-brand-el: var(--color-brand-el); --color-surface-brand-el-focus: var(--color-transparent-el-1-16); --color-surface-brand-nt: var(--color-brand-nt); --color-surface-brand-nt-hover: var(--color-brand-nt-hover); --color-surface-brand-op: var(--color-brand-op); --color-surface-brand-op-hover: var(--color-brand-op-hover); --color-surface-brand-dsrd: var(--color-brand-dsrd); --color-surface-brand-dsrd-hover: var(--color-brand-dsrd-hover); --color-surface-brand-twch: var(--color-brand-twch); --color-surface-brand-twch-hover: var(--color-brand-twch-hover); --color-surface-critical-solid: var(--color-functional-critical-deep); --color-surface-critical-hover: var(--color-transparent-critical-16); --color-surface-critical-transparent: var(--color-transparent-critical-16); --color-surface-warning-solid: var(--color-functional-warning-deep); --color-surface-warning-transparent: var(--color-transparent-warning-16); --color-surface-success-solid: var(--color-functional-success-deep); --color-surface-success-transparent: var(--color-transparent-success-16); --color-surface-info-solid: var(--color-functional-info-deep); --color-surface-info-transparent: var(--color-transparent-info-16); --color-surface-note-transparent: var(--color-transparent-dark-12); --color-surface-focus-brand-ow: var(--color-transparent-brand-ow-20); --color-surface-focus-brand-el: var(--color-transparent-el-16); --color-surface-focus-brand-cf: var(--color-transparent-brand-cf-20); --color-surface-on-surface-primary: var(--color-transparent-dark-8); --color-surface-on-surface-primary-hover: var(--color-transparent-dark-16); --color-surface-on-surface-secondary: var(--color-transparent-dark-16); --color-surface-on-surface-secondary-hover: var(--color-transparent-dark-24); --color-surface-default-hover: var(--color-neutral-32); --color-surface-tooltip: var(--color-neutral-48); --color-text-invert: var(--color-neutral-0); --color-text-cta-tb: var(--color-neutral-0); --color-text-cta-nt: var(--color-neutral-0); --color-text-cta-ow: var(--color-neutral-128); --color-text-cta-cf: var(--color-neutral-128); --color-text-tertiary: var(--color-neutral-80); --color-text-secondary: var(--color-neutral-96); --color-text-primary: var(--color-neutral-112); --color-text-pure: var(--color-neutral-128); --color-text-brand-ow: var(--color-brand-ow); --color-text-brand-ow-hover: var(--color-brand-ow-hover); --color-text-brand-cf: var(--color-brand-cf); --color-text-brand-cf-hover: var(--color-brand-cf-hover); --color-text-brand-tb: var(--color-brand-tb); --color-text-brand-tb-hover: var(--color-brand-tb-hover); --color-text-brand-nt: var(--color-brand-nt); --color-text-brand-nt-hover: var(--color-brand-nt-hover); --color-text-brand-op: var(--color-brand-op); --color-text-brand-op-hover: var(--color-brand-op-hover); --color-text-warning: var(--color-functional-warning-bright); --color-text-success: var(--color-functional-success-bright); --color-text-info: var(--color-functional-info-bright); --color-text-critical: var(--color-functional-critiacl-bright); --color-text-error: var(--color-functional-critiacl-bright); --color-icon-pure: var(--color-neutral-128); --color-icon-primary: var(--color-neutral-112); --color-icon-secondary: var(--color-neutral-80); --color-icon-cta-ow: var(--color-neutral-128); --color-icon-cta-cf: var(--color-neutral-128); --color-icon-cta-nt: var(--color-neutral-0); --color-icon-cta-tb-: var(--color-neutral-0); --color-icon-brand-ow: var(--color-brand-ow); --color-icon-brand-cf: var(--color-brand-cf); --color-icon-brand-tb: var(--color-brand-tb); --color-icon-brand-nt: var(--color-brand-nt); --color-icon-brand-op: var(--color-brand-op); --color-icon-critical: var(--color-functional-critical-bright); --color-icon-warning: var(--color-functional-warning-bright); --color-icon-success: var(--color-functional-success-bright); --color-icon-info: var(--color-functional-info-bright); --color-border-primary: var(--color-neutral-112); --color-border-secondary: var(--color-neutral-80); --color-border-tertiary: var(--color-neutral-48); --color-border-quaternary: var(--color-neutral-24); --color-border-brand-ow: var(--color-transparent-brand-ow-64); --color-border-brand-el: var(--color-transparent-el-2-56); --color-border-note: var(--color-transparent-dark-32); --color-border-critical: var(--color-transparent-critical-64); --color-border-warning: var(--color-transparent-warning-64); --color-border-error: var(--color-functional-critical-bright); --color-border-success: var(--color-transparent-success-64); --color-border-info: var(--color-transparent-info-64); --color-border-on-surface: var(--color-transparent-dark-20); --space-0: 0px; --space-50: 2px; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 20px; --space-600: 24px; --space-800: 32px; --space-1000: 40px; --space-1200: 48px; --space-1400: 56px; --space-1600: 64px; --space-1800: 72px; --space-2000: 80px; --space-2200: 88px; --space-2400: 96px; --space-2600: 104px; --space-3200: 128px; --space-4000: 160px; --space-4800: 192px; --space-5600: 224px; --space-6400: 256px; } html[data-theme=light] { --color-background-general: var(--color-neutral-128); --color-background-cf: var(--color-neutral-128); --color-surface-primary: var(--color-neutral-120); --color-surface-secondary: var(--color-neutral-128); --color-surface-tertiary: var(--color-neutral-120); --color-surface-quaternary: var(--color-neutral-120); --color-surface-tooltip: var(--color-neutral-48); --color-surface-default-hover: var(--color-neutral-104); --color-surface-brand-ow-focus: var(--color-transparent-brand-ow-16); --color-surface-brand-ow-hover-on-focus: var(--color-transparent-brand-ow-20); --color-surface-brand-el-focus: var(--color-transparent-el-1-20); --color-surface-critical-hover: var(--color-transparent-critical-8); --color-surface-on-surface-primary: var(--color-transparent-light-4); --color-surface-on-surface-primary-hover: var(--color-transparent-light-8); --color-surface-on-surface-secondary: var(--color-transparent-light-8); --color-surface-on-surface-secondary-hover: var(--color-transparent-light-24); --color-surface-note-transparent: var(--color-transparent-light-4); --color-surface-warning-transparent: var(--color-transparent-warning-8); --color-surface-success-transparent: var(--color-transparent-success-8); --color-surface-info-transparent: var(--color-transparent-info-8); --color-surface-critical-transparent: var(--color-transparent-critical-8); --color-text-pure: var(--color-neutral-0); --color-text-primary: var(--color-neutral-16); --color-text-secondary: var(--color-neutral-32); --color-text-tertiary: var(--color-neutral-48); --color-text-invert: var(--color-neutral-128); --color-text-critical: var(--color-functional-critical-deep); --color-text-warning: var(--color-functional-warning-deep); --color-text-success: var(--color-functional-success-deep); --color-text-info: var(--color-functional-info-deep); --color-text-error: var(--color-functional-critiacl-deep); --color-icon-pure: var(--color-neutral-0); --color-icon-primary: var(--color-neutral-16); --color-icon-secondary: var(--color-neutral-48); --color-icon-critical: var(--color-functional-critical-deep); --color-icon-warning: var(--color-functional-warning-deep); --color-icon-success: var(--color-functional-success-deep); --color-icon-info: var(--color-functional-info-deep); --color-border-primary: var(--color-neutral-16); --color-border-secondary: var(--color-neutral-48); --color-border-tertiary: var(--color-neutral-80); --color-border-quaternary: var(--color-neutral-112); --color-border-note: var(--color-transparent-light-24); --color-border-on-surface: var(--color-transparent-light-12); --color-border-success: var(--color-transparent-success-56); --color-border-critical: var(--color-transparent-critical-56); --color-border-warning: var(--color-transparent-warning-56); --color-border-info: var(--color-transparent-info-56); --color-border-error: var(--color-functional-critical-deep); } :root { --menu-height: var(--space-2000); } header.page-header { font-family: var(--font-family-default); height: var(--menu-height); display: flex; align-items: center; padding: var(--space-500); background-color: var(--color-background-cf); margin: 0; } .header-logo { height: 100%; /* Fallback */ height: -webkit-fill-available; width: 130px; display: flex; align-items: center; text-decoration: none !important; color: var(--color-icon-pure); margin-right: 60px; } .header-logo > svg { width: inherit; height: inherit; } .nav-links, .menu-links { color: var(--color-text-tertiary); gap: var(--space-1200); font-size: var(--font-size-400); display: none; } @media (min-width: 640px) { .nav-links, .menu-links { display: flex; } } .nav-links li, .menu-links li { color: inherit; } @media (min-width: 640px) { .nav-links li:hover a, .menu-links li:hover a { color: var(--color-text-pure); border-bottom-color: var(--color-brand-cf); } } .nav-links a, .menu-links a { border-bottom: 2px solid transparent; transition: border-bottom-color ease-out 0.1s; padding-bottom: var(--space-200); } .download-button { color: var(--color-text-cta-ow); background: var(--color-surface-brand-cf); padding: var(--space-500); height: var(--space-1000); width: fit-content; line-height: var(--space-500); white-space: nowrap; font-size: var(--font-size-400); display: flex; align-items: center; gap: var(--space-200); animation: appear-from-left 0.2s ease-out; margin-top: auto; left: var(--space-500); bottom: var(--space-500); position: relative; } @media (min-width: 640px) { .download-button { position: static; margin-top: initial; margin-left: auto; } } .download-button:hover, .download-button:active { background: var(--color-surface-brand-cf-hover); } .download-button > svg { width: var(--space-500); height: var(--space-500); } .hamburger { width: var(--space-600); height: var(--space-600); color: var(--color-icon-pure); display: inline-block; margin-right: var(--space-300); cursor: pointer; } @media (min-width: 640px) { .hamburger { display: none; } } .hamburger svg path { transition: transform 0.2s; } .is-open .hamburger svg .hamburger-top { transform: rotate(45deg) translate(4px, -3px); } .is-open .hamburger svg .hamburger-middle { transform-origin: var(--space-300) var(--space-300); transform: scale(0); } .is-open .hamburger svg .hamburger-bottom { transform: rotate(-45deg) translate(-12px, -3px); } .menu-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a1a1a; display: none; flex-direction: column; z-index: 100; top: var(--space-2000); height: calc(100vh - var(--menu-height)); font-family: var(--font-family-default); color: var(--color-text-pure); opacity: 0; transition-duration: 0.2s; transition-property: display opacity; transition-behavior: allow-discrete; } .is-open .menu-nav { display: flex; opacity: 1; } .is-open .menu-nav li a { animation: appear-from-left 0.2s ease-out; } @media (min-width: 640px) { .menu-nav { display: inline-flex; opacity: 1; position: relative; height: inherit; top: 0; background: none; flex-direction: row; align-items: center; } } .menu-nav .download-app-button-text { font-size: var(--font-size-400); font-weight: var(--font-weight-medium); letter-spacing: 0; } @media (min-width: 640px) { .menu-nav .download-app-button-text { display: none; } } @media (min-width: 1024px) { .menu-nav .download-app-button-text { display: block; } } .divider { height: 1px; width: 100%; background-color: hsla(0, 0%, 100%, 0.16); width: calc(100vw - 28px); margin: var(--space-400) auto 4px auto; } @media (min-width: 640px) { .divider { display: none; } } .menu-links { color: var(--color-text-primary); gap: var(--space-400); padding-top: 10px; flex-direction: column; padding-right: 0; margin-left: 0; display: flex; flex-direction: column; } @media (min-width: 640px) { .menu-links { flex-direction: row; height: inherit; align-items: center; } } .menu-links li { padding: 10px var(--space-600); } .menu-links li a { display: flex; align-items: center; gap: var(--space-200); } .menu-links li svg { height: var(--space-600); width: var(--space-600); } .menu-links.more-options { gap: var(--space-200); } @media (min-width: 640px) { .menu-links.more-options { display: none; } } :root { --avatar-size: var(--space-1600); --hero-height: var(--space-1600); } @media (min-width: 768px) { :root { --avatar-size: 160px; --hero-height: 176px; } } .hero { position: relative; } .hero picture { height: var(--hero-height); display: block; width: 100%; overflow: hidden; margin: 0 auto; max-width: 2560px; position: relative; } .hero picture:after { content: ""; position: absolute; width: 100%; height: 100%; background-image: url(../assets/shared/hero-overlay.webp); bottom: 0; z-index: 1; left: 0; background-repeat: no-repeat; } .hero-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .avatar-wrap { position: relative; height: inherit; z-index: 2; } .hero-avatar { border-radius: 50%; width: var(--avatar-size); height: var(--avatar-size); border: 3px solid var(--color-neutral-8); overflow: hidden; } @media only screen and (min-width: 768px) { .hero-avatar { border-width: var(--space-200); } } .hero-section { z-index: 2; margin-top: calc(-1 * var(--avatar-size) / 2) !important; padding-top: 0 !important; margin-bottom: var(--space-1600); position: relative; } @media (min-width: 1200px) { .hero-section { margin-bottom: var(--space-2400); } } .hero-section .content-wrapper { justify-content: space-between; padding-bottom: 0; } @media only screen and (max-width: 1024px) { .hero-section .content-wrapper { flex-direction: column; align-items: flex-start; justify-content: flex-start; } } @media only screen and (max-width: 1024px) and (max-width: 600px) { .hero-section .content-wrapper { padding-top: 0; } } .hero-section .content-wrapper.list-specs { display: grid; grid-template-columns: 1fr; gap: var(--space-400); } @media only screen and (min-width: 1024px) { .hero-section .content-wrapper.list-specs { gap: var(--space-1000) var(--space-600); grid-template-columns: 1fr 1fr; } } .hero-section .content-wrapper.list-specs > .avatar-wrap { grid-column: 1/-1; } .hero-section .hero-intro { width: 100%; margin-right: var(--space-500); } @media only screen and (max-width: 1024px) { .hero-section .hero-intro { max-width: 100%; margin-right: 0; } } .hero-section .hero-intro-top .hero-line-item, .hero-section .hero-intro-top .hero-line-item a, .hero-section .hero-intro-top .hero-line-item span { color: var(--color-text-pure); font-family: var(--font-family-default); font-size: var(--font-size-400); font-style: normal; font-weight: var(--font-weight-regular); line-height: 150%; } @media only screen and (max-width: 600px) { .hero-section .hero-intro-top .hero-line-item, .hero-section .hero-intro-top .hero-line-item a, .hero-section .hero-intro-top .hero-line-item span { font-size: var(--font-size-350); letter-spacing: 0; } } .hero-section .hero-intro-bottom { margin-top: 41px; border-top: 1px solid #303030; } @media only screen and (max-width: 1024px) { .hero-section .hero-intro-bottom { margin-top: 38px; } } @media only screen and (max-width: 600px) { .hero-section .hero-intro-bottom { margin-top: 14px; } } .hero-section .hero-intro-bottom .hero-line { align-items: flex-start; } .hero-section .hero-intro-bottom .hero-line-text { color: var(--color-text-pure); font-family: var(--font-family-brand); font-size: var(--font-size-800); font-style: normal; font-weight: var(--font-weight-semi-bold); line-height: 26px; letter-spacing: 0; } .hero-section .hero-intro-bottom .hero-line-item .hero-line-title-xs { margin-bottom: 10px; } .hero-section .hero-intro-bottom .hero-line-item.grey2 { color: var(--color-text-secondary); font-family: var(--font-family-default); font-size: var(--font-size-400); font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--font-line-height-600); letter-spacing: 0px; text-wrap: balance; } @media only screen and (max-width: 600px) { .hero-section .hero-intro-bottom .hero-line-item.grey2 { font-size: var(--font-size-350); line-height: 142.857%; letter-spacing: 0; } } .hero-section .hero-intro-bottom .hero-line:nth-of-type(2) { align-items: flex-start; } @media only screen and (max-width: 600px) { .hero-section .hero-intro-bottom .hero-line:nth-of-type(2) { display: flex; flex-direction: column; align-items: flex-start; } } .hero-section .hero-intro-bottom .hero-line:nth-of-type(2) .hero-line-item:first-of-type { margin-right: var(--space-1200); } .hero-section .hero-intro-bottom .hero-line:nth-of-type(2) .hero-line-item:nth-of-type(2) { align-items: center; } @media only screen and (max-width: 600px) { .hero-section .hero-intro-bottom .hero-line:nth-of-type(2) .hero-line-item:nth-of-type(2) { align-items: flex-start; margin-top: var(--space-400); } } .hero-section .hero-intro-bottom .hero-line-item { display: flex; flex-direction: column; } .hero-section .hero-intro-bottom .hero-line { padding-top: 21px; padding-bottom: 9px; } @media only screen and (max-width: 1024px) { .hero-section .hero-intro-bottom .hero-line { padding-top: var(--space-400); padding-bottom: var(--space-100); padding-top: var(--space-600); padding-bottom: var(--space-100); max-width: 576px; } } @media only screen and (max-width: 600px) { .hero-section .hero-intro-bottom .hero-line { padding-top: var(--space-400); padding-bottom: var(--space-100); } } .hero-section .hero-intro-title { display: flex; width: 100%; color: #fff; font-family: "Montserrat", sans-serif; font-size: 40px; font-style: normal; font-weight: var(--font-weight-bold); line-height: var(--font-line-height-1300); letter-spacing: 0px; } @media only screen and (max-width: 600px) { .hero-section .hero-intro-title { font-size: var(--font-size-600); line-height: 133.333%; } } .hero-section .hero-intro-title:first-of-type { align-items: center; } .hero-section .hero-intro-title:nth-of-type(2) { margin-top: -3px; } .hero-section .hero-line-title-xs { color: var(--color-text-pure); font-family: var(--font-family-default); font-size: var(--font-size-350); font-style: normal; font-weight: var(--font-weight-regular); line-height: 150%; text-transform: uppercase; white-space: nowrap; } .hero-section .hero-line { display: flex; align-items: center; } .hero-section .hero-line-item { display: flex; } .hero-section .hero-line-item.grey { color: var(--color-text-primary); } .hero-section .hero-line-item a { text-decoration-line: underline; color: var(--color-text-pure); } .hero-section .hero-line-item a:hover { color: var(--color-text-secondary); } .hero-section .mods { display: flex; align-items: center; flex-wrap: wrap; margin-top: 5px; gap: var(--space-200); } @media only screen and (max-width: 1024px) { .hero-section .mods { margin-top: 6px; } } .hero-section span.mod { display: flex; align-items: center; position: relative; height: var(--space-500); padding: 1px 6px 2px 6px; border-radius: 2px; border: 1px solid #9F9F9F; color: var(--color-text-primary); font-family: var(--font-family-default); font-size: 13px; font-style: normal; font-weight: var(--font-weight-regular); line-height: 140%; } .hero-section .checked-icon { position: relative; display: flex; align-items: center; width: var(--space-600); height: var(--space-600); margin: 5px 13px 0; } .mods-section { z-index: 3; position: relative; } .mods-section .content-wrapper { padding: 0 17px var(--space-1600); } @media only screen and (max-width: 1024px) { .mods-section .content-wrapper { padding-inline: var(--space-500); } } .mods-section .content-wrapper .content { position: relative; } .mods-section img { display: block; max-width: 100%; } .mods-section a svg, .mods-section button svg { pointer-events: none; } @media (max-width: 600px) { body:not(.show-all) ul.mods-list li:nth-child(n+6) { display: none; } } .mods-list { display: flex; flex-wrap: wrap; grid-gap: var(--space-600); gap: var(--space-600); margin: 0 auto; justify-content: center; } .mods-list li { display: list-item; } @media only screen and (min-width: 600px) { .mods-list { display: grid; justify-content: center; grid-template-columns: repeat(auto-fit, 184px); grid-gap: var(--space-600); gap: var(--space-600); margin: 0; } } @media only screen and (max-width: 599px) { .details h3, .author { padding-left: 99px; } .project-tile.medium { overflow: hidden; } .art { order: 1; } .by-author-link *, .author-name * { color: var(--color-text-tertiary); font-size: var(--font-size-350); font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--font-line-height-550); } .tile-categories-list { display: none; } } .overlay-link.overlay-link { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: none; } .ellipsis, .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .by-author-link { grid-area: author; display: flex; min-width: 0; gap: 6px; align-items: center; } .author-name { display: inline-flex; align-items: center; min-width: 0; } .by-author-link > a, .by-author-link > span { display: flex; min-width: 0; gap: var(--space-100); text-decoration: none; align-items: center; } .project-tile .details .class-tag { display: block; overflow: hidden; } a.class-tag, span.class-tag { display: inline-block; border: 1px solid #606060; padding: 2px 6px; border-radius: 2px; margin-right: var(--space-300); text-decoration: none; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 0; color: var(--color-text-pure); font-size: 13px; font-style: normal; font-weight: var(--font-weight-regular); } ul.details-list > li.detail-updated:before { content: "Latest release"; } ul.details-list > li:after { content: ""; margin-top: var(--space-100); width: 0; height: 0; border-color: transparent transparent #333; border-style: solid; border-width: 0 6px 6px; transform: translate(-50%, -4px); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)); } a.btn-secondary, button.btn-secondary { text-decoration: none; color: #e5e5e5; background-color: #313131; font-size: var(--font-size-400); display: inline-flex; gap: var(--space-200); align-items: center; } a.btn-primary, a.btn-secondary, button.btn-primary, button.btn-secondary { padding: var(--space-200) var(--space-400); height: 36px; line-height: var(--font-line-height-500); white-space: nowrap; font-size: var(--font-size-400); } a.btn-secondary svg, button.btn-secondary svg { height: var(--space-500); width: var(--space-500); } a.btn-secondary svg:first-child, button.btn-secondary svg:first-child { margin-left: calc(-1 * var(--space-100)); } .split-button { width: -moz-fit-content; width: fit-content; display: flex; justify-content: space-between; position: relative; min-width: 0; height: 36px; flex-shrink: 0; font-size: var(--font-size-400); gap: var(--space-200); } .split-button a { text-decoration: none; } .split-button .btn-cta, .split-button .btn-more-options { height: 36px; display: flex; align-items: center; justify-content: center; padding: var(--space-200) var(--space-400) var(--space-200) var(--space-300); font-size: var(--font-size-400); gap: var(--space-200); position: relative; } .split-button svg { width: var(--space-600); height: var(--space-600); } .split-button svg.smaller-icon { width: var(--space-500); height: var(--space-500); } @media only screen and (max-width: 600px) { .mods-list { margin-bottom: var(--space-600); } } @media only screen and (max-width: 600px) and (max-width: 600px) { .mods-list.is-open .project-tile.medium:nth-of-type(n+6) { display: flex; opacity: 1; visibility: visible; } } .mods-section button.btn-border { display: none; } @media only screen and (max-width: 600px) { .mods-section button.btn-border { display: flex; } } li.mod { width: 100%; height: 162px; position: relative; background-color: var(--color-surface-secondary); padding: 20px; text-align: left; } @media (min-width: 600px) { li.mod { width: 184px; height: 280px; padding: var(--space-500); } } li.mod .wrap { width: inherit; height: inherit; background-color: var(--color-surface-secondary); z-index: 2; transition: width 0.15s ease-out, height 0.15s ease-out, top 0.15s ease-out, left 0.15s ease-out; position: absolute; left: 0; top: 0; padding: inherit; display: flex; flex-direction: column; max-width: 100%; } li.mod .project-avatar-wrap { position: relative; overflow: hidden; height: 88px; width: 88px; } @media (min-width: 600px) { li.mod .project-avatar-wrap { overflow: initial; width: 144px; height: 144px; } } li.mod .project-avatar-wrap .mod-thumb { position: absolute; width: inherit; height: inherit; max-inline-size: initial; max-block-size: initial; } @media (min-width: 600px) { li.mod:hover .wrap { left: -70px; top: -86.5px; width: 284px; height: 423px; box-shadow: 0 2px 15px #000; position: relative; padding: var(--space-500); z-index: 3; max-width: none; transition: width 0.25s ease-out, height 0.25s ease-out, top 0.25s ease-out, left 0.25s ease-out; } li.mod:hover .wrap .mod-details { transform: translateY(38px); } li.mod:hover .wrap .mod-content { padding-bottom: 20px; } li.mod:hover .wrap .project-avatar-wrap { height: 136px; overflow: hidden; } li.mod:hover .wrap .mod-link { bottom: 60px; } li.mod:hover .wrap .desc { display: -webkit-box; opacity: 1; transition: opacity 0.25s ease-out 0.1s; } li.mod:hover .wrap .mod-details { color: #b2b2b2; font-size: var(--font-size-350); max-width: 100%; overflow: hidden; transform: translateY(2px); } li.mod:hover .wrap .mod-actions { display: flex; justify-content: space-between; margin-top: auto; transition: opacity 0.3s ease-out, display 0.3s ease-out allow-discrete; } li.mod:hover .wrap .stats { flex-wrap: wrap; } li.mod:hover .wrap .project-avatar-wrap { height: 136px; width: 244px; } li.mod:hover .wrap .project-avatar-wrap .mod-thumb { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: auto; max-inline-size: initial; max-block-size: initial; } } li.mod .mod-link { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: transparent; } li.mod .mod-content *, li.mod .mod-actions * { font-family: var(--font-family-default); } li.mod .mod-content { display: flex; column-gap: var(--space-200); row-gap: 18px; overflow: hidden; flex-direction: column; flex-grow: 1; padding-bottom: 0; position: relative; } @media (max-width: 600px) { li.mod .mod-content { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto 23px; column-gap: 1rem; row-gap: 0.5rem; } } li.mod .mod-thumb { width: 88px; height: 88px; } @media (min-width: 600px) { li.mod .mod-thumb { width: 100%; height: auto; max-width: 148px; margin: 0 auto; } } li.mod .mod-details { color: #b2b2b2; font-size: var(--font-size-350); max-width: 100%; overflow: hidden; } @media (min-width: 600px) { li.mod .mod-details { position: absolute; top: 154px; } } li.mod .mod-details .mod-title { max-width: 100%; font-size: var(--font-size-400); color: var(--color-text-pure); } li.mod .mod-details > a { margin-bottom: 2px; } @media (min-width: 600px) { li.mod .mod-details > a { margin-bottom: 8px; } } li.mod .mod-details .author { padding: 0; margin-bottom: 4px; } @media (min-width: 600px) { li.mod .mod-details .author { margin-bottom: 16px; } } li.mod .mod-details .desc { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity 0s; line-height: var(--font-line-height-500); } @media (max-width: 600px) { li.mod .mod-details .desc { display: inline-block; opacity: 1; -webkit-line-clamp: 2; display: -webkit-box; } } li.mod .stats { height: auto; display: flex; align-items: center; gap: var(--space-300) var(--space-600); margin-top: auto; } li.mod .stats .detail-updated { opacity: 0; display: none; } li.mod .stats .detail-downloads, li.mod .stats .detail-updated { color: #B2B2B2; font-size: var(--font-size-350); font-style: normal; font-weight: var(--font-weight-regular); background-repeat: no-repeat; white-space: nowrap; padding-left: 26px; padding-top: 2px; background-size: 20px; background-position: left; } li.mod .stats .detail-downloads { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkRvd25sb2FkIj4KPHBhdGggaWQ9IlVuaW9uIiBkPSJNNCAxNlYxOEwxNiAxOFYxNkw0IDE2WiIgZmlsbD0iI0RGREZERiIvPgo8cGF0aCBpZD0iVW5pb25fMiIgZD0iTTExIDNWMTAuOTM1MkwxMy44Mjk3IDguNTk4NTRMMTUgMTBMMTAgMTRMNSAxMEw2LjE3MDI5IDguNTk4NTRMOSAxMC45MzUyVjNIMTFaIiBmaWxsPSIjREZERkRGIi8+CjwvZz4KPC9zdmc+Cg=="); margin-left: 0; padding-right: 0; } li.mod .stats .detail-updated { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM9 7C9 6.44772 9.44772 6 10 6C10.5523 6 11 6.44772 11 7V10H13C13.5523 10 14 10.4477 14 11C14 11.5523 13.5523 12 13 12H9V7Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } li.mod .mod-actions { display: none; gap: var(--space-300); } li.mod .mod-actions .view-btn, li.mod .mod-actions .install-btn { flex-grow: 1; display: flex; justify-content: center; } li.mod .mod-actions .view-btn:hover { background-color: #444; } li.mod .mod-actions .install-btn a.btn-cta { width: 100%; background-color: var(--color-surface-brand-cf); color: var(--color-text-cta-ow); } li.mod .mod-actions .install-btn:hover a.btn-cta { background-color: var(--color-surface-brand-cf-hover); } .mod .mod-actions { opacity: 0; transition: opacity 0.5s ease-out; } .mod.hovered .mod-actions { opacity: 1; } @media only screen and (max-width: 1240px) { .about-section .about-picture::before { top: 0%; left: 47%; transform: rotate(90deg) translateX(-50%); } } @keyframes scroll-bg { 0% { background-position-x: 0; } 100% { background-position-x: -4230px; } } @keyframes scroll-bg-cf { 0% { background-position-x: 0; } 100% { background-position-x: -1149px; } } .horizontal-seporator, .idea-portal-indicator { color: var(--color-text-tertiary); font-family: var(--font-family-brand); font-size: var(--font-size-400); font-weight: var(--font-weight-regular); } .horizontal-seporator { margin-inline: 6px; } section.mods-section { margin-top: 64px; padding: 48px 0 64px; }