/* EEVEX — black, silver, and the yellow rule from the lockup. */

:root {
  --eevex-yellow: #f6e200;
  --eevex-silver: #c8c8c8;
  --eevex-black: #000000;
}

header.sticky {
  background: #000 !important;
  border-bottom: 2px solid var(--eevex-yellow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header > div:first-child {
  height: auto !important;
  min-height: 4.6rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

header {
  color: #e8e8e8;
}

header > div:first-child .text-muted {
  color: #b5b5b5 !important;
}

header nav a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

header > div:first-child nav a {
  color: var(--eevex-silver) !important;
}

header > div:first-child nav a:hover,
header > div:first-child .text-cyan,
html.light header > div:first-child .text-cyan,
html.light header > div:first-child .hover\:text-cyan:hover {
  color: var(--eevex-yellow) !important;
}

/* Jobsite photography. Scrim the side with the headline; leave the machine visible. */
section.relative > img[src="/images/job-pit.jpg"] {
  opacity: 1 !important;
  object-position: center 18% !important;
}

section.relative > img[src="/images/job-pit.jpg"] + div,
html.light section.relative > img[src="/images/job-pit.jpg"] + div {
  background: linear-gradient(
    90deg,
    rgba(243, 243, 243, 0.94) 0%,
    rgba(243, 243, 243, 0.86) 38%,
    rgba(243, 243, 243, 0.28) 66%,
    rgba(243, 243, 243, 0.08) 100%
  ) !important;
}

section.relative > img[src="/images/job-pit.jpg"] + div + div {
  opacity: 0.22 !important;
}

img[src="/images/job-load.jpg"] {
  object-position: center 30%;
}

.eevex-logo {
  display: block;
  height: 46px;
  width: auto;
}

.eevex-logo-sm {
  height: 36px;
}

footer .eevex-logo {
  height: 58px;
}

@media (min-width: 640px) {
  header .eevex-logo {
    height: 54px;
  }

  footer .eevex-logo {
    height: 68px;
  }
}

footer {
  background: #000 !important;
  border-top: 2px solid var(--eevex-yellow) !important;
  color: #f0f0f0;
}

footer .text-foreground,
html.light footer .text-foreground {
  color: #f3f3f3 !important;
}

footer .text-muted,
footer a,
html.light footer .text-muted,
html.light footer a,
html.light footer .text-cyan {
  color: #a3a3a3 !important;
}

footer a:hover,
html.light footer a:hover,
html.light footer .hover\:text-cyan:hover {
  color: var(--eevex-yellow) !important;
}

.brand-rule {
  background: var(--eevex-yellow) !important;
  height: 3px;
}

.rounded-full {
  border-radius: 2px !important;
}

.rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-md {
  border-radius: 2px !important;
}

::selection {
  background: var(--eevex-yellow);
  color: #111;
}

/* Bright yellow fails as text on the light surface. Keep it for fills. */
html.light .text-cyan,
html.light .hover\:text-cyan:hover {
  color: #7a6400 !important;
}

html.light .bg-cyan {
  background-color: var(--eevex-yellow) !important;
}

html.light a.bg-cyan,
html.light button.bg-cyan {
  color: #111 !important;
}

/* Day mode only. Later than the compiled stylesheet, so it wins even if that file is cached. */
:root {
  --background: #f3f3f3;
  --foreground: #111111;
  --muted: #5c5c5c;
  --surface: #ffffff;
  --surface-2: #e8e8e8;
  --border: #d2d2d2;
  --forest: #111111;
  --cyan: #f6e200;
  --cyan-dim: #b6a400;
  --terracotta: #8a8a8a;
  --ring: #c9b800;
}
html {
  color-scheme: light !important;
}
header button[aria-label="Switch to light mode"],
header button[aria-label="Switch to dark mode"] {
  display: none !important;
}