/* AdoptMeHouseTrading.com — design tokens
-----------------------------------------
Matches the Claude Design mockups (Homepage / Browse Houses / Listing
Detail / Offer Builder / Profile / Recent Trades) produced from the
design brief: white surfaces, one bold red accent, pine-green text,
dense pill-badge cards — plus the site's own signature mailbox +
swinging "FOR TRADE" sign motif in the nav mark and hero.
Palette (named, not decorative):
--ink #16332B pine green — headings, nav text, primary text
--ink-soft #3E5D51 secondary body copy (lede paragraphs, descriptions)
--muted #7C8F87 tertiary/meta text (timestamps, captions, units)
--paper #FFFFFF page background
--surface #F1F5F3 card background
--surface-2 #DCE6E1 traded/inactive tag background, alt surface
--line #DCE6E1 hairline borders
--accent #E6483A the "FOR TRADE" sign color — CTAs, values, primary badges
--accent-dark#C93A2E accent hover/active
--accent-soft#FBEAE7 light accent tint (error boxes, highlights)
--butter #F5B93F secondary accent — Cloned tag, Commission badge only
--good #3CA66B online-status dot, success states
--good-soft #E7F6EE light green tint
*/
/* Fonts loaded via + in each
page's instead of @import here — @import forces a fully serial
chain (fetch style.css -> parse -> discover @import -> fetch fonts CSS ->
parse -> fetch font files) instead of letting the browser's HTML preload
scanner discover and start the fonts request in parallel immediately. */
:root {
--ink: #16332B;
--ink-soft: #3E5D51;
--muted: #7C8F87;
--paper: #FFFFFF;
--surface: #F1F5F3;
--surface-2: #DCE6E1;
--line: #DCE6E1;
--accent: #E6483A;
--accent-dark: #C93A2E;
--accent-soft: #FBEAE7;
--butter: #F5B93F;
--good: #3CA66B;
--good-soft: #E7F6EE;
--white: #FFFFFF;
/* legacy variable names kept for compatibility with any inline references */
--pine: #16332B;
--pine-dark: #0E211B;
--mint: #F1F5F3;
--sign-red: #E6483A;
--sign-red-dark: #C93A2E;
--charcoal: #16332B;
--font-display: 'Baloo 2', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
}
/* Dark mode: same variable names, dark values — every existing component
already reads these tokens, so this is the only override block needed
rather than touching individual rules. */
[data-theme="dark"] {
--ink: #EAF2EE;
--ink-soft: #C3D3CC;
--muted: #8FA69C;
--paper: #0F1D18;
--surface: #16261F;
--surface-2: #1F332A;
--line: #2A3E34;
--accent: #FF6B5B;
--accent-dark: #E6483A;
--accent-soft: #3A211E;
--butter: #F5B93F;
--good: #4FCB8B;
--good-soft: #16332B;
--white: #FFFFFF;
--pine: #EAF2EE;
--pine-dark: #0F1D18;
--mint: #16261F;
--sign-red: #FF6B5B;
--sign-red-dark: #E6483A;
--charcoal: #EAF2EE;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background-color 0.15s ease, color 0.15s ease;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Nav ---------- */
.site-nav {
background: var(--paper);
color: var(--ink);
position: sticky;
top: 0;
z-index: 20;
border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.brand {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
color: var(--ink);
text-decoration: none;
letter-spacing: 0.1px;
}
.brand .sign-mark {
width: 25px;
height: 25px;
flex-shrink: 0;
}
.signpost-mini {
position: relative;
width: 25px;
height: 25px;
flex-shrink: 0;
}
.signpost-mini::before {
content: "";
position: absolute;
left: 11px;
top: 1px;
width: 3px;
height: 22px;
background: var(--ink);
border-radius: 2px;
}
.signpost-mini::after {
content: "";
position: absolute;
left: 5px;
top: 3px;
width: 15px;
height: 10px;
background: var(--accent);
border-radius: 2px;
border: 1.3px solid var(--ink);
}
.nav-more {
position: relative;
}
.nav-more-trigger {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
text-decoration: none;
color: var(--muted);
padding: 4px 0;
border-bottom: 2px solid transparent;
font-weight: 600;
font-size: 14.5px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.nav-more-trigger:hover { color: var(--ink); }
.nav-more-trigger.active { color: var(--accent); border-bottom-color: var(--accent); }
.nav-more-caret {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-top: -2px;
}
.nav-more-dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(22, 51, 43, 0.12);
padding: 6px;
min-width: 160px;
z-index: 30;
}
.nav-more-dropdown a {
display: block;
padding: 8px 10px;
border-radius: 7px;
color: var(--ink);
text-decoration: none;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
.nav-more-dropdown a:hover { background: var(--surface); }
.site-nav nav {
display: flex;
gap: 26px;
font-weight: 600;
font-size: 14.5px;
flex: 1;
justify-content: center;
}
.site-nav nav a {
text-decoration: none;
color: var(--muted);
padding: 4px 0;
border-bottom: 2px solid transparent;
}
.site-nav nav a:hover {
color: var(--ink);
}
.site-nav nav a.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.nav-pill {
display: inline-flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 16px;
font-size: 13.5px;
color: var(--ink);
font-weight: 600;
white-space: nowrap;
}
.theme-toggle {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
width: 36px;
height: 36px;
font-size: 16px;
cursor: pointer;
margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover { background: var(--surface-2); }
.nav-bell-wrap { position: relative; display: inline-flex; margin-right: 8px; }
.nav-bell {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
position: relative;
padding: 6px;
line-height: 1;
}
.nav-bell-badge {
position: absolute;
top: 0;
right: 0;
background: var(--accent);
color: var(--white);
font-size: 10px;
font-weight: 700;
border-radius: 999px;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
.nav-bell-dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(22, 51, 43, 0.12);
width: 320px;
max-height: 400px;
overflow-y: auto;
z-index: 30;
}
.nav-bell-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
font-weight: 700;
font-size: 13px;
color: var(--ink);
position: sticky;
top: 0;
background: var(--paper);
}
.nav-bell-mark-all {
background: none;
border: none;
color: var(--accent);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
font-family: var(--font-body);
}
.nav-bell-item {
display: block;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
}
.nav-bell-item:last-child { border-bottom: none; }
.nav-bell-item:hover { background: var(--surface); }
.nav-bell-item.unread { background: var(--accent-soft); }
.nav-bell-item div:first-child { font-size: 13px; line-height: 1.4; }
.nav-bell-time { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
/* ---------- Hero ---------- */
.hero {
padding: 64px 0 52px;
text-align: center;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
text-align: left;
}
@media (max-width: 800px) {
.hero-grid { grid-template-columns: 1fr; text-align: center; }
.hero-grid .hero-ctas { justify-content: center !important; }
}
.hero-eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 1.4px;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
}
@keyframes signSwing {
0% { transform: rotate(-2.5deg); }
50% { transform: rotate(2.5deg); }
100% { transform: rotate(-2.5deg); }
}
@keyframes postSwing {
0% { transform: translateX(-50%) rotate(-0.6deg); }
50% { transform: translateX(-50%) rotate(0.6deg); }
100% { transform: translateX(-50%) rotate(-0.6deg); }
}
.hero-signpost {
width: 76px;
height: 76px;
margin: 0 auto 20px;
transform-origin: top center;
animation: signSwing 4.5s ease-in-out infinite;
}
/* Large hero sign — matches the mockup's actual scale, not the small
compact icon used in the nav mark / detail-page badge. */
.big-sign-wrap {
display: flex;
justify-content: center;
align-items: flex-end;
height: 360px;
}
.big-sign-frame {
position: relative;
width: 240px;
height: 340px;
}
.big-sign-post {
position: absolute;
left: 50%;
bottom: 0;
width: 13px;
height: 290px;
background: var(--ink);
border-radius: 3px;
transform-origin: bottom center;
animation: postSwing 4.5s ease-in-out infinite;
}
.big-sign-crossbar {
position: absolute;
left: 50%;
top: 32px;
transform: translateX(-50%);
width: 135px;
height: 9px;
background: var(--ink);
border-radius: 3px;
z-index: 2;
}
.big-sign-hang {
position: absolute;
left: 50%;
top: 38px;
transform-origin: top center;
animation: signSwing 4.5s ease-in-out infinite;
z-index: 3;
}
.big-sign-box {
position: relative;
left: -85px;
width: 170px;
height: 88px;
background: var(--white);
border: 4px solid var(--ink);
border-radius: 10px;
box-shadow: 0 10px 26px rgba(22, 51, 43, 0.18);
display: flex;
align-items: center;
justify-content: center;
}
.big-sign-box::before {
content: "";
position: absolute;
left: 50%;
top: -8px;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: var(--ink);
border-radius: 50%;
}
.big-sign-text {
font-family: var(--font-display);
font-weight: 800;
font-size: 24px;
color: var(--accent);
letter-spacing: -0.5px;
text-align: center;
line-height: 1.1;
}
@media (max-width: 800px) {
.big-sign-wrap { height: 220px; }
.big-sign-frame { width: 160px; height: 210px; }
.big-sign-post { height: 170px; }
.big-sign-crossbar { width: 100px; }
.big-sign-box { width: 130px; height: 68px; left: -65px; }
.big-sign-text { font-size: 19px; }
}
.hero h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(32px, 4.6vw, 50px);
color: var(--ink);
margin: 0 0 14px;
line-height: 1.06;
letter-spacing: -0.5px;
}
.hero p.lede {
max-width: 560px;
margin: 0 auto 28px;
font-size: 17.5px;
color: var(--ink-soft);
}
.hero-ctas {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
text-decoration: none;
border: 1.5px solid transparent;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: var(--white);
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary {
background: var(--paper);
color: var(--ink);
border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface); border-color: var(--ink); }
/* ---------- Section headers ---------- */
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 8px 0 20px;
}
.section-head h1,
.section-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: 24px;
color: var(--ink);
margin: 0;
letter-spacing: -0.4px;
}
.section-head a {
font-weight: 600;
font-size: 14px;
color: var(--accent);
text-decoration: none;
}
.section-head a:hover { color: var(--accent-dark); }
/* ---------- House grid + listing cards ---------- */
.house-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 0 0 60px;
}
.house-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
position: relative;
}
.house-card.cover-selected {
border: 2px solid var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.cover-photo-picker .house-card {
cursor: pointer;
border: 2px solid var(--line);
}
.cover-photo-picker .house-card:hover {
border-color: var(--ink);
box-shadow: 0 4px 12px rgba(22, 51, 43, 0.1);
}
.cover-photo-picker .house-card::after {
content: "Click to select";
position: absolute;
top: 6px;
right: 6px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 8px;
font-size: 9.5px;
font-weight: 700;
color: var(--muted);
opacity: 0;
transition: opacity 0.1s ease;
}
.cover-photo-picker .house-card:hover::after {
opacity: 1;
}
.cover-photo-picker .house-card.cover-selected::after {
content: "✓ Selected";
opacity: 1;
color: var(--accent);
border-color: var(--accent);
}
.house-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(20, 22, 26, 0.10);
border-color: var(--ink);
}
.house-card .thumb {
aspect-ratio: 1 / 1;
background: var(--paper);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.house-card .thumb img {
max-height: 100%;
object-fit: contain;
}
.house-card .info {
padding: 12px 14px 14px;
}
.house-card h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
margin: 0 0 4px;
color: var(--ink);
}
.house-card .source {
font-size: 12px;
color: var(--muted);
margin: 0 0 10px;
}
.for-trade-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--accent);
color: var(--white);
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
}
.for-trade-tag.unpriced {
background: var(--surface-2);
color: var(--muted);
}
/* ---------- Card badge / tag / trust row (matches Claude Design mockups) ---------- */
/* Circular badge, top-left of a card thumbnail, color-coded by listing type */
.card-badge {
position: absolute;
left: 10px;
top: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--white);
box-shadow: 0 2px 6px rgba(22, 51, 43, 0.15);
}
.card-badge.house-trade { background: var(--accent); }
.card-badge.looking-for { background: var(--ink); }
.card-badge.commission { background: var(--butter); }
.card-badge .icon-sign { width: 12px; height: 12px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13 21l-9-9V4h8l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='white'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13 21l-9-9V4h8l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='white'/%3E%3C/svg%3E") center/contain no-repeat; background: var(--white); }
.card-badge .icon-loop { width: 9px; height: 9px; border: 2px solid var(--white); border-radius: 50%; }
.card-badge .icon-hammer { width: 9px; height: 9px; background: var(--white); transform: rotate(45deg); border-radius: 1px; }
/* Original / Cloned tag, top-right of a card thumbnail */
.card-tag {
position: absolute;
right: 8px;
top: 8px;
font-size: 9.5px;
font-weight: 700;
padding: 3px 7px;
border-radius: 6px;
color: var(--ink);
background: var(--surface-2);
}
.card-tag.cloned { background: var(--butter); }
/* Trust row: avatar-initial circle + username + online dot */
.trust-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.trust-row .avatar-initial {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ink);
color: var(--white);
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-body);
}
img.trust-row-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.trust-row .username {
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trust-row .online-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--good);
flex-shrink: 0;
}
/* Bold value line: {amount}{unit}, tabular figures, no pill background */
.card-value {
display: flex;
align-items: baseline;
gap: 4px;
}
.card-value .amount {
font-family: var(--font-body);
font-weight: 800;
font-size: 15px;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.card-value .unit {
font-size: 10.5px;
color: var(--muted);
font-weight: 600;
}
/* ---------- House detail page ---------- */
.house-detail {
display: grid;
grid-template-columns: 380px 1fr;
gap: 40px;
padding: 44px 0 60px;
align-items: start;
}
@media (max-width: 720px) {
.house-detail { grid-template-columns: 1fr; }
}
.house-detail .photo {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.house-detail .signpost-badge {
position: relative;
padding-left: 42px;
}
.house-detail .signpost-badge svg {
position: absolute;
left: 0;
top: 2px;
width: 32px;
height: 32px;
}
.house-detail h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: 32px;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: -0.4px;
}
.meta-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 14px 0 20px;
}
.pill {
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
font-weight: 600;
font-size: 12.5px;
padding: 6px 12px;
border-radius: 999px;
}
.value-box {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 22px;
margin-bottom: 22px;
}
.value-box .label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
font-weight: 700;
}
.value-box .amount {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: var(--accent);
}
.value-box .amount.unpriced {
color: var(--muted);
font-size: 17px;
}
/* ---------- Forms ---------- */
.form-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
padding: 26px 30px;
max-width: 560px;
margin: 0 auto;
box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
}
.form-card h1 {
font-family: var(--font-display);
color: var(--ink);
font-size: 26px;
margin: 0 0 6px;
letter-spacing: -0.3px;
}
.form-card h2 {
font-family: var(--font-display);
color: var(--ink);
font-size: 22px;
margin: 0 0 6px;
letter-spacing: -0.3px;
}
.form-card .card-heading {
font-family: var(--font-display);
color: var(--ink);
font-size: 26px;
margin: 0 0 6px;
letter-spacing: -0.3px;
font-weight: 700;
display: block;
}
.form-card .subtitle {
color: var(--muted);
font-size: 14.5px;
margin: 0 0 22px;
}
label.field-label {
display: block;
font-weight: 700;
font-size: 13.5px;
color: var(--ink);
margin: 18px 0 6px;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
width: 100%;
border: 1px solid var(--line);
border-radius: 9px;
padding: 10px 12px;
font-family: var(--font-body);
font-size: 15px;
background: var(--surface);
color: var(--ink);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
background: var(--paper);
}
textarea { resize: vertical; min-height: 90px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.error-box {
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--accent-dark);
padding: 10px 14px;
border-radius: 9px;
font-size: 14px;
margin: 14px 0;
}
.success-box {
background: var(--good-soft);
border: 1px solid var(--good);
color: var(--good);
padding: 10px 14px;
border-radius: 9px;
font-size: 14px;
margin: 14px 0;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
margin-top: 4px;
}
.checkbox-grid label {
display: flex;
align-items: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 9px;
padding: 8px 10px;
font-size: 13.5px;
cursor: pointer;
}
.checkbox-grid label:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft);
}
/* ---------- Profile chip ---------- */
.profile-chip {
display: flex;
align-items: center;
gap: 9px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: 5px 14px 5px 5px;
width: fit-content;
}
.profile-chip img {
width: 30px;
height: 30px;
border-radius: 999px;
}
.profile-chip .name {
font-family: var(--font-body);
font-weight: 700;
color: var(--ink);
font-size: 14px;
}
/* ---------- Item picker (offer builder) ---------- */
.item-picker {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
padding: 14px;
margin-top: 6px;
}
.item-picker .category-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.item-picker .category-tabs button {
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink);
font-size: 12.5px;
font-weight: 600;
padding: 5px 11px;
border-radius: 999px;
cursor: pointer;
}
.item-picker .category-tabs button.active {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
}
.item-picker .results {
max-height: 260px;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 8px;
}
.item-picker .result-item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 9px;
padding: 6px;
text-align: center;
cursor: pointer;
font-size: 11.5px;
transition: border-color 0.1s ease;
position: relative;
}
.item-picker .result-item:hover { border-color: var(--ink); }
.item-picker .result-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.item-picker .result-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.result-value {
display: block;
font-size: 9.5px;
font-weight: 700;
margin-top: 2px;
}
.result-value.verified { color: var(--accent-dark); }
.result-value.data_team { color: var(--muted); }
.result-value em { font-style: normal; font-weight: 600; opacity: 0.75; margin-left: 2px; }
.result-qty-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--accent);
color: var(--white);
font-size: 10.5px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 0 4px;
z-index: 1;
cursor: pointer;
}
.result-qty-badge .badge-x { opacity: 0.7; font-weight: 400; }
.result-qty-badge:hover { background: var(--accent-dark); }
.result-qty-badge:hover .badge-x { opacity: 1; }
.selected-items {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.selected-chip {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
width: 240px;
box-shadow: 0 1px 2px rgba(22, 51, 43, 0.04);
}
.selected-chip .chip-top {
display: flex;
align-items: center;
gap: 10px;
}
.selected-chip img {
width: 38px;
height: 38px;
object-fit: contain;
background: var(--surface);
border-radius: 8px;
flex-shrink: 0;
}
.selected-chip .chip-name {
font-weight: 700;
font-size: 13px;
color: var(--ink);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chip-remove {
border: none;
background: var(--surface);
color: var(--muted);
cursor: pointer;
font-weight: 700;
font-size: 13px;
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
line-height: 1;
}
.chip-remove:hover { background: var(--accent-soft); color: var(--accent-dark); }
.pet-modifiers {
display: flex;
gap: 10px;
}
.pet-modifiers label {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pet-modifier-label {
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.pet-modifiers select {
width: 100%;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--surface);
color: var(--ink);
font-size: 12px;
font-weight: 600;
padding: 6px 7px;
}
.selected-chip .chip-footer {
display: flex;
align-items: center;
justify-content: flex-end;
}
.qty-stepper {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border-radius: 999px;
padding: 3px 6px;
}
.qty-stepper button {
border: none;
background: var(--paper);
color: var(--ink);
cursor: pointer;
font-weight: 700;
font-size: 14px;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 1;
box-shadow: 0 1px 2px rgba(22, 51, 43, 0.08);
}
.qty-stepper button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.qty-stepper .qty-num { font-weight: 700; font-size: 12.5px; min-width: 16px; text-align: center; color: var(--ink); }
/* ---------- Listing cards ---------- */
.listing-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
display: block;
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.listing-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(20, 22, 26, 0.10);
border-color: var(--ink);
}
.listing-card .photo {
aspect-ratio: 16/10;
background: var(--paper);
overflow: hidden;
position: relative;
}
.listing-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-card .body { padding: 13px 15px; }
.listing-card h3 { font-family: var(--font-body); font-weight: 700; color: var(--ink); margin: 6px 0 4px; font-size: 16px; }
.listing-card .lister { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.status-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.status-badge.active { background: var(--accent); color: var(--white); }
.status-badge.traded { background: var(--surface-2); color: var(--muted); }
.offer-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 12px;
background: var(--paper);
}
.items-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0;
}
.items-row .item {
text-align: center;
font-size: 11px;
width: 64px;
color: var(--muted);
}
.items-row .item img {
width: 56px;
height: 56px;
object-fit: contain;
background: var(--surface);
border-radius: 8px;
}
.items-row .item .qty {
display: block;
font-weight: 700;
color: var(--ink);
font-size: 12px;
margin-top: 2px;
}
.offer-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-sm {
font-size: 13px;
padding: 7px 15px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 700;
border: none;
cursor: pointer;
}
.btn-sm.accept { background: var(--ink); color: var(--white); }
.btn-sm.accept:hover { background: var(--accent); }
.btn-sm.decline { background: var(--surface-2); color: var(--ink); }
.btn-sm.decline:hover { background: var(--line); }
/* ---------- Recent Trades comps feed ---------- */
.trades-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.trade-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px;
}
.trade-card .trade-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.verified-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--accent);
color: var(--white);
border-radius: 999px;
padding: 4px 9px 4px 7px;
font-size: 10.5px;
font-weight: 700;
}
.verified-badge::before {
content: "";
width: 7px;
height: 4px;
border-left: 2px solid var(--white);
border-bottom: 2px solid var(--white);
transform: rotate(-45deg);
margin-top: -2px;
}
.trade-card .trade-time { font-size: 11px; color: var(--muted); font-weight: 600; }
.trade-swap {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.trade-swap .side img,
.trade-swap .side .placeholder {
height: 70px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 6px;
width: 100%;
object-fit: cover;
display: block;
}
.trade-swap .side .placeholder {
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--muted);
text-align: center;
padding: 4px;
}
.trade-swap .side .label {
font-size: 11.5px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trade-swap .swap-arrow {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trade-swap .swap-arrow::before {
content: "";
width: 8px;
height: 8px;
border-top: 2px solid var(--ink);
border-right: 2px solid var(--ink);
transform: rotate(45deg);
}
/* ---------- Profile hero + stat grid ---------- */
.profile-hero {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
margin-bottom: 28px;
}
.profile-hero .avatar-big {
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--ink);
color: var(--white);
font-size: 32px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-display);
object-fit: cover;
}
.profile-hero .name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.profile-hero .name-row .name {
font-family: var(--font-display);
font-weight: 800;
font-size: 26px;
color: var(--ink);
letter-spacing: -0.4px;
}
.profile-hero .online-label {
font-size: 13px;
color: var(--good);
font-weight: 700;
}
.profile-hero .stat-line {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.profile-hero .stat-line .stat {
display: flex;
align-items: center;
gap: 6px;
}
.profile-hero .stat-line .stat .num {
font-family: var(--font-body);
font-weight: 800;
font-size: 16px;
color: var(--ink);
}
.profile-hero .stat-line .stat .label,
.profile-hero .stat-line .member-since {
font-size: 12.5px;
color: var(--muted);
font-weight: 600;
}
/* ---------- Manage-listing card (Active Listings on Profile) ---------- */
.manage-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
}
.manage-card .manage-head {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--surface);
}
.manage-card .manage-thumb {
position: relative;
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.manage-card .manage-thumb img { width: 100%; height: 100%; object-fit: cover; }
.manage-card .manage-thumb .card-badge { left: 5px; top: 5px; width: 20px; height: 20px; }
.manage-card .manage-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.manage-card .offer-count { font-size: 11.5px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.manage-card .manage-offers {
padding: 10px 16px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.manage-offer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
}
.manage-offer-row .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.manage-offer-row .items-summary {
font-size: 12px;
color: var(--ink-soft);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
/* ---------- List a House form (type cards, house picker, photo slots) ---------- */
.type-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 8px;
}
.type-card {
border: 2px solid var(--line);
background: var(--paper);
border-radius: 12px;
padding: 14px;
cursor: pointer;
text-align: left;
}
.type-card.active { border-color: var(--accent); background: var(--accent-soft); }
.type-card .icon-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.type-card .icon-circle.house-trade { background: var(--accent); }
.type-card .icon-circle.looking-for { background: var(--ink); }
.type-card .icon-circle.commission { background: var(--butter); }
.type-card .type-label { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.type-card .type-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.house-picker { position: relative; width: 100%; max-width: 300px; }
.house-picker .house-picker-trigger {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
}
.house-picker .house-picker-thumb {
width: 34px;
height: 34px;
border-radius: 7px;
overflow: hidden;
flex-shrink: 0;
background: var(--paper);
}
.house-picker .house-picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.house-picker .house-picker-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.house-picker .caret {
width: 8px;
height: 8px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
margin-right: 4px;
flex-shrink: 0;
}
.house-picker-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(22, 51, 43, 0.12);
max-height: 300px;
overflow-y: auto;
z-index: 10;
}
.house-picker-dropdown input[type="search"] {
border: none;
border-bottom: 1px solid var(--line);
border-radius: 10px 10px 0 0;
position: sticky;
top: 0;
}
.house-picker-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
}
.house-picker-row:hover, .house-picker-row.selected { background: var(--surface); }
.house-picker-row .thumb { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.house-picker-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.house-picker-row .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.photo-slots {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.photo-slot {
aspect-ratio: 1;
border-radius: 12px;
background: var(--surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.photo-slot.main { border: 2px dashed var(--ink); }
.photo-slot.interior { border: 1.5px dashed var(--line); }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-slot .plus-circle {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
line-height: 1;
}
.photo-slot.main .plus-circle { background: var(--ink); color: var(--white); }
.photo-slot.interior .plus-circle { background: var(--paper); border: 1.5px solid var(--line); color: var(--muted); }
.photo-slot .slot-label { font-size: 10.5px; font-weight: 700; color: var(--ink); }
.photo-slot.interior .slot-label { color: var(--muted); font-weight: 600; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.segmented button {
flex: 1;
border: none;
background: var(--surface);
color: var(--ink);
padding: 12px 16px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
font-family: var(--font-body);
}
.segmented button.active { background: var(--accent); color: var(--white); }
.house-filter-row {
display: flex;
gap: 10px;
overflow-x: auto;
margin-bottom: 14px;
padding-bottom: 2px;
}
.house-filter-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 10px;
cursor: pointer;
border: 2px solid transparent;
flex-shrink: 0;
background: none;
font-family: var(--font-body);
}
.house-filter-pill.active { border-color: var(--accent); }
.house-filter-pill .thumb {
width: 34px;
height: 34px;
border-radius: 8px;
overflow: hidden;
background: var(--surface);
}
.house-filter-pill .thumb img { width: 100%; height: 100%; object-fit: cover; }
.house-filter-pill .fname {
font-size: 12px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
}
.chat-panel {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
margin-top: 10px;
}
.chat-counterparty {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.chat-counterparty:empty { display: none; }
.chat-counterparty img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
background: var(--surface);
flex-shrink: 0;
}
.chat-counterparty .cp-info { flex: 1; min-width: 0; }
.chat-counterparty .cp-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.chat-counterparty .cp-rbx { font-size: 11.5px; color: var(--muted); }
.chat-counterparty .cp-rbx strong { color: var(--ink); }
.chat-counterparty a.btn-sm { text-decoration: none; white-space: nowrap; flex-shrink: 0; display: inline-block; }
.chat-messages {
max-height: 220px;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--surface);
}
.chat-bubble {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 80%;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
padding: 7px 11px;
align-self: flex-start;
}
.chat-bubble.me {
align-self: flex-end;
background: var(--accent-soft);
border-color: var(--accent);
}
.chat-bubble .chat-sender { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.chat-bubble .chat-text { font-size: 13px; color: var(--ink); }
.chat-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--line);
background: var(--paper);
}
.chat-presets button {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 12px;
font-size: 11.5px;
font-weight: 600;
color: var(--ink-soft);
cursor: pointer;
font-family: var(--font-body);
}
.chat-presets button:hover { border-color: var(--ink); color: var(--ink); }
.chat-presets button:disabled { opacity: 0.5; cursor: default; }
.quick-replies {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 10px;
}
.quick-replies button {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
cursor: pointer;
font-family: var(--font-body);
}
.quick-replies button:hover { border-color: var(--ink); color: var(--ink); }
.filter-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.filter-pills button {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 999px;
padding: 9px 18px;
font-weight: 600;
font-size: 13.5px;
white-space: nowrap;
cursor: pointer;
font-family: var(--font-body);
}
.filter-pills button.active {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
font-weight: 700;
}
.listings-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.breadcrumb {
font-size: 13px;
color: var(--muted);
font-weight: 600;
margin-bottom: 16px;
}
.breadcrumb .current { color: var(--ink); }
.detail-grid {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 36px;
align-items: start;
}
@media (max-width: 860px) {
.detail-grid { grid-template-columns: 1fr; }
}
.detail-tabs {
display: flex;
gap: 6px;
border-bottom: 1px solid var(--line);
margin-bottom: 22px;
}
.detail-tabs .tab {
padding: 10px 4px;
margin-right: 22px;
font-weight: 700;
font-size: 14.5px;
cursor: pointer;
border-bottom: 3px solid transparent;
color: var(--muted);
font-family: var(--font-body);
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.detail-tabs .tab.active {
color: var(--ink);
border-bottom-color: var(--accent);
}
.sidebar-sticky {
position: sticky;
top: 84px;
display: flex;
flex-direction: column;
gap: 16px;
}
.stat-grid-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat-grid-card .stat-label {
font-size: 11.5px;
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.stat-grid-card .stat-value {
font-family: var(--font-body);
font-weight: 800;
font-size: 20px;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.stat-grid-card .stat-value.accent { color: var(--accent); }
.stat-grid-card .stat-value .unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-grid-card .full-row {
grid-column: 1 / 3;
padding-top: 12px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
}
.cta-box {
background: var(--ink);
border-radius: 14px;
padding: 20px;
}
.cta-box h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 17px;
color: var(--white);
margin: 0 0 6px;
}
.cta-box p {
font-size: 13px;
color: #C9D9D2;
line-height: 1.5;
margin: 0 0 16px;
}
.cta-box .btn-primary { width: 100%; justify-content: center; }
.trust-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.trust-card .avatar-lg {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ink);
color: var(--white);
font-size: 17px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
object-fit: cover;
}
.trust-card .trust-name-row { display: flex; align-items: center; gap: 6px; }
.trust-card .trust-name-row .name { font-weight: 700; font-size: 15px; color: var(--ink); }
.trust-card .trust-sub { font-size: 12.5px; color: var(--muted); }
.detail-offer-row {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
}
.site-footer {
border-top: 1px solid var(--line);
padding: 32px 0;
text-align: center;
font-size: 13.5px;
color: var(--muted);
}
.site-footer a { color: var(--accent); }
.site-footer a:hover { color: var(--accent-dark); }