UI-Komponenten Easy

News — Masthead / Nameplate Variants

A nameplate variant gallery for a fictional daily, built on an editorial newsprint design system in Playfair Display and Inter. Five distinct mastheads — a classic centered broadsheet with a Latin motto and flanking date and price, a lean left-aligned modern wordmark, a condensed all-caps tabloid over a red banner, a heavy gothic plate with small-caps strips, and an airy tracked magazine treatment — each frame a live front-page preview with hairline rules, edition lines, and a dateline. Vanilla JS switches variants and edits the paper name live.

In Lab öffnen

html css vanilla-js

Targets: JS HTML

Code

/* =========================================================
   News — Masthead / Nameplate Variants
   Editorial newsprint design system
   ========================================================= */

:root {
  /* Paper / ink palette */
  --cream: #f4efe4;
  --paper: #faf7f0;
  --white: #ffffff;
  --newsprint: #efe9da;
  --ink: #16130f;
  --ink-2: #2b2620;
  --ink-3: #4a443b;
  --muted: #7a7164;
  --red: #b4291f;
  --red-d: #8f1f17;
  --red-50: #f3dcd9;

  /* Rules */
  --rule: rgba(22, 19, 15, 0.16);
  --rule-2: rgba(22, 19, 15, 0.3);
  --rule-hair: rgba(22, 19, 15, 0.1);

  /* Status */
  --ok: #2f7d4f;
  --warn: #b67a18;
  --danger: #b4291f;

  /* Radii — editorial = mostly sharp */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Fonts */
  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.5;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

/* Subtle newsprint texture on the page background */
.page {
  min-height: 100vh;
  background-image:
    radial-gradient(rgba(22, 19, 15, 0.025) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* =========================================================
   CONTROL BAR
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid var(--red);
}

.topbar__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}

.topbar__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 22px);
  letter-spacing: 0.01em;
}

.topbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.62);
}

.field__input {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  width: min(280px, 64vw);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(250, 247, 240, 0.18);
  border-radius: var(--r-sm);
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.field__input:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-50);
}

/* Segmented variant switcher */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  background: rgba(250, 247, 240, 0.08);
  border: 1px solid rgba(250, 247, 240, 0.16);
  border-radius: var(--r-md);
}

.seg__btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.74);
  background: transparent;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.seg__btn:hover {
  color: var(--paper);
  background: rgba(250, 247, 240, 0.07);
}

.seg__btn.is-active {
  color: var(--ink);
  background: var(--paper);
}

.seg__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* =========================================================
   PAPER / PREVIEW CANVAS
   ========================================================= */

.paper {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(14px, 3vw, 32px) 56px;
}

.sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(22, 19, 15, 0.04), 0 18px 40px -28px rgba(22, 19, 15, 0.35);
  padding: clamp(20px, 3.5vw, 40px);
  transition: background 0.3s ease;
}

/* =========================================================
   MASTHEAD — base structure (variants restyle below)
   ========================================================= */

.masthead {
  text-align: center;
}

.masthead__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 7px 0;
}

.masthead__strip--top {
  border-bottom: 1px solid var(--ink);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.masthead__strip--bottom {
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
  margin-bottom: 22px;
}

.masthead__weather,
.masthead__slogan {
  text-align: center;
  flex: 1;
}

.masthead__edition,
.masthead__price {
  font-weight: 700;
  color: var(--ink-2);
}

.masthead__slogan {
  font-style: italic;
  letter-spacing: 0.02em;
}

.masthead__core {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 0 12px;
}

.masthead__motto {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink-3);
}

.masthead__motto--left {
  text-align: right;
  font-style: italic;
}

.masthead__motto--right {
  text-align: left;
}

.masthead__motto strong {
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}

