@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://use.typekit.net/zod0rea.css");

/* REMOVE - FOR DEV USE ONLY */
.cookie-consent-container {
  display: none;
  visibility: hidden;
}

/* REMOVE - FOR DEV USE ONLY */
#page-top-navigation {
  position: sticky;
  top: 0;
}

/* REMOVE - FOR DEV USE ONLY */
#sgw-top-navigation {
  background-color: black;
  height: 50px;
}

/* REMOVE - FOR DEV USE ONLY */
@media (width <=600px) {
  #sgw-top-navigation {
    height: 40px;
  }
}


:root {
  color-scheme: dark;
  accent-color: var(--key-color);
  --container: 88.75rem;
  --background-color: #141618;
  --key-color-reverse: oklch(from var(--key-color) calc((l - 0.5) * -100) c h);

  --transition-duration: 200ms;
  --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  --border-radius: 0.15rem;

  --esports-nav-base-color: #242628;
  --esports-nav-main-button-width: 13.5rem;
  --font-family: 'Quantico', sans-serif;
  --font-family-default: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, system-ui, sans-serif;

  --frame-modals: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-modals.webp');
  --frame-clubcta: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-clubcta.webp');
  --frame-clubprofile: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-clubprofile.webp');
  --frame-profilepicture: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-profilepicture.webp');
  --frame-profiletext: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-profiletext.webp');
  --frame-matchblock: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-matchblock.webp');
  --frame-matchvote: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-matchvote.webp');
  --frame-standings: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-standings.webp');
  --frame-shopcard: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-shopcard.webp');
  --frame-tinylabel: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/frame-label-tiny.webp');

  --glow-teams: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/glow-mask-teams.webp');
  --glow-shopcard: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/glow-mask-shopitem.webp');
  --glow-leagues: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/glow-mask-leagues.webp');
  --glow-membershipcard: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/membership-card-glow.webp');

  --background-teams: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-teams.webp');
  --background-standings: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-standings.webp');
  --background-matchblock: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-matchblock.webp');
  --background-results: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-results.webp');
  --background-leaderboards: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-leaderboards.webp');
  --background-clubdynamic: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-clubprofile.webp');

  --deco-markcross: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/mark-cross.webp');
  --deco-markcheck: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/mark-check.webp');
  --deco-clubprofile: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/deco-clubprofile.webp');

}

html[lang=en] {
  --tokens: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/token-icon-we.webp');
}

html[lang=pt] {
  --tokens: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/token-icon-br.webp');
}

main#landingPage {
  --background-image: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-club-1920.webp');
  --background-top-right: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-club-top-right-1920.webp');
}

@media (width <= 900px) {
  main#landingPage {
    --background-top-right: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-club-top-right-900.webp');
  }
}

@media (width <= 600px) {
  main#landingPage {
    --background-image: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-club-600.webp');
    --background-top-right: url('https://z8games.akamaized.net/cfbr/templates/assets/cfsupporterclub/images/background-club-top-right-600.webp');
    padding-block-start: 6rem;
  }
}





body {
  background-color: var(--background-color);
}

main {
  padding-block-start: 6rem;
  background-image: var(--background-bottom, none), var(--background-top-right, none), var(--background-image, none);
  background-position: bottom center, top center, top center;
  background-size: 100%;
  background-repeat: no-repeat;
}
@media (width <= 600px) {
  main {
    padding-block-start: 3rem;
  }
}

header {
  margin-block-end: 2rem;
  display: flex;
  justify-content: flex-start;
}

nav ul {
  list-style: none;
}

img {
  user-select: none;
}

p, small, li, a, summary {
  font-stretch: semi-condensed;
  font-stretch: 80%;
  font-variation-settings: 'wdth' 90;
}

.tab-navs button,
.button {
  background-color: hsl(from var(--esports-nav-base-color) h s 25%);
  border-block-width: 1px;
  border-block-style: solid;
  border-color: hsl(from var(--esports-nav-base-color) h s 40%);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  width: 100%;

  font-family: var(--font-family);
  text-transform: uppercase;

  background-image: radial-gradient(circle,
    hsl(from var(--esports-nav-base-color) h s 45%) 0%,
    hsl(from var(--esports-nav-base-color) h s 25%) 100%);
}

@media (hover) {
  #leaderboards .tab-navs button:hover,
  .button:hover {
    background-image: radial-gradient(circle,
        hsl(from var(--key-color) h s 40%) 0%,
        hsl(from var(--key-color) h s 35%) 100%);
    filter: brightness(1.1) drop-shadow(0 0 10px var(--key-color));
    border-color: hsl(from var(--key-color) calc(h + 15) s 40%);
  }
}

section :where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  font-family: var(--font-family);
}

