/* ========================================================================== chatMLS Blog — VR AI Labs Design System Version: 1.0.0 Quality bar: Stripe Press + Linear changelog + Vercel docs NOT a generic Tailwind template. Editorial, warm, precise. ========================================================================== */ /* -------------------------------------------------------------------------- Google Fonts -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=Inter:wght@400;500;600&display=swap'); /* -------------------------------------------------------------------------- Color Tokens — Light / "Paper" mode -------------------------------------------------------------------------- */ :root { /* Backgrounds */ --bg: #f6f4ef; /* warm paper — NEVER use #fff as page bg */ --surface: #fffdf9; /* card / panel surface */ --surface-2: #f2ede4; /* inset areas, key-takeaways bg */ /* Text */ --ink: #1f1a17; /* main text — NEVER use #000 */ --ink-muted: #73675d; /* secondary text */ --ink-faint: #9b8f85; /* captions, meta */ /* Borders — hairlines only, 0.5px or 1px */ --border: #e7ddcf; /* Brand */ --red: #C73B3B; /* chatMLS spark — CTAs, active, logo mark only */ --red-soft: #fde8e8; /* red tint bg */ /* Semantic */ --green: #1a6b3a; /* live / positive */ --blue: #2356b5; /* links only */ /* Shadows — warm-tinted, never generic gray */ --shadow-sm: 0 2px 8px rgba(31, 26, 23, 0.06); --shadow-md: 0 8px 24px rgba(31, 26, 23, 0.08); --shadow-float: 0 -4px 40px rgba(31, 26, 23, 0.10); /* Radii */ --radius-pill: 999px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 8px; --radius-xs: 4px; /* Spacing — 4px grid */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; } /* -------------------------------------------------------------------------- Color Tokens — Dark / "Console" mode Applied to .dark on or -------------------------------------------------------------------------- */ .dark { --bg: #0e0c0a; --surface: #1a1714; --surface-2: #252019; --ink: #f0ebe4; --ink-muted: #8a7d72; --ink-faint: #5c5249; --border: #2e2822; --red: #e05555; --red-soft: #2d1414; --green: #2a8f50; --blue: #4a7fd4; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28); --shadow-float: 0 -4px 40px rgba(0, 0, 0, 0.35); } /* -------------------------------------------------------------------------- Base Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--blue); text-decoration: none; transition: opacity 0.15s; } a:hover { opacity: 0.75; } img, video { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; font-size: inherit; } /* -------------------------------------------------------------------------- Typography — Editorial (Source Serif 4) -------------------------------------------------------------------------- */ .editorial-h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); } .editorial-h2 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); } .editorial-h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: 1.15rem; line-height: 1.4; color: var(--ink); } .editorial-body { font-size: 16px; line-height: 1.65; max-width: 680px; color: var(--ink); } .editorial-body p + p { margin-top: 1.2em; } .editorial-pull { font-family: "Source Serif 4", Georgia, serif; font-weight: 300; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; color: var(--ink-muted); border-left: 1px solid var(--red); padding-left: var(--sp-6); margin: var(--sp-8) 0; } /* -------------------------------------------------------------------------- Typography — UI (Inter) -------------------------------------------------------------------------- */ .ui-label { font-size: 13px; font-weight: 500; font-family: "Inter", sans-serif; color: var(--ink); line-height: 1.4; } .ui-caption { font-size: 11px; letter-spacing: 0.02em; color: var(--ink-faint); font-family: "Inter", sans-serif; line-height: 1.4; } .ui-overline { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-family: "Inter", sans-serif; } /* -------------------------------------------------------------------------- Chips -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-family: "Inter", sans-serif; font-weight: 500; color: var(--ink-muted); background: var(--surface); cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none; line-height: 1; } .chip:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); } .chip.active { border-color: var(--red); color: var(--red); background: var(--red-soft); } .chip-filled { background: var(--red); color: #fff; border-color: var(--red); } .chip-filled:hover { opacity: 0.88; color: #fff; background: var(--red); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--red); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; font-family: "Inter", sans-serif; cursor: pointer; transition: opacity 0.15s; text-decoration: none; line-height: 1; white-space: nowrap; } .btn-primary:hover { opacity: 0.88; color: #fff; } .btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; font-family: "Inter", sans-serif; cursor: pointer; transition: all 0.15s; text-decoration: none; line-height: 1; white-space: nowrap; } .btn-outline:hover { border-color: var(--ink-muted); color: var(--ink); background: var(--surface-2); } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; color: var(--ink-muted); border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; font-family: "Inter", sans-serif; cursor: pointer; transition: all 0.15s; text-decoration: none; } .btn-ghost:hover { color: var(--ink); background: var(--surface-2); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-hover { transition: box-shadow 0.18s, transform 0.18s; } .card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* -------------------------------------------------------------------------- Float Widget DNA (all AI panels) -------------------------------------------------------------------------- */ .float-widget { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 253, 249, 0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-float); z-index: 100; } .dark .float-widget { background: rgba(26, 23, 20, 0.94); } .float-panel { background: rgba(255, 253, 249, 0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-float); } .dark .float-panel { background: rgba(26, 23, 20, 0.94); } /* -------------------------------------------------------------------------- Hairline -------------------------------------------------------------------------- */ .hairline { border: 0; border-top: 0.5px solid var(--border); } .hairline-v { border: 0; border-left: 0.5px solid var(--border); } /* -------------------------------------------------------------------------- Progress Bar (reading indicator) -------------------------------------------------------------------------- */ .progress-bar-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--surface-2); z-index: 200; } .progress-bar-fill { height: 100%; background: var(--red); transition: width 0.1s linear; } /* -------------------------------------------------------------------------- Red Dot (live / status indicator) -------------------------------------------------------------------------- */ .red-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; flex-shrink: 0; } .red-dot.pulse { animation: pulse-dot 2s ease-in-out infinite; } /* -------------------------------------------------------------------------- Badges -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; font-family: "Inter", sans-serif; letter-spacing: 0.01em; line-height: 1.4; } .badge-red { background: var(--red-soft); color: var(--red); } .badge-green { background: #dcfce7; color: var(--green); } .dark .badge-green { background: #0e2e1a; color: #3db86e; } .badge-ink { background: var(--surface-2); color: var(--ink-muted); } /* -------------------------------------------------------------------------- State Switcher (tab bar) -------------------------------------------------------------------------- */ .state-switcher { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface); padding: 0 24px; position: sticky; top: 0; z-index: 50; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .state-switcher::-webkit-scrollbar { display: none; } .state-btn { padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--ink-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: "Inter", sans-serif; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .state-btn:hover { color: var(--ink); } .state-btn.active { color: var(--red); border-bottom-color: var(--red); } /* -------------------------------------------------------------------------- Key Takeaway / Callout -------------------------------------------------------------------------- */ .callout { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6); } .callout-red { background: var(--red-soft); border-color: rgba(199, 59, 59, 0.18); } /* -------------------------------------------------------------------------- Listing Card (MLS) -------------------------------------------------------------------------- */ .listing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 0.18s, transform 0.18s; } .listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .listing-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); } .listing-card__body { padding: var(--sp-4) var(--sp-5); } .listing-card__price { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .listing-card__address { font-size: 13px; color: var(--ink-muted); margin-top: 2px; } .listing-card__meta { font-size: 12px; color: var(--ink-faint); margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); } /* -------------------------------------------------------------------------- Skeleton / Shimmer Loading -------------------------------------------------------------------------- */ .skeleton { background: linear-gradient( 90deg, var(--surface-2) 0%, var(--border) 40%, var(--surface-2) 80% ); background-size: 400px 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-xs); } /* -------------------------------------------------------------------------- Animations -------------------------------------------------------------------------- */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes glow-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 59, 59, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(199, 59, 59, 0.1); } } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* -------------------------------------------------------------------------- Reduced Motion Override -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Layout Utilities -------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-6); } .container-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--sp-6); } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-gap-2 { display: flex; align-items: center; gap: var(--sp-2); } .flex-gap-3 { display: flex; align-items: center; gap: var(--sp-3); } .flex-gap-4 { display: flex; align-items: center; gap: var(--sp-4); } /* -------------------------------------------------------------------------- Inline SVG Icon Helpers All icons: 1.5px stroke, rounded linecap, 16x16 or 20x20 -------------------------------------------------------------------------- */ .icon { display: inline-block; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .icon-16 { width: 16px; height: 16px; } .icon-20 { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- Blog Nav -------------------------------------------------------------------------- */ .blog-nav { background: var(--surface); border-bottom: 0.5px solid var(--border); position: sticky; top: 0; z-index: 80; } .blog-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--sp-6); max-width: 1120px; margin: 0 auto; } .blog-nav__wordmark { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; } .blog-nav__wordmark .logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); } .blog-nav__links { display: flex; align-items: center; gap: var(--sp-1); } /* -------------------------------------------------------------------------- Article Hero -------------------------------------------------------------------------- */ .article-hero { padding: var(--sp-16) 0 var(--sp-10); max-width: 720px; margin: 0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); } .article-hero__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .article-hero__date { font-size: 12px; color: var(--ink-faint); } .article-byline { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 0.5px solid var(--border); } .article-byline__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); object-fit: cover; flex-shrink: 0; } /* -------------------------------------------------------------------------- Blog Feed Card -------------------------------------------------------------------------- */ .feed-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: grid; grid-template-columns: 1fr 200px; transition: box-shadow 0.18s; text-decoration: none; color: inherit; } @media (max-width: 640px) { .feed-card { grid-template-columns: 1fr; } } .feed-card:hover { box-shadow: var(--shadow-md); } .feed-card__body { padding: var(--sp-6); } .feed-card__image { width: 100%; height: 100%; min-height: 160px; object-fit: cover; background: var(--surface-2); } /* -------------------------------------------------------------------------- AI Chat Float (content-aware, no hard overlay) -------------------------------------------------------------------------- */ .ai-chat-handle { width: 100%; padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .ai-chat-handle__label { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); } .ai-chat-input-row { padding: 0 var(--sp-6) var(--sp-5); display: flex; gap: var(--sp-2); } .ai-chat-input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.15s; } .ai-chat-input::placeholder { color: var(--ink-faint); } .ai-chat-input:focus { border-color: var(--red); } /* -------------------------------------------------------------------------- Responsive Helpers -------------------------------------------------------------------------- */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } }