Pages Hard
News — Classic Broadsheet Landing
A dense, authoritative broadsheet front page in the classic tradition: a grand centered nameplate with Latin motto and edition flags, a towering serif lead headline with drop cap and pull quote, stacked secondary stories divided by hairline rules, an opinion rail, a closing-bell markets strip, and an inside-today sections footer. Built with Playfair Display, a Times-like body feel, an ink-and-oxblood newsprint palette, captioned duotone press photos, a live dateline clock, A-/A+ text sizing, and section-jump navigation.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
/* =========================================================
The Meridian Standard — Classic Broadsheet
Palette override: Ink / newsprint cream / oxblood
========================================================= */
:root {
/* Override palette */
--cream: #f1ead9;
--paper: #f6f1e4;
--white: #fbf8f0;
--newsprint: #ece5d3;
--ink: #16130f;
--ink-2: #2b2620;
--ink-3: #4a443b;
--muted: #7a7164;
--ox: #6e1f1a;
--ox-d: #561612;
--ox-50: #ecd9d6;
--rule: rgba(22, 19, 15, 0.20);
--rule-2: rgba(22, 19, 15, 0.34);
--rule-hair: rgba(22, 19, 15, 0.12);
--ok: #2f7d4f;
--warn: #b67a18;
--danger: #6e1f1a;
--r-sm: 3px;
--r-md: 6px;
--r-lg: 10px;
--serif: "Playfair Display", "Times New Roman", Georgia, serif;
--ui: "Inter", system-ui, -apple-system, sans-serif;
/* text-size scaling hooks (set on <body>) */
--body-size: 1rem;
--lead-hed: clamp(2.4rem, 5.2vw, 4.6rem);
--col-max: 1240px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background-color: var(--cream);
background-image:
repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(22, 19, 15, 0.012) 4px),
radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.5), transparent 60%);
color: var(--ink);
font-family: var(--ui);
font-size: var(--body-size);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body[data-text-size="s"] { --body-size: 0.9rem; --lead-hed: clamp(2.1rem, 4.6vw, 4rem); }
body[data-text-size="m"] { --body-size: 1rem; }
body[data-text-size="l"] { --body-size: 1.12rem; --lead-hed: clamp(2.7rem, 5.8vw, 5.1rem); }
body[data-text-size="xl"] { --body-size: 1.24rem; --lead-hed: clamp(3rem, 6.4vw, 5.6rem); }
a { color: var(--ink); text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--ox); outline-offset: 2px; }
/* ---------- Utility bar ---------- */
.utility {
background: var(--ink);
color: var(--cream);
font-size: 0.72rem;
letter-spacing: 0.04em;
}
.utility__inner {
max-width: var(--col-max);
margin: 0 auto;
padding: 0.45rem 1.25rem;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.utility__edition {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
}
.utility__nav {
display: flex;
gap: 1.1rem;
margin-left: auto;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.utility__nav a { color: var(--cream); opacity: 0.82; transition: opacity 0.15s, color 0.15s; }
.utility__nav a:hover { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.utility__tools { display: flex; align-items: center; gap: 0.4rem; }
.utility__label { text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
.ctl {
font-family: var(--serif);
background: transparent;
color: var(--cream);
border: 1px solid rgba(241, 234, 217, 0.4);
border-radius: var(--r-sm);
width: 1.7rem; height: 1.5rem;
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
transition: background 0.15s, color 0.15s;
}
.ctl:hover { background: var(--cream); color: var(--ink); }
.ctl:active { transform: translateY(1px); }
/* ---------- Nameplate ---------- */
.nameplate {
max-width: var(--col-max);
margin: 0 auto;
padding: 0 1.25rem;
}
.nameplate__rule { height: 1px; background: var(--ink); }
.nameplate__rule--top { margin-top: 1rem; }
.nameplate__rule--double {
height: 4px;
background:
linear-gradient(var(--ink), var(--ink)) top / 100% 1px no-repeat,
linear-gradient(var(--ink), var(--ink)) bottom / 100% 3px no-repeat;
background-color: transparent;
}
.nameplate__flags {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 0.85rem 0 0.7rem;
}
.flag__k {
margin: 0;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.13em;
font-weight: 700;
color: var(--ink-2);
}
.flag__v {
margin: 0.15rem 0 0;
font-family: var(--serif);
font-style: italic;
font-size: 0.86rem;
color: var(--ink-3);
}
.flag--right { text-align: right; }
.flag--center { text-align: center; }
.masthead-motto {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-size: 0.8rem;
letter-spacing: 0.06em;
color: var(--ox);
}
.masthead {
margin: 0.1rem 0 0.15rem;
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.5rem, 7vw, 5.6rem);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--ink);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.masthead-sub {
margin: 0;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--ink-3);
font-weight: 500;
}
/* ---------- Breaking strip ---------- */
.strip {
max-width: var(--col-max);
margin: 0 auto;
padding: 0 1.25rem;
display: flex;
align-items: baseline;
gap: 0.85rem;
}
.strip--breaking {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.strip__tag {
flex: none;
background: var(--ox);
color: var(--cream);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 0.22rem 0.55rem;
border-radius: var(--r-sm);
}
.strip__text {
margin: 0;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(0.95rem, 1.6vw, 1.15rem);
color: var(--ink);
}
/* ---------- Sheet ---------- */
.sheet {
max-width: var(--col-max);
margin: 0 auto;
padding: 0.5rem 1.25rem 2.5rem;
}
/* hairlines */
.hairline { height: 1px; background: var(--rule); margin: 1.1rem 0; }
.hairline--thin { background: var(--rule-hair); margin: 0.8rem 0; }
.hairline--section {
height: 3px;
margin: 1.6rem 0;
background:
linear-gradient(var(--ink), var(--ink)) top / 100% 1px no-repeat,
linear-gradient(var(--ink), var(--ink)) bottom / 100% 1px no-repeat;
position: relative;
}
.hairline--double { height: 4px; margin: 1.5rem 0 1.2rem;
background:
linear-gradient(var(--ink), var(--ink)) top / 100% 1px no-repeat,
linear-gradient(var(--ink), var(--ink)) bottom / 100% 2px no-repeat;
}
/* ---------- Front page grid ---------- */
.front {
display: grid;
grid-template-columns: 1fr 2.1fr 1fr;
gap: 1.75rem;
padding-top: 0.6rem;
}
.col { min-width: 0; }
.col--left { border-right: 1px solid var(--rule); padding-right: 1.6rem; }
.col--rail { border-left: 1px solid var(--rule); padding-left: 1.6rem; }
/* ---------- Kickers ---------- */
.kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-2);
}
.kicker--red { color: var(--ox); }
/* ---------- Generic story ---------- */
.story__hed {
font-family: var(--serif);
font-weight: 800;
line-height: 1.08;
margin: 0 0 0.4rem;
font-size: 1.35rem;
letter-spacing: -0.01em;
}
.story__hed--lg { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.story__hed a { transition: color 0.15s; }
.story__hed a:hover { color: var(--ox); text-decoration: underline; text-underline-offset: 3px; }
.story__byline {
margin: 0 0 0.5rem;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 600;
}
.story__body {
margin: 0 0 0.7rem;
font-family: var(--serif);
font-size: 0.98em;
line-height: 1.55;
text-align: justify;
hyphens: auto;
color: var(--ink-2);
}
.story__body--drop::first-letter {
initial-letter: 3;
-webkit-initial-letter: 3;
font-weight: 800;
color: var(--ox);
padding-right: 0.06em;
}
/* ---------- Briefs ---------- */
.briefs__title,
.rail-box__title,
.foot__title {
font-family: var(--serif);
font-weight: 700;
font-style: italic;
font-size: 1.1rem;
margin: 0 0 0.5rem;
text-align: center;
position: relative;
}
.briefs__title::after,
.rail-box__title::after {
content: "";
display: block;
width: 38px;
height: 2px;
background: var(--ox);
margin: 0.4rem auto 0;
}
.briefs__list,
.foot__list {
list-style: none;
margin: 0;
padding: 0;
}
.briefs__list li {
font-size: 0.85rem;
line-height: 1.4;
padding: 0.4rem 0;
border-bottom: 1px solid var(--rule-hair);
color: var(--ink-2);
}
.briefs__list strong { font-variant: small-caps; letter-spacing: 0.02em; }
/* ---------- Lead ---------- */
.lead__hed {
font-family: var(--serif);
font-weight: 900;
font-size: var(--lead-hed);
line-height: 0.98;
letter-spacing: -0.015em;
margin: 0.2rem 0 0.5rem;
text-align: center;
}
.lead__deck {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
line-height: 1.4;
text-align: center;
color: var(--ink-3);
margin: 0 auto 0.7rem;
max-width: 44ch;
}
.lead__byline {
text-align: center;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin: 0 0 0.9rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--rule);
}
.lead__byline strong { color: var(--ink); }
.lead__dateline { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.lead__cols {
columns: 2;
column-gap: 1.6rem;
column-rule: 1px solid var(--rule-hair);
margin-top: 1rem;
}
.lead__body {
margin: 0 0 0.75rem;
font-family: var(--serif);
font-size: 1.02em;
line-height: 1.58;
text-align: justify;
hyphens: auto;
color: var(--ink-2);
}
.lead__body--drop::first-letter {
initial-letter: 3;
-webkit-initial-letter: 3;
font-weight: 900;
color: var(--ox);
padding-right: 0.07em;
font-family: var(--serif);
}
.jump { color: var(--ox); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.jump:hover { color: var(--ox-d); }
/* ---------- Pull quote ---------- */
.pull {
break-inside: avoid;
margin: 0.8rem 0 1rem;
padding: 0.6rem 0;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule);
text-align: center;
}
.pull p {
font-family: var(--serif);
font-weight: 700;
font-style: italic;
font-size: 1.4rem;
line-height: 1.18;
margin: 0 0 0.4rem;
color: var(--ink);
}
.pull cite {
font-style: normal;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ox);
font-weight: 600;
}
/* ---------- Figures / press photos ---------- */
.figure { margin: 0 0 0.9rem; }
.figure--lead { margin-bottom: 1.1rem; }
.figure figcaption {
font-size: 0.76rem;
line-height: 1.35;
color: var(--ink-3);
padding-top: 0.4rem;
border-bottom: 1px solid var(--rule-hair);
padding-bottom: 0.5rem;
}
.figure figcaption em { font-family: var(--serif); }
.credit {
display: inline;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.66rem;
color: var(--muted);
margin-left: 0.3rem;
}
.press-photo {
width: 100%;
aspect-ratio: 16 / 10;
border: 1px solid var(--rule-2);
background-blend-mode: multiply, multiply, normal, normal;
filter: saturate(0.85) contrast(1.02);
position: relative;
}
.press-photo::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(22, 19, 15, 0.16) 0.5px, transparent 0.6px);
background-size: 3px 3px;
mix-blend-mode: multiply;
opacity: 0.5;
pointer-events: none;
}
.press-photo--capitol {
background:
linear-gradient(180deg, rgba(110, 31, 26, 0.28), transparent 55%),
radial-gradient(70% 90% at 50% 100%, rgba(241, 234, 217, 0.5), transparent 60%),
radial-gradient(40% 60% at 50% 38%, rgba(20, 17, 13, 0.55), transparent 70%),
linear-gradient(160deg, #3a342b, #1c1813 70%);
}
.press-photo--harbor {
aspect-ratio: 16 / 9;
background:
linear-gradient(180deg, rgba(110, 31, 26, 0.18), transparent 40%),
radial-gradient(80% 50% at 30% 30%, rgba(241, 234, 217, 0.4), transparent 60%),
linear-gradient(0deg, rgba(20, 17, 13, 0.5), transparent 45%),
linear-gradient(110deg, #45463f, #23231f 60%, #14110d);
}
/* ---------- Rail boxes (opinion / markets) ---------- */
.rail-box { margin-bottom: 0.4rem; }
.op { margin: 0.6rem 0; }
.op__hed { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.15; margin: 0 0 0.25rem; }
.op__hed a:hover { color: var(--ox); }
.op__byline {
margin: 0 0 0.4rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 600;
}
.op__body {
margin: 0;
font-family: var(--serif);
font-size: 0.9rem;
line-height: 1.5;
color: var(--ink-2);
text-align: justify;
hyphens: auto;
}
/* ---------- Markets ticker ---------- */
.ticker { list-style: none; margin: 0; padding: 0; }
.ticker li {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--rule-hair);
font-size: 0.84rem;
}
.ticker__name { font-family: var(--serif); font-weight: 600; }
.ticker__val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ticker__val.up { color: var(--ok); }
.ticker__val.down { color: var(--danger); }
.ticker__note {
margin: 0.5rem 0 0;
font-size: 0.68rem;
font-style: italic;
color: var(--muted);
text-align: right;
}
/* ---------- Lower row ---------- */
.lower {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.75rem;
}
.lower .col {
border-left: 1px solid var(--rule);
padding-left: 1.6rem;
}
.col-span-2 { min-width: 0; }
/* ---------- Footer ---------- */
.paper-foot {
max-width: var(--col-max);
margin: 0 auto;
padding: 0 1.25rem 2.5rem;
}
.paper-foot__grid {
display: grid;
grid-template-columns: 1fr 1fr 1.6fr;
gap: 1.75rem;
align-items: start;
}
.foot__title { text-align: left; }
.foot__title::after { content: ""; display: block; width: 30px; height: 2px; background: var(--ox); margin-top: 0.35rem; }
.foot__list li {
font-size: 0.84rem;
padding: 0.32rem 0;
border-bottom: 1px solid var(--rule-hair);
color: var(--ink-2);
}
.paper-foot__motto { text-align: center; }
.paper-foot__motto .masthead-motto { font-size: 1rem; margin-bottom: 0.5rem; }
.foot__fine { font-size: 0.74rem; color: var(--muted); line-height: 1.45; margin: 0 0 0.9rem; }
.btn-top {
font-family: var(--ui);
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--ink);
color: var(--cream);
border: none;
border-radius: var(--r-sm);
padding: 0.5rem 1rem;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.btn-top:hover { background: var(--ox); }
.btn-top:active { transform: translateY(1px); }
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 1.5rem;
transform: translate(-50%, 1.5rem);
background: var(--ink);
color: var(--cream);
font-size: 0.82rem;
letter-spacing: 0.02em;
padding: 0.6rem 1.1rem;
border-radius: var(--r-sm);
border-left: 3px solid var(--ox);
box-shadow: 0 6px 22px rgba(22, 19, 15, 0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
z-index: 50;
max-width: min(90vw, 360px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.front { grid-template-columns: 1fr 1.6fr; }
.col--rail { grid-column: 1 / -1; border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.rail-box { display: inline-block; vertical-align: top; width: calc(50% - 1rem); margin-right: 1rem; }
}
@media (max-width: 720px) {
.nameplate__flags { grid-template-columns: 1fr; text-align: center; gap: 0.4rem; }
.flag--left, .flag--right { text-align: center; }
.front { grid-template-columns: 1fr; }
.col--left { border-right: none; padding-right: 0; }
.lead__cols { columns: 1; }
.lower { grid-template-columns: 1fr; }
.lower .col { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.rail-box { display: block; width: 100%; margin-right: 0; }
.paper-foot__grid { grid-template-columns: 1fr; }
.utility__nav { width: 100%; margin-left: 0; order: 3; justify-content: center; flex-wrap: wrap; }
.utility__tools { margin-left: auto; }
}
@media (max-width: 380px) {
.sheet { padding-left: 0.85rem; padding-right: 0.85rem; }
.nameplate, .strip, .utility__inner, .paper-foot { padding-left: 0.85rem; padding-right: 0.85rem; }
.lead__cols { column-gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.toast { transition: opacity 0.01s; }
}/* =========================================================
The Meridian Standard — front page interactions
Vanilla JS only. No external libraries.
========================================================= */
(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
if (toastTimer) clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2400);
}
/* ---------- Live dateline clock ---------- */
var clockEl = document.getElementById("dateline-clock");
var DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var MONTHS = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
function ordinal(n) {
var s = ["th", "st", "nd", "rd"];
var v = n % 100;
return n + (s[(v - 20) % 10] || s[v] || s[0]);
}
function renderDateline() {
if (!clockEl) return;
var now = new Date();
var day = DAYS[now.getDay()];
var month = MONTHS[now.getMonth()];
var date = ordinal(now.getDate());
var year = now.getFullYear();
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getSeconds();
var ampm = hh >= 12 ? "PM" : "AM";
var h12 = hh % 12;
if (h12 === 0) h12 = 12;
function pad(n) { return n < 10 ? "0" + n : "" + n; }
var time = h12 + ":" + pad(mm) + ":" + pad(ss) + " " + ampm;
clockEl.textContent =
"Meridian City · " + day + ", " + month + " " + date + ", " + year + " · " + time;
}
renderDateline();
setInterval(renderDateline, 1000);
/* ---------- Text size A- / A+ ---------- */
var SIZES = ["s", "m", "l", "xl"];
var LABELS = { s: "Small", m: "Medium", l: "Large", xl: "Extra Large" };
var body = document.body;
function currentIndex() {
var idx = SIZES.indexOf(body.getAttribute("data-text-size") || "m");
return idx === -1 ? 1 : idx;
}
function setSize(idx) {
idx = Math.max(0, Math.min(SIZES.length - 1, idx));
var size = SIZES[idx];
body.setAttribute("data-text-size", size);
try { localStorage.setItem("ms-text-size", size); } catch (e) {}
toast("Text size: " + LABELS[size]);
}
// restore saved preference
try {
var saved = localStorage.getItem("ms-text-size");
if (saved && SIZES.indexOf(saved) !== -1) body.setAttribute("data-text-size", saved);
} catch (e) {}
var smaller = document.getElementById("text-smaller");
var larger = document.getElementById("text-larger");
if (smaller) smaller.addEventListener("click", function () { setSize(currentIndex() - 1); });
if (larger) larger.addEventListener("click", function () { setSize(currentIndex() + 1); });
/* ---------- Section-jump nav (smooth scroll) ---------- */
var navLinks = document.querySelectorAll('.utility__nav a[href^="#"]');
Array.prototype.forEach.call(navLinks, function (link) {
link.addEventListener("click", function (ev) {
var id = link.getAttribute("href").slice(1);
var target = document.getElementById(id);
if (!target) return;
ev.preventDefault();
var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
target.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
toast("Jumped to " + link.textContent.trim());
});
});
/* ---------- Back to top ---------- */
var backTop = document.getElementById("back-to-top");
if (backTop) {
backTop.addEventListener("click", function () {
var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
});
}
/* ---------- Headline links → toast (fictional) ---------- */
var storyLinks = document.querySelectorAll(
'.story__hed a, .op__hed a, .jump'
);
Array.prototype.forEach.call(storyLinks, function (link) {
link.addEventListener("click", function (ev) {
if (link.getAttribute("href") === "#" || link.classList.contains("jump")) {
ev.preventDefault();
toast("This is an illustrative front page — the article is fictional.");
}
});
});
/* ---------- Rotating weather flag (cosmetic) ---------- */
var weatherEl = document.getElementById("weather-flag");
var CONDITIONS = ["Fair · 64°F", "Breezy · 61°F", "Clear · 66°F", "Overcast · 59°F"];
var wIdx = 0;
if (weatherEl) {
setInterval(function () {
wIdx = (wIdx + 1) % CONDITIONS.length;
weatherEl.textContent = CONDITIONS[wIdx];
}, 8000);
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Meridian Standard — Front Page</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,600;1,700&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body data-text-size="m">
<!-- Utility bar -->
<div class="utility" role="region" aria-label="Edition controls">
<div class="utility__inner">
<p class="utility__edition" id="dateline-clock">Loading edition…</p>
<nav class="utility__nav" aria-label="Front page sections">
<a href="#world">World</a>
<a href="#business">Business</a>
<a href="#opinion">Opinion</a>
<a href="#culture">Culture</a>
</nav>
<div class="utility__tools" role="group" aria-label="Text size">
<span class="utility__label">Text</span>
<button type="button" class="ctl" id="text-smaller" aria-label="Decrease text size">A−</button>
<button type="button" class="ctl" id="text-larger" aria-label="Increase text size">A+</button>
</div>
</div>
</div>
<!-- Nameplate -->
<header class="nameplate" role="banner">
<div class="nameplate__rule nameplate__rule--top" aria-hidden="true"></div>
<div class="nameplate__flags">
<div class="flag flag--left">
<p class="flag__k">Vol. CXLII · No. 18,204</p>
<p class="flag__v">City & Late Final</p>
</div>
<div class="flag flag--center">
<p class="masthead-motto">“Lux et Veritas in Omnibus”</p>
<h1 class="masthead">The Meridian Standard</h1>
<p class="masthead-sub">Founded 1884 · An Independent Daily Record</p>
</div>
<div class="flag flag--right">
<p class="flag__k">Price · Two Dollars</p>
<p class="flag__v" id="weather-flag">Fair · 64°F</p>
</div>
</div>
<div class="nameplate__rule nameplate__rule--double" aria-hidden="true"></div>
</header>
<!-- Breaking strip -->
<div class="strip strip--breaking" role="region" aria-label="Late bulletin">
<span class="strip__tag">Late Bulletin</span>
<p class="strip__text">
Senate clears infrastructure accord 61–38 after marathon session; signing expected before recess.
</p>
</div>
<main class="sheet" id="top">
<!-- FRONT PAGE GRID -->
<section class="front" id="world" aria-label="Front page">
<!-- Left column: stacked secondary stories -->
<div class="col col--left">
<article class="story story--brief">
<p class="kicker">Diplomacy</p>
<h3 class="story__hed"><a href="#">Coastal Nations Sign Fisheries Truce After Decade of Disputes</a></h3>
<p class="story__byline">By Helena Marchetti · Foreign Desk</p>
<p class="story__body">
Negotiators from seven coastal states initialed a binding quota framework on Thursday,
ending years of brinkmanship over contested waters. The pact, brokered in quiet sessions
at the Old Customs House, caps annual catches and establishes a joint patrol fund.
</p>
</article>
<div class="hairline" aria-hidden="true"></div>
<article class="story story--brief">
<p class="kicker">Science</p>
<h3 class="story__hed"><a href="#">Observatory Reports Faint Signal From Distant Dwarf Galaxy</a></h3>
<p class="story__byline">By Dr. Omar Vasquez · Science Desk</p>
<p class="story__body">
Astronomers at the Highmoor Array described an unusually regular radio pulse, cautioning that
instrumentation, not visitors, remained the likeliest source. Peer review is pending.
</p>
</article>
<div class="hairline" aria-hidden="true"></div>
<aside class="briefs" aria-label="In brief">
<h4 class="briefs__title">The Morning Briefs</h4>
<ul class="briefs__list">
<li><strong>Transit.</strong> Crosstown line reopens Monday after eight-week overhaul.</li>
<li><strong>Courts.</strong> Appeals panel reinstates the harbor zoning challenge.</li>
<li><strong>Labor.</strong> Dockworkers ratify contract; strike threat averted.</li>
<li><strong>Weather.</strong> A cold front arrives by midweek, forecasters say.</li>
</ul>
</aside>
</div>
<!-- Center column: the lead -->
<div class="col col--lead">
<article class="lead">
<p class="kicker kicker--red">The Front · Exclusive</p>
<h2 class="lead__hed">Capital Strikes Sweeping Accord to Rebuild the Aging Grid</h2>
<p class="lead__deck">
After three days of closed talks, lawmakers and utilities agree on a ten-year plan to
modernize transmission, fund coastal defenses, and underwrite rural broadband.
</p>
<p class="lead__byline">
By <strong>Margaret Ellsworth</strong> & <strong>Thomas Reade</strong>
<span class="lead__dateline">Meridian City —</span>
</p>
<figure class="figure figure--lead">
<div class="press-photo press-photo--capitol" role="img"
aria-label="The capitol dome at dusk seen across the river plaza"></div>
<figcaption>
<em>The capitol at dusk, where negotiators emerged shortly before midnight.</em>
<span class="credit">— Standard photo / R. Okafor</span>
</figcaption>
</figure>
<div class="lead__cols">
<p class="lead__body lead__body--drop">
The agreement, hammered out in a cramped committee room and announced minutes before
midnight, commits the treasury to the largest public-works program in a generation. Its
architects called it a rare bipartisan victory; its critics called it a debt few will read.
</p>
<p class="lead__body">
Under the framework, a new authority would oversee the replacement of corroding transmission
lines, many of them strung in an era when the city was half its present size. Officials say
the work will touch nearly every district and run through the next decade.
</p>
<blockquote class="pull">
<p>“We are not merely patching the past. We are wiring the next century.”</p>
<cite>— Sen. Adaeze Okonkwo, floor remarks</cite>
</blockquote>
<p class="lead__body">
Skeptics in both chambers questioned the financing, which leans on long-dated bonds and a
modest levy on heavy industry. A coalition of mayors, meanwhile, welcomed the broadband
provisions, arguing that rural exchanges had been starved of investment for years.
</p>
<p class="lead__body">
The measure now heads to a reconciliation vote expected before the recess. Aides cautioned
that several amendments remain unsettled, and that the figures could shift before the final
tally is recorded in the chamber.
</p>
<p class="lead__body">
Continued on Page A 6 · <a href="#" class="jump">Read the full text</a>
</p>
</div>
</article>
</div>
<!-- Right column: opinion rail + business -->
<div class="col col--rail">
<section class="rail-box" id="opinion" aria-label="Opinion">
<h4 class="rail-box__title">Opinion</h4>
<div class="hairline hairline--thin" aria-hidden="true"></div>
<article class="op">
<h3 class="op__hed"><a href="#">The Quiet Cost of a Loud Bargain</a></h3>
<p class="op__byline">Editorial Board</p>
<p class="op__body">
A deal struck at midnight is rarely a deal read in daylight. The grid accord deserves
applause for its ambition and scrutiny for its arithmetic. Both can be true at once.
</p>
</article>
<div class="hairline hairline--thin" aria-hidden="true"></div>
<article class="op">
<h3 class="op__hed"><a href="#">In Defense of the Slow Newsroom</a></h3>
<p class="op__byline">By Priya Nandakumar</p>
<p class="op__body">
Speed is a tool, not a virtue. The stories that hold up are the ones we resisted the urge
to publish a day early.
</p>
</article>
</section>
<div class="hairline" aria-hidden="true"></div>
<section class="rail-box" id="business" aria-label="Markets">
<h4 class="rail-box__title">Markets at the Bell</h4>
<div class="hairline hairline--thin" aria-hidden="true"></div>
<ul class="ticker">
<li><span class="ticker__name">Meridian 500</span><span class="ticker__val up">4,182.30 ▲ 0.8%</span></li>
<li><span class="ticker__name">Harbor Composite</span><span class="ticker__val up">13,907.5 ▲ 1.2%</span></li>
<li><span class="ticker__name">Sovereign 10-Yr</span><span class="ticker__val down">3.94% ▼ 0.03</span></li>
<li><span class="ticker__name">Brent, bbl</span><span class="ticker__val down">$79.40 ▼ 0.6%</span></li>
<li><span class="ticker__name">Gold, oz</span><span class="ticker__val up">$2,038 ▲ 0.4%</span></li>
</ul>
<p class="ticker__note">Closing figures · provisional</p>
</section>
</div>
</section>
<div class="hairline hairline--section" aria-hidden="true"></div>
<!-- SECONDARY ROW: Business + Culture -->
<section class="lower" aria-label="Below the fold">
<article class="story story--feature col-span-2">
<p class="kicker">Business</p>
<h3 class="story__hed story__hed--lg">
<a href="#">Shipping Giant Bets on Wind as Fuel Costs Climb Again</a>
</h3>
<p class="story__byline">By Lucas Brandt · Business Desk · 6 min read</p>
<figure class="figure">
<div class="press-photo press-photo--harbor" role="img"
aria-label="Cargo vessels under a rigid sail rig in a busy harbor at dawn"></div>
<figcaption><em>A retrofitted carrier tests rigid sails off the outer harbor.</em>
<span class="credit">— Standard photo / L. Brandt</span></figcaption>
</figure>
<p class="story__body story__body--drop">
The continent's second-largest carrier confirmed on Friday that it will fit rigid, computer-trimmed
sails to a third of its fleet by the decade's end, a wager that the technology can shave fuel bills
even as bunker prices swing. Executives framed the program as pragmatic, not idealistic.
</p>
<p class="story__body">
Analysts were divided. Some saw a durable edge on long ocean crossings; others warned that port
congestion and crewing costs would blunt the savings. The company's shares rose modestly on the news.
</p>
</article>
<article class="story col" id="culture">
<p class="kicker">Culture</p>
<h3 class="story__hed"><a href="#">A Forgotten Composer Finds Her Audience, a Century Late</a></h3>
<p class="story__byline">By Naomi Friedland · Arts</p>
<p class="story__body">
The rediscovered symphonies of Clara Venn drew a standing ovation at the Harbor Hall premiere,
ending decades of neglect. Critics called the second movement “a quiet thunderclap.”
</p>
<div class="hairline hairline--thin" aria-hidden="true"></div>
<p class="kicker">Sport</p>
<h3 class="story__hed"><a href="#">Underdogs Take the River Derby in Extra Time</a></h3>
<p class="story__byline">By Devon Wright · Sport</p>
<p class="story__body">
A late strike from the touchline silenced the home stand and sent the visitors top of the table
for the first time in eleven seasons.
</p>
</article>
</section>
</main>
<!-- Today's sections footer -->
<footer class="paper-foot" role="contentinfo">
<div class="hairline hairline--double" aria-hidden="true"></div>
<div class="paper-foot__grid">
<div>
<h5 class="foot__title">Inside Today</h5>
<ul class="foot__list">
<li>World · A2</li>
<li>Business · B1</li>
<li>Opinion · A14</li>
<li>Culture · C1</li>
<li>Sport · D1</li>
<li>Weather · D8</li>
</ul>
</div>
<div>
<h5 class="foot__title">The Standard</h5>
<ul class="foot__list">
<li>Masthead & Staff</li>
<li>Letters to the Editor</li>
<li>Corrections</li>
<li>Subscribe</li>
</ul>
</div>
<div class="paper-foot__motto">
<p class="masthead-motto">“Lux et Veritas in Omnibus”</p>
<p class="foot__fine">
The Meridian Standard is a fictional publication created for demonstration.
All names, headlines, and articles are invented.
</p>
<button type="button" class="btn-top" id="back-to-top">Return to Front Page ↑</button>
</div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Classic Broadsheet Landing
A traditional broadsheet home page modeled on the dense, authoritative front pages of legacy daily papers. A centered nameplate carries a Latin motto, volume and price flags, and a double hairline rule beneath the masthead. The front itself is a strict three-column grid: stacked secondary stories and a morning-briefs box on the left, a towering serif lead headline with a deck, byline, captioned press photo, two-column body, drop cap, and an oversized pull quote in the center, and an opinion rail plus a closing-bell markets ticker on the right. A late-bulletin strip, a below-the-fold business and culture row, and an inside-today sections footer round out the page.
The “photography” is rendered entirely in CSS — duotone ink-and-oxblood gradients with a subtle halftone dot overlay inside aspect-ratio figures, each with an italic caption and a credit line. Hairline rules, column rules, justified hyphenated body copy, uppercase letter-spaced kickers, and small-caps lead-ins do the typographic heavy lifting, leaning on rules rather than shadows for an authentic newsprint feel.
Interactions are vanilla JS: a live dateline clock ticks the dateline once per second, A- / A+ controls step through four text sizes and persist the choice in localStorage, the utility nav smooth-scrolls to the World, Business, Opinion, and Culture sections, a “return to front page” button scrolls back up, and clicking any fictional headline raises a toast reminding readers the content is illustrative. The weather flag cycles cosmetically. The layout collapses from three columns to a single column under ~720px and stays readable down to ~360px.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.