/* ===================================================================== DealMate.ai — Unified Design System (css/dealmate-ui.css) --------------------------------------------------------------------- Single source of truth that carries the loved #welcome hero look (css/landing-hero.css) across the rest of index.html: the homeowner portal, business/provider portal, SkillShare, and the pricing / seminars / real-estate / badges feature modules. Loaded LAST in so it wins specificity over styles.css, homeowner-styles.css and inline blocks WITHOUT editing 12k lines of legacy CSS. Two layers: 1. Tokens + reusable primitives (.dm-*). 2. "Bridge" overrides that re-skin the existing class names each module already uses (.modern-card, .module-card, .pricing-card…). IMPORTANT: every bridge rule is scoped under a module container (#businessPortal, #homeownerPortal, #pricing, #realestate, #seminars, #earnbadges, .module-section) so nothing here can reach into the #welcome hero or the pre-sign-in screens. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap'); :root { /* Brand + ink (promoted from the hero's scoped --dm-hero-* vars) */ --dm-brand: #2f7df5; --dm-brand-rgb: 47, 125, 245; --dm-brand-deep: #2563eb; --dm-grad-1: #93acf5; --dm-grad-2: #6f8ef2; --dm-ink: #1f2733; --dm-muted: #7a8398; --dm-faint: #9aa3b5; /* Surfaces */ --dm-surface: #ffffff; --dm-surface-2: #f6f8fc; --dm-bg: #eef2f8; --dm-line: rgba(15, 23, 42, 0.06); --dm-line-2: rgba(15, 23, 42, 0.1); /* Radii */ --dm-r-lg: 24px; --dm-r: 18px; --dm-r-sm: 14px; --dm-r-pill: 999px; /* Shadows */ --dm-shadow-card: 0 18px 40px -22px rgba(20, 31, 64, 0.30), 0 1px 0 rgba(255, 255, 255, 0.6) inset; --dm-shadow-soft: 0 8px 22px -14px rgba(20, 31, 64, 0.28); --dm-shadow-cta: 0 16px 30px -12px rgba(111, 142, 242, 0.65); --dm-shadow-hover: 0 24px 46px -22px rgba(20, 31, 64, 0.38); /* Type */ --dm-font-head: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --dm-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Status tints */ --dm-green: #0ea271; --dm-amber: #d99100; --dm-red: #e0463f; } /* ===================================================================== 1. REUSABLE PRIMITIVES ===================================================================== */ .dm-card { background: var(--dm-surface); border: 1px solid var(--dm-line); border-radius: var(--dm-r); box-shadow: var(--dm-shadow-soft); } .dm-card--glass { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--dm-shadow-card); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } .dm-section-title { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.02em; color: var(--dm-ink); } .dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--dm-r-pill); padding: 12px 22px; font-family: var(--dm-font-body); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .dm-btn--primary { background: linear-gradient(135deg, var(--dm-grad-1) 0%, var(--dm-grad-2) 100%); color: #fff; box-shadow: var(--dm-shadow-cta); } .dm-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 20px 36px -12px rgba(111, 142, 242, 0.7); } .dm-btn--ghost { background: #fff; color: var(--dm-ink); border-color: var(--dm-line-2); } .dm-btn--ghost:hover { border-color: rgba(var(--dm-brand-rgb), 0.45); color: var(--dm-brand); background: #fff; } .dm-btn:active { transform: translateY(0) scale(0.99); } .dm-input { width: 100%; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); padding: 13px 15px; font-family: var(--dm-font-body); font-size: 15px; color: var(--dm-ink); background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.18s ease, border-color 0.18s ease; } .dm-input:focus { outline: none; border-color: rgba(var(--dm-brand-rgb), 0.45); box-shadow: 0 0 0 4px rgba(var(--dm-brand-rgb), 0.12); } .dm-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--dm-r-pill); padding: 5px 12px; font-family: var(--dm-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; background: rgba(var(--dm-brand-rgb), 0.12); color: var(--dm-brand-deep); } /* ===================================================================== 2. BUSINESS / PROVIDER PORTAL (#businessPortal) ===================================================================== */ #businessPortal { font-family: var(--dm-font-body); color: var(--dm-ink); } /* Header --------------------------------------------------------------*/ #businessPortal .modern-portal-header { border-radius: var(--dm-r-lg); border: 1px solid var(--dm-line); padding: 24px 28px; box-shadow: var(--dm-shadow-soft); background: radial-gradient(120% 140% at 0% 0%, rgba(147, 172, 245, 0.16) 0%, rgba(255, 255, 255, 0) 55%), #fff; } #businessPortal .portal-avatar { background: linear-gradient(135deg, var(--dm-grad-1), var(--dm-grad-2)); box-shadow: 0 8px 20px -10px rgba(111, 142, 242, 0.7); } #businessPortal .portal-brand .portal-title { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.02em; color: var(--dm-ink) !important; } #businessPortal .portal-brand .portal-subtitle { color: var(--dm-muted); } #businessPortal .availability-toggle-header { background: var(--dm-surface-2); border: 1px solid var(--dm-line); border-radius: var(--dm-r-pill); padding: 8px 16px; } #businessPortal .availability-toggle-header .toggle-switch.available { background-color: var(--dm-green); } #businessPortal .modern-logout-btn { background: #fff; color: var(--dm-ink); border: 1px solid var(--dm-line-2); border-radius: var(--dm-r-pill); font-family: var(--dm-font-body); font-weight: 700; transition: all 0.15s ease; } #businessPortal .modern-logout-btn:hover { border-color: rgba(var(--dm-brand-rgb), 0.45); color: var(--dm-brand); background: #fff; } /* Action cards --------------------------------------------------------*/ #businessPortal .modern-card { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); padding: 22px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #businessPortal .modern-card:hover { transform: translateY(-3px); box-shadow: var(--dm-shadow-hover); border-color: rgba(var(--dm-brand-rgb), 0.3); } #businessPortal .card-title { font-family: var(--dm-font-head); font-weight: 700; letter-spacing: -0.01em; color: var(--dm-ink); } #businessPortal .card-description { color: var(--dm-muted); } /* Tinted icon chips — give the (previously all-gray) color classes life */ #businessPortal .card-icon { border-radius: var(--dm-r-sm); background: rgba(var(--dm-brand-rgb), 0.12); color: var(--dm-brand); transition: transform 0.18s ease; } #businessPortal .modern-card:hover .card-icon { transform: scale(1.06); } #businessPortal .card-icon.blue { background: rgba(47, 125, 245, 0.12); color: #2f7df5; } #businessPortal .card-icon.green { background: rgba(16, 185, 129, 0.13); color: #0ea271; } #businessPortal .card-icon.orange { background: rgba(249, 115, 22, 0.13); color: #ea6a12; } #businessPortal .card-icon.purple { background: rgba(139, 92, 246, 0.13); color: #7c4ddb; } #businessPortal .card-icon.teal { background: rgba(20, 184, 166, 0.13); color: #0d9488; } #businessPortal .card-icon.yellow { background: rgba(245, 179, 11, 0.16); color: #c98a00; } #businessPortal .card-icon.indigo { background: rgba(99, 102, 241, 0.13); color: #5457e0; } #businessPortal .card-icon.red { background: rgba(239, 68, 68, 0.12); color: #e0463f; } /* Card action button = refined ghost; gradient on the primary one */ #businessPortal .card-button { border-radius: var(--dm-r-pill); border: 1px solid var(--dm-line-2); font-family: var(--dm-font-body); font-weight: 700; color: var(--dm-ink); transition: all 0.15s ease; } #businessPortal .card-button:not(.feature-disabled):hover { border-color: rgba(var(--dm-brand-rgb), 0.45); color: var(--dm-brand); background: #fff; } #businessPortal .card-button.feature-disabled, #businessPortal .card-button.feature-disabled:hover { border-radius: var(--dm-r-pill); } /* Jobs dashboard: earnings, stats, job cards --------------------------*/ #businessPortal .dashboard-content-area .provider-dashboard-section, #businessPortal .provider-dashboard-section { border-radius: var(--dm-r); border: 1px solid var(--dm-line); overflow: hidden; box-shadow: var(--dm-shadow-soft); background: #fff; } #businessPortal .earnings-bar { background: linear-gradient(135deg, rgba(147, 172, 245, 0.18), rgba(111, 142, 242, 0.12)); border-bottom: 1px solid var(--dm-line); } #businessPortal .earnings-amount { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.02em; color: var(--dm-brand-deep); } #businessPortal .earnings-label { color: var(--dm-muted); } #businessPortal .stats-grid { background: var(--dm-surface-2); } #businessPortal .stat-card { border-radius: var(--dm-r-sm); border: 1px solid var(--dm-line); box-shadow: 0 4px 12px -10px rgba(20, 31, 64, 0.3); } #businessPortal .stat-value { font-family: var(--dm-font-head); font-weight: 700; color: var(--dm-ink); } #businessPortal .stat-label { color: var(--dm-muted); } #businessPortal .job-card { border-radius: var(--dm-r-sm); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #businessPortal .job-card:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-hover); border-color: rgba(var(--dm-brand-rgb), 0.25); } #businessPortal .job-title { font-family: var(--dm-font-head); font-weight: 700; color: var(--dm-ink); } #businessPortal .job-status { border-radius: var(--dm-r-pill); font-weight: 700; letter-spacing: 0.02em; } /* Payment methods list — fix trash-can alignment + match card language. The delete button previously had only inline styles and an undefined container, so the emoji floated top-right off-center. Give it a fixed square box centered against the 40px payment icon. */ #paymentsManagerSection .payment-method-card { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); } #paymentsManagerSection .payment-method-header { align-items: flex-start; gap: 12px; } #paymentsManagerSection .payment-method-actions { display: flex; align-items: center; flex-shrink: 0; } #paymentsManagerSection .btn-delete-method { display: inline-flex; align-items: center; justify-content: center; width: 40px; /* matches .payment-icon height so centers align */ height: 40px; padding: 0; border: none; background: none; color: var(--dm-red); border-radius: 10px; font-size: 17px; line-height: 1; cursor: pointer; transition: background 0.15s ease; } #paymentsManagerSection .btn-delete-method:hover { background: rgba(224, 70, 63, 0.12); } /* SkillShare section — replace the flat, square, full-bleed panels with rounded cards that echo the hero (brand-gradient intro, soft cards). */ #skillShareSection .skillshare-content { padding: 0; display: flex; flex-direction: column; gap: 14px; } #skillShareSection .skillshare-intro { background: linear-gradient(135deg, var(--dm-brand) 0%, var(--dm-grad-2) 100%); border-radius: var(--dm-r); padding: 26px 24px; box-shadow: 0 18px 34px -20px rgba(47, 125, 245, 0.7); } #skillShareSection .skillshare-intro p { font-family: var(--dm-font-body); font-weight: 600; } #skillShareSection .skillshare-form-container { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); padding: 20px; } /* SkillShare tags inside the business portal */ #businessPortal .service-tag, #homeownerPortal .service-tag { border-radius: var(--dm-r-pill); background: rgba(var(--dm-brand-rgb), 0.12); color: var(--dm-brand-deep); border: 1px solid rgba(var(--dm-brand-rgb), 0.18); font-weight: 700; } /* ===================================================================== 3. HOMEOWNER PORTAL (#homeownerPortal) ===================================================================== */ #homeownerPortal { font-family: var(--dm-font-body); color: var(--dm-ink); } /* Header: brand gradient instead of flat #336699 */ #homeownerPortal .portal-header { background: linear-gradient(135deg, var(--dm-brand) 0%, var(--dm-grad-2) 100%); border-radius: var(--dm-r); padding: 16px 22px; box-shadow: 0 16px 30px -18px rgba(47, 125, 245, 0.6); } #homeownerPortal .portal-header .portal-title h3 { font-family: var(--dm-font-head); font-weight: 700; letter-spacing: -0.01em; } #homeownerPortal .logout-btn { border-radius: var(--dm-r-pill); font-family: var(--dm-font-body); font-weight: 700; } /* Sections */ #homeownerPortal .portal-section { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); } #homeownerPortal .portal-section h4 { font-family: var(--dm-font-head); } /* Module cards */ #homeownerPortal .module-card { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #homeownerPortal .module-card:not(.is-disabled):hover { transform: translateY(-3px); box-shadow: var(--dm-shadow-hover); border-color: rgba(var(--dm-brand-rgb), 0.3); } #homeownerPortal .module-icon { background: rgba(var(--dm-brand-rgb), 0.1); border-radius: var(--dm-r-sm); transition: transform 0.18s ease, background 0.18s ease; } #homeownerPortal .module-card:not(.is-disabled):hover .module-icon { background: rgba(var(--dm-brand-rgb), 0.16); transform: scale(1.06); } #homeownerPortal .module-card h3 { font-family: var(--dm-font-head); font-weight: 700; color: var(--dm-ink); } #homeownerPortal .module-card p { color: var(--dm-muted); } #homeownerPortal .module-card .module-card-badge { border-radius: var(--dm-r-pill); background: rgba(var(--dm-brand-rgb), 0.12); color: var(--dm-brand-deep); padding: 4px 10px; } /* Reserve space so the absolutely-positioned "Coming soon" badge never overlaps the card title (esp. long titles on narrow screens). */ #homeownerPortal .module-card.is-disabled .module-card-content h3 { padding-right: 92px; } /* ── StreetTalk hero (opens the /streettalk neighborhood app) ───────────── Warm, illustrated banner that echoes the StreetTalk app's own hero so the homeowner recognises where the button takes them. */ #homeownerPortal .streettalk-hero { display: block; margin: 0 0 22px; border-radius: 22px; overflow: hidden; text-decoration: none; background: linear-gradient(160deg, #f7ece1 0%, #f1ddcd 100%); border: 1px solid #e7d3c0; box-shadow: 0 10px 30px rgba(150, 95, 60, 0.14); transition: transform 0.2s ease, box-shadow 0.2s ease; } #homeownerPortal .streettalk-hero:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(150, 95, 60, 0.22); } #homeownerPortal .streettalk-hero__media { position: relative; line-height: 0; } #homeownerPortal .streettalk-hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } #homeownerPortal .streettalk-hero__pins { position: absolute; inset: 0; pointer-events: none; } #homeownerPortal .streettalk-hero__pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #fffdfb; border: 1px solid #efe2d6; border-radius: 999px; box-shadow: 0 6px 16px rgba(120, 80, 50, 0.18); font-size: 12px; font-weight: 600; color: #3a322c; white-space: nowrap; } #homeownerPortal .streettalk-hero__pin .st-ava { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #3a322c; /* overridden inline per-neighbour to match the app's tone */ letter-spacing: 0.2px; } #homeownerPortal .streettalk-hero__pin .st-name { flex-shrink: 0; white-space: nowrap; padding-right: 2px; } #homeownerPortal .streettalk-hero__pin .st-dot { width: 7px; height: 7px; border-radius: 50%; background: #7fa07a; flex-shrink: 0; } #homeownerPortal .streettalk-hero__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 20px; } #homeownerPortal .streettalk-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #bd5c39; } #homeownerPortal .streettalk-hero__title { margin: 7px 0 4px; font-family: var(--dm-font-head); font-size: 20px; font-weight: 700; color: #2f2620; line-height: 1.25; } #homeownerPortal .streettalk-hero__sub { margin: 0; font-size: 14px; color: #7a6a5d; line-height: 1.45; } #homeownerPortal .streettalk-hero__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #c1623c; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(193, 98, 60, 0.35); transition: background 0.18s ease; } #homeownerPortal .streettalk-hero:hover .streettalk-hero__cta { background: #ab502e; } @media (max-width: 560px) { #homeownerPortal .streettalk-hero__body { flex-direction: column; align-items: stretch; text-align: left; } #homeownerPortal .streettalk-hero__cta { justify-content: center; } #homeownerPortal .streettalk-hero__pin { font-size: 11px; } } /* Profile / request cards inside sections */ #homeownerPortal .service-request-card, #homeownerPortal .profile-card { border-radius: var(--dm-r-sm); background: var(--dm-surface-2); border: 1px solid var(--dm-line); } /* Service Summary overview card — replace the dated solid color-band stat tiles with soft cards: a tinted icon chip + Sora number. */ #overview-card .oc-surface { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); padding: 22px; font-family: var(--dm-font-body); } #overview-card .oc-header h4 { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.02em; color: var(--dm-ink); font-size: 18px; } #overview-card .btn-close-section { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--dm-line-2); background: #fff; color: var(--dm-muted); border-radius: var(--dm-r-pill); padding: 7px 14px; font-family: var(--dm-font-body); font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.15s ease; } #overview-card .btn-close-section:hover { border-color: rgba(var(--dm-brand-rgb), 0.45); color: var(--dm-brand); } #overview-card .btn-close-section svg path { stroke: currentColor; } /* Stat tiles: flat soft cards (override the grid band layout) */ #overview-card .oc-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 20px 10px; border-radius: var(--dm-r-sm); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); background: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #overview-card .oc-stat:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-hover); border-color: rgba(var(--dm-brand-rgb), 0.25); } /* Icon becomes a soft tinted chip instead of a full-width color band */ #overview-card .oc-stat-top { width: 46px; height: 46px; border-radius: 13px; flex: none; } #overview-card .oc-stat--orange .oc-stat-top { background: rgba(249, 115, 22, 0.13); color: #ea6a12; } #overview-card .oc-stat--green .oc-stat-top { background: rgba(16, 185, 129, 0.14); color: #0ea271; } #overview-card .oc-stat--blue .oc-stat-top { background: rgba(47, 125, 245, 0.12); color: #2f7df5; } #overview-card .oc-stat-bottom { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; } #overview-card .oc-number { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.02em; font-size: 30px; color: var(--dm-ink); margin: 0; } #overview-card .oc-label { font-family: var(--dm-font-body); font-weight: 600; color: var(--dm-muted); } /* Recent Activity */ #overview-card .oc-activity-title h3 { font-family: var(--dm-font-head); font-weight: 700; color: var(--dm-ink); } #overview-card .oc-activity-item { border-radius: var(--dm-r-sm); border: 1px solid var(--dm-line); background: var(--dm-surface-2); } /* Keep the three stat tiles in a row on mobile (they're compact now). */ #overview-card .oc-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 420px) { #overview-card .oc-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } #overview-card .oc-stat { padding: 14px 6px; gap: 8px; } #overview-card .oc-stat-top { width: 40px; height: 40px; border-radius: 11px; } #overview-card .oc-number { font-size: 23px; } #overview-card .oc-label { font-size: 12px; } } /* ===================================================================== 4. FEATURE MODULES (#pricing, #seminars, #realestate, #earnbadges) ===================================================================== */ .module-section { font-family: var(--dm-font-body); } .module-section .module-header h2 { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.02em; color: var(--dm-ink); } .module-section .module-header p { color: var(--dm-muted); } /* Pricing -------------------------------------------------------------*/ #pricing .pricing-card { border-radius: var(--dm-r-lg); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); background: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease; } #pricing .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--dm-shadow-hover); } #pricing .pricing-card.featured { border: 1px solid rgba(var(--dm-brand-rgb), 0.35); box-shadow: 0 30px 60px -28px rgba(47, 125, 245, 0.5); background: radial-gradient(120% 120% at 50% 0%, rgba(147, 172, 245, 0.14) 0%, rgba(255, 255, 255, 0) 60%), #fff; } #pricing .pricing-card h3 { font-family: var(--dm-font-head); font-weight: 700; color: var(--dm-ink); } #pricing .plan-badge { border-radius: var(--dm-r-pill); background: linear-gradient(135deg, var(--dm-grad-1), var(--dm-grad-2)); color: #fff; font-weight: 700; letter-spacing: 0.01em; box-shadow: var(--dm-shadow-cta); } #pricing .price .amount { font-family: var(--dm-font-head); font-weight: 800; letter-spacing: -0.03em; color: var(--dm-ink); } #pricing .price .period { color: var(--dm-muted); } #pricing .billing-info { color: var(--dm-muted); } #pricing .features li { color: var(--dm-ink); } /* Real estate ---------------------------------------------------------*/ #realestate .realestate-intro { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); background: radial-gradient(120% 140% at 0% 0%, rgba(147, 172, 245, 0.14) 0%, rgba(255, 255, 255, 0) 55%), #fff; } #realestate .realestate-intro h3, #realestate .homeowner-form h3 { font-family: var(--dm-font-head); color: var(--dm-ink); } #realestate .feature-item { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); background: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease; } #realestate .feature-item:hover { transform: translateY(-3px); box-shadow: var(--dm-shadow-hover); } #realestate .feature-item h4 { font-family: var(--dm-font-head); color: var(--dm-ink); } #realestate .feature-item p { color: var(--dm-muted); } #realestate .homeowner-form { border-radius: var(--dm-r); border: 1px solid var(--dm-line); box-shadow: var(--dm-shadow-soft); background: #fff; } #realestate .needs-form input, #realestate .needs-form select, #realestate .needs-form textarea { width: 100%; border: 1px solid var(--dm-line); border-radius: var(--dm-r-sm); padding: 13px 15px; font-family: var(--dm-font-body); font-size: 15px; color: var(--dm-ink); background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.18s ease, border-color 0.18s ease; } #realestate .needs-form input:focus, #realestate .needs-form select:focus, #realestate .needs-form textarea:focus { outline: none; border-color: rgba(var(--dm-brand-rgb), 0.45); box-shadow: 0 0 0 4px rgba(var(--dm-brand-rgb), 0.12); } /* Earn badges (already modern — align type + CTA only) ----------------*/ #earnbadges h2, #earnbadges h3, #earnbadges h4 { font-family: var(--dm-font-head); } #earnbadges .badge-card { transition: transform 0.18s ease, box-shadow 0.18s ease; } #earnbadges .badge-card:hover { transform: translateY(-3px); box-shadow: var(--dm-shadow-hover); } /* ===================================================================== 5. SHARED CTA BUTTONS inside index.html feature modules (scoped to modules so sign-in / hero buttons are untouched) ===================================================================== */ .module-section .btn-primary, #realestate .btn-primary, #earnbadges .btn-primary, #pricing .btn-primary { background: linear-gradient(135deg, var(--dm-grad-1) 0%, var(--dm-grad-2) 100%); color: #fff; border: none; border-radius: var(--dm-r-pill); font-family: var(--dm-font-body); font-weight: 700; letter-spacing: -0.01em; box-shadow: var(--dm-shadow-cta); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .module-section .btn-primary:hover, #realestate .btn-primary:hover, #earnbadges .btn-primary:hover, #pricing .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 20px 36px -12px rgba(111, 142, 242, 0.7); } .module-section .btn-secondary { background: #fff; color: var(--dm-ink); border: 1px solid var(--dm-line-2); border-radius: var(--dm-r-pill); font-family: var(--dm-font-body); font-weight: 700; transition: all 0.15s ease; } .module-section .btn-secondary:hover { border-color: rgba(var(--dm-brand-rgb), 0.45); color: var(--dm-brand); } /* ===================================================================== 5b. GLOBAL SITE HEADER (.main-header, injected by js/header.js) The "DealMate.ai ☰" bar shown across every inner view. Re-skinned to echo the hero: a glassy bar, Sora wordmark with an azure ".ai" accent, and a hero-style hamburger. (Hidden on the welcome view via body.dm-landing .main-header — so the hero is untouched.) Selectors are prefixed with .main-header so they also win over the runtime-injected