mark {
  background-color: var(--key-color);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

select,
input[type=number],
input[type=text] {
  background-color: hsl(from var(--esports-nav-base-color) h s 10%);
  background-image: linear-gradient(
    to bottom,
    hsl(from var(--esports-nav-base-color) h s 10%),
    hsl(from var(--esports-nav-base-color) h s 15%));
  border: 1px solid hsl(from var(--esports-nav-base-color) h s 20%);
  border-radius: var(--border-radius);
}

select,
option,
input[type=number],
input[type=text] {
  color: color-mix(in srgb,
    var(--key-color),
    white 25%);
}

select:focus,
input[type=number]:focus,
input[type=text]:focus {
  outline: 1px solid white;
  filter: drop-shadow(0 0 10px var(--key-color));
}

select:invalid,
input[type=number]::placeholder,
input[type=text]::placeholder {
  color: hsl(from var(--esports-nav-base-color) h s 40%);
}

input[type=number]:focus::placeholder,
input[type=text]:focus::placeholder {
  color: transparent;
}



.intro {
  * {
    margin-block-end: 2rem;
  }

  h1 {
    font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
    text-transform: uppercase;
    line-height: 1.1;
    max-width: 26ch;
  }

  h1::after {
    content: '';
    display: block;
    width: 50%;
    height: 0.025em;
    background-color: var(--key-color);
    margin-block-start: 0.25em;
  }

  p {
    text-wrap: pretty;
    max-width: 66ch;
    line-height: 1.5;
  }

  a {
    --shadow-color: black;
    font-size: 1.25rem;
    text-shadow: 0 0 3px var(--shadow-color);
  }

  a:hover {
    --shadow-color: hsl(from var(--key-color) h s calc(l + 20) / 0.6);
    color: var(--key-color);
  }

  .button {
    width: fit-content;
  }
}



.content,
.selection {
  padding: 4rem 5vw;

  h2 {
    font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
    margin-block-end: 1rem;
  }
}

.content h2 + p,
.selection h2 + p {
  text-align: center;
}






/* Glow mask effect */
.glow {
  position: relative;
}
.glow.active {
  z-index: 1;
}

.glow.active::before {
  content: '';
  opacity: 1;
  width: var(--glow-scale);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: width, opacity;
}

.glow::before {
  position: absolute;
  z-index: -1;
  width: 0%;
  aspect-ratio: 1/1;

  background-color: var(--key-color);
  background-image: radial-gradient(
    circle,
    white 0%,
    var(--key-color) 70%);
  mask-image: var(--glow-mask);
  mask-composite: add;
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}

/* Frames / Border Images */
.frame {
  position: relative;
  isolation: isolate;
}
.frame > * {
  z-index: 1;
}
.frame::after {
  z-index: 0;
  inset: 0;
  /* width: 100%;
  height: 100%; */
  pointer-events: none;
  display: block;
  content: '';
  position: absolute;
  border-image-source: var(--border-image);
  border-image-slice: var(--border-slice);
  border-image-repeat: var(--border-repeat, round);
  border-width: var(--border-width);
  border-style: solid;
  border-color: transparent;
}

/*  DIALOG MODALS */
dialog[open] {
  background-color: hsl(from var(--esports-nav-base-color) h s 15%);
  width: min(96%, var(--modal-width, 25rem));
}
dialog[open]::after {
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  content: '';
  position: absolute;
  border-image-source: var(--frame-modals);
  border-image-slice: 30;
  border-image-repeat: round;
  border-width: 1.875rem;
  border-style: solid;
}

dialog[open] > * {
  z-index: 1;
}

dialog[open] .modal-container {
  padding: 1rem;
  min-height: 90px;
}

dialog[open] .modal-close {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0;
  font-weight: 900;
}
@media (hover) {
  dialog[open] .modal-close:hover {
    color: hsl(from var(--key-color) h s 75%);
    filter: drop-shadow(0 0 10px var(--key-color));
  }
}

dialog:where(
  .teamConfirm,
  .shopConfirm,
  .matchConfirm,
  .loginPrompt,
  .registerPrompt,
  .supporterclubModal
)[open] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  --modal-width: 20rem;

  background-image:
    radial-gradient(circle at top,
      hsl(from var(--key-color) h s l / 0.3),
      transparent 75%);

  h1, h2, p, figcaption {
    text-align: center;
  }

  h1 {
    font-family: var(--font-family);
    text-transform: uppercase;
    line-height: 1.1;
    font-size: clamp(1.25rem, 8cqw + 0.5rem, 1.75rem);
    margin-block: 0.5em;
  }

  h2, figcaption {
    font-size: 1rem;
    margin-block: 0.5em;
  }

  img {
    margin-inline: auto;
    border-radius: var(--border-radius);
  }

  p {
    padding-block: 0.5rem;
  }

  span {
    color: var(--key-color);
  }
}

.modalUI {
  display: flex;
  gap: 0.25rem;
  margin-block-start: 1rem;
}

.promptUI {
  flex-direction: column;
  gap: 1rem;
}

footer {
  border-top: 1px solid var(--key-color);
}

.esports-text-header {
  display: flex;
  flex-direction: column;

  .logo-supporterclub {
    width: min(96%, 15.625rem);
  }

  .esports-subpage-title,
  .esports-subpage-subtitle {
    font-family: 'Prohibition', sans-serif;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-block-start: -0.16em;
  }

  .esports-subpage-title {
    font-size: clamp(60px, 7.8125vw, 150px);
  }

  .esports-subpage-subtitle {
    font-size: clamp(60px, 7.8125vw, 100px);
  }
}


.timer::before,
.countdown::before {
  display: none;
}


.tokens {
  display: flex;
  align-items: center;
}

.tokens::after {
  content: '';
  display: block;

  mask-image: var(--tokens);
  mask-size: contain;
  mask-composite: add;

  background-color: currentColor;

  width: 0.5em;
  height: auto;
  aspect-ratio: 1/1;
  margin-inline-start: 0.125em;
}

main {
  select {
    display: block;
    padding: 0.5em;
    cursor: pointer;
  }

  input[type=checkbox] {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* 260609-CSS-D - Added back-to-home */
.back-to-top,
.back-to-home {
  position: sticky;
  inset-block-end: 0;
  margin-inline: auto;
  margin-block-end: 2rem;

  div {
    width: fit-content;
  }
}