---
title: Web Awesome is Undergoing Maintenance
description: We're performing routine maintenance to keep things running smoothly. Check back soon!
layout: blank
permalink: 503.html
noindex: true
unlisted: true
---

{% block head %}

  <link id="site-stylesheet" rel="stylesheet" href="/assets/styles/theme-site.css" />
  <link id="site-stylesheet" rel="stylesheet" href="/assets/styles/site.css" />
{% endblock %}

<style>
  :root {
    --scene-vertical-offset: calc(var(--wa-space-2xs) * -1);
    --wa-font-family-heading: cera-round-pro;
    --vehicle-offset: 25ch;
    --vehicle-duration: 20s;
    --vehicle-start: calc(-1 * var(--vehicle-offset));
    --vehicle-end: calc(100% + var(--vehicle-offset));
  }

  html, wa-page {
    background-color: var(--wa-color-surface-lowered);
  }

  wa-icon[name='traffic-cone'] {
    --primary-color: var(--wa-color-brand-70);
    --secondary-color: var(--wa-color-text-normal);
    --secondary-opacity: 1.0;
  }

  wa-page.background-grid {
    --grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 96%);
    --subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 98%);
  }

  wa-page > [slot='main-footer'] {
    border-block-end: var(--wa-border-style) calc(var(--wa-border-width-l) * 10) var(--wa-color-text-normal);
    padding: 0;
    background-color: transparent;
  }

  .header-content {
    margin-inline: auto;
    max-width: var(--content-width-l);
    padding-inline: var(--content-padding-inline);
  }

  .icon-brand-logo {
    font-size: var(--wa-font-size-xl);
    color: var(--wa-brand-orange);
  }

  /* centering main-content */
  wa-page::part(main-content) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #content {
    max-width: var(--content-width-m);
    padding-inline: var(--content-padding-inline);
    margin-inline: auto;
  }

  .heading-stacked-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .heading-stacked-subtitle wa-icon {
    position: relative;
    inset-block-start: calc(var(--wa-space-3xs) * -0.75);
    font-size: 0.75em;
  }

  .heading-stacked-subtitle wa-icon[name="traffic-cone"] {
    --secondary-color: var(--wa-color-text-normal);
    --primary-color: var(--wa-color-brand-70);
    margin-inline: calc(var(--wa-space-xs) * -1.15) calc(var(--wa-space-xs) * -0.75);
  }

  .copy {
    code {
      font-size: 0.75em;
    }

    strong {
      text-decoration: underline;
      text-decoration-color: var(--wa-color-brand-70);
      text-decoration-thickness: var(--wa-border-width-m);
      text-underline-offset: var(--wa-space-2xs);
    }
  }

  .status {
    width: 100%;
    --min-column-size: 30ch;

    wa-callout {
      background-color: var(--wa-color-surface-default);
    }
  }

  .linkies {
    /* nudge those linkies left */
    margin-inline-start: calc(var(--wa-space-xs) * -1);

    a {
      padding-inline: var(--wa-space-xs);
    }
  }

  .scene {
    width: 100%;
    position: relative;
    overflow-x: clip;
    inset-block-end: var(--scene-vertical-offset);

    .vehicle {
      position: absolute;
      inset-inline-start: var(--vehicle-start);
      inset-block-end: 0; /* align all vehicles to bottom */
      animation: driveAcross var(--vehicle-duration) linear infinite;
      transform-origin: center;
      z-index: 1;
    }

    .vehicle-with-object {
      white-space: nowrap;
      display: flex;
      align-items: baseline;
      gap: var(--wa-space-3xs);
    }

    .scene-left {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: var(--wa-space-l);
    }

    .scene-left wa-icon[name='toilet-portable'] {
      position: relative;
      inset-block-start: var(--scene-vertical-offset);
      margin-inline: calc(var(--wa-space-xs) * -1);
    }

    .scene-left wa-icon[name='traffic-cone'] {
      position: relative;
      inset-block-start: var(--scene-vertical-offset);
    }

    .blocks {
      position: absolute;
      inset-inline-end: calc(var(--wa-space-l) * -1);
      inset-block-end: 0;
      z-index: 2;
    }

    .blocks wa-icon[name='block-brick'] {
      margin-inline: calc(var(--wa-space-xs) * -1);
    }

    .blocks-bottom {
      margin-block-start: calc(var(--wa-space-2xs) * -1);
    }

    wa-icon[family='duotone'] {
      --secondary-opacity: 1.0;
    }

    wa-icon[name='bulldozer'],
    wa-icon[name='excavator'] {
      --secondary-color: var(--wa-color-brand-70);
    }

    wa-icon[name='block-brick'],
    wa-icon[name='toilet-portable'] {
      --secondary-color: var(--wa-color-neutral-70);
    }
  }

  @keyframes driveAcross {
    0% {
      left: var(--vehicle-start);
    }
    100% {
      left: var(--vehicle-end);
    }
  }

  /* Unique rumble animations for each vehicle type */
  @keyframes rumble-bulldozer {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(0.5deg); }
    50% { transform: translateY(1px) rotate(-0.3deg); }
    75% { transform: translateY(-0.5px) rotate(0.2deg); }
  }


  /* Apply rumble animation to the single vehicle */
  .vehicle-driving { animation: driveAcross var(--vehicle-duration) linear infinite; }
  .vehicle wa-icon[name="bulldozer"] { animation: rumble-bulldozer 0.1s ease-in-out infinite; }
</style>

<wa-page disable-sticky="header" class="background-grid">
  <header slot="header">
    <div class="header-content wa-split" style="flex-wrap: nowrap;">
      <wa-icon variant="brands" name="web-awesome" class="icon-brand-logo"></wa-icon>
      <div>
        <wa-button id="contact-us-button" appearance="plain" href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome">
          <wa-icon variant="regular" name="headset" label="Need help? Contact Us" class="icon-embiggen"></wa-icon>
        </wa-button>
        <wa-tooltip for="contact-us-button" aria-hidden="true">Contact Us</wa-tooltip>
      </div>
    </div>
  </header>
  <main id="content">
    <div class="content-container wa-stack wa-gap-xl wa-align-items-center">
      <h1 class="brand-font wa-stack wa-gap-s heading heading-stacked"  style="text-align: center;">
        <span class="wa-heading-l heading-stacked-subtitle">
          under 
          <span class="wa-visually-hidden">maintenance</span>
          <span aria-hidden="true">
            m
            <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
            inten
            <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
            nce
          </span>
        </span>
        <span class="wa-heading-4xl heading-stacked-title">Hey! We're Workin&apos; Here</span>
      </h1>
      <p class="copy wa-body-l line-length line-length-m" style="text-align: center;">Mind the <code>wa-gap</code>! webawesome.com is undergoing maintenance and will be back shortly.</p>
      <div class="wa-grid wa-gap-xl status">
        <wa-callout appearance="plain" variant="neutral">
          <wa-icon slot="icon" family="duotone" variant="regular" name="diamond-exclamation" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-warning-fill-normal);"></wa-icon>
          <strong>Temporarily Unavailable</strong><br />
          Access to Docs, Accounts, and Teams
        </wa-callout>
        <wa-callout appearance="plain" variant="neutral">
          <wa-icon slot="icon" family="duotone" variant="regular" name="bolt" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-success-fill-normal);"></wa-icon>
          <strong>Fully Operational</strong><br />
          Services (such as CDNs) and Support
        </wa-callout>
      </div>
      <div class="wa-cluster wa-gap-xs linkies">
        <h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
        <a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
          <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
        </a>
        <a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
          <wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
        </a>
        <a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
          <wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
        </a>
        <a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
          <wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
        </a>
        <a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
          <wa-icon family="brands" name="threads" label="Threads"></wa-icon>
        </a>
        <a href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome" class="appearance-plain">
          <wa-icon variant="regular" name="envelope" label="Email Web Awesome"></wa-icon>
        </a>
      </div>
    </div>
  </main>
  <div slot="main-footer" class="footer">
    <div class="scene">
      <div class="scene-left wa-cluster wa-align-items-end">
        <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
        <div class="wa-cluster wa-gap-0">
          <wa-icon family="duotone" variant="regular" name="toilet-portable" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="toilet-portable" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="toilet-portable" class="wa-font-size-2xl"></wa-icon>
        </div>
        <wa-icon family="duotone" variant="regular" name="excavator" class="wa-font-size-3xl"></wa-icon>
        <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
      </div>
      <div class="blocks wa-stack wa-align-items-center wa-gap-0">
        <div class="blocks-top wa-cluster wa-gap-0">
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
        </div>
        <div class="blocks-bottom wa-cluster wa-gap-0">
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
        </div>
      </div>
      <div class="track">
        <wa-icon family="duotone" variant="regular" name="bulldozer" class="spacer-dot-gif wa-font-size-3xl" style="opacity: 0;"></wa-icon>
        <span class="vehicle vehicle-driving vehicle-with-object">
          <wa-icon family="duotone" variant="regular" name="bulldozer" class="wa-font-size-3xl"></wa-icon>
          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl" style="position: relative; inset-inline-start: calc(var(--wa-space-2xs) * -1);"></wa-icon>
        </span>
      </div>
    </div>

  </div>
</wa-page>
