/* SaraHome / 莎拉家 — Main Stylesheet
對位 SPEC v0.2 §7 Mood board B Modern Minimalist
+ §7.1 溫馨元素 (loading / empty state / error message)
+ YAGNI 守住: 唔做過度 design
+ §R-N+137 (2026-07-22) Airbnb 色彩計畫 + 字體呼吸感 (對位 UIUX 研究 §5 視覺語言)
*/
/* Plan D (V3) Token Schema — §R-N+203
8-dim semantic token + spacing/radius/shadow/typography/motion/z-index
Prefix: --sarahome-v3-* (Plan C --color-* super-deprecated)
對位 SPEC §3 D4 brand palette + §7 Mood board B */
:root {
/* === Color tokens (8-dim semantic) === */
--sarahome-v3-color-bg: #FAFAFA; /* 暖白底 (SPEC §7 mood B) */
--sarahome-v3-color-fg: #1F2937; /* 深灰文字 (SPEC §3 D4) */
--sarahome-v3-color-accent: #FF8C42; /* 暖橙強調 (§R-N+288 brand refresh, Option A, 砍藍) */
--sarahome-v3-color-cta: #FF6B35; /* 橙紅 CTA (SPEC §3 D4 ✅) */
--sarahome-v3-color-warm: #FF8C42; /* 暖橙強調 (SPEC §3 D4 ✅) */
/* P2-4 a11y AA 深色版 (2026-08-04): 原色只做裝飾/背景, 文字/按鈕用深色版達 WCAG AA 4.5:1 */
--sarahome-v3-color-accent-aa: #C2410C; /* 深暖橙 (accent 文字/白字按鈕, 5.19:1 on white) */
--sarahome-v3-color-cta-aa: #C2410C; /* 深橙紅 CTA (白字按鈕, 5.19:1) */
--sarahome-v3-color-text-secondary-aa: #4B5563; /* 次要文字灰 AA (6.9:1 on #F3F4F6) */
--sarahome-v3-color-success: #10B981; /* 薄荷綠 (SPEC §3 D4 ✅) */
--sarahome-v3-color-error: #DC2626; /* 紅色 error */
--sarahome-v3-color-info: #2563EB; /* 藍色 info (§R-N+202 Ship H undo action) */
--sarahome-v3-color-info-blue: #2D7DD2; /* legacy blue (§R-N+26xx Wave 8.3) */
--sarahome-v3-color-fg-dark: #1A1A1A; /* print-specific 深灰黑 (contracts-print) */
--sarahome-v3-color-warning-amber: #D97706; /* 琥珀色 warning */
--sarahome-v3-color-warning-amber-light: #F59E0B; /* 琥珀色 light */
--sarahome-v3-color-whatsapp: #25D366; /* WhatsApp 綠 */
--sarahome-v3-color-text-secondary: #6B7280; /* 次要文字灰 */
--sarahome-v3-color-text-tertiary: #6B7280; /* 更淡文字 (specs) — P2-4 AA: 原 #9CA3AF 2.53:1 → #6B7280 4.83:1 */
/* === Surface tokens === */
--sarahome-v3-surface-card: #FFFFFF;
--sarahome-v3-surface-input: #FFFFFF;
--sarahome-v3-surface-overlay: #FFFFFF;
--sarahome-v3-surface-alt: #FFFFFF;
--sarahome-v3-surface-section-alt: #F3F4F6;
/* === Border + shadow === */
--sarahome-v3-border: #E5E7EB;
--sarahome-v3-border-dark: #D1D5DB;
/* §R-N+12xx+2 (2026-08-17) — Mobile bottom-nav height 單一 source-of-truth.
: §R-N+341.1 sticky bottom 82px 對位 2026-08-04 舊 nav 81.4px;
§R-N+350/352 nav 收窄後真值 = 65px, 舊 magic number 遺留 17px seam.
Token = 66px (65px nav + 1px defensive gap). 對位使用者:
- .mobile-bottom-nav min-height + safe-area padding (mobile.css)
- .listing-sticky-cta bottom (mobile.css)
改 nav 高度只需改呢度 1 處. */
--sarahome-mobile-nav-height: 66px;
--sarahome-v3-shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
--sarahome-v3-shadow-hover: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
--sarahome-v3-shadow-color-soft: rgba(0,0,0,0.04); /* 最淡 shadow (§R-N+26xx Wave 8.1) */
--sarahome-v3-shadow-color-medium: rgba(0,0,0,0.06); /* 中等 shadow */
--sarahome-v3-shadow-color-strong: rgba(0,0,0,0.08); /* 強 shadow (hover) */
--sarahome-v3-shadow-color-ultra: rgba(0,0,0,0.12); /* 最強 shadow (modal) */
--sarahome-v3-shadow-color-brand-blue-soft: rgba(45, 125, 210, 0.06); /* legacy blue soft (§R-N+26xx Wave 8.2) */
--sarahome-v3-shadow-color-brand-blue-medium: rgba(45, 125, 210, 0.08); /* legacy blue medium */
--sarahome-v3-shadow-color-brand-blue-strong: rgba(45, 125, 210, 0.12);/* legacy blue strong */
--sarahome-v3-shadow-color-accent-soft: rgba(255, 140, 66, 0.12); /* SaraHome 暖橙 soft */
--sarahome-v3-shadow-color-accent-medium: rgba(255, 140, 66, 0.18); /* SaraHome 暖橙 medium */
--sarahome-v3-shadow-color-warning: rgba(217, 119, 6, 0.12); /* 琥珀色 warning */
--sarahome-v3-shadow-color-success: rgba(16, 185, 129, 0.12); /* 薄荷綠 success */
/* Homepage wide-content cap. Hero / readable forms use explicit narrower widths. */
--sarahome-v3-container: 1280px;
/* === Status tokens === */
--sarahome-v3-status-success-bg: #D1FAE5;
--sarahome-v3-status-success-text: #065F46;
--sarahome-v3-status-info-bg: #DBEAFE;
--sarahome-v3-status-info-text: #1E40AF;
--sarahome-v3-status-warning-bg: #FEF3C7;
--sarahome-v3-status-warning-text: #92400E;
--sarahome-v3-status-error-bg: #FEE2E2;
--sarahome-v3-status-error-text: #991B1B;
--sarahome-v3-status-error-border: #FECACA;
--sarahome-v3-status-error-text-strong: #B91C1C; /* danger/hover 強對比紅 (§R-N+26xx Wave 7.1) */
/* === Footer tokens === */
--sarahome-v3-footer-bg: #1F2937;
--sarahome-v3-footer-border: #374151;
--sarahome-v3-footer-heading: #F9FAFB;
--sarahome-v3-footer-text: #9CA3AF;
--sarahome-v3-footer-muted: #9CA3AF; /* P2-4 AA: 原 #6B7280 3.03:1 on #1F2937 → #9CA3AF 5.87:1 */
/* === Hero gradient === */
--sarahome-v3-hero-gradient-from: rgba(255, 247, 237, 0.95);
--sarahome-v3-hero-gradient-to: rgba(254, 226, 226, 0.9);
/* === Modal backdrop === */
--sarahome-v3-modal-backdrop: rgba(0, 0, 0, 0.5);
/* === Typography === */
--sarahome-v3-font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
--sarahome-v3-font-en: 'Inter', 'Source Sans Pro', sans-serif;
/* §R-N+432 (2026-08-11) P0.1 typography 6 級 hierarchy (對位 §R-N+290 typography 3 級 chain)
設計原則: 6 級 desktop scale + ≤768 mobile scale 收 3 級, 對住 SaraHome 36 個 unique font-size 嘅散亂 (P-MD-01 根因)
0 改老 selector, 純 token def, 後續 P0.2 sweep 階段逐步 migrate selector.
Anchor 對位 audit: top-5 font-size (0.8125 / 0.875 / 0.75 / 1 / 0.9375 rem) 佔 309 hit (28%) */
--sarahome-v3-font-xs: 0.75rem; /* 12px — caption / meta / status */
--sarahome-v3-font-sm: 0.875rem; /* 14px — body / form / nav / spec value */
--sarahome-v3-font-base: 1rem; /* 16px — paragraph / main copy */
--sarahome-v3-font-md: 1.125rem; /* 18px — h3 / card title */
--sarahome-v3-font-lg: 1.25rem; /* 20px — h2 / page title */
--sarahome-v3-font-xl: 1.5rem; /* 24px — h1 / hero sub */
/* 注: ≥24px (1.5rem+) hero/display 字級唔入 token, 屬 display scale 一對一 case-by-case 守住 */
/* §R-N+432 mobile ≤768 typography override (對位 §P-MD-06 mobile density + §P-MD-02 mobile-first)
3 級 scale 守住 §R-N+290 typography 期望 (1.125 / 0.875 / 0.75) */
@media (max-width: 768px) {
:root {
--sarahome-v3-font-md: 1rem; /* 18 → 16px — card title 收 */
--sarahome-v3-font-lg: 1.125rem; /* 20 → 18px — page title 收 */
--sarahome-v3-font-xl: 1.375rem; /* 24 → 22px — h1 / hero 收 */
/* xs / sm / base 不變, 已係 mobile-friendly */
}
}
/* §R-N+435 (2026-08-11) P0.4 touch target token (對位 §P-MD-05 Apple HIG 44px)
3 級 scale: 36/44/56px, 對住 SaraHome 12 個 unique min-height 硬編碼值.
§R-N+429 已 ship touch-action + 44px tap target chain (commit 4e5c9dc),
P0.4 純 token def, 0 改老 selector (selective narrative 守住).
後續 sweep 階段逐步 migrate min-height: 44px / 48px / 56px consumer.
注: 48px 屬 Android Material 48dp 標準, 同 Apple HIG 44px 接近 (差 4px = 1 grid unit),
sweep 階段將 48px 統一去 touch-target (44px) 對位 Apple HIG 對住 iOS Safari 標準. */
--sarahome-v3-touch-target: 44px; /* Apple HIG 44pt — button / input / CTA */
--sarahome-v3-touch-target-sm: 36px; /* compact chip / quick-tag */
--sarahome-v3-touch-target-lg: 52px; /* hero CTA / FAB / primary submit */
/* §R-N+435 mobile ≤768 touch target override (對位 §P-MD-06 mobile density)
sm chip 守住 36px (iOS Safari toolbar 標準), lg hero CTA 收 52px (mobile density 根因)
main touch target 唔變 (44px 守住 Apple HIG mobile 標準) */
@media (max-width: 768px) {
:root {
--sarahome-v3-touch-target-sm: 36px; /* 不變 */
--sarahome-v3-touch-target-lg: 52px; /* 56 → 52 — mobile density */
}
}
/* === Spacing scale (4/8/12/16/24/32/48/64) === */
/* §R-N+400 (2026-08-10): Space tokens 修正 — 消除重複 + 符合 4/8 scale
原 space-2/3/4=0.5rem, space-6/8/12=1rem 重複，現統一修正 */
--sarahome-v3-space-1: 0.25rem; /* 4px */
--sarahome-v3-space-2: 0.5rem; /* 8px */
--sarahome-v3-space-3: 0.75rem; /* 12px — 修正：原 0.5rem 重複 */
--sarahome-v3-space-4: 0.8rem; /* 12.8px — 收緊 */
--sarahome-v3-space-5: 1.25rem; /* 20px — 新增（top hardcoded 值） */
--sarahome-v3-space-6: 1.5rem; /* 24px — 修正：原 1rem 重複 */
--sarahome-v3-space-8: 2rem; /* 32px — 修正：原 1rem 重複 */
--sarahome-v3-space-12: 3rem; /* 48px — 修正：原 1rem 重複 */
--sarahome-v3-space-16: 4rem; /* 64px — 保持 */
/* === Radius === */
--sarahome-v3-radius-sm: 8px;
--sarahome-v3-radius-md: 12px;
--sarahome-v3-radius-lg: 16px;
--sarahome-v3-radius-xl: 24px;
/* === Motion === */
--sarahome-v3-duration-fast: 0.15s;
--sarahome-v3-duration-base: 0.3s;
--sarahome-v3-duration-slow: 0.5s;
--sarahome-v3-easing: cubic-bezier(0.4, 0, 0.2, 1);
/* === Z-index === */
--sarahome-v3-z-drawer: 1000;
--sarahome-v3-z-modal: 2000;
--sarahome-v3-z-toast: 3000;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Skip Navigation Link (WCAG 2.4.1) */
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 10000;
padding: 12px 24px;
background: var(--sarahome-v3-color-cta);
color: #fff;
font-weight: 600;
font-size: 14px;
text-decoration: none;
border-radius: 0 0 4px 0;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
/* §R-N+137 Airbnb 呼吸感: line-height 1.7 + 字距微調 */
body {
font-family: var(--sarahome-v3-font-zh);
background-color: var(--sarahome-v3-color-bg);
color: var(--sarahome-v3-color-fg);
line-height: 1.7; /* §R-N+137 放大行高 (原 1.6) */
letter-spacing: 0.01em; /* §R-N+137 微調字距 */
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--sarahome-v3-color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 1280px; /* §R-N+164 — 對位 .featured-listings / .quick-actions-grid 1280px chain 統一 */
margin: 0 auto;
padding: 0 1.25rem;
}
/* §R-N+35xx (2026-08-31) P2 polish C4 — page-container width constraints
對位 CEO audit 2026-08-31 C4: /agent/profile + /agent/listing/new/* form 過寬無 max-width
- .page-container = 對齊 .container 1280px 標準 (舊 alias)
- .page-container-narrow = 960px 表單專用 (form fields 唔好 stretching over wide viewport)
對位 §R-N+62 KISS: 2 行 CSS, 唔 cross-edit template structure (page-container 已存在 template,
加 CSS rule 已可 close issue)。
對位 §R-N+138 disk-truth: profile_edit.html + new_listing.html 已用 page-container 包住內容,
純 CSS 補 max-width。 */
.page-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.25rem;
}
.page-container-narrow {
max-width: 960px;
margin: 0 auto;
padding: 0 1.25rem;
}
/* Header */
.site-header {
background: var(--sarahome-v3-surface-section-alt); /* §R-N+140: 統一 var(), light=#FFFFFF / dark=#2D2D2D 自動切 */
border-bottom: 1px solid var(--sarahome-v3-border);
padding: var(--sarahome-v3-space-2) 0;
}
.site-header .container {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-8);
}
.brand {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
}
.brand-logo {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
}
/* V10 — Logo3 img (SaraHomeLogo3.png 500x500, 1:1 square icon, 純 icon + 旁邊 wordmark lockup) */
.brand-logo-img {
display: block;
width: 50px;
height: 50px;
flex-shrink: 0;
}
.logo-cube {
font-size: 2rem;
color: var(--sarahome-v3-color-accent);
line-height: 1;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-text strong {
font-size: 1.25rem;
color: var(--sarahome-v3-color-fg);
}
.logo-text em {
font-style: normal;
font-size: 0.875rem;
color: var(--sarahome-v3-color-accent);
}
.site-nav {
display: flex;
gap: var(--sarahome-v3-space-6);
flex: 1;
}
.site-nav a {
color: var(--sarahome-v3-color-fg);
font-weight: 500;
}
.user-menu {
display: flex;
gap: var(--sarahome-v3-space-3);
align-items: center;
/* §R-N+4xxx+63 (2026-09-05, Round 12, Issue 16 closure) — Push user menu to right edge
對位 §R-N+62 KISS: 0 layout change, 純 flex margin auto
對位 §R-N+290 style consistency: brand+nav left, user-menu right (L4 standard layout) */
margin-left: auto;
}
.mobile-header-actions,
.mobile-bottom-nav,
.mobile-district-sheet-tools {
display: none;
}
.user-email {
color: #6B7280;
font-size: 0.875rem;
}
.btn-login, .btn-register, .btn-logout {
padding: var(--sarahome-v3-space-2) var(--sarahome-v3-space-4);
border-radius: 0.375rem;
font-size: 0.875rem;
}
.btn-login {
color: var(--sarahome-v3-color-accent);
border: 1px solid var(--sarahome-v3-color-accent);
}
.btn-register {
background: var(--sarahome-v3-color-accent-aa);
color: white;
transition: background var(--sarahome-v3-duration-fast) ease;
}
.btn-register:hover {
background: #A83A0A;
}
.btn-logout {
color: #6B7280;
border: 1px solid var(--sarahome-v3-border);
}
.super-admin-link {
background: var(--sarahome-v3-color-error, #DC2626);
color: white !important;
padding: var(--sarahome-v3-space-1) var(--sarahome-v3-space-2);
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: bold;
}
/* Main */
.site-main {
flex: 1;
padding: 0; /* §R-N+135.12 (2026-07-22) — 2rem 0 → 0 (CEO: site-main padding 改為0) */
}
/* Footer — §R-N+422 (2026-08-11) 全面優化
對位 §R-N+290 style consistency: 2-col desktop grid / 1fr mobile ≤768 stack
對位 §R-N+62 KISS: 3 維度chain
- C1 visual hierarchy: brand col (left) + nav col (right) 2-col grid
- C3 divider 統一: border-top accent (line 9074) 保留, 內部 border-bottom 移除
- C2 移除 640px 根因過早 (CEO §R-N+290 ≤768 統一 1fr stack)
§R-N+423 (2026-08-11) — 排版結構性 (CEO 反饋: 排版希望能夠優化)
對位 §R-N+290 / §R-N+137 Airbnb typography / §R-N+400 space token
5 維度closure:
- A font-size hierarchy: 1.125rem / 0.875rem / 0.75rem 3 級
- B letter-spacing: brand 0.02em / links 0.01em
- C vertical rhythm: space-6 (24px) block, space-4 (16px) col gap
- D gap 根因: 兩 col gap 2rem → 3rem; nav mini-grid 0.5rem 1.25rem → space-2 space-4
- E space token hygiene: hardcoded 值 → --sarahome-v3-space-* 對位 §R-N+400 */
.site-footer {
background: var(--sarahome-v3-footer-bg, #1F2937); /* §R-N+140: var() 統一控制, dark=更炭 */
color: var(--sarahome-v3-footer-text, #9CA3AF);
padding: var(--sarahome-v3-space-6, 1.5rem) 0 var(--sarahome-v3-space-5, 1.25rem);
font-size: var(--sarahome-v3-font-sm);
line-height: 1.6;
}
.site-footer .container {
display: flex;
flex-direction: column;
gap: var(--sarahome-v3-space-6, 1.5rem);
}
/* C1 — 2-col grid: brand summary (左) + service links (右)
對位 §R-N+290: dashboard grid 統一 2-col desktop, 1fr mobile ≤768
§R-N+423 D gap: 2rem → 3rem (對位 §R-N+400 space-12) */
.footer-services {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: var(--sarahome-v3-space-12, 3rem);
padding-bottom: 0;
}
/* C1 — brand col 統一 visual weight: heading + 短描述
§R-N+423 A font-size: 1rem → 1.125rem (對位 §R-N+290 typography 3 級)
§R-N+423 B letter-spacing: 0.02em (對位 §R-N+137 中文 letter-spacing) */
.footer-brand-summary {
display: grid;
gap: var(--sarahome-v3-space-2, 0.5rem);
}
.footer-brand-summary strong {
color: var(--sarahome-v3-footer-heading, #F9FAFB);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.5;
}
.footer-brand-summary span {
color: var(--sarahome-v3-footer-text, #9CA3AF);
font-size: 0.875rem;
line-height: 1.7;
letter-spacing: 0.01em;
}
/* C1 — nav col: 5 個 link 統一排成一條過 (CEO 2026-08-11 反饋: 唔好 2-col mini-grid, 改一條過)
對位 §R-N+290 style consistency: desktop 對位 mobile flex-wrap (§R-N+422 mobile.css)
對位 §R-N+62 KISS: 1 commit 1 (link 排列 統一), 純 CSS, 0 template/JS 改動 */
.footer-services-links {
display: flex;
flex-wrap: wrap;
gap: var(--sarahome-v3-space-2, 0.5rem) var(--sarahome-v3-space-4, 1rem);
align-self: center;
justify-self: end;
}
.footer-services-links a {
color: var(--sarahome-v3-footer-text, #D1D5DB);
font-weight: 600;
text-decoration: none;
font-size: var(--sarahome-v3-font-sm);
letter-spacing: 0.01em;
padding: var(--sarahome-v3-space-1, 0.25rem) 0;
transition: color 0.15s ease;
}
.footer-services-links a:hover {
color: var(--sarahome-v3-color-warm);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.disclaimer {
line-height: 1.7;
color: var(--sarahome-v3-footer-text, #D1D5DB);
font-size: 0.8125rem;
letter-spacing: 0.01em;
}
.disclaimer a {
color: var(--sarahome-v3-color-warm);
}
.mascot-credit {
color: var(--sarahome-v3-color-warm);
font-size: 1rem;
}
/* C3 + §R-N+423 — copyright 簡化
§R-N+423 C vertical rhythm: padding-top 0.25rem → space-2 (8px) 對位 block rhythm
§R-N+423 A font-size: 0.8125rem → 0.75rem (對位 §R-N+290 typography 3 級, caption scale) */
.copyright {
color: var(--sarahome-v3-footer-muted, #6B7280);
font-size: var(--sarahome-v3-font-xs);
padding-top: var(--sarahome-v3-space-2, 0.5rem);
letter-spacing: 0.02em;
}
/* §R-N+252 — Dark mode 完全移除, footer 用 .site-footer 自身 base style */
/* Flash messages (對位 §7.1 溫馨) */
.flash-messages {
max-width: 1280px; /* §R-N+164 — 對位 .container 1280px chain */
margin: 1rem auto;
padding: 0 1.25rem;
}
.flash {
padding: var(--sarahome-v3-space-3) var(--sarahome-v3-space-4);
border-radius: 0.375rem;
margin-bottom: 0.5rem;
}
.flash-success {
background: #DCFCE7;
color: #166534;
border-left: 4px solid var(--sarahome-v3-color-success);
}
.flash-error {
background: #FEE2E2;
color: #991B1B;
border-left: 4px solid var(--sarahome-v3-color-error);
}
.flash-warning {
background: #FEF3C7;
color: #92400E;
border-left: 4px solid #F59E0B;
}
/* Buttons — v0.56.1 (2026-08-08, CEO feedback 8/8: 白字 contrast 並沒有實現):
預設 background + hover + active + focus 統一用 cta-aa 深色版 #C2410C (5.19:1)
守住 WCAG AA 4.5:1. 根因: 多個 scoped rule (.listing-actions .btn-primary /
.error-actions .btn-primary / .offline-actions .btn-primary) 同 PlanD V3
重複 .btn-primary 都寫 background: cta (#FF6B35), 跌穿 AA 3.36:1.
對位 §R-N+62 KISS: 全部同 cascade 級別, 後寫後贏. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary:focus {
background: var(--sarahome-v3-color-cta-aa, #C2410C);
color: #ffffff;
padding: var(--sarahome-v3-space-3) var(--sarahome-v3-space-6);
border-radius: 0.375rem;
border: none;
cursor: pointer;
font-size: var(--sarahome-v3-font-base);
font-weight: 600;
transition: background var(--sarahome-v3-duration-fast, 0.15s) ease;
}
/* v0.56.1: override scoped rules (specificity 對齊 — 同 selector 結構, 後寫後贏) */
.listing-actions .btn-primary,
.listing-actions .btn-primary:hover,
.listing-actions .btn-primary:focus-visible,
.listing-actions .btn-primary:active,
.error-actions .btn-primary,
.error-actions .btn-primary:hover,
.error-actions .btn-primary:focus-visible,
.error-actions .btn-primary:active,
.offline-actions .btn-primary,
.offline-actions .btn-primary:hover,
.offline-actions .btn-primary:focus-visible,
.offline-actions .btn-primary:active {
background: var(--sarahome-v3-color-cta-aa, #C2410C);
}
/* v0.56.1: override PlanD V3 component .btn-primary 重複 (line 9164 寫 background cta) */
.btn-primary {
background: var(--sarahome-v3-color-cta-aa, #C2410C);
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus-visible {
background: var(--sarahome-v3-surface-card, #FFFFFF);
color: var(--sarahome-v3-color-accent-aa, #C2410C);
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
border: 1px solid var(--sarahome-v3-color-accent-aa, #C2410C);
cursor: pointer;
font-size: 1rem;
transition: background var(--sarahome-v3-duration-fast, 0.15s) ease;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background: rgba(194, 65, 12, 0.06);
color: var(--sarahome-v3-color-accent-aa, #C2410C);
border-color: var(--sarahome-v3-color-accent-aa, #C2410C);
}
/* Forms */
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: var(--sarahome-v3-space-3);
border: 1px solid var(--sarahome-v3-border);
border-radius: 0.375rem;
font-size: var(--sarahome-v3-font-base);
font-family: var(--sarahome-v3-font-zh);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--sarahome-v3-color-accent);
}
/* §R-N+4xxx+13 (2026-09-04, CEO verdict 「new-listing-form 相關表格需要優化」):
last form-group 內部間距修邊，避免 submit bar 撞尾
對位 §R-N+62 KISS: 純 CSS selector, 唔改 template。*/
.form-section > .form-group:last-child {
margin-bottom: 0.5rem;
}
/* ============ Hero V18 (§R-N+109 對位 CEO feedback: 買/租即 submit) ============
對位 §R-N+62 KISS 簡化 + §R-N+99 form pattern:
- V17 結構: 4 column (district + type + q + submit btn) + 2-tab pill (buy/rent)
- V18 修法: 移除 submit btn, 買盤/租盤 pill 改為 button type=submit
點擊買盤/租盤 pill 即 form submit 帶齊 4 個 filter (district + property_type + q + type)
- 對位 memory MaliMali 設計: MaliMali 買/租 tab 即刻出 results, 唔需要另外 button
- 對位 V6-G spec 4 種篩選條件組合
============================================================= */
/* §R-N+132 (CEO 2026-07-18) — Form 超出 hero 橙底框
reverse §R-N+131 v2 (form 框入) → form 跨出 hero bottom edge 32px
negative bottom margin + z-index 浮動, hero padding-bottom 縮補償
*/
/* ============ New Listing Form V2 (§R-N+99 CEO 6-matrix UI 重設計) ============
對位 §R66 form-section-header-flex + §R69 form-toolbar / form-submit-bar
+ §R68 input-xl (elderly-friendly 18px desktop / 16px mobile)
+ §R36 iOS Safari 不 zoom + §R7 breadcrumb
設計: breadcrumb + page-title + matrix visual hint + 5 step section + 進階資料摺疊
============================================================= */
/* --- Form section card (對位 §R66 form-section) --- */
.form-section {
background: var(--sarahome-v3-surface-card, #FFFFFF);
border: 1px solid var(--sarahome-v3-border);
border-radius: 0.625rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
transition: box-shadow 0.15s ease;
}
.form-section:hover {
box-shadow: 0 2px 6px rgba(45, 125, 210, 0.06);
}
/* --- Form section header flex (§R66) --- */
.form-section-header-flex {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-3);
margin-bottom: 1rem;
padding-bottom: 0.625rem;
border-bottom: 2px solid var(--sarahome-v3-color-bg);
}
.form-section-header-flex .step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
background: var(--sarahome-v3-color-accent);
color: white;
border-radius: 50%;
font-size: var(--sarahome-v3-font-sm);
font-weight: 600;
font-family: var(--sarahome-v3-font-en);
flex-shrink: 0;
}
.form-section-header-flex h2 {
font-size: var(--sarahome-v3-font-md);
font-weight: 600;
margin: 0;
color: var(--sarahome-v3-color-fg);
flex: 1;
}
.form-section-header-flex .form-section-action {
display: flex;
gap: var(--sarahome-v3-space-2);
}
/* --- Form hint (對位 CEO §R-N+70 正式書面語, 移除 emoji prefix per §R-N+70 verdict) --- */
.form-hint {
display: block;
margin-top: 0.375rem;
font-size: 0.8125rem;
color: #6B7280;
line-height: 1.5;
}
/* §R-N+430 (2026-08-11) — Form helper text base class chain
對位 §R-N+290 style consistency: 全站 form-help-text 統一 class name.
對位 §R-N+140 12-dim: var(--sarahome-v3-color-text-*) / space-* 根因.
對位 §R-N+79 selective narrative: 5 form variants 覆蓋現存 inline pattern.
對位 §R-N+138 disk-truth: desktop base 根因 + mobile
(mobile.css @media (max-width: 768px) override 喺 commit 2 同步 ship). */
.form-help-text {
font-size: var(--sarahome-v3-font-sm);
color: var(--sarahome-v3-color-text-secondary, #6B7280);
margin: var(--sarahome-v3-space-2) 0 0 0;
line-height: 1.4;
}
.form-help-text--muted {
color: var(--sarahome-v3-color-text-tertiary, #9CA3AF);
}
.form-help-text--accent {
color: var(--sarahome-v3-color-accent, #1E5A9E);
}
.form-help-text--warning {
background-color: #FFF3CD;
padding: var(--sarahome-v3-space-2) var(--sarahome-v3-space-3);
border-radius: 6px;
border-left: 3px solid #F59E0B;
}
.form-help-text--lg {
font-size: 0.9rem;
}
/* --- Input XL (§R68 elderly-friendly 18px / 16px mobile) --- */
.input-xl,
input[type="text"].input-xl,
input[type="email"].input-xl,
input[type="tel"].input-xl,
input[type="number"].input-xl,
input[type="date"].input-xl,
input[type="datetime-local"].input-xl,
input[type="file"].input-xl,
select.input-xl,
textarea.input-xl {
width: 100%;
padding: var(--sarahome-v3-space-3) var(--sarahome-v3-space-4);
font-size: var(--sarahome-v3-font-md); /* 18px desktop */
line-height: 1.5;
border: 1.5px solid var(--sarahome-v3-border);
border-radius: var(--sarahome-v3-radius-sm);
background: var(--sarahome-v3-surface-card, #FFFFFF);
color: var(--sarahome-v3-color-fg);
font-family: var(--sarahome-v3-font-zh);
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.input-xl:focus,
input.input-xl:focus,
select.input-xl:focus,
textarea.input-xl:focus {
outline: none;
border-color: var(--sarahome-v3-color-accent);
box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15); /* WCAG focus ring */
}
.input-xl:hover:not(:focus):not(:disabled) {
border-color: #9CA3AF;
}
.input-xl:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--sarahome-v3-color-bg);
}
.input-xl::placeholder { color: #9CA3AF; }
@media (max-width: 768px) {
.input-xl,
input.input-xl,
select.input-xl,
textarea.input-xl {
font-size: var(--sarahome-v3-font-base); /* 16px (iOS Safari 不 zoom) */
padding: 0.625rem 0.875rem;
}
}
/* --- Select arrow SVG (§R68 modern cross-browser) --- */
select.input-xl {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236B7280' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
padding-right: 2.5rem;
}
textarea.input-xl {
min-height: 96px;
resize: vertical;
line-height: 1.6;
}
/* --- Form row flex (§R62-R67 對稱 column) --- */
.form-row-flex {
display: flex;
gap: var(--sarahome-v3-space-3);
flex-wrap: wrap;
}
.form-row-flex > .form-group {
flex: 1 1 0;
min-width: 0;
/* §R-N+4xxx+24 (2026-09-04, CEO verdict) — nested form-group 間距收緊
舊版 nested form-group 繼承 1.25rem margin-bottom, 喺 form-row-flex 內部太鬆。
新版: 0 (form-row-flex gap 控制), 對位 §R-N+264 a11y + §R-N+62 KISS。*/
margin-bottom: 0;
}
@media (max-width: 768px) {
.form-row-flex { flex-direction: column; gap: 0; }
.form-row-flex > .form-group { flex: 1 1 100%; }
}
/* --- Form toolbar (§R69) --- */
.form-toolbar {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-3);
flex-wrap: wrap;
margin: 1rem 0 1.25rem;
padding: 0.875rem 1rem;
background: rgba(45, 125, 210, 0.05);
border: 1px solid rgba(45, 125, 210, 0.15);
border-radius: var(--sarahome-v3-radius-sm);
font-size: var(--sarahome-v3-font-sm);
}
.form-toolbar .form-toolbar-hint {
color: #4B5563; /* P3-A11y (t_6828667f): 原 #6B7280 4.83:1 borderline → 7.55:1 AA */
font-size: 0.8125rem;
margin-left: auto;
}
/* §R-N+4xxx+27 (2026-09-04) — 砍走舊 ::before 「提示：」, 改由 SVG icon 提供視覺 prompt,
對位 §R-N+288 brand refresh (icon-only 取代文字 prefix)。
詳細新樣式喺 agent-new-listing.css:325 (.form-toolbar-hint prompt style pill)。*/
/* --- Form submit bar (§R69 dashed border) ---
§R-N+4xxx+13 (2026-09-04, CEO verdict 「new-listing-form 相關表格需要優化」):
舊版 justify-content:center 3 個 button 平均分布, 「預覽」split 咗 primary flow
修法: flex 左右兩組 — 「暫存草稿」靠左, 「預覽」+「確認上架」靠右,
「預覽」icon-only 收埋, primary confirm 最 prominent。
對位 §R-N+62 KISS: 純 layout change, 0 new selector。*/
.form-submit-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sarahome-v3-space-3);
padding: 1.5rem 0 1rem;
margin-top: 2rem;
border-top: 2px dashed rgba(45, 125, 210, 0.25);
}
.form-submit-bar .form-submit-bar-secondary {
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
}
.form-submit-bar .form-submit-bar-primary {
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-3);
margin-left: auto;
}
.form-submit-bar .submit-btn {
min-width: 240px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 700;
}
.form-submit-bar .btn-preview-listing {
min-width: 0;
padding: 0.5rem 0.875rem;
}
/* --- Step toggle (§R67 醒目分區) --- */
.step-toggle {
display: inline-flex;
background: var(--sarahome-v3-color-bg);
border-radius: var(--sarahome-v3-radius-sm);
padding: var(--sarahome-v3-space-1);
margin: 0 0 1.25rem;
border: 1px solid var(--sarahome-v3-border);
}
.step-toggle a {
padding: 0.5rem 1.25rem;
border-radius: 0.375rem;
color: var(--sarahome-v3-color-fg);
text-decoration: none;
font-weight: 500;
font-size: 0.9375rem;
transition: background 0.15s ease, color 0.15s ease;
}
.step-toggle a:hover {
background: rgba(45, 125, 210, 0.08);
text-decoration: none;
}
.step-toggle a.active {
background: var(--sarahome-v3-color-accent);
color: white;
}
/* --- Step label flex (§R67 checkbox 對位) --- */
.step-label-flex {
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
cursor: pointer;
font-weight: 500;
}
.step-label-flex input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
cursor: pointer;
accent-color: var(--sarahome-v3-color-accent);
}
/* --- btn-lavender (§R70 + 對位 page primary CTA) --- */
.btn-lavender,
.btn-primary-lavender {
background: var(--sarahome-v3-color-accent);
color: white;
padding: var(--sarahome-v3-space-4) var(--sarahome-v3-space-8);
border: none;
border-radius: var(--sarahome-v3-radius-sm);
font-size: 1.0625rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
font-family: var(--sarahome-v3-font-zh);
transition: background 0.15s ease, transform 0.1s ease;
}
.btn-lavender:hover,
.btn-primary-lavender:hover {
background: #1F4D5E; /* 對位 primary dark */
color: white;
text-decoration: none;
}
.btn-lavender:active,
.btn-primary-lavender:active {
transform: translateY(1px);
}
/* §R-N+31xx (2026-08-31) L4 audit P1-3 fix: 下架 button 紅色 variant。
對位 §R-N+62 KISS: 純 CSS variant, 0 template conditional change。
Specificity 0,2,0 (兩個 class) → 對位 page-level .btn-lavender 覆蓋 (super-admin-core.css 等) 。*/
.btn-lavender.btn-lavender-danger,
button.btn-lavender-danger {
background: #C0392B;
color: #fff;
}
.btn-lavender.btn-lavender-danger:hover,
button.btn-lavender-danger:hover {
background: #A02922;
color: #fff;
}
.btn-lavender:disabled,
.btn-primary-lavender:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-secondary-lavender {
background: var(--sarahome-v3-surface-card, #FFFFFF);
color: var(--sarahome-v3-color-accent);
padding: 0.625rem 1.25rem;
border: 1.5px solid var(--sarahome-v3-color-accent);
border-radius: var(--sarahome-v3-radius-sm);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
transition: background 0.15s ease;
}
.btn-secondary-lavender:hover {
background: rgba(45, 125, 210, 0.06);
color: var(--sarahome-v3-color-accent);
text-decoration: none;
}
/* --- Breadcrumb (§R7 UX) --- */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: #6B7280;
margin: 0 0 var(--sarahome-v3-space-3);
}
.breadcrumb a {
color: #6B7280;
text-decoration: none;
transition: color 0.15s ease;
}
.breadcrumb a:hover {
color: var(--sarahome-v3-color-accent);
text-decoration: underline;
}
.breadcrumb-separator {
color: #9CA3AF;
user-select: none;
}
.breadcrumb-list {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sarahome-v3-space-1);
}
.breadcrumb-list li[aria-current="page"] {
color: var(--sarahome-v3-color-fg);
font-weight: 500;
}
.breadcrumb-current {
color: var(--sarahome-v3-color-fg);
font-weight: 500;
}
/* --- Page subtitle (對位 V2 listing-card §R-N+70 正式書面語) --- */
.page-subtitle {
font-size: 0.9375rem;
color: #6B7280;
margin: 0 0 1.5rem;
line-height: 1.5;
}
/* --- Missing-fields banner (§R-N+132 CEO 改動)
取代 6-matrix hint,只列出未填好欄位。idle (全部填妥) 隱藏。 --- */
.missing-fields-banner {
margin: 0 0 1.25rem;
padding: 0.875rem 1rem;
background: rgba(217, 119, 6, 0.08);
border: 1px solid rgba(217, 119, 6, 0.32);
border-left: 4px solid #D97706;
border-radius: var(--sarahome-v3-radius-sm);
font-size: 0.875rem;
color: #7C2D12;
animation: missing-fields-fade-in 0.2s ease-out;
}
.missing-fields-banner.is-hidden { display: none; }
.missing-fields-banner-header {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-2);
margin-bottom: 0.5rem;
}
.missing-fields-banner-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #D97706;
color: white;
font-weight: 700;
font-size: 0.75rem;
flex-shrink: 0;
}
.missing-fields-banner-title {
font-weight: 600;
}
.missing-fields-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.missing-fields-list li {
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-1);
padding: 0.25rem 0.625rem;
background: var(--sarahome-v3-surface-card, #FFFFFF);
border: 1px solid rgba(217, 119, 6, 0.32);
border-radius: 999px;
font-size: 0.8125rem;
color: #7C2D12;
cursor: pointer;
transition: background 0.15s ease;
}
.missing-fields-list li:hover,
.missing-fields-list li:focus {
background: rgba(217, 119, 6, 0.16);
outline: none;
}
.missing-fields-list li::before {
content: "•";
color: #D97706;
font-weight: 700;
}
.missing-fields-list li.is-empty {
color: #15803D;
background: rgba(22, 163, 74, 0.08);
border-color: rgba(22, 163, 74, 0.32);
cursor: default;
}
.missing-fields-list li.is-empty::before { content: "✓"; color: #15803D; }
@keyframes missing-fields-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Advanced section (progressive disclosure, 對位 §R-N+98 進階資料摺疊) --- */
.advanced-section {
background: var(--sarahome-v3-surface-card, #FFFFFF);
border: 1px solid var(--sarahome-v3-border);
border-radius: 0.625rem;
margin-bottom: 1.25rem;
overflow: hidden;
}
.advanced-section > summary {
display: flex;
align-items: center;
gap: var(--sarahome-v3-space-3);
padding: var(--sarahome-v3-space-4) var(--sarahome-v3-space-6);
cursor: pointer;
font-weight: 600;
font-size: 1rem;
color: var(--sarahome-v3-color-fg);
background: var(--sarahome-v3-color-bg);
list-style: none;
user-select: none;
transition: background 0.15s ease;
}
.advanced-section > summary::-webkit-details-marker {
display: none;
}
.advanced-section > summary::before {
content: "▸";
color: var(--sarahome-v3-color-accent);
font-size: 0.875rem;
transition: transform 0.15s ease;
}
.advanced-section[open] > summary::before {
transform: rotate(90deg);
}
.advanced-section > summary:hover {
background: rgba(45, 125, 210, 0.05);
}
.advanced-section > summary .advanced-count {
margin-left: auto;
font-size: 0.8125rem;
color: #6B7280;
font-weight: 400;
}
.advanced-section > .advanced-content {
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--sarahome-v3-border);
}
/* --- Photo upload (§R68 file input visual) --- */
input[type="file"].input-xl {
padding: 0.625rem 1rem;
cursor: pointer;
}
input[type="file"].input-xl::file-selector-button {
background: var(--sarahome-v3-color-accent);
color: white;
border: none;
padding: var(--sarahome-v3-space-2) var(--sarahome-v3-space-4);
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
margin-right: 0.75rem;
font-family: var(--sarahome-v3-font-zh);
transition: background 0.15s ease;
}
input[type="file"].input-xl::file-selector-button:hover {
background: #1F4D5E;
}
/* --- Sub-label (§R27 0-inline: 細 label for form-row-flex 內 nested label) --- */
label.sub-label {
font-size: 0.85rem !important;
color: #6B7280;
font-weight: 500;
margin-bottom: 0.25rem;
}
/* --- Conditional section toggle (§R27 0-inline: 取代 inline display:none) --- */
.is-hidden { display: none; }
/* Listing card (對位 §7 Modern Minimalist listing card) */
.listing-card {
background: var(--sarahome-v3-surface-card, #FFFFFF);
border: 1px solid var(--sarahome-v3-border);
border-radius: var(--sarahome-v3-radius-sm);
padding: var(--sarahome-v3-space-4);
transition: box-shadow 0.2s;
overflow: hidden;
}
/* 對位 UX audit 2026-07-16: thumbnail placeholder (Phase 2 photo upload 仲未入 UI) */
.listing-card .listing-thumb {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #F0F7FF 0%, #E0EBF8 100%);
color: var(--sarahome-v3-color-accent);
margin: -1rem -1rem 0.75rem -1rem;
border-radius: 0.5rem 0.5rem 0 0;
position: relative;
}
.listing-card-v2 .listing-thumb svg {
opacity: 0.55;
}
/* §R-N+121 — direct img.listing-thumb 用 HTML5 ![]()
嘅 case
(對位 index.html + §R-N+115 patch pattern), 必須 clamp 同樣 */
.listing-card-v2 .listing-thumb:not(.listing-thumb-demo):not(.listing-thumb-house) {
width: 100%;
}
img.listing-thumb {
max-width: 100%;
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 0;
}
/* V2 (Squarefoot compact) — listing-card-v2: 4-col grid + 4/3 aspect (§R-N+120 unified compact)
§R-N+136 (2026-07-22) — AirBnb 風格升級: 大圓角 16px + 相片 3/2 佔比 + 呼吸感 spacing
對位 UIUX 研究 §2「去標籤化」與大圖優先 + §1 視覺語言大面積留白 */
.listing-card-v2 {
/* V27 → V29: padding reset only; flex layout delegated to specific selectors */
padding: 0;
text-decoration: none;
color: inherit;
background: var(--sarahome-v3-surface-card, #FFFFFF);
/* §R-N+201 Ship G: 對位 stretched-link pattern (§R-N+274 search.html precedent)
position: relative 確保 .listing-card-overlay 嘅 absolute 定位
relative 呢個 card (而非 viewport 或其他 ancestor)。
對位: my_listings + favorites page, 都用 stretched-link pattern。*/
position: relative;
border: 1px solid var(--sarahome-v3-border);
border-radius: 0.625rem;
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.listing-card-v2:hover {
text-decoration: none;
color: inherit;
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.10);
transform: translateY(-1px);
}
/* §R-N+136 — AirBnb 大圖優先: 3/2 aspect ratio (相片佔比 ~70%) */
.listing-card-v2 .listing-thumb {
aspect-ratio: 3 / 2;
margin: 0;
border-radius: 0;
overflow: hidden;
position: relative;
}
/* V6-K — 6 區 gradient demo image (對位 CEO 2026-07-16 verdict) */
.listing-thumb-demo {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
}
.listing-thumb-house {
opacity: 0.9;
color: white;
}
.listing-thumb-district {
position: absolute;
bottom: 0.5rem;
right: 0.75rem;
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* §R-N+360 Round 2 UX (C5 audit): 0-photo fallback 改善 (§R-N+159 selective narrative)
根因: 真實 listing 冇 listing_photos row, 對位 §R-N+138 disk-truth audit
Fix: SVG 64px (48→64) + 加 "尚未上載相片" label, 對位 §R-N+137 Airbnb visual hierarchy */
.listing-thumb-no-photo-label {
position: absolute;
bottom: 0.5rem;
left: 0.75rem;
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.35);
padding: 0.125rem 0.5rem;
border-radius: 4px;
letter-spacing: 0.025em;
}
/* §R-N+128 (CEO 2026-07-18) — §R-N+127 sub-region 39 個保持 gradient 但 UI dropdown 撤回 macro-only,
改返 macro 對位既 gradient map (氹仔 / 路環只保留 macro)
對位 §R-N+62 KISS + §R-N+121 既有 6 macro gradient preserved
*/
.listing-thumb-氹仔 { background: linear-gradient(135deg, #2D7DD2 0%, #1F4D5E 100%); }
.listing-thumb-澳門半島 { background: linear-gradient(135deg, #10B981 0%, #047857 100%); }
.listing-thumb-南灣 { background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%); }
.listing-thumb-新口岸 { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); }
.listing-thumb-黑沙環 { background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%); }
.listing-thumb-路環 { background: linear-gradient(135deg, #65A30D 0%, #3F6212 100%); }
/* §R-N+127 sub-region gradient — sub-region listings 同樣 fall back 至 macro gradient
via 「氹仔市中心」之 value matches 唔到時 default 即 fallback list-thumb-demo (冇 gradient)
為咗 prevent layout collapse, sub-region 全部用 inheritable 6 macro color 重抽
*/
.listing-thumb-祐漢,
.listing-thumb-關閘,
.listing-thumb-台山,
.listing-thumb-東方明珠,
.listing-thumb-筷子基,
.listing-thumb-青洲,
.listing-thumb-提督馬路,
.listing-thumb-望廈,
.listing-thumb-十月初五,
.listing-thumb-沙梨頭,
.listing-thumb-下環,
.listing-thumb-媽閣,
.listing-thumb-十六浦,
.listing-thumb-司打口,
.listing-thumb-雅廉訪大馬路,
.listing-thumb-二龍喉,
.listing-thumb-美副將,
.listing-thumb-高士德,
.listing-thumb-新橋,
.listing-thumb-水坑尾,
.listing-thumb-荷蘭園,
.listing-thumb-東望洋,
.listing-thumb-大三巴,
.listing-thumb-板樟堂,
.listing-thumb-白鴿巢,
.listing-thumb-鏡湖,
.listing-thumb-新馬路,
.listing-thumb-葡京,
.listing-thumb-西灣,
.listing-thumb-皇朝,
.listing-thumb-氹仔市中心,
.listing-thumb-氹仔舊城,
.listing-thumb-氹仔新區,
.listing-thumb-路環市區,
.listing-thumb-路環鄉村 { background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%); }
/* §R-N+136 — AirBnb 呼吸感: 加大 content padding + 行距
§R-N+277 (2026-07-30) — fix: 原本 rule `.listing-card-v2 > *:not(.listing-thumb)`
將 padding 應用到 thumb container 同 overlay (因為佢哋都唔係 class `.listing-thumb`),
導致 thumb 內 IMG 嘅 content area 由 280px 縮至 244px (左+右 18px padding 各)
改成只 target info element, 真正達到 §R-N+136 嘅 content padding 意圖
v0.76 (2026-08-09): padding 由 1.125rem → 1rem 對位 §R-N+290 (同 my_listings .agent-listing-card 一致)
v0.77 (2026-08-09): gap 0.375rem → 0.5rem, 對位 CEO feedback 「間隔需要再優化」
v0.80 (2026-08-09): 反向 closure — 過度 spacing 收緊, 對位 CEO feedback 「整個卡片的間距太多」
gap 0.5rem → 0.25rem (v0.77 升返去)
v0.81 (2026-08-09): padding 收緊 — top/bottom 14px → 10px, 對位 §R-N+62 KISS
整體 card info 高度省 ~8px, card 視覺密度提升 */
.listing-card-v2 > .listing-card-info {
padding-left: 0.875rem;
padding-right: 0.875rem;
padding-top: 0.625rem;
padding-bottom: 0.875rem;
display: flex;
flex-direction: column;
gap: var(--sarahome-v3-space-1);
}
.listing-card-v2 .listing-ref {
margin-top: 0;
padding-top: 0.5rem;
font-family: var(--sarahome-v3-font-en);
font-size: var(--sarahome-v3-font-xs);
color: #9CA3AF;
letter-spacing: 0.03em;
}
/* v0.78 (2026-08-09): 視覺層次強化 — title 字級 + district 淺色
對位 CEO feedback: 「間隔需要再優化一下」結構延伸 — 視覺分層更清
- title 1rem → 1.0625rem (略大, 視覺錨點)
- district 字色由 #6B7280 → #9CA3AF (更淺, 對位 §R-N+290 層次)
- meta 字色由 secondary → tertiary (更淺, 對位 §R-N+164 closure) */
.listing-card-v2 .listing-title {
font-size: var(--sarahome-v3-font-base);
font-weight: 600;
line-height: 1.35;
margin: 0 0 0.125rem 0;
color: var(--sarahome-v3-color-fg);
}
.listing-card-v2 .listing-district {
font-size: var(--sarahome-v3-font-sm);
color: var(--sarahome-v3-color-text-tertiary, #9CA3AF);
margin-bottom: 0;
}
.listing-card-v2 .listing-price {
color: var(--sarahome-v3-color-cta);
font-size: var(--sarahome-v3-font-md);
font-weight: 700;
line-height: 1.2;
font-family: var(--sarahome-v3-font-en);
letter-spacing: -0.01em;
}
.listing-card-v2 .listing-price .price-suffix {
font-size: var(--sarahome-v3-font-sm);
font-weight: 500;
color: #6B7280;
font-family: var(--sarahome-v3-font-zh);
}
/* §R-N+136 — AirBnb 去標籤化: 簡潔 meta chip, 更大 gap
v0.76 (2026-08-09): 同 my_listings 對位 — span 唔再用 pill background, 改 inline-flex
v0.77 (2026-08-09): margin-bottom 0.5rem → 0.625rem, 對位 §R-N+164 closure
v0.78 (2026-08-09): 字色由 secondary → tertiary, 視覺層次強化
v0.80 (2026-08-09): 反向 closure — margin-bottom 0.625rem → 0.25rem, 對位 CEO feedback
對位 §R-N+290 style consistency */
.listing-card-v2 .listing-meta {
display: flex;
flex-wrap: wrap;
gap: 0.375rem 0.625rem;
align-items: center;
font-size: var(--sarahome-v3-font-xs);
color: var(--sarahome-v3-color-text-tertiary, #9CA3AF);
margin-bottom: 0.25rem;
}
.listing-card-v2 .listing-meta span {
display: inline-flex;
align-items: center;
gap: var(--sarahome-v3-space-1);
background: transparent;
border: none;
color: inherit;
padding: 0;
font-size: inherit;
font-weight: 500;
}
.listing-card-v2 .btn-secondary {
margin: 0 1rem 1rem;
text-align: center;
}
/* §R-N+136 (2026-07-22) — 物業特色標籤 Tag (對位 UIUX 研究 §3 標籤化物業特點)
彩色微標籤: 新裝修 / 近輕軌 / 有會所 / 隨時約睇 */
.listing-tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0 1.125rem 1rem;
}
.listing-tag {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.4;
background: #EFF6FF;
color: #1D4ED8;
}
.listing-tags-detail {
padding: 0;
margin-bottom: 1.25rem;
}
.listing-tags-detail .listing-tag {
font-size: 0.8125rem;
padding: 0.3rem 0.75rem;
}
/* 對位 memory mobile-ux-elderly: btn-block 用全寬 */
.btn-block {
display: block;
width: 100%;
}
.btn-search {
width: 100%;
height: 100%;
min-height: 56px;
font-size: 1.125rem;
}
/* V2 — corner badge (top-right of thumb) */
/* §R-N+4xxx+10 (2026-09-04, CEO verdict 「badge-corner 放在右手邊」)
對位 §R-N+62 KISS: 1 CSS rule 改 left → right, 0 cascade 影響
對位 §R-N+264 a11y: 視覺位置改但 label text / 顏色 / contrast 唔變
對位 §R-N+138 disk-truth: 沿用 .badge-corner selector, 0 新 selector */
.badge-corner {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.25rem 0.625rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
color: white;
z-index: 2;
}
/* V2 — 4-col compact grid (Squarefoot style) — §R-N+120 auto-fill max 220px 統一卡片尺寸
§R-N+125 P55 : minmax 用 minmax(0, 1fr) 而唔係 minmax(220px, 1fr)
因為 grid item 預設 min-width: auto = content intrinsic min-width,
對位 long unbreakable text (中文 + listing_ref + price) 會超過 220px,
用 minmax(220px, 1fr) 會 1 column 排成 L-shape (§R-N+132.5 audit).
minmax(0, 1fr) 允許 grid 壓縮到 1fr, grid 4-3-2-1 column
對位 desktop / tablet / mobile . */
.listing-grid-v2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
gap: var(--sarahome-v3-space-4);
margin-top: 1.5rem;
/* §R-N+159 (CEO 2026-07-27) — align-items: stretch 撐齊 card 高度
§R-N+135.8 multi-v audit + §R-N+62 KISS */
align-items: stretch;
}
@media (min-width: 1100px) {
.listing-grid-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
.listing-grid-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.listing-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sarahome-v3-space-3); }
}
@media (max-width: 768px) {
.listing-grid-v2 { grid-template-columns: 1fr; }
}
/* V6-L — Hero padding 收細 (CEO 2026-07-16 verdict) */
.hero {
padding: 2.5rem 0 2.5rem;
border-radius: 0 0 1rem 1rem;
margin-bottom: 2rem;
/* §R-N+140: gradient 改由 .hero-v17 統一控制 (用 var()), 避免 specificity 競爭 */
}
.hero-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 0 1.5rem;
}
/* V6-B — Hero search-first (Option A: segmented toggle + 6 zone pill + Search CTA) */
.search-form-v2 {
background: var(--sarahome-v3-surface-card, #FFFFFF);
border-radius: var(--sarahome-v3-radius-md);
padding: var(--sarahome-v3-space-4);
box-shadow: 0 4px 12px rgba(45, 125, 210, 0.08);
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: var(--sarahome-v3-space-3);
}
/* V9-N — featured-listings 6→12 個 + meta inline · separator (對位 MaliMali + Squarefoot 真值 pattern) */
.listing-grid-v9n {
grid-template-columns: repeat(4, 1fr);
gap: var(--sarahome-v3-space-4);
}
.listing-meta-v9n {
display: flex;
flex-wrap: wrap;
gap: 0;
font-size: 0.8125rem;
color: var(--sarahome-v3-color-text-secondary, #4B5563);
margin-top: 0.25rem;
}
.listing-meta-v9n span {
white-space: nowrap;
}
.listing-meta-v9n span:not(:last-child)::after {
content: " · ";
color: var(--sarahome-v3-color-text-secondary, #9CA3AF);
margin: 0 0.25rem;
}
.featured-listings {
max-width: 1280px; /* §R-N+121 cap featured section 唔超過 1280px */
margin: 0 auto;
padding: 0 1.25rem;
}
.featured-listings-more {
text-align: center;
margin-top: 1.5rem;
}
@media (max-width: 768px) {
.listing-grid-v9n {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.listing-grid-v9n {
grid-template-columns: repeat(2, 1fr);
gap: var(--sarahome-v3-space-3);
}
}
@media (max-width: 768px) {
.listing-grid-v9n {
grid-template-columns: 1fr;
}
}
/* V6-B — Row 1: segmented Buy/Rent toggle (visual upgrade from