/* ========================================================================== 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; grid-template-columns: 2fr 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 */ .otp { margin-top: 4px; } .otp-boxes { display: flex; gap: clamp(6px, 2.5vw, 12px); } .otp-box { flex: 1 1 0; min-width: 0; height: clamp(52px, 14vw, 62px); text-align: center; font-family: var(--serif); font-size: clamp(22px, 6vw, 28px); font-weight: 500; color: var(--ink); border: 1.5px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .otp-box:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06); } .otp-box.is-filled { border-color: var(--ink); animation: otp-tick 0.28s var(--ease-out); } .otp-hint { margin-top: 14px; font-size: 13px; color: var(--mid); } /* JS-injected auth error line (real /api/v1/ failures — backend W1) */ .auth-error { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #8a2020; } /* Small inline text button (resend, change number, back) */ .link-btn { display: inline; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; transition: color 0.15s; } .link-btn:hover { color: var(--ink-soft); } /* "or" divider + alt links */ .auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--mid); } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } .auth-or span { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .auth-alt { margin-top: 22px; font-size: 14px; color: var(--mid); } .auth-alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .auth-alt-sep { margin: 0 8px; color: var(--hairline); } /* Social buttons (monochrome outline) */ .social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--surface); transition: border-color 0.15s, transform 0.18s var(--ease-out); } .social-btn:hover { border-color: var(--ink); transform: translateY(-1px); } .social-btn svg { width: 18px; height: 18px; fill: var(--ink); flex: none; } /* Sign-in method tabs */ .auth-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--hairline); border-radius: 999px; margin-bottom: 24px; } .auth-tab { min-height: 36px; padding: 8px 24px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--mid); transition: background 0.18s, color 0.18s; } .auth-tab.is-active { background: var(--ink); color: var(--paper); } /* -------------------------------------------------------------------------- Onboarding — business setup + customer preferences -------------------------------------------------------------------------- */ .onb-shell { max-width: 620px; } .onb { padding-block: clamp(20px, 4vw, 40px) 0; } /* Progress indicator drawn as a thin stitch line with step nodes */ .onb-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: clamp(26px, 5vw, 44px); } .onb-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } /* author display:flex would otherwise defeat the [hidden] role filter */ .onb-node[hidden] { display: none; } .onb-node i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--hairline); transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; } .onb-node em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); transition: color 0.25s; } /* the stitch connector into each node from the previous one */ .onb-node::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 0; border-top: 2px dashed var(--hairline); z-index: 0; transition: border-color 0.25s; } .onb-node:first-child::before { display: none; } .onb-node.is-complete i { background: var(--ink); border-color: var(--ink); } .onb-node.is-complete em { color: var(--ink-soft); } .onb-node.is-complete::before, .onb-node.is-current::before { border-top-style: solid; border-color: var(--ink); } .onb-node.is-current i { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(18, 18, 18, 0.06); } .onb-node.is-current em { color: var(--ink); } /* Steps */ .onb-step { animation: reveal-up 0.45s var(--ease-out) both; } .onb-step > .micro { display: block; } .onb-title { font-size: clamp(28px, 4.5vw, 38px); margin-top: 10px; } .onb-lede { margin-top: 10px; color: var(--mid); max-width: 48ch; } .onb-chips { flex-wrap: wrap; overflow: visible; margin-top: 22px; } .onb-chips.is-invalid { border-radius: var(--radius); } .onb-actions { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; } .onb-actions .auth-submit { width: auto; margin-top: 0; flex: 1 1 auto; } .onb-back { color: var(--mid); } /* Location placeholder — a tasteful static map stand-in, never a broken map */ .map-placeholder { position: relative; height: 150px; margin-bottom: 18px; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); } .map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.7; } .map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -110%); } .map-pin svg { width: 30px; height: 30px; fill: var(--ink); } .map-pin circle { fill: var(--paper); } .map-tag { position: absolute; top: calc(50% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); font-size: 11px; font-weight: 600; white-space: nowrap; } /* Final "page is live" / "all set" moment */ .live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-deep); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .live-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; } .onb-final-title { font-size: clamp(34px, 6.5vw, 54px); margin-top: 16px; line-height: 1.04; } .onb-final-title em { font-style: italic; font-weight: 420; } .onb-final-lede { margin-top: 14px; } .onb-actions-final { margin-top: 28px; } .onb-actions-final .auth-submit { flex: 0 0 auto; } /* -------------------------------------------------------------------------- Dashboard stub -------------------------------------------------------------------------- */ .dash { padding-block: clamp(56px, 9vw, 108px); } .dash-inner { max-width: 720px; margin-inline: auto; text-align: center; } .dash .micro { display: block; margin-bottom: 14px; } .dash-title { font-size: clamp(38px, 7vw, 62px); } .dash-title em { font-style: italic; font-weight: 420; } .dash-lede { margin-top: 16px; margin-inline: auto; max-width: 48ch; color: var(--mid); font-size: 16px; } .dash-stitch { margin: 30px auto 0; width: min(420px, 90%); } .dash-worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; text-align: left; } .dash-world { display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); transition: border-color 0.2s, transform 0.2s var(--ease-out); } .dash-world:hover { border-color: var(--ink); transform: translateY(-1px); } .dash-world-num { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--mid); } .dash-world-name { font-family: var(--serif); font-size: 20px; font-weight: 500; } .dash-world-go { margin-top: 8px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .dash-world:hover .dash-world-go .arrow { transform: translateX(4px); } .dash-foot { margin-top: 36px; } .dash-foot a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Auth & onboarding — responsive -------------------------------------------------------------------------- */ @media (max-width: 760px) { .auth-split { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .auth-main { max-width: 480px; margin-inline: auto; } .auth-aside { display: none; } .dash-worlds { grid-template-columns: 1fr; } } @media (max-width: 560px) { .social-btn span { display: none; } .social-btn { padding: 10px; } .otp-boxes { gap: 6px; } .onb-node em { display: none; } .avatar-chip-label { display: none; } .avatar-chip { padding: 4px; } } /* ========================================================================== Workstream B + D — Lookbook depth + detail pages Look / designer / product / seller detail, save-to-Closet controls, the post composer, toasts, heart-burst, lightbox and gallery. Tokens only, one easing (--ease-out), durations 0.15-0.6s. All motion sits under the global prefers-reduced-motion rule near the top of this file. ========================================================================== */ @keyframes heart-burst { 0% { opacity: 0; transform: scale(0.6); } 30% { opacity: 0.95; transform: scale(1.05); } 60% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Composer trigger styled as the world-lede inline link */ .world-lede-link { font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; } .world-lede-link:hover { color: var(--ink-soft); } /* -------------------------------------------------------------------------- Save-to-Closet control (bookmark) on media — cards, feed, rails -------------------------------------------------------------------------- */ .feed-media, .feed-media-static { position: relative; } .rail-media { position: relative; } .feed-media-static { cursor: default; } .save-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); } .rail-card:hover .save-btn, .feed-media:hover .save-btn, .feed-card:hover .save-btn, .save-btn:focus-visible, .save-btn.is-saved { opacity: 1; transform: translateY(0); } .save-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .save-btn.is-saved svg { fill: var(--ink); } /* -------------------------------------------------------------------------- Shared detail-page scaffolding -------------------------------------------------------------------------- */ .detail { padding-block: clamp(20px, 4vw, 40px) clamp(56px, 8vw, 96px); } .detail-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mid); } .detail-back:hover { color: var(--ink); } .detail-back .arrow { transition: transform 0.25s var(--ease-out); } .detail-back:hover .arrow { transform: translateX(-3px); } .detail-section-title { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3vw, 28px); line-height: 1.1; margin-bottom: 16px; display: flex; align-items: baseline; gap: 10px; } .detail-count { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--mid); } .detail-related { margin-top: clamp(40px, 6vw, 68px); } /* Detail action buttons (pill, icon + label) */ .detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; } .detail-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s var(--ease-out); } .detail-btn:hover { border-color: var(--ink); transform: translateY(-1px); } .detail-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); } .detail-btn.liked { border-color: var(--ink); } .detail-btn.liked svg { fill: var(--ink); transform: scale(1.06); } .detail-btn.is-saved { border-color: var(--ink); } .detail-btn.is-saved svg { fill: var(--ink); } .detail-btn-icon { padding: 9px 12px; } .detail-btn-icon svg { width: 20px; height: 20px; } /* Overflow "..." menu */ .overflow { position: relative; } .overflow-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 180px; padding: 6px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .overflow-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); transition: background 0.15s, color 0.15s; } .overflow-item:hover { background: var(--paper-raised); color: var(--ink); } /* -------------------------------------------------------------------------- Look detail -------------------------------------------------------------------------- */ .look-detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(20px, 4vw, 52px); align-items: start; margin-top: 18px; } .look-detail-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); } .look-detail-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .heart-burst { position: absolute; top: 50%; left: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; display: grid; place-items: center; opacity: 0; transform: scale(0.6); pointer-events: none; } .heart-burst svg { width: 104px; height: 104px; fill: var(--gold); } .heart-burst.is-bursting { animation: heart-burst 0.6s var(--ease-out) forwards; } .look-detail-panel { position: sticky; top: 88px; } .look-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .look-detail-author img { width: 46px; height: 46px; } .look-detail-author strong { font-size: 15px; } .look-detail-title { font-size: clamp(30px, 4.5vw, 44px); } .look-detail-caption { margin-top: 12px; font-size: 16px; color: var(--ink-soft); max-width: 42ch; } .look-detail-hint { margin-top: 16px; font-size: 12.5px; color: var(--mid); } /* Comments */ .look-comments { margin-top: clamp(40px, 6vw, 64px); max-width: 640px; } .comment-list { display: grid; gap: 18px; } .comment { display: flex; gap: 12px; } .comment-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; } .comment-body { min-width: 0; } .comment-meta { font-size: 13px; } .comment-meta strong { font-weight: 600; } .comment-meta span { margin-left: 8px; color: var(--mid); font-size: 12px; } .comment-text { margin-top: 2px; font-size: 14.5px; color: var(--ink-soft); } .comment-note { margin-top: 22px; font-size: 12.5px; color: var(--mid); } /* -------------------------------------------------------------------------- Designer profile -------------------------------------------------------------------------- */ .profile-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); align-items: center; margin-top: 18px; } .profile-hero { border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); } .profile-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .profile-info .micro { display: block; margin-bottom: 10px; } .profile-name { font-size: clamp(32px, 5vw, 50px); } .profile-loc { margin-top: 8px; font-size: 15px; color: var(--mid); } .profile-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-block: 16px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: 13px; color: var(--mid); } .profile-stat strong { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); margin-right: 4px; } .spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .spec-chip { padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-soft); } .profile-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .btn-glyph { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .detail-btn-heart.liked .btn-glyph { fill: currentColor; } .profile-request-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .profile-request-link:hover .arrow { transform: translateX(4px); } .profile-about { margin-top: clamp(40px, 6vw, 64px); max-width: 640px; } .profile-about-text { font-size: 16px; color: var(--ink-soft); } .profile-portfolio { margin-top: clamp(40px, 6vw, 64px); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .gallery-cell { display: block; padding: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); cursor: zoom-in; } .gallery-cell img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s var(--ease-out); } .gallery-cell:hover img { transform: scale(1.03); } .profile-two-col { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 52px); margin-top: clamp(40px, 6vw, 64px); align-items: start; } .profile-location { min-width: 0; } .profile-location .map-placeholder { height: 220px; margin-bottom: 0; } /* Request-a-design card */ .request-card { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .request-card .micro { display: block; margin-bottom: 10px; } .request-title { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3vw, 28px); line-height: 1.1; margin-bottom: 18px; } .request-form .auth-submit { width: 100%; } .ghs-input { 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; } .ghs-input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06); } .ghs-prefix { display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--paper-raised); border-right: 1px solid var(--hairline); } .ghs-input .field-input { border: 0; border-radius: 0; box-shadow: none; } .ghs-input .field-input:focus { box-shadow: none; } .request-notes { resize: vertical; min-height: 84px; } .request-success .live-badge { margin-bottom: 14px; } .request-success-title { font-family: var(--serif); font-weight: 500; font-size: 26px; } .request-success-text { margin-top: 8px; font-size: 14.5px; color: var(--mid); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; gap: 12px; padding: clamp(16px, 4vw, 48px); background: rgba(18, 18, 18, 0.92); } .lightbox[hidden] { display: none; } .lightbox-img { max-width: min(760px, 100%); max-height: 86vh; object-fit: contain; border-radius: var(--radius-sm); } .lightbox-close { position: absolute; top: 18px; right: 18px; 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); } .lightbox-close:hover { border-color: var(--paper); transform: rotate(90deg); } .lightbox-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .lightbox-nav { flex: none; width: 44px; height: 44px; 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.18s var(--ease-out); } .lightbox-nav:hover { border-color: var(--paper); } .lightbox-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- Product detail -------------------------------------------------------------------------- */ .product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); align-items: start; margin-top: 18px; } .gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); } .gallery-main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; } .gallery-thumb { flex: 0 0 84px; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid transparent; background: var(--paper-raised); transition: border-color 0.18s; } .gallery-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; } .gallery-thumb:hover { border-color: var(--hairline); } .gallery-thumb.is-active { border-color: var(--ink); } .product-info { position: sticky; top: 88px; } .product-info .micro { display: block; margin-bottom: 10px; } .product-title { font-size: clamp(28px, 4vw, 40px); } .product-price { margin-top: 14px; font-size: 24px; font-weight: 600; } .product-price small { font-size: 14px; font-weight: 400; color: var(--mid); } .product-desc { margin-top: 14px; font-size: 15.5px; color: var(--ink-soft); max-width: 46ch; } .seller-card { margin-top: 26px; padding: 20px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .seller-card-head .micro { display: block; margin-bottom: 6px; } .seller-card-name { font-family: var(--serif); font-size: 20px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .seller-card-loc { margin-top: 2px; font-size: 13px; color: var(--mid); } .seller-card-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .seller-card-shop { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .seller-card-shop:hover .arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- Seller profile -------------------------------------------------------------------------- */ .shop-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(20px, 4vw, 52px); align-items: center; margin-top: 18px; margin-bottom: clamp(36px, 5vw, 56px); } .shop-info .micro { display: block; margin-bottom: 10px; } .shop-name { font-size: clamp(32px, 5vw, 50px); } .shop-loc { margin-top: 8px; font-size: 15px; color: var(--mid); } .shop-blurb { margin-top: 14px; font-size: 16px; color: var(--ink-soft); max-width: 48ch; } .shop-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .shop-map .map-placeholder { height: 220px; margin-bottom: 0; } .shop-listings { margin-top: 8px; } /* -------------------------------------------------------------------------- Post composer modal -------------------------------------------------------------------------- */ .composer { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; } .composer[hidden] { display: none; } .composer-backdrop { position: absolute; inset: 0; background: rgba(18, 18, 18, 0.55); } .composer-panel { position: relative; z-index: 1; width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto; padding: clamp(20px, 4vw, 32px); border-radius: var(--radius) var(--radius) 0 0; background: var(--paper); animation: reveal-up 0.35s var(--ease-out) both; } .composer-head { display: flex; align-items: center; justify-content: space-between; } .composer-close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; transition: border-color 0.15s, transform 0.2s var(--ease-out); } .composer-close:hover { border-color: var(--ink); transform: rotate(90deg); } .composer-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .composer-title { font-size: clamp(24px, 4vw, 32px); margin: 10px 0 20px; } .composer-form { display: grid; gap: 16px; } .composer-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .composer-photo { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid transparent; cursor: pointer; transition: border-color 0.18s; } .composer-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .composer-photo input { position: absolute; opacity: 0; width: 1px; height: 1px; } .composer-photo-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(0.8); transition: opacity 0.18s, transform 0.18s var(--ease-out); } .composer-photo-check svg { width: 13px; height: 13px; fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .composer-photo:has(input:checked) { border-color: var(--ink); } .composer-photo:has(input:checked) .composer-photo-check { opacity: 1; transform: scale(1); } .composer-caption { resize: vertical; min-height: 60px; } .composer-chips { flex-wrap: wrap; overflow: visible; } .composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 4px; } /* Fresh (just-composed) feed card */ .feed-card.is-fresh { border-color: var(--ink); } .feed-avatar-initial { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 17px; font-weight: 500; } /* -------------------------------------------------------------------------- Toasts -------------------------------------------------------------------------- */ .toast-wrap { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%); display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; } .toast { padding: 11px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 500; text-align: center; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .toast.is-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Workstream B + D — responsive -------------------------------------------------------------------------- */ @media (max-width: 960px) { .look-detail-grid, .profile-head, .product-grid, .profile-two-col, .shop-head { grid-template-columns: 1fr; } .look-detail-panel, .product-info { position: static; } .look-detail-media img, .profile-hero img, .gallery-main img { aspect-ratio: 4 / 5; } .shop-map { max-width: 460px; } } @media (max-width: 760px) { .save-btn { opacity: 1; transform: none; } .detail-actions { gap: 8px; } .detail-btn { padding: 8px 13px; font-size: 12.5px; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .composer-photos { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 560px) { .composer-photos { grid-template-columns: repeat(2, 1fr); } .look-detail-title { font-size: 30px; } .gallery-thumb { flex-basis: 68px; } } /* ========================================================================== Workstream C + E + F — Challenges deck, Winners wall, Dashboard, Closet, and the static pages. Tokens only, one easing (--ease-out). Gold appears only on the champion micro-label and the live dot (One Accent Rule); the ink stamps and the subscription meter stay monochrome. All motion sits under the global prefers-reduced-motion rule near the top of this file. ========================================================================== */ /* -------------------------------------------------------------------------- Challenges — hero -------------------------------------------------------------------------- */ .chal-hero { padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px); } .chal-hero-inner { max-width: 720px; } .chal-hero-copy .live-badge { margin-bottom: 16px; } .chal-title { font-size: clamp(40px, 8vw, 72px); } .chal-brief { margin-top: 16px; max-width: 52ch; font-size: 17px; color: var(--ink-soft); } .chal-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 20px; font-size: 14px; color: var(--mid); } .chal-meta-item strong { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); margin-right: 4px; } .chal-meta-dot { color: var(--hairline); } .chal-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* -------------------------------------------------------------------------- Challenges — the swipe voting deck -------------------------------------------------------------------------- */ .chal-vote { padding-block: clamp(28px, 5vw, 56px) clamp(56px, 8vw, 96px); } .chal-vote-inner { max-width: 560px; margin-inline: auto; text-align: center; } .chal-vote-head .micro { display: block; margin-bottom: 10px; } .chal-vote-title { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.12; } .chal-vote-sub { margin-top: 8px; font-size: 14px; color: var(--mid); } .deck { position: relative; margin: clamp(24px, 4vw, 40px) auto 0; width: min(380px, 100%); } .deck-stack { position: relative; width: 100%; aspect-ratio: 4 / 5; } .vote-card { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); box-shadow: var(--shadow); will-change: transform; user-select: none; -webkit-user-select: none; } .vote-card.is-current { cursor: grab; touch-action: pan-y; } .vote-card.is-current:active { cursor: grabbing; } .vote-media { position: relative; width: 100%; height: 100%; } .vote-media img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; } .vote-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.68) 100%); pointer-events: none; } /* Ink-on-paper stamps — monochrome, not gold */ .vote-stamp { position: absolute; top: 22px; z-index: 2; padding: 7px 16px; border: 2.5px solid var(--ink); border-radius: var(--radius-sm); background: rgba(250, 249, 246, 0.86); color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; pointer-events: none; } .vote-stamp-in { left: 20px; transform: rotate(-11deg); } .vote-stamp-out { right: 20px; transform: rotate(11deg); } .vote-caption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 20px; text-align: left; color: #fff; } .vote-caption-loc { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); } .vote-caption-title { margin-top: 4px; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; } .vote-caption-author { margin-top: 2px; font-size: 13px; color: rgba(255,255,255,0.85); } /* Closing state */ .deck-done { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); text-align: center; } .deck-done[hidden] { display: none; } .deck-done .micro { display: block; margin-bottom: 6px; } .deck-done-title { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.08; } .deck-done-tally { margin-top: 8px; font-size: 15px; font-weight: 600; } .deck-done-sub { margin-top: 4px; font-size: 13.5px; color: var(--mid); max-width: 30ch; } .deck-done-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } /* Controls */ .deck-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; } .deck-controls[hidden] { display: none; } .deck-btn { width: 58px; height: 58px; display: grid; place-items: center; border: 1.5px solid var(--hairline); border-radius: 50%; color: var(--ink); background: var(--surface); transition: border-color 0.18s, transform 0.18s var(--ease-out), background 0.18s, color 0.18s; } .deck-btn:hover { border-color: var(--ink); transform: translateY(-2px); } .deck-btn:active { transform: scale(0.94); } .deck-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .deck-btn-in:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .deck-progress { min-width: 64px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .deck-footnote { margin: 26px auto 0; max-width: 46ch; font-size: 12.5px; line-height: 1.5; color: var(--mid); } /* -------------------------------------------------------------------------- Winners wall -------------------------------------------------------------------------- */ .winners-head { margin-top: 18px; max-width: 640px; } .winners-head .micro { display: block; margin-bottom: 10px; } .winners-title { font-size: clamp(32px, 5vw, 52px); } .winners-lede { margin-top: 12px; font-size: 15px; color: var(--mid); } /* Monthly champion — elevated, with the one allowed gold micro-label */ .champion { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 44px); align-items: center; margin-top: clamp(28px, 4vw, 44px); padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--surface); transition: transform 0.2s var(--ease-out), box-shadow 0.2s; } .champion:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .champion-media { border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-raised); } .champion-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s var(--ease-out); } .champion:hover .champion-media img { transform: scale(1.03); } .champion-label { display: inline-flex; align-self: start; padding: 5px 13px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-deep); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .champion-name { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; } .champion-piece { margin-top: 8px; font-size: 16px; color: var(--ink-soft); } .champion-votes { margin-top: 10px; font-size: 13px; color: var(--mid); } .champion-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .champion:hover .champion-cta .arrow { transform: translateX(4px); } .winners-grid-title { margin-top: clamp(44px, 6vw, 68px); } .winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .winner-cell { display: block; } .winner-cell-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-raised); } .winner-cell-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .winner-cell:hover .winner-cell-media img { transform: scale(1.03); } .winner-cell-week { display: block; margin-top: 11px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .winner-cell-name { margin-top: 4px; font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.2; } .winner-cell-piece { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); } .winner-cell-votes { margin-top: 4px; font-size: 12.5px; color: var(--mid); } /* -------------------------------------------------------------------------- Dashboard (Workstream E) -------------------------------------------------------------------------- */ .dash2 { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px); } /* Signed-out prompt */ .dash-guest { max-width: 560px; margin-inline: auto; text-align: center; padding-block: clamp(40px, 8vw, 88px); } .dash-guest[hidden] { display: none; } .dash-guest .micro { display: block; margin-bottom: 14px; } .dash-guest-title { font-size: clamp(32px, 6vw, 52px); } .dash-guest-lede { margin: 16px auto 0; max-width: 44ch; color: var(--mid); font-size: 16px; } .dash-guest-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .dash-main[hidden] { display: none; } .dash-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: clamp(24px, 4vw, 36px); border-bottom: 1px solid var(--hairline); } .dash-top-copy .micro { display: block; margin-bottom: 12px; } .dash2-title { font-size: clamp(34px, 6vw, 54px); } .dash2-title em { font-style: italic; font-weight: 420; } .dash2-shop { margin-top: 10px; font-size: 15px; color: var(--mid); } .dash2-shop strong { color: var(--ink); font-weight: 600; } .dash2-shop[hidden] { display: none; } /* Role segmented toggle */ .dash-seg-wrap { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--hairline); border-radius: 999px; } .dash-seg-wrap[hidden] { display: none; } .dash-seg { min-height: 38px; padding: 8px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--mid); transition: background 0.18s, color 0.18s; } .dash-seg.is-active { background: var(--ink); color: var(--paper); } .dash-panel { margin-top: clamp(28px, 4vw, 40px); } .dash-panel[hidden] { display: none; } /* Customer-only card */ .dash-empty-card { max-width: 620px; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .dash-empty-card .micro { display: block; margin-bottom: 12px; } .dash-empty-title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.1; } .dash-empty-lede { margin-top: 12px; font-size: 15px; color: var(--mid); max-width: 46ch; } .dash-empty-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .dash-upsell-line { margin-top: 20px; font-size: 13.5px; color: var(--mid); } .dash-upsell-line a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Analytics stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: clamp(24px, 4vw, 36px); } .stat-tile { display: flex; flex-direction: column; gap: 3px; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .stat-value { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); line-height: 1; } .stat-label { margin-top: 8px; font-size: 13px; font-weight: 600; } .stat-note { font-size: 12px; color: var(--mid); } /* Two-column layout (manager + subscription) */ .dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(18px, 3vw, 32px); align-items: start; } .dash-col-main { display: grid; gap: clamp(18px, 3vw, 28px); min-width: 0; } .dash-col-side { position: sticky; top: 88px; } .dash-block { padding: clamp(18px, 2.5vw, 26px); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .dash-panel > .dash-block { margin-bottom: clamp(18px, 3vw, 28px); } .dash-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .dash-block-title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; } .dash-block-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); } /* Portfolio / listings manager grid */ .manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } .manage-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4 / 5; border: 1.5px dashed var(--hairline); border-radius: var(--radius); color: var(--mid); font-size: 13px; font-weight: 600; transition: border-color 0.18s, color 0.18s, background 0.18s; } .manage-add:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-raised); } .manage-add-plus { font-family: var(--serif); font-size: 30px; line-height: 1; } .manage-card { position: relative; animation: reveal-up 0.35s var(--ease-out) both; } .manage-card.is-fresh .manage-media { border: 1px solid var(--ink); } .manage-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-raised); } .manage-media img { width: 100%; height: 100%; object-fit: cover; } .manage-remove { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity 0.18s, transform 0.2s var(--ease-out), background 0.18s, color 0.18s; } .manage-card:hover .manage-remove, .manage-remove:focus-visible { opacity: 1; transform: translateY(0); } .manage-remove:hover { background: var(--ink); color: var(--paper); } .manage-remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .manage-cap { display: grid; gap: 1px; margin-top: 8px; } .manage-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .manage-price { font-size: 14px; font-weight: 600; } .manage-price small { font-weight: 400; color: var(--mid); } .manage-name { font-size: 13px; color: var(--ink-soft); line-height: 1.25; } /* Enquiries */ .enq-list { display: grid; gap: 4px; } .enq { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hairline); } .enq:first-child { border-top: 0; padding-top: 0; } .enq-avatar { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-raised); font-family: var(--serif); font-size: 16px; font-weight: 500; } .enq-body { flex: 1 1 auto; min-width: 0; } .enq-meta { font-size: 13px; } .enq-meta strong { font-weight: 600; } .enq-meta span { margin-left: 8px; color: var(--mid); font-size: 12px; } .enq-msg { margin-top: 2px; font-size: 14px; color: var(--ink-soft); } .enq-reply { flex: none; align-self: center; min-height: 36px; padding: 7px 16px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; font-weight: 600; transition: border-color 0.18s, background 0.18s, color 0.18s; } .enq-reply:hover { border-color: var(--ink); } .enq-reply.is-replied { color: var(--mid); border-color: var(--hairline); cursor: default; } /* Settings form */ .dash-settings { display: grid; gap: 16px; max-width: 460px; } .dash-spec-chips { flex-wrap: wrap; overflow: visible; } /* Subscription card — ink meter, never gold */ .sub-card { padding: clamp(20px, 2.5vw, 26px); } .sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .sub-head .micro { margin: 0; } .sub-plan { padding: 4px 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .sub-body[hidden], .sub-teaser[hidden] { display: none; } .sub-title { font-family: var(--serif); font-weight: 500; font-size: 20px; } .sub-meter { height: 8px; margin-top: 12px; border-radius: 999px; background: var(--paper-raised); overflow: hidden; } .sub-meter-bar { height: 100%; border-radius: 999px; background: var(--ink); transition: width 0.4s var(--ease-out); } .sub-count { margin-top: 10px; font-size: 14px; } .sub-count strong { font-family: var(--serif); font-weight: 500; } .sub-note { margin-top: 8px; font-size: 13px; color: var(--mid); } .sub-upgrade { width: 100%; margin-top: 18px; } .sub-teaser .micro { display: block; margin-bottom: 8px; } .sub-price { font-size: 15px; color: var(--mid); } .sub-price strong { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--ink); margin-right: 4px; } .sub-list { list-style: none; display: grid; gap: 8px; margin-top: 16px; } .sub-list li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--ink-soft); } .sub-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); } .sub-teaser .btn { width: 100%; margin-top: 18px; } .sub-fineprint { margin-top: 14px; font-size: 12px; color: var(--mid); } /* Listing add form */ .listing-add { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; } .listing-add .btn { min-height: 48px; } /* -------------------------------------------------------------------------- Account — the Closet (Workstream F) -------------------------------------------------------------------------- */ .closet-head { margin-top: 18px; max-width: 620px; } .closet-head .micro { display: block; margin-bottom: 10px; } .closet-title { font-size: clamp(32px, 5vw, 52px); } .closet-lede { margin-top: 12px; font-size: 15px; color: var(--mid); } .closet-tabs { display: flex; gap: 6px; margin-top: clamp(24px, 4vw, 36px); margin-bottom: clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--hairline); } .closet-tab { position: relative; padding: 12px 4px; margin-right: 20px; font-size: 15px; font-weight: 500; color: var(--mid); transition: color 0.18s; } .closet-tab:hover { color: var(--ink); } .closet-tab.is-active { color: var(--ink); } .closet-tab::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; border-bottom: 2px solid var(--ink); transition: right 0.25s var(--ease-out); } .closet-tab.is-active::after { right: 0; } .closet-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--paper-raised); font-size: 11px; font-weight: 600; color: var(--ink-soft); vertical-align: middle; } .closet-tab.is-active .closet-count { background: var(--ink); color: var(--paper); } .closet-panel[hidden] { display: none; } .closet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 14px; } .closet-grid .rail-card { width: auto; } .closet-item[hidden] { display: none; } .closet-empty { padding: clamp(36px, 6vw, 64px) 24px; border: 1px dashed var(--hairline); border-radius: var(--radius); text-align: center; } .closet-empty[hidden] { display: none; } .closet-empty-line { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.1; } .closet-empty-sub { margin-top: 8px; font-size: 14.5px; color: var(--mid); max-width: 40ch; margin-inline: auto; } .closet-empty .btn { margin-top: 20px; } .closet-section { margin-top: clamp(44px, 6vw, 68px); } .closet-prefs-filled[hidden], .closet-prefs-empty[hidden] { display: none; } .closet-pref-rows { display: grid; gap: 14px; } .closet-pref-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); margin-bottom: 6px; } .closet-pref-val { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .closet-redo { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .closet-redo:hover .arrow { transform: translateX(4px); } .closet-prefs-empty .closet-empty-sub { margin-inline: 0; } .closet-prefs-empty .btn { margin-top: 16px; } .closet-entries-grid[hidden] { display: none; } .closet-entry { cursor: default; } .closet-entries-empty[hidden] { display: none; } .closet-entries-empty .closet-empty-sub { margin-inline: 0; } .closet-entries-empty .btn { margin-top: 16px; } /* -------------------------------------------------------------------------- Static pages — About / Community rules / Contact / Advertise -------------------------------------------------------------------------- */ .doc { padding-block: clamp(40px, 6vw, 72px) clamp(52px, 8vw, 88px); } .doc-shell { max-width: 760px; } .doc .micro { display: block; margin-bottom: 14px; } .doc-title { font-size: clamp(34px, 6vw, 56px); } .doc-lede { margin-top: 16px; font-size: 17px; color: var(--ink-soft); max-width: 58ch; } .doc-worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(28px, 4vw, 40px); } .doc-world { display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); transition: border-color 0.2s, transform 0.2s var(--ease-out); } .doc-world:hover { border-color: var(--ink); transform: translateY(-1px); } .doc-world-num { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--mid); } .doc-world-name { font-family: var(--serif); font-size: 20px; font-weight: 500; } .doc-world-desc { margin-top: 4px; font-size: 13.5px; color: var(--mid); } .doc-body { margin-top: clamp(36px, 5vw, 56px); max-width: 62ch; } .doc-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3vw, 28px); line-height: 1.15; margin-top: 32px; margin-bottom: 10px; } .doc-body p { font-size: 15.5px; color: var(--ink-soft); } .doc-foot { margin-top: clamp(32px, 5vw, 48px); font-size: 14px; color: var(--mid); } .doc-foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .doc-rules { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 4px; } .doc-rule { padding: 22px 0; border-top: 1px solid var(--hairline); } .doc-rule:first-child { border-top: 0; padding-top: 0; } .doc-rule-title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; margin-bottom: 6px; } .doc-rule p { font-size: 15px; color: var(--ink-soft); max-width: 62ch; } /* 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 box shows a moving shimmer so people can see something is on the way; the photo paints over it on arrival. Already-cached images and no-JS visits are never tagged — they rest visible. -------------------------------------------------------------------------- */ img.img-loading { background-color: var(--hairline); background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 70% ); background-repeat: no-repeat; background-size: 200% 100%; background-position: 180% 0; animation: img-shimmer 1.25s ease-in-out infinite; } /* Photo has arrived — stop the shimmer and let the pixels show. */ img.img-loading.img-loaded { background-image: none; animation: none; transition: opacity 0.4s var(--ease-out); } @keyframes img-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } } /* Reduced motion: keep the skeleton tint, drop the sweep. */ @media (prefers-reduced-motion: reduce) { img.img-loading { animation: none; background-image: none; } } /* -------------------------------------------------------------------------- Filter chip icons — monochrome line glyphs from _chip_icon.html. Same icon language as the rest of the site: stroke on currentColor, round caps. Never emoji, never colored, never a second style. -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 7px; } .chip-glyph { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: opacity 0.15s; } .chip:hover .chip-glyph, .chip.is-active .chip-glyph { opacity: 1; } /* -------------------------------------------------------------------------- Small refinements -------------------------------------------------------------------------- */ .lightbox-img { animation: reveal-up 0.3s var(--ease-out); } .world-toolbar { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } /* Dynamic viewport units where mobile browser chrome eats 100vh (browsers without dvh keep the vh values set earlier) */ .composer-panel { max-height: 92dvh; } .lightbox-img { max-height: 86dvh; } /* -------------------------------------------------------------------------- Mobile first — most REEGo users are on phones -------------------------------------------------------------------------- */ @media (max-width: 760px) { /* iOS zooms into any focused field under 16px */ .field-input, .search-bar input, .search-scope { font-size: 16px; } /* Touch targets: nothing interactive below ~36px on phones */ .chip { min-height: 38px; padding-block: 9px; } .save-btn, .fav-btn { width: 38px; height: 38px; } .manage-remove { width: 36px; height: 36px; } } /* ================================================================ The pitch deck (/pitch/) — full-screen ink takeover, 8 slides ================================================================ */ .is-pitch { background: var(--ink); } .is-pitch .site-header, .is-pitch .site-footer { display: none; } .pitch-deck { position: fixed; inset: 0; background: var(--ink); color: var(--paper); overflow: hidden; } .pitch-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(250, 249, 246, 0.12); z-index: 3; } .pitch-progress-fill { display: block; height: 100%; width: 12.5%; background: var(--gold); transition: width 0.45s var(--ease-out); } .pitch-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: 72px 110px; padding-inline: max(var(--gutter), calc((100vw - 1060px) / 2)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s; } .pitch-slide.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease-out) 0.12s, transform 0.5s var(--ease-out) 0.12s, visibility 0s; } .pitch-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 22px; } .pitch-title { font-family: var(--serif); font-weight: 420; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.01em; max-width: 18em; } .pitch-title em { font-style: italic; } .pitch-gold { color: var(--gold); } .pitch-wordmark { font-family: var(--serif); font-weight: 560; font-size: clamp(72px, 13vw, 150px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 26px; } .pitch-wordmark .wordmark-ree { color: var(--paper); } .pitch-wordmark .wordmark-go { color: var(--gold); font-style: italic; } .pitch-wordmark-close { font-size: clamp(56px, 9vw, 104px); } .pitch-lede { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; color: rgba(250, 249, 246, 0.78); max-width: 34em; margin-top: 24px; } .pitch-lede-title { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; color: rgba(250, 249, 246, 0.9); margin-top: 0; } .pitch-lede-title em { color: var(--gold); } .pitch-note { font-size: 14px; color: rgba(250, 249, 246, 0.55); margin-top: 30px; max-width: 46em; } .pitch-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 44px; } .pitch-half h3, .pitch-cell h3 { font-family: var(--serif); font-weight: 480; font-size: 21px; margin-bottom: 10px; } .pitch-half p, .pitch-cell p { font-size: 15px; line-height: 1.6; color: rgba(250, 249, 246, 0.66); } .pitch-steps { list-style: none; margin-top: 40px; width: 100%; max-width: 760px; } .pitch-steps li { display: flex; align-items: baseline; gap: 20px; padding-block: 16px; border-top: 1px solid rgba(250, 249, 246, 0.14); font-family: var(--serif); font-size: clamp(17px, 2vw, 22px); line-height: 1.35; } .pitch-steps li:last-child { border-bottom: 1px solid rgba(250, 249, 246, 0.14); } .pitch-num { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); flex-shrink: 0; } .pitch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; width: 100%; } .pitch-grid-3 { grid-template-columns: 1fr 1fr 1fr; } .pitch-cell { border: 1px solid rgba(250, 249, 246, 0.16); border-radius: var(--radius); padding: 22px 24px; } .pitch-cell h3 { display: flex; align-items: center; gap: 8px; } .pitch-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: 14px 28px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .pitch-cta:hover { background: #d09a3a; transform: translateY(-1px); } .pitch-controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; padding-inline: max(var(--gutter), calc((100vw - 1060px) / 2)); z-index: 2; } .pitch-counter, .pitch-hint { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(250, 249, 246, 0.55); } .pitch-counter [data-pitch-count] { color: var(--paper); } .pitch-buttons { display: flex; gap: 10px; } .pitch-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(250, 249, 246, 0.3); background: transparent; color: var(--paper); font-size: 17px; cursor: pointer; transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); } .pitch-btn:hover { border-color: var(--gold); color: var(--gold); } .pitch-exit { position: absolute; top: 18px; right: var(--gutter); z-index: 2; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(250, 249, 246, 0.55); text-decoration: none; } .pitch-exit:hover { color: var(--paper); } @media (max-width: 720px) { .pitch-slide { justify-content: flex-start; padding-top: 84px; padding-bottom: 120px; } .pitch-split, .pitch-grid, .pitch-grid-3 { grid-template-columns: 1fr; } .pitch-hint { display: none; } } /* ========================================================================== WEDGE DEMO — the referral-engine entry product (/wedge/ only) Appended, additive-only; nothing above this line changes. These classes serve the /wedge/ screens exclusively (REEGO_WEDGE_DEMO_PLAN.md). Tokens only, one easing, hairline borders, radius + shadow tokens only. Gold appears as: the monthly recap banner, the live badge, and the current step in a job timeline. Everything else stays monochrome. ========================================================================== */ /* ---- trust line: "37 jobs · 94% on time", computed from tracked jobs ---- */ .wedge-trust-line { color: var(--ink-soft); } .wedge-trust-line strong { color: var(--ink); font-weight: 600; } .wedge-trust-line, .wedge-job-price, .wedge-recap-nums, .wedge-measure dd { font-variant-numeric: tabular-nums lining-nums; } /* ---- verified-commission badge: quiet, monochrome, glyph-led ---- */ .wedge-verified { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .wedge-verified svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .wedge-portfolio-cell { position: relative; } .wedge-verified-float { position: absolute; left: 10px; bottom: 10px; box-shadow: var(--shadow-soft); /* floats over the photo */ } .wedge-verified-note, .wedge-poster-line, .wedge-ledger-note { margin-top: 10px; font-size: 13px; color: var(--mid); } .wedge-ledger-note a { color: var(--ink); } /* ---- tagged-designer chip: "Made by …" with avatar ---- */ .wedge-made-by { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease-out); } .wedge-made-by:hover { border-color: var(--ink); } .wedge-made-by img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .wedge-made-by > span:not(.wedge-verified) { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wedge-made-by strong { font-size: 14px; font-weight: 600; } .wedge-made-by small { font-size: 12px; color: var(--mid); } .wedge-made-by .wedge-verified { margin-left: auto; } .wedge-request-source img { border-radius: var(--radius-sm); } .wedge-request-cta { margin-top: 18px; } /* ---- request flow scaffold ---- */ .wedge-request-sub { margin-top: 6px; font-size: 13px; color: var(--mid); } .wedge-step-label { display: block; margin-top: 26px; color: var(--mid); } .wedge-form-intro { margin-top: 8px; font-size: 13px; color: var(--ink-soft); } .wedge-optional { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--mid); } /* ---- reviews scoped to fit + deadline ---- */ .wedge-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } .wedge-review { margin: 0; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-review-scope { color: var(--mid); } .wedge-review-text { margin-top: 8px; font-family: var(--serif); font-size: 17px; line-height: 1.35; } .wedge-review-meta { margin-top: 10px; font-size: 12px; color: var(--mid); } /* ---- job timeline (buyer tracking + studio job detail) ---- */ .wedge-timeline { list-style: none; margin: 18px 0 0; padding: 0; } .wedge-step { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--mid); } .wedge-step:last-child { border-bottom: 1px solid var(--hairline); } .wedge-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--paper); flex-shrink: 0; } .wedge-step.is-done { color: var(--ink-soft); } .wedge-step.is-done .wedge-step-dot { background: var(--ink); border-color: var(--ink); } .wedge-step.is-current { color: var(--ink); font-weight: 600; } .wedge-step.is-current .wedge-step-dot { background: var(--gold); /* the small "something is happening" indicator */ border-color: var(--gold); } .wedge-step-now { margin-left: auto; color: var(--mid); } /* ---- buyer tracking page ---- */ .wedge-track-shell { padding-block: 12px 40px; } .wedge-track-title { margin-top: 10px; font-size: clamp(30px, 5vw, 46px); } .wedge-track-meta { margin-top: 10px; color: var(--ink-soft); } .wedge-track-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; } .wedge-track-delivery .wedge-step.is-current .wedge-step-dot { background: var(--gold); } .wedge-track-band { margin-top: 44px; } /* ---- for-designers: the loop + pitch blocks + pricing ---- */ .wedge-loop { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; } .wedge-loop-step { padding: 20px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-loop-title { margin-top: 10px; font-family: var(--serif); font-size: 20px; font-weight: 520; line-height: 1.15; } .wedge-loop-text { margin-top: 8px; font-size: 14px; color: var(--ink-soft); } .wedge-pitch-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); } .wedge-pitch-title { margin-top: 10px; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; line-height: 1.1; } .wedge-pitch-text { margin-top: 10px; font-size: 14px; color: var(--ink-soft); } .wedge-pricing-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .wedge-pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .wedge-price-card { padding: 22px 24px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-price-card-main { border-color: var(--ink); } .wedge-price { margin-top: 10px; font-family: var(--serif); font-size: 30px; font-weight: 520; font-variant-numeric: tabular-nums lining-nums; } .wedge-price small { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--mid); } .wedge-price-lines { list-style: none; margin: 14px 0 0; padding: 0; } .wedge-price-lines li { padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-soft); } .wedge-price-card [data-wedge-trial-off], .wedge-price-card [data-wedge-trial-state] { margin-top: 16px; } .wedge-price-note { margin-top: 10px; font-size: 12px; color: var(--mid); } .wedge-price-note a { color: var(--ink); } /* ---- the monthly recap: the one gold banner ---- */ .wedge-recap { margin-block: 10px 26px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: var(--gold); color: var(--ink); } .wedge-recap .micro { color: rgba(18, 18, 18, 0.62); } .wedge-recap-headline { margin-top: 12px; font-family: var(--serif); font-size: clamp(24px, 3.4vw, 38px); font-weight: 520; line-height: 1.08; max-width: 22ch; } .wedge-recap-sub { margin-top: 10px; font-size: 14px; color: rgba(18, 18, 18, 0.78); } .wedge-recap-list { list-style: none; margin: 20px 0 0; padding: 0; } .wedge-recap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(18, 18, 18, 0.18); font-size: 14px; } .wedge-recap-look { font-weight: 600; } .wedge-recap-look a { color: inherit; } .wedge-recap-look small { font-weight: 400; color: rgba(18, 18, 18, 0.65); } .wedge-recap-nums { white-space: nowrap; color: rgba(18, 18, 18, 0.82); } /* ---- the Studio: enquiries, jobs board, tools ---- */ .wedge-enq-source { margin-top: 4px; font-size: 12px; color: var(--mid); } .wedge-enq-source a { color: var(--ink); } .wedge-job-list, .wedge-client-orders { list-style: none; margin: 0; padding: 0; } .wedge-job-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: color 0.2s var(--ease-out); } .wedge-job-list li:last-child .wedge-job-row, .wedge-client-orders li:last-child .wedge-job-row { border-bottom: 1px solid var(--hairline); } .wedge-job-code { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--mid); flex-shrink: 0; } .wedge-job-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .wedge-job-main strong { font-size: 14px; font-weight: 600; } .wedge-job-main small { font-size: 12px; color: var(--mid); } .wedge-job-price { font-size: 13px; font-weight: 600; white-space: nowrap; } .wedge-status { padding: 3px 11px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; flex-shrink: 0; } .wedge-status-ready { background: var(--ink); border-color: var(--ink); color: var(--paper); } .wedge-status-delivery { border-color: var(--ink); color: var(--ink); } .wedge-status-delivered { color: var(--mid); } .wedge-status-updater { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .wedge-tool-links { display: flex; flex-direction: column; } .wedge-tool-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); } .wedge-tool-links a:first-child { border-top: 0; padding-top: 4px; } .wedge-tool-links a:hover .arrow { transform: translateX(3px); } .wedge-tool-links .arrow { transition: transform 0.2s var(--ease-out); } /* ---- client book ---- */ .wedge-client-list { display: flex; flex-direction: column; gap: 18px; } .wedge-client-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 3vw, 40px); margin-top: 14px; } .wedge-measure-list { margin: 10px 0 0; } .wedge-measure { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hairline); } .wedge-measure dt { font-size: 13px; color: var(--mid); } .wedge-measure dd { margin: 0; font-size: 13px; font-weight: 600; } .wedge-notes-label { display: block; margin-top: 18px; } .wedge-client-notes { margin-top: 8px; font-size: 13px; color: var(--ink-soft); } /* ---- measurement form editor scaffold ---- */ .wedge-form-kinds { margin-block: 4px 22px; } .wedge-form-kinds .chip { text-decoration: none; } .wedge-field-list { list-style: none; margin: 0; padding: 0; } .wedge-field-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline); } .wedge-field-row:last-child { border-bottom: 1px solid var(--hairline); } .wedge-field-order { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--mid); flex-shrink: 0; font-variant-numeric: tabular-nums lining-nums; } .wedge-field-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .wedge-field-main strong { font-size: 14px; font-weight: 600; } .wedge-field-main small { font-size: 12px; color: var(--mid); } .wedge-field-req { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); white-space: nowrap; } /* ---- wedge responsive: the 960 / 760 / 560 breakpoints only ---- */ @media (max-width: 960px) { .wedge-reviews, .wedge-pitch-blocks { grid-template-columns: 1fr; gap: 14px; } .wedge-pricing-row { grid-template-columns: 1fr; } } @media (max-width: 760px) { .wedge-track-cols { grid-template-columns: 1fr; gap: 28px; } .wedge-loop { grid-template-columns: 1fr; } .wedge-pricing-cards { grid-template-columns: 1fr; } .wedge-client-cols { grid-template-columns: 1fr; } } @media (max-width: 560px) { .wedge-job-price { display: none; } .wedge-recap-row { flex-direction: column; gap: 2px; } .wedge-made-by .wedge-verified { display: none; } } /* ---- W2 · buyer surfaces ------------------------------------------------ */ /* Home hero: the referral moment itself — copy left, a tagged look right */ .wedge-hero { padding-block: clamp(36px, 6vw, 72px) clamp(10px, 2vw, 24px); } .wedge-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .wedge-hero-copy .micro { display: block; margin-bottom: 12px; color: var(--mid); } .wedge-hero-title { font-size: clamp(42px, 6vw, 68px); } .wedge-hero-sub { margin-top: 16px; max-width: 46ch; font-size: 16px; color: var(--ink-soft); } .wedge-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .wedge-hero-card { position: relative; display: block; max-width: 460px; justify-self: end; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); } .wedge-hero-card > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s var(--ease-out); } .wedge-hero-card:hover > img { transform: scale(1.03); } /* Media plate for the hero card (the shared plate list sits outside the wedge section, so the rule is mirrored here). */ .wedge-hero-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(18, 18, 18, 0.06); border-radius: inherit; pointer-events: none; } .wedge-hero-card .designer-profile-chip { top: auto; bottom: 12px; } .wedge-hero-card .wedge-verified-float { top: 12px; left: 12px; bottom: auto; } /* Tagged-designer chip as a link (looks feed): floats above the card's cover link, so the name is tappable on its own */ a.designer-profile-chip { text-decoration: none; color: inherit; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } a.designer-profile-chip:hover, a.designer-profile-chip:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow); } /* Mini chip on rail look cards: the name travels with the look everywhere */ .wedge-rail-chip { gap: 7px; padding: 5px 9px 5px 5px; max-width: calc(100% - 20px); } .wedge-rail-chip img { width: 26px; height: 26px; } .wedge-rail-chip strong { font-size: 11.5px; } /* New on REEGo — the day-1 state: never a zero ledger */ .wedge-new-badge, .wedge-scout-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-deep); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .wedge-trust-line .wedge-new-badge { margin-right: 6px; vertical-align: 1px; } .wedge-trust-line-new { display: inline-flex; align-items: center; } .wedge-new-state { margin-top: 18px; } .wedge-new-line { margin-top: 10px; font-size: 14px; color: var(--ink-soft); } /* Ledger evidence: every stat taps through to the record behind it */ a.profile-stat { color: var(--ink-soft); } .wedge-stat-link { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 5px; transition: color 0.15s, text-decoration-color 0.15s; } .wedge-stat-link:hover, .wedge-stat-link:focus-visible { color: var(--ink); text-decoration-color: var(--ink); } .wedge-ledger-state { flex: none; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; } .wedge-ledger-state.is-late { color: var(--mid); font-weight: 500; } /* Capacity: the availability line, with the small live indicator */ .wedge-capacity { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); } .wedge-capacity .live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; } /* Style scout: the poster's referral stat — social currency, not cash */ .wedge-scout { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-scout img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .wedge-scout p { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); } /* The trust legend: a tappable "?" beside verified badges */ .wedge-legend { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--mid); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; transition: color 0.15s, border-color 0.15s, transform 0.15s var(--ease-out); } .wedge-legend:hover, .wedge-legend:focus-visible { color: var(--ink); border-color: var(--ink); } .wedge-legend:active { transform: scale(0.94); } /* Portfolio cells double as lightbox buttons; the badge rides along */ .wedge-portfolio-cell { border: 0; text-align: inherit; } .wedge-portfolio-cell .wedge-verified-float { pointer-events: none; } .wedge-tile-row { flex-wrap: wrap; } .wedge-ledger .wedge-ledger-note { margin-bottom: 4px; } /* W2 responsive — the 960 / 760 / 560 breakpoints only */ @media (max-width: 960px) { .wedge-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr); } } @media (max-width: 760px) { .wedge-hero { padding-block: 28px 8px; } .wedge-hero-grid { grid-template-columns: 1fr; gap: 24px; } .wedge-hero-card { justify-self: start; max-width: 420px; } .wedge-legend { width: 36px; height: 36px; } /* touch target */ } @media (max-width: 560px) { .wedge-hero-title { font-size: 42px; } .wedge-hero-sub { font-size: 15px; } } /* ========================================================================== WEDGE DEMO — W3 · request flow + order tracking Appended additive-only. The 4-step request wizard reuses the onboarding stitch progress (.onb / .onb-node / .onb-step); these rules only add the pieces the wizard needs — the inspiration picker, the units toggle, the measurement + contact fields — plus the tracking page's unknown-code state. Tokens only; the one gold accent is the current step's dot, already defined. ========================================================================== */ /* Wizard field rhythm — onboarding used one field per step; the wizard stacks several, so the fields need their own vertical spacing. One column. */ .wedge-request-wizard .field { margin-top: 16px; } .wedge-field-note { margin-top: 8px; font-size: 12.5px; color: var(--mid); } /* Inspiration picker (step 2) */ .wedge-inspo-attached { margin-top: 20px; } .wedge-inspo-label { display: block; margin-top: 22px; margin-bottom: 12px; } .wedge-inspo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wedge-inspo { position: relative; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper-raised); overflow: hidden; cursor: pointer; transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out); } .wedge-inspo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .wedge-inspo:hover { border-color: var(--ink-soft); } .wedge-inspo:active { transform: scale(0.98); } .wedge-inspo.is-picked { border-color: var(--ink); } .wedge-inspo-check { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); opacity: 0; transform: scale(0.7); transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out); } .wedge-inspo.is-picked .wedge-inspo-check { opacity: 1; transform: scale(1); } .wedge-inspo-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .wedge-inspo-note { margin-top: 12px; font-size: 12.5px; color: var(--mid); } /* Measurement step controls: units toggle + "use my saved measurements" */ .wedge-measure-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .wedge-units { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; background: var(--surface); } .wedge-unit-btn { min-width: 46px; min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--mid); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.15s var(--ease-out); } .wedge-unit-btn.is-active { background: var(--ink); color: var(--paper); } .wedge-unit-btn:active { transform: scale(0.97); } .wedge-use-saved { color: var(--ink); } .wedge-measure-later { display: block; margin-top: 16px; color: var(--mid); } /* Confirmation extras (reuses .onb-final) */ .wedge-request-final .wedge-timeline { margin-top: 22px; } .wedge-final-note { margin-top: 18px; } /* Tracking — the unknown-code state: designed, never a dead end */ .wedge-track-missing { padding-block: 12px 40px; max-width: 560px; } .wedge-track-missing .onb-actions { margin-top: 24px; } @media (max-width: 560px) { .wedge-inspo-grid { gap: 8px; } .wedge-measure-controls { justify-content: flex-start; } } /* ========================================================================== WEDGE DEMO — W4 · the Studio (dashboard, client book, job detail) Appended additive-only. The designer's side of the wedge. Reuses the dashboard shell (.dash2 / .dash-cols / .dash-block / .stat-strip / .enq / .sub-card) and the wedge job/status/measure classes above. Gold shows only as: the recap banner (already defined), the trial live badge, the job timeline's current dot, and the "posted" confirmation badge — small accents, one banner. Everything else stays monochrome. Tokens only. ========================================================================== */ /* ---- Studio header + the recap's money-first hierarchy ---- */ .wedge-viewing { margin-top: 10px; font-size: 13px; color: var(--mid); } .wedge-recap-figure { margin-top: 14px; font-family: var(--serif); font-weight: 520; font-size: clamp(44px, 8vw, 76px); line-height: 0.98; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; } .wedge-recap-count { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink); } .wedge-recap-renew { margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; } /* ---- enquiries inbox: source tag, accept, and new (session) requests ---- */ .wedge-block-note { margin: 0 0 14px; font-size: 13px; color: var(--mid); } .wedge-enq-accept.is-done { color: var(--mid); border-color: var(--hairline); cursor: default; } .wedge-enq.is-accepted .enq-body { opacity: 0.55; } .wedge-enq-new { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 1px; } .wedge-enq-live { margin-bottom: 4px; } /* ---- jobs board grouped by status ---- */ .wedge-board { display: grid; gap: 22px; } .wedge-job-group-head { margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .wedge-job-group.is-empty { display: none; } .wedge-job-li { list-style: none; } .wedge-job-row-static { cursor: default; } .wedge-job-row-static:hover { color: inherit; } /* ---- Studio subscription card tweak ---- */ .sub-card .live-badge { margin-top: 4px; } .sub-card .live-badge + .sub-note { margin-top: 12px; } /* ---- client book: an expandable, searchable list (the daily-use tool) ---- */ .wedge-client-search { margin-block: 4px 18px; max-width: 420px; } .wedge-clients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .wedge-client-item { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color 0.2s var(--ease-out); } .wedge-client-item.is-open { border-color: var(--ink); } .wedge-client-summary { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; transition: background 0.18s var(--ease-out); } .wedge-client-summary:hover { background: var(--paper-raised); } .wedge-client-summary:active { transform: scale(0.996); } .wedge-client-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .wedge-client-id strong { font-size: 15px; font-weight: 600; } .wedge-client-id small { font-size: 12px; color: var(--mid); } .wedge-client-caret { display: inline-flex; flex: none; color: var(--mid); transition: transform 0.2s var(--ease-out); } .wedge-client-caret svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .wedge-client-summary[aria-expanded="true"] .wedge-client-caret { transform: rotate(180deg); } .wedge-client-detail { padding: 0 18px 18px; } .wedge-client-detail .wedge-client-cols { margin-top: 0; } .wedge-client-empty { margin-top: 18px; color: var(--mid); } /* ---- job detail: the courier quote, decline, and completion post ---- */ .wedge-quote { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-quote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .wedge-quote-name { font-size: 14px; font-weight: 600; } .wedge-quote-fee { font-family: var(--serif); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; } .wedge-quote-note { margin-top: 6px; font-size: 12.5px; color: var(--mid); } .wedge-track-delivery .btn { margin-top: 14px; } [data-wedge-complete] .btn { margin-top: 14px; } .wedge-posted-line { margin-top: 8px; } .wedge-decline-row { margin-top: 24px; } .wedge-decline { padding: 0; border: 0; background: none; color: var(--mid); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.15s; } .wedge-decline:hover { color: var(--ink); } .wedge-declined { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-declined .micro { display: block; margin-bottom: 6px; color: var(--mid); } .wedge-declined a { color: var(--ink); font-weight: 600; } /* ---- completion modal (reuses .composer) ---- */ .wedge-post-preview { margin-block: 4px 14px; border-radius: var(--radius-sm); overflow: hidden; } .wedge-post-preview img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 340px; object-fit: cover; } .wedge-post-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 3 / 2; border: 1px dashed var(--hairline); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--mid); font-size: 13px; } .wedge-post-photo-empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .wedge-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .wedge-post-tag { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } /* ---- W4 responsive: the 760 breakpoint only ---- */ @media (max-width: 760px) { .wedge-board { gap: 18px; } .wedge-client-summary { padding: 14px 15px; } .wedge-client-detail { padding: 0 15px 15px; } } /* ========================================================================== WEDGE DEMO — W5 · for-designers sales page + measurement form editor Appended additive-only. Screen 8 (the voice acceptance bar) and screen 12 (the form-engine demo). Reuses the sales blocks defined above (.wedge-loop-*, .wedge-pitch-*, .wedge-pricing-*, .wedge-recap, .wedge-price-*) and the dashboard shell (.dash2 / .dash-block / .field / .field-input). Gold stays inside its budget: the recap banner is the one gold moment; the trial live badge is the only small accent. Everything else is mono. Tokens, radius tokens and the two shadow tokens only; static content here carries no shadow. ========================================================= */ /* ---- the referral loop, drawn (screen 8) ---- */ .wedge-flow { display: flex; align-items: stretch; gap: 10px; margin-top: 4px; } .wedge-flow-node { flex: 1 1 0; min-width: 0; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-flow-node .micro { color: var(--mid); } .wedge-flow-title { margin-top: 10px; font-family: var(--serif); font-size: 19px; font-weight: 520; line-height: 1.14; } .wedge-flow-text { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); } .wedge-flow-arrow { align-self: center; flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--mid); } .wedge-flow-loop { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--mid); } .wedge-flow-loop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ---- feature rows: pitch copy beside a monochrome proof card ---- */ .wedge-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; } .wedge-feature-flip .wedge-feature-copy { order: 2; } .wedge-feature-flip .wedge-proof { order: 1; } .wedge-feature-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); } .wedge-feature-note strong { color: var(--ink); font-weight: 600; } .wedge-proof { padding: 22px 24px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .wedge-proof-stat { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; } .wedge-proof-since { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); white-space: nowrap; } .wedge-proof-sub { margin-top: 6px; font-size: 12px; color: var(--mid); } .wedge-proof-list { list-style: none; margin: 14px 0 0; padding: 0; } .wedge-proof-list li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--hairline); } .wedge-proof-code { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--mid); font-variant-numeric: tabular-nums lining-nums; } .wedge-proof-title { font-size: 13.5px; font-weight: 600; } .wedge-proof-when { grid-column: 2; font-size: 12px; color: var(--mid); } .wedge-proof-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; } .wedge-proof-link .arrow { transition: transform 0.2s var(--ease-out); } .wedge-proof-link:hover .arrow { transform: translateX(3px); } /* ---- client book preview (screen 8) ---- */ .wedge-client-preview { list-style: none; margin: 12px 0 0; padding: 0; } .wedge-client-preview li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); } .wedge-client-preview-avatar { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper-raised); font-size: 13px; font-weight: 600; color: var(--ink-soft); } .wedge-client-preview-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wedge-client-preview-main strong { font-size: 14px; font-weight: 600; } .wedge-client-preview-main small { font-size: 12px; color: var(--mid); } /* ---- the 0% promise, given its own room (monochrome by design) ---- */ .wedge-zero { text-align: center; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-zero-line { font-family: var(--serif); font-size: clamp(28px, 5vw, 50px); font-weight: 520; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; } .wedge-zero-num { font-variant-numeric: tabular-nums lining-nums; } .wedge-zero-sub { margin: 16px auto 0; max-width: 48ch; font-size: 15px; color: var(--ink-soft); } /* ---- pricing flag: monochrome ribbon on the default tier ---- */ .wedge-price-flag { display: inline-block; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* ========================================================================== Measurement form editor (screen 12) The field list and the preview are both rendered by reego.js from the field defs — this CSS only dresses the containers and controls. ========================================================================== */ .wedge-form-editor { align-items: start; } /* field rows carry controls on the right; reuses .wedge-field-row/.wedge-field-order */ .wedge-field-list .wedge-field-main small { text-transform: none; letter-spacing: 0; } .wedge-field-controls { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .wedge-field-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.15s var(--ease-out); } .wedge-field-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .wedge-field-btn:hover { border-color: var(--ink); } .wedge-field-btn:active { transform: scale(0.94); } .wedge-field-btn:disabled { color: var(--hairline); cursor: not-allowed; } .wedge-field-btn:disabled:hover { border-color: var(--hairline); } .wedge-field-empty { padding: 22px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: 13px; color: var(--mid); } /* add-a-field controls */ .wedge-field-add { margin-top: 22px; padding: 20px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper-raised); } .wedge-field-add > .micro { display: block; margin-bottom: 12px; color: var(--mid); } .wedge-field-add-grid { display: grid; grid-template-columns: 1fr 150px; gap: 12px; } .wedge-field-add-options { margin-top: 12px; } .wedge-field-add-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; } .wedge-check { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; } .wedge-check input { width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; } .wedge-form-editor-foot { margin-top: 18px; } .wedge-preview-empty { margin: 0; font-size: 13px; color: var(--mid); } .wedge-form-preview .wedge-preview-send { margin-top: 4px; } /* ---- W5 responsive: 960 / 760 only ---- */ @media (max-width: 960px) { .wedge-feature { grid-template-columns: 1fr; gap: 22px; } .wedge-feature-flip .wedge-feature-copy { order: 1; } .wedge-feature-flip .wedge-proof { order: 2; } } @media (max-width: 760px) { .wedge-flow { flex-direction: column; gap: 8px; } .wedge-flow-arrow { transform: rotate(90deg); } .wedge-field-add-grid { grid-template-columns: 1fr; } } /* ========================================================================== WEDGE DEMO — W6 · mobile 360 pass Appended additive-only. Hardens the /wedge/ screens at the 360px design width: the thumbnail grid must be able to shrink below the photo's intrinsic width, and the standalone text-link controls are lifted to the 36px touch-target floor on phones. Existing 960 / 760 / 560 breakpoints only. Tokens only — no new colours, radii or shadows; nothing above this line changes. ========================================================== */ /* Inspiration picker: guarantee the three thumbnail tracks can shrink below their images' intrinsic width so a 360px screen never scrolls sideways. */ .wedge-inspo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Touch targets: standalone text-link controls (decline a job, the two measurement-step escape hatches, reset the form) sit under 36px as inline links. On phones give them the tap floor the manual requires; desktop keeps the quiet inline-link look. */ @media (max-width: 760px) { .wedge-decline, .wedge-use-saved, [data-wedge-form-reset] { display: inline-flex; align-items: center; min-height: 36px; } .wedge-measure-later { display: flex; align-items: center; min-height: 36px; } } /* ========================================================================== WEDGE DEMO — screens 13 + 14 (plan §8.2): the paywall + the enquiry thread Appended additive-only. Reuses the dashboard shell (.dash2 / .dash-block / .field / .ghs-input), the recap banner, the .composer modal, and the .btn / .wedge-verified / .wedge-made-by components. Gold stays where the law puts it: the recap banner (one per screen) and small live dots only — everything new here is monochrome, tokens only, 960/760/560 breakpoints. ========================================================================== */ /* ---- Screen 14: the enquiry thread ---- */ .wedge-thread { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .wedge-msg { max-width: 84%; display: flex; flex-direction: column; gap: 6px; } .wedge-msg-buyer { align-self: flex-start; align-items: flex-start; } .wedge-msg-designer { align-self: flex-end; align-items: flex-end; } .wedge-msg-meta { font-size: 12px; color: var(--mid); } .wedge-msg-meta strong { font-weight: 600; color: var(--ink); } .wedge-msg-meta span { margin-left: 6px; } .wedge-msg-text { margin: 0; padding: 12px 15px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); font-size: 14px; color: var(--ink-soft); } .wedge-msg-designer .wedge-msg-text { background: var(--ink); border-color: var(--ink); color: var(--paper); } .wedge-msg-attach { display: block; width: 148px; max-width: 62vw; } .wedge-msg-attach img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--hairline); } .wedge-msg-attach small { display: block; margin-top: 5px; font-size: 11px; color: var(--mid); } /* the quote composer + the accept + the now-a-job state */ .wedge-quote-card .wedge-field-spaced { margin-top: 12px; } .wedge-quote-send { width: 100%; margin-top: 16px; } .wedge-quote-accept { margin-top: 14px; } .wedge-quote-accept .micro { display: block; margin-bottom: 6px; } .wedge-quote-accept .btn { width: 100%; margin-top: 12px; } .wedge-quote-accept .link-btn { margin-top: 12px; } .wedge-quote-done { margin-top: 14px; } .wedge-quote-done .btn { width: 100%; margin-top: 12px; } [data-wedge-quote-shown], [data-wedge-quote-final] { font-variant-numeric: tabular-nums lining-nums; } /* the "open · quote" link the JS drops onto each Studio enquiry */ .wedge-enq-open { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; } .wedge-enq-open .arrow { transition: transform 0.2s var(--ease-out); } .wedge-enq-open:hover .arrow { transform: translateX(3px); } /* the "see plans" button the JS drops into the Studio subscription card */ .wedge-see-plans { width: 100%; margin-top: 14px; } /* ---- Screen 13: the paywall / conversion moment ---- */ .wedge-upgrade .wedge-recap { margin-top: 0; } .wedge-upgrade-choose { margin-top: 8px; } .wedge-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .wedge-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1.5px solid var(--hairline); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); } .wedge-plan:hover { border-color: var(--ink-soft); } .wedge-plan-radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .wedge-plan:has(.wedge-plan-radio:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06); } .wedge-plan:has(.wedge-plan-radio:focus-visible) { border-color: var(--ink); } .wedge-plan-flag { position: absolute; top: -10px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .wedge-plan-head { display: flex; flex-direction: column; gap: 4px; } .wedge-plan-price { font-family: var(--serif); font-size: 26px; font-weight: 520; font-variant-numeric: tabular-nums lining-nums; } .wedge-plan-price small { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--mid); } .wedge-plan-per { font-size: 12px; color: var(--mid); } .wedge-plan-note { font-size: 13px; color: var(--ink-soft); } .wedge-plan-tick { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--hairline); border-radius: 50%; color: var(--paper); opacity: 0; transition: opacity 0.18s var(--ease-out); } .wedge-plan-tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .wedge-plan:has(.wedge-plan-radio:checked) .wedge-plan-tick { opacity: 1; background: var(--ink); border-color: var(--ink); } .wedge-upgrade-keeps { margin-top: 22px; } .wedge-upgrade-pay { width: 100%; margin-top: 18px; } [data-wedge-pay-amount], [data-wedge-pay-sheet-amount], [data-wedge-pay-btn-amount] { font-variant-numeric: tabular-nums lining-nums; } .wedge-upgrade-done .wedge-pitch-title { margin-top: 12px; } .wedge-upgrade-done .enq-msg { margin-top: 8px; } .wedge-upgrade-done .onb-actions-final { margin-top: 20px; } .wedge-deactivate-list { list-style: none; margin: 8px 0 0; padding: 0; } .wedge-deactivate-list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--ink-soft); } .wedge-deactivate-list li:first-child { border-top: 0; } .wedge-deactivate-list li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; border: 1.5px solid var(--mid); border-radius: 50%; } /* the fake Paystack sheet */ .wedge-pay-panel { max-width: 360px; text-align: left; } .wedge-pay-amount { margin-top: 14px; font-family: var(--serif); font-weight: 520; font-size: 44px; line-height: 1; } .wedge-pay-plan { margin-top: 6px; font-size: 13px; color: var(--mid); } .wedge-pay-method { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .wedge-pay-method-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .wedge-pay-method-value { font-size: 13px; font-weight: 600; } .wedge-pay-confirm { width: 100%; margin-top: 18px; } .wedge-pay-note { margin-top: 12px; font-size: 12px; color: var(--mid); } @media (max-width: 560px) { .wedge-plans { grid-template-columns: 1fr; } .wedge-msg { max-width: 92%; } } /* ========================================================================== W7-0 — the owner console (DESIGN.md Workstream I · plan Phase 11) A working back office, held to the same manual as the shop window: two typefaces, the token palette, one accent. The accent budget for the whole console, spent deliberately: 1. the live dot in the top bar, 2. the live dot on the nav entry that has something waiting, 3. two `.live-badge` chips — "5 waiting" on moderation and the running A/B on billing. Nothing else here is gold. Status is carried by weight, fill and a word — never by colour, because a back office read on a phone in daylight has to survive without it. Density is the point: rows over cards where a list is long, hairlines over boxes, numbers set in tabular figures so a column of them lines up. 360px first; the nav is a scrolling rail on phones and a sidebar from 960px. ========================================================================== */ .console-body { --console-bar-h: 54px; background: var(--paper); } /* Panels, rows and the save bar are shown and hidden with the `hidden` attribute, so it has to beat the layout `display` on their own classes. Without JS every one of them rests in its resting state - closed panels stay closed, the save bar stays away, nothing is stranded invisible. */ .console-body [hidden] { display: none; } .console-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- top bar ----------------------------------------------------------- */ .console-bar { position: sticky; top: 0; z-index: 40; 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); } .console-bar-row { width: 100%; max-width: var(--shell); min-height: var(--console-bar-h); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 14px; } .console-brand { display: flex; align-items: center; } .console-brand .wordmark { font-size: 20px; } .console-brand-tag { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--hairline); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .console-bar-meta { display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--mid); } .console-live { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; } .console-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; } .console-bar-sep { color: var(--hairline); } .console-bar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; } .console-out { display: none; align-items: center; min-height: 36px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .console-out:hover { color: var(--ink); } .console-out:hover .arrow { transform: translateX(3px); } .console-who { display: inline-flex; align-items: center; gap: 8px; } .console-who-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: 14px; } .console-who-name { display: none; font-size: 13px; font-weight: 500; } /* ---- frame + nav ------------------------------------------------------- */ .console-frame { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: 64px; } .console-nav { position: sticky; top: var(--console-bar-h); z-index: 30; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--hairline); } .console-nav-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .console-nav-scroll::-webkit-scrollbar { display: none; } .console-nav-item { flex: none; min-height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease-out); } .console-nav-item:hover { border-color: var(--ink); } .console-nav-item:active { transform: scale(0.97); } .console-nav-item.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .console-nav-label { display: inline-flex; align-items: center; gap: 7px; } .console-nav-blurb { display: none; } /* the one "something is happening" dot the manual allows */ .console-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; } .console-main { padding-top: 22px; } .console-foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--mid); } .console-foot a { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; } /* ---- page head --------------------------------------------------------- */ .console-title { margin-top: 8px; font-size: clamp(28px, 7vw, 40px); } .console-lede { margin-top: 10px; max-width: 64ch; font-size: 14.5px; color: var(--ink-soft); } .console-badge-row { margin-top: 14px; } /* ---- the two containers: a bordered card, and a plain block ------------- */ .console-card { margin-top: 26px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .console-card-head { padding: 16px; border-bottom: 1px solid var(--hairline); } .console-card-title { margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; } .console-card-note { margin-top: 8px; max-width: 62ch; font-size: 12.5px; color: var(--mid); } .console-block { margin-top: 30px; } .console-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); } .console-block-title { font-family: var(--serif); font-weight: 500; font-size: 20px; } .console-block-meta { flex: 1 1 auto; max-width: 62ch; font-size: 12.5px; color: var(--mid); } .console-panel-note { margin-top: 12px; max-width: 66ch; font-size: 13px; color: var(--ink-soft); } .console-hint { margin-top: 10px; max-width: 66ch; font-size: 12.5px; color: var(--mid); } .console-empty { margin-top: 18px; padding: 26px 20px; border: 1px solid var(--hairline); border-radius: var(--radius); text-align: center; font-size: 13.5px; color: var(--mid); } /* Designed zero states (R1): every list renders its day-1 truth server-side, as an {% empty %} branch — no JS required. `is-row` sits inside a list that already carries the border. */ li.console-empty { list-style: none; } .console-empty.is-row { margin-top: 0; border: 0; border-radius: 0; } .console-empty-title { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); } .console-empty-sub { margin-top: 5px; font-size: 12.5px; color: var(--mid); } /* ---- the state pill: monochrome, the word carries the meaning ----------- */ .console-state { flex: none; display: inline-flex; align-items: center; padding: 4px 10px 4px 11px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); white-space: nowrap; } .console-state.is-met, .console-state.is-active { border-color: var(--ink); color: var(--ink); } .console-state.is-watch, .console-state.is-trialing, .console-state.is-free, .console-state.is-scheduled { border-color: var(--hairline); color: var(--mid); } .console-state.is-past_due, .console-state.is-live { border-color: var(--ink-soft); color: var(--ink-soft); } .console-state.is-lapsed, .console-state.is-ended, .console-state.is-used_up { background: var(--paper-raised); border-color: var(--paper-raised); color: var(--mid); } .console-state.is-fail { background: var(--ink); border-color: var(--ink); color: var(--paper); } .console-tag { display: inline-flex; align-items: center; padding: 3px 9px 3px 10px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } /* ---- the meter: one bar, one fill, no colour --------------------------- */ .console-meter { height: 6px; border-radius: 999px; background: var(--paper-raised); overflow: hidden; } .console-meter-fill { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: var(--ink); } /* ---- screen 1 · the pilot gates ---------------------------------------- */ .console-gates { margin-top: 22px; } .console-gate-list { list-style: none; } .console-gate { padding: 16px; border-top: 1px solid var(--hairline); } .console-gate:first-child { border-top: 0; } .console-gate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .console-gate-title { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.15; } .console-gate-where { margin-top: 3px; font-size: 12.5px; color: var(--mid); } .console-gate-figures { margin-top: 12px; display: grid; gap: 10px; } .console-gate-figure dd { margin-top: 3px; } .console-gate-now { font-size: 15px; font-weight: 600; } .console-gate-target { font-size: 13px; color: var(--ink-soft); } .console-gate .console-meter { margin-top: 14px; } .console-gate.is-watch .console-meter-fill { background: var(--ink-soft); } .console-gate.is-fail .console-meter-fill { background: var(--mid); } .console-gate-note { margin-top: 10px; font-size: 12.5px; color: var(--mid); } /* ---- screen 1 · the numbers -------------------------------------------- */ .console-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--hairline); overflow: hidden; } .console-stat { display: grid; align-content: start; gap: 2px; padding: 14px; background: var(--surface); } .console-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .console-stat-value { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 5vw, 30px); line-height: 1; } .console-stat-label { margin-top: 8px; font-size: 13px; font-weight: 600; } .console-stat-note { font-size: 12px; color: var(--mid); } /* ---- screen 1 · the series --------------------------------------------- */ .console-seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); } .console-seg-btn { min-height: 36px; padding: 0 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mid); transition: background 0.15s, color 0.15s, transform 0.15s var(--ease-out); } .console-seg-btn:hover { color: var(--ink); } .console-seg-btn:active { transform: scale(0.97); } .console-seg-btn.is-active { background: var(--ink); color: var(--paper); } .console-series { margin-top: 18px; display: grid; gap: 22px; } .console-series-caption { font-size: 12px; color: var(--mid); } .console-series-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .console-series-name { font-size: 13px; font-weight: 600; } .console-series-total { font-size: 12px; color: var(--mid); } .console-series-bars { margin-top: 10px; display: flex; align-items: stretch; gap: 6px; } /* the middle row is a fixed height on purpose: `height: var(--fill)` on the fill needs a definite containing block, and a 1fr row is not one */ .console-series-bar { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 68px auto; gap: 5px; } .console-series-bar-value { font-size: 10.5px; color: var(--mid); text-align: center; } .console-series-bar-fill { align-self: end; width: 100%; height: var(--fill, 0%); min-height: 2px; background: var(--ink); } .console-series-bar-label { font-size: 10px; color: var(--mid); text-align: center; white-space: nowrap; } /* ---- screen 1 · needs you ---------------------------------------------- */ .console-todo { list-style: none; } .console-todo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 0; border-top: 1px solid var(--hairline); } .console-todo-row:first-child { border-top: 0; } .console-todo-count { flex: none; min-width: 30px; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; } .console-todo-body { flex: 1 1 160px; min-width: 0; } .console-todo-text { display: block; font-size: 14px; font-weight: 500; } .console-todo-sub { display: block; font-size: 12.5px; color: var(--mid); } .console-todo-go { flex: none; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .console-todo-go:hover .arrow { transform: translateX(3px); } /* ---- toolbar, search, filter chips ------------------------------------- */ .console-toolbar { margin-top: 22px; display: grid; gap: 10px; } .console-search { position: relative; display: block; } .console-search-glyph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--mid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .console-search-input { padding-left: 42px; min-height: 46px; } .console-toolbar-note { font-size: 12.5px; color: var(--mid); } .console-chips { margin-top: 14px; } .console-chip-count { color: var(--mid); } .chip.is-active .console-chip-count { color: var(--hairline); } /* ---- screen 2 · the cohort book ---------------------------------------- */ .console-people { list-style: none; margin-top: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .console-person { border-top: 1px solid var(--hairline); } .console-person:first-child { border-top: 0; } .console-person.is-suspended { background: var(--paper-raised); } .console-person-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px; } .console-mark { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-raised); display: grid; place-items: center; font-family: var(--serif); font-size: 17px; color: var(--ink-soft); } .console-mark.is-small { width: 22px; height: 22px; font-size: 11px; } .console-person-id { flex: 1 1 170px; min-width: 0; } .console-person-name { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.15; } .console-person-line { margin-top: 3px; font-size: 13px; } .console-person-sub { margin-top: 2px; font-size: 12.5px; color: var(--mid); } .console-person-states { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; } .console-expand { flex: none; margin-left: auto; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 12.5px; font-weight: 600; transition: border-color 0.15s, transform 0.15s var(--ease-out); } .console-expand:hover { border-color: var(--ink); } .console-expand:active { transform: scale(0.97); } .console-expand-close { display: none; } .console-expand[aria-expanded="true"] .console-expand-open { display: none; } .console-expand[aria-expanded="true"] .console-expand-close { display: inline; } .console-expand-glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); } .console-expand[aria-expanded="true"] .console-expand-glyph { transform: rotate(180deg); } .console-person-panel { margin: 0 14px; padding: 14px 0 16px; border-top: 1px solid var(--hairline); } .console-facts { display: grid; gap: 12px; } .console-fact dd { margin-top: 4px; font-size: 13.5px; } .console-fact-sub { display: block; font-size: 12px; color: var(--mid); } .console-person-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; } .console-action { min-height: 38px; padding: 8px 16px; font-size: 13px; } .console-danger { border-color: var(--ink-soft); } .console-suspended { margin-top: 4px; padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .console-suspended-line { margin-top: 6px; font-size: 14px; font-weight: 600; } .console-suspended-note { margin-top: 4px; font-size: 13px; color: var(--ink-soft); } .console-suspended .console-action { margin-top: 12px; } /* the suspension flow — the reason is not optional, so the button waits */ .console-suspend { margin-top: 14px; padding: 16px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); } .console-suspend-title { font-family: var(--serif); font-weight: 500; font-size: 18px; } .console-suspend-head .console-hint { margin-top: 6px; } .console-reasons { border: 0; margin-top: 16px; display: grid; gap: 8px; } .console-reasons legend { margin-bottom: 8px; } .console-reason { display: flex; align-items: flex-start; gap: 11px; min-height: 44px; padding: 11px 13px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 0.15s; } .console-reason:hover { border-color: var(--ink-soft); } .console-reason:has(.console-reason-radio:checked) { border-color: var(--ink); } .console-reason-radio { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--ink); } .console-reason-body { display: grid; gap: 2px; } .console-reason-label { font-size: 13.5px; font-weight: 600; } .console-reason-help { font-size: 12.5px; color: var(--mid); } .console-suspend-note { margin-top: 16px; } .console-textarea { min-height: 88px; padding: 12px 14px; resize: vertical; } .console-suspend-note .console-hint { margin-top: 6px; } .console-notice { margin-top: 16px; padding: 14px; border-left: 2px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); } .console-notice-body { margin-top: 7px; font-size: 13.5px; color: var(--ink-soft); } .console-notice-body em { font-style: italic; color: var(--ink); } .console-suspend-guard { margin-top: 14px; } .console-suspend-guard.is-clear { color: var(--ink); } .console-suspend-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .console-suspend-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .console-suspend-actions .btn[disabled]:hover { transform: none; } /* ---- screen 3 · moderation --------------------------------------------- */ .console-tabs { margin-top: 22px; display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; } .console-tabs::-webkit-scrollbar { display: none; } .console-tab { flex: none; min-height: 44px; padding: 0 14px; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--mid); white-space: nowrap; transition: color 0.15s, border-color 0.15s; } .console-tab:hover { color: var(--ink); } .console-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); } .console-flags { list-style: none; margin-top: 16px; display: grid; gap: 12px; } .console-flag { padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .console-flag-row { display: flex; gap: 13px; } .console-flag-plate { position: relative; flex: none; width: 72px; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); background: var(--paper-raised); overflow: hidden; } /* the manual's media plate, restated locally rather than editing the shared polish selector list (board §3b: annotate in your own block) */ .console-flag-plate::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(18, 18, 18, 0.06); border-radius: inherit; pointer-events: none; } .console-flag-plate img { width: 100%; height: 100%; object-fit: cover; } .console-flag-plate.is-empty { display: grid; place-items: center; padding: 6px; text-align: center; } .console-flag-body { flex: 1; min-width: 0; } .console-flag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .console-flag-ref { font-size: 11.5px; color: var(--mid); } .console-flag-title { margin-top: 7px; font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.2; } .console-flag-poster { margin-top: 3px; font-size: 13px; } .console-flag-sub { margin-top: 2px; font-size: 12px; color: var(--mid); } .console-flag-note { margin-top: 8px; font-size: 13px; color: var(--ink-soft); } .console-flag-actions { margin-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .console-flag-hint { margin-top: 0; flex: 1 1 220px; } .console-quiet-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; min-width: 36px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; transition: color 0.15s; } .console-quiet-link:hover { color: var(--ink); text-decoration-color: var(--ink); } .console-quiet-link:hover .arrow { transform: translateX(3px); } .console-confirm { margin-top: 13px; padding: 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); } /* muted grey on the raised panels lands just under AA at this size, so the copy inside a confirm or suspend panel steps up to --ink-soft */ .console-confirm .console-hint, .console-suspend .console-hint { color: var(--ink-soft); } .console-confirm .console-hint { margin-top: 0; } .console-confirm-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } /* ---- screen 4 · plans, promos, the A/B --------------------------------- */ .console-plans { list-style: none; margin-top: 16px; display: grid; gap: 12px; } .console-plan { padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .console-plan.is-default { border-color: var(--ink); } .console-plan-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; } .console-plan-head > div { flex: 1 1 160px; } .console-plan-name { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.15; } .console-plan-key { margin-top: 3px; font-size: 11.5px; color: var(--mid); } .console-plan-body { margin-top: 14px; display: grid; gap: 14px; } .console-plan-note { margin-top: 12px; font-size: 12.5px; color: var(--mid); } .console-plan-set { margin-top: 10px; } .console-money { display: flex; align-items: center; gap: 9px; } .console-money-unit { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); } .console-money-input { width: 96px; font-weight: 600; } .console-money-per { font-size: 12.5px; color: var(--mid); } .console-fields { display: grid; gap: 16px; } .console-fields .console-hint { margin-top: 0; } .console-input-row { display: flex; align-items: center; gap: 9px; } .console-number-input { width: 92px; text-align: right; font-weight: 600; } .console-unit { font-size: 12.5px; color: var(--mid); white-space: nowrap; } .console-upper { width: 160px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; } .console-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .console-promos { list-style: none; margin-top: 16px; display: grid; gap: 10px; } .console-promo { padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .console-promo.is-ended, .console-promo.is-used_up { background: var(--paper-raised); } .console-promo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .console-promo-code { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; } .console-promo-line { margin-top: 6px; font-size: 13px; color: var(--ink-soft); } .console-promo-use { margin-top: 11px; display: flex; align-items: center; gap: 10px; } .console-promo-use .console-meter { flex: 1; min-width: 60px; } .console-promo-count { flex: none; font-size: 12px; color: var(--mid); } .console-promo-note { margin-top: 8px; font-size: 12.5px; color: var(--mid); } .console-arms { margin-top: 16px; display: grid; gap: 12px; } .console-arm { padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .console-arm.is-leading { border-color: var(--ink); } .console-arm-head { display: flex; align-items: flex-start; gap: 12px; } .console-arm-letter { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-family: var(--serif); font-size: 15px; } .console-arm-frame { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.15; } .console-arm-sub { margin-top: 3px; font-size: 12.5px; color: var(--mid); } .console-arm-assigned { margin-top: 12px; font-size: 12.5px; color: var(--mid); } .console-arm-rows { margin-top: 8px; display: grid; gap: 6px; } .console-arm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: 13px; } .console-arm-row dd { font-weight: 600; } .console-arm-lead { margin-top: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* ---- screen 5 · the catalog lists and the switches ---------------------- */ .console-list { list-style: none; } .console-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid var(--hairline); } .console-list-order { flex: none; width: 16px; font-size: 11.5px; color: var(--mid); } .console-list-name { font-size: 14px; font-weight: 500; } .console-list-usage { font-size: 12.5px; color: var(--mid); } .console-list-row.is-hidden-row .console-list-name { color: var(--mid); } .console-list-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; } .console-icon-btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hairline); display: grid; place-items: center; transition: border-color 0.15s, transform 0.15s var(--ease-out); } .console-icon-btn:hover { border-color: var(--ink); } .console-icon-btn:active { transform: scale(0.94); } .console-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .console-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); } .console-add-field { flex: 1 1 200px; } .console-switches { list-style: none; margin-top: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .console-switch-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 11px 14px; border-top: 1px solid var(--hairline); } .console-switch-row:first-child { border-top: 0; } .console-switch-row.is-locked { background: var(--paper-raised); } .console-switch-body { flex: 1; min-width: 0; } .console-switch-label { display: block; font-size: 14px; font-weight: 500; } .console-switch-state { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mid); } .console-switch { position: relative; flex: none; display: inline-flex; align-items: center; padding: 6px; cursor: pointer; } .console-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; } .console-switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--paper-raised); transition: background 0.18s var(--ease-out), border-color 0.18s; } .console-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); transition: transform 0.18s var(--ease-out); } .console-switch-input:checked + .console-switch-track { background: var(--ink); border-color: var(--ink); } .console-switch-input:checked + .console-switch-track .console-switch-knob { transform: translateX(18px); border-color: var(--ink); } .console-switch-input:focus-visible + .console-switch-track { outline: 2px solid var(--ink); outline-offset: 3px; } /* ---- screen 6 · the settings rows and the locked providers ------------- */ .console-settings { list-style: none; } .console-setting { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--hairline); } .console-setting:first-child { border-top: 0; } .console-setting-copy { flex: 1 1 200px; min-width: 0; } .console-setting-label { font-size: 14px; font-weight: 600; } .console-setting-help { margin-top: 3px; max-width: 54ch; font-size: 12.5px; color: var(--mid); } .console-setting-meta { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mid); } /* the "who last moved it" link is a touch target too (manual §8: ≥ 36px) — the padding grows the tap area, the negative margin keeps the line height */ .console-setting-meta a { display: inline-flex; align-items: center; min-height: 36px; min-width: 36px; padding: 0 4px; margin: -11px -4px; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; } .console-setting-meta a:hover { color: var(--ink); } .console-key { padding: 2px 7px; border-radius: var(--radius-sm); background: var(--paper-raised); font-size: 11.5px; color: var(--mid); } .console-setting-control { flex: none; margin-left: auto; } .console-elsewhere { display: grid; gap: 4px; justify-items: end; text-align: right; } .console-elsewhere-value { font-size: 14px; font-weight: 600; } .console-locked { background: var(--paper-raised); } .console-locked .console-card-head { background: var(--surface); } .console-env { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); } .console-env-value { font-size: 13px; font-weight: 600; } .console-provider-list { list-style: none; } .console-provider { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 14px 16px; border-top: 1px solid var(--hairline); } .console-provider:first-child { border-top: 0; } .console-provider-copy { flex: 1 1 240px; min-width: 0; } .console-provider-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .console-lock { width: 15px; height: 15px; fill: none; stroke: var(--mid); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .console-path { display: inline-block; margin-top: 6px; padding: 5px 9px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); font-size: 12.5px; color: var(--ink-soft); word-break: break-all; } .console-path.is-quiet { background: transparent; color: var(--mid); } .console-provider-note { margin-top: 6px; font-size: 12.5px; color: var(--mid); } .console-provider-live { flex: 1 1 160px; } /* ---- screen 7 · the audit log ------------------------------------------ */ .console-audit { list-style: none; margin-top: 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .console-audit-row { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 16px; border-top: 1px solid var(--hairline); } .console-audit-row:first-child { border-top: 0; } .console-audit-when { flex: 1 1 100%; font-size: 11.5px; color: var(--mid); } .console-audit-body { flex: 1 1 220px; min-width: 0; } .console-audit-what { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 14px; } .console-audit-actor { font-weight: 600; } .console-audit-verb { color: var(--mid); } .console-audit-object { font-weight: 500; } .console-audit-sub { margin-top: 4px; font-size: 12.5px; color: var(--mid); } .console-diffs { list-style: none; margin-top: 9px; display: grid; gap: 5px; } .console-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; } .console-diff-old { color: var(--mid); text-decoration: line-through; text-decoration-color: var(--hairline); } .console-diff-arrow { color: var(--mid); } .console-diff-new { font-weight: 600; } .console-more { margin-top: 18px; } /* ---- the unsaved-changes bar (floats, so it may carry a shadow) -------- */ .console-savebar { position: sticky; bottom: 12px; z-index: 20; margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .console-savebar-count { flex: 1 1 auto; font-size: 13px; font-weight: 600; } .console-savebar-actions { display: flex; gap: 8px; margin-left: auto; } /* ---- console responsive: the 560 / 760 / 960 breakpoints only ---------- */ @media (max-width: 560px) { /* eight weekly bars cannot carry eight labels at 360px — the first and the last read as the range; a six-bar month row keeps all of them */ .console-series-bars:has(.console-series-bar:nth-child(7)) .console-series-bar-label { visibility: hidden; } .console-series-bars:has(.console-series-bar:nth-child(7)) .console-series-bar:first-child .console-series-bar-label, .console-series-bars:has(.console-series-bar:nth-child(7)) .console-series-bar:last-child .console-series-bar-label { visibility: visible; } } @media (min-width: 560px) { .console-gate-figures { grid-template-columns: 1fr 1fr; } .console-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 760px) { .console-body { --console-bar-h: 60px; } .console-bar-meta { display: flex; } .console-out { display: inline-flex; } .console-who-name { display: inline; } .console-toolbar { grid-template-columns: minmax(0, 340px) 1fr; align-items: center; } .console-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .console-stat:last-child:nth-child(odd) { grid-column: auto; } .console-person-states { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; } .console-expand { margin-left: 0; } .console-audit-when { flex: 0 0 106px; } .console-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .console-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .console-arms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .console-flag-plate { width: 88px; } } @media (min-width: 960px) { .console-frame { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 40px; align-items: start; } .console-nav { position: sticky; top: calc(var(--console-bar-h) + 22px); margin: 0; padding: 22px 0 0; background: none; border-bottom: 0; } .console-nav-scroll { flex-direction: column; gap: 2px; overflow: visible; } .console-nav-item { display: grid; gap: 2px; width: 100%; min-height: 46px; padding: 9px 13px; border-color: transparent; border-radius: var(--radius); background: none; white-space: normal; } .console-nav-item:hover { border-color: transparent; background: var(--paper-raised); } .console-nav-item.is-active { background: var(--ink); border-color: var(--ink); } .console-nav-blurb { display: block; font-size: 11.5px; color: var(--mid); } .console-nav-item.is-active .console-nav-blurb { color: var(--hairline); } .console-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .console-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }