/* CS Tutorials — the gate stylesheet.
 *
 * Deliberately standalone: the gate has to draw before any of the site's
 * own files are allowed through, and it is served by a Function rather than
 * as a static page, so it cannot rely on the site's stylesheet being the
 * version that is deployed. Same colours as the site: navy, gold, orange.
 */

.gate-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 40px;
  background: radial-gradient(1200px 600px at 50% -10%, #16304f 0%, #0b1526 55%, #070d17 100%);
  color: #eef3fa;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gate {
  width: 100%;
  max-width: 430px;
  background: #101d33;
  border: 1px solid #22375a;
  border-radius: 18px;
  padding: 22px 20px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.gate__brand {
  margin: 0 0 18px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #d4af37;
}

.gate__brand span {
  display: block;
  margin-top: 3px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8ba0bd;
}

.gate__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  line-height: 1.25;
}

.gate__sub {
  margin: 0 0 16px;
  font-size: .9rem;
  color: #9fb2cc;
}

.gate__codebox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid #3a3320;
  background: rgba(212, 175, 55, .08);
  text-align: center;
}

.gate__code {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-indent: .28em;
  color: #f4d67a;
  font-variant-numeric: tabular-nums;
}

.gate__copy {
  align-self: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #d4af37;
  background: transparent;
  color: #f4d67a;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}

.gate__copy:active,
.gate__copy:hover {
  background: rgba(212, 175, 55, .16);
}

.gate__copy[data-done="1"] {
  border-color: #6fd08c;
  color: #8ff0aa;
}

/* The membership offer.
 *
 * It sits between the code and the form, and that placement is the point: the
 * code box is the one thing every visitor looks at, so a line here is read by
 * somebody who is not in yet — the only audience the offer is written for.
 * Under the form it was scrolled past; above it, the offer is the second thing
 * on the card. It is deliberately short, so the Enter button stays within
 * reach without a scroll.
 */
.gate__offer {
  margin: 16px 0 0;
  padding: 13px 14px 14px;
  border-radius: 14px;
  border: 1px solid #d4af37;
  background: rgba(212, 175, 55, .1);
  text-align: center;
}

.gate__offer-k {
  margin: 0 0 5px;
  font-size: .95rem;
  font-weight: 700;
  color: #f4d67a;
}

.gate__offer-p {
  margin: 0 0 11px;
  font-size: .8rem;
  line-height: 1.5;
  color: #cbd8ea;
}

/* Two classes deep so it outranks the plain `.gate a` rule above, which is
   there to make ordinary links legible on navy. This one is a button. */
.gate a.gate__offer-go {
  display: block;
  padding: 11px 14px;
  border-radius: 999px;
  background: #d4af37;
  color: #1a1206;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.gate a.gate__offer-go:hover,
.gate a.gate__offer-go:active {
  background: #f4d67a;
  color: #1a1206;
}

.gate__form {
  margin: 20px 0 0;
}

.gate__form label {
  display: block;
  margin: 0 0 6px;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8ba0bd;
}

.gate__form input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  margin: 0 0 14px;
  border-radius: 11px;
  border: 1px solid #22375a;
  background: #0b1526;
  color: #eef3fa;
  font: inherit;
}

#gate-key {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-align: center;
  text-transform: uppercase;
}

.gate__form input:focus {
  outline: 2px solid #e07b2a;
  outline-offset: 1px;
}

.gate__note {
  margin: -8px 0 16px;
  font-size: .78rem;
  line-height: 1.5;
  color: #8ba0bd;
}

.gate__go {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0913c, #d9661d);
  color: #23130a;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.gate__go[disabled] {
  opacity: .6;
  cursor: default;
}

.gate__msg {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: #f4d67a;
}

.gate__msg--bad {
  color: #ff9e9e;
}

.gate__foot {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid #1b2b45;
  font-size: .78rem;
  line-height: 1.6;
  color: #8ba0bd;
}

.gate__foot a {
  color: #f4d67a;
}

/* Links on the gate itself. They are printed on navy, where the browser’s own
   blue is close to unreadable — and the one link that matters is the way to the
   membership page, which has to be findable by somebody who is not in yet. */
.gate a { color: #f4d67a; }
.gate a:hover { color: #ffffff; }

/* The line under the form, for somebody who is already a member. Added 16 Oct
   with the members' room: the gate is where every visitor arrives, so it is the
   one place a member who has forgotten the address will look for their own
   material — and the noticeboard is open to anybody who has entered. */
.gate__member {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 12px;
  background: rgba(212, 175, 55, .06);
  font-size: .86rem;
  line-height: 1.55;
  color: #cbd9ea;
  text-align: center;
}

.gate__member a { color: #f4d67a; font-weight: 700; }