Retro Web Design

/* via superdesign.dev/styles/retro */

/* (1) Win95/98 window chrome.
   border-style outset/inset IS the whole trick. But the light/shadow
   faces are derived from the element color, so a colorless outset on a
   dark-text element renders nearly flat. Always set a light border color. */
.win95 {
  background: #c0c0c0;
  border: 2px outset #dfdfdf;     /* raised */
  box-shadow: 1px 1px 0 #000;
  padding: 2px;
}
.win95 .field {
  background: #fff;
  border: 2px inset #808080;      /* sunken */
  padding: 4px 6px;
}
.win95-btn {
  background: #c0c0c0;
  border: 2px outset #dfdfdf;
  padding: 4px 14px;
  color: #000;
}
.win95-btn:active { border-style: inset; }   /* pressed: outset -> inset */

/* (2) blue gradient title bar */
.titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
  padding: 3px 4px;
}

/* (3) CRT scanlines as a non-interactive overlay */
.crt { position: relative; }
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0, 0, 0, 0.35) 3px
  );
}

/* (4) tiled starfield.
   Use SEPARATE background-color + background-image. The shorthand
   "background: #000 radial-gradient(), radial-gradient()" with a color
   prefix in front of MULTIPLE gradient layers fails to parse and the
   whole background-image computes to none (browser-verified). */
.starfield {
  background-color: #000014;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 70px, #fff, transparent),
    radial-gradient(1px 1px at 130px 20px, #cfe, transparent),
    radial-gradient(2px 2px at 50px 100px, #fff, transparent);
  background-size: 160px 160px;
  background-repeat: repeat;
}

/* (5) chrome / embossed heading via stacked text-shadow */
.chrome-heading {
  color: #e8e8e8;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #888,
    0 3px 0 #444,
    0 4px 6px rgba(0, 0, 0, 0.6);
}

/* (6) dotted divider */
.retro-divider { border-top: 1px dotted #fff; }

/* (7) CSS-only animated banner: the non-deprecated <marquee> replacement.
   Honor prefers-reduced-motion so it does not move for users who opt out. */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scrollx 8s linear infinite;
}
@keyframes scrollx {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none; padding-left: 8px; }
}