/* 2018-era Roblox look for the public (logged-out) pages */
:root {
  --rbx-blue: #00a2ff;
  --rbx-blue-dark: #0074bd;
  --rbx-green: #02b757;
  --rbx-green-dark: #3fc679;
  --rbx-text: #191919;
  --rbx-muted: #757575;
  --rbx-bg: #e3e3e3;
  --rbx-border: #b8b8b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--rbx-text);
  background: var(--rbx-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--rbx-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* top bar (inner pages) */
.rbx-header {
  background: #0074bd;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.icon-logo { display: block; width: 30px; height: 40px; background: url(/UnsecuredContent/syntra_mark.png) no-repeat left center / 24px auto; margin-right: 22px; flex-shrink: 0; }
.rbx-header nav { display: flex; gap: 2px; margin-right: 14px; }
.rbx-header nav a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  padding: 5px 12px;
  border-radius: 3px;
}
.rbx-header nav a:hover { background: rgba(25,25,25,0.15); text-decoration: none; }
.rbx-header .search {
  width: 320px;
  min-width: 120px;
  height: 28px;
  border: 0;
  border-radius: 3px;
  padding: 0 10px;
  font: inherit;
  font-size: 15px;
}
.rbx-header .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.rbx-header .right a { color: #fff; font-size: 16px; }
.rbx-header .right a.btn-signup {
  background: #02b757;
  border-radius: 3px;
  padding: 4px 10px;
}
.rbx-header .right a.btn-signup:hover { background: #3fc679; text-decoration: none; }
@media (max-width: 760px) {
  .rbx-header nav, .rbx-header .search { display: none; }
  .rbx-header { padding-left: 12px; }
}

/* landing page header: translucent bar over the hero with inline login */
.landing-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 67px;
  display: flex;
  align-items: flex-start;
  padding: 10px 24px 0 70px;
  background: rgba(25, 75, 100, 0.55);
}
.landing-header .icon-logo { margin-top: 8px; margin-right: 18px; }
.landing-header nav { display: flex; gap: 0; margin-top: 4px; }
.landing-header nav a {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  padding: 6px 15px 8px;
  border-bottom: 3px solid transparent;
}
.landing-header nav a.active, .landing-header nav a:hover { border-bottom-color: #fff; text-decoration: none; }
.inline-login { margin-left: auto; display: flex; gap: 7px; align-items: flex-start; margin-right: 150px; }
.inline-login input {
  height: 33px;
  border: 1px solid #b8b8b8;
  border-radius: 3px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
}
.inline-login input[name=username] { width: 255px; }
.inline-login input[name=password] { width: 140px; }
.inline-login .forgot { display: block; color: #fff; font-size: 12px; margin-top: 4px; }
.inline-login button {
  height: 33px;
  border: 0;
  border-radius: 3px;
  background: #02b757;
  color: #fff;
  font: inherit;
  font-size: 16px;
  padding: 0 9px;
  cursor: pointer;
}
.inline-login button:hover { background: #3fc679; }
@media (max-width: 1100px) {
  .inline-login { margin-right: 0; }
  .inline-login input[name=username] { width: 170px; }
  .inline-login input[name=password] { width: 120px; }
}
@media (max-width: 760px) {
  .landing-header { padding-left: 16px; height: auto; flex-wrap: wrap; padding-bottom: 8px; }
  .landing-header nav { display: none; }
  .inline-login .forgot { display: none; }
}

main { flex: 1 0 auto; }

/* panels / forms */
.rbx-panel {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(25,25,25,0.3);
  padding: 24px;
}
.rbx-panel h1, .rbx-panel h2 { font-weight: 400; margin: 0 0 16px; }
.rbx-input {
  display: block;
  width: 100%;
  height: 38px;
  border: 1px solid var(--rbx-border);
  border-radius: 3px;
  padding: 0 10px;
  font: inherit;
  margin-bottom: 12px;
  background: #fff;
}
.rbx-input:focus { outline: none; border-color: var(--rbx-blue); box-shadow: 0 0 0 1px var(--rbx-blue); }
.rbx-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.rbx-hint { display: block; font-size: 13px; color: var(--rbx-muted); margin: -8px 0 12px; }
.rbx-btn {
  display: inline-block;
  width: 100%;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.rbx-btn:disabled { opacity: .5; cursor: not-allowed; }
.rbx-btn-primary { background: var(--rbx-blue); border-color: var(--rbx-blue); }
.rbx-btn-primary:hover:not(:disabled) { background: #32b5ff; border-color: #32b5ff; }
.rbx-btn-green { background: var(--rbx-green); border-color: var(--rbx-green); }
.rbx-btn-green:hover:not(:disabled) { background: var(--rbx-green-dark); border-color: var(--rbx-green-dark); }
.rbx-btn-secondary { background: #fff; border-color: #b8b8b8; color: #191919; }
.rbx-btn-secondary:hover:not(:disabled) { border-color: #191919; }
.rbx-btn-danger { background: #fff; border-color: #e2231a; color: #e2231a; }
.rbx-btn-danger:hover:not(:disabled) { background: #fdecea; }
.rbx-link { background: none; border: 0; padding: 0; color: #00a2ff; font: inherit; font-size: 15px; cursor: pointer; }
.rbx-link:hover { text-decoration: underline; }

/* Cloudflare Turnstile: only takes up space when the visitor needs to click it */
.login-card .cf-turnstile, .rbx-panel .cf-turnstile { display: flex; justify-content: center; margin: -6px 0 14px; }
.login-card .cf-turnstile:empty, .rbx-panel .cf-turnstile:empty { margin: 0; }
.inline-login { position: relative; }
.inline-login .cf-turnstile { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; }

/* 2-step verification */
.twostep-wrap { max-width: 460px; }
.twostep-lead { font-size: 15px; color: #393b3d; line-height: 1.45; margin: 0 0 14px; }
.twostep-help { margin: 12px 0 0; text-align: center; }
.login-card .twostep-code { font-size: 26px; height: 50px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.twostep-h2 { font-size: 18px; font-weight: 600; color: #191919; margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid #e3e3e3; }
.twostep-status { font-size: 16px; margin: 0 0 6px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.twostep-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #b8b8b8; flex: 0 0 10px; margin-top: 7px; }
.twostep-count { margin: 4px 0 0 18px; }
.twostep-status.on .dot { background: #02b757; }
.twostep-status.on { color: #191919; }
.twostep-steps { font-size: 15px; color: #393b3d; padding-left: 20px; margin: 0 0 10px; line-height: 1.5; }
.twostep-qr { display: block; margin: 4px auto 6px; border: 1px solid #e3e3e3; padding: 8px; background: #fff; image-rendering: pixelated; }
.twostep-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.6; text-align: center; background: #f2f4f5; border-radius: 3px; padding: 8px; margin: 6px 0 16px; word-spacing: 2px; user-select: all; }
.twostep-cancel { text-align: center; margin-top: 12px; }
.recovery-codes { list-style: none; padding: 12px; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; background: #f2f4f5; border-radius: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; text-align: center; user-select: all; }
.twostep-done { display: block; line-height: 36px; text-decoration: none; }
.rbx-error { color: #d86868; background: #fff2f2; border: 1px solid #f2c4c4; border-radius: 3px; padding: 8px 10px; font-size: 15px; margin-bottom: 12px; }
.rbx-small { font-size: 13px; color: var(--rbx-muted); }

/* centered auth card (login / signup) */
.auth-wrap { max-width: 380px; margin: 48px auto; padding: 0 16px; }
.auth-wrap h2 { text-align: center; font-size: 32px; }
.auth-alt { text-align: center; margin-top: 16px; font-size: 15px; }

/* landing */
.landing {
  position: relative;
  min-height: 900px;
  background: #3a8fc4 url(/UnsecuredContent/ImageFive.webp) center / cover no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 190px 16px 60px;
}
.landing-inner { position: relative; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; justify-content: center; max-width: 1000px; width: 100%; }
.landing-hero { flex: 1 1 440px; color: #fff; text-align: center; }
.landing-hero .big-logo { width: 100%; max-width: 456px; aspect-ratio: 1632 / 550; margin: 0 auto 6px; background: url(/UnsecuredContent/syntra_logo.png) no-repeat center / contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.landing-hero p { font-size: 30px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.45); margin: 0; }
.landing-form { flex: 0 1 465px; background: rgba(255,255,255,0.97); padding: 22px 25px 25px; color: #191919; }
.landing-form h2 { font-weight: 300; font-size: 24px; text-align: center; text-transform: uppercase; margin: 0 0 18px; color: #393b3d; }
.landing-form .rbx-input { height: 46px; font-size: 18px; font-weight: 300; margin-bottom: 24px; }
.landing-form .rbx-btn { height: 38px; font-size: 18px; }
.landing-form .rbx-small { color: #757575; text-align: center; margin-top: 12px; }
.landing-form .rbx-small a { color: #00a2ff; text-decoration: none; }

.what-is {
  position: relative;
  background: #000;
  min-height: 430px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 80px 16px 90px;
}
/* picture sits just left of the text, fading into the black */
.what-is::before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(50% + 70px); width: 420px; background: url(/UnsecuredContent/whatis_bg.jpg) no-repeat right center / auto 100%; }
.what-is .inner { position: relative; max-width: 580px; margin: 0 0 0 auto; margin-right: max(16px, calc(50% - 520px)); }
.what-is h2 { font-size: 46px; font-weight: 300; text-align: center; margin: 0 0 24px; text-transform: uppercase; }
.what-is p { font-size: 20px; font-weight: 300; line-height: 1.55; text-align: justify; margin: 0; }
@media (max-width: 1100px) {
  .what-is { display: block; background: #000 url(/UnsecuredContent/whatis_bg.jpg) no-repeat center top / auto 300px; padding-top: 320px; }
  .what-is::before { display: none; }
  .what-is .inner { margin: 0 auto; }
}
@media (max-width: 760px) {
  .what-is p { text-align: left; }
  .what-is h2 { font-size: 32px; }
  .what-is p { font-size: 18px; }
}

/* footer */
.rbx-footer { background: #fff; padding: 36px 16px 40px; text-align: center; }
.rbx-footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 50px; margin-bottom: 40px; }
.rbx-footer .links a { color: #b8b8b8; font-size: 20px; font-weight: 300; }
.rbx-footer .links a:hover { color: #191919; text-decoration: none; }
.rbx-footer p { color: #b8b8b8; font-size: 12px; max-width: 760px; margin: 0 auto; line-height: 1.5; }

/* login (2018 /newlogin) */
.login-wrap { max-width: 400px; margin: 12px auto 120px; padding: 0 16px; }
.login-card { padding: 16px 15px 18px; box-shadow: 0 1px 4px rgba(25,25,25,0.35); border-radius: 0; }
.login-card h1 { font-size: 32px; font-weight: 400; margin: 0 0 12px; color: #191919; }
.login-card .rbx-input { height: 38px; margin-bottom: 18px; font-size: 16px; }
.login-card .rbx-btn { height: 38px; font-size: 18px; font-weight: 400; }
.login-forgot { text-align: center; margin: 22px 0 0; font-size: 16px; }
.login-alt { text-align: center; font-size: 16px; margin-top: 24px; color: #191919; }
.login-alt a { margin-left: 8px; }

/* discord verification */
.discord-btn { display: block; line-height: 38px; text-decoration: none !important; background: #5865f2; color: #fff !important; }
.discord-btn:hover { background: #4752c4; }
.discord-step { font-size: 15px; color: #393b3d; margin: 0 0 16px; display: flex; gap: 10px; align-items: flex-start; }
.discord-step .step-num { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #00a2ff; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.discord-verified { background: #e5f6ec; border: 1px solid #b4e5c8; color: #02803d; border-radius: 3px; padding: 8px 10px; font-size: 15px; margin: 0 0 14px; }
.rbx-success { color: #02803d; background: #e5f6ec; border: 1px solid #b4e5c8; border-radius: 3px; padding: 8px 10px; font-size: 15px; margin-bottom: 12px; }