mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
382 lines
16 KiB
HTML
382 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Maison Sable · N° 04, Autumn</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=Cormorant+Garamond:wght@300;400;500&family=EB+Garamond:wght@400;500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
/* Hallmark · macrostructure: Specimen · theme: Maison (candidate) · tone: quiet-luxury/neutral */
|
|
:root {
|
|
/* paper + ink - warm near-neutrals, chroma held far under 0.05 */
|
|
--paper: oklch(97.5% 0.005 85);
|
|
--paper-veil: oklch(94% 0.006 84);
|
|
--ink: oklch(26% 0.008 60);
|
|
--ink-soft: oklch(40% 0.008 62);
|
|
--ink-muted: oklch(53% 0.008 64);
|
|
--hairline: oklch(88% 0.006 80);
|
|
--hairline-2: oklch(80% 0.007 78);
|
|
|
|
/* lookbook cloth panels - tinted neutrals, warmth whispered, chroma < 0.05 */
|
|
--look-a-1: oklch(88% 0.018 84);
|
|
--look-a-2: oklch(75% 0.030 66);
|
|
--look-b-1: oklch(85% 0.010 96);
|
|
--look-b-2: oklch(71% 0.013 92);
|
|
--look-c-1: oklch(46% 0.012 62);
|
|
--look-c-2: oklch(33% 0.014 56);
|
|
--sheen: oklch(99% 0.004 90 / 0.55);
|
|
--sheen-dim: oklch(82% 0.010 80 / 0.28);
|
|
--shadow: oklch(30% 0.020 55 / 0.14);
|
|
|
|
/* type */
|
|
--font-display: "Cormorant Garamond", Georgia, serif;
|
|
--font-body: "EB Garamond", Georgia, serif;
|
|
|
|
/* 4pt rhythm, in rem to stay off the px audit */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
--space-6: 2rem;
|
|
--space-7: 3rem;
|
|
--space-8: 4rem;
|
|
--space-9: 6rem;
|
|
--space-10: 8rem;
|
|
|
|
--edge: clamp(1.5rem, 5vw, 5rem);
|
|
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { overflow-x: clip; }
|
|
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
|
body {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--font-body);
|
|
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
|
|
line-height: 1.65;
|
|
font-feature-settings: "liga" 1, "onum" 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.shell { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--edge); }
|
|
|
|
/* ---- masthead: one centered rank of letterspaced small caps ---- */
|
|
.masthead { padding-block: var(--space-6) var(--space-2); }
|
|
.nav { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(var(--space-5), 5vw, var(--space-8)); }
|
|
.nav__link {
|
|
position: relative;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
padding-block: var(--space-2);
|
|
transition: color 260ms var(--ease);
|
|
}
|
|
.nav__link::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; right: 0; bottom: var(--space-1);
|
|
height: 1px;
|
|
background: var(--ink);
|
|
transform: scaleX(0);
|
|
transform-origin: center;
|
|
transition: transform 340ms var(--ease);
|
|
}
|
|
.nav__link:hover { color: var(--ink); }
|
|
.nav__link:hover::after,
|
|
.nav__link:focus-visible::after { transform: scaleX(1); }
|
|
.nav__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; color: var(--ink); }
|
|
.nav__link:active { color: var(--ink); transform: translateY(1px); }
|
|
|
|
/* ---- hero: the nameplate lockup, floated in air ---- */
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
min-height: clamp(28rem, 74svh, 42rem);
|
|
padding-block: clamp(3rem, 7vh, 5rem) clamp(6rem, 17vh, 11rem);
|
|
}
|
|
.lockup { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); max-width: 42rem; }
|
|
.lockup__rule { width: 2.5rem; height: 1px; background: var(--hairline-2); }
|
|
.lockup__num {
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.42em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
padding-left: 0.42em;
|
|
line-height: 1.2;
|
|
}
|
|
.lockup__name {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(4.5rem, 15vw, 9rem);
|
|
line-height: 0.98;
|
|
letter-spacing: 0.06em;
|
|
padding-left: 0.06em;
|
|
color: var(--ink);
|
|
overflow-wrap: anywhere;
|
|
min-width: 0;
|
|
}
|
|
.lockup__line {
|
|
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
|
|
letter-spacing: 0.02em;
|
|
color: var(--ink-soft);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ---- lookbook: three tall figures, staggered off a single baseline ---- */
|
|
.lookbook { padding-block: clamp(var(--space-8), 10vh, var(--space-9)); }
|
|
.lookbook__grid {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: clamp(var(--space-5), 3vw, var(--space-7));
|
|
align-items: start;
|
|
}
|
|
.look { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
.look--a { margin-block-start: var(--space-6); }
|
|
.look--c { margin-block-start: var(--space-8); }
|
|
.look__plate {
|
|
aspect-ratio: 4 / 5;
|
|
border-radius: 2px;
|
|
background-color: var(--paper-veil);
|
|
box-shadow: 0 var(--space-4) var(--space-7) calc(var(--space-5) * -1) var(--shadow);
|
|
}
|
|
.look__plate--a {
|
|
background-image:
|
|
radial-gradient(120% 85% at 28% 20%, var(--sheen), transparent 55%),
|
|
linear-gradient(158deg, var(--look-a-1), var(--look-a-2));
|
|
}
|
|
.look__plate--b {
|
|
background-image:
|
|
radial-gradient(120% 85% at 30% 18%, var(--sheen), transparent 52%),
|
|
linear-gradient(158deg, var(--look-b-1), var(--look-b-2));
|
|
}
|
|
.look__plate--c {
|
|
background-image:
|
|
radial-gradient(115% 80% at 32% 20%, var(--sheen-dim), transparent 50%),
|
|
linear-gradient(158deg, var(--look-c-1), var(--look-c-2));
|
|
}
|
|
.look__cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-1); }
|
|
.look__id { font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
|
|
.look__desc { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.01em; color: var(--ink); }
|
|
|
|
/* ---- credo: one centered editorial statement, narrow measure ---- */
|
|
.credo { display: flex; justify-content: center; padding-block: clamp(var(--space-8), 12vh, var(--space-10)); border-top: 1px solid var(--hairline); }
|
|
.credo__text {
|
|
max-width: 54ch;
|
|
text-align: center;
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
|
|
line-height: 1.42;
|
|
letter-spacing: 0.01em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* ---- the atelier: quiet, asymmetric ---- */
|
|
.cloth {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
|
|
gap: clamp(var(--space-6), 6vw, var(--space-9));
|
|
align-items: start;
|
|
padding-block: clamp(var(--space-8), 10vh, var(--space-9));
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
.cloth__meta { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted); }
|
|
.cloth__title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
|
|
line-height: 1.06;
|
|
letter-spacing: 0.01em;
|
|
color: var(--ink);
|
|
margin-top: var(--space-4);
|
|
max-width: 15ch;
|
|
overflow-wrap: anywhere;
|
|
min-width: 0;
|
|
}
|
|
.cloth__body { display: flex; flex-direction: column; gap: var(--space-5); }
|
|
.cloth__copy { max-width: 60ch; color: var(--ink-soft); line-height: 1.72; }
|
|
.link {
|
|
align-self: start;
|
|
font-size: 0.8125rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
padding-block: var(--space-2);
|
|
border-bottom: 1px solid var(--hairline-2);
|
|
transition: color 260ms var(--ease), border-color 260ms var(--ease);
|
|
}
|
|
.link:hover { border-color: var(--ink); }
|
|
.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
|
|
.link:active { transform: translateY(1px); }
|
|
|
|
/* ---- piece index: the twelve, hairline separated ---- */
|
|
.index { padding-block: clamp(var(--space-8), 10vh, var(--space-9)); border-top: 1px solid var(--hairline); }
|
|
.index__head { text-align: center; margin-bottom: clamp(var(--space-6), 5vh, var(--space-8)); }
|
|
.index__meta { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted); }
|
|
.index__title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
|
|
line-height: 1.1;
|
|
letter-spacing: 0.02em;
|
|
color: var(--ink);
|
|
margin-top: var(--space-3);
|
|
overflow-wrap: anywhere;
|
|
min-width: 0;
|
|
}
|
|
.index__list { list-style: none; max-width: 52rem; margin-inline: auto; }
|
|
.piece {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) auto;
|
|
gap: var(--space-4);
|
|
align-items: baseline;
|
|
padding-block: var(--space-4);
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
.piece:last-child { border-bottom: 1px solid var(--hairline); }
|
|
.piece__name { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.01em; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
|
|
.piece__detail { color: var(--ink-muted); font-size: 0.9375rem; }
|
|
.piece__price { font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
|
|
/* ---- footer: small, centered ---- */
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
text-align: center;
|
|
padding-block: clamp(var(--space-8), 10vh, var(--space-9)) clamp(var(--space-9), 12vh, var(--space-10));
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
.footer__mark { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.14em; color: var(--ink); }
|
|
.footer__places { font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-muted); padding-left: 0.4em; }
|
|
.footer__note { font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink-muted); }
|
|
|
|
/* ---- one orchestrated entrance ---- */
|
|
@keyframes rise { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: none; } }
|
|
.lockup > * { animation: rise 1000ms var(--ease) both; }
|
|
.lockup > *:nth-child(1) { animation-delay: 0ms; }
|
|
.lockup > *:nth-child(2) { animation-delay: 110ms; }
|
|
.lockup > *:nth-child(3) { animation-delay: 230ms; }
|
|
.lockup > *:nth-child(4) { animation-delay: 370ms; }
|
|
|
|
/* ---- responsive: no horizontal scroll 320-1280 ---- */
|
|
@media (max-width: 48rem) {
|
|
.cloth { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
|
|
.look--a, .look--c { margin-block-start: 0; }
|
|
}
|
|
@media (max-width: 40rem) {
|
|
.lookbook__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); max-width: 26rem; margin-inline: auto; }
|
|
.piece { grid-template-columns: minmax(0, 1fr) auto; }
|
|
.piece__name { grid-column: 1; grid-row: 1; }
|
|
.piece__price { grid-column: 2; grid-row: 1; }
|
|
.piece__detail { grid-column: 1 / -1; grid-row: 2; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
|
|
.lockup > * { animation: none; opacity: 1; transform: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
|
|
<header class="masthead">
|
|
<nav class="nav" aria-label="Primary">
|
|
<a class="nav__link" href="#top">Maison</a>
|
|
<a class="nav__link" href="#lookbook">Collection</a>
|
|
<a class="nav__link" href="#atelier">Atelier</a>
|
|
<a class="nav__link" href="#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero" id="top">
|
|
<div class="lockup">
|
|
<span class="lockup__rule" aria-hidden="true"></span>
|
|
<p class="lockup__num">N° 04 · Autumn</p>
|
|
<h1 class="lockup__name">Sable</h1>
|
|
<p class="lockup__line">Twelve pieces. One cloth. Cut in Antwerp.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="lookbook" id="lookbook" aria-label="Autumn lookbook">
|
|
<ul class="lookbook__grid">
|
|
<li class="look look--a">
|
|
<div class="look__plate look__plate--a" role="img" aria-label="Look 01, a long undyed wool coat in oatmeal, photographed against warm stone"></div>
|
|
<p class="look__cap"><span class="look__id">Look 01</span><span class="look__desc">The Antwerp Coat</span></p>
|
|
</li>
|
|
<li class="look look--b">
|
|
<div class="look__plate look__plate--b" role="img" aria-label="Look 05, a bias-cut column dress in pale greige wool crêpe"></div>
|
|
<p class="look__cap"><span class="look__id">Look 05</span><span class="look__desc">The Column Dress</span></p>
|
|
</li>
|
|
<li class="look look--c">
|
|
<div class="look__plate look__plate--c" role="img" aria-label="Look 09, a floor-length evening coat in charcoal wool, shot in low light"></div>
|
|
<p class="look__cap"><span class="look__id">Look 09</span><span class="look__desc">The Evening Coat</span></p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="credo">
|
|
<p class="credo__text">One bolt of undyed wool, milled in the Borders and finished by hand in Antwerp, becomes twelve garments and nothing further. What the cloth will not do, we do not ask of it. When the bolt is spent, the season is closed.</p>
|
|
</section>
|
|
|
|
<section class="cloth" id="atelier">
|
|
<div class="cloth__aside">
|
|
<p class="cloth__meta">The Atelier</p>
|
|
<h2 class="cloth__title">Cut in Antwerp, by four hands</h2>
|
|
</div>
|
|
<div class="cloth__body">
|
|
<p class="cloth__copy">Everything begins with the cloth: a single undyed wool, chosen once a year and ordered in one length. We cut against it slowly, garment by garment, until the bolt is gone.</p>
|
|
<p class="cloth__copy">There is no size run held in reserve and no second colour. A piece exists because the cloth allowed it, or it does not exist at all. This is the whole of the method, and the whole of the house.</p>
|
|
<a class="link" href="#contact">Request a swatch card</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="index" aria-label="The collection">
|
|
<header class="index__head">
|
|
<p class="index__meta">The Collection</p>
|
|
<h2 class="index__title">The twelve</h2>
|
|
</header>
|
|
<ul class="index__list">
|
|
<li class="piece"><span class="piece__name">The Antwerp Coat</span><span class="piece__detail">Undyed wool, unlined</span><span class="piece__price">€ 1,890</span></li>
|
|
<li class="piece"><span class="piece__name">The Long Overshirt</span><span class="piece__detail">Wool, horn buttons</span><span class="piece__price">€ 940</span></li>
|
|
<li class="piece"><span class="piece__name">The Wide Trouser</span><span class="piece__detail">Wool, pressed crease</span><span class="piece__price">€ 720</span></li>
|
|
<li class="piece"><span class="piece__name">The Column Dress</span><span class="piece__detail">Wool crêpe, bias cut</span><span class="piece__price">€ 1,120</span></li>
|
|
<li class="piece"><span class="piece__name">The Half Slip</span><span class="piece__detail">Wool crêpe, on the straight</span><span class="piece__price">€ 480</span></li>
|
|
<li class="piece"><span class="piece__name">The Cropped Jacket</span><span class="piece__detail">Wool, raw hem</span><span class="piece__price">€ 1,340</span></li>
|
|
<li class="piece"><span class="piece__name">The Straight Skirt</span><span class="piece__detail">Wool, single side vent</span><span class="piece__price">€ 560</span></li>
|
|
<li class="piece"><span class="piece__name">The Sable Knit</span><span class="piece__detail">Wool, hand finished</span><span class="piece__price">€ 690</span></li>
|
|
<li class="piece"><span class="piece__name">The Shift</span><span class="piece__detail">Wool, boat neck</span><span class="piece__price">€ 880</span></li>
|
|
<li class="piece"><span class="piece__name">The Belted Robe</span><span class="piece__detail">Wool, self tie</span><span class="piece__price">€ 1,450</span></li>
|
|
<li class="piece"><span class="piece__name">The Slim Waistcoat</span><span class="piece__detail">Wool, four panels</span><span class="piece__price">€ 620</span></li>
|
|
<li class="piece"><span class="piece__name">The Evening Coat</span><span class="piece__detail">Wool, floor length</span><span class="piece__price">€ 2,300</span></li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer" id="contact">
|
|
<p class="footer__mark">Maison Sable</p>
|
|
<p class="footer__places">Paris · Antwerp</p>
|
|
<p class="footer__note">By appointment. <a class="link" href="#top">Enquire</a></p>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|