/* Biz Net Technologies readability overrides.

   Loaded by partials/base.html.twig as theme://css/custom.css, i.e. after
   css-compiled/theme.min.css, so these rules win on equal specificity.

/* ===========================================================================
   PAGE-WIDE
   =========================================================================== */

/* Hero headline only: Quark ships h1 at 100, which is too thin to hold up
 * over the photo, so it gets the weight instead. The h2 under it keeps
 * Quark's own 700 and both lines end up bold. */

.title-h1h2 .hero h1 {
  font-weight: 700;
}

/* Unscrolled menu bar. Quark's near-invisible rgba(255,255,255,0.05) becomes
   a translucent white bar with dark letters, which is also how the bar looks
   once it is scrolled. It has to stay light because images/logo/logo.png is a
   black logo with opaque white fills. */

.header-transparent #header:not(.scrolled) {
  background: rgba(255, 255, 255, 0.9);
  color: #1b1f27;
}

.header-transparent #header:not(.scrolled) a {
  color: #1b1f27;
}

/* Unscrolled bar height. Still taller than the scrolled version. */

#header,
#header .navbar-section {
  height: 3rem;
}

#header .logo svg,
#header .logo img {
  height: 34px;
}

.mobile-menu .button_container {
  top: 0.9rem;
}

.header-fixed #body-wrapper {
  padding-top: 3rem;
}

/* The icons are the largest graphic area on the page. Tint them with blue. */

.modular-features .feature-icon {
  color: rgba(48, 133, 238, 0.18);
}

.modular-features .column:hover .feature-icon {
  color: rgba(48, 133, 238, 0.35);
}

/* ===========================================================================
   HERO PLATE
   Headline on a translucent white panel with dark letters. The panel uses the
   same -1.4rem overhang as .modular-features.offset-box .frame-box, so the two
   line up at every viewport width. That works because modular.html.twig
   overrides the body block, so there is no #body-wrapper on this page and both
   sit in the same section.section > .container.grid-lg chain.
   =========================================================================== */

.hero .hero-plate {
  margin: 0 -1.4rem;
  padding: 1.75rem 1.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 75px 0 rgba(69, 77, 93, 0.1);
}

.hero .hero-plate h1 {
  margin-top: 0;
  color: #1b1f27;
}

.hero .hero-plate h1 + h2 {
  margin-bottom: 0;
  color: #2570cf;
}

/* The chevron sits on the bare photo, below the panel. It gets it's own
   little white disk. */

.hero #to-start {
  color: #1b1f27;
  width: 2.4rem;
  height: 2.4rem;
  line-height: 2.4rem;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}