/* Login page and not-found page of the demonstration site.
   Colours are REVOV palette values from brand/tokens/revov.css. Roboto is served from this
   folder. No file is loaded from another origin. */

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/roboto-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-latin-700-normal.woff2") format("woff2");
}

:root {
  --rev-red: #7F3636;       /* Grimson Red */
  --rev-red-deep: #5C2727;  /* derived pressed state */
  --rev-black: #222121;     /* Dark Black */
  --rev-battery: #3B3B3B;   /* Battery Grey */
  --rev-ash: #666868;       /* Ash Grey */
  --rev-light: #CBCBCB;     /* Light Grey, linework only */
  --rev-white: #FFFFFF;
  --rev-r: 3px;
  --logo-width: 17rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The root size follows the viewport height above 1080 pixels, so the page keeps its
   proportions on a large display. */
html {
  height: 100%;
  background: var(--rev-black);
  font-size: clamp(100%, 1.4815vh, 200%);
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--rev-black);
  color: var(--rev-white);
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.gate {
  width: 100%;
  max-width: 25rem;
  animation: gate-in 240ms ease-out both;
}

/* Reversed logo. The file is the unaltered brand asset, 2282 by 1559 pixels. Its artwork
   sits on a transparent field, and the file carries an opaque white margin around that
   field. Only a window of 1940 by 1286 pixels at 120, 160 inside the transparent field is
   shown, at uniform scale. The margin below the box and the page padding keep the clear
   space of half the height of the O free of other elements. */
.logo {
  position: relative;
  width: var(--logo-width);
  max-width: 100%;
  aspect-ratio: 1940 / 1286;
  margin: 0 auto 2.25rem;
  overflow: hidden;
}

.logo img {
  position: absolute;
  left: -6.1856%;
  top: -12.4417%;
  width: 117.6289%;
  max-width: none;
  height: auto;
  display: block;
}

.panel {
  padding: 2rem 2rem 2.25rem;
  background: var(--rev-battery);
  border-top: 3px solid var(--rev-red);
  border-radius: var(--rev-r);
}

h1 {
  margin: 0 0 1.5rem;
  font-size: 1.625rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input {
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0 0.875rem;
  background: var(--rev-black);
  color: var(--rev-white);
  border: 1px solid var(--rev-ash);
  border-radius: var(--rev-r);
  font: inherit;
  letter-spacing: 0.02em;
}

input:hover {
  border-color: var(--rev-light);
}

input[aria-invalid="true"] {
  border-color: var(--rev-white);
}

button,
.button {
  display: block;
  width: 100%;
  height: 3rem;
  margin: 1.5rem 0 0;
  padding: 0 1rem;
  background: var(--rev-red);
  color: var(--rev-white);
  border: 0;
  border-radius: var(--rev-r);
  font: inherit;
  font-weight: 500;
  line-height: 3rem;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

button:hover,
.button:hover,
button:active,
.button:active {
  background: var(--rev-red-deep);
}

button:disabled {
  background: var(--rev-red-deep);
  cursor: progress;
}

input:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--rev-white);
  outline-offset: 2px;
}

.message {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--rev-black);
  border-left: 3px solid var(--rev-red);
  border-radius: var(--rev-r);
  font-size: 0.9375rem;
}

/* Without script, the auth service redirects a failed sign-in to the fragment of the
   message, which shows it. */
.message:target {
  display: block;
}

.scripted .message[hidden] {
  display: none;
}

.body {
  margin: 0;
}

.note {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 300;
  text-align: center;
}

@keyframes gate-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate {
    animation: none;
  }

  button,
  .button {
    transition: none;
  }
}

@media (max-width: 26rem) {
  body {
    padding: 2.5rem 1rem 2rem;
  }

  .panel {
    padding: 1.5rem 1.25rem 1.75rem;
  }
}