:root { --brand-color: #d2ff5c; /* #d2ff5c color */ --text-color: #ffffff; /* White color for text */ --body-bg-color: #0e131c; /* Black color for background */ --link-color: var(--brand-color); /* DodgerBlue color for links */ --link-hover-color: color-mix(in srgb, var(--link-color) 85%, #000); /* Tomato color for link hover */ --button-color: var(--brand-color); /* Tomato color for buttons */ --button-hover-color: color-mix(in srgb, var(--link-color) 85%, #000); /* DodgerBlue color for button hover */ --border-color: #ccc; /* Color for borders */ --shadow-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black for shadows */ --font-family: "Montserrat", sans-serif; /* Font family for the app */ --font-tactic-sans-exd-bld: "TacticSansExd-Bld"; --font-tactic-sans-exd-blk: "TacticSansExd-Blk"; --font-tactic-sans-exd-lgt: "TacticSansExd-Lgt"; --font-tactic-sans-bld: "TacticSans-Bld"; --font-size: 16px; /* Base font size */ --font-weight: 400; /* Base font weight */ --heading-font-family: "TacticSansExd-Reg"; /* Font family for headings */ --heading-font-size: 24px; /* Font size for headings */ --heading-font-weight: 700; /* Font weight for headings */ --padding: 10px; /* Base padding */ --margin: 10px; /* Base margin */ --border-radius: 5px; /* Border radius for elements */ --transition: all 0.3s ease; /* Transition for hover effects */ --box-shadow: 0 4px 8px var(--shadow-color); /* Box shadow for elements */ --z-index: 1000; /* Z-index for elements */ --container-max-width: 1440px; /* Max width for containers */ --min-width: 300px; /* Min width for containers */ --max-height: 800px; /* Max height for containers */ --min-height: 200px; /* Min height for containers */ --grid-gap: 20px; /* Gap between grid items */ --grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Grid template columns */ --grid-template-rows: auto; /* Grid template rows */ --grid-auto-flow: dense; /* Grid auto flow */ --grid-auto-columns: minmax(0, 1fr); /* Grid auto columns */ --grid-auto-rows: minmax(0, auto); /* Grid auto rows */ --grid-area: auto; /* Grid area */ --grid-column: auto; /* Grid column */ --grid-row: auto; /* Grid row */ --grid-column-start: auto; /* Grid column start */ --grid-column-end: auto; /* Grid column end */ --grid-row-start: auto; /* Grid row start */ --btn-skwew: 40deg; /* Skew angle for buttons */ } @media screen and (max-width: 768px) { :root { --font-size: 14px; } html { font-size: 11px; } } /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* */ body { background-color: var(--body-bg-color); color: var(--text-color); font-family: var(--font-family); } h1, h2, h3, h4, h5, h6 { /* font-family: var(--heading-font-family); */ font-weight: var(--heading-font-weight); color: var(--text-color); } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } p { font-size: var(--font-size); font-weight: var(--font-weight); color: var(--text-color); } a { color: var(--link-color); text-decoration: none; font-size: var(--font-size); font-weight: var(--font-weight); transition: var(--transition); &:hover { color: var(--link-hover-color); } } .text-primary { color: var(--brand-color); } strong { font-weight: 600; } input, textarea { font-family: var(--font-family); font-size: var(--font-size); color: var(--body-bg-color); background-color: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: var(--padding); transition: var(--transition); &::placeholder { color: var(--body-bg-color); opacity: 0.5; } &:disabled { background-color: var(--border-color); cursor: not-allowed; } } input:not([type="checkbox"]):not([type="radio"]) { width: 100%; height: 42px; margin-bottom: 0; } input[type="checkbox"] { appearance: none; padding: 8px; margin-inline-end: 0.25rem; position: relative; top: 2px; width: unset; height: unset; margin-bottom: 0; } input:checked[type="checkbox"] { background: no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); background-color: var(--brand-color); border-color: var(--brand-color); } .site-btn { display: inline-flex; justify-content: center; align-items: center; background-color: var(--button-color); color: #000; padding-block: var(--padding); padding-inline: calc(var(--padding) * 2); border-radius: var(--border-radius); border: none; cursor: pointer; transition: var(--transition); font-weight: bold; font-size: 1.5rem; &:hover { background-color: var(--button-hover-color); color: #000; } &:active { background-color: color-mix(in srgb, var(--button-color) 85%, #000); color: #000; } &:disabled { background-color: var(--border-color); cursor: not-allowed; } &:focus { outline: none; box-shadow: 0 0 0 2px var(--button-color); } } .grid { display: grid; gap: var(--gap, 24px); grid-template-columns: var(--template, auto); grid-auto-rows: minmax(0, max-content); } .flex { display: flex; } .flex-vertical { flex-direction: column; } .flex-y-center { align-items: center; } .flex-x-center { justify-content: center; } .flex-x-between { justify-content: space-between; } .breakout { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; } .container { max-width: var(--container-max-width); padding-inline: 15px; margin-inline: auto; } .site-header { padding-block-start: 32px; background: url("../image/header-bg-new.jpg") no-repeat center center; padding-bottom: 150px; .site-btn { font-family: var(--font-tactic-sans-exd-blk); font-size: 1.5rem; max-width: 250px; width: 100%; font-style: italic; &.nav-login-btn { --btn-skwew: 40deg; border-radius: 0; font-family: var(--font-family); font-size: 1rem; font-weight: 700; transform: skew(calc(var(--btn-skwew) * -1)); margin-inline-start: 2rem; padding-block: 1.125rem; box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4) inset; > span { transform: skew(var(--btn-skwew)); } } } .top-nav { --side-arrow-width: 44px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; /* padding: 0 32px; */ padding-inline-end: 3rem; /* background-color: #151a25; */ position: relative; /* &::before, &::after { content: ""; width: 62px; height: var(--side-arrow-width); border-style: solid; position: absolute; inset-block-start: 0; } &::before { border-width: 64px 24px 44px 38px; border-color: red red transparent transparent; inset-inline-start: -62px; } &::after { border-width: 64px 38px 44px 24px; border-color: red transparent transparent red; inset-inline-end: -62px; } */ @media screen and (min-width: 991px) { width: max-content; justify-content: center; } } .logo { display: flex; align-items: center; a { display: inline-flex; } } .nav-wrap { position: relative; @media screen and (max-width: 991px) { /* margin-inline-start: auto; */ margin-inline-end: 2rem; } @media screen and (min-width: 992px) { .mob-nav-icon { display: none; } } } .nav { --item-gap: 30px; @media screen and (max-width: 991px) { position: absolute; background: #000; top: 100%; padding: 2rem 1.5rem; border-radius: 1.5rem; right: -50px; width: 250px; margin-top: 20px; &:not(.show-nav) { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } &.show-nav { opacity: 1; visibility: visible; } } ul { display: flex; list-style: none; padding: 0; margin: 0; gap: var(--item-gap); background-color: #151a25; @media screen and (max-width: 991px) { flex-direction: column; justify-content: center; } li { display: flex; align-items: center; gap: var(--item-gap); @media screen and (max-width: 991px) { flex-direction: column; } &:not(:first-child)::before { content: ""; width: 10px; aspect-ratio: 1; display: block; border: 1px solid var(--brand-color); border-radius: 50%; } a { color: var(--text-color); text-decoration: none; font-size: 14px; transition: var(--transition); font-weight: bold; &:hover { color: var(--link-hover-color); } } } } } } .top-banner { --gap: 32px; padding-block: 90px; } .event-info-section { .section-title { background-color: #0b0d15; padding: 1.5rem 1rem; font-size: 2rem; text-align: center; font-weight: normal; span { font-weight: 700; } @media screen and (min-width: 991px) { padding: 2.5rem 1rem; font-size: 3.75rem; } } } .event-grid { padding-block: 2rem; overflow: hidden; @media screen and (min-width: 991px) { --template: repeat(3, minmax(0, 1fr)); padding-block: 4.375rem; } } .event-item { text-align: center; font-size: 1.25rem; .event-date { font-weight: 300; position: relative; > span { background-color: var(--body-bg-color); display: inline-block; position: relative; z-index: 2; padding-inline: 0.5rem; } &::before { content: ""; width: 100%; height: 1px; display: block; background-color: var(--brand-color); border-radius: 100%; position: absolute; top: 10px; left: 0; } strong { display: block; &::after { content: ""; width: 100%; height: 0.25em; display: block; background-color: var(--brand-color); border-radius: 0.5em; max-width: 260px; margin-inline: auto; margin-block: 1rem; } } } .event-details { max-width: 260px; margin-inline: auto; font-weight: 300; } &:nth-of-type(2) { .event-date { strong { --brand-color: #2a56dd; } } } @media screen and (min-width: 991px) { .event-date { &::before { left: -50%; } } &:last-of-type { .event-date { &::after { content: ""; width: 100%; height: 1px; display: block; background-color: var(--brand-color); border-radius: 100%; position: absolute; top: 10px; right: -50%; } } } } } .series-info-section { text-align: center; background: url(../image/bg-text.jpg) no-repeat center; padding-block: 2rem; } .series-info-slider { margin-inline: 2rem; font-size: 2.5rem; .slide-item { font-weight: 300; strong { display: inline-block; color: var(--brand-color); border-inline-end: 2px solid var(--brand-color); padding-inline-end: 1rem; } } .slick-next:before, .slick-prev:before { color: var(--brand-color); } @media screen and (min-width: 991px) { font-size: 3.75rem; } } .prize-section { text-align: center; padding-block: 2rem; background-color: #08090f; h5 { font-size: 2rem; font-weight: normal; } h2 { font-size: 4.5rem; color: var(--brand-color); } .prize-grid { --template: repeat(3, minmax(0, 1fr)); --gap: 3rem; text-align: center; margin-block-start: 5rem; span { display: block; font-size: 2.125rem; font-weight: 700; margin-block-start: 1rem; color: #f9d601; } .prize-item:nth-of-type(2) { span { color: #b6c4cd; } } .prize-item:nth-of-type(3) { span { color: #bd7828; } } } .register-btn { margin-block-start: 4rem; } @media screen and (min-width: 991px) { h5 { font-size: 3.125rem; } h2 { font-size: 8.75rem; } .prize-grid { span { font-size: 3.125rem; } } } } .section-divider { width: 100%; border: 1px solid var(--brand-color); margin-block: var(--divider-block-margin, 2rem); border-radius: 50%; box-shadow: 0 0 10px var(--brand-color); } .region-grid { --template: repeat(3, minmax(0, 1fr)); --gap: 0; --circle-size: 0.75rem; --circle-border-width: 1px; text-align: center; font-size: 1.5rem; font-weight: 700; padding-block-end: 2rem; .region-item { position: relative; &::after { content: ""; position: absolute; margin-inline-end: calc(var(--circle-size) * -0.5); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); width: var(--circle-size); aspect-ratio: 1; border: var(--circle-border-width) solid var(--brand-color); border-radius: 50%; box-shadow: 0 0 10px rgba(202, 248, 101, 0.5), 0 0 10px rgba(202, 248, 101, 0.5) inset; } &:last-of-type::after { display: none; } } @media screen and (min-width: 991px) { --circle-size: 1.75rem; --circle-border-width: 2px; font-size: 2.5rem; } } .region-team-grid { --template: repeat(3, minmax(0, 1fr)); --gap: 0; text-align: center; background-color: #0e131c; .region-format { border-block: 2px solid #1d2537; border-inline-end: 2px solid #1d2537; padding-block: 2rem; font-size: 1rem; &:last-of-type { border-inline-end: none; } ul li + li { margin-block-start: 2rem; } } @media screen and (min-width: 991px) { .region-format { font-size: 1.75rem; } } } .region-format { } /* .section-image { text-align: center; h2 { font-size: 3.75rem; margin-block-end: 2em; } } .list-bullets { li { margin-block: 8px; } } */ .container-lg { max-width: 1440px; width: 92%; margin-inline: auto; } .sponser-box { margin-block: 5rem; padding: 5rem; border: var(--brand-color) 1px solid; border-radius: 2.5rem; text-align: center; h2 { text-transform: uppercase; line-height: 1.1; @media screen and (min-width: 768px) { font-size: 5.75rem; } @media screen and (max-width: 767px) { font-size: 3rem; } } p { font-size: 2rem; margin: 2rem 0; } .site-btn { font-size: 2.25rem; text-transform: uppercase; width: 100%; max-width: 300px; margin-top: 2rem; } } .site-footer { padding: 2.5rem 0; border-top: var(--brand-color) 1px solid; .container-lg { display: flex; gap: 2rem; justify-content: space-between; @media screen and (max-width: 767px) { flex-direction: column; align-items: center; } } .sm-icons { display: flex; gap: 1rem; svg { color: #c1c1c1; } @media screen and (min-width: 768px) { order: 2; } } .copyrights { font-size: 16px; } } /* Login Page */ .login-outer { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient( circle at 26% 94%, color-mix(in srgb, var(--brand-color) 40%, #000) 1%, rgba(255, 0, 0, 0) 40%, transparent 100% ), radial-gradient( circle at 80% 24%, color-mix(in srgb, var(--brand-color) 40%, #000) -18%, rgba(255, 0, 0, 0) 30%, transparent 100% ), radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-color) 40%, #000) 0%, #121212 0%); } .login-form { gap: 1.5rem; flex: 1; justify-content: center; position: relative; z-index: 2; font-size: var(--font-size); @media screen and (min-width: 768px) { max-width: 450px; margin-inline-start: auto; } .input-form-group { position: relative; .input-control { margin-bottom: 0; width: 100%; } .fa { position: absolute; right: 10px; top: 14px; color: #000; } } } .login-form-footer { position: relative; z-index: 2; margin-top: auto; text-align: center; img { width: 100%; max-width: 242px; } @media screen and (min-width: 768px) { text-align: end; } } .login-bg { background: url("../image/login-bg.jpg") left bottom no-repeat; position: relative; min-height: 650px; border-radius: 30px; overflow: hidden; max-width: calc(100% - 4rem); width: 1170px; padding: 2rem; display: flex; flex-direction: column; gap: 3rem; &::before { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-bottom: clamp(100px, 20vw, 300px) solid var(--brand-color); border-left: clamp(100px, 20vw, 300px) solid transparent; } &::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } @media screen and (min-width: 768px) { flex-direction: row; } } .join-text { font-family: var(--font-tactic-sans-bld); text-align: center; font-size: 3.375rem; position: relative; z-index: 2; span { display: block; font-family: var(--font-tactic-sans-exd-blk); font-size: 1.2037037em; color: var(--brand-color); } }