/* ==========================================================================
REEGo design system
Monochrome interface. Photography carries the colour.
========================================================================== */
:root {
--ink: #121212;
--ink-soft: #3d3d3d;
--mid: #6f6c66;
--hairline: #e4e1da;
--paper: #faf9f6;
--paper-raised: #f2f0ea;
--surface: #ffffff;
--gold: #c08a2d;
--gold-deep: #8f6516;
--gold-tint: #f6ecd9;
--radius: 8px;
--radius-sm: 6px;
--shadow:
0 1px 2px rgba(18, 18, 18, 0.04),
0 10px 24px rgba(18, 18, 18, 0.06),
0 24px 48px rgba(18, 18, 18, 0.07);
--shadow-soft:
0 1px 3px rgba(18, 18, 18, 0.07),
0 8px 20px rgba(18, 18, 18, 0.08);
--serif: "Fraunces", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
--shell: 1240px;
--gutter: clamp(16px, 4vw, 40px);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Background test (Workstream H): clean-white variant vs the creamy paper.
Toggled from the design lab; the class lands on before first paint. */
html.bg-white {
--paper: #ffffff;
--paper-raised: #f5f4f1;
--hairline: #e9e7e2;
}
body {
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--paper);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Form fields carry their own focus ring (border + soft halo) */
.field-input:focus-visible,
.otp-box:focus-visible,
.search-bar :focus-visible,
.phone-group :focus-visible,
.ghs-input :focus-visible { outline: none; }
a, button, input, select, textarea, label { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: 84px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* --------------------------------------------------------------------------
Motion safety
Cross-document view transitions (the old "drop-in") were removed on
purpose — navigation is instant. Do not reintroduce them.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* --------------------------------------------------------------------------
Type helpers
-------------------------------------------------------------------------- */
.display {
font-family: var(--serif);
font-weight: 480;
letter-spacing: 0;
line-height: 1.04;
}
.micro {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mid);
}
/* --------------------------------------------------------------------------
Wordmark
-------------------------------------------------------------------------- */
.wordmark {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
}
.wordmark-go { font-style: italic; font-weight: 480; }
/* --------------------------------------------------------------------------
Header
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250, 249, 246, 0.9);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid var(--hairline);
transition: box-shadow 0.25s var(--ease-out);
}
/* Once the page scrolls, the header floats — it may cast a shadow */
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(18, 18, 18, 0.05); }
.header-row {
display: flex;
align-items: center;
gap: 28px;
min-height: 64px;
min-width: 0;
}
.site-nav {
display: flex;
gap: 24px;
margin-inline: auto;
font-weight: 500;
font-size: 14px;
min-width: 0;
}
.site-nav a {
position: relative;
padding-block: 4px;
color: var(--ink-soft);
transition: color 0.15s;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--ink); }
.site-nav a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
border-bottom: 1.5px solid var(--ink);
transition: right 0.25s var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a.is-active::after { right: 0; }
.nav-runway .live-dot {
display: inline-block;
width: 5px;
height: 5px;
margin-left: 6px;
vertical-align: super;
border-radius: 50%;
background: var(--gold);
animation: pulse 2.2s infinite;
}
/* A ring breathes out from the dot instead of the dot blinking —
quieter, and it reads as "live" rather than "error". */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(192, 138, 45, 0.45); }
70% { box-shadow: 0 0 0 5px rgba(192, 138, 45, 0); }
100% { box-shadow: 0 0 0 0 rgba(192, 138, 45, 0); }
}
.header-actions {
display: flex;
align-items: center;
gap: 16px;
}
.ghost-link {
font-size: 14px;
font-weight: 500;
color: var(--ink-soft);
}
.ghost-link:hover { color: var(--ink); }
/* --------------------------------------------------------------------------
Buttons and chips
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 9px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
border: 1px solid var(--ink);
white-space: nowrap;
transition: background 0.18s, color 0.18s, transform 0.18s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chip-row {
display: flex;
gap: 8px;
overflow-x: auto;
padding-block: 4px;
scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
flex: none;
min-height: 34px;
padding: 7px 15px;
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
background: var(--paper);
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero { padding-block: 72px 56px; }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.hero-title { font-size: clamp(38px, 5.4vw, 60px); }
.hero-title em {
font-style: italic;
font-weight: 420;
}
.hero-sub {
margin-top: 18px;
max-width: 52ch;
font-size: 16px;
color: var(--mid);
}
.search-bar {
margin-top: 30px;
display: flex;
align-items: center;
max-width: 620px;
border: 1.5px solid var(--ink);
border-radius: var(--radius);
background: #fff;
overflow: hidden;
transition: box-shadow 0.18s;
}
.search-bar:focus-within { box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.07); }
.search-scope {
border: 0;
background: transparent;
font: 500 14px var(--sans);
color: var(--ink-soft);
padding: 14px 8px 14px 18px;
outline: none;
cursor: pointer;
}
.search-bar input {
flex: 1;
min-width: 0;
border: 0;
padding: 14px 8px;
font: 400 15px var(--sans);
background: transparent;
outline: none;
}
.search-bar input::placeholder { color: var(--mid); }
.search-submit {
align-self: stretch;
padding: 0 18px;
display: grid;
place-items: center;
}
.search-submit svg { width: 20px; height: 20px; }
.stitch {
margin-top: 34px;
width: min(420px, 80%);
height: 18px;
overflow: visible;
}
.stitch-path {
fill: none;
stroke: var(--ink);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 10 8;
}
.stitch-needle { opacity: 0; }
.stitch.is-animating .stitch-path {
stroke-dashoffset: 600;
animation: stitch-draw 2.4s var(--ease-out) forwards;
}
.stitch.is-animating .stitch-needle {
opacity: 1;
offset-path: path("M2 9 C 60 2, 120 16, 178 9 S 300 2, 358 9 S 420 16, 418 9");
animation: needle-run 2.4s var(--ease-out) forwards;
}
@keyframes stitch-draw { to { stroke-dashoffset: 0; } }
@keyframes needle-run {
from { offset-distance: 0%; }
95% { opacity: 1; }
to { offset-distance: 100%; opacity: 0; }
}
.hero-side {
display: grid;
gap: 14px;
}
.runway-card {
position: relative;
display: block;
overflow: hidden;
min-height: 320px;
border-radius: var(--radius);
background: var(--paper-raised);
}
.runway-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(10%);
transition: transform 0.6s var(--ease-out);
}
.runway-card:hover img { transform: scale(1.04); }
.runway-card-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.72) 100%);
}
.runway-card-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
min-height: 320px;
padding: 22px;
color: #fff;
}
.runway-card-body .micro { color: rgba(255,255,255,0.78); }
.runway-theme {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
line-height: 1.1;
}
.runway-meta { font-size: 13px; color: rgba(255,255,255,0.86); }
.runway-cta {
margin-top: 10px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.arrow { transition: transform 0.25s var(--ease-out); }
.runway-card:hover .runway-cta .arrow { transform: translateX(4px); }
.promo-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-radius: var(--radius);
background: var(--ink);
color: var(--paper);
}
.promo-card p { font-size: 14px; }
.promo-card strong { font-family: var(--serif); font-size: 16px; font-weight: 500; display: block; }
.promo-card .arrow { flex: none; }
.promo-card:hover .arrow { transform: translateX(4px); }
/* --------------------------------------------------------------------------
Homepage portals
-------------------------------------------------------------------------- */
.portals { padding-block: 8px 82px; }
.portals-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 18px;
}
.portal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* Worlds are slots: with one switched off, the rest stretch to fill the row */
.portal-grid--2 { grid-template-columns: repeat(2, 1fr); }
.portal-grid--1 { grid-template-columns: 1fr; }
.portal {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--hairline);
border-radius: var(--radius);
overflow: hidden;
background: #fff;
transition: border-color 0.2s, transform 0.2s var(--ease-out);
}
.portal:hover {
border-color: var(--ink);
transform: translateY(-1px);
}
.portal-media {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 4px;
padding: 4px;
height: 300px;
}
.portal-media img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: var(--radius-sm);
transition: transform 0.6s var(--ease-out), filter 0.4s;
filter: grayscale(8%);
}
.portal-media .stack {
display: grid;
gap: 4px;
grid-template-rows: 1fr 1fr;
overflow: hidden;
}
.portal:hover .portal-media img { transform: scale(1.03); filter: grayscale(0%); }
.portal-body { padding: 20px 22px 24px; }
.portal-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
letter-spacing: 0;
}
.portal-desc {
margin-top: 6px;
font-size: 14px;
color: var(--mid);
max-width: 34ch;
}
.portal-enter {
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
}
.portal:hover .portal-enter .arrow { transform: translateX(4px); }
/* Challenge winner banner — Forest Green 2 from the design lab */
.winner-banner-section { padding-block: 0 82px; }
.winner-banner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
min-height: 340px;
overflow: hidden;
border-radius: var(--radius);
background: #1E4D3B;
color: #fff;
}
.winner-banner-copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: clamp(24px, 4vw, 52px);
}
.winner-banner-copy .micro { color: #fff; opacity: 0.78; }
.winner-banner-title {
font-family: var(--serif);
font-weight: 480;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.05;
}
.winner-banner-sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.82);
max-width: 44ch;
}
.winner-banner-ctas {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.banner-btn {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 10px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
border: 1px solid #fff;
transition: transform 0.18s var(--ease-out), background 0.18s, color 0.18s;
}
.banner-btn:hover { transform: translateY(-1px); }
.banner-btn-solid { background: var(--ink); color: var(--paper); }
.banner-btn-line { color: #fff; }
.banner-btn-line:hover { background: #fff; color: #1E4D3B; }
.winner-banner-media { position: relative; min-height: 260px; }
.winner-banner-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Homepage rows — horizontally scrolling rails, eBay-style */
.row-section { padding-block: 0 52px; }
.row-head {
display: flex;
align-items: flex-end;
gap: 18px;
margin-bottom: 16px;
}
/* Title block pushes everything after it (see-all, rail arrows) right */
.row-head > :first-child { margin-right: auto; }
.row-title {
font-family: var(--serif);
font-weight: 500;
font-size: 27px;
line-height: 1.1;
}
.row-sub {
margin-top: 3px;
font-size: 13.5px;
color: var(--mid);
}
.row-see-all {
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
padding-bottom: 2px;
font-size: 14px;
font-weight: 600;
}
.row-see-all:hover .arrow { transform: translateX(4px); }
.rail {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 8px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
flex: none;
width: 225px;
scroll-snap-align: start;
}
.rail-media {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius);
background: var(--paper-raised);
}
.rail-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease-out);
}
.rail-card:hover .rail-media img { transform: scale(1.03); }
.rail-kind {
display: block;
margin-top: 10px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mid);
}
.rail-title {
margin-top: 5px;
font-family: var(--serif);
font-size: 16.5px;
font-weight: 500;
line-height: 1.25;
}
.rail-kind + .rail-title { margin-top: 3px; }
.rail-sub {
margin-top: 2px;
font-size: 13px;
color: var(--mid);
}
.rail-price {
margin-top: 5px;
font-size: 14.5px;
font-weight: 600;
}
.rail-price small { font-weight: 400; color: var(--mid); }
.occasion {
flex: none;
width: 150px;
scroll-snap-align: start;
text-align: center;
}
.occasion-media {
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius);
background: var(--paper-raised);
}
.occasion-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease-out);
}
.occasion:hover .occasion-media img { transform: scale(1.05); }
.occasion span {
display: block;
margin-top: 9px;
font-size: 14px;
font-weight: 600;
}
/* Interspersed promo banners (ad slot, seasonal slot) */
.home-banner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
align-items: center;
gap: clamp(20px, 3vw, 44px);
min-height: 260px;
padding: clamp(24px, 4vw, 48px);
border-radius: var(--radius);
overflow: hidden;
}
.home-banner--ink { background: var(--ink); color: var(--paper); }
.home-banner--ink .micro { color: rgba(250, 249, 246, 0.6); }
.home-banner--ink p { color: rgba(250, 249, 246, 0.75); }
.home-banner--tint { background: var(--gold-tint); color: var(--ink); }
.home-banner--tint .micro { color: var(--gold-deep); }
.home-banner--tint p { color: rgba(18, 18, 18, 0.72); }
.home-banner-copy h2 {
font-family: var(--serif);
font-weight: 480;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.08;
margin-top: 8px;
}
.home-banner-copy p {
margin-top: 8px;
font-size: 14.5px;
max-width: 46ch;
}
.home-banner-copy .banner-btn { margin-top: 20px; }
.home-banner:hover .banner-btn { transform: translateY(-1px); }
.banner-btn-paper {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.home-banner-collage {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: center;
}
.home-banner-collage img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--radius-sm);
transition: transform 0.5s var(--ease-out);
}
.home-banner-collage img.lift { transform: translateY(-14px); }
.home-banner:hover .home-banner-collage img { transform: translateY(-4px); }
.home-banner:hover .home-banner-collage img.lift { transform: translateY(-18px); }
/* --------------------------------------------------------------------------
Menu overlay — full-screen ink takeover
-------------------------------------------------------------------------- */
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 9px 16px;
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: 14px;
font-weight: 500;
transition: border-color 0.15s;
}
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle-icon {
display: grid;
gap: 4px;
width: 15px;
}
.menu-toggle-icon span {
height: 1.5px;
background: currentColor;
border-radius: 1px;
}
.menu-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
background: var(--ink);
color: var(--paper);
opacity: 0;
visibility: hidden;
overscroll-behavior: contain;
transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.menu-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--ease-out);
}
body.menu-open { overflow: hidden; }
.menu-head {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
}
.menu-head .wordmark { color: var(--paper); }
.menu-close {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(250, 249, 246, 0.3);
border-radius: 50%;
color: var(--paper);
transition: border-color 0.15s, transform 0.2s var(--ease-out);
}
.menu-close:hover { border-color: var(--paper); transform: rotate(90deg); }
.menu-close svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.menu-worlds {
display: grid;
margin-top: 5vh;
}
.menu-worlds a {
display: flex;
align-items: baseline;
gap: 18px;
padding-block: 8px;
font-family: var(--serif);
font-weight: 480;
font-size: clamp(34px, 6.5vw, 58px);
line-height: 1.12;
color: var(--paper);
opacity: 0;
transform: translateY(22px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color 0.2s;
}
.menu-overlay.is-open .menu-worlds a { opacity: 1; transform: none; }
.menu-overlay.is-open .menu-worlds a:nth-child(1) { transition-delay: 0.06s; }
.menu-overlay.is-open .menu-worlds a:nth-child(2) { transition-delay: 0.13s; }
.menu-overlay.is-open .menu-worlds a:nth-child(3) { transition-delay: 0.2s; }
.menu-overlay.is-open .menu-worlds a:nth-child(4) { transition-delay: 0.27s; }
.menu-worlds a:hover { font-style: italic; color: var(--gold); }
.menu-num {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
color: rgba(250, 249, 246, 0.45);
}
.menu-worlds .live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
animation: pulse 2.2s infinite;
}
.menu-foot {
margin-top: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 26px;
padding-block: 26px;
border-top: 1px solid rgba(250, 249, 246, 0.16);
}
.menu-foot a {
font-size: 14px;
font-weight: 500;
color: rgba(250, 249, 246, 0.72);
transition: color 0.15s;
}
.menu-foot a:hover { color: var(--paper); }
/* --------------------------------------------------------------------------
World pages
-------------------------------------------------------------------------- */
.world-hero { padding-block: 56px 26px; }
.world-hero .micro { display: block; margin-bottom: 10px; }
.world-title { font-size: 52px; }
.world-lede {
margin-top: 12px;
max-width: 56ch;
font-size: 15px;
color: var(--mid);
}
.world-lede a {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--ink);
}
/* Two-column hero: title + lede left, one clear call to action right.
The action fills the space that used to sit empty beside the heading. */
.world-hero-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 28px;
flex-wrap: wrap;
}
/* Copy shrink-wraps to its own text so the action sits right beside it — not
flung to the far edge — and drops below cleanly as the screen narrows. */
.world-hero-copy { flex: 0 1 auto; min-width: 0; width: fit-content; max-width: 100%; }
.world-hero-btn {
flex: none;
min-height: 50px;
padding: 14px 24px;
font-size: 15px;
}
.world-hero-btn .arrow { margin-left: 2px; }
.world-hero-btn:hover .arrow { transform: translateX(4px); }
.world-toolbar {
position: sticky;
top: 64px;
z-index: 40;
background: rgba(250, 249, 246, 0.96);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--hairline);
padding-block: 12px;
}
.world-body { padding-block: 28px 82px; }
/* --------------------------------------------------------------------------
Lookbook feed
-------------------------------------------------------------------------- */
.lookboard-body {
background: #f5f3ee;
}
.lookboard-shell {
max-width: 700px;
}
.lookboard-feed {
display: grid;
gap: 20px;
}
.feed-card {
overflow: hidden;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
}
.feed-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
}
.feed-profile {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.feed-profile img {
width: 42px;
height: 42px;
flex: none;
border-radius: 50%;
object-fit: cover;
}
.feed-profile span {
min-width: 0;
display: grid;
}
.feed-profile strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.feed-profile small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--mid);
font-size: 12px;
}
.feed-tag {
flex: none;
padding: 5px 9px;
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
}
.feed-media {
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--paper-raised);
}
.feed-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-actions {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px 0;
}
.feed-action {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 36px;
min-height: 36px;
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.feed-action svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s var(--ease-out);
}
.feed-action.liked svg {
fill: var(--ink);
transform: scale(1.08);
}
.feed-action-icon { margin-left: auto; justify-content: flex-end; }
.feed-copy {
display: block;
padding: 14px 20px 22px;
}
.feed-copy h2 {
font-family: var(--serif);
font-size: 20px;
font-weight: 520;
line-height: 1.2;
}
.feed-copy p {
margin-top: 4px;
color: var(--ink-soft);
font-size: 14px;
}
/* --------------------------------------------------------------------------
Card grids
-------------------------------------------------------------------------- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.tile {
position: relative;
display: block;
min-width: 0;
}
.tile-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius);
background: var(--paper-raised);
}
.tile-media > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease-out);
}
.tile:hover .tile-media > img { transform: scale(1.03); }
.fav-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: var(--ink);
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
.tile:hover .fav-btn,
.fav-btn:focus-visible,
.fav-btn.liked {
opacity: 1;
transform: translateY(0);
}
.fav-btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.fav-btn.liked svg { fill: var(--ink); }
.tile-body {
display: block;
padding: 12px 2px 4px;
}
.tile-name {
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
}
.tile-sub {
margin-top: 3px;
font-size: 13px;
color: var(--mid);
}
.tile-row {
margin-top: 8px;
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12.5px;
color: var(--ink-soft);
}
.tile-price {
font-weight: 600;
font-size: 15px;
color: var(--ink);
}
.tile-price small { font-weight: 400; color: var(--mid); }
/* Designers */
.designer-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.designer-tile {
padding: 0;
}
.designer-media .tile-click {
position: absolute;
inset: 0;
display: block;
}
.carousel-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.01);
transition: opacity 0.22s ease, transform 0.6s var(--ease-out);
}
.carousel-image.is-active {
opacity: 1;
transform: scale(1);
}
.designer-tile:hover .carousel-image.is-active { transform: scale(1.03); }
.designer-profile-chip {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: flex;
align-items: center;
gap: 9px;
max-width: calc(100% - 64px);
padding: 7px 9px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.94);
box-shadow: var(--shadow-soft);
}
.designer-profile-chip img {
width: 34px;
height: 34px;
flex: none;
border-radius: 50%;
object-fit: cover;
}
.designer-profile-chip span {
display: grid;
min-width: 0;
}
.designer-profile-chip strong,
.designer-profile-chip small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.designer-profile-chip strong { font-size: 13px; }
.designer-profile-chip small { color: var(--mid); font-size: 11px; }
.carousel-btn {
position: absolute;
top: 50%;
z-index: 5;
width: 36px;
height: 42px;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.94);
color: var(--ink);
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.18s, transform 0.18s var(--ease-out);
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-btn svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.designer-tile:hover .carousel-btn,
.designer-tile:focus-within .carousel-btn {
opacity: 1;
}
.designer-tile:hover .carousel-prev,
.designer-tile:focus-within .carousel-prev { transform: translate(-2px, -50%); }
.designer-tile:hover .carousel-next,
.designer-tile:focus-within .carousel-next { transform: translate(2px, -50%); }
/* --------------------------------------------------------------------------
CTA band
-------------------------------------------------------------------------- */
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: 52px;
flex-wrap: wrap;
}
.cta-band h2 {
font-family: var(--serif);
font-weight: 460;
font-size: 34px;
letter-spacing: 0;
}
.cta-band p {
margin-top: 6px;
font-size: 14px;
color: rgba(250,249,246,0.72);
max-width: 52ch;
}
/* --------------------------------------------------------------------------
Design lab index
-------------------------------------------------------------------------- */
.lab { padding-block: 64px; }
.lab-title { font-size: 46px; }
.lab-lede { margin-top: 10px; color: var(--mid); max-width: 60ch; }
.lab-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.lab-controls .lab-note { color: var(--mid); font-size: 13px; }
.lab-toggle { display: inline-flex; gap: 8px; }
.lab-list {
margin-top: 32px;
border-top: 1px solid var(--hairline);
}
.lab-row {
display: grid;
grid-template-columns: minmax(200px, 1.2fr) 100px minmax(0, 2fr);
gap: 18px;
align-items: center;
padding-block: 16px;
border-bottom: 1px solid var(--hairline);
}
.lab-row a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.lab-row .muted { color: var(--mid); font-weight: 500; }
.lab-note { font-size: 13.5px; color: var(--mid); }
.status {
justify-self: start;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--ink);
}
.status-review { background: var(--ink); color: var(--paper); }
.status-planned { color: var(--mid); border-color: var(--hairline); }
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
/* The hem of the page is stitched, like the onboarding thread */
.site-footer {
border-top: 1px dashed var(--hairline);
background: var(--paper);
margin-top: 0;
}
.footer-grid {
display: grid;
/* Brand + four nav columns. The fourth is Legal (2026-08-11) — without this
fifth track it would have wrapped onto an implicit second row under the
wordmark. The narrower breakpoints below already reflow by count. */
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 32px;
padding-block: 48px 36px;
}
.footer-tag {
margin-top: 10px;
font-size: 13.5px;
color: var(--mid);
}
.footer-col h4 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 12px;
}
.footer-col a {
display: block;
padding-block: 4px;
font-size: 14px;
color: var(--ink-soft);
}
.footer-col a:hover { color: var(--ink); }
.footer-legal {
display: flex;
justify-content: space-between;
gap: 16px;
padding-block: 18px;
border-top: 1px solid var(--hairline);
font-size: 12.5px;
color: var(--mid);
}
.footer-legal a {
text-decoration: underline;
text-underline-offset: 3px;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 960px) {
.hero { padding-block: 56px 44px; }
.hero-grid { grid-template-columns: 1fr; }
.hero-side { grid-template-columns: 1fr 1fr; align-items: stretch; }
.portal-grid { grid-template-columns: 1fr; }
.portal-media { height: 240px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.winner-banner { min-height: 300px; }
}
@media (max-width: 760px) {
:root { --gutter: 16px; }
.header-row {
min-height: 60px;
justify-content: space-between;
}
/* On small screens the menu overlay IS the navigation */
.site-nav { display: none; }
.header-actions { margin-left: auto; gap: 10px; }
.ghost-link { display: none; }
.btn { min-height: 36px; padding: 8px 13px; font-size: 13px; }
.menu-toggle { min-height: 36px; padding: 8px 13px; font-size: 13px; }
.world-toolbar { top: 60px; padding-block: 10px; }
.world-hero { padding-block: 40px 20px; }
.world-title { font-size: 40px; }
.world-hero-row { align-items: stretch; }
.world-hero-btn {
width: 100%;
margin-top: 4px;
}
.hero-side { grid-template-columns: 1fr; }
.search-bar {
display: grid;
grid-template-columns: 1fr auto;
}
.search-scope {
grid-column: 1 / -1;
width: 100%;
padding: 12px 14px;
border-bottom: 1px solid var(--hairline);
}
.search-bar input { padding: 13px 14px; }
.search-submit { min-width: 52px; }
.runway-card,
.runway-card-body { min-height: 280px; }
.winner-banner { grid-template-columns: 1fr; }
.winner-banner-media { order: -1; min-height: 240px; }
.winner-banner-section { padding-block: 0 56px; }
.home-banner { grid-template-columns: 1fr; min-height: 0; }
.home-banner-collage img.lift,
.home-banner:hover .home-banner-collage img.lift { transform: translateY(-6px); }
.card-grid,
.designer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carousel-btn,
.fav-btn {
opacity: 1;
transform: none;
}
.carousel-btn { transform: translateY(-50%); }
.designer-tile:hover .carousel-prev,
.designer-tile:focus-within .carousel-prev,
.designer-tile:hover .carousel-next,
.designer-tile:focus-within .carousel-next { transform: translateY(-50%); }
}
@media (max-width: 560px) {
.header-actions .ghost-link, .header-actions .btn-ink { display: none; }
.hero { padding-block: 38px 34px; }
.hero-sub { font-size: 15px; }
.stitch { width: 100%; }
.portal-media { height: 210px; }
.portal-body { padding: 18px; }
.portal-title { font-size: 25px; }
.row-title { font-size: 22px; }
.row-sub { font-size: 12.5px; }
.rail-card { width: 180px; }
.occasion { width: 122px; }
.row-section { padding-block: 0 40px; }
.lookboard-shell { padding-inline: 10px; }
.feed-card { box-shadow: none; }
.feed-head { padding-inline: 12px; }
.feed-media { aspect-ratio: 3 / 4; }
.feed-copy h2 { font-size: 19px; }
.card-grid,
.designer-grid { grid-template-columns: 1fr; }
.tile-row { flex-wrap: wrap; }
.footer-grid { grid-template-columns: 1fr; gap: 22px; }
.footer-legal { flex-direction: column; }
.lab-row { grid-template-columns: 1fr; gap: 6px; }
}
/* ==========================================================================
Workstream A — Auth & onboarding
Join, sign in, OTP, business + customer onboarding, dashboard stub.
Tokens only, one easing (--ease-out). All motion here is disabled by the
global prefers-reduced-motion rule near the top of this file; every element
rests in its visible state so nothing disappears when motion is off.
========================================================================== */
@keyframes reveal-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes otp-tick {
0% { transform: scale(0.9); }
55% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes onb-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Header — signed-in avatar chip + sign out */
.avatar-chip {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 4px 15px 4px 4px;
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: 14px;
font-weight: 500;
transition: border-color 0.15s, transform 0.18s var(--ease-out);
}
.avatar-chip:hover { border-color: var(--ink); transform: translateY(-1px); }
/* author display:inline-flex would otherwise defeat the [hidden] toggle */
.avatar-chip[hidden] { display: none; }
.avatar-initial {
width: 32px;
height: 32px;
flex: none;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
font-family: var(--serif);
font-size: 15px;
font-weight: 500;
}
.menu-signout {
font-size: 14px;
font-weight: 500;
color: rgba(250, 249, 246, 0.72);
transition: color 0.15s;
}
.menu-signout:hover { color: var(--paper); }
/* Auth page shell + editorial side panel */
.auth { padding-block: clamp(28px, 5vw, 60px) 72px; }
.auth-split {
display: grid;
grid-template-columns: minmax(0, 460px) minmax(0, 520px);
justify-content: center;
gap: clamp(28px, 5vw, 72px);
align-items: center;
}
.auth-main { width: 100%; }
.auth-head { margin-bottom: 22px; }
.auth-head-tight { margin-bottom: 16px; }
.auth-head .micro { display: block; margin-bottom: 12px; }
.auth-title { font-size: clamp(30px, 4.5vw, 40px); }
.auth-lede {
margin-top: 10px;
color: var(--mid);
font-size: 15px;
}
.auth-lede strong { color: var(--ink); font-weight: 600; }
.auth-aside {
position: relative;
height: clamp(440px, 62vh, 560px);
border-radius: var(--radius);
overflow: hidden;
background: var(--paper-raised);
}
.auth-aside img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(8%);
}
.auth-aside-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 40%, rgba(0, 0, 0, 0.66) 100%);
}
.auth-aside-body {
position: absolute;
inset: auto 0 0 0;
padding: 26px;
color: #fff;
}
.auth-aside-body .micro { color: rgba(255, 255, 255, 0.8); display: block; margin-bottom: 8px; }
.auth-aside-line {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
line-height: 1.15;
}
/* Role chooser cards (staggered entrance) */
.role-list { display: grid; gap: 12px; }
.role-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 15px 18px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface);
cursor: pointer;
transition: border-color 0.18s, background 0.18s, box-shadow 0.2s, transform 0.18s var(--ease-out);
animation: reveal-up 0.5s var(--ease-out) both;
}
.role-card:nth-child(1) { animation-delay: 0.04s; }
.role-card:nth-child(2) { animation-delay: 0.1s; }
.role-card:nth-child(3) { animation-delay: 0.16s; }
.role-card:hover { border-color: var(--ink); }
.role-card input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.role-card:focus-within {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06);
}
.role-card.is-selected {
border-color: var(--ink);
box-shadow: 0 10px 30px rgba(18, 18, 18, 0.07);
}
.role-icon {
flex: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--paper-raised);
transition: background 0.18s;
}
.role-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: var(--ink);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.18s;
}
.role-card.is-selected .role-icon { background: var(--ink); }
.role-card.is-selected .role-icon svg { stroke: var(--paper); }
.role-text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.role-name { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.role-desc { font-size: 13px; color: var(--mid); }
.role-check {
flex: none;
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1.5px solid var(--hairline);
transition: background 0.18s, border-color 0.18s;
}
.role-check svg {
width: 14px;
height: 14px;
fill: none;
stroke: var(--paper);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
transition: opacity 0.18s;
}
.role-card.is-selected .role-check { background: var(--ink); border-color: var(--ink); }
.role-card.is-selected .role-check svg { opacity: 1; }
/* Primary auth button + form scaffolding */
.auth-submit { width: 100%; margin-top: 22px; }
.auth-submit[disabled] { opacity: 0.45; cursor: not-allowed; }
.auth-submit[disabled]:hover { transform: none; }
.auth-form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mid);
}
.field-input {
width: 100%;
min-height: 48px;
padding: 13px 16px;
border: 1.5px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface);
font: 400 15px var(--sans);
color: var(--ink);
transition: border-color 0.18s, box-shadow 0.18s;
}
.field-input::placeholder { color: var(--mid); }
.field-input:hover { border-color: var(--ink-soft); }
.field-input:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06);
}
select.field-input {
appearance: none;
cursor: pointer;
padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6c66' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
}
.field.is-invalid .field-input,
.is-invalid { animation: onb-shake 0.3s var(--ease-out); }
.is-invalid.field-input,
.field-input.is-invalid { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.08); }
/* Phone number group */
.phone-group {
display: flex;
align-items: stretch;
border: 1.5px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
transition: border-color 0.18s, box-shadow 0.18s;
}
.phone-group:focus-within {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06);
}
.phone-cc {
display: flex;
align-items: center;
padding: 0 14px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
background: var(--paper-raised);
border-right: 1px solid var(--hairline);
}
.phone-group .field-input { border: 0; border-radius: 0; box-shadow: none; }
.phone-group .field-input:focus { box-shadow: none; }
/* OTP boxes */
/* ⚑ W12-16 · `min-width: 0` here is load-bearing, not tidying. Owner report,
2026-08-07: on /join/verify/ the six boxes and the Confirm button ran off
the page and under the aside image, on wide AND narrow screens.
Measured in a browser rather than reasoned about: the column (.auth-main)
and the form (.auth-form) were a correct 460px and .otp was **1944px**.
.auth-form is `display: grid`, so .otp is a grid ITEM, and grid items
default to `min-width: auto` — their min-content size. The min-content
size of a flex row whose items are `flex-grow: 1` is not the sum of their
minimums; it is (largest max-content contribution ÷ flex-grow) × Σ
flex-grow. Each box's max-content contribution is an renders its markers outside the column.
Everything here is scoped under `.doc`, so no existing screen moves a pixel.
No new colour: the accent stays out of legal text entirely. */
.doc-h3 {
font-family: var(--sans);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
margin-top: 24px;
margin-bottom: 6px;
}
.doc-list { margin-top: 12px; padding-left: 20px; display: grid; gap: 8px; }
.doc-list li { font-size: 15.5px; color: var(--ink-soft); max-width: 62ch; }
.doc-list li::marker { color: var(--mid); }
.doc-list strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.doc-meta { margin-top: 20px; font-size: 13px; color: var(--mid); }
/* Who REEGo legally is. The same block, from the same constants, on all four
pages — Act 772 s.47 asks for name, legal status, address, phone and
registration number, and a payment reviewer matches it against the account. */
.doc-id {
margin-top: clamp(28px, 4vw, 40px);
padding: 20px 22px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface);
display: grid;
gap: 4px;
font-size: 14px;
color: var(--ink-soft);
max-width: 62ch;
}
.doc-id strong { color: var(--ink); font-weight: 600; }
.doc-id a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* The safety rules. One ink border, because this is the block that has to stop
a person mid-scroll before they send money to a stranger. */
.doc-safety {
margin-top: clamp(28px, 4vw, 40px);
padding: clamp(20px, 3vw, 28px);
border: 1px solid var(--ink);
border-radius: var(--radius);
}
.doc-safety-title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(20px, 3vw, 24px);
line-height: 1.15;
}
.doc-safety p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
/* The payment-flow callout — Terms clause 10 and Refund Policy Part A
(2026-08-14, after Paystack's second review asked for the payment flow to be
set out in the Terms; the owner's instruction was "please make sure this is
highlighted well"). Same hard-edged frame as the safety block because it does
the same job — stop the scroll at the paragraph that matters — and still no
accent colour, legal text carrying none. A separate class rather than a
second `.doc-safety`: the advisories are asserted byte-identical across two
documents, and sharing the class name would make that guard read this block
on one page and the advisories on the other. */
.doc-callout {
margin-top: clamp(24px, 3vw, 32px);
padding: clamp(20px, 3vw, 28px);
border: 1px solid var(--ink);
border-radius: var(--radius);
}
.doc-callout-title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(19px, 2.6vw, 22px);
line-height: 1.15;
}
.doc-callout p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.doc-callout strong { color: var(--ink); font-weight: 600; }
/* Contact */
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(24px, 4vw, 52px);
margin-top: clamp(32px, 5vw, 48px);
align-items: start;
}
.contact-lines { display: grid; gap: 24px; }
.contact-line .micro { margin-bottom: 6px; }
.contact-email {
font-family: var(--serif);
font-size: 20px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.contact-email:hover { color: var(--ink-soft); }
.contact-where { font-size: 15px; }
/* Advertise */
.ad-example { margin-top: clamp(28px, 4vw, 44px); }
.ad-example-banner {
border-radius: var(--radius);
overflow: hidden;
background: var(--ink);
color: var(--paper);
padding: clamp(28px, 4vw, 48px);
}
.ad-example-copy .micro { color: rgba(250, 249, 246, 0.6); margin-bottom: 8px; }
.ad-example-title { font-family: var(--serif); font-weight: 480; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; }
.ad-example-copy p { margin-top: 8px; font-size: 14.5px; color: rgba(250, 249, 246, 0.75); max-width: 46ch; }
.ad-example-tag {
display: inline-block;
margin-top: 18px;
padding: 5px 13px;
border: 1px solid rgba(250, 249, 246, 0.3);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(250, 249, 246, 0.85);
}
.ad-example-note { margin-top: 14px; font-size: 13px; color: var(--mid); max-width: 60ch; }
.ad-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.ad-slot {
padding: 24px 22px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface);
}
.ad-slot-num { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--mid); }
.ad-slot-name { font-family: var(--serif); font-weight: 500; font-size: 20px; margin-top: 6px; }
.ad-slot p { margin-top: 8px; font-size: 13.5px; color: var(--mid); }
/* --------------------------------------------------------------------------
Workstream C + E + F — responsive
-------------------------------------------------------------------------- */
@media (max-width: 960px) {
.dash-cols { grid-template-columns: 1fr; }
.dash-col-side { position: static; }
.champion { grid-template-columns: 1fr; }
.champion-media { max-width: 360px; }
}
@media (max-width: 760px) {
.manage-remove { opacity: 1; transform: none; }
.listing-add { grid-template-columns: 1fr 1fr; }
.listing-add .btn { grid-column: 1 / -1; }
.contact-grid { grid-template-columns: 1fr; }
.doc-worlds { grid-template-columns: 1fr; }
.ad-slots { grid-template-columns: 1fr; }
.stat-strip { gap: 10px; }
.dash-top { align-items: flex-start; }
}
@media (max-width: 560px) {
.stat-strip { grid-template-columns: 1fr; }
.stat-tile { flex-direction: row; align-items: baseline; gap: 10px; padding: 16px 18px; }
.stat-value { font-size: 24px; }
.stat-label { margin-top: 0; }
.listing-add { grid-template-columns: 1fr; }
.manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.closet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck-controls { gap: 16px; }
.chal-title { font-size: 40px; }
}
/* --------------------------------------------------------------------------
Workstream G — search results + branded 404
-------------------------------------------------------------------------- */
.search-bar-page { margin-top: 24px; }
.world-title em { font-style: italic; font-weight: 420; }
.search-suggest {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.search-suggest .chip-row { flex: 1; }
.search-section { padding-block: 12px 40px; }
.search-empty {
padding-block: 24px 60px;
max-width: 60ch;
}
.search-empty-line {
font-family: var(--serif);
font-weight: 480;
font-size: 26px;
}
.search-empty-line em { font-style: italic; }
.search-empty p { margin-top: 8px; color: var(--mid); font-size: 14.5px; }
.search-empty-ctas {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.notfound { padding-block: clamp(64px, 14vh, 140px); }
.notfound-inner {
max-width: 640px;
margin-inline: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.notfound-title { font-size: clamp(30px, 4.4vw, 48px); }
.notfound-sub { color: var(--mid); font-size: 15px; }
.notfound-ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 12px;
}
.notfound-stitch { margin-top: 28px; }
/* ==========================================================================
Premium polish pass
Craft details only: no new colors, fonts or radii. Tokens only, one easing
(--ease-out). Everything here sits under the global prefers-reduced-motion
rule near the top of this file, and every JS-driven state (reveal, image
fade) rests in its visible state when scripting is unavailable.
========================================================================== */
/* --------------------------------------------------------------------------
Type craft
-------------------------------------------------------------------------- */
h1, h2, h3, .display { text-wrap: balance; }
p { text-wrap: pretty; }
/* Prices, counts and meters set like a price tag: digits share one width,
so nothing jitters when a number changes. (.dash-block-meta joined the
list in WFD-8 — the Studio manager heads carry JS-updated counts: the
moved used-of-cap line and the pre-existing "N live" listing count,
which rode this class without tabular-nums since W3.) */
.rail-price, .tile-price, .product-price, .stat-value, .like-count,
.deck-progress, .closet-count, .sub-count, .detail-count,
.chal-meta-item strong, .profile-stat strong, .champion-votes,
.winner-cell-votes, .manage-price, .dash-block-meta,
.console-gate-now, .console-gate-target, .console-stat-value,
.console-stat-note, .console-series-total, .console-series-bar-value,
.console-todo-count, .console-chip-count, .console-money-input,
.console-number-input, .console-promo-count, .console-arm-row dd,
.console-list-order, .console-elsewhere-value, .console-audit-when,
.console-savebar-count {
font-variant-numeric: tabular-nums lining-nums;
}
/* --------------------------------------------------------------------------
Press feedback — every pill acknowledges the finger
-------------------------------------------------------------------------- */
.btn:active, .banner-btn:active, .detail-btn:active, .social-btn:active,
.menu-toggle:active, .avatar-chip:active, .enq-reply:active {
transform: translateY(0) scale(0.98);
}
.chip {
transition: border-color 0.15s, background 0.15s, color 0.15s,
transform 0.15s var(--ease-out);
}
.chip:active { transform: scale(0.96); }
.save-btn:active, .fav-btn:active { transform: scale(0.88); }
/* --------------------------------------------------------------------------
Media plates — a whisper of a border keeps light photos from
dissolving into the paper background
-------------------------------------------------------------------------- */
.rail-media, .tile-media, .occasion-media, .gallery-main, .gallery-cell,
.manage-media, .champion-media, .winner-cell-media, .look-detail-media,
.profile-hero {
position: relative;
}
.rail-media::after, .tile-media::after, .occasion-media::after,
.gallery-main::after, .gallery-cell::after, .manage-media::after,
.champion-media::after, .winner-cell-media::after, .look-detail-media::after,
.profile-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border: 1px solid rgba(18, 18, 18, 0.06);
border-radius: inherit;
pointer-events: none;
}
/* --------------------------------------------------------------------------
Rail arrows — desktop affordance for the scrolling rows
(injected by reego.js next to "See all"; touch screens just swipe)
-------------------------------------------------------------------------- */
.rail-nav { display: flex; align-items: center; gap: 8px; }
.rail-nav[hidden] { display: none; }
.rail-btn {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid var(--hairline);
border-radius: 50%;
color: var(--ink);
background: var(--surface);
transition: border-color 0.15s, opacity 0.15s, transform 0.15s var(--ease-out);
}
.rail-btn:hover { border-color: var(--ink); }
.rail-btn:active { transform: scale(0.92); }
.rail-btn[disabled] { opacity: 0.35; cursor: default; }
.rail-btn[disabled]:hover { border-color: var(--hairline); }
.rail-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 760px) {
.rail-nav { display: none; }
}
/* --------------------------------------------------------------------------
Image loading — shimmer skeleton
reego.js tags each lazy image .img-loading until it arrives, then adds
.img-loaded. While loading, the empty + lede instead).
========================================================================== */
.setup-chips-label {
display: block;
margin: 26px 0 0;
}
.setup-chips-label + .onb-chips { margin-top: 10px; }
/* ==========================================================================
W11-3 · PRODUCTION TRUTH — the designed empty states
(`wave-kickoffs/W11.md`; appended block, board §3b.)
Wave W11 retires every demo fallback from production rendering, so pages
that used to be filled with fabricated content can now be honestly empty.
Workstream H's law says a section renders only when content exists — and
where a whole page would go quiet, one designed sentence and a way forward
take its place. These are those two places. Monochrome, existing tokens,
existing radius, no new colours, no shadows (nothing here floats).
========================================================================== */
/* The homepage with nothing published yet — every portal and rail is a slot,
so on a young site the page between hero and footer is otherwise blank. */
.home-empty-section { padding-block: 0 clamp(52px, 7vw, 82px); }
.home-empty {
max-width: 620px;
padding: clamp(28px, 4vw, 44px);
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface);
}
.home-empty .micro { display: block; margin-bottom: 12px; }
.home-empty-title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(24px, 3.6vw, 34px);
line-height: 1.1;
}
.home-empty-sub {
margin-top: 12px;
font-size: 15px;
color: var(--mid);
max-width: 46ch;
}
.home-empty-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
/* The contact card, now that the pass-through form (and its fake "Sent"
badge) is retired — the real addresses are the whole answer. */
.contact-note {
margin-bottom: 20px;
font-size: 15px;
line-height: 1.55;
color: var(--mid);
max-width: 42ch;
}
/* The designer profile hero with no photo yet (W11-3, the launch-day window:
profile created, first upload not made). The needs the ratio the image used to give it — the box keeps its
--paper-raised placeholder surface and the two-column profile head holds
its shape instead of collapsing. No stand-in photograph: a stock image
under a real designer's name is the fabrication this wave removes. */
.profile-hero.is-blank { aspect-ratio: 4 / 5; }
/* ==========================================================================
W13-1 — the account menu, the header heart, and the sign-out that was
never there
The avatar chip was a bare link to /dashboard/. It opens a menu now:
Designer space · My shop · Your Closet · Sign out. All three places are
always listed (owner ruling, 2026-08-07) and a place that is not set up
carries a Set-up chip beside its label.
⚑ NO GOLD. The One Accent Rule allows gold in exactly three kinds of
place — big banner cards, the live dot, occasional highlights — and a
navigation menu is none of them. Everything below is ink, paper and
hairline.
⚑ NO POLISH. A designer is being brought in for the visual layer after
these waves; this is honest structure at 360px with ≥40px targets, and
the paint comes later and will overrule it.
The panel is the ONE thing here allowed a shadow: it floats over the page,
which is exactly the popover case the shadow rule names, and it uses the
--shadow-soft token rather than an ad-hoc value.
========================================================================== */
/* The heart. It carries NO COUNT — not here, not injected by reego.js.
Saves are private by decision (WFD-5) and no surface in REEGo prints a
save count, so a plain heart that opens Your Closet keeps that intact. */
.header-heart {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex: none;
border: 1px solid var(--hairline);
border-radius: 50%;
color: var(--ink);
transition: border-color 0.15s, transform 0.18s var(--ease-out);
}
/* display:grid would otherwise defeat the [hidden] toggle — the same reason
.avatar-chip carries this rule. */
.header-heart[hidden] { display: none; }
.header-heart:hover { border-color: var(--ink); transform: translateY(-1px); }
.header-heart:active { transform: translateY(0) scale(0.98); }
.header-heart svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-menu {
position: relative;
display: inline-flex;
}
.account-menu[hidden] { display: none; }
.account-menu-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 60;
min-width: 232px;
max-width: min(288px, calc(100vw - 32px));
display: grid;
gap: 2px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.account-menu-panel[hidden] { display: none; }
.account-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 40px;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
color: var(--ink);
text-align: left;
transition: background 0.15s;
}
.account-menu-item:hover,
.account-menu-item:focus-visible { background: var(--paper-raised); }
.account-menu-item:active { transform: scale(0.99); }
/* "Set up" — a .micro label (11px, 600, uppercase, the mandatory 0.14em
tracking) in a hairline pill. Monochrome: this is a state, not a
celebration. */
.account-menu-chip {
flex: none;
padding: 3px 9px;
border: 1px solid var(--hairline);
border-radius: 999px;
}
.account-menu-signout {
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--hairline);
border-radius: 0;
color: var(--ink-soft);
}
.account-menu-signout:hover { color: var(--ink); }
@media (max-width: 560px) {
/* 360px is the design width: the row is wordmark + heart + chip + Menu,
and the chip has already dropped its label at this breakpoint. 36px is
the floor for a touch target and this stays on it. */
.header-heart { width: 36px; height: 36px; }
.header-heart svg { width: 17px; height: 17px; }
.account-menu-panel { min-width: 208px; }
}