Mozilla Protocol Design System.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading specimen</title></head>
<body>
<main class="reading-example mzp-t-mozilla">
  <header class="reading-top">
    <strong>MOZILLA PROTOCOL · EDITORIAL SPECIMEN</strong
    ><span>Original example by OpenDesign</span>
  </header>
  <section class="reading-hero">
    <div>
      <h1 class="mzp-u-title-lg">A little more room to read.</h1>
      <p>
        Make space for useful ideas, quieter pages, and a reading rhythm that
        feels like yours.
      </p>
      <a class="mzp-c-button" href="#reading-controls"
        >Explore the reading preview</a
      >
    </div>
    <div
      class="orb"
      role="img"
      aria-label="Original warm-to-purple circular illustration"
    ></div>
  </section>
  <div class="reading-main">
    <section id="reading-controls">
      <h2 class="mzp-u-title-xs">Choose your reading rhythm</h2>
      <p>
        Compare two application-defined densities using the same short article.
      </p>
      <div class="density-options" role="group" aria-label="Reading density">
        <button
          class="mzp-c-button mzp-t-secondary"
          data-density="comfortable"
          aria-pressed="true"
        >
          Comfortable</button
        ><button
          class="mzp-c-button mzp-t-secondary"
          data-density="compact"
          aria-pressed="false"
        >
          Compact
        </button>
      </div>
      <article id="article-sample">
        <h3 class="mzp-u-title-2xs">The open page</h3>
        <p>
          A useful page gives an idea enough room to breathe. Its headings show
          the path, its paragraphs keep a readable measure, and its controls
          remain easy to find.
        </p>
        <p>
          Changing density should preserve the story. This preview adjusts
          paragraph size and spacing without replacing the article or changing
          your place in the task.
        </p>
      </article>
      <details>
        <summary>What changes in this example?</summary>
        <p>
          Comfortable uses 16px text with 1.6 line height. Compact uses 14px
          with 1.4. These are example reading preferences, not separate official
          Protocol themes.
        </p>
      </details>
    </section>
    <aside class="signup">
      <h2 class="mzp-u-title-xs">Preview a reading digest</h2>
      <p>
        Try the form styling and local validation. No subscription is created.
      </p>
      <form id="reading-form" novalidate>
        <label for="email">Email address</label
        ><input
          id="email"
          type="email"
          autocomplete="email"
          aria-describedby="email-note email-error"
        />
        <p class="note" id="email-note">
          Use an example address. Nothing will be sent.
        </p>
        <p id="email-error" class="error" role="alert" hidden>
          Enter an email address, such as [email protected].
        </p>
        <button class="mzp-c-button" type="submit">Preview confirmation</button>
      </form>
      <div id="confirmation" tabindex="-1" role="status" hidden>
        Local preview confirmed for <strong></strong>. No email was sent.<button
          id="reset"
          class="mzp-c-button mzp-t-secondary"
          type="button"
        >
          Try another address
        </button>
      </div>
    </aside>
  </div>
  <footer class="reading-footer">
    Native Mozilla Protocol 22.0.0 CSS and fonts. Original illustration, copy
    and JavaScript; not an official Mozilla service.
  </footer>
</main>
<script type="module" src="/src/main.js"></script>
</body></html>

import "./protocol-theme.css";
import "@mozilla-protocol/core/protocol/css/protocol.css";
import "@mozilla-protocol/core/protocol/css/protocol-components.css";
import "./protocol.css";
const form = document.querySelector("#reading-form"),
  error = document.querySelector("#email-error"),
  input = document.querySelector("#email"),
  result = document.querySelector("#confirmation");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const value = input.value.trim();
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    error.hidden = false;
    input.setAttribute("aria-invalid", "true");
    input.focus();
    return;
  }
  error.hidden = true;
  input.removeAttribute("aria-invalid");
  result.hidden = false;
  result.querySelector("strong").textContent = value;
  result.focus();
});
input.addEventListener("input", () => {
  error.hidden = true;
  input.removeAttribute("aria-invalid");
  result.hidden = true;
});
document.querySelector("#reset").addEventListener("click", () => {
  form.reset();
  result.hidden = true;
  error.hidden = true;
  input.removeAttribute("aria-invalid");
  input.focus();
});
document.querySelectorAll("[data-density]").forEach((button) =>
  button.addEventListener("click", () => {
    document
      .querySelectorAll("[data-density]")
      .forEach((b) => b.setAttribute("aria-pressed", String(b === button)));
    document
      .querySelector("#article-sample")
      .classList.toggle("compact", button.dataset.density === "compact");
  }),
);

[hidden] { display: none !important; }
body {
  margin: 0;
}
.reading-example {
  background: #fff;
  color: #000;
}
.reading-top {
  padding: 24px;
  border-bottom: 1px solid #cdcdd4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
}
.reading-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr);
  gap: 48px;
  align-items: center;
  padding: 48px;
  max-width: 1152px;
  margin: auto;
}
.reading-hero h1 {
  max-width: 680px;
}
.reading-hero p {
  max-width: 580px;
}
.orb {
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 33% 32%,
    #ffea80 0 10%,
    #ff8a50 30%,
    #ff298a 55%,
    #7542e5 82%
  );
  border-radius: 50%;
  position: relative;
  box-shadow: 16px 24px 0 #f0f0f4;
}
.orb:after {
  content: "";
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  background: white;
}
.reading-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 48px;
  max-width: 1152px;
  margin: auto;
  padding: 0 48px 48px;
}
.density-options {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.density-options button {
  font-size: 12px;
  padding: 8px 12px;
}
.density-options button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #0060df;
}
#article-sample {
  padding: 24px;
  border: 1px solid #cdcdd4;
  border-radius: 8px;
  background: #f9f9fb;
}
#article-sample p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px;
}
#article-sample.compact p {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.signup {
  padding: 24px;
  background: #e7dfff;
  border-radius: 8px;
}
.signup input {
  width: 100%;
  margin-bottom: 8px;
}
.signup label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}
.signup .note {
  font-size: 12px;
  line-height: 1.5;
}
.signup .error {
  color: #a4000f;
  font-size: 14px;
  font-weight: 700;
}
.signup input[aria-invalid="true"] {
  border-color: #a4000f;
  box-shadow: 0 0 0 2px #a4000f;
}
.signup .mzp-c-button {
  width: 100%;
  margin: 8px 0;
}
#confirmation {
  padding: 16px;
  background: #e3fff3;
  margin-top: 16px;
  border-left: 4px solid #008a46;
  overflow-wrap: anywhere;
}
.reading-footer {
  padding: 24px;
  border-top: 1px solid #cdcdd4;
  font-size: 12px;
}
.reading-example details {
  margin-top: 24px;
}
.reading-example summary {
  cursor: pointer;
  font-weight: 700;
}
.reading-example details p {
  font-size: 14px;
  margin-top: 12px;
}
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #0060df;
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .reading-hero {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 24px;
  }
  .orb {
    width: 180px;
    justify-self: center;
    box-shadow: 8px 12px 0 #f0f0f4;
  }
  .reading-main {
    grid-template-columns: 1fr;
    padding: 0 24px 32px;
    gap: 32px;
  }
  .reading-top {
    flex-wrap: wrap;
  }
  .reading-hero h1 {
    font-size: 36px;
  }
  .density-options {
    flex-wrap: wrap;
  }
}

@use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla');
@use '@mozilla-protocol/core/protocol/css/includes/themes';