/*
 * uniQ.me front page (Nova landing design "uniqme")
 * The signed-out front page of LIVE uniq.me (4.5 default theme: _landing_page.tpl + the sd-landing-* rules of style.css),
 * rebuilt for Sngine 5 without Bootstrap. Everything is scoped to .uq-landing, so no other page changes.
 */

@font-face { font-family: "UqPoppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "UqPoppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "UqPoppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "UqPoppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype"); }

.uq-landing {
  --uq-primary: #5e72e4;
  --uq-ink: #333681;
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: "UqPoppins", Poppins, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #111;
  background: #a181db;
  background: linear-gradient(180deg, #a081da 70%, #b88bc3 90%);
}
.uq-landing *, .uq-landing *::before, .uq-landing *::after { box-sizing: border-box; }

/* banner: the picture behind the top of the page, tinted */
.uq-landing__banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 550px;
  background: url("../images/landing/uniqme/landing-banner.jpg") center / cover no-repeat;
}
.uq-landing__banner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #897ac6;
  opacity: .7;
}

.uq-landing__container {
  position: relative;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 12px;
}

/* header: transparent, fixed; purple once the page is scrolled */
.uq-landing__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: transparent;
  transition: background-color ease-out .3s;
}
.uq-landing__header.is-scrolled { background-color: #a181db; }
.uq-landing__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}
.uq-landing__logo {
  display: block;
  font-size: 32px;
  font-weight: 600;
  line-height: 70px;
  color: #e7e2e2 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.uq-landing__logo:hover { opacity: .8; }
.uq-landing__logo img { max-height: 50px; width: auto; vertical-align: middle; }
.uq-landing__toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.uq-landing__toggle {
  display: none;
  padding: 4px 12px;
  border: 1px solid #e7e2e2;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.uq-landing__toggle span,
.uq-landing__toggle span::before,
.uq-landing__toggle span::after {
  display: block;
  width: 30px;
  height: 2px;
  background: rgba(33, 37, 41, .75);
  border-radius: 2px;
  content: "";
  position: relative;
}
.uq-landing__toggle span { margin: 13px 0; }
.uq-landing__toggle span::before { position: absolute; top: -9px; }
.uq-landing__toggle span::after { position: absolute; top: 9px; }
.uq-landing__toggle-input:focus-visible + .uq-landing__toggle { box-shadow: 0 0 5px 1px #ddd; }
.uq-landing__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.uq-landing__links a {
  display: block;
  padding: 8px;
  color: #e7e2e2 !important;
  text-decoration: none !important;
}
.uq-landing__links a:hover { opacity: .8; }

/* content: features on the left, sign-in card on the right */
.uq-landing__content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
  padding: 140px 0 50px;
}
.uq-landing__main,
.uq-landing__side {
  width: 100%;
  padding: 0 12px;
}
.uq-landing__title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}

/* claim form */
.uq-landing__claim {
  position: relative;
  display: block;
  max-width: 450px;
  margin: 50px auto 0;
}
.uq-landing__claim-label {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--uq-primary);
  pointer-events: none;
}
.uq-landing__claim input[type="text"] {
  display: block;
  width: 100%;
  height: 60px;
  padding: 12px 24px 12px 110px;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--uq-primary);
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 800px;
  outline: none;
}
.uq-landing__claim input[type="text"]::placeholder { color: var(--uq-primary); opacity: 1; }
.uq-landing__claim input[type="text"]:focus { border-color: #afb8f1; box-shadow: 0 0 0 .25rem rgba(94, 114, 228, .25); }
.uq-landing__claim button {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 13px 40px 12px;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: var(--uq-primary);
  border: 1px solid var(--uq-primary);
  border-radius: 800px;
  cursor: pointer;
}
.uq-landing__claim button:hover { background: #4b5fd6; }

/* member type pills */
.uq-landing__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 50px;
  cursor: pointer;
}
.uq-landing__pill {
  display: inline-block;
  padding: 6px 20px;
  font-weight: 500;
  color: #303870;
  background: #f2e3fe;
  border-radius: 800px;
  transition: all ease-out .2s;
}
.uq-landing__pill:hover { opacity: .8; }
.uq-landing__pill i { margin-right: 5px; }
.uq-landing__pill--writers { background: #feeadf; }
.uq-landing__pill--writers i { color: #fcbaac; }
.uq-landing__pill--healers { background: linear-gradient(45deg, #9ab4fe, #94b0fe); }
.uq-landing__pill--healers i,
.uq-landing__pill--cosplayers i { color: #fff; }
.uq-landing__pill--coders { background: linear-gradient(45deg, #fdd4d7, #f8dad9); }
.uq-landing__pill--cosplayers { background: linear-gradient(45deg, #8a9ffe, #939dfe); }
.uq-landing__pill--poets { background: linear-gradient(45deg, #eed7ef, #dbd2f8); }
.uq-landing__pill--musicians { background: linear-gradient(45deg, #fde4ef, #fde2ed); }
.uq-landing__pill--storyteller { background: linear-gradient(45deg, #fedde3, #fbd9e1); }
.uq-landing__pill--storyteller i,
.uq-landing__pill--creators i { color: #fbafb4; }
.uq-landing__pill--streamers { background: linear-gradient(45deg, #d7e9fe, #d5e9fe); }
.uq-landing__pill--creators { background: #fef0e1; }

/* "What is uniQ.me?" questions */
.uq-landing__faq {
  max-width: 500px;
  margin: 130px auto 0;
}
.uq-landing__faq h3 {
  margin: 0 0 20px;
  font-size: calc(1.3rem + .6vw); /* Bootstrap's responsive h3, as on uniq.me: 1.75rem from 1200px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--uq-ink);
  text-align: center;
}
.uq-landing__accordion { position: relative; }
.uq-landing__accordion::before,
.uq-landing__accordion::after {
  content: "";
  position: absolute;
  z-index: 9;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.uq-landing__accordion::before {
  top: -40px;
  right: -107px;
  width: 120px;
  height: 120px;
  background-image: url("../images/landing/uniqme/faq-hi-icon.png");
}
.uq-landing__accordion::after {
  bottom: 13px;
  left: -97px;
  width: 130px;
  height: 130px;
  background-image: url("../images/landing/uniqme/faq-heart-icon.png");
  transform: rotate(-20deg);
}
.uq-landing__question {
  margin-bottom: 15px;
  border-radius: 15px;
  overflow: hidden;
}
.uq-landing__question summary {
  position: relative;
  display: block;
  padding: 16px 52px 16px 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--uq-ink);
  background-color: #e0e8fe;
  border: 3px solid #a5c2fe;
  border-radius: 15px;
  cursor: pointer;
  list-style: none;
}
.uq-landing__question summary::-webkit-details-marker { display: none; }
.uq-landing__question summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333681' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") center / 20px no-repeat;
  transition: transform .2s ease-in-out;
}
.uq-landing__question[open] summary {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.uq-landing__question[open] summary::after { transform: rotate(-180deg); }
.uq-landing__answer {
  padding: 0 25px 25px;
  background: #dfe9fe;
  border: 3px solid #a5c2fe;
  border-top: 0;
  border-radius: 0 0 15px 15px;
}
.uq-landing__answer p { margin: 0 0 1rem; }
.uq-landing__answer p:last-child { margin-bottom: 0; }
.uq-landing__answer ol { margin: 0 0 1rem; padding-left: 2rem; }
.uq-landing__answer ol > li::marker { font-weight: bold; }

/* sign-in card (Sngine 5's own sign form inside LIVE's white card) */
.uq-landing__form { max-width: 550px; margin: 0 auto; padding-top: 50px; }
.uq-landing__card {
  margin: 0 0 20px;
  padding: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
  background: #fff;
  border-radius: 16px;
}
.uq-landing__card .js_panel > .mb-8 { margin-bottom: 15px; }
.uq-landing__card .js_panel h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: #212529;
}
.uq-landing__card .js_panel h2 + p { margin-top: 4px; font-size: 15px; }
.uq-landing__card button[type="submit"],
.uq-landing__card .btn-primary {
  background: var(--uq-primary);
  border-color: var(--uq-primary);
  color: #fff;
}
/* LIVE's inputs: 60px high, a 70px icon box on the left (envelope / lock), placeholder instead of a floating label */
.uq-landing__card .input-floating-label { display: none; }
.uq-landing__card .input-floating > input.input,
.uq-landing__card .input-floating > div.input {
  height: 60px;
  border: 1px solid #dee2e6;
  border-radius: 16px;
  background-color: #fff;
  background-repeat: no-repeat, no-repeat;
  background-position: 27px center, 70px 0;
  background-size: 16px 16px, 1px 100%;
  padding-left: 86px;
  font-size: 16px;
}
.uq-landing__card .input-floating > input.input::placeholder,
.uq-landing__card .input-floating > div.input input::placeholder { color: #6c757d; opacity: 1; }
.uq-landing__card #signin-username-email {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23212529' d='M1.5 3h13A1.5 1.5 0 0 1 16 4.5v.3L8 9.6 0 4.8v-.3A1.5 1.5 0 0 1 1.5 3zM0 6.3l8 4.8 8-4.8v5.2A1.5 1.5 0 0 1 14.5 13h-13A1.5 1.5 0 0 1 0 11.5z'/%3e%3c/svg%3e"), linear-gradient(#dee2e6, #dee2e6);
}
.uq-landing__card .input-floating > div.input:has(#signin-password) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23212529' d='M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 12 7h-.5V4.5A3.5 3.5 0 0 0 8 1zm2 6H6V4.5a2 2 0 1 1 4 0z'/%3e%3c/svg%3e"), linear-gradient(#dee2e6, #dee2e6);
}
/* social sign-in: "or", then round icon buttons Apple, Facebook, Google (uniq.me's order) */
.uq-landing__card .uq-social-after .divider { display: block; margin: 0 0 12px; text-align: center; color: #212529; }
.uq-landing__card .uq-social-after .divider::before,
.uq-landing__card .uq-social-after .divider::after { display: none; }
.uq-landing__card .uq-social-after .flex-wrap { justify-content: center; gap: 16px; }
.uq-landing__card .uq-social-after a.button {
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  background: #fff;
  color: #212529;
}
.uq-landing__card .uq-social-after a.button:hover { background: #f8f9fa; }
.uq-landing__card .uq-social-after a[href$="/connect/apple"] { order: 1; }
.uq-landing__card .uq-social-after a[href$="/connect/facebook"] { order: 2; color: #1877f2; }
.uq-landing__card .uq-social-after a[href$="/connect/google"] { order: 3; }

.uq-landing__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.uq-landing__footer .dropdown-toggle { background: transparent !important; color: #3b3b3c !important; font-weight: 500; padding: 0; }
.uq-landing__footer .dropdown-toggle img { width: 16px; height: 16px; border-radius: 0; }
@media (max-width: 991px) { .uq-landing__footer { justify-content: center; } }

.uq-landing__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.uq-landing__badges img { width: 40px; height: 40px; }
.uq-landing__footer { margin: 25px 0; color: #3b3b3c; font-weight: 500; }
.uq-landing__footer a { color: #3b3b3c !important; }

/* night mode: the page keeps its own colours, as on uniq.me */
.night-mode .uq-landing__card,
[data-bs-theme="dark"] .uq-landing__card { color: #212529; background: #fff; }

/* desktop (Bootstrap's lg breakpoint): two columns, links in the header */
@media (min-width: 992px) {
  .uq-landing__main { width: 66.66666667%; }
  .uq-landing__side { width: 33.33333333%; }
}
@media (min-width: 1200px) {
  .uq-landing__faq h3 { font-size: 1.75rem; }
}
@media (max-width: 1199px) {
  .uq-landing__accordion::before { right: -87px; width: 100px; height: 100px; }
  .uq-landing__accordion::after { left: -76px; bottom: 45px; width: 100px; height: 100px; }
}
@media (max-width: 991px) {
  .uq-landing__faq { max-width: 550px; }
  .uq-landing__footer { text-align: center; }
  .uq-landing__toggle { display: inline-block; }
  .uq-landing__links {
    display: none;
    flex-direction: column;
    flex-basis: 100%;
    padding: 15px;
    background: linear-gradient(180deg, #a081da 0%, #b88bc3 80%);
  }
  .uq-landing__toggle-input:checked ~ .uq-landing__links { display: flex; }
}
@media (max-width: 767px) {
  .uq-landing__accordion::before { top: -80px; right: -10px; }
  .uq-landing__accordion::after { bottom: -90px; left: 0; }
  .uq-landing__title { font-size: 24px; }
  .uq-landing__form { padding-top: 100px; }
}
@media (max-width: 500px) {
  .uq-landing__content { padding-top: 100px; }
  .uq-landing__faq { margin-top: 80px; }
  .uq-landing__faq h3 { text-align: left; }
  .uq-landing__claim { margin-top: 30px; }
  .uq-landing__claim input[type="text"] { padding-left: 90px; font-size: 16px; }
  .uq-landing__claim-label { top: 20px; font-size: 16px; }
  .uq-landing__claim button { padding-left: 20px; padding-right: 20px; }
  .uq-landing__content { padding-bottom: 0; }
}