/* The shop (public host). For now, the "under construction" sign. */

@layer components {
  .coming-soon {
    max-width: 34rem;
    margin: 3rem auto;
    text-align: center;

    h1 {
      font-size: 3.4rem;
      margin-bottom: 0.4rem;

      @media (max-width: 640px) { font-size: 2.6rem; }
    }
    p { margin-inline: auto; }
  }
  .coming-soon-tagline {
    font-size: 1.25rem;
    color: var(--muted);
    margin-bottom: 2rem;
  }

  /* A road-works sign: black and white stripes around a white plate. */
  .coming-soon-sign {
    display: inline-block;
    padding: 0.5rem;
    border: 3px solid var(--ink);
    border-radius: var(--radius-box);
    background: repeating-linear-gradient(
      -45deg, var(--ink) 0 12px, var(--paper) 12px 24px);
    margin-bottom: 1.5rem;

    span {
      display: block;
      padding: 0.6rem 1.4rem;
      background: var(--paper);
      border: 3px solid var(--ink);
      border-radius: 8px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
  }
}