@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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; } body { outline: none; background: #000; margin: 0; padding: 0; } a { cursor: pointer; } * { box-sizing: border-box; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; color: #fff; } main { position: relative; max-width: 100%; overflow: hidden; } .download-buttons-mob { display: none; } .heading-first { color: #fff; font-size: 44px; font-weight: 700; line-height: 118.182%; letter-spacing: 0px; } .heading-second { text-align: center; font-size: 44px; font-weight: 700; line-height: 127.273%; } .heading-third { color: #FFF; font-size: 32px; font-weight: 700; line-height: 125%; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-style: normal; } .download-btn { display: flex; justify-content: center; align-items: center; position: relative; height: 48px; margin: 0 auto 7px; padding: 16px 32px; white-space: nowrap; background: #EB622B; color: #fff; text-align: center; font-size: 16px; font-weight: 500; line-height: 110%; text-transform: uppercase; transition: all 0.2s ease-in-out; letter-spacing: 1.2px; } .download-btn:hover { background: #F18536; } .download-btn .mobile { display: none; } .download-buttons { display: flex; justify-content: center; margin: 36px auto 0; } .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; } .item-text { color: #B2B2B2; font-size: 15px; font-weight: 500; line-height: 150%; text-align: center; } .bottom { position: relative; width: 100%; overflow: hidden; } .to-top { display: flex; flex-direction: column; align-items: center; margin: 9px auto 0; color: #B2B2B2; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .to-top svg { width: 24px; height: 24px; 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; } @keyframes OpacityLinkAppear { 0% { opacity: 0; } 50% { opacity: 0; } to { opacity: 1; } } header { position: fixed; top: 0; left: 0; width: 100%; padding: 0; opacity: 1; z-index: 27; } header::before { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 180%; content: ""; mix-blend-mode: multiply; background: linear-gradient(180deg, #131313 0%, rgba(19, 19, 19, 0) 100%); background-size: 100%; } header.fixed.mob { display: none; } header .download-buttons { display: flex; justify-content: center; flex-direction: row; } header .download-buttons.desktop { display: flex; flex-grow: 1; justify-content: flex-end; flex-direction: row; } header .content-wrapper { display: flex; align-items: center; justify-content: space-between; position: relative; width: 100%; max-width: 100%; margin: 0 auto; padding: 15px 22px 16px 15px; z-index: 1; } header .hero-logo.mob { max-width: unset; width: auto; height: 26px; margin: 0 0 0 12px; display: flex; justify-content: flex-start; align-items: center; } header .hero-logo.desktop { display: flex; align-items: center; max-width: unset; width: auto; height: 34px; } header .download-buttons { margin: 0; } .header-link { margin-left: 1px; padding: 7px 23px; color: #DFDFDF; text-align: center; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 500; line-height: 140%; border: 1px solid transparent; background: transparent; transition: 0.3s ease-in-out; } .header-link:hover { color: #F18536; } .header-link.border { margin-left: 40px; padding: 7px 29px; border: 1px solid #DFDFDF; color: #DFDFDF; text-align: center; font-weight: 600; line-height: 24px; opacity: 0; transition: 0.2s ease; } .header-link.border:hover { color: #fff; background: #F18536; border: 1px solid #F18536; } .header-link.border.mac, .header-link.border.pc { animation: OpacityLinkAppear 1s linear forwards; animation-delay: 0.3s; } .header-link.border.mac.hidden, .header-link.border.pc.hidden { display: none; } .header-link.orange { color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: #EB622B; text-align: center; font-weight: 500; line-height: 24px; max-width: 284px; margin: 0 auto 120px; padding: 11px 30px; white-space: nowrap; } .header-link.orange:hover { background: #F18536; } .header-buttons { flex-direction: row; } .site-header { width: 100%; position: fixed; top: 0; z-index: 100; transition: 0.3s; } .site-header .download-btn { padding: 16px 32px; } .site-header.black { background-color: #000; } .site-header .header-inner .logo { display: flex; align-items: center; justify-content: center; -moz-column-gap: 24px; column-gap: 24px; row-gap: 2px; } .site-header .header-inner { display: flex; max-width: 1720px; margin: 0 auto; padding: 11px 20px; position: relative; z-index: 10; transition: 0.3s; min-height: 80px; align-items: center; justify-content: flex-start; } .site-header .header-inner nav { margin-left: auto; display: flex; align-items: center; } .submenu-icon { display: none; } .site-header .header-inner nav ul li { margin: 0 12px; } .site-header .header-inner nav ul li.mob-only.decor a { font-size: 16px; font-weight: 600; line-height: 24px; } .site-header .header-inner nav ul.header-menu { display: flex; } .site-header .hamburger-menu-button { display: none; margin-left: 8px; } .header-link-container { display: flex; align-items: flex-end; flex-grow: 1; } .hamburger-menu-button { z-index: 1; display: block; background: transparent; width: 24px; height: 24px; outline: none; border: none; cursor: pointer; padding: 0; } .hamburger-menu-button > div { position: relative; width: 24px; height: 20px; left: 2px; right: 0; margin: 0 auto; transition: 0.4s ease-in-out; } .hamburger-menu-button > div span { background: rgb(255, 255, 255); display: block; width: 100%; max-width: 20px; height: 2px; position: absolute; transition: 0.4s ease-in-out; border-radius: 0; } .hamburger-menu-button > div span:first-child { top: 3px; left: 0; } .hamburger-menu-button > div span:nth-child(2) { top: 9px; left: 0; } .hamburger-menu-button > div span:nth-child(3) { top: 15px; left: 0; } .hamburger-menu-button.close > div span { background: #DFDFDF; } .hamburger-menu-button.close > div span:first-child { transform: translateY(4px) rotate(45deg); } .hamburger-menu-button.close > div span:nth-child(2) { transform: scaleX(0); } .hamburger-menu-button.close > div span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .site-header .header-inner nav .header-menu .header-menu-inner { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; position: relative; } .site-header .header-inner nav .header-menu svg { width: 24px; height: 24px; margin-right: 15px; transition: all 0.15s; fill: #D6D6D6; position: absolute; right: 18px; top: 12px; bottom: 0; margin: 0 auto; } .header-link.mob { position: relative; display: none; } .header-link.mob::before { position: absolute; top: 50%; left: 0; width: 4px; height: 24px; transform: translateY(-50%); content: ""; background-color: #EB622B; opacity: 0; height: 0; transition: 0.2s ease-in-out; } .header-link.mob.active::before { opacity: 1; height: 24px; } .header-link.mob :hover { color: #D6D6D6; } .opening-section { max-width: 100%; background-position: top; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; position: relative; padding: 0; background-color: #000; background-size: cover; z-index: 2; } .opening-section .small-text { display: none; margin: 23px 0 10px; font-family: Lato, sans-serif; font-size: 16px; font-weight: 500; line-height: 130%; color: rgba(255, 255, 255, 0.5); text-align: center; } .opening-section * { box-sizing: border-box; } .opening-section .intro-text-container { max-width: 1680px; margin: 0 auto; position: relative; z-index: 2; padding-top: 15px; padding: 15px 20px; } .opening-section .intro-text-container .opening-sims-logo { width: 390px; height: auto; } .opening-section .intro-text-container .heading-first { margin-top: 8px; } .opening-section .intro-text-container p.txt { font-family: "Montserrat", sans-serif; line-height: 145%; color: #DFDFDF; max-width: 577px; margin: 15px auto 25px; align-self: stretch; font-size: 18px; font-weight: 500; line-height: 155.556%; letter-spacing: 0px; } .opening-section .intro-text-container p.txt.mob { display: none; } .opening-section .editor-icon { display: flex; position: relative; width: 160px; height: 160px; margin: -84px auto 0; border-radius: 50%; z-index: 1; cursor: pointer; pointer-events: visible; } .opening-section .editor-icon-container { position: relative; height: 160px; margin: 0 auto; border-radius: 50%; } .opening-section .editor-icon-container .editor-icon-decor { width: 23px; position: absolute; top: 24px; left: 24px; } .opening-section .editor-icon-title { color: #DFDFDF; font-family: Lato, sans-serif; font-size: 18px; font-style: normal; font-weight: 700; line-height: 155.556%; letter-spacing: 0; } .opening-section .editor-icon-text { color: #BFBFBF; font-family: Lato, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0; } .opening-section .editor-icon-text-triangle { position: absolute; top: 48.5%; left: -10px; transform: translateY(-50%); min-width: 10px; min-height: 4px; } .opening-section .editor-icon-text-container { position: absolute; top: 9px; left: 58.1%; max-width: 447px; padding: 21px 25px 24px 62px; transition: 0.4s ease-in-out; opacity: 0; border: 1px solid #303030; background: #101010; } .opening-section .editor-icon-text-container.visible { opacity: 1; transition: 0.4s ease-in-out; } .opening-section .intro-text-content { display: flex; flex-direction: column; align-items: center; text-align: center; } .opening-section .dude-img { position: absolute; right: unset; top: 0; height: 100%; transition: all 0.1s ease; display: flex; align-items: flex-end; } .opening-section .dude-img.desktop { display: flex; max-width: -moz-max-content; max-width: max-content; overflow: hidden; right: 0; height: 90%; width: auto; top: unset; bottom: 0; } .opening-section .dude-img.mob { display: none; } .opening-section .dude-img img { position: relative; z-index: 1; } .opening-section .shadow-bg { position: absolute; width: 100%; right: 0; bottom: -2px; z-index: 1; overflow: hidden; max-width: 100%; } .opening-section .shadow-bg img { display: flex; width: 100%; } .txt.desktop { display: none; } .txt.mob { display: flex; } .txt-decorated { display: block; margin-top: 34px; color: #DFDFDF; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 171.429%; letter-spacing: 1.2px; text-transform: uppercase; } .opening-section .download-buttons { display: flex; justify-content: flex-start; margin: 0; } .opening-section .download-buttons div:not(:first-child) { position: relative; margin-left: 22px; } .opening-section .download-buttons .desktop { display: flex; } .opening-section .download-buttons .download-btn { margin: 0; } .opening-line-bg { width: 100%; } .opening-line-bg.mob { display: none; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } .features-section { position: relative; padding: 0; z-index: 2; } .features-section .content-wrapper { display: flex; flex-direction: column; position: relative; max-width: 1640px; width: 100%; padding: 112px 20px 68px; margin: 0 auto; } .features-section .swiper { position: relative; } .features-section .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: center; grid-gap: unset; width: 100%; max-width: 1640px; } .features-section .carousel-item-img-desktop { display: flex; } .features-section .carousel-item-img-mob { display: none; } .features-section .animated-img { position: absolute; width: 100%; top: 0; left: 0; z-index: 1; } .features-section .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: flex-start; } .features-section .swiper-slide img { -o-object-fit: cover; object-fit: cover; } .features-section .carousel-item { display: flex; position: relative; overflow: hidden; min-height: 663px; max-width: 449px; width: auto; margin: 0 12px 24px; padding: 0; transition: 0.2s ease-in-out; height: auto; } .features-section .carousel-item-text-small { display: flex; align-items: center; margin: 4px auto 13px; text-align: center; font-size: 14px; font-weight: 500; line-height: 171.429%; letter-spacing: 2.4px; color: #9F9F9F; letter-spacing: 0px; } .features-section .carousel-item-img { position: relative; overflow: hidden; } .features-section .carousel-item-img::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("./../images/shadow-carousel.webp") no-repeat 0% 100%; background-size: 100%; z-index: 1; content: ""; } .features-section .carousel-item-img img { transform: translateY(0px); transition: 0.6s ease-in-out; height: 100%; } .features-section .carousel-item-block { display: flex; flex-direction: column; position: relative; flex-grow: 1; width: 100%; height: 100%; justify-content: stretch; overflow: hidden; } .features-section .carousel-item-text { display: flex; flex-direction: column; align-items: center; padding: 0 27px; justify-content: space-between; transform: translateY(0px); } .features-section .carousel-item-text-wrapper { display: flex; align-items: flex-start; justify-content: center; width: 100%; flex-grow: 1; } .features-section .carousel-item-text-top { display: flex; flex-direction: column; align-items: flex-start; width: 100%; flex-grow: 1; } .features-section .carousel-item-text-bottom { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; padding-bottom: 0; } .features-section .carousel-item-title { display: flex; align-items: flex-end; margin: 0 auto; padding: 28px 24px 0; color: #fff; min-height: 83.68px; text-align: center; font-size: 24px; font-weight: 700; line-height: 116.667%; letter-spacing: 0px; } .features-section .carousel-item-description { display: inline-block; min-height: 84px; max-width: 349px; margin: 0 auto; padding-bottom: 21px; color: #B2B2B2; text-align: center; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0px; } .features-section .carousel-item .decorated-text { display: flex; justify-content: center; align-items: center; width: auto; height: 23px; margin-bottom: 21px; padding: 1px 14px; font-weight: 400 !important; font-size: 14px !important; line-height: 100%; text-align: center; color: #fff; border: 0.661441px solid #999; border-radius: 4px; white-space: nowrap; } .features-section .carousel-item .decorated-text.mob { display: none; } .features-section .carousel-item .divider { margin: 0 8px; } .features-section .carousel-item .download-icon { margin-right: 4px; } .features-section .features-row { background: #000; } .features-section .features-row .carousel-item { background: #101010; } .features-section .features-row .carousel-item-text-small { color: #9F9F9F; } .btn-view, .btn-action { display: flex !important; justify-content: center; align-items: center; width: 160px; height: 48px; padding: 10px 15px; color: #DFDFDF; font-family: "Montserrat", sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 171.429%; text-align: center; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: all 0.2s ease-in-out; cursor: pointer; } .btn-view svg, .btn-action svg { min-width: 24px; height: 24px; margin-right: 4px; } .btn-view span, .btn-action span { position: relative; font-family: "Montserrat", sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 171.429%; text-align: center; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; text-decoration: none; } .btn-view:hover, .btn-action:hover { color: #fff; } .btn-action { background: #EB622B; } .btn-action.mob { display: none !important; color: #fff; } .btn-action svg { margin-right: 8px; } .btn-action:hover { background: #F18536; color: #fff; } .swiper-button-next, .swiper-button-prev { z-index: 2; padding: 0 !important; min-width: 60px !important; height: 60px !important; left: unset; top: unset; bottom: 0; right: unset; position: relative; transform: translateY(-5px); display: none; } .swiper-nav { display: flex; justify-content: center; align-items: center; position: relative; height: 50px; margin: 0 auto; max-width: 425px; position: relative; z-index: 5; } .swiper-button-next::after, .swiper-button-prev::after { display: none !important; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next, .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: none !important; } .swiper-button-next svg, .swiper-button-prev svg { width: 60px; } .swiper-button-next { position: absolute; top: 49.5%; right: -10px !important; transition: 0.3s ease-in-out; } .swiper-button-next svg { transition: 0.3s ease-in-out; transform: translateX(0); } .swiper-button-next:hover svg { transform: translateX(2px); } .swiper-button-prev { position: absolute; top: 49.5%; left: -10px !important; transition: 0.3s ease-in-out; } .swiper-button-prev svg { transition: 0.3s ease-in-out; transform: translateX(0px); } .swiper-button-prev:hover svg { transform: translateX(-2px); } .swiper-pagination { position: relative; margin: 31px auto 0; } .swiper-pagination-bullet { background: #9F9F9F; width: 12px; height: 12px; gap: 0px; border-radius: 50%; border: 2px solid #000; opacity: 1; } .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 12px; height: 12px; gap: 0px; border-radius: 50%; border: 2px solid #fff; background: transparent; } .btn-view { border: 1px solid #DFDFDF; background: transparent; margin-right: 12px; } .btn-view:hover { background: #F18536; border: 1px solid #F18536; } .btn-action { background: #EB622B; } .btn-action:hover { background: #F18536; } .carousel-block-general { position: relative; opacity: 0; animation: OpacityLinkAppear 1s linear forwards; animation-delay: 0.4s; } .carousel-item-block.mob { display: none; } .intro-section { display: flex; flex-direction: column; align-items: center; max-width: 100%; overflow: hidden; background: #202020 url("./../images/ModsChoiceBG1.webp") 50% 0%; background-repeat: no-repeat; background-size: 100%; position: relative; } .intro-section .heading-four { margin: 13px 0 0; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: 0em; text-align: left; } .intro-section .heading-four.orange { color: #EB622B; } .intro-section .content-right.mob { display: flex; border-radius: 20px; flex-direction: column; width: auto; max-width: 651px; padding: 48px 28px 46px; border-radius: 20px; background: #000; margin: -19px 20px 66px; } .intro-section .swiper { position: relative; } .intro-section .swiper-wrapper { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 10px; } .intro-section .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: flex-start; } .intro-section .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .intro-section .carousel-item { display: flex; position: relative; overflow: hidden; max-height: 560px; max-width: 544px; width: auto; margin: 29px 0; padding: 20px; transition: 0.2s ease-in-out; height: auto; background: #0D0D0D; } .intro-section .carousel-item-text-small { display: block; margin: 0px auto 7px; text-align: center; font-size: 12px; font-weight: 500; line-height: 160%; letter-spacing: 2.4px; text-transform: uppercase; color: #9F9F9F; } .intro-section .carousel-item-img img { transform: translateY(0px); transition: 0.6s ease-in-out; } .intro-section .carousel-item-block { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 100%; flex-grow: 1; height: 100%; justify-content: stretch; } .intro-section .carousel-item-text { display: flex; flex-direction: column; align-items: center; padding: 0; justify-content: space-between; transform: translateY(0px); flex-grow: 1; } .intro-section .carousel-item-text-wrapper { display: flex; align-items: flex-start; justify-content: center; width: 100%; flex-grow: 1; } .intro-section .carousel-item-text-top { display: flex; flex-direction: column; align-items: flex-start; width: 100%; flex-grow: 1; } .intro-section .carousel-item-text-bottom { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; padding-bottom: 0; } .intro-section .carousel-item-title { display: inline-block; margin: 0 auto; padding: 18px 0 2px; color: #fff; text-align: center; font-size: 22px; font-weight: 500; line-height: 142.857%; } .intro-section .carousel-item-description { display: inline-block; max-width: 356px; min-height: 109px; margin: 0 auto; padding-bottom: 26px; color: #DFDFDF; text-align: center; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; line-height: 150%; } .intro-section .carousel-item .decorated-text { display: flex; justify-content: center; align-items: center; width: auto; height: 23px; margin-bottom: 21px; padding: 1px 14px; font-weight: 400 !important; font-size: 14px !important; line-height: 100%; text-align: center; color: #fff; border: 0.661441px solid #999; border-radius: 4px; white-space: nowrap; } .intro-section .carousel-item .decorated-text.mob { display: none; } .intro-hero { width: 100%; } .intro-hero .heading-second { max-width: 700px; margin: 0px 0 21px; display: inline-block; text-align: left; } .intro-hero .content-wrapper { display: flex; flex-direction: column; align-items: flex-start; position: relative; max-width: 1720px; width: 100%; padding: 66px 20px 12px; margin: 0 auto; } .intro-hero .content-left p { color: #DFDFDF; font-size: 18px; font-weight: 500; line-height: 155.556%; text-align: center; margin: 17px 0 0; } .intro-hero .content-right { display: none; flex-direction: column; width: 100%; max-width: 686px; padding: 24px 24px 31px; border-radius: 20px; background: #000; } .intro-hero .content-right p { color: #fff; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: center; } .intro-hero-img { min-width: 160px; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; margin-top: 20px; margin-right: 33px; } .intro-hero-img img { width: 100%; height: 100%; } .intro-hero-text { max-width: 576px; padding-top: 0px; display: flex; flex-direction: column; justify-content: center; } .intro-hero-text p { margin-bottom: 30px; color: #fff; font-family: Lato, sans-serif; font-size: 18px; font-weight: 400; line-height: 160%; } .intro-hero-text p b { font-weight: 700; font-family: Lato, sans-serif; } .intro-hero-text p span { font-family: Lato, sans-serif; } .intro-hero-text p span.color { color: #EB622B; } .intro-details { width: 100%; } .intro-details .content-wrapper { display: flex; flex-direction: column; position: relative; align-items: center; max-width: 1704px; width: 100%; padding: 3px 0 153px; margin: 0 auto; } .intro-details .content-wrapper-inner { width: 100%; max-width: 100%; padding: 0 10px; } .intro-details .heading-third { padding: 0 20px; text-align: left; margin: 0; width: 100%; } .detail-downloads { margin-left: 10px; background-position: 100% 0%; position: relative; padding-right: 29px; color: #999; text-align: right; font-family: Lato, sans-serif; font-size: 12px; font-weight: 500; line-height: normal; text-transform: uppercase; white-space: nowrap; background-size: 24px; } .detail-downloads span { display: inline-block; position: relative; color: #999; font-family: Lato, sans-serif; font-size: 12px; font-weight: 500; line-height: normal; text-transform: uppercase; } .detail-downloads span::after { content: ""; position: absolute; top: -5px; right: -29px; width: 24px; height: 24px; background: url("./../images/download_update.svg") no-repeat 50% 50%; background-size: contain; } .detail-downloads::before, .detail-downloads::after { opacity: 0; position: absolute; left: 50%; top: 100%; transition: opacity 0.1s, transform 0.2s; } .detail-downloads::before { content: "Downloads"; margin-top: -5px; background-color: #333; color: #e5e5e5; font-weight: 400; padding: 4px 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); transform: translate(-50%, -4px); white-space: nowrap; transition: opacity 0.2s; pointer-events: none; z-index: 1; } .detail-downloads::after { content: ""; margin-top: -10px; width: 0; height: 0; transform: translateY(2px); 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)); } .detail-downloads:hover::after, .detail-downloads:hover::before { opacity: 1; transform: translate(-50%); } .swiper-intro { position: relative; } .swiper-intro .swiper { position: relative; } .swiper-intro .swiper-wrapper { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 15px; } .swiper-intro .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: flex-start; } .swiper-intro .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper-intro .carousel-item { display: flex; position: relative; overflow: hidden; max-height: 584px; max-width: 544px; width: auto; margin: 29px 0; padding: 20px; transition: 0.2s ease-in-out; height: auto; } .swiper-intro .carousel-item-text-small { display: block; margin: 0px auto 11px; text-align: center; font-size: 12px; font-weight: 500; line-height: 160%; letter-spacing: 2.4px; text-transform: uppercase; color: #9F9F9F; } .swiper-intro .carousel-item-img { position: relative; } .swiper-intro .carousel-item-img img { transform: translateY(0px); transition: 0.6s ease-in-out; } .swiper-intro .carousel-item-block { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 100%; flex-grow: 1; height: 100%; justify-content: stretch; } .swiper-intro .carousel-item-text { display: flex; flex-direction: column; align-items: center; padding: 0; justify-content: space-between; transform: translateY(0px); flex-grow: 1; } .swiper-intro .carousel-item-text-wrapper { display: flex; align-items: flex-start; justify-content: center; width: 100%; flex-grow: 1; } .swiper-intro .carousel-item-text-top { display: flex; flex-direction: column; align-items: flex-start; width: 100%; flex-grow: 1; } .swiper-intro .carousel-item-text-bottom { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; padding-bottom: 0; } .swiper-intro .carousel-item-title { display: inline-block; margin: 0 auto; padding: 21px 0 0; color: #fff; text-align: center; font-size: 22px; font-weight: 500; line-height: 143.455%; } .swiper-intro .carousel-item-description { display: inline-block; max-width: 363px; min-height: 95px; margin: 0 auto; padding-bottom: 15px; color: #B2B2B2; text-align: center; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0px; } .swiper-intro .carousel-item .decorated-text { display: flex; justify-content: center; align-items: center; width: auto; height: 23px; margin-bottom: 21px; padding: 1px 14px; font-weight: 400 !important; font-size: 14px !important; line-height: 100%; text-align: center; color: #fff; border: 0.661441px solid #999; border-radius: 4px; white-space: nowrap; } .swiper-intro .carousel-item .decorated-text.mob { display: none; } .swiper-intro .btn-view, .swiper-intro .btn-action { margin: 0; } .swiper-intro .btn-view { margin-right: 20px; } .intro-hero-img.mob { display: flex; margin-bottom: 48px; } .content-right.mob .intro-hero-img { display: none; } .carousel-section { display: flex; flex-direction: column; justify-content: center; position: relative; margin: 0 auto; max-width: 100%; overflow: hidden; min-width: 0; } .carousel-section * { box-sizing: border-box; } .carousel-section .content-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; max-width: 1801px; width: 100%; padding: 122px 60px 117px; margin: 0 auto; } .carousel-section .heading-third a { text-align: right; font-size: 20px; font-weight: 500; line-height: 150%; text-decoration-line: underline; } .carousel-section .heading-line { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 42px; } .carousel-section .heading-line a { text-align: right; font-size: 20px; font-weight: 500; line-height: 150%; text-decoration-line: underline; } .carousel-section .swiper-mods { display: flex; align-items: center; position: relative; max-width: 100%; min-width: 0; overflow: hidden; margin: 0 auto; justify-content: center; width: auto; max-width: 1486px !important; } .carousel-section .swiper-mods-wrapper { position: relative; max-width: 1686px; width: 100%; margin: 0 auto; } .carousel-section .swiper-slide { transition: 0.2s ease-in-out; } .carousel-section .swiper-slide a { position: relative; display: flex; } .carousel-section .swiper-slide a::before { content: ""; top: 0; left: 0; position: absolute; display: flex; width: 100%; height: 100%; background: rgba(255, 255, 255, 0); transition: 0.2s ease-in-out; } .carousel-section .swiper-slide a img { width: 100%; } .carousel-section .swiper-slide:hover a::before { background: rgba(255, 255, 255, 0.15); } .carousel-section .carousel-item-img img { transform: translateY(0px); transition: 0.6s ease-in-out; } .carousel-section .swiper-button-next, .carousel-section .swiper-button-prev { z-index: 2; padding: 0 !important; min-width: 60px !important; height: 60px !important; left: unset; top: unset; bottom: 0; right: unset; position: relative; transform: translateY(-5px); } .carousel-section .swiper-nav { display: flex; justify-content: center; align-items: center; position: relative; height: 50px; margin: 0 auto; max-width: 425px; position: relative; z-index: 5; } .carousel-section .swiper-button-next::after, .carousel-section .swiper-button-prev::after { display: none !important; } .carousel-section .swiper-button-prev, .carousel-section .swiper-container-rtl .swiper-button-next, .carousel-section .swiper-button-next, .carousel-section .swiper-container-rtl .swiper-button-prev { background-image: none !important; } .carousel-section .swiper-button-next svg, .carousel-section .swiper-button-prev svg { width: 60px; } .carousel-section .swiper-button-next { position: absolute; top: 50%; right: 0 !important; transition: 0.3s ease-in-out; } .carousel-section .swiper-button-next svg { transition: 0.3s ease-in-out; transform: translateX(0); } .carousel-section .swiper-button-next:hover svg { transform: translateX(2px); } .carousel-section .swiper-button-prev { position: absolute; top: 50%; left: 0 !important; transition: 0.3s ease-in-out; } .carousel-section .swiper-button-prev svg { transition: 0.3s ease-in-out; transform: translateX(0px); } .carousel-section .swiper-button-prev:hover svg { transform: translateX(-2px); } :root { --swiper-image-ratio: 33.3%; /* ratio 16:9 = 56.25% */ --swiper-width: 50%; --swiper-inactive-scale: .85; /* makes the other slide smaller */ /* responsive settings */ --swiper-mobile-width: 90%; --swiper-mobile-inactive-scale: .95; } .carousel-section.mob { display: none; } .subscribe-section { position: relative; background: #000 url("./../images/Subscribe-Visual-BG-MC.webp") no-repeat 50% 0%; background-size: cover; max-width: 100%; overflow: hidden; } .subscribe-section .subscribe-section-bg-bee { position: absolute; width: 314px; bottom: 89px; left: 50px; } .subscribe-section .subscribe-section-bg-flowers { position: absolute; height: 222px; left: 66%; bottom: 15px; } .subscribe-section .content-wrapper { position: relative; max-width: 827px; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 111px 20px 133px; } .subscribe-section .subscribe-img { width: 220px; margin-bottom: 69px; } .subscribe-section .subscribe-img { position: relative; width: 200px; } .subscribe-section .subscribe-img img:first-of-type { width: 200px; } .subscribe-section .subscribe-img img:last-of-type { position: absolute; top: 0; left: 0; } .subscribe-section .main-text { max-width: 480px; text-align: center; font-size: 18px; font-family: "Montserrat", sans-serif; font-weight: 500; line-height: 155.556%; margin: 13px auto 36px; letter-spacing: 0px; } .adblocker-container { display: none; visibility: hidden; position: absolute; top: 70%; max-width: 868px; margin: 48px 20px; border: 1px solid #202020; background: #101010; } .ad-blocker-block { display: flex; align-items: center; padding: 16px; color: #DFDFDF; font-family: Lato, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0px; } .ad-blocker-block .large-text { margin-right: 8px; color: #DFDFDF; font-family: Lato, sans-serif; font-size: 18px; font-style: normal; font-weight: 700; line-height: 155.556%; letter-spacing: 0px; } .ad-blocker-block .img-warning { width: 24px; height: 24px; margin-right: 16px; } .ad-blocker-block .close { display: block; width: 20px; height: 20px; margin-left: 59px; z-index: 1; cursor: pointer; } .mods-section li.mod .mod-details .mod-title { font-family: Lato, sans-serif; color: #fff; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } .mods-section .ellipsis { color: var(--600, #999); font-family: Lato, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .mods-section li.mod .mod-details .desc { overflow: hidden; color: var(--700, #B2B2B2); text-overflow: ellipsis; white-space: nowrap; /* Body/S/S */ font-family: var(--family-default, Lato); font-size: var(--size-14, 14px); font-style: normal; font-weight: var(--weight-regular, 400); line-height: var(--line-height-20, 20px); } .bottom-section { background-size: cover; position: relative; } .bottom-section .heading-third { width: 100%; max-width: 460px; } .bottom-section .heading-third br { display: none; } .bottom-section .content-wrapper { display: flex; justify-content: center; max-width: 1471px; margin: 0 auto; padding: 292px 20px 103px; position: relative; z-index: 2; } .bottom-section .content-wrapper-inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; max-width: 602px; margin: 0; text-align: left; } .bottom-section .bottom-characters { position: absolute; left: 2%; bottom: 0px; width: 999.35px; height: 740px; margin: 0; } .bottom-section .heading-second { text-align: left; } .bottom-section .download-btn { height: 62px; margin: 0 auto 5px; } .bottom-character-mob { display: none; } .download-buttons { display: flex; justify-content: flex-start; margin: 39px 0 0; flex-direction: column; } .download-btn.standalone { opacity: 0; z-index: -2; transition: 0.2s ease-in-out; } .download-btn.standalone.visible { opacity: 1; z-index: 1; } .btn-divider.hero, .btn-divider.bottom { display: flex; justify-content: center; align-items: center; position: relative; transition: 0.2s ease-in-out; height: 25px; cursor: pointer; width: 264px; } .btn-divider.hero span, .btn-divider.bottom span { display: flex; position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); white-space: nowrap; color: #808080; text-align: center; font-family: Lato, sans-serif; font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; text-decoration-line: underline; width: 100%; width: 264px; display: block; text-align: center; justify-content: center; } .btn-divider.hero .visible, .btn-divider.bottom .visible { display: flex; text-decoration: underline; } .btn-divider.hero .visible.hide, .btn-divider.bottom .visible.hide { display: none; } .btn-divider.hero .hidden, .btn-divider.bottom .hidden { display: flex; text-decoration: none; } .btn-divider.hero .hidden.hide, .btn-divider.bottom .hidden.hide { display: none; } .btn-divider.hero.mob, .btn-divider.bottom.mob { display: none; } .btn-divider.hero { margin: 0; } .btn-divider.bottom { margin: 0 16px; } img { pointer-events: none; } .footer { position: relative; z-index: 1; padding: 0; display: flex; flex-direction: column; align-items: center; } .footer .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 1720px; margin: 0 auto; padding: 30px 20px 21px; } .footer-line { display: flex; width: 100%; justify-content: space-between; background: #101010; width: 100%; } .footer-line .content-wrapper { position: relative; flex-direction: column; max-width: 1678px; width: 100%; margin: 0 auto; padding: 15px 10px; } .footer-line p, .footer-line span, .footer-line a { color: #9F9F9F; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line a { transition: 0.2s ease-in-out; } .footer-line a:hover { color: #fff; } .footer-line-left { display: flex; flex-direction: column; } .footer-line-left ul { display: flex; align-items: center; } .footer-line-left ul li { color: #9F9F9F; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line-right { display: flex; } .footer-line-right p, .footer-line-right span, .footer-line-right a, .footer-line-right li { color: #9F9F9F; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 48px; width: 100%; } .footer-col p { max-width: 1099px; margin-top: 24px; } .footer-col p, .footer-col span, .footer-col a { color: #B2B2B2; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; line-height: 140%; transition: 0.2s ease-in-out; } .footer-col a { text-decoration: underline; transition: 0.2s ease-in-out; } .footer-col a:hover { color: #fff; } .footer-fire { position: absolute; top: -26px; right: 0; width: 375px; max-height: 228px; } .footer-logo { width: 177px; } .footer-socials { display: flex; margin-top: -2px; } .footer-socials-item { margin-left: 20px; } .footer-line ul.mob-only { display: none; } /*** 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; } .download-buttons-mob { display: none; } .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; } .heading-second { text-align: center; font-size: var(--font-size-1100); font-weight: var(--font-weight-bold); line-height: 127.273%; } .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; } .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); } .download-btn:hover { background: var(--color-surface-brand-cf-hover); } .download-btn .mobile { display: none; } .download-buttons { display: flex; justify-content: center; margin: 36px auto 0; } .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; } .item-text { color: #dfdfdf; font-size: 15px; font-weight: var(--font-weight-medium); line-height: 150%; text-align: center; } .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; } .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; } .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; } .duck-section { position: relative; margin: 99px auto 0; padding-bottom: 48px; } .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; } .nav-links li, .menu-links li { color: inherit; } .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: -moz-fit-content; 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; } .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; } .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; } .menu-nav .download-app-button-text { font-size: var(--font-size-400); font-weight: var(--font-weight-medium); letter-spacing: 0; } .divider { height: 1px; width: 100%; background-color: hsla(0, 0%, 100%, 0.16); width: calc(100vw - 28px); margin: var(--space-400) auto 4px auto; } .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; } .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); } :root { --avatar-size: var(--space-1600); --hero-height: var(--space-1600); } .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%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; 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; } .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; } .hero-section .content-wrapper { justify-content: space-between; padding-bottom: 0; } .hero-section .content-wrapper.list-specs { display: grid; grid-template-columns: 1fr; gap: var(--space-400); } .hero-section .content-wrapper.list-specs > .avatar-wrap { grid-column: 1/-1; } .hero-section .hero-intro { width: 100%; margin-right: var(--space-500); } .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%; } .hero-section .hero-intro-bottom { margin-top: 41px; border-top: 1px solid #303030; } .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; } .hero-section .hero-intro-bottom .hero-line:nth-of-type(2) { 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; } .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; } .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; } .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); } .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); } .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; } .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; } .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); } .mods-section button.btn-border { display: none; } li.mod { width: 100%; height: 162px; position: relative; background-color: var(--color-surface-secondary); padding: 20px; text-align: left; } 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; } li.mod .project-avatar-wrap .mod-thumb { position: absolute; width: inherit; height: inherit; 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; -moz-column-gap: var(--space-200); column-gap: var(--space-200); row-gap: 18px; overflow: hidden; flex-direction: column; flex-grow: 1; padding-bottom: 0; position: relative; } li.mod .mod-thumb { width: 88px; height: 88px; } li.mod .mod-details { color: #b2b2b2; font-size: var(--font-size-350); max-width: 100%; overflow: hidden; } 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; } li.mod .mod-details .author { padding: 0; margin-bottom: 4px; } 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); } 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; } @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; /* width: calc(100% - 30px); */ } @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 (min-width: 600px) { li.mod { width: 184px; height: 280px; padding: var(--space-500); } li.mod .project-avatar-wrap { overflow: initial; width: 144px; height: 144px; } 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-thumb { width: 100%; height: auto; max-width: 148px; margin: 0 auto; } li.mod .mod-details { position: absolute; top: 154px; } li.mod .mod-details > a { margin-bottom: 8px; } li.mod .mod-details .author { margin-bottom: 16px; } } @media (min-width: 640px) { .nav-links, .menu-links { display: flex; } .nav-links li:hover a, .menu-links li:hover a { color: var(--color-text-pure); border-bottom-color: var(--color-brand-cf); } .download-button { position: static; margin-top: initial; margin-left: auto; } .hamburger { display: none; } .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 { display: none; } .divider { display: none; } .menu-links { flex-direction: row; height: inherit; align-items: center; } .menu-links.more-options { display: none; } } @media (min-width: 768px) { :root { --avatar-size: 160px; --hero-height: 176px; } } @media only screen and (min-width: 768px) { .hero-avatar { border-width: var(--space-200); } } @media only screen and (min-width: 781px) { .ad-blocker-block br { display: none; } } @media (min-width: 1024px) { .menu-nav .download-app-button-text { display: block; } } @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; } } @media only screen and (min-width: 1025px) { header .content-wrapper { min-height: 80px; } .header-link { opacity: 0; animation: OpacityLinkAppear 1s linear forwards; animation-delay: 0.3s; } .opening-section .small-text { display: block; text-align: left; } .opening-section .intro-text-container .heading-first br { display: none; } .opening-section .intro-text-container p.txt br { display: inline; } .opening-section .dude-img img { right: 8%; right: 96px; bottom: 0px; max-width: unset; width: 100%; right: 8%; width: 100%; bottom: 1px; height: 762px; } .txt.desktop { display: flex; } .txt.mob { display: none; } .features-section .carousel-item-text-bottom { padding-bottom: 7px; } .swiper-pagination { margin: 15px auto 0; } .swiper-pagination-bullet { width: 10px; height: 10px; } .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 10px; height: 10px; } .intro-section .content-right.mob { display: none; } .intro-section .carousel-item-text-bottom { padding-bottom: 7px; } .intro-hero .content-wrapper { flex-direction: row; justify-content: space-between; padding: 181px 20px 85px; } .intro-hero .content-left { padding-right: 20px; } .intro-hero .content-left p { max-width: 633px; margin: 4px 0 30px; font-size: 18px; line-height: 155.455%; text-align: left; } .intro-hero .content-right { display: flex; flex-direction: row; position: relative; margin: 0; padding: 21px 32px 34px; border-radius: 20px; background: #000; } .intro-hero .content-right::before { position: absolute; left: -8px; bottom: 5px; width: 27.927px; height: 59.011px; content: ""; } .intro-hero .content-right p { max-width: 424px; margin: 4px 0 0; text-align: left; } .swiper-intro { min-height: 522px; } .swiper-intro .carousel-item-text-bottom { padding-bottom: 7px; } .intro-hero-img.mob { display: none; } .mods-section li.mod .mod-details .mod-title { color: var(--900, #E5E5E5); } .bottom-section .content-wrapper { justify-content: flex-end; } .footer { padding: 0; } .footer .content-wrapper { max-width: 1960px; padding: 71px 120px 0; align-items: flex-start; } .footer-line .content-wrapper { flex-direction: row; justify-content: space-between; max-width: 1960px; margin: 0 auto; padding: 16px 120px; } .footer-line-left { flex-direction: row; } .footer-line-left ul li { margin-left: 32px; } } @media only screen and (min-width: 1100px) { .site-header .header-inner nav ul li ul.header-menu-inner { display: none; } } @media only screen and (min-width: 1200px) { .opening-section .dude-img img { right: 0%; } } @media (min-width: 1200px) { .hero-section { margin-bottom: var(--space-2400); } } @media only screen and (max-width: 1760px) { .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1730px) { .opening-section .dude-img { transform: translateX(0); bottom: 0; top: unset; } } @media only screen and (max-width: 1600px) { .subscribe-section .subscribe-section-bg-flowers { left: 70%; bottom: 83px; } } @media only screen and (max-width: 1500px) { .footer-col p { max-width: 800px; } } @media only screen and (max-width: 1424px) { .carousel-section .content-wrapper { padding: 122px 20px 78px; } .carousel-section .heading-line { margin-bottom: 25px; padding: 0 20px; } } @media only screen and (max-width: 1400px) { .opening-section .dude-img img { transform: translateX(20%); } } @media only screen and (max-width: 1360px) { .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1324px) { .bottom-section .bottom-characters { left: -13%; } } @media only screen and (max-width: 1250px) { .site-header .header-inner nav ul li { margin: 0; } } @media only screen and (max-width: 1240px) { .about-section .about-picture::before { top: 0%; left: 47%; transform: rotate(90deg) translateX(-50%); } } @media only screen and (max-width: 1224px) { .carousel-section .content-wrapper { padding: 122px 0px 78px; } } @media only screen and (max-width: 1200px) { .opening-section .dude-img img { transform: translateX(25%); } .footer-col p { max-width: 600px; } } @media only screen and (max-width: 1175px) { .bottom-section .bottom-characters { left: -19%; } } @media only screen and (max-width: 1150px) { .opening-section .dude-img img { transform: translateX(50%); } } @media only screen and (max-width: 1100px) { .site-header .hamburger-menu-button { display: block; } .submenu-icon { display: flex; } .site-header .header-inner .action-items { width: -moz-fit-content; width: fit-content; margin: auto auto 10vh; display: flex; gap: 8px; } .site-header .header-inner nav .header-menu { position: absolute; left: 0; top: 75px; margin: 0; flex-direction: column; background-color: #202020; text-align: center; width: 100%; overflow: overlay; height: 100vh; padding-top: 21px; padding-bottom: 64px; gap: 0; flex-grow: 1; } .site-header .header-menu-inner { background: #000; } .site-header .header-inner nav { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: opacity 0.3s ease-out; animation: quick-hide-mobile-menu 0.2s 1; } .site-header .header-inner nav ul li { margin-left: unset; display: flex; justify-content: flex-start; position: relative; width: 100%; margin: 0; flex-direction: column; } .site-header .header-inner nav ul li a { display: flex; align-items: center; } .site-header .header-inner nav ul li a.download-btn { max-width: 224px; } @keyframes quick-hide-mobile-menu { 0% { opacity: 0; } to { opacity: 0; } } .site-header .header-inner nav.is-open { opacity: 1; } .site-header .header-inner nav:not(.is-open) { pointer-events: none; } .site-header .header-inner nav ul::-webkit-scrollbar { width: 4px; height: 4px; background-color: #808080; } .site-header .header-inner nav ul::-webkit-scrollbar-thumb { border-width: 0; background-color: #808080; background-clip: padding-box; } .opening-section .dude-img img { transform: translateX(50%); } } @media only screen and (max-width: 1024px) { .download-buttons-mob { display: flex; flex-direction: column; align-items: center; } .heading-first { margin: 0 auto; text-align: center; font-weight: 700; font-size: 32px; line-height: 125%; } .heading-second { font-size: 32px; } .heading-third { font-size: 32px; font-weight: 700; line-height: 125%; text-align: center; } .download-btn { margin: 0px auto; padding: 16px 20px; font-size: 16px; } .download-btn .desktop { display: none; } .download-buttons { display: none; } .cf-forge-mob { display: flex; margin: 39px auto 0; } .item-text { font-size: 12px; } .to-top { margin: 13px auto 0; font-size: 16px; } .to-top-section .content-wrapper { padding-top: 0; } header::before { background: linear-gradient(180deg, #131313 0%, rgba(19, 19, 19, 0) 100%); } header.fixed.desktop { display: none; } header.fixed.mob { display: flex; } header .download-buttons { flex-direction: column; } header .download-buttons.desktop { display: none; } header { display: none; } .header-link { margin-left: 0; margin-bottom: 25px; font-size: 18px; line-height: 28px; opacity: 1; } .opening-section { background-size: cover; display: flex; flex-direction: column; height: unset; width: 100%; padding: 0; background-attachment: unset; height: unset; background: none; } .opening-section .intro-text-container { max-width: 700px; padding: 0 16px; } .opening-section .intro-text-container .opening-sims-logo { display: flex; width: 206px; height: auto; margin: 12px auto; } .opening-section .intro-text-container .opening-sims-logo svg { width: auto; height: auto; } .opening-section .intro-text-container .heading-first { margin-top: 10px; padding: 0 8px; } .opening-section .intro-text-container p.txt { margin: 5px auto 22px; max-width: unset; text-align: center; font-size: 18px; font-weight: 500; line-height: 160%; } .opening-section .intro-text-container p.txt.desktop { display: none; } .opening-section .intro-text-container p.txt.mob { display: flex; padding: 0px 10px; } .opening-section .editor-icon { margin: -120px auto 0; } .opening-section .editor-icon-container { height: unset; } .opening-section .editor-icon-text { display: none; } .opening-section .editor-icon-text-container { display: none; } .opening-section .intro-text-content { display: flex; flex-direction: column; padding-top: 0; } .opening-section .dude-img { right: unset; position: relative; bottom: unset; left: unset; top: unset; width: 120%; max-width: 120%; height: unset; transform: translateX(0); overflow: hidden; } .opening-section .dude-img img { position: relative; z-index: 1; right: unset; bottom: unset; width: 100%; height: auto; margin-top: 0; transform: translateX(0%); } .opening-section .dude-img.desktop { display: none; } .opening-section .dude-img.mob { display: flex; width: 120%; max-width: 120%; margin-bottom: 0; transform: translate(0px, -64px); } .opening-section .shadow-bg { bottom: 0px; } .opening-section .shadow-bg img { min-width: 1920px; } .txt-decorated { margin-top: 17px; text-align: center; font-size: 13px; letter-spacing: 1.9px; } .opening-section .download-buttons { flex-direction: column; align-items: center; } .opening-section .download-buttons div:not(:first-child) { margin-left: 0; margin-top: 20px; } .opening-section .download-btn { display: flex; } .opening-line-bg.desktop { display: none; } .opening-line-bg.mob { display: flex; } .features-section { padding: 0; } .features-section .heading-third { padding: 64px 0 0; } .features-section .content-wrapper { padding: 0; } .features-section .swiper-wrapper { justify-content: unset; flex-wrap: unset; padding-top: 78px; flex-wrap: unset; } .features-section .carousel-item-img-desktop { display: none; } .features-section .carousel-item-img-mob { display: flex; } .features-section .carousel-item { display: flex; align-items: stretch; min-height: 627px; max-height: unset; margin: 0 10px 36px; padding: 0; } .features-section .carousel-item-text-small { margin: 2px auto 11px; white-space: nowrap; } .features-section .carousel-item-img { width: 100%; height: 100%; } .features-section .carousel-item-img img { width: 100%; } .features-section .carousel-item-text { padding: 0 10px 48px; align-items: flex-start; } .features-section .carousel-item-title { padding: 8px 10px 0; } .features-section .carousel-item-description { min-height: unset; padding: 0 20px 21px; } .features-section .carousel-item .decorated-text.mob { display: flex; align-items: center; justify-content: flex-start; margin-top: 19px; margin-bottom: 12px; height: 23px; padding: 3px 12px; } .btn-action.mob { display: flex !important; } .btn-action { display: none !important; } .swiper-button-next, .swiper-button-prev { display: flex; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px; } .carousel-item-block.desk { display: none; } .carousel-item-block.mob { display: flex; } .btn-view { background: #EB622B; border: 1px solid #EB622B; color: #fff; } .btn-view:hover { border: 1px solid #F18536; } .intro-section { background: #202020; } .intro-section .heading-four { text-align: center; margin: 5px 0; } .intro-section .carousel-item { display: flex; margin: 31px 0px 44px; padding: 16px 16px 22px; } .intro-section .carousel-item-text-small { margin: 0px auto 11px; } .intro-section .carousel-item-img { height: 240px; min-height: 240px; overflow: hidden; } .intro-section .carousel-item-text { padding: 0; align-items: flex-start; } .intro-section .carousel-item-title { padding: 20px 0 0px; font-size: 18px; line-height: 136%; } .intro-section .carousel-item-description { min-height: unset; padding-bottom: 4px; } .intro-section .carousel-item-description { max-width: 267px; } .intro-section .carousel-item .decorated-text.mob { display: flex; align-items: center; justify-content: flex-start; margin-top: 19px; margin-bottom: 12px; height: 23px; padding: 3px 12px; } .intro-hero .heading-second { display: flex; justify-content: center; margin: 0 auto; font-size: 32px; letter-spacing: unset; text-align: center; } .intro-hero-img { min-width: 140px; width: 140px; height: 140px; margin-top: 12px; margin: 0 auto; margin-right: auto; } .intro-hero-text { text-align: center; } .intro-hero-text p { margin-bottom: 0; font-size: 14px; line-height: 20px; } .intro-details .content-wrapper { padding: 5px 0px; } .intro-details .content-wrapper-inner { padding: 0; } .intro-details .heading-third { padding: 0; text-align: center; margin: 0 auto; } .swiper-intro .carousel-item { display: flex; align-items: stretch; min-height: 530px; margin: 27px 0px 63px; padding: 16px 16px 22px; } .swiper-intro .carousel-item-text-small { margin: 0px auto 11px; } .swiper-intro .carousel-item-img { height: 240px; min-height: 240px; overflow: hidden; } .swiper-intro .carousel-item-text { padding: 0; align-items: flex-start; } .swiper-intro .carousel-item-title { padding: 16px 0 1px; font-size: 18px; line-height: 133.33%; } .swiper-intro .carousel-item-description { max-width: 280px; min-height: unset; padding-bottom: 4px; font-size: 14px; font-style: normal; line-height: 142.857%; } .swiper-intro .carousel-item .decorated-text.mob { display: flex; align-items: center; justify-content: flex-start; margin-top: 19px; margin-bottom: 12px; height: 23px; padding: 3px 12px; } .swiper-intro .btn-view { margin-right: 10px; } .carousel-section .content-wrapper { padding: 64px 0px; } .carousel-section .swiper-button-next, .carousel-section .swiper-button-prev { display: none; } .carousel-section.desktop { display: none; } .carousel-section.mob { display: flex; } .subscribe-section { height: unset; background: #000; background-size: cover; } .subscribe-section .subscribe-section-bg-bee { display: none; } .subscribe-section .subscribe-section-bg-flowers { display: none; } .subscribe-section .heading-second { margin-top: 20px; font-size: 32px; } .subscribe-section .content-wrapper { padding: 84px 20px 64px; } .subscribe-section .main-text { padding: 0 7px; } .subscribe-section .main-text br { display: none; } .adblocker-container { top: 83%; margin: 32px 20px; } .bottom-section { margin: 0 auto; padding: 5px 0 0; overflow: hidden; margin: 0; background-size: cover; } .bottom-section .heading-third { margin-bottom: 24px; text-align: center; font-size: 32px; font-weight: 700; line-height: 120%; letter-spacing: -0.16px; } .bottom-section .heading-third br { display: flex; } .bottom-section .content-wrapper { display: flex; flex-direction: column; align-items: center; padding: 76px 20px 0; background-size: cover; } .bottom-section .content-wrapper-inner { align-items: center; } .bottom-section .bottom-characters { display: none; } .bottom-section .heading-second { text-align: center; } .bottom-section .download-btn { height: 56px; } .bottom-character-mob { display: flex; width: 100%; margin-top: -7px; } .download-buttons { margin: 40px 0 0; } .download-btn { display: none; } .download-buttons-mob .download-btn { display: flex; } .btn-divider.hero, .btn-divider.bottom { width: 256px; margin: 7px 16px; } .btn-divider.hero span, .btn-divider.bottom span { font-family: "Montserrat", sans-serif; font-size: 14px; } .btn-divider.hero.desktop, .btn-divider.bottom.desktop { display: none; } .btn-divider.hero.mob, .btn-divider.bottom.mob { display: flex; z-index: 3; } .footer-line { flex-direction: column; align-items: center; } .footer-col { align-items: center; margin: 0 auto 8px; } .footer-col p { margin-top: 30px; text-align: center; } .footer-fire { display: none; } .footer-logo { width: 140px; } .footer-socials { margin-top: 44px; justify-content: center; margin: 29px auto 6px; } .footer-line ul.mob-only { display: flex; justify-content: space-between; width: 100%; max-width: 400px; padding: 0px 16px 16px; } .footer-line ul.mob-only li { margin: 0 4px; } .footer-line ul.desktop-only { display: none; } .footer-socials-item { margin-left: unset; margin: 0 10px; } .footer-socials-item:first-of-type { order: 1; } .footer-socials-item:nth-of-type(2) { order: 3; } .footer-socials-item:last-of-type { order: 2; } .download-buttons-mob { display: flex; flex-direction: column; align-items: center; } .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 { font-size: var(--font-size-800); } .heading-third { font-size: var(--font-size-800); font-weight: var(--font-weight-bold); line-height: 125%; text-align: center; } .download-btn { margin: 0px auto; padding: var(--space-400) var(--space-500); font-size: var(--font-size-400); } .download-btn .desktop { display: none; } .download-buttons { display: none; } .cf-forge-mob { display: flex; margin: 39px auto 0; } .item-text { font-size: var(--font-size-300); } .to-top { margin: 13px auto 0; font-size: var(--font-size-400); } .to-top-section .content-wrapper { padding-top: 0; } .duck-section { margin: 79px auto 0; } .hero-section .content-wrapper { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .hero-section .hero-intro { max-width: 100%; margin-right: 0; } .hero-section .hero-intro-bottom { margin-top: 38px; } .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; } .hero-section .mods { margin-top: 6px; } .mods-section .content-wrapper { padding-inline: var(--space-500); } } @media only screen and (max-width: 1024px) and (max-width: 600px) { .hero-section .content-wrapper { padding-top: 0; } } @media only screen and (max-width: 900px) { .features-section .carousel-item { max-width: 335px; min-width: 335px; min-height: unset; height: auto; width: 335px; margin: 0 0 36px; max-width: unset; width: unset; min-width: unset; } .features-section .carousel-item-description br { display: none; } .swiper-intro .carousel-item-description br { display: none; } } @media only screen and (max-width: 899px) { .intro-section .swiper-wrapper { display: flex; grid-gap: unset; } .swiper-intro .swiper-wrapper { display: flex; grid-gap: unset; } } @media only screen and (max-width: 780px) { .adblocker-container { top: 72%; max-width: 337px; width: 100%; } .ad-blocker-block { flex-direction: column; align-items: flex-start; padding: 18px 16px; } .ad-blocker-block .large-text { margin-left: 32px; margin-bottom: 7px; } .ad-blocker-block .img-warning { position: absolute; top: 20px; left: 16px; width: 20px; height: 20px; } .ad-blocker-block .close { position: absolute; top: 16px; right: 16px; } } @media only screen and (max-width: 768px) { .features-section .carousel-item { max-width: 280px; min-width: 280px; max-width: unset; min-width: unset; width: unset; height: auto; } .intro-section br { display: none; } } @media only screen and (max-width: 600px) { .mods-section button.btn-border, .btn-border { display: flex; } .duck-section { margin: 79px auto 22px; } .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: 14px; } .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) { display: flex; flex-direction: column; align-items: flex-start; } .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 { padding-top: var(--space-400); padding-bottom: var(--space-100); } .hero-section .hero-intro-title { font-size: var(--font-size-600); line-height: 133.333%; } .mods-list { margin-bottom: var(--space-600); } .mods-section button.btn-border { display: flex; } } @media (max-width: 600px) { body:not(.show-all) ul.mods-list li:nth-child(n+6) { display: none; } li.mod .mod-content { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto 23px; -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 0.5rem; } li.mod .mod-details .desc { display: inline-block; opacity: 1; -webkit-line-clamp: 2; display: -webkit-box; } } @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; } } @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; } } @media only screen and (max-width: 500px) { .features-section .swiper { margin: 0 20px; } .features-section .carousel-item-img { max-height: 325px; height: 325px; } .features-section .carousel-item-img img { min-width: 335px; max-height: 325px; height: 325px; } .features-section .carousel-item-description { max-width: 307px; padding: 0 0 21px; } .intro-section .carousel-item { max-width: 308px; min-width: 308px; max-height: 530px; width: 308px; height: 530px; } .swiper-intro .carousel-item { max-width: 308px; min-width: 308px; max-height: 530px; width: 308px; height: 530px; } .swiper-intro .carousel-item-description { max-width: 260px; } } @media only screen and (max-width: 370px) { .download-btn { padding: 16px 14px; font-size: 14px; } .download-btn { padding: var(--space-400) 14px; font-size: var(--font-size-350); } } @media only screen and (max-width: 360px) { header .hero-logo.mob { height: 23px; } header .hero-logo.desktop { height: 23px; } } @media only screen and (max-width: 359px) { .intro-hero .heading-second { font-size: 28px; } } @media only screen and (max-width: 350px) { .opening-section .intro-text-container .heading-first { padding: 0; } .opening-section .intro-text-container p.txt.mob { display: flex; padding: 0; } .intro-section .carousel-item { max-width: 280px; min-width: 280px; height: auto; } .swiper-intro .carousel-item { max-width: 280px; min-width: 280px; height: auto; } } @media only screen and (min-width: 1025px) and (max-width: 1920px) { .opening-line-bg { max-height: 280px; height: 280px; } .opening-line-bg.desktop { max-height: 280px; height: 280px; max-inline-size: initial; } } @media only screen and (max-width: 1260px) and (min-width: 1024px) { .bottom-section { background-size: cover; } }