.masthead__name {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(34px, 8vw, 76px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
}

/* =========================================================
   VARIANT 1 — BROADSHEET (classic centered, motto + flanks)
   ========================================================= */

.sheet[data-variant="broadsheet"] .masthead__name {
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* =========================================================
   VARIANT 2 — MODERN (left-aligned, lean rules)
   ========================================================= */

.sheet[data-variant="modern"] .masthead {
  text-align: left;
}

.sheet[data-variant="modern"] .masthead__strip--top {
  border-bottom: 2px solid var(--red);
}

.sheet[data-variant="modern"] .masthead__strip--bottom {
  border-bottom: 1px solid var(--ink);
}

.sheet[data-variant="modern"] .masthead__core {
  grid-template-columns: 1fr auto;
  align-items: end;
  text-align: left;
  padding: 18px 0 14px;
}

.sheet[data-variant="modern"] .masthead__motto--left {
  display: none;
}

.sheet[data-variant="modern"] .masthead__name {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 7vw, 64px);
}

.sheet[data-variant="modern"] .masthead__motto--right {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  align-self: end;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   VARIANT 3 — TABLOID (condensed, loud, red banner)
   ========================================================= */

.sheet[data-variant="tabloid"] .masthead__strip--top {
  background: var(--red);
  color: var(--paper);
  border-bottom: none;
  padding: 8px 14px;
  margin: 0 -2px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.sheet[data-variant="tabloid"] .masthead__strip--top .masthead__edition,
.sheet[data-variant="tabloid"] .masthead__strip--top .masthead__vol {
  color: var(--paper);
}

.sheet[data-variant="tabloid"] .masthead__strip--top .masthead__weather {
  color: rgba(250, 247, 240, 0.85);
}

.sheet[data-variant="tabloid"] .masthead__core {
  grid-template-columns: 1fr;
  padding: 10px 0 8px;
}

.sheet[data-variant="tabloid"] .masthead__motto {
  display: none;
}

.sheet[data-variant="tabloid"] .masthead__name {
  font-weight: 900;
  font-size: clamp(44px, 12vw, 104px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.86;
  transform: scaleY(1.12);
  transform-origin: center bottom;
}

.sheet[data-variant="tabloid"] .masthead__strip--bottom {
  border-bottom: 4px solid var(--red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sheet[data-variant="tabloid"] .masthead__slogan {
  font-style: normal;
}

/* =========================================================
   VARIANT 4 — GOTHIC (heavy blackletter feel)
   ========================================================= */

.sheet[data-variant="gothic"] .masthead__strip {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.sheet[data-variant="gothic"] .masthead__core {
  padding: 20px 0 14px;
}

.sheet[data-variant="gothic"] .masthead__name {
  font-weight: 900;
  font-style: normal;
  font-size: clamp(38px, 9vw, 82px);
  letter-spacing: 0.02em;
  text-shadow: 0.5px 0 0 var(--ink), -0.5px 0 0 var(--ink);
}

.sheet[data-variant="gothic"] .masthead__motto {
  font-style: italic;
  font-size: 14px;
}

.sheet[data-variant="gothic"] .masthead__strip--top,
.sheet[data-variant="gothic"] .masthead__strip--bottom {
  border-color: var(--ink);
  border-width: 1px;
}

.sheet[data-variant="gothic"] .masthead__strip--bottom {
  border-bottom: 3px double var(--ink);
}

.sheet[data-variant="gothic"] .masthead__name::before,
.sheet[data-variant="gothic"] .masthead__name::after {
  content: "❧";
  font-size: 0.4em;
  vertical-align: middle;
  color: var(--ink-3);
  margin: 0 0.3em;
}

/* =========================================================
   VARIANT 5 — MAGAZINE (minimal, airy, sans-lean)
   ========================================================= */

.sheet[data-variant="magazine"] .masthead {
  text-align: center;
}

.sheet[data-variant="magazine"] .masthead__strip--top {
  border-bottom: 1px solid var(--rule);
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-size: 10px;
}

.sheet[data-variant="magazine"] .masthead__strip--bottom {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
}

.sheet[data-variant="magazine"] .masthead__core {
  grid-template-columns: 1fr;
  padding: 34px 0 30px;
}

.sheet[data-variant="magazine"] .masthead__motto {
  display: none;
}

.sheet[data-variant="magazine"] .masthead__name {
  font-weight: 500;
  font-size: clamp(40px, 10vw, 88px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sheet[data-variant="magazine"] .masthead__slogan {
  font-style: normal;
}

/* =========================================================
   FRONT PAGE — column grid for context
   ========================================================= */

.frontpage {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 0;
}

.frontpage__lead {
  padding-right: clamp(20px, 3vw, 34px);
  border-right: 1px solid var(--rule);
}

.frontpage__rail {
  padding-left: clamp(20px, 3vw, 30px);
}

.kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.kicker--muted {
  color: var(--muted);
}

.headline {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.45;
  color: var(--ink-3);
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-hair);
}

/* Figures / simulated press photography */
.figure {
  margin: 0 0 18px;
}

.photo {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
}

.photo--harbor {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 80% at 70% 18%, rgba(244, 222, 217, 0.5), transparent 55%),
    radial-gradient(90% 120% at 18% 90%, rgba(22, 19, 15, 0.62), transparent 60%),
    linear-gradient(180deg, #6d5b4e 0%, #4a3d35 38%, #2b2620 78%, #16130f 100%),
    linear-gradient(90deg, rgba(180, 41, 31, 0.16), transparent 60%);
  background-blend-mode: screen, multiply, normal, overlay;
  position: relative;
}

.photo--harbor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 22px),
    radial-gradient(50% 30% at 78% 30%, rgba(244, 239, 228, 0.4), transparent 70%);
  mix-blend-mode: screen;
}

.photo--lamp {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(40% 30% at 50% 32%, rgba(244, 212, 150, 0.6), transparent 60%),
    linear-gradient(180deg, #3a342c 0%, #211d18 55%, #16130f 100%);
  background-blend-mode: screen, normal;
  position: relative;
}

.photo--lamp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(8% 22% at 50% 40%, rgba(255, 226, 160, 0.85), transparent 70%);
  mix-blend-mode: screen;
}

.figure__cap {
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-3);
  padding: 6px 0 0;
  border-top: 2px solid var(--red);
  margin-top: 5px;
}

.figure__credit {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* Body text — justified columns with drop cap + pull quote */
.frontpage__lead .body,
.frontpage__lead .pullquote {
  /* Allow the body to flow as text columns on wide screens */
}

.body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  text-align: justify;
  hyphens: auto;
  margin-bottom: 12px;
}

.body--drop::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 3.6em;
  line-height: 0.78;
  padding: 4px 10px 0 0;
  color: var(--ink);
}

.pullquote {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  text-align: left;
  margin: 18px 0;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--red);
}

.pullquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 8px;
}

/* Rail */
.railitem {
  margin-bottom: 4px;
}

.railitem__head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.12;
  margin-bottom: 8px;
  text-wrap: balance;
}

.railitem__sum {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.byline {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hair {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 18px 0;
}

.photo--lamp {
  border: 1px solid var(--rule);
}

/* =========================================================
   VARIANT GALLERY
   ========================================================= */

.gallery {
  margin-top: clamp(28px, 5vw, 48px);
}

.gallery__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 26px;
  padding-top: 26px;
  border-top: 3px double var(--ink);
}

.gallery__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.05;
  margin: 6px 0 10px;
}

.gallery__lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.plate {
  appearance: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.plate:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(22, 19, 15, 0.5);
}

.plate:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.plate.is-active {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.plate__preview {
  padding: 18px 16px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}

.plate__name {
  font-family: var(--serif);
  font-weight: 900;
  color: var(--ink);
  line-height: 0.96;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plate__rule {
  height: 2px;
  background: var(--ink);
  margin-top: 8px;
}

/* per-plate preview flavor */
.plate--broadsheet .plate__name {
  text-align: center;
  font-size: clamp(15px, 3.2vw, 19px);
  letter-spacing: 0.01em;
}
.plate--broadsheet .plate__rule {
  background: var(--ink);
}

.plate--modern .plate__name {
  text-align: left;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(16px, 3.4vw, 20px);
}
.plate--modern .plate__rule {
  background: var(--red);
}

.plate--tabloid .plate__name {
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(17px, 3.8vw, 22px);
  transform: scaleY(1.12);
}
.plate--tabloid .plate__preview {
  background: linear-gradient(180deg, var(--red-50), var(--paper));
}
.plate--tabloid .plate__rule {
  background: var(--red);
  height: 3px;
}

.plate--gothic .plate__name {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: clamp(15px, 3.2vw, 19px);
  text-shadow: 0.4px 0 0 var(--ink), -0.4px 0 0 var(--ink);
}

.plate--magazine .plate__name {
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(13px, 2.8vw, 16px);
}
.plate--magazine .plate__rule {
  background: var(--rule-2);
  height: 1px;
}

.plate__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px 13px;
}

.plate__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.plate__desc {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.plate__badge {
  display: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.plate.is-active .plate__badge {
  display: inline;
}

/* =========================================================
   FOOTER + TOAST
   ========================================================= */

.pagefoot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 40px) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--red);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 60;
  max-width: min(90vw, 420px);
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
  .frontpage {
    grid-template-columns: 1fr;
  }
  .frontpage__lead {
    padding-right: 0;
    border-right: none;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--rule);
  }
  .frontpage__rail {
    padding-left: 0;
  }
}

