Pages Hard
Science — Academic Journal Landing
A flagship academic-journal homepage in the classic Nature/Science mold: a serif masthead with a thin signature-red rule and primary nav, a This Week featured-article hero with a generative dendrite cover figure, a filterable two-column Latest Research feed, a reviews list, an issue-cover sidebar with a Submit your research call to action, an animated metrics strip, newsletter signup with validation, and an authoritative footer. Built with semantic HTML, scholarly typography, and vanilla JavaScript.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #b3132b;
--accent-d: #8a0f21;
--accent-50: #fcebed;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 6px 20px rgba(15, 27, 45, 0.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.dim { color: var(--muted); font-size: 0.82em; }
.eq-var { font-style: italic; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 12px; top: -48px; z-index: 50;
background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r-sm);
font-family: var(--ui); font-size: 0.85rem; transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ===== Layout shell ===== */
.masthead, main, .footer { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--red { height: 3px; background: var(--accent); margin: 14px 0 0; }
/* ===== Masthead ===== */
.masthead { padding-top: 22px; }
.masthead__top {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.masthead__eyebrow {
font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.masthead__title {
font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.02; margin: 6px 0 4px; letter-spacing: -0.01em;
}
.masthead__title span { color: var(--accent); }
.masthead__sub {
font-style: italic; color: var(--ink-2); margin: 0; font-size: 1.02rem;
}
.masthead__meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.masthead__date { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }
.badge {
font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
border: 1px solid var(--line-2); color: var(--ink-2);
}
.badge--issue { background: var(--accent-50); border-color: rgba(179, 19, 43, 0.25); color: var(--accent-d); }
/* ===== Nav ===== */
.nav {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; padding: 10px 0 0;
}
.nav__list {
list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap;
}
.nav__link {
font-family: var(--ui); font-size: 0.92rem; font-weight: 600; text-decoration: none;
color: var(--ink-2); padding: 10px 14px; border-radius: var(--r-sm); display: inline-block;
position: relative; transition: color 0.15s ease, background 0.15s ease;
}
.nav__link:hover { color: var(--accent); background: var(--accent-50); }
.nav__link.is-active { color: var(--accent-d); }
.nav__link.is-active::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
height: 2px; background: var(--accent);
}
.search { display: flex; align-items: center; gap: 0; }
.search__input {
font-family: var(--ui); font-size: 0.86rem; padding: 8px 12px; width: 240px;
border: 1px solid var(--line-2); border-right: 0;
border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--bg-alt); color: var(--ink);
}
.search__input:focus { outline: none; border-color: var(--accent); background: #fff; }
.search__btn {
font-family: var(--ui); border: 1px solid var(--accent); background: var(--accent); color: #fff;
padding: 8px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; cursor: pointer; font-size: 0.95rem;
transition: background 0.15s ease;
}
.search__btn:hover { background: var(--accent-d); }
/* ===== Section heads ===== */
.section-head {
display: flex; align-items: center; gap: 16px; margin: 40px 0 20px; flex-wrap: wrap;
}
.section-head__title {
font-family: var(--serif); font-weight: 700; font-size: 1.45rem; margin: 0;
white-space: nowrap;
}
.section-head__line { flex: 1; height: 1px; background: var(--line); min-width: 30px; }
/* ===== Buttons ===== */
.btn {
font-family: var(--ui); font-weight: 600; font-size: 0.9rem; cursor: pointer;
border-radius: var(--r-sm); padding: 11px 18px; text-decoration: none; display: inline-block;
border: 1px solid transparent; transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-d); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--block { display: block; width: 100%; text-align: center; }
.kicker {
font-family: var(--ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--accent); display: inline-block;
}
.tag {
font-family: var(--ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em;
padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--ink-2);
}
.tag--ok { background: rgba(47, 158, 111, 0.1); border-color: rgba(47, 158, 111, 0.35); color: var(--ok); }
/* ===== Feature hero ===== */
.feature {
display: grid; grid-template-columns: 0.85fr 1fr; gap: 28px; align-items: stretch;
padding-bottom: 12px;
}
.feature__cover {
position: relative; display: block; border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--shadow); border: 1px solid var(--line); min-height: 280px;
}
.cover-fig { position: absolute; inset: 0; }
.cover-fig svg { width: 100%; height: 100%; display: block; }
.cover-fig__scale {
position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 0.7rem;
color: #fff; background: rgba(15, 27, 45, 0.6); padding: 3px 8px; border-radius: var(--r-sm);
backdrop-filter: blur(2px);
}
.feature__cover::after {
content: "Figure 1."; position: absolute; right: 12px; top: 12px;
font-family: var(--ui); font-weight: 700; font-size: 0.72rem; color: #fff;
background: var(--accent); padding: 4px 9px; border-radius: var(--r-sm);
}
.feature__body { display: flex; flex-direction: column; gap: 10px; }
.feature__title {
font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem);
line-height: 1.18; margin: 4px 0 2px; letter-spacing: -0.01em;
}
.feature__title a { text-decoration: none; }
.feature__title a:hover { color: var(--accent); }
.feature__authors { font-style: italic; color: var(--ink-2); margin: 0; }
.feature__abstract { color: var(--ink-2); margin: 6px 0 4px; font-size: 1.02rem; }
.feature__meta {
list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-wrap: wrap;
gap: 8px 22px; font-family: var(--ui); font-size: 0.84rem;
}
.feature__meta li { display: flex; align-items: center; gap: 7px; }
.meta-k {
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); font-weight: 600;
}
.feature__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* ===== Metrics ===== */
.metrics {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
overflow: hidden; margin: 40px 0 8px;
}
.metric {
background: var(--bg-alt); padding: 22px 18px; text-align: center;
display: flex; flex-direction: column; gap: 4px;
}
.metric__value {
font-size: 2rem; font-weight: 500; color: var(--accent-d); line-height: 1;
display: inline;
}
.metric__suffix { font-family: var(--mono); font-size: 1.4rem; color: var(--accent-d); }
.metric__label {
font-family: var(--ui); font-size: 0.78rem; color: var(--muted); font-weight: 500;
letter-spacing: 0.02em;
}
/* ===== Two-column layout ===== */
.layout {
display: grid; grid-template-columns: 1fr 320px; gap: 40px; margin-top: 12px;
}
.layout__main { min-width: 0; }
/* ===== Filter chips ===== */
.filterbar { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chip {
font-family: var(--ui); font-size: 0.8rem; font-weight: 600; padding: 6px 12px;
border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
border-radius: 999px; cursor: pointer; transition: all 0.15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* ===== Article cards ===== */
.cards {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
overflow: hidden;
}
.card {
background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 7px;
transition: background 0.15s ease;
}
.card:hover { background: var(--accent-50); }
.card__kicker {
font-family: var(--ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; color: var(--accent);
}
.card__title { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; line-height: 1.25; margin: 0; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.card__authors { font-style: italic; color: var(--ink-2); margin: 0; font-size: 0.9rem; }
.card__excerpt { color: var(--ink-2); margin: 0; font-size: 0.94rem; flex: 1; }
.card__foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line);
}
.emptystate { font-family: var(--ui); color: var(--muted); padding: 24px; text-align: center; }
/* ===== Reviews ===== */
.reviews { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.review {
display: flex; gap: 18px; align-items: flex-start; padding: 18px 4px;
border-bottom: 1px solid var(--line);
}
.review:last-child { border-bottom: 0; }
.review__num { font-size: 1.4rem; color: var(--accent); font-weight: 500; min-width: 34px; }
.review__title { font-family: var(--serif); font-weight: 600; font-size: 1.14rem; margin: 0 0 3px; line-height: 1.25; }
.review__title a { text-decoration: none; }
.review__title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.review__by { font-family: var(--ui); font-size: 0.82rem; color: var(--muted); margin: 0; }
/* ===== Sidebar ===== */
.sidebar { display: flex; flex-direction: column; gap: 28px; }
.sidebar__head, .submit__head {
font-family: var(--serif); font-weight: 700; font-size: 1.1rem; margin: 0 0 14px;
padding-bottom: 8px; border-bottom: 2px solid var(--accent); display: inline-block;
}
.cover {
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--shadow); background: var(--bg-alt); position: relative;
display: flex; flex-direction: column;
}
.cover__band { height: 8px; background: var(--accent); }
.cover__title {
font-family: var(--serif); font-weight: 700; font-size: 1.05rem; text-align: center;
padding: 14px 16px 6px; line-height: 1.15;
}
.cover__art { line-height: 0; }
.cover__art svg { width: 100%; display: block; }
.cover__vol {
font-size: 0.74rem; color: var(--muted); text-align: center; padding: 10px;
border-top: 1px solid var(--line);
}
.link-arrow {
font-family: var(--ui); font-weight: 600; font-size: 0.86rem; color: var(--accent);
text-decoration: none; display: inline-block; margin-top: 12px;
}
.link-arrow:hover { color: var(--accent-d); text-decoration: underline; }
.submit {
background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 22px;
}
.submit__head { color: #fff; border-color: var(--accent); }
.submit__copy { font-size: 0.95rem; color: #cdd6e3; margin: 0 0 16px; }
.submit__copy strong { color: #fff; }
.submit .btn--solid { margin-bottom: 14px; }
.submit__list {
list-style: none; padding: 0; margin: 0; font-family: var(--ui); font-size: 0.86rem;
}
.submit__list li {
padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #cdd6e3;
cursor: pointer; transition: color 0.15s ease;
}
.submit__list li:hover { color: #fff; }
.submit__list li::before { content: "→ "; color: var(--accent); }
.most-read__list {
padding-left: 0; margin: 0; list-style: none; counter-reset: mr;
}
.most-read__list li {
counter-increment: mr; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line);
position: relative; display: flex; flex-direction: column; gap: 3px;
}
.most-read__list li:last-child { border-bottom: 0; }
.most-read__list li::before {
content: counter(mr); position: absolute; left: 0; top: 12px;
font-family: var(--mono); font-weight: 500; color: var(--accent); font-size: 1rem;
}
.most-read__list a {
font-family: var(--serif); font-size: 0.96rem; text-decoration: none; line-height: 1.2;
}
.most-read__list a:hover { color: var(--accent); }
/* ===== Newsletter ===== */
.newsletter {
margin: 48px auto 0; background: var(--accent-50);
border-top: 1px solid rgba(179, 19, 43, 0.2); border-bottom: 1px solid rgba(179, 19, 43, 0.2);
}
.newsletter__inner {
max-width: 1120px; margin: 0 auto; padding: 36px 24px;
display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.newsletter__head { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; margin: 0 0 6px; }
.newsletter__copy { color: var(--ink-2); margin: 0; max-width: 46ch; }
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: relative; }
.newsletter__input {
font-family: var(--ui); font-size: 0.92rem; padding: 11px 14px; width: 260px;
border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.newsletter__input:focus { outline: none; border-color: var(--accent); }
.newsletter__error {
font-family: var(--ui); font-size: 0.8rem; color: var(--danger); width: 100%; margin-top: -2px;
}
/* ===== Footer ===== */
.footer { padding-top: 48px; padding-bottom: 40px; }
.footer__grid {
display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; margin-bottom: 28px;
}
.footer__title { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; margin: 0 0 6px; }
.footer__issn { font-size: 0.78rem; color: var(--muted); margin: 0 0 8px; }
.footer__pub { color: var(--ink-2); font-size: 0.9rem; margin: 0; max-width: 32ch; }
.footer__col h4 {
font-family: var(--ui); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink); margin: 0 0 12px;
}
.footer__col a {
display: block; font-family: var(--ui); font-size: 0.88rem; color: var(--ink-2);
text-decoration: none; padding: 5px 0;
}
.footer__col a:hover { color: var(--accent); }
.footer__legal {
font-family: var(--ui); font-size: 0.78rem; color: var(--muted); margin: 20px 0 0; text-align: center;
}
/* ===== Toast ===== */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
background: var(--ink); color: #fff; font-family: var(--ui); font-size: 0.88rem;
padding: 12px 20px; border-radius: var(--r-sm); box-shadow: var(--shadow);
opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
max-width: 90vw; z-index: 60;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "✓ "; color: var(--ok); font-weight: 700; }
/* ===== Responsive ===== */
@media (max-width: 920px) {
.layout { grid-template-columns: 1fr; }
.feature { grid-template-columns: 1fr; }
.feature__cover { min-height: 220px; }
}
@media (max-width: 640px) {
.masthead, main, .footer { padding-inline: 16px; }
.masthead__top { align-items: flex-start; }
.masthead__meta { text-align: left; align-items: flex-start; }
.nav { flex-direction: column; align-items: stretch; }
.search { width: 100%; }
.search__input { flex: 1; width: auto; }
.metrics { grid-template-columns: repeat(2, 1fr); }
.cards { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
.newsletter__form { width: 100%; }
.newsletter__input { flex: 1; width: auto; min-width: 0; }
.section-head { gap: 10px; }
.filterbar { margin-left: 0; width: 100%; }
.metric__value { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2600);
}
/* ---------- live issue date ---------- */
var dateEl = document.getElementById("issueDate");
if (dateEl) {
var d = new Date();
dateEl.textContent = d.toLocaleDateString("en-GB", {
day: "numeric",
month: "long",
year: "numeric",
});
}
/* ---------- generative dendrite cover figure ---------- */
var dendrite = document.getElementById("dendrite");
if (dendrite) {
var paths = "";
function branch(x, y, angle, len, depth) {
if (depth <= 0 || len < 4) return;
var x2 = x + Math.cos(angle) * len;
var y2 = y + Math.sin(angle) * len;
paths +=
'<path d="M' +
x.toFixed(1) +
" " +
y.toFixed(1) +
" L" +
x2.toFixed(1) +
" " +
y2.toFixed(1) +
'" stroke-width="' +
(depth * 0.35).toFixed(2) +
'"/>';
var spread = 0.55 + Math.random() * 0.25;
branch(x2, y2, angle - spread, len * 0.74, depth - 1);
branch(x2, y2, angle + spread, len * 0.74, depth - 1);
if (Math.random() > 0.4) branch(x2, y2, angle, len * 0.82, depth - 1);
}
// a few seed crystals fanning out
branch(148, 118, -Math.PI / 2, 44, 7);
branch(148, 118, -Math.PI / 2 - 1.1, 32, 6);
branch(148, 118, -Math.PI / 2 + 1.1, 32, 6);
branch(148, 118, Math.PI / 2.4, 26, 5);
dendrite.innerHTML = paths;
}
/* ---------- animated metric counters ---------- */
var metrics = Array.prototype.slice.call(
document.querySelectorAll(".metric__value[data-count]")
);
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count"));
var decimals = parseInt(el.getAttribute("data-decimals") || "0", 10);
var start = performance.now();
var dur = 1100;
function frame(now) {
var p = Math.min(1, (now - start) / dur);
var eased = 1 - Math.pow(1 - p, 3);
var val = target * eased;
el.textContent =
decimals > 0
? val.toFixed(decimals)
: Math.round(val).toLocaleString("en-US");
if (p < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
if (metrics.length) {
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
animateCount(e.target);
io.unobserve(e.target);
}
});
},
{ threshold: 0.4 }
);
metrics.forEach(function (m) {
io.observe(m);
});
} else {
metrics.forEach(animateCount);
}
}
/* ---------- article subject filter ---------- */
var chips = Array.prototype.slice.call(document.querySelectorAll(".chip"));
var cards = Array.prototype.slice.call(
document.querySelectorAll("#articleList .card")
);
var emptyState = document.getElementById("emptyState");
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
var filter = chip.getAttribute("data-filter");
chips.forEach(function (c) {
var active = c === chip;
c.classList.toggle("is-active", active);
c.setAttribute("aria-selected", active ? "true" : "false");
});
var shown = 0;
cards.forEach(function (card) {
var match = filter === "all" || card.getAttribute("data-subject") === filter;
card.style.display = match ? "" : "none";
if (match) shown++;
});
if (emptyState) emptyState.hidden = shown !== 0;
});
});
/* ---------- search ---------- */
var searchForm = document.getElementById("searchForm");
if (searchForm) {
searchForm.addEventListener("submit", function (e) {
e.preventDefault();
var q = document.getElementById("searchInput").value.trim();
if (!q) {
toast("Type a query to search the archive.");
return;
}
var hits = cards.filter(function (c) {
return c.textContent.toLowerCase().indexOf(q.toLowerCase()) !== -1;
}).length;
toast(hits + ' result' + (hits === 1 ? "" : "s") + ' for "' + q + '"');
});
}
/* ---------- cite / pdf / submit actions ---------- */
document.querySelectorAll("[data-cite]").forEach(function (btn) {
btn.addEventListener("click", function () {
var cite = btn.getAttribute("data-cite");
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(cite).then(
function () {
toast("Citation copied to clipboard");
},
function () {
toast("Citation: " + cite.slice(0, 40) + "…");
}
);
} else {
toast("Citation ready — copy manually");
}
});
});
document.querySelectorAll("[data-pdf]").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.preventDefault();
toast("Preparing PDF (demo — no file)…");
});
});
document.querySelectorAll("[data-submit]").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.preventDefault();
toast("Submission portal is a demo placeholder.");
});
});
/* ---------- newsletter validation ---------- */
var nlForm = document.getElementById("nlForm");
if (nlForm) {
var nlEmail = document.getElementById("nlEmail");
var nlError = document.getElementById("nlError");
nlForm.addEventListener("submit", function (e) {
e.preventDefault();
var val = nlEmail.value.trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
if (!ok) {
nlError.hidden = false;
nlEmail.focus();
return;
}
nlError.hidden = true;
nlForm.reset();
toast("Subscribed — confirmation sent to " + val);
});
nlEmail.addEventListener("input", function () {
if (!nlError.hidden) nlError.hidden = true;
});
}
/* ---------- scrollspy on nav ---------- */
var navLinks = Array.prototype.slice.call(
document.querySelectorAll(".nav__link")
);
var sections = navLinks
.map(function (l) {
var id = l.getAttribute("href").slice(1);
return document.getElementById(id);
})
.filter(Boolean);
if ("IntersectionObserver" in window && sections.length) {
var spy = new IntersectionObserver(
function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
navLinks.forEach(function (l) {
var match = l.getAttribute("href") === "#" + en.target.id;
l.classList.toggle("is-active", match);
if (match) l.setAttribute("aria-current", "page");
else l.removeAttribute("aria-current");
});
}
});
},
{ rootMargin: "-45% 0px -50% 0px" }
);
sections.forEach(function (s) {
spy.observe(s);
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Annals of Natural Inquiry — Academic Journal</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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- ===== Masthead ===== -->
<header class="masthead">
<div class="masthead__top">
<div class="masthead__brand">
<span class="masthead__eyebrow">Established 1887 · Peer-reviewed · Open Access</span>
<h1 class="masthead__title">Annals of <span>Natural Inquiry</span></h1>
<p class="masthead__sub">A weekly journal of original research across the natural sciences</p>
</div>
<div class="masthead__meta">
<span class="badge badge--issue">Vol. 412 · No. 9</span>
<span class="masthead__date" id="issueDate">15 June 2026</span>
</div>
</div>
<div class="rule rule--red"></div>
<nav class="nav" aria-label="Primary">
<ul class="nav__list">
<li><a class="nav__link is-active" href="#main" aria-current="page">Home</a></li>
<li><a class="nav__link" href="#research">Research</a></li>
<li><a class="nav__link" href="#reviews">Reviews</a></li>
<li><a class="nav__link" href="#authors">Authors</a></li>
<li><a class="nav__link" href="#about">About</a></li>
</ul>
<form class="search" role="search" id="searchForm">
<label class="sr-only" for="searchInput">Search articles</label>
<input id="searchInput" class="search__input" type="search" placeholder="Search articles, DOIs, authors…" autocomplete="off" />
<button class="search__btn" type="submit" aria-label="Search">↵</button>
</form>
</nav>
</header>
<main id="main">
<!-- ===== This Week Hero ===== -->
<section class="hero" aria-labelledby="heroHead">
<div class="section-head">
<h2 class="section-head__title" id="heroHead">This Week</h2>
<span class="section-head__line"></span>
</div>
<article class="feature">
<a class="feature__cover" href="#" aria-label="View featured article figure">
<div class="cover-fig" role="img" aria-label="Illustrative micrograph of branching mineral dendrites">
<svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<radialGradient id="g1" cx="40%" cy="35%" r="75%">
<stop offset="0%" stop-color="#fcebed"/>
<stop offset="55%" stop-color="#e9d9c9"/>
<stop offset="100%" stop-color="#2a2018"/>
</radialGradient>
</defs>
<rect width="400" height="300" fill="url(#g1)"/>
<g stroke="#b3132b" stroke-width="1.1" fill="none" opacity="0.85" id="dendrite"></g>
<circle cx="148" cy="118" r="46" fill="none" stroke="#fff" stroke-opacity="0.35" stroke-width="1.5"/>
</svg>
</div>
<span class="cover-fig__scale">20 µm</span>
</a>
<div class="feature__body">
<span class="kicker">Geochemistry · Letter</span>
<h3 class="feature__title"><a href="#">Self-organizing manganese dendrites record sub-annual climate oscillations in cave speleothems</a></h3>
<p class="feature__authors">M. Okonkwo-Reyes, L. Hartwell, S. Nakamura, F. Ben Salah & J. Voss</p>
<p class="feature__abstract">
Layered manganese-oxide dendrites within a Pleistocene flowstone preserve a periodic banding
consistent with a 4.2-month forcing cycle. Using synchrotron micro-XRF mapping across
<span class="eq-var">n</span> = 1 482 growth bands, we reconstruct a 9 600-year record of
monsoon variability and propose a coupled redox–transport mechanism for spontaneous pattern formation.
</p>
<ul class="feature__meta">
<li><span class="meta-k">DOI</span> <a class="mono" href="#">10.4271/ani.2026.04129</a></li>
<li><span class="meta-k">Published</span> <span class="mono">2026-06-15</span></li>
<li><span class="meta-k">Open Access</span> <span class="tag tag--ok">CC BY 4.0</span></li>
</ul>
<div class="feature__actions">
<a class="btn btn--solid" href="#">Read full text</a>
<a class="btn btn--ghost" href="#" data-pdf>Download PDF</a>
<button class="btn btn--ghost" type="button" data-cite="Okonkwo-Reyes M, Hartwell L, Nakamura S, et al. Self-organizing manganese dendrites record sub-annual climate oscillations in cave speleothems. Ann Nat Inq. 2026;412(9):1184–1191. doi:10.4271/ani.2026.04129">Cite</button>
</div>
</div>
</article>
</section>
<!-- ===== Metrics strip ===== -->
<section class="metrics" aria-label="Journal metrics">
<div class="metric">
<span class="metric__value mono" data-count="58.7" data-decimals="1">0</span>
<span class="metric__label">Impact Factor (2025)</span>
</div>
<div class="metric">
<span class="metric__value mono" data-count="2140">0</span>
<span class="metric__label">Articles / year</span>
</div>
<div class="metric">
<span class="metric__value mono" data-count="14">0</span>
<span class="metric__label">Days to first decision</span>
</div>
<div class="metric">
<span class="metric__value mono" data-count="91">0</span><span class="metric__suffix">%</span>
<span class="metric__label">Authors recommend us</span>
</div>
</section>
<div class="layout">
<!-- ===== Latest Research ===== -->
<div class="layout__main">
<section id="research" aria-labelledby="latestHead">
<div class="section-head">
<h2 class="section-head__title" id="latestHead">Latest Research</h2>
<span class="section-head__line"></span>
<div class="filterbar" role="tablist" aria-label="Filter articles by subject">
<button class="chip is-active" role="tab" aria-selected="true" data-filter="all">All</button>
<button class="chip" role="tab" aria-selected="false" data-filter="physics">Physics</button>
<button class="chip" role="tab" aria-selected="false" data-filter="biology">Biology</button>
<button class="chip" role="tab" aria-selected="false" data-filter="climate">Climate</button>
</div>
</div>
<ul class="cards" id="articleList">
<li class="card" data-subject="physics">
<span class="card__kicker">Physics · Article</span>
<h3 class="card__title"><a href="#">Coherent phonon squeezing in a levitated nanodiamond at 4 K</a></h3>
<p class="card__authors">A. Lindqvist, R. Mehta & The QOPT Collaboration</p>
<p class="card__excerpt">We report mechanical squeezing 6.1 dB below the zero-point limit, sustained for <span class="mono">τ = 38 ms</span> at base temperature.</p>
<div class="card__foot">
<span class="mono dim">doi:10.4271/ani.2026.04088</span>
<span class="tag">Article</span>
</div>
</li>
<li class="card" data-subject="biology">
<span class="card__kicker">Cell Biology · Letter</span>
<h3 class="card__title"><a href="#">A cryptic chaperone restores proteostasis in heat-stressed coral symbionts</a></h3>
<p class="card__authors">P. Adeyemi, K. Sørensen, H. Tanaka & M. Costa-Vidal</p>
<p class="card__excerpt">Knock-in of <em>Sym-hsp19</em> raised bleaching thresholds by 1.8 °C across three reef genotypes.</p>
<div class="card__foot">
<span class="mono dim">doi:10.4271/ani.2026.04091</span>
<span class="tag tag--ok">Open Access</span>
</div>
</li>
<li class="card" data-subject="climate">
<span class="card__kicker">Climate Science · Article</span>
<h3 class="card__title"><a href="#">Aerosol indirect forcing has been overstated in low-cloud regimes</a></h3>
<p class="card__authors">D. Whitfield, N. Al-Rashidi & E. Bergström</p>
<p class="card__excerpt">A satellite-constrained reanalysis narrows the forcing range to <span class="mono">−0.71 ± 0.14 W m⁻²</span>.</p>
<div class="card__foot">
<span class="mono dim">doi:10.4271/ani.2026.04102</span>
<span class="tag">Article</span>
</div>
</li>
<li class="card" data-subject="physics">
<span class="card__kicker">Condensed Matter · Letter</span>
<h3 class="card__title"><a href="#">Topological edge currents in a twisted kagome metal above 80 K</a></h3>
<p class="card__authors">Y. Park, G. Moreau & L. Iverson</p>
<p class="card__excerpt">Quantized transport persists to <span class="mono">81.3 K</span>, the highest reported for this lattice class.</p>
<div class="card__foot">
<span class="mono dim">doi:10.4271/ani.2026.04110</span>
<span class="tag">Letter</span>
</div>
</li>
<li class="card" data-subject="biology">
<span class="card__kicker">Neuroscience · Article</span>
<h3 class="card__title"><a href="#">Sleep-dependent replay sharpens spatial maps in juvenile songbirds</a></h3>
<p class="card__authors">R. Castellano, T. Mbeki & S. Fujimoto</p>
<p class="card__excerpt">Hippocampal-analog replay events predicted next-day foraging accuracy (<span class="mono">r = 0.62</span>).</p>
<div class="card__foot">
<span class="mono dim">doi:10.4271/ani.2026.04117</span>
<span class="tag tag--ok">Open Access</span>
</div>
</li>
<li class="card" data-subject="climate">
<span class="card__kicker">Oceanography · Letter</span>
<h3 class="card__title"><a href="#">Abrupt slowdown of a subpolar gyre detected in autonomous float data</a></h3>
<p class="card__authors">I. Novak, B. Quist & The ARGO-X Team</p>
<p class="card__excerpt">Transport declined <span class="mono">12%</span> over four years, outside the bounds of internal variability.</p>
<div class="card__foot">
<span class="mono dim">doi:10.4271/ani.2026.04124</span>
<span class="tag">Letter</span>
</div>
</li>
</ul>
<p class="emptystate" id="emptyState" hidden>No articles match this subject yet.</p>
</section>
<!-- ===== Reviews ===== -->
<section id="reviews" aria-labelledby="reviewsHead">
<div class="section-head">
<h2 class="section-head__title" id="reviewsHead">Reviews & Perspectives</h2>
<span class="section-head__line"></span>
</div>
<ul class="reviews">
<li class="review">
<span class="review__num mono">01</span>
<div>
<h3 class="review__title"><a href="#">The next decade of room-temperature superconductivity: a critical roadmap</a></h3>
<p class="review__by">Review · C. Bianchi & the Materials Consortium · 41 pp.</p>
</div>
</li>
<li class="review">
<span class="review__num mono">02</span>
<div>
<h3 class="review__title"><a href="#">Rethinking the tree of life in the age of metagenomics</a></h3>
<p class="review__by">Perspective · L. Okafor · 12 pp.</p>
</div>
</li>
<li class="review">
<span class="review__num mono">03</span>
<div>
<h3 class="review__title"><a href="#">Causal inference in observational climate attribution</a></h3>
<p class="review__by">Review · S. Greenwald & M. Ren · 28 pp.</p>
</div>
</li>
</ul>
</section>
</div>
<!-- ===== Sidebar ===== -->
<aside class="sidebar" aria-label="Issue and submissions">
<section class="issue-cover" id="authors">
<h2 class="sidebar__head">Current Issue</h2>
<div class="cover">
<div class="cover__band"></div>
<span class="cover__title">Annals of Natural Inquiry</span>
<div class="cover__art" role="img" aria-label="Stylized phase diagram cover art">
<svg viewBox="0 0 200 160" aria-hidden="true">
<rect width="200" height="160" fill="#0f1b2d"/>
<path d="M10 150 C 60 40, 120 130, 190 20" fill="none" stroke="#b3132b" stroke-width="2.5"/>
<path d="M10 150 C 70 70, 130 120, 190 50" fill="none" stroke="#e9d9c9" stroke-width="1.5" opacity="0.7"/>
<g fill="#fcebed">
<circle cx="58" cy="78" r="2.5"/><circle cx="96" cy="96" r="2.5"/>
<circle cx="134" cy="70" r="2.5"/><circle cx="168" cy="48" r="2.5"/>
</g>
</svg>
</div>
<span class="cover__vol mono">Vol. 412 · No. 9 · June 2026</span>
</div>
<a class="link-arrow" href="#">Browse this issue →</a>
</section>
<section class="submit">
<h2 class="submit__head">Submit your research</h2>
<p class="submit__copy">Median time to first decision is <strong class="mono">14 days</strong>. We welcome Articles, Letters, and Reviews across the natural sciences.</p>
<a class="btn btn--solid btn--block" href="#" data-submit>Start a submission</a>
<ul class="submit__list">
<li>Author guidelines</li>
<li>Open-access policy</li>
<li>Peer-review model</li>
</ul>
</section>
<section class="most-read">
<h2 class="sidebar__head">Most Read</h2>
<ol class="most-read__list">
<li><a href="#">CRISPR base-editing of mitochondrial DNA in vivo</a><span class="mono dim">18.4k views</span></li>
<li><a href="#">A revised age for the oldest terrestrial fossils</a><span class="mono dim">12.1k views</span></li>
<li><a href="#">Machine-learned interatomic potentials at scale</a><span class="mono dim">9.7k views</span></li>
</ol>
</section>
</aside>
</div>
<!-- ===== Newsletter ===== -->
<section class="newsletter" id="about" aria-labelledby="nlHead">
<div class="newsletter__inner">
<div>
<h2 class="newsletter__head" id="nlHead">The week in science, in your inbox</h2>
<p class="newsletter__copy">Get the table of contents and editor's picks every Monday. No spam — unsubscribe anytime.</p>
</div>
<form class="newsletter__form" id="nlForm" novalidate>
<label class="sr-only" for="nlEmail">Email address</label>
<input class="newsletter__input" id="nlEmail" type="email" placeholder="you@institution.edu" required />
<button class="btn btn--solid" type="submit">Subscribe</button>
<span class="newsletter__error" id="nlError" role="alert" hidden>Please enter a valid email address.</span>
</form>
</div>
</section>
</main>
<!-- ===== Footer ===== -->
<footer class="footer">
<div class="footer__grid">
<div class="footer__brand">
<h3 class="footer__title">Annals of Natural Inquiry</h3>
<p class="footer__issn mono">ISSN 0148-2271 · eISSN 1476-4129</p>
<p class="footer__pub">Published weekly by the Hartfield Institute Press, New Avalon.</p>
</div>
<nav class="footer__col" aria-label="Journal">
<h4>Journal</h4>
<a href="#">Aims & scope</a><a href="#">Editorial board</a><a href="#">Archive</a><a href="#">Indexing</a>
</nav>
<nav class="footer__col" aria-label="For authors">
<h4>For authors</h4>
<a href="#">Submit</a><a href="#">Guidelines</a><a href="#">Open access</a><a href="#">Ethics</a>
</nav>
<nav class="footer__col" aria-label="Connect">
<h4>Connect</h4>
<a href="#">Contact</a><a href="#">RSS feed</a><a href="#">Press</a><a href="#">Permissions</a>
</nav>
</div>
<div class="rule"></div>
<p class="footer__legal">© 1887–2026 Hartfield Institute Press. All rights reserved. Illustrative demo — fictional content.</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Academic Journal Landing
A scholarly homepage for a fictional weekly journal, Annals of Natural Inquiry. The page opens with a serif masthead, a thin signature-red rule, and a primary nav (Home, Research, Reviews, Authors, About) alongside an archive search box. A “This Week” hero presents the featured Letter with a procedurally generated micrograph-style cover figure, author byline, abstract, DOI, and read/PDF/cite actions. Generous whitespace, hairline rules, and a Source Serif 4 / Inter / JetBrains Mono type system give it an authoritative, print-journal feel.
Below the hero, an animated metrics strip counts up the impact factor, articles per year, and review speed as it scrolls into view. The “Latest Research” feed is a two-column grid of article cards filterable by subject (Physics, Biology, Climate) via chip tabs, with an empty state when no articles match. A sidebar carries a stylized issue cover, a dark “Submit your research” CTA card, and a most-read list, while a closing newsletter band validates email input inline.
Interactions are all vanilla JS: an IntersectionObserver scrollspy keeps the nav in sync, the cover figure is drawn by a recursive branching routine, search reports live result counts, the cite button copies a formatted reference to the clipboard, and a small toast() helper surfaces feedback. The layout is fully responsive down to ~360px, collapsing to a single column with stacked nav and a two-up metrics grid.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.