页面 困难
News — High-Fashion Editorial Landing
An avant-garde high-fashion editorial landing for a fictional monochrome journal, built in vanilla HTML, CSS and JS. Oversized Playfair display type and sparse couture sans set against dramatic negative space, with a single neon accent used once. A cursor-follow accent dot eases across the page, duotone press-style fashion plates reveal slowly on scroll, an asymmetric off-grid gallery anchors the layout, and an image index lights each plate on hover, beside a tracked-caps manifesto and credits block.
在 Lab 中打开
MCP
html css vanilla-js
目标: JS HTML
代码
/* ─────────────────────────────────────────────
NÉANT — High-Fashion Editorial
Monochrome + single neon accent
───────────────────────────────────────────── */
:root {
/* monochrome */
--black: #0a0a0a;
--ink: #121212;
--ink-2: #2a2a2a;
--ink-3: #4a4a4a;
--muted: #8a8a8a;
--paper: #f7f7f5;
--paper-2: #efefec;
--white: #ffffff;
/* single neon accent */
--neon: #c6ff00;
--neon-d: #a7d600;
/* rules */
--rule: rgba(10, 10, 10, 0.16);
--rule-2: rgba(10, 10, 10, 0.32);
--rule-hair: rgba(10, 10, 10, 0.09);
--r-sm: 2px;
--r-md: 4px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--measure: 64ch;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "Inter", system-ui, -apple-system, sans-serif;
font-weight: 300;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
@media (pointer: fine) { body { cursor: none; } }
::selection { background: var(--neon); color: var(--black); }
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--black);
color: var(--neon);
padding: 0.6rem 1rem;
z-index: 200;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.7rem;
}
.skip:focus { left: 1rem; top: 1rem; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ── cursor accent ── */
.cursor {
position: fixed;
top: 0; left: 0;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--neon);
mix-blend-mode: difference;
pointer-events: none;
z-index: 300;
transition: transform 0.18s var(--ease), opacity 0.3s;
opacity: 0;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hot { transform: scale(3.2); }
@media (pointer: coarse) { .cursor { display: none; } }
/* ── rules ── */
.rule { height: 1px; background: var(--rule); }
.rule--heavy { height: 1px; background: var(--rule-2); }
/* ── shared layout ── */
.masthead__bar,
.hero,
.lead,
.gallery,
.manifesto,
.credits,
.footer__bar {
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(1.25rem, 5vw, 4rem);
}
/* ── kicker ── */
.kicker {
margin: 0;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--ink-3);
}
.kicker::before {
content: "";
display: inline-block;
width: 1.6rem;
height: 2px;
background: var(--neon);
vertical-align: middle;
margin-right: 0.7rem;
transform: translateY(-1px);
}
/* ─────────────── MASTHEAD ─────────────── */
.masthead {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--paper) 92%, transparent);
backdrop-filter: blur(8px);
}
.masthead__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding-block: 1rem;
}
.masthead__date {
margin: 0;
font-size: 0.64rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.masthead__logo {
justify-self: center;
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
font-size: clamp(1.4rem, 3vw, 2rem);
letter-spacing: 0.22em;
text-decoration: none;
color: var(--ink);
text-indent: 0.22em;
}
.masthead__nav {
justify-self: end;
display: flex;
gap: clamp(0.8rem, 2vw, 1.8rem);
}
.masthead__nav a {
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
color: var(--ink-2);
position: relative;
padding-block: 0.2rem;
transition: color 0.25s;
}
.masthead__nav a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: var(--neon);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s var(--ease);
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible { color: var(--ink); }
.masthead__nav a:hover::after,
.masthead__nav a:focus-visible::after { transform: scaleX(1); }
/* ─────────────── HERO ─────────────── */
.hero {
padding-top: clamp(3rem, 9vw, 7rem);
padding-bottom: clamp(2rem, 6vw, 4rem);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
grid-template-areas:
"kicker kicker"
"title plate"
"meta plate"
"byline plate";
column-gap: clamp(1.5rem, 5vw, 5rem);
row-gap: clamp(1.2rem, 3vw, 2.2rem);
align-items: start;
}
.hero__kicker { grid-area: kicker; }
.hero__title {
grid-area: title;
margin: 0;
font-family: "Playfair Display", Georgia, serif;
font-weight: 500;
line-height: 0.92;
letter-spacing: -0.01em;
}
.hero__line {
display: block;
font-size: clamp(3.4rem, 13vw, 9.5rem);
}
.hero__line--italic {
font-style: italic;
font-weight: 500;
margin-left: 0.6em;
color: var(--ink-3);
}
.hero__line--accent {
position: relative;
display: inline-block;
}
.hero__line--accent::after {
content: "";
position: absolute;
left: -0.04em; right: -0.04em;
bottom: 0.12em;
height: 0.09em;
background: var(--neon);
z-index: -1;
}
.hero__meta {
grid-area: meta;
display: flex;
align-items: flex-start;
gap: 1.2rem;
max-width: 30rem;
}
.hero__index {
font-size: 0.7rem;
letter-spacing: 0.14em;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
padding-top: 0.25rem;
}
.hero__line-accent {
display: block;
width: 2.4rem; height: 1px;
background: var(--ink-2);
margin-top: 0.6rem;
flex: none;
}
.hero__dek {
margin: 0;
font-size: clamp(0.92rem, 1.6vw, 1.05rem);
font-weight: 300;
color: var(--ink-2);
max-width: 24rem;
}
.hero__byline {
grid-area: byline;
margin: 0;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.hero__byline em { font-style: normal; color: var(--ink); }
.hero__plate {
grid-area: plate;
margin: 0;
align-self: stretch;
}
.plate__img--hero {
aspect-ratio: 3 / 4;
min-height: 320px;
}
/* ─────────────── PLATES / FIGURES ─────────────── */
.plate { margin: 0; }
.plate__img {
width: 100%;
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
filter: grayscale(0.1) contrast(1.04);
transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.plate__img::after {
/* film grain / vignette overlay */
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(120% 90% at 50% 18%, transparent 40%, rgba(10,10,10,0.28) 100%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px);
pointer-events: none;
}
/* duotone "press photography" via layered gradients */
.plate__img--hero {
background:
linear-gradient(120deg, rgba(198,255,0,0.10), transparent 38%),
radial-gradient(80% 60% at 62% 30%, #e9e9e6 0%, #bfbfbb 30%, #5c5c58 66%, #161614 100%),
linear-gradient(200deg, #2a2a28, #0c0c0b);
}
.plate__img--a {
aspect-ratio: 3 / 4;
background:
linear-gradient(0deg, rgba(198,255,0,0.16), transparent 26%),
radial-gradient(70% 80% at 40% 24%, #d6d6d2 0%, #8e8e8a 34%, #1c1c1a 78%),
linear-gradient(160deg, #232321, #0a0a0a);
}
.plate__img--b {
aspect-ratio: 16 / 10;
background:
radial-gradient(60% 120% at 30% 50%, #e2e2de 0%, #6e6e6a 36%, #131311 80%),
radial-gradient(60% 120% at 72% 50%, #aeaeaa 0%, #2a2a28 60%, transparent 80%),
linear-gradient(90deg, #1a1a18, #050505);
}
.plate__img--c {
aspect-ratio: 1 / 1;
background:
repeating-linear-gradient(54deg, #3a3a37 0 10px, #232321 10px 22px, #15151400 22px 30px),
radial-gradient(90% 90% at 30% 20%, #5a5a56, #0c0c0b);
}
.plate__img--d {
aspect-ratio: 1 / 1;
background:
radial-gradient(50% 70% at 50% 40%, #f4f4f0 0%, #cfcfca 22%, #5a5a56 52%, #111110 88%),
linear-gradient(180deg, #20201e, #060606);
}
.plate__img--e {
aspect-ratio: 3 / 4.4;
background:
linear-gradient(90deg, transparent 48.6%, var(--neon) 48.6% 50.4%, transparent 50.4%),
radial-gradient(80% 80% at 30% 30%, #cfcfca 0%, #6c6c68 38%, #131311 82%),
linear-gradient(200deg, #232321, #070707);
}
.plate:hover .plate__img,
.plate.is-lit .plate__img {
filter: grayscale(0) contrast(1.12) brightness(1.04);
transform: scale(1.012);
}
.plate.is-lit .plate__img {
box-shadow: 0 0 0 2px var(--neon);
}
.plate__cap {
margin-top: 0.7rem;
font-size: 0.72rem;
font-style: italic;
color: var(--ink-3);
font-family: "Playfair Display", Georgia, serif;
max-width: 34ch;
line-height: 1.45;
}
.plate__cap-no {
display: inline-block;
font-family: "Inter", sans-serif;
font-style: normal;
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
margin-right: 0.5rem;
}
.plate__credit {
display: block;
margin-top: 0.35rem;
font-family: "Inter", sans-serif;
font-style: normal;
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* ── scroll reveal ── */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 1s var(--ease), transform 1.1s var(--ease);
will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ─────────────── LEAD ESSAY ─────────────── */
.lead {
padding-block: clamp(3rem, 7vw, 5.5rem);
display: grid;
grid-template-columns: 14rem 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.lead__title {
margin: 0;
font-family: "Playfair Display", Georgia, serif;
font-weight: 500;
font-style: italic;
font-size: clamp(1.5rem, 3vw, 2.2rem);
line-height: 1.1;
position: sticky;
top: 5.5rem;
}
.lead__body {
columns: 2;
column-gap: 2.6rem;
column-rule: 1px solid var(--rule-hair);
font-size: 0.95rem;
text-align: justify;
hyphens: auto;
color: var(--ink-2);
}
.lead__para { margin: 0 0 1rem; break-inside: avoid-column; }
.lead__para em { font-style: italic; color: var(--ink); }
.lead__para--drop::first-letter {
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
font-size: 3.6em;
line-height: 0.74;
float: left;
padding: 0.06em 0.12em 0 0;
color: var(--ink);
}
.pullquote {
grid-column: 2;
margin: 1.4rem 0 0;
padding: 1.4rem 0 0;
border-top: 1px solid var(--rule-2);
max-width: 38rem;
}
.pullquote__text {
margin: 0;
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.4rem, 3.4vw, 2.3rem);
line-height: 1.15;
color: var(--ink);
}
.pullquote__attr {
margin: 0.9rem 0 0;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* ─────────────── GALLERY ─────────────── */
.gallery { padding-block: clamp(3rem, 7vw, 5.5rem); }
.gallery__head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.gallery__title {
margin: 0.7rem 0 0.8rem;
font-family: "Playfair Display", Georgia, serif;
font-weight: 500;
font-size: clamp(2rem, 6vw, 4rem);
line-height: 0.98;
}
.gallery__lede {
margin: 0;
max-width: 36rem;
color: var(--ink-2);
font-size: 0.95rem;
}
.gallery__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(10px, auto);
gap: clamp(1.5rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.4rem);
align-items: start;
}
.plate--tall { grid-column: 1 / 5; }
.plate--wide { grid-column: 5 / 13; margin-top: 3rem; }
.plate--small:nth-of-type(3) { grid-column: 1 / 5; }
.plate--small:nth-of-type(4) { grid-column: 5 / 8; margin-top: 1.5rem; }
.plate--offset { grid-column: 9 / 13; margin-top: -2.5rem; }
/* image index */
.index {
margin-top: clamp(2.5rem, 6vw, 4rem);
border-top: 1px solid var(--rule-2);
padding-top: 1.5rem;
}
.index__label { margin-bottom: 1.2rem; }
.index__list {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 0;
}
.index__item {
display: flex;
align-items: baseline;
gap: 0.9rem;
width: 100%;
background: none;
border: 0;
border-bottom: 1px solid var(--rule-hair);
padding: 0.85rem 0.2rem;
text-align: left;
font-family: inherit;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--ink-2);
cursor: pointer;
transition: color 0.25s, padding-left 0.3s var(--ease), background 0.25s;
}
@media (pointer: fine) { .index__item { cursor: none; } }
.index__item span {
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-size: 1rem;
color: var(--muted);
min-width: 2.4rem;
transition: color 0.25s;
}
.index__item:hover,
.index__item:focus-visible {
color: var(--ink);
padding-left: 0.8rem;
outline: none;
}
.index__item:hover span,
.index__item:focus-visible span { color: var(--neon-d); }
.index__item:focus-visible { box-shadow: inset 2px 0 0 var(--neon); }
/* ─────────────── MANIFESTO ─────────────── */
.manifesto { padding-block: clamp(3.5rem, 9vw, 7rem); }
.manifesto__title {
margin: 1rem 0 clamp(2rem, 5vw, 3.5rem);
font-family: "Playfair Display", Georgia, serif;
font-weight: 500;
font-size: clamp(2.6rem, 11vw, 8rem);
line-height: 0.9;
letter-spacing: -0.015em;
}
.accent-word {
font-style: italic;
position: relative;
}
.accent-word::after {
content: "";
position: absolute;
left: 0; bottom: 0.08em;
width: 100%; height: 0.07em;
background: var(--neon);
}
.manifesto__cols {
columns: 3;
column-gap: clamp(1.5rem, 4vw, 3rem);
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--ink-2);
max-width: 60rem;
}
.manifesto__cols p { margin: 0 0 1rem; break-inside: avoid; }
/* ─────────────── CREDITS ─────────────── */
.credits { padding-block: clamp(2.5rem, 6vw, 4rem); }
.credits__grid {
margin: 1.4rem 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 1.6rem 1.2rem;
}
.credits__grid div { border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.credits__grid dt {
font-size: 0.56rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.credits__grid dd {
margin: 0.35rem 0 0;
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--ink);
}
/* ─────────────── FOOTER ─────────────── */
.footer { margin-top: clamp(2rem, 5vw, 4rem); }
.footer__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.footer__logo {
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
font-size: 1.5rem;
letter-spacing: 0.2em;
text-decoration: none;
color: var(--ink);
}
.footer__note {
margin: 0;
font-size: 0.64rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.footer__top {
background: none;
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
padding: 0.55rem 1rem;
font-family: inherit;
font-size: 0.64rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
@media (pointer: fine) { .footer__top { cursor: none; } }
.footer__top:hover,
.footer__top:focus-visible {
background: var(--neon);
border-color: var(--neon);
color: var(--black);
outline: none;
}
/* ─────────────── TOAST ─────────────── */
.toast {
position: fixed;
left: 50%; bottom: 2rem;
transform: translate(-50%, 140%);
background: var(--black);
color: var(--paper);
padding: 0.75rem 1.3rem;
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
border-left: 2px solid var(--neon);
z-index: 250;
transition: transform 0.5s var(--ease);
max-width: 90vw;
}
.toast.is-show { transform: translate(-50%, 0); }
/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 980px) {
.hero {
grid-template-columns: 1fr;
grid-template-areas:
"kicker"
"title"
"plate"
"meta"
"byline";
}
.hero__plate { max-width: 32rem; }
.lead { grid-template-columns: 1fr; }
.lead__title { position: static; }
.manifesto__cols { columns: 2; }
.plate--tall { grid-column: 1 / 7; }
.plate--wide { grid-column: 7 / 13; margin-top: 0; }
.plate--small:nth-of-type(3) { grid-column: 1 / 7; }
.plate--small:nth-of-type(4) { grid-column: 7 / 13; margin-top: 0; }
.plate--offset { grid-column: 1 / 13; margin-top: 0; }
}
@media (max-width: 720px) {
.masthead__bar {
grid-template-columns: 1fr;
justify-items: center;
gap: 0.6rem;
text-align: center;
}
.masthead__nav { justify-self: center; }
.lead__body { columns: 1; }
.manifesto__cols { columns: 1; }
.gallery__grid { display: flex; flex-direction: column; }
.plate--wide, .plate--offset, .plate--tall, .plate--small { margin-top: 0; }
}
@media (max-width: 380px) {
.hero__line { font-size: clamp(2.8rem, 18vw, 3.4rem); }
.masthead__nav { gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
}/* ─────────────────────────────────────────────
NÉANT — High-Fashion Editorial
Vanilla JS: cursor-follow accent, scroll reveal,
image index hover, smooth scroll, toast.
───────────────────────────────────────────── */
(function () {
"use strict";
var prefersReduced = window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
/* ── 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);
}
/* ── cursor-follow neon accent ── */
var cursor = document.getElementById("cursor");
var finePointer = window.matchMedia("(pointer: fine)").matches;
if (cursor && finePointer && !prefersReduced) {
var cx = window.innerWidth / 2,
cy = window.innerHeight / 2;
var tx = cx,
ty = cy;
var raf;
function loop() {
// easing toward target for an elegant lag
cx += (tx - cx) * 0.18;
cy += (ty - cy) * 0.18;
cursor.style.transform =
"translate(" + cx + "px," + cy + "px)" +
(cursor.classList.contains("is-hot") ? " scale(3.2)" : "");
raf = requestAnimationFrame(loop);
}
document.addEventListener("mousemove", function (e) {
tx = e.clientX;
ty = e.clientY;
if (!cursor.classList.contains("is-active")) {
cursor.classList.add("is-active");
}
});
document.addEventListener("mouseleave", function () {
cursor.classList.remove("is-active");
});
// grow over interactive / image elements
var hotSelector =
"a, button, .plate, .index__item, .plate__img";
document.addEventListener("mouseover", function (e) {
if (e.target.closest(hotSelector)) cursor.classList.add("is-hot");
});
document.addEventListener("mouseout", function (e) {
if (e.target.closest(hotSelector)) cursor.classList.remove("is-hot");
});
loop();
window.addEventListener("beforeunload", function () {
cancelAnimationFrame(raf);
});
} else if (cursor) {
cursor.style.display = "none";
}
/* ── scroll reveal of plates / blocks ── */
var reveals = Array.prototype.slice.call(
document.querySelectorAll("[data-reveal]")
);
if (prefersReduced || !("IntersectionObserver" in window)) {
reveals.forEach(function (el) {
el.classList.add("is-in");
});
} else {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.18, rootMargin: "0px 0px -8% 0px" }
);
reveals.forEach(function (el) {
io.observe(el);
});
}
/* ── image index hover + click ── */
var plates = {};
document.querySelectorAll("[data-plate]").forEach(function (p) {
plates[p.getAttribute("data-plate")] = p;
});
function lightPlate(key, on) {
var p = plates[key];
if (p) p.classList.toggle("is-lit", on);
}
document.querySelectorAll(".index__item").forEach(function (btn) {
var key = btn.getAttribute("data-target");
btn.addEventListener("mouseenter", function () {
lightPlate(key, true);
});
btn.addEventListener("mouseleave", function () {
lightPlate(key, false);
});
btn.addEventListener("focus", function () {
lightPlate(key, true);
});
btn.addEventListener("blur", function () {
lightPlate(key, false);
});
btn.addEventListener("click", function () {
var p = plates[key];
if (!p) return;
p.scrollIntoView({
behavior: prefersReduced ? "auto" : "smooth",
block: "center",
});
// brief flash to confirm
p.classList.add("is-lit");
setTimeout(function () {
p.classList.remove("is-lit");
}, 1400);
toast("Plate " + btn.querySelector("span").textContent + " — in frame");
});
});
/* ── smooth in-page nav + scroll-to-top ── */
function smoothTo(target) {
if (!target) return;
target.scrollIntoView({
behavior: prefersReduced ? "auto" : "smooth",
block: "start",
});
}
document
.querySelectorAll('a[href^="#"]')
.forEach(function (link) {
link.addEventListener("click", function (e) {
var id = link.getAttribute("href");
if (id.length < 2) return;
var target = document.querySelector(id);
if (target) {
e.preventDefault();
smoothTo(target);
}
});
});
var topBtn = document.querySelector("[data-scroll-top]");
if (topBtn) {
topBtn.addEventListener("click", function () {
smoothTo(document.getElementById("top"));
toast("Back to the top");
});
}
/* ── welcome flourish ── */
setTimeout(function () {
toast("Issue Nº 14 — The Negative Issue");
}, 900);
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NÉANT — High-Fashion Editorial</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@200;300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- cursor-follow neon accent -->
<div class="cursor" id="cursor" aria-hidden="true"></div>
<a class="skip" href="#main">Skip to content</a>
<!-- ───────────────── MASTHEAD / INDEX NAV ───────────────── -->
<header class="masthead" id="top">
<div class="masthead__bar">
<p class="masthead__date">Issue Nº 14 · Spring/Summer · MMXXVI</p>
<a class="masthead__logo" href="#top" aria-label="Néant, home">NÉANT</a>
<nav class="masthead__nav" aria-label="Sections">
<a href="#plates">Plates</a>
<a href="#manifesto">Manifesto</a>
<a href="#credits">Credits</a>
</nav>
</div>
<div class="rule rule--heavy" role="presentation"></div>
</header>
<main id="main">
<!-- ───────────────── HERO ───────────────── -->
<section class="hero" aria-labelledby="hero-title">
<p class="kicker hero__kicker">The Negative Issue</p>
<h1 class="hero__title" id="hero-title">
<span class="hero__line">Wearing</span>
<span class="hero__line hero__line--italic">the</span>
<span class="hero__line hero__line--accent">Void</span>
</h1>
<div class="hero__meta">
<span class="hero__index" data-index="01">01 / 09</span>
<span class="hero__line-accent" aria-hidden="true"></span>
<p class="hero__dek">
A season stripped to its silhouette. We photograph absence as a
garment — light, weight and shadow rendered as couture.
</p>
</div>
<figure class="hero__plate plate" data-reveal data-plate="duo-1">
<div class="plate__img plate__img--hero" role="img"
aria-label="Duotone portrait of a model draped in matte black against blown-out light"></div>
<figcaption class="plate__cap">
<span class="plate__cap-no">Plate I</span>
Études in matte black, shot at the salt flats before noon.
<span class="plate__credit">Ph. M. Solène — Néant Studio</span>
</figcaption>
</figure>
<p class="hero__byline">
Words <em>Adèle Rousseau</em> · Direction <em>Kit Maro</em>
· 9 min read
</p>
</section>
<div class="rule" role="presentation"></div>
<!-- ───────────────── LEAD ESSAY ───────────────── -->
<section class="lead" aria-labelledby="lead-title">
<h2 class="lead__title" id="lead-title">An Editor's Note</h2>
<div class="lead__body">
<p class="lead__para lead__para--drop">
There is a discipline in restraint that the runway has spent a decade
forgetting. This issue is our argument for the empty frame — the
collar left undone, the page left mostly white, the model asked to
stand and simply <em>be present</em>. We arrived at the studio with
forty looks and used eleven. What remained felt heavier for what was
taken away.
</p>
<p class="lead__para">
The houses we follow this season have converged, almost without
conferring, on a monochrome grammar: charcoal, bone, the particular
grey of wet pavement at six in the morning. Colour appears once, like
a held breath — a single seam of acid light traced along a hem, a
glove, a closing look. We have let that logic govern these pages.
</p>
</div>
<aside class="pullquote" role="note">
<p class="pullquote__text">
“To dress in nothing is the hardest tailoring of all — it leaves the
body no place to hide.”
</p>
<p class="pullquote__attr">— Solène Marchetti, atelier director</p>
</aside>
</section>
<div class="rule rule--heavy" role="presentation"></div>
<!-- ───────────────── ASYMMETRIC GALLERY / PLATES ───────────────── -->
<section class="gallery" id="plates" aria-labelledby="gallery-title">
<header class="gallery__head">
<p class="kicker">The Plates</p>
<h2 class="gallery__title" id="gallery-title">Nine Studies in Absence</h2>
<p class="gallery__lede">
Hover an index number to bring its plate forward. Each frame is a
duotone — ink against light, never grey for the sake of grey.
</p>
</header>
<div class="gallery__grid">
<figure class="plate plate--tall" data-reveal data-plate="duo-2">
<div class="plate__img plate__img--a" role="img"
aria-label="Model in a column dress, neon hemline against deep shadow"></div>
<figcaption class="plate__cap">
<span class="plate__cap-no">Plate II</span>
The single seam. A column in bone wool, hem traced in acid.
<span class="plate__credit">Look 03 — House of Vael</span>
</figcaption>
</figure>
<figure class="plate plate--wide" data-reveal data-plate="duo-3">
<div class="plate__img plate__img--b" role="img"
aria-label="Two figures overlapping in profile, high-contrast monochrome"></div>
<figcaption class="plate__cap">
<span class="plate__cap-no">Plate III</span>
Two silhouettes, one shadow. Tailoring as conversation.
<span class="plate__credit">Looks 07 & 08 — Maro Atelier</span>
</figcaption>
</figure>
<figure class="plate plate--small" data-reveal data-plate="duo-4">
<div class="plate__img plate__img--c" role="img"
aria-label="Close detail of fabric folds in graphite tones"></div>
<figcaption class="plate__cap">
<span class="plate__cap-no">Plate IV</span>
Folded graphite. Detail of the closing coat.
<span class="plate__credit">Look 11 — Néant Studio</span>
</figcaption>
</figure>
<figure class="plate plate--small" data-reveal data-plate="duo-5">
<div class="plate__img plate__img--d" role="img"
aria-label="Backlit silhouette, face obscured by light"></div>
<figcaption class="plate__cap">
<span class="plate__cap-no">Plate V</span>
Erased by light. The face as negative space.
<span class="plate__credit">Look 05 — House of Vael</span>
</figcaption>
</figure>
<figure class="plate plate--tall plate--offset" data-reveal data-plate="duo-6">
<div class="plate__img plate__img--e" role="img"
aria-label="Full-length figure, neon vertical line dividing the frame"></div>
<figcaption class="plate__cap">
<span class="plate__cap-no">Plate VI</span>
The dividing line. Where the studio ends and the dark begins.
<span class="plate__credit">Look 09 — Maro Atelier</span>
</figcaption>
</figure>
</div>
<!-- image index -->
<aside class="index" aria-label="Plate index">
<p class="kicker index__label">Index</p>
<ul class="index__list">
<li><button class="index__item" data-target="duo-2"><span>II</span> The Single Seam</button></li>
<li><button class="index__item" data-target="duo-3"><span>III</span> Two Silhouettes</button></li>
<li><button class="index__item" data-target="duo-4"><span>IV</span> Folded Graphite</button></li>
<li><button class="index__item" data-target="duo-5"><span>V</span> Erased by Light</button></li>
<li><button class="index__item" data-target="duo-6"><span>VI</span> The Dividing Line</button></li>
</ul>
</aside>
</section>
<div class="rule rule--heavy" role="presentation"></div>
<!-- ───────────────── MANIFESTO ───────────────── -->
<section class="manifesto" id="manifesto" aria-labelledby="manifesto-title">
<p class="kicker">Manifesto</p>
<h2 class="manifesto__title" id="manifesto-title">
Less, until it<br /><span class="accent-word">aches</span>.
</h2>
<div class="manifesto__cols">
<p>
We believe the empty frame is not a failure of nerve but a decision.
We believe a single colour, used once, says more than a spectrum.
</p>
<p>
We believe a garment should survive being photographed in silence.
We believe negative space is the most expensive material in the room.
</p>
<p>
We believe the reader deserves room to breathe. We print on heavy
stock and leave the margins wide. This is the whole of our credo.
</p>
</div>
</section>
<div class="rule" role="presentation"></div>
<!-- ───────────────── CREDITS (tiny tracked caps) ───────────────── -->
<section class="credits" id="credits" aria-labelledby="credits-title">
<p class="kicker">Credits</p>
<h2 class="visually-hidden" id="credits-title">Issue credits</h2>
<dl class="credits__grid">
<div><dt>Editor-in-Chief</dt><dd>Adèle Rousseau</dd></div>
<div><dt>Creative Direction</dt><dd>Kit Maro</dd></div>
<div><dt>Photography</dt><dd>M. Solène</dd></div>
<div><dt>Styling</dt><dd>Iris Vandeel</dd></div>
<div><dt>Set & Light</dt><dd>Néant Studio</dd></div>
<div><dt>Type</dt><dd>Playfair / Inter</dd></div>
<div><dt>Looks</dt><dd>Vael · Maro · Néant</dd></div>
<div><dt>Location</dt><dd>The Salt Flats</dd></div>
</dl>
</section>
</main>
<!-- ───────────────── FOOTER ───────────────── -->
<footer class="footer">
<div class="rule rule--heavy" role="presentation"></div>
<div class="footer__bar">
<a class="footer__logo" href="#top">NÉANT</a>
<p class="footer__note">
A fictional journal of subtraction · Issue Nº 14 · © MMXXVI
</p>
<button class="footer__top" type="button" data-scroll-top>↑ Top</button>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>High-Fashion Editorial Landing
A landing page for Néant, a fictional journal of subtraction, art-directed as a monochrome high-fashion editorial. The masthead sits sticky and quiet over a warm paper ground; the hero stacks an oversized serif headline — Wearing the Void — against a single neon underline and an off-grid duotone portrait, all framed by deliberate negative space. A drop-capped editor’s note runs in a justified two-column grid beside a sticky italic title, with an oversized serif pull quote breaking the measure.
The heart of the page is an asymmetric gallery of nine “plates”: large duotone fashion images simulated entirely with layered CSS gradients (ink against blown-out light, never flat grey), each carried in a tall, wide or offset cell with a tiny italic caption and a tracked credit line. A manifesto block sets a giant serif statement over three slim columns of credo, and the credits close in minuscule letter-spaced caps.
Interactions are vanilla JS and lean elegant: a neon cursor dot eases toward the pointer and swells
over anything interactive, plates fade and rise into view on scroll via IntersectionObserver, and
the image index lights its matching plate on hover or focus and scrolls it into frame on click. A
small toast() helper confirms actions, smooth in-page anchors and a back-to-top control round it
out, and everything respects prefers-reduced-motion and collapses to a single column under 720px.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.