@media (max-width: 720px) {
  .masthead__strip {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 4px 12px;
  }
  .masthead__weather,
  .masthead__slogan {
    flex-basis: 100%;
    order: 3;
  }
  .masthead__core {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .masthead__motto--left,
  .masthead__motto--right {
    text-align: center;
  }
  .sheet[data-variant="broadsheet"] .masthead__motto {
    font-size: 11px;
  }
  .sheet[data-variant="modern"] .masthead__core {
    grid-template-columns: 1fr;
  }
  .sheet[data-variant="modern"] .masthead__motto--right {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .topbar__controls {
    width: 100%;
  }
  .field__input {
    width: 100%;
  }
  .seg {
    width: 100%;
    justify-content: center;
  }
  .gallery__grid {
    grid-template-columns: 1fr;
  }
  .sheet[data-variant="tabloid"] .masthead__name {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   News — Masthead / Nameplate Variants
   Vanilla JS: variant switching, live name editing, gallery
   ========================================================= */
(function () {
  "use strict";

  /* ---- Variant catalogue ---------------------------------------------- */
  var VARIANTS = [
    {
      id: "broadsheet",
      label: "Broadsheet",
      desc: "Centered · Latin motto",
      note: "Classic centered nameplate flanked by a Latin motto and an Est. line.",
    },
    {
      id: "modern",
      label: "Modern",
      desc: "Left-aligned · red rule",
      note: "Lean, left-aligned wordmark with a single red hairline.",
    },
    {
      id: "tabloid",
      label: "Tabloid",
      desc: "Condensed · all caps",
      note: "Loud condensed caps over a red edition banner.",
    },
    {
      id: "gothic",
      label: "Gothic",
      desc: "Heavy · ornamented",
      note: "Heavy serif with small-caps strips and leaf ornaments.",
    },
    {
      id: "magazine",
      label: "Magazine",
      desc: "Minimal · tracked",
      note: "Airy, widely-tracked minimal wordmark.",
    },
  ];

  /* ---- Element refs ---------------------------------------------------- */
  var sheet = document.getElementById("sheet");
  var nameEl = document.getElementById("masthead-name");
  var dateEl = document.getElementById("masthead-date");
  var input = document.getElementById("paper-name");
  var segButtons = Array.prototype.slice.call(
    document.querySelectorAll(".seg__btn")
  );
  var grid = document.getElementById("gallery-grid");
  var toastEl = document.getElementById("toast");

  var current = "broadsheet";
  var DEFAULT_NAME = (input && input.value) || "The Meridian Courier";

  /* ---- Toast helper ---------------------------------------------------- */
  var toastTimer = null;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.classList.add("is-show");
    if (toastTimer) clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-show");
    }, 2200);
  }

  /* ---- Live dateline --------------------------------------------------- */
  function setDate() {
    if (!dateEl) return;
    var d = new Date();
    var opts = {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    };
    try {
      dateEl.textContent = d.toLocaleDateString("en-US", opts);
    } catch (e) {
      /* leave the server-rendered fallback */
    }
  }

  /* ---- Apply a variant to the live preview ----------------------------- */
  function applyVariant(id, announce) {
    var meta = null;
    for (var i = 0; i < VARIANTS.length; i++) {
      if (VARIANTS[i].id === id) {
        meta = VARIANTS[i];
        break;
      }
    }
    if (!meta) return;
    current = id;

    if (sheet) sheet.setAttribute("data-variant", id);

    segButtons.forEach(function (btn) {
      var active = btn.getAttribute("data-variant") === id;
      btn.classList.toggle("is-active", active);
      btn.setAttribute("aria-selected", active ? "true" : "false");
    });

    if (grid) {
      Array.prototype.forEach.call(grid.children, function (card) {
        card.classList.toggle(
          "is-active",
          card.getAttribute("data-variant") === id
        );
      });
    }

    if (announce) toast("Applied the " + meta.label + " nameplate.");
  }

  /* ---- Live name editing ----------------------------------------------- */
  function syncName(raw) {
    var name = (raw == null ? "" : raw).replace(/\s+/g, " ").trim();
    var display = name || DEFAULT_NAME;
    if (nameEl) nameEl.textContent = display;
    // Update every gallery plate preview
    if (grid) {
      Array.prototype.forEach.call(
        grid.querySelectorAll(".plate__name"),
        function (el) {
          el.textContent = display;
        }
      );
    }
  }

  /* ---- Build the gallery of nameplates ---------------------------------- */
  function buildGallery() {
    if (!grid) return;
    grid.innerHTML = "";
    var name = (input && input.value.trim()) || DEFAULT_NAME;

    VARIANTS.forEach(function (v) {
      var card = document.createElement("button");
      card.type = "button";
      card.className = "plate plate--" + v.id;
      card.setAttribute("data-variant", v.id);
      card.setAttribute(
        "aria-label",
        "Apply the " + v.label + " nameplate to the live edition"
      );

      var preview = document.createElement("div");
      preview.className = "plate__preview";

      var pname = document.createElement("div");
      pname.className = "plate__name";
      pname.textContent = name;

      var rule = document.createElement("div");
      rule.className = "plate__rule";

      preview.appendChild(pname);
      preview.appendChild(rule);

      var metaRow = document.createElement("div");
      metaRow.className = "plate__meta";

      var label = document.createElement("span");
      label.className = "plate__label";
      label.textContent = v.label;

      var badge = document.createElement("span");
      badge.className = "plate__badge";
      badge.textContent = "Live";
      label.appendChild(document.createTextNode(" "));
      label.appendChild(badge);

      var desc = document.createElement("span");
      desc.className = "plate__desc";
      desc.textContent = v.desc;

      metaRow.appendChild(label);
      metaRow.appendChild(desc);

      card.appendChild(preview);
      card.appendChild(metaRow);

      card.addEventListener("click", function () {
        applyVariant(v.id, true);
        if (sheet && sheet.scrollIntoView) {
          sheet.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      });

      grid.appendChild(card);
    });
  }

  /* ---- Wire controls --------------------------------------------------- */
  segButtons.forEach(function (btn) {
    btn.addEventListener("click", function () {
      applyVariant(btn.getAttribute("data-variant"), true);
    });
  });

  if (input) {
    input.addEventListener("input", function () {
      syncName(input.value);
    });
    input.addEventListener("blur", function () {
      var trimmed = input.value.replace(/\s+/g, " ").trim();
      if (!trimmed) {
        input.value = DEFAULT_NAME;
        syncName(DEFAULT_NAME);
        toast("Restored the default nameplate.");
      }
    });
    input.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        input.blur();
        toast("Nameplate set.");
      }
    });
  }

  /* ---- Init ------------------------------------------------------------ */
  setDate();
  buildGallery();
  applyVariant(current, false);
  syncName(input ? input.value : DEFAULT_NAME);
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>The Meridian Courier — Masthead / Nameplate Variants</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">
    <!-- ============ CONTROL BAR ============ -->
    <header class="topbar" aria-label="Masthead controls">
      <div class="topbar__brand">
        <span class="topbar__kicker">Editorial Kit</span>
        <span class="topbar__title">Masthead &amp; Nameplate Variants</span>
      </div>

      <div class="topbar__controls">
        <label class="field" for="paper-name">
          <span class="field__label">Paper name</span>
          <input
            id="paper-name"
            class="field__input"
            type="text"
            value="The Meridian Courier"
            maxlength="34"
            autocomplete="off"
            spellcheck="false"
          />
        </label>

        <div class="seg" role="tablist" aria-label="Masthead variant">
          <button class="seg__btn is-active" role="tab" aria-selected="true" data-variant="broadsheet">Broadsheet</button>
          <button class="seg__btn" role="tab" aria-selected="false" data-variant="modern">Modern</button>
          <button class="seg__btn" role="tab" aria-selected="false" data-variant="tabloid">Tabloid</button>
          <button class="seg__btn" role="tab" aria-selected="false" data-variant="gothic">Gothic</button>
          <button class="seg__btn" role="tab" aria-selected="false" data-variant="magazine">Magazine</button>
        </div>
      </div>
    </header>

    <!-- ============ LIVE PREVIEW PAPER ============ -->
    <main class="paper" aria-label="Live newspaper preview">
      <article class="sheet" data-variant="broadsheet" id="sheet">

        <!-- The masthead header that the variants restyle -->
        <header class="masthead" id="masthead">
          <div class="masthead__strip masthead__strip--top">
            <span class="masthead__edition">Late City Edition</span>
            <span class="masthead__weather">Clear, brisk &middot; High 58&deg; / Low 41&deg;</span>
            <span class="masthead__vol">Vol. CXLI &middot; No. 24,118</span>
          </div>

          <div class="masthead__core">
            <span class="masthead__motto masthead__motto--left" aria-hidden="true">
              <em>Lux et</em><br />Veritas
            </span>

            <h1 class="masthead__name" id="masthead-name">The Meridian Courier</h1>

            <span class="masthead__motto masthead__motto--right" aria-hidden="true">
              Est.<br /><strong>1884</strong>
            </span>
          </div>

          <div class="masthead__strip masthead__strip--bottom">
            <span class="masthead__date" id="masthead-date">Monday, June 8, 2026</span>
            <span class="masthead__slogan">All the City, Honestly Told</span>
            <span class="masthead__price">$3.50</span>
          </div>
        </header>

        <!-- Front-page content so the masthead has context -->
        <section class="frontpage" aria-label="Front page">
          <div class="frontpage__lead">
            <span class="kicker">Civic Affairs</span>
            <h2 class="headline">Harbor District Wins Final Vote on Tide-Wall Plan After Decade of Delay</h2>
            <p class="standfirst">
              Council approves the largest coastal-defense project in the city&rsquo;s history,
              ending years of stalled hearings and clearing the way for construction to begin in the autumn.
            </p>

            <figure class="figure figure--lead">
              <div class="photo photo--harbor" role="img" aria-label="Wide view of the harbor at dusk"></div>
              <figcaption class="figure__cap">
                The eastern breakwater at dusk, where the new tide-wall will rise.
                <span class="figure__credit">— Photograph by L. Arden / Courier</span>
              </figcaption>
            </figure>

            <p class="body body--drop">
              The chamber fell quiet just after nine when the clerk read the tally aloud. Eleven in
              favour, four opposed, one abstaining. With that, a proposal first sketched on the back of
              a ferry timetable in 2014 became the settled policy of a city that has argued about water
              for as long as anyone can remember.
            </p>
            <p class="body">
              Supporters framed the vote as overdue prudence rather than ambition. &ldquo;We are not
              building a monument,&rdquo; said the district&rsquo;s chief engineer. &ldquo;We are buying
              the next hundred years a little breathing room.&rdquo; Opponents, who had warned of cost
              overruns and disrupted fishing berths, conceded the result with weary grace.
            </p>

            <blockquote class="pullquote">
              &ldquo;You cannot negotiate with a high tide. Eventually you simply decide to be ready.&rdquo;
              <cite>— Councillor R. Okонkwo, addressing the chamber</cite>
            </blockquote>

            <p class="body">
              Work crews are expected to mobilise along the eastern breakwater within the fortnight,
              beginning with survey trenches and the relocation of two ageing tide gauges. Officials
              promised weekly briefings and a public ledger of every dollar spent.
            </p>
          </div>

          <aside class="frontpage__rail" aria-label="Secondary stories">
            <div class="railitem">
              <span class="kicker kicker--muted">Markets</span>
              <h3 class="railitem__head">Ferry Bonds Rally as Investors Read Wall Vote as a Signal</h3>
              <p class="railitem__sum">
                Municipal paper tied to the waterfront climbed for a third straight session, traders said.
              </p>
              <span class="byline">By M. Castellane</span>
            </div>

            <hr class="hair" />

            <div class="railitem">
              <span class="kicker kicker--muted">City Life</span>
              <h3 class="railitem__head">The Lamplighters Who Still Walk the Old Quarter at Dawn</h3>
              <figure class="figure figure--rail">
                <div class="photo photo--lamp" role="img" aria-label="A figure walking a lamplit street at dawn"></div>
                <figcaption class="figure__cap">
                  Dawn on Cobbler&rsquo;s Row.
                  <span class="figure__credit">— D. Phan / Courier</span>
                </figcaption>
              </figure>
              <p class="railitem__sum">
                A vanishing trade endures behind the cathedral, where six wardens keep forty-one gas lamps lit.
              </p>
              <span class="byline">By T. Voss</span>
            </div>

            <hr class="hair" />

            <div class="railitem">
              <span class="kicker kicker--muted">Weather Watch</span>
              <h3 class="railitem__head">A Fair Week Ahead, Then Rain Off the Cape by Friday</h3>
              <p class="railitem__sum">
                Forecasters expect calm seas through midweek before a low-pressure trough arrives.
              </p>
              <span class="byline">By the Courier Weather Desk</span>
            </div>
          </aside>
        </section>
      </article>

      <!-- ============ VARIANT GALLERY ============ -->
      <section class="gallery" aria-label="Nameplate variant gallery">
        <div class="gallery__head">
          <span class="kicker">The Set</span>
          <h2 class="gallery__title">Five Nameplates, One Press</h2>
          <p class="gallery__lede">
            Tap any plate to apply it to the live edition above, or edit the paper name to watch each
            treatment reflow in real time.
          </p>
        </div>

        <div class="gallery__grid" id="gallery-grid">
          <!-- cards injected/enhanced by script; static fallbacks below -->
        </div>
      </section>
    </main>

    <footer class="pagefoot">
      <span>The Meridian Courier &middot; Composing Room</span>
      <span class="pagefoot__note">Illustrative editorial UI — fictional publication.</span>
    </footer>
  </div>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

A working masthead kit for The Meridian Courier, a fictional daily. A live preview sheet carries a full nameplate — an upper strip with the edition, weather, and volume line, a centered wordmark flanked by a Latin motto and an Est. line, and a lower strip with the dateline, slogan, and cover price — all framed by hairline and double rules. Beneath it sits a real front page (drop-cap lede, captioned duotone “press photos”, and an oversized pull quote) so each nameplate is judged in context rather than in isolation.

A gallery of five plates renders the same paper name in five distinct treatments: a classic centered broadsheet, a lean left-aligned modern wordmark with a single red rule, a loud condensed all-caps tabloid over a red edition banner, a heavy gothic plate set in small-caps with leaf ornaments, and an airy, widely-tracked magazine treatment. Tapping any plate — or the segmented switcher in the control bar — applies that masthead to the live edition and scrolls it into view.

Editing the paper-name field rewrites the live wordmark and every gallery preview in real time, with whitespace collapsed and a sensible default restored if the field is cleared. The script is dependency-free: it ticks the dateline to today, keeps the segmented control and gallery selection in sync via aria-selected and an active class, and surfaces a small toast() for each action.

Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.