/* git.gmiberia.com · sign-in page branding.
 *
 * GitLab CE has no setting for a sign-in background, so Nginx serves this file
 * from /opt/gmi-branding and injects a <link> to it into every HTML page
 * (gitlab.rb → custom_gitlab_server_config). Every rule is scoped to
 * body.login-page, so the rest of GitLab is untouched.
 *
 * Cosmetic only: a GitLab upgrade that changes the sign-in markup can break the
 * look, never the sign-in itself. Check this page after every upgrade.
 * Bump ?v= in gitlab.rb after editing, or browsers keep the cached copy 7 days.
 */

/* Background: B/W archive photo under a dark veil. The photo's bright centre
 * (the windows) would otherwise compete with the white sign-in card. */
body.login-page {
  background:
    linear-gradient(rgba(14, 14, 14, 0.62), rgba(14, 14, 14, 0.62)),
    #1e1e1e url("/-/gmi-branding/archivo.webp") center / cover no-repeat fixed !important;
}

/* Title and welcome text sit on the photo (left column on desktop). */
body.login-page main .row > .col-md:not(.order-md-12) {
  color: #fff;
}
body.login-page main .row > .col-md:not(.order-md-12) :is(h1, p) {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.login-page main .row > .col-md:not(.order-md-12) a {
  color: #fff !important;
  text-decoration: underline;
}

/* The sign-in card. Its background follows GitLab's theme token, not a fixed
 * white: the page follows the OS theme (html.gl-system), and in dark mode the
 * buttons and the mobile title are light-on-dark, so on a forced white card
 * they washed out and the title vanished. */
body.login-page .bar {
  background: var(--gl-background-color-default, #fff);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  body.login-page .bar {
    padding: 24px 16px;
  }
}

/* GitLab caps the logo at 40 px high: the rectangular GMI logo with the brands
 * would be unreadable at that size. */
body.login-page .bar img.js-portrait-logo-detection {
  height: auto !important;
  width: 100%;
  max-width: min(380px, 100%);
  border-radius: 6px;
}

/* Footer links on the photo. */
body.login-page .footer-container,
body.login-page .footer-container a,
body.login-page .footer-container button {
  color: rgba(255, 255, 255, 0.85) !important;
}