/* ================================================================
* WORLDCRAFT LOGISTICS - HOSPITALITY DIVISION
* "The Last Hundred Feet" - editorial / magazine-feature landing page
* Ticket JT0827261900 - supersedes the .hf- draft
*
* Prefix: .ed- (no collision with .wh- or .hf-)
* Type : Inter (display + body) / Roboto (metadata) - matches the
* warehouse landing pages.
* Grid : 12 col, 24px gutter, clamp(20px,5vw,80px) margin
* ================================================================ */
.ed-page {
/* --- ink & paper --- */
--ink: #14181c;
--ink-2: #3d4750;
--ink-3: #6b7681;
--paper: #ffffff;
--paper-warm: #f3f0ea;
--night: #0d1013;
--night-2: #171b1f;
--rule: #ddd8cf;
--rule-dark: #2a2f34;
--blue: #008db9; /* WCL */
--blue-dark: #01617f;
--amber: #f5b400; /* WCL */
/* --- grid --- */
--margin: clamp(20px, 5vw, 80px);
--gutter: 24px;
--measure: 68ch;
--deck-measure: 60ch;
/* --- vertical rhythm --- */
--bay: clamp(88px, 11vw, 176px);
--bay-s: clamp(56px, 7vw, 104px);
color: var(--ink-2);
background: var(--paper);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 17px;
line-height: 1.75;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
/* Bootstrap on the live shell resets these - restate explicitly. */
.ed-page h1, .ed-page h2, .ed-page h3, .ed-page h4, .ed-page p,
.ed-page ul, .ed-page ol, .ed-page figure, .ed-page blockquote { margin: 0; }
.ed-page ul, .ed-page ol { padding: 0; list-style: none; }
.ed-page img { display: block; max-width: 100%; }
/* The width/height attributes on every ![]()
are a presentational hint that
sets height, and without this they beat aspect-ratio so images render at
their intrinsic pixel height. :where() gives this ZERO specificity, so it
only ever acts as a default: any rule that sets a real height still wins
(.ed-plate__img clamp, .ed-cover__media img 100%). */
:where(.ed-page img) { height: auto; }
.ed-page a { text-decoration: none; }
.ed-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ---------------------------------------------------------------
* GRID PRIMITIVES
* --------------------------------------------------------------- */
.ed-sheet { max-width: 1560px; margin: 0 auto; padding: 0 var(--margin); }
.ed-section { padding: var(--bay) 0; }
.ed-section--tight { padding: var(--bay-s) 0; }
.ed-section--night { background: var(--night); color: rgba(255,255,255,.68); }
.ed-section--warm { background: var(--paper-warm); }
/* ---------------------------------------------------------------
* TYPOGRAPHY
* --------------------------------------------------------------- */
.ed-display {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 800;
letter-spacing: -0.022em;
line-height: 0.95;
color: var(--ink);
font-size: clamp(48px, 5.5vw, 100px);
}
.ed-h2 {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.02;
color: var(--ink);
font-size: clamp(48px, 3vw, 60px);
max-width: 20ch;
}
.ed-h3 {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.1;
color: var(--ink);
font-size: clamp(24px, 2.3vw, 34px);
}
.ed-section--night .ed-h2,
.ed-section--night .ed-h3 { color: #fff; }
.ed-italic { font-style: italic; }
/* the deck / standfirst that sits under a headline */
.ed-deck {
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.58;
color: var(--ink-2);
max-width: var(--deck-measure);
font-weight: 400;
}
.ed-section--night .ed-deck { color: rgba(255,255,255,.7); }
.ed-body { max-width: var(--measure); }
.ed-body p + p { margin-top: 1.15em; }
/* metadata: folios, kickers, captions, tags */
.ed-meta {
font-family: "Roboto", "Inter", sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
color: var(--ink-3);
}
.ed-section--night .ed-meta { color: rgba(255,255,255,.5); }
/* folio: the "page number" strip that opens every section */
.ed-folio {
display: flex; align-items: baseline; gap: 16px;
padding-bottom: 14px; margin-bottom: clamp(28px, 3vw, 52px);
border-bottom: 1px solid var(--rule);
}
.ed-section--night .ed-folio { border-bottom-color: var(--rule-dark); }
.ed-folio__num {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 15px; letter-spacing: .04em; color: var(--blue);
}
.ed-folio__rule { flex: 1; }
/* drop cap on the feature opener */
.ed-dropcap::first-letter {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
float: left;
font-size: 4.6em;
line-height: .78;
padding: 0.06em 0.11em 0 0;
color: var(--ink);
}
/* pull-quote - oversized, italic, offset into the left margin */
.ed-pull {
padding: clamp(56px, 7vw, 112px) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ed-pull blockquote {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-style: italic;
font-size: clamp(30px, 4.1vw, 62px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 22ch;
margin-left: -0.06em;
}
.ed-pull cite {
display: block; margin-top: 28px; font-style: normal;
font-family: "Roboto", sans-serif; font-weight: 700;
font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
}
/* caption under a plate */
.ed-caption {
font-size: 13px; line-height: 1.55; color: var(--ink-3);
max-width: 46ch; margin-top: 14px;
}
.ed-caption b { color: var(--ink); font-weight: 600; }
/* ---------------------------------------------------------------
* BUTTONS - square editorial geometry, not pills
* --------------------------------------------------------------- */
.ed-btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 17px 30px; border: 0; border-radius: 2px;
background: var(--blue); color: #fff; cursor: pointer;
font-family: "Roboto", sans-serif; font-weight: 700;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
transition: background .22s ease, color .22s ease;
}
.ed-btn:hover { background: var(--blue-dark); color: #fff; }
.ed-btn--line {
background: transparent; color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.ed-btn--line:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #fff; }
.ed-btn--ink { background: var(--ink); }
.ed-btn--ink:hover { background: var(--blue); }
/* ---------------------------------------------------------------
* 00 - THE COVER
* --------------------------------------------------------------- */
.ed-cover { position: relative; min-height: min(94vh, 900px); display: flex; flex-direction: column; }
.ed-cover__media { position: absolute; inset: 0; overflow: hidden; }
.ed-cover__media img { width: 100%; height: 100%; object-fit: cover; }
.ed-cover::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(6,9,12,.72) 0%, rgba(6,9,12,.10) 34%, rgba(6,9,12,.86) 100%);
}
.ed-cover__inner {
position: relative; z-index: 2; flex: 1;
display: flex; flex-direction: column; justify-content: space-between;
padding: clamp(22px, 3vw, 40px) 0 clamp(40px, 5vw, 72px);
}
/* the issue line across the top of the cover */
.ed-cover__issue {
display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.26);
}
.ed-cover__issue .ed-meta { color: rgba(255,255,255,.8); }
.ed-cover__issue .ed-sep { flex: 1; }
.ed-cover__foot { display: grid; gap: clamp(30px, 4vw, 56px); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 1100px) { .ed-cover__foot { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .82fr); } }
.ed-cover__kicker { color: var(--amber); margin-bottom: 20px; }
.ed-cover__title { color: #fff; max-width: 15ch; }
.ed-cover__title em { font-style: italic; color: #fff; }
.ed-cover__sub {
color: rgba(255,255,255,.82); margin-top: 26px; max-width: 56ch;
font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6;
}
.ed-cover__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* "In this issue" cover-lines column */
.ed-coverlines { border-top: 1px solid rgba(255,255,255,.3); padding-top: 18px; }
.ed-coverlines h2 { color: rgba(255,255,255,.62); margin-bottom: 16px; }
.ed-coverlines li { border-bottom: 1px solid rgba(255,255,255,.14); }
.ed-coverlines a {
display: flex; gap: 16px; align-items: baseline; padding: 11px 0;
color: rgba(255,255,255,.9); font-size: 15px; transition: color .2s ease;
}
.ed-coverlines a:hover { color: var(--amber); }
.ed-coverlines a span:first-child {
font-family: "Roboto", sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .16em; color: rgba(255,255,255,.45); min-width: 26px;
}
/* ---------------------------------------------------------------
* MASTHEAD STAT STRIP
* --------------------------------------------------------------- */
.ed-masthead { background: var(--paper-warm); padding: clamp(34px, 4vw, 56px) 0; }
.ed-masthead__grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 620px) { .ed-masthead__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ed-masthead__grid { grid-template-columns: repeat(5, 1fr); } }
.ed-stat { background: var(--paper-warm); padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 26px); }
.ed-stat__n {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(38px, 4.2vw, 62px); line-height: 1; color: var(--ink);
letter-spacing: -0.02em; margin-bottom: 12px;
}
.ed-stat__n sup { font-size: .38em; vertical-align: super; color: var(--blue); letter-spacing: .06em; }
.ed-stat__l { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
/* ---------------------------------------------------------------
* 01 - THE OPENING (feature spread: text + margin data column)
* --------------------------------------------------------------- */
.ed-open__cols { display: grid; gap: clamp(36px, 4.4vw, 76px); grid-template-columns: 1fr; }
@media (min-width: 992px) { .ed-open__cols { grid-template-columns: minmax(0, 1.62fr) minmax(230px, .68fr); } }
.ed-open__data { border-top: 2px solid var(--ink); padding-top: 22px; }
.ed-open__data div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.ed-open__data dt {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 30px;
line-height: 1; color: var(--ink); margin-bottom: 7px; letter-spacing: -.01em;
}
.ed-open__data dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
/* ---------------------------------------------------------------
* FULL-BLEED PLATE
* --------------------------------------------------------------- */
.ed-plate { position: relative; margin: 0; }
.ed-plate__img { width: 100%; height: clamp(300px, 62vh, 660px); object-fit: cover; }
.ed-plate__cap { display: flex; gap: 18px; align-items: flex-start; padding: 16px 0 0; max-width: 640px; }
.ed-plate__cap .ed-meta { padding-top: 3px; white-space: nowrap; color: var(--blue); }
/* ---------------------------------------------------------------
* 02 - THE CHAIN (centre spread, dark, six steps)
* --------------------------------------------------------------- */
.ed-chain__grid { display: grid; gap: 1px; background: var(--rule-dark); border-top: 1px solid var(--rule-dark); }
@media (min-width: 760px) { .ed-chain__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .ed-chain__grid { grid-template-columns: repeat(3, 1fr); } }
.ed-step {
background: var(--night); padding: clamp(30px, 3vw, 46px) clamp(24px, 2.4vw, 40px);
display: flex; flex-direction: column; transition: background .28s ease;
}
.ed-step:hover { background: var(--night-2); }
.ed-step__n {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px;
color: var(--amber); letter-spacing: .06em; margin-bottom: 26px;
}
.ed-step__t { margin-bottom: 18px; max-width: 14ch; }
.ed-step__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.ed-step__tags li {
font-family: "Roboto", sans-serif; font-size: 10px; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
color: rgba(255,255,255,.55); border: 1px solid var(--rule-dark);
padding: 6px 11px; border-radius: 2px;
}
.ed-step p { font-size: 15.5px; line-height: 1.72; color: rgba(255,255,255,.62); }
/* ---------------------------------------------------------------
* 03 - THE INDEX (services as an editorial contents list)
* --------------------------------------------------------------- */
.ed-index { border-top: 1px solid var(--rule); }
.ed-index__row {
display: grid; gap: 10px clamp(24px, 3.4vw, 64px);
grid-template-columns: 1fr;
padding: clamp(26px, 2.8vw, 40px) 0;
border-bottom: 1px solid var(--rule);
transition: background .25s ease, padding-left .25s ease;
}
@media (min-width: 900px) {
.ed-index__row { grid-template-columns: 44px minmax(0, .92fr) minmax(0, 1.28fr); align-items: start; }
.ed-index__row:hover { background: var(--paper-warm); padding-left: 14px; }
}
.ed-index__n { color: var(--blue); padding-top: 9px; }
.ed-index__t { font-size: clamp(20px, 1.75vw, 27px); line-height: 1.22; color: var(--ink);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.012em; }
.ed-index__d { font-size: 15.5px; line-height: 1.72; color: var(--ink-2); max-width: 56ch; }
/* ---------------------------------------------------------------
* 04 - IN THE ROOM
* --------------------------------------------------------------- */
.ed-room { display: grid; gap: clamp(36px, 4.4vw, 72px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .ed-room { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } }
.ed-room__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ed-room__list { columns: 1; column-gap: 40px; }
@media (min-width: 560px) { .ed-room__list { columns: 2; } }
.ed-room__list li {
break-inside: avoid; padding: 13px 0 13px 26px; position: relative;
border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2);
}
.ed-room__list li::before {
content: ""; position: absolute; left: 0; top: 22px;
width: 12px; height: 1px; background: var(--blue);
}
/* ---------------------------------------------------------------
* GALLERY MARQUEE (plate strip)
* --------------------------------------------------------------- */
.ed-strip { overflow: hidden; position: relative; }
.ed-strip::before, .ed-strip::after {
content: ""; position: absolute; top: 0; bottom: 0; width: clamp(30px, 6vw, 110px); z-index: 2; pointer-events: none;
}
.ed-strip::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.ed-strip::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.ed-strip__track { display: flex; gap: 20px; width: max-content; animation: ed-slide 78s linear infinite; }
.ed-strip:hover .ed-strip__track { animation-play-state: paused; }
@keyframes ed-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ed-slide { width: clamp(240px, 27vw, 400px); flex: 0 0 auto; }
.ed-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .5s ease; }
.ed-slide:hover img { filter: grayscale(0) contrast(1); }
.ed-slide figcaption {
margin-top: 11px; font-family: "Roboto", sans-serif; font-weight: 700;
font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
.ed-strip__track { animation: none; }
.ed-strip { overflow-x: auto; }
}
/* ---------------------------------------------------------------
* 05 - THE ASSIGNMENT (case-study spread)
* --------------------------------------------------------------- */
.ed-case { display: grid; gap: clamp(36px, 4.4vw, 76px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) { .ed-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); } }
.ed-case__img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.ed-case__nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); margin-top: 40px; border: 1px solid var(--rule); }
@media (min-width: 620px) { .ed-case__nums { grid-template-columns: repeat(4, 1fr); } }
.ed-case__nums div { background: var(--paper); padding: 22px 20px; }
.ed-case__nums b {
display: block; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400;
font-size: clamp(32px, 3.2vw, 46px); line-height: 1; color: var(--ink); margin-bottom: 9px;
}
.ed-case__nums span { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
/* ---------------------------------------------------------------
* 06 - THE ARGUMENT
* --------------------------------------------------------------- */
.ed-arg { display: grid; gap: clamp(30px, 3vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .ed-arg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .ed-arg { grid-template-columns: repeat(4, 1fr); } }
.ed-arg__item { border-top: 2px solid var(--ink); padding-top: 22px; }
.ed-arg__item h3 { margin-bottom: 14px; max-width: 16ch; }
.ed-arg__item p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
/* ---------------------------------------------------------------
* 07 - THE MAP (three warehouses)
* --------------------------------------------------------------- */
.ed-map { display: grid; gap: clamp(24px, 2.6vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .ed-map { grid-template-columns: repeat(3, 1fr); } }
.ed-house img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
.ed-house:hover img { filter: grayscale(0); }
.ed-house__body { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 18px; }
.ed-house h3 { margin-bottom: 8px; }
.ed-house p { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.ed-house a {
display: inline-block; margin-top: 16px; color: var(--blue);
font-family: "Roboto", sans-serif; font-weight: 700; font-size: 11px;
letter-spacing: .17em; text-transform: uppercase; border-bottom: 1px solid transparent;
transition: border-color .2s ease;
}
.ed-house a:hover { border-bottom-color: var(--blue); }
/* ---------------------------------------------------------------
* 08 - Q & A
* --------------------------------------------------------------- */
.ed-qa { border-top: 1px solid var(--rule); }
.ed-qa details { border-bottom: 1px solid var(--rule); }
.ed-qa summary {
list-style: none; cursor: pointer; padding: clamp(22px, 2.3vw, 32px) 48px clamp(22px, 2.3vw, 32px) 0;
position: relative; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(19px, 1.65vw, 26px); line-height: 1.3; color: var(--ink);
letter-spacing: -.01em; transition: color .2s ease;
}
.ed-qa summary::-webkit-details-marker { display: none; }
.ed-qa summary:hover { color: var(--blue); }
.ed-qa summary::after {
content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
font-family: "Inter", sans-serif; font-size: 26px; font-weight: 300; color: var(--blue); line-height: 1;
}
.ed-qa details[open] summary::after { content: "\2013"; }
.ed-qa details > div {
padding: 0 clamp(48px, 12vw, 220px) clamp(26px, 2.6vw, 36px) 0;
font-size: 16px; line-height: 1.78; color: var(--ink-2); max-width: 78ch;
}
/* ---------------------------------------------------------------
* BACK COVER (quote form)
* --------------------------------------------------------------- */
.ed-back { background: var(--night); color: rgba(255,255,255,.7); padding: var(--bay) 0; }
.ed-back .ed-h2, .ed-back .ed-display { color: #fff; }
.ed-back .ed-deck { color: rgba(255,255,255,.66); }
.ed-back .ed-folio { border-bottom-color: var(--rule-dark); }
.ed-back .ed-meta { color: rgba(255,255,255,.5); }
.ed-form { display: grid; gap: 22px; margin-top: clamp(34px, 3.6vw, 52px); }
.ed-form__row { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ed-form__row { grid-template-columns: repeat(2, 1fr); } }
.ed-form label {
display: block; margin-bottom: 9px;
font-family: "Roboto", sans-serif; font-weight: 700; font-size: 10.5px;
letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.ed-form input, .ed-form select, .ed-form textarea {
width: 100%; background: transparent; color: #fff;
border: 0; border-bottom: 1px solid var(--rule-dark); border-radius: 0;
padding: 12px 0; font-family: "Inter", sans-serif; font-size: 16px;
transition: border-color .22s ease;
}
.ed-form textarea { min-height: 110px; resize: vertical; }
.ed-form input::placeholder, .ed-form textarea::placeholder { color: rgba(255,255,255,.3); }
.ed-form input:focus, .ed-form select:focus, .ed-form textarea:focus {
outline: none; border-bottom-color: var(--amber);
}
.ed-form select option { background: var(--night); color: #fff; }
.ed-form button { justify-self: start; margin-top: 8px; }
.ed-back__cols { display: grid; gap: clamp(40px, 4.6vw, 80px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1060px) { .ed-back__cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ed-back__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ed-colophon {
margin-top: clamp(48px, 5vw, 80px); padding-top: 26px;
border-top: 1px solid var(--rule-dark);
display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline;
}
.ed-colophon a { color: #fff; }
.ed-colophon a:hover { color: var(--amber); }
/* ---------------------------------------------------------------
* FLOATING QUOTE TAB
* --------------------------------------------------------------- */
.ed-fab {
position: fixed; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl; z-index: 1030;
background: var(--ink); color: #fff; padding: 20px 14px;
font-family: "Roboto", sans-serif; font-weight: 700; font-size: 11px;
letter-spacing: .2em; text-transform: uppercase;
transition: background .22s ease;
}
.ed-fab:hover { background: var(--blue); color: #fff; }
@media (max-width: 767.98px) { .ed-fab { display: none; } }
/* preview banner */
.ed-preview {
background: var(--amber); color: #1a1a1a; text-align: center;
padding: 9px 16px; font-size: 12.5px; line-height: 1.5;
}
.ed-preview strong { font-family: "Roboto", sans-serif; letter-spacing: .12em; }
/* ================================================================
* MOTION & MATERIAL LAYER
* Vanilla CSS + one IntersectionObserver. No JS dependency added.
*
* Effects:
* - cover title : mask-rise + outlined ghost duplicate
* - masthead : sweep, hairline grow, mask-rise, blur-in
* stagger, gloss, corner brackets
* - map card : clip wipe, ken-burns, dual scrim, corner
* brackets, gloss sweep, grid-rows 0fr->1fr
* detail reveal
* - closing band : tonal step at the foot of the page
*
* Dark palette:
* ink #0a0a0b -> --night | charcoal #1a1b1e -> --charcoal
* --brass is a darkened WCL amber, so the accent stays inside
* the WCL palette.
* ================================================================ */
.ed-page {
--charcoal: #16191c;
--brass: #b8934e; /* WCL amber #f5b400, darkened to bronze weight */
--brass-soft: rgba(184,147,78,.42);
--ease-expo: cubic-bezier(.22, 1, .36, 1);
--ease-wipe: cubic-bezier(.77, 0, .175, 1);
}
.ed-page ::selection { background: var(--brass); color: #fff; }
/* ---------------------------------------------------------------
* REVEAL PRIMITIVES
* JS adds .is-in to [data-reveal] once it enters the viewport.
* --------------------------------------------------------------- */
/* mask-rise: the cover title / "Trusted by institutional builders" move */
.ed-rise { display: block; overflow: hidden; }
.ed-rise > span {
display: block;
transform: translateY(112%);
transition: transform 1.05s var(--ease-expo) var(--d, 0s);
}
.is-in .ed-rise > span { transform: translateY(0); }
/* blur-in: the institutional client cells */
.ed-fade {
opacity: 0; transform: translateY(26px); filter: blur(8px);
transition: opacity .9s var(--ease-expo) var(--d, 0s),
transform .9s var(--ease-expo) var(--d, 0s),
filter .9s var(--ease-expo) var(--d, 0s);
}
.is-in .ed-fade { opacity: 1; transform: none; filter: blur(0); }
/* hairline grow */
.ed-hair {
display: block; height: 1px; width: 100%;
transform: scaleX(0); transform-origin: left;
transition: transform 1.2s var(--ease-expo) var(--d, 0s);
background: var(--rule);
}
.ed-hair--brass {
background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.ed-hair--stub { width: 32px; background: var(--brass); }
.is-in .ed-hair { transform: scaleX(1); }
/* clip wipe + ken burns: the DIVISIONS card entrance */
.ed-wipe { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease-expo) var(--d, 0s); }
.is-in .ed-wipe { clip-path: inset(0 0 0 0); }
.ed-wipe--side { overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-wipe) var(--d, 0s); }
.is-in .ed-wipe--side { clip-path: inset(0 0 0 0); }
.ed-kb { transform: scale(1.18); transition: transform 2.2s var(--ease-expo) var(--d, 0s); }
.is-in .ed-kb { transform: scale(1); }
/* one-shot light sweep across a whole section */
.ed-sweep {
position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
pointer-events: none; z-index: 1; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(184,147,78,.16), transparent);
filter: blur(40px); translate: -30% 0;
}
.is-in > .ed-sweep { animation: ed-sweep-x 2.4s var(--ease-expo) forwards; }
@keyframes ed-sweep-x {
0% { translate: -30% 0; opacity: 0; }
50% { opacity: .5; }
100% { translate: 120% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ed-rise > span, .ed-fade, .ed-hair, .ed-wipe, .ed-wipe--side, .ed-kb {
transition: none !important; transform: none !important;
opacity: 1 !important; filter: none !important; clip-path: none !important;
}
.is-in > .ed-sweep { animation: none; }
}
/* ---------------------------------------------------------------
* GLASS GLOSS (rotate-12 bone/8% bar swept across on hover)
* --------------------------------------------------------------- */
/* The sliding highlight bar was removed - 45 elements each animating a
rotated, translating overlay on hover was the most expensive hover
effect on the page. .ed-gloss is kept because other rules rely on its
containing block (.ed-gloss:hover .ed-corner) and its clipping. */
.ed-gloss { position: relative; overflow: hidden; isolation: isolate; }
/* ---------------------------------------------------------------
* CORNER BRACKETS
* --------------------------------------------------------------- */
.ed-corner {
position: absolute; width: 12px; height: 12px; z-index: 4; pointer-events: none;
border: 0 solid rgba(245,243,238,.28);
transition: border-color .5s var(--ease-expo), width .5s var(--ease-expo), height .5s var(--ease-expo);
}
.ed-corner--tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.ed-corner--tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.ed-corner--bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.ed-corner--br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.ed-gloss:hover .ed-corner { border-color: var(--brass); width: 20px; height: 20px; }
/* ---------------------------------------------------------------
* FILM GRAIN — luxury texture over dark surfaces
* --------------------------------------------------------------- */
.ed-grain { position: relative; }
.ed-grain > .ed-grain__layer {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: .35; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------
* 00 - COVER: the display title treatment
* --------------------------------------------------------------- */
.ed-cover__media img { transform: scale(1.12); animation: ed-cover-in 2.4s var(--ease-expo) forwards; }
@keyframes ed-cover-in { to { transform: scale(1); } }
.ed-cover__media::after { /* flat ink/25 scrim */
content: ""; position: absolute; inset: 0; background: rgba(10,10,11,.25);
}
/* the outlined ghost duplicate sitting behind the headline */
.ed-titlewrap { position: relative; overflow: hidden; padding-bottom: 8px; }
.ed-titlewrap > .ed-ghost {
position: absolute; top: -.06em; left: -.02em; z-index: 0;
pointer-events: none; user-select: none;
color: transparent;
-webkit-text-stroke: 1px rgba(245,243,238,.18);
}
.ed-ghost > span { display: block; }
.ed-ghost, .ed-ghost em { color: transparent; }
.ed-titlewrap > h1 { position: relative; z-index: 1; }
/* cover metadata rails */
.ed-rail { display: flex; flex-direction: column; gap: 7px; margin-bottom: 34px !important; }
.ed-rail__row { display: flex; align-items: center; gap: 9px; color: var(--brass); }
.ed-rail__row .ed-meta { color: var(--brass); }
.ed-rail__dash {
display: block; width: 16px; height: 1px; background: var(--brass);
transform: scaleX(0); transform-origin: left;
animation: ed-dash .6s var(--ease-expo) .5s forwards;
}
@keyframes ed-dash { to { transform: scaleX(1); } }
/* ---------------------------------------------------------------
* MASTHEAD -> "INSTITUTIONAL CLIENTS" grid
* --------------------------------------------------------------- */
.ed-masthead {
position: relative; overflow: hidden;
background: var(--night); color: rgba(255,255,255,.7);
padding: clamp(56px, 6vw, 92px) 0 0;
border-top: 1px solid rgba(255,255,255,.08);
}
.ed-masthead .ed-meta { color: rgba(255,255,255,.5); }
.ed-masthead__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ed-masthead__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ed-masthead__kicker .ed-meta { color: var(--brass); }
.ed-masthead h2 {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(30px, 3.6vw, 54px); line-height: 1.0;
letter-spacing: -.018em; color: #fff; max-width: 16ch;
}
.ed-masthead__rule { margin-top: clamp(34px, 3.6vw, 56px); }
.ed-masthead__grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 0; background: transparent;
border: 0; border-top: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 620px) { .ed-masthead__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ed-masthead__grid { grid-template-columns: repeat(5, 1fr); } }
.ed-cell {
position: relative; overflow: hidden; isolation: isolate;
padding: clamp(40px, 4.4vw, 76px) 20px;
text-align: center; cursor: default;
border-right: 1px solid rgba(255,255,255,.07);
border-bottom: 1px solid rgba(255,255,255,.07);
transition: transform .6s var(--ease-expo);
}
@media (min-width: 1024px) { .ed-cell:last-child { border-right: 0; } }
.ed-cell:hover { transform: translateY(-4px); }
/* top / bottom hairlines that draw in from opposite ends */
.ed-cell__ln {
position: absolute; left: 0; right: 0; height: 1px; background: var(--brass);
transform: scaleX(0); transition: transform .5s var(--ease-expo); z-index: 3;
}
.ed-cell__ln--t { top: 0; transform-origin: left; }
.ed-cell__ln--b { bottom: 0; transform-origin: right; }
.ed-cell:hover .ed-cell__ln { transform: scaleX(1); }
/* soft brass wash from the top on hover */
.ed-cell__wash {
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
background: linear-gradient(to bottom, rgba(184,147,78,.12), transparent 60%);
transition: opacity .5s ease;
}
.ed-cell:hover .ed-cell__wash { opacity: 1; }
.ed-cell__idx {
position: absolute; top: 12px; right: 14px; z-index: 3;
font-family: "Roboto", sans-serif; font-weight: 700; font-size: 9px;
letter-spacing: .2em; color: rgba(255,255,255,.3);
transition: color .3s ease;
}
.ed-cell:hover .ed-cell__idx { color: var(--brass); }
.ed-cell__n {
position: relative; z-index: 2;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(38px, 4.2vw, 62px); line-height: 1;
letter-spacing: -.02em; color: #fff; margin-bottom: 12px;
transition: color .4s ease;
}
.ed-cell:hover .ed-cell__n { color: var(--brass); }
.ed-cell__n sup { font-size: .36em; vertical-align: super; color: var(--brass); }
.ed-cell__l { position: relative; z-index: 2; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); }
/* ---------------------------------------------------------------
* 02 - CHAIN: step icons
* --------------------------------------------------------------- */
.ed-step__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.ed-step__n { margin-bottom: 0 !important; color: var(--brass) !important; }
.ed-step__icon { color: var(--brass); flex: 0 0 auto; transition: transform .6s var(--ease-expo); }
.ed-step:hover .ed-step__icon { transform: translateY(-3px); }
.ed-step__icon svg { display: block; }
.ed-step { position: relative; overflow: hidden; isolation: isolate; }
.ed-step .ed-cell__ln--t { background: var(--brass); }
.ed-step:hover .ed-cell__ln--t { transform: scaleX(1); }
/* ---------------------------------------------------------------
* 07 - MAP -> divisions card
* --------------------------------------------------------------- */
.ed-vcard {
position: relative; display: block; overflow: hidden; isolation: isolate;
border: 1px solid var(--rule);
transition: border-color .7s ease;
}
.ed-vcard:hover { border-color: var(--brass); }
.ed-vcard__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night); }
.ed-vcard__clip { position: absolute; inset: 0; }
.ed-vcard__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: saturate(.9) contrast(1.08); /* editorial image grade */
transition: transform 2s ease-out;
}
.ed-vcard:hover .ed-vcard__media img { transform: scale(1.08); }
/* the two stacked scrims - "hoi toi mau" */
.ed-vcard__scrim {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(to bottom, rgba(13,16,19,.42) 0%, transparent 42%),
linear-gradient(to top, var(--night) 0%, rgba(13,16,19,.58) 46%, transparent 100%);
}
.ed-vcard__glow {
position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
background: linear-gradient(to top, rgba(184,147,78,.22), transparent 55%);
transition: opacity .7s ease;
}
.ed-vcard:hover .ed-vcard__glow { opacity: 1; }
.ed-vcard__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 5; padding: clamp(22px, 2.4vw, 30px); }
.ed-vcard__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ed-vcard__meta .ed-meta { color: var(--brass); }
.ed-vcard__meta .ed-meta--muted { color: rgba(255,255,255,.42); }
.ed-vcard__meta i {
display: block; flex: 1; height: 1px; background: var(--brass-soft);
transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-expo);
}
.ed-vcard:hover .ed-vcard__meta i { transform: scaleX(1); }
.ed-vcard__body h3 {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400;
font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15;
letter-spacing: -.012em; color: #fff;
}
/* grid-rows 0fr -> 1fr : height-auto detail reveal */
.ed-vcard__more {
display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows .7s var(--ease-expo), opacity .7s var(--ease-expo);
}
.ed-vcard:hover .ed-vcard__more,
.ed-vcard:focus-within .ed-vcard__more { grid-template-rows: 1fr; opacity: 1; }
.ed-vcard__more > div { overflow: hidden; }
/* no hover on touch: the address must not be reachable only by hovering */
@media (hover: none) {
.ed-vcard__more { grid-template-rows: 1fr; opacity: 1; }
.ed-vcard__meta i { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.ed-vcard__more { grid-template-rows: 1fr; opacity: 1; transition: none; }
}
.ed-vcard__more p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.68); }
.ed-vcard__more span {
display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
font-family: "Roboto", sans-serif; font-weight: 700; font-size: 10.5px;
letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
}
.ed-vcard__more span em { font-style: normal; transition: transform .5s var(--ease-expo); }
.ed-vcard:hover .ed-vcard__more span em { transform: translateX(4px); }
/* ---------------------------------------------------------------
* PLATES / STRIP / CASE - shared gloss treatment
* --------------------------------------------------------------- */
.ed-slide { position: relative; overflow: hidden; isolation: isolate; }
.ed-slide img { transition: filter .5s ease, transform 1.4s var(--ease-expo); }
.ed-slide:hover img { transform: scale(1.04); }
.ed-plate { overflow: hidden; }
.ed-plate__img { filter: saturate(.9) contrast(1.08); }
.ed-room__img, .ed-case__img, .ed-back__img { filter: saturate(.9) contrast(1.08); }
/* ---------------------------------------------------------------
* CLOSING TONAL STEP (charcoal band before the footer)
* --------------------------------------------------------------- */
.ed-back {
position: relative; overflow: hidden;
background: var(--charcoal);
border-top: 0;
}
.ed-back::before { /* vignette */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.045), transparent 60%);
}
.ed-back > .ed-sheet { position: relative; z-index: 2; }
.ed-back__panel {
background: var(--night); border: 1px solid rgba(255,255,255,.07);
padding: clamp(28px, 3.2vw, 48px);
}
.ed-colophon { border-top-color: rgba(255,255,255,.09); }
.ed-colophon .ed-meta { color: rgba(255,255,255,.42); }
/* back-cover form picks up the brass accent */
.ed-form input:focus, .ed-form select:focus, .ed-form textarea:focus { border-bottom-color: var(--brass); }
.ed-form label { color: rgba(255,255,255,.5); }
/* brass CTA on dark, ink CTA on paper */
.ed-btn--brass {
background: transparent; color: #fff;
box-shadow: inset 0 0 0 1px var(--brass);
}
.ed-btn--brass:hover { background: var(--brass); color: #fff; box-shadow: inset 0 0 0 1px var(--brass); }
/* ---------------------------------------------------------------
* FOLIO / FAB refinements
* --------------------------------------------------------------- */
.ed-section--night .ed-folio__num,
.ed-back .ed-folio__num,
.ed-masthead .ed-folio__num { color: var(--brass); }
.ed-fab { background: var(--charcoal); }
.ed-fab:hover { background: var(--brass); }
/* ---------------------------------------------------------------
* CONTACT SECTION — matched to the warehouse landing pages.
* .wh-container-contact is a flat #f5f5f5 panel on white, so the
* back cover drops its dark treatment. Appended last so these win
* over the dark rules above without editing them in place.
* --------------------------------------------------------------- */
.ed-back { background: #fff; color: var(--ink-2); }
.ed-back::before { display: none; } /* no dark vignette */
.ed-back .ed-h2, .ed-back .ed-display { color: var(--ink); }
.ed-back .ed-deck { color: var(--ink-2); }
.ed-back .ed-folio { border-bottom-color: var(--rule); }
.ed-back .ed-meta { color: var(--ink-3); }
.ed-back .ed-folio__num { color: var(--blue); }
.ed-back__panel { background: #f5f5f5; border: 1px solid var(--rule); }
.ed-form label { color: var(--ink-3); }
.ed-form input, .ed-form select, .ed-form textarea {
background: transparent; color: var(--ink); border-bottom-color: #d5d0c7;
}
.ed-form input::placeholder,
.ed-form textarea::placeholder { color: var(--ink-3); }
.ed-form input:focus,
.ed-form select:focus,
.ed-form textarea:focus { border-bottom-color: var(--blue); }
.ed-form select option { background: #fff; color: var(--ink); }
/* CTA switches from brass-on-dark to the WCL blue used site-wide */
.ed-btn--brass { background: var(--blue); color: #fff; box-shadow: none; }
.ed-btn--brass:hover { background: var(--blue-dark); color: #fff; box-shadow: none; }
.ed-colophon { border-top-color: var(--rule); }
.ed-colophon .ed-meta { color: var(--ink-3); }
/* wraps every image for the WebP/JPG fallback. display:contents
keeps it from generating a box, so every existing layout rule that
targets the inner ![]()
behaves exactly as before. */
.ed-page picture { display: contents; }
/* ---------------------------------------------------------------
* PERF: the marquee track is ~11,700px wide and its animation never
* stops, so the compositor keeps working on it even when the gallery
* is nowhere near the viewport. Pause it when it scrolls out of view.
* Pure play-state toggle - no layout, no visual change while visible.
* --------------------------------------------------------------- */
.ed-strip.is-offscreen .ed-strip__track { animation-play-state: paused; }
/* ---------------------------------------------------------------
* new-style.css (site-wide) carries:
* a:hover { color: rgb(52,64,84) !important; }
* It hijacks every link on this page - white-on-dark text turns
* dark-on-dark on hover and effectively disappears. An !important
* can only be beaten by another !important, so the intended colours
* are restated here.
* --------------------------------------------------------------- */
.ed-page .ed-btn:hover { color: #fff !important; }
.ed-page .ed-btn--line:hover { color: var(--ink) !important; }
.ed-page .ed-coverlines a:hover { color: var(--amber) !important; }
.ed-page .ed-fab:hover { color: #fff !important; }
.ed-page .ed-vcard:hover { color: inherit !important; }