/* The landing page at /auth/ (themes/quartal/welcome/index.ftl). PatternFly v5 is loaded first
 * (stylesCommon); this file is the layout plus the brand tokens, which follow the login themes:
 * Quartal #1B587C (themes/quartal/login/resources/css/brand.css), Salaxy #3C1EEB
 * (themes/salaxy/login/resources/css/brand.css). index.ftl sets <html data-brand>. */

:root {
  --welcome-brand: #1B587C;
  --welcome-brand-dark: #154562;
}
html[data-brand="salaxy"] {
  --welcome-brand: #3C1EEB;
  --welcome-brand-dark: #2F17B8;
}

html, body {
  margin: 0;
  min-height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--welcome-brand);
  font-family: var(--pf-v5-global--FontFamily--text);
  color: var(--pf-v5-global--Color--100);
}

/* The wrapper spans the viewport and the card centres itself with auto margins. Centring the
 * wrapper instead would let long text widen it to the viewport and leave the card at the left. */
.welcome {
  width: 100%;
}
.welcome__card {
  width: min(26rem, calc(100% - 2rem));
  margin: 1rem auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--pf-v5-global--BoxShadow--lg);
}

/* Brand band with the logo. The Quartal logo is white on transparent; the Salaxy logo carries a
 * white background and sits on a white panel, as on its login page. */
.welcome__header {
  background: var(--welcome-brand);
  padding: 1.5rem;
  text-align: center;
  line-height: 0;
}
.welcome__header img {
  height: 59px;
  max-width: 100%;
}
html[data-brand="salaxy"] .welcome__header img {
  height: 40px;
  padding: 8px 16px;
  box-sizing: content-box;
  background: #fff;
  border-radius: 6px;
}

.welcome__body {
  padding: 1.5rem;
  text-align: center;
}
.welcome__body h1 {
  margin: 0 0 0.5rem;
}
.welcome__lead {
  margin: 0 0 1.5rem;
  color: var(--pf-v5-global--Color--200);
}
.welcome__alert {
  margin-bottom: 1rem;
  text-align: left;
}
.welcome__body code {
  font-size: var(--pf-v5-global--FontSize--sm);
}

/* Primary action in the brand colour */
.welcome__account.pf-v5-c-button.pf-m-primary {
  background-color: var(--welcome-brand);
  border-color: var(--welcome-brand);
  text-decoration: none;
}
.welcome__account.pf-v5-c-button.pf-m-primary:hover,
.welcome__account.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--welcome-brand-dark);
  border-color: var(--welcome-brand-dark);
}

/* The admin consoles: small, secondary */
.welcome__admin {
  margin: 1.25rem 0 0;
  font-size: var(--pf-v5-global--FontSize--sm);
  color: var(--pf-v5-global--Color--200);
}
.welcome__admin a {
  color: var(--welcome-brand);
}
.welcome__admin a:hover {
  color: var(--welcome-brand-dark);
}