@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-brand); } p { color: var(--color-text-primary); font-family: var(--font-family-default); line-height: var(--font-line-height-700); font-size: var(--font-size-450); } :root { --hero-image-bottom-blur-height: 60px; --general-padding: var(--space-500); } html { scroll-behavior: smooth; } body { background: var(--color-background-general); font-family: var(--font-family-brand); color: var(--color-text-pure); } main { padding: 0 var(--space-500); display: flex; flex-direction: column; background-repeat: no-repeat; background-position: top center; overflow: hidden; position: relative; opacity: 1; } @media (min-width: 1024px) { main { background-image: url("../assets/castle_edges_blur.webp"); background-size: 1920px; } } main::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 3333; transition: opacity 3s ease-out; opacity: 1; pointer-events: none; } main.main--revealed::before { opacity: 0; } strong { font-weight: var(--font-weight-bold); } a { transition: all 0.15s ease-out; } a.link { text-decoration: underline; text-underline-offset: 4px; } a.link:hover { text-decoration: none; } .btn { display: inline-flex; padding: var(--space-200) var(--space-800); justify-content: center; align-items: center; text-align: center; font-family: var(--font-family-brand); font-size: var(--font-size-400); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-600); letter-spacing: var(--font-letter-spacing-regular); min-width: 100%; min-height: var(--space-1000); text-transform: uppercase; } @media (min-width: 1024px) { .btn { min-width: 96px; } } .btn--primary { background-color: var(--color-surface-brand-ow); } .btn--secondary { color: var(--color-text-primary); border: 1px solid var(--color-border-secondary); background-color: transparent; } .btn--primary:hover, .btn--secondary:hover { background-color: var(--color-surface-brand-ow-hover); border-color: transparent; color: var(--color-text-pure); } .hero { position: relative; background-image: url("../assets/castle_mob.webp"); background-size: cover; background-position: top; background-repeat: no-repeat; min-height: 388px; display: flex; flex-direction: column; gap: var(--space-600); padding-top: var(--space-600); } @media (min-width: 1024px) { .hero { left: initial; padding-top: var(--space-4000); background-image: initial; align-items: flex-start; min-height: 878px; max-width: 1396px; margin-inline: auto; width: 100%; } } .hero > h1 { color: var(--color-text-pure); font-family: var(--font-family-brand); letter-spacing: var(--font-letter-spacing-default); text-align: center; line-height: 48px; } @media (min-width: 1024px) { .hero > h1 { text-align: left; line-height: 88px; } } .hero > h1 img { vertical-align: middle; margin-right: var(--space-100); } @media (min-width: 1024px) { .hero > h1 img { width: 419px; } } .hero > h3 { color: var(--color-text-primary); text-align: center; font-family: var(--font-family-brand); font-size: var(--font-size-550); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-750); letter-spacing: var(--font-letter-spacing-default); padding-inline: 10%; } @media (min-width: 1024px) { .hero > h3 { padding-inline: initial; text-align: left; max-width: 50%; text-wrap: balance; } } @media (min-width: 1024px) { .hero > .btn { margin-bottom: var(--space-500); } } .event-location { display: flex; gap: var(--space-1600); } .event-location dt { color: var(--color-text-secondary); font-family: var(--font-family-brand); font-size: var(--font-size-400); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-600); letter-spacing: var(--font-letter-spacing-regular); text-transform: uppercase; } @media (min-width: 1024px) { .event-location dt { font-size: var(--font-size-450); } } .event-location dd { color: var(--color-text-brand-ow); font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-1100); font-style: normal; font-weight: var(--font-weight-bold); line-height: var(--font-line-height-1300); letter-spacing: var(--font-letter-spacing-default); } @media (min-width: 1024px) { .event-location dd { font-size: var(--font-size-1600); } } .hive { position: relative; margin: 0 auto; width: 100%; padding: var(--space-1000) 0; } .hive.mob { display: block; } .hive.mob > h4 { text-align: center; color: var(--color-text-tertiary); text-align: center; font-family: var(--font-family-brand); font-size: var(--font-size-450); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-650); letter-spacing: var(--font-letter-spacing-default); margin-bottom: var(--space-300); } .hive.mob .hive-image { width: 100%; opacity: 0.75; } @media (min-width: 1024px) { .hive.mob { display: none; } } .hive.desk { display: none; } @media (min-width: 1024px) { .hive.desk { display: flex; align-items: center; max-width: 1396px; margin-inline: auto; width: 100%; } .hive.desk > h4 { white-space: nowrap; color: var(--color-text-primary); text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-550); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-750); letter-spacing: var(--font-letter-spacing-default); } } .hive > .hive-image { opacity: 0.65; } .hive > img { margin: 0 auto; } @media (min-width: 1024px) { .hive > img.mob { display: none; } } .hive > img.desk { display: none; } @media (min-width: 1024px) { .hive > img.desk { display: block; width: calc(100% - 200px); } } section.our-solutions > h2 { text-align: center; padding: var(--space-1200) 0 var(--space-600) 0; } @media (min-width: 1024px) { section.our-solutions > h2 { padding: var(--space-1200) 0; } } section.our-solutions .solutions-wrap { display: flex; justify-content: space-between; max-width: 1396px; margin-inline: auto; width: 100%; flex-direction: column; } @media (min-width: 1024px) { section.our-solutions .solutions-wrap { flex-direction: row; background-image: url(../assets/shield.webp); background-position: center center; background-size: contain; background-repeat: no-repeat; margin-bottom: var(--space-2600); } } section.our-solutions ul.features { color: var(--color-text-secondary); display: flex; flex-direction: column; gap: var(--space-600); } section.our-solutions li.feature { display: flex; gap: var(--space-400); font-size: var(--font-size-400); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-600); letter-spacing: var(--font-letter-spacing-default); align-items: center; } section.our-solutions .feature-icon { color: var(--color-text-secondary); display: flex; align-items: center; } @media (min-width: 1024px) { section.our-solutions { margin-bottom: var(--space-2400); } } .solution { display: flex; flex-direction: column; align-items: center; gap: var(--space-600); } .solution-headline { text-align: center; text-wrap: balance; font-size: var(--font-size-600); line-height: var(--font-line-height-800); } @media (min-width: 1024px) { .solution-headline { text-wrap: initial; padding-inline: 48px; } } @media (min-width: 1024px) { .solution { max-width: 400px; min-width: 400px; } } .solution.curseforge-for-studios { color: var(--color-text-brand-cf); } .solution.tebex { color: var(--color-text-brand-tb); } .solution.nitro { color: var(--color-text-brand-nt); text-align: center; } .solution.nitro > .features-description { color: var(--color-text-primary); } @media (min-width: 1024px) { .solution.nitro { text-align: left; align-items: flex-start; max-width: 540px; } .solution.nitro > .solution-headline { text-align: inherit; padding: 0 100px 0 0; } } .solution.shield.mob { display: block; width: 100%; padding: 24px 0; } @media (min-width: 1024px) { .solution.shield.mob { display: none; } } .nitro-wrap { display: flex; flex-direction: column; width: 100%; } .nitro-wrap .nitro-image > .mob { padding: 48px 0; display: block; width: 100%; } @media (min-width: 1024px) { .nitro-wrap .nitro-image > .mob { display: none; } } .nitro-wrap .nitro-image > .desk { display: none; } @media (min-width: 1024px) { .nitro-wrap .nitro-image > .desk { display: block; width: 100%; max-width: 1396px; } } @media (min-width: 1024px) { .nitro-wrap { flex-direction: row-reverse; max-width: 1396px; margin-inline: auto; gap: 48px; } } h1, h2 { font-size: var(--font-size-800); font-weight: var(--font-weight-bold); font-style: normal; line-height: var(--font-line-height-1000); } @media (min-width: 1024px) { h1, h2 { font-size: var(--font-size-1600); line-height: var(--font-line-height-1800); } } h3 { font-size: var(--font-size-800); font-style: normal; font-weight: var(--font-weight-bold); line-height: var(--font-line-height-1000); letter-spacing: var(--font-letter-spacing-default); } dl.powering-creation { font-style: normal; font-weight: var(--font-weight-regular); letter-spacing: var(--font-letter-spacing-default); text-align: left; display: flex; flex-direction: column; gap: var(--space-600); } dl.powering-creation > div { background: var(--color-surface-primary); display: flex; gap: var(--space-400); padding: var(--space-200) var(--space-400); } dl.powering-creation dt { color: var(--color-text-brand-ow); display: flex; align-items: center; white-space: nowrap; min-width: 110px; font-weight: var(--font-weight-semi-bold); } dl.powering-creation dd { color: var(--color-text-primary); } .in-game-creation { display: flex; flex-direction: column; width: 100%; gap: var(--space-600); font-size: var(--font-size-450); line-height: var(--font-line-height-700); font-family: var(--font-family-default); } .in-game-creation__content { display: flex; flex-direction: column; gap: 24px; } .in-game-creation__content > h3 { text-wrap: balance; } @media (min-width: 1024px) { .in-game-creation__content { max-width: 476px; } } .in-game-creation-image { display: flex; flex-direction: column; justify-content: center; } .in-game-creation-image > .mob { padding: 24px 0; display: block; width: 100%; } @media (min-width: 1024px) { .in-game-creation-image > .mob { display: none; } } .in-game-creation-image > .desk { display: none; } @media (min-width: 1024px) { .in-game-creation-image > .desk { display: block; width: 100%; max-width: 1396px; } } @media (min-width: 1024px) { .in-game-creation { flex-direction: row; max-width: 1396px; margin-inline: auto; gap: 48px; } } .upper-blur { position: relative; } .upper-blur:before { content: ""; position: absolute; top: calc(-1 * var(--hero-image-bottom-blur-height)); left: 0; width: 100vw; height: var(--hero-image-bottom-blur-height); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 50%, #000 100%); pointer-events: none; z-index: 1111; } .fade-in-section { will-change: opacity, transform; } .viewport-width { width: calc(100% + 2 * var(--general-padding)) !important; left: calc(-1 * var(--general-padding)); padding-inline: var(--general-padding); } @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); } .slim-header { display: flex; width: 100%; padding: 15px var(--space-500) 15px var(--space-400); justify-content: space-between; align-items: center; max-height: 80px; } .slim-header__cta { display: none; } @media (min-width: 1024px) { .slim-header__cta { display: flex; } } .stats-section { position: relative; padding-bottom: 70px; padding: var(--space-1200) 0; margin-bottom: var(--space-1200); } .stats-section .stats-inner { max-width: 1396px; margin: auto; text-align: center; } .stats-section .stats-inner .stats-list { display: flex; justify-content: space-around; gap: var(--space-1200) 0; position: relative; z-index: 1; } @media (max-width: 1024px) { .stats-section .stats-inner .stats-list { flex-wrap: wrap; } } .stats-section .stats-inner .stats-list li { position: relative; } @media (max-width: 1024px) { .stats-section .stats-inner .stats-list li { max-width: 50%; } } .stats-section .stats-inner .stats-list li h2 { font-size: var(--font-size-1600); line-height: 112.5%; margin-bottom: var(--space-200); color: var(--color-text-brand-ow); } .stats-section .stats-inner .stats-list li h2 span { font-weight: var(--font-weight-bold); } @media (max-width: 1024px) { .stats-section .stats-inner .stats-list li h2 { font-size: var(--font-size-1100); line-height: 127.273%; } } .stats-section .stats-inner .stats-list li h3 { color: var(--color-text-primary); text-align: center; font-family: var(--font-family-brand); font-size: var(--font-size-400); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-600); letter-spacing: var(--font-letter-spacing-regular); text-transform: uppercase; } .page-footer { background-color: var(--color-surface-pure); overflow: hidden; } .page-footer section.book-a-meeting { display: inline-flex; justify-content: center; z-index: 1; width: calc(100% - 2 * var(--general-padding)); left: var(--general-padding); position: relative; height: var(--space-1200); margin-top: var(--space-1200); } @media (min-width: 1024px) { .page-footer section.book-a-meeting { margin-top: 110px; } } .page-footer .village-presentation { display: flex; overflow: hidden; height: 512px; position: relative; } @media (min-width: 1024px) { .page-footer .village-presentation { height: 1000px; } } .page-footer .village-presentation:before { content: ""; position: absolute; width: 100%; height: 100%; opacity: 0.5; background-image: url(../assets/bazarre_mob.webp); background-repeat: no-repeat; background-position: center top; background-size: cover; top: 60px; } @media (min-width: 1024px) { .page-footer .village-presentation:before { top: 0; height: 1000px; background-image: url(../assets/bazarre.webp); } } .page-footer .village-presentation:after { content: ""; position: absolute; width: 100%; height: 100%; opacity: 1; background-image: url(../assets/bazarre_overlay_mob.webp); background-repeat: no-repeat; background-position: right bottom; background-size: contain; top: 20px; } @media (min-width: 1024px) { .page-footer .village-presentation:after { background-image: initial; } } .page-footer .village-presentation > .cloud { display: none; position: absolute; z-index: 2; bottom: 0; } .page-footer .village-presentation > .cloud.left { left: 0; } .page-footer .village-presentation > .cloud.right { right: 0; } @media (min-width: 1024px) { .page-footer .village-presentation > .cloud { display: block; } } .page-footer .footer-links a { text-decoration: none; } .page-footer .footer-links a:hover { color: var(--color-icon-primary); } .page-footer .back-to-top { display: flex; align-items: center; flex-direction: column; justify-content: center; width: fit-content; margin: auto; font-size: var(--font-size-400); line-height: 1.5; color: var(--color-text-pure); text-decoration: none; gap: var(--space-200); transition: color 0.1s ease-out; } .page-footer .back-to-top:hover { color: var(--color-brand-ow-hover); } .page-footer .back-to-top > svg { color: inherit; width: var(--space-600); height: var(--space-600); transform: rotate(180deg); } .page-footer .legal, .page-footer .copyright { color: var(--color-text-tertiary); font-family: var(--font-family-brand); font-size: var(--font-size-350); font-weight: var(--font-weight-regular); } .page-footer .legal-links { display: flex; gap: var(--space-200) var(--space-800); flex-wrap: wrap; } @media (min-width: 1024px) { .page-footer .legal-links { gap: var(--space-800); } } .page-footer .legal-links a { color: inherit; color: var(--color-text-tertiary); white-space: nowrap; } @media (min-width: 1024px) { .page-footer .social { margin-left: auto; } } .page-footer .social-links { display: flex; gap: var(--space-400); } .page-footer .social-links li { width: var(--space-600); height: var(--space-600); } .page-footer .social-links a { width: inherit; height: inherit; color: var(--color-icon-secondary); display: inline-block; } .page-footer .social-links svg { height: inherit; width: inherit; } .logos { display: flex; padding: var(--space-1200) 0; justify-content: center; align-items: center; flex-direction: column; gap: var(--space-400); } @media (min-width: 1024px) { .logos { flex-direction: row; align-items: initial; gap: var(--space-1600); } } .logos a { color: var(--color-icon-pure); } .logos-inner { margin-inline: auto; } section.footer-links { background-color: var(--color-surface-primary); display: flex; align-items: center; gap: var(--space-600); color: var(--color-text-tertiary); justify-content: space-around; } @media (min-width: 1024px) { section.footer-links { padding: initial; gap: initial; } } .footer-links-content { max-width: 1680px; padding: var(--space-400) var(--space-500); width: 100%; display: flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 24px; } @media (min-width: 1024px) { .footer-links-content { gap: initial; flex-direction: row; } } .copyright { white-space: nowrap; } #copyright-year { color: inherit; } .legal { order: 3; } @media (min-width: 1024px) { .legal { order: initial; margin-inline-start: var(--space-800); } } .legal a:hover { color: var(--color-text-primary); } .social { order: 2; } @media (min-width: 1024px) { .social { order: initial; } } .social a:hover { color: var(--color-icon-primary); } .page-footer { background-color: var(--color-surface-pure); } .page-footer .footer-links a { text-decoration: none; } .page-footer .footer-links a:hover { color: var(--color-icon-primary); } .page-footer .back-to-top-container { padding-top: var(--space-1200); display: flex; justify-content: center; } .page-footer .back-to-top { display: flex; align-items: center; flex-direction: column; justify-content: center; width: fit-content; margin: auto; font-size: var(--font-size-400); line-height: 1.5; color: var(--color-text-pure); text-decoration: none; gap: var(--space-200); } .page-footer .back-to-top:hover { color: var(--color-text-brand-ow-hover); } .page-footer .back-to-top > svg { color: inherit; width: var(--space-600); height: var(--space-600); transform: rotate(180deg); } .page-footer .legal, .page-footer .copyright { color: var(--color-text-tertiary); font-family: var(--font-family-brand); font-size: var(--font-size-350); font-weight: var(--font-weight-regular); } @media (min-width: 1024px) { .page-footer .social { margin-left: auto; } } .page-footer .social-links { display: flex; gap: var(--space-400); } .page-footer .social-links li { width: var(--space-600); height: var(--space-600); } .page-footer .social-links a { width: inherit; height: inherit; color: var(--color-icon-secondary); display: inline-block; } .page-footer .social-links svg { height: inherit; width: inherit; } .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; } .company-brands { display: flex; flex-direction: column; padding: var(--space-1200) 0; gap: var(--space-500); } .company-brands .ow-row, .company-brands .others-row { display: flex; justify-content: center; align-items: center; } .company-brands .others-row { flex-direction: row; } .company-brands .brands-links { display: flex; justify-content: center; align-items: center; gap: var(--space-400); flex-wrap: nowrap; } .company-brands .brands-links > li { transform: scale(0.75); } @media (min-width: 1024px) { .company-brands .brands-links { gap: var(--space-1600); } .company-brands .brands-links > li { transform: initial; } } /*# sourceMappingURL=style.css.map */