/* ============================================================================ Solutions — the dark, premium PropTech landing page. Namespace: .sol-*. Deliberately self-contained rather than built on the --wr-* light-surface tokens, because this page is a different visual system: a midnight-blue canvas with blue/purple gradient accents and white type. It defines its own token block below so nothing here depends on, or leaks into, the app shell's palette. The page sets .sol-page on its own root element only -- it never restyles , so the public header/footer around it keep their normal appearance. ============================================================================ */ .sol-page { /* ---- palette ---- */ --sol-bg: #070b18; --sol-bg-2: #0c1226; --sol-surface: rgba(255, 255, 255, 0.04); --sol-surface-2: rgba(255, 255, 255, 0.07); --sol-border: rgba(255, 255, 255, 0.10); --sol-border-strong: rgba(255, 255, 255, 0.18); --sol-ink: #f4f6fb; --sol-ink-dim: #a8b2ca; --sol-ink-faint: #6d7794; --sol-blue: #4d7cfe; --sol-blue-2: #7aa2ff; --sol-purple: #9d6bff; --sol-purple-2: #c4a3ff; --sol-mint: #3ddc97; --sol-gold: #f5c451; --sol-gradient: linear-gradient(135deg, var(--sol-blue) 0%, var(--sol-purple) 100%); --sol-gradient-soft: linear-gradient(135deg, rgba(77, 124, 254, 0.18) 0%, rgba(157, 107, 255, 0.18) 100%); --sol-radius: 18px; --sol-radius-sm: 12px; position: relative; background: var(--sol-bg); color: var(--sol-ink); overflow-x: hidden; /* The page's own type scale -- the app shell's is tuned for dense dashboards. */ font-size: 16px; line-height: 1.6; } /* Ambient glow. Two soft radial washes behind everything, pointer-events:none so they can never intercept a click on the content above them. */ .sol-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; background: radial-gradient(900px 480px at 18% 0%, rgba(77, 124, 254, 0.22), transparent 62%), radial-gradient(760px 420px at 84% 12%, rgba(157, 107, 255, 0.20), transparent 60%); } .sol-page > * { position: relative; z-index: 1; } .sol-container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; } .sol-section { padding: 96px 0; } .sol-section-tight { padding: 64px 0; } .sol-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--sol-border-strong); background: var(--sol-surface-2); color: var(--sol-blue-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sol-h1 { margin: 22px 0 0; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; } .sol-h2 { margin: 16px 0 0; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; } .sol-h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; } /* The one gradient-text treatment on the page, used on a single phrase per heading so it stays an accent rather than becoming the default. background-clip:text needs the transparent fill; a solid colour fallback is set first for engines that ignore it. */ .sol-grad { color: var(--sol-blue-2); background: var(--sol-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sol-lead { margin: 20px 0 0; max-width: 640px; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--sol-ink-dim); } .sol-section-head { max-width: 720px; margin-bottom: 48px; } .sol-section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; } /* ---------------------------------------------------------------- buttons */ .sol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; font-size: 0.98rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .sol-btn-primary { background: var(--sol-gradient); color: #fff; box-shadow: 0 12px 32px rgba(77, 124, 254, 0.32); } .sol-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(77, 124, 254, 0.42); } .sol-btn-ghost { background: var(--sol-surface-2); border-color: var(--sol-border-strong); color: var(--sol-ink); } .sol-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .sol-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } /* ---------------------------------------------------------------- hero */ .sol-hero { padding: 88px 0 72px; } .sol-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; } .sol-hero-proof { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--sol-border); } .sol-hero-proof div { display: flex; flex-direction: column; } .sol-hero-proof strong { font-size: 1.5rem; font-weight: 700; } .sol-hero-proof span { font-size: 0.82rem; color: var(--sol-ink-faint); } /* ---- the dashboard mockup ---- */ .sol-mock { position: relative; border-radius: var(--sol-radius); border: 1px solid var(--sol-border-strong); background: linear-gradient(160deg, rgba(18, 26, 51, 0.96) 0%, rgba(10, 15, 32, 0.96) 100%); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); overflow: hidden; } .sol-mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--sol-border); background: rgba(255, 255, 255, 0.03); } .sol-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .sol-mock-title { margin-left: 8px; font-size: 0.78rem; color: var(--sol-ink-faint); } .sol-mock-body { padding: 18px; display: grid; gap: 14px; } .sol-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .sol-mock-kpi { padding: 12px; border-radius: var(--sol-radius-sm); border: 1px solid var(--sol-border); background: var(--sol-surface); } .sol-mock-kpi span { display: block; font-size: 0.68rem; color: var(--sol-ink-faint); } .sol-mock-kpi strong { display: block; font-size: 1.25rem; margin-top: 2px; } .sol-mock-kpi em { font-style: normal; font-size: 0.7rem; color: var(--sol-mint); } .sol-mock-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--sol-radius-sm); border: 1px solid var(--sol-border); background: var(--sol-surface); } .sol-mock-row-main { flex: 1; min-width: 0; } .sol-mock-row-main strong { display: block; font-size: 0.86rem; } .sol-mock-row-main span { display: block; font-size: 0.74rem; color: var(--sol-ink-faint); } .sol-mock-score { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 0.86rem; font-weight: 700; background: var(--sol-gradient-soft); border: 1px solid rgba(157, 107, 255, 0.45); color: var(--sol-purple-2); } .sol-mock-chip { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; background: rgba(61, 220, 151, 0.14); color: var(--sol-mint); border: 1px solid rgba(61, 220, 151, 0.28); } .sol-mock-chip.is-ai { background: rgba(157, 107, 255, 0.16); color: var(--sol-purple-2); border-color: rgba(157, 107, 255, 0.34); } .sol-mock-chip.is-blue { background: rgba(77, 124, 254, 0.16); color: var(--sol-blue-2); border-color: rgba(77, 124, 254, 0.34); } .sol-mock-thumb { flex: none; width: 54px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--sol-border); } /* Floating accent cards. Anchored to .sol-mock-wrap rather than to .sol-mock itself, because the mock clips its overflow to keep its rounded frame clean -- an absolutely-positioned child would be sliced off at the frame edge. Offsets are deliberately outside the mock's corners so the cards frame it rather than covering the content inside. Hidden below the breakpoint where there's no longer room beside the mock for them to sit outside it. */ .sol-mock-wrap { position: relative; } .sol-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--sol-border-strong); background: rgba(12, 18, 38, 0.94); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); font-size: 0.8rem; white-space: nowrap; backdrop-filter: blur(8px); } .sol-float i { color: var(--sol-mint); } .sol-float-a { left: -40px; bottom: -22px; } .sol-float-b { right: -34px; top: -24px; } .sol-float-b i { color: var(--sol-purple-2); } /* ---------------------------------------------------------------- pillars */ .sol-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .sol-pillar { padding: 26px; border-radius: var(--sol-radius); border: 1px solid var(--sol-border); background: var(--sol-surface); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .sol-pillar:hover { transform: translateY(-4px); border-color: var(--sol-border-strong); background: var(--sol-surface-2); } .sol-pillar-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; background: var(--sol-gradient-soft); border: 1px solid var(--sol-border-strong); color: var(--sol-blue-2); font-size: 1.1rem; } .sol-pillar p { margin: 0; color: var(--sol-ink-dim); font-size: 0.92rem; } /* ---------------------------------------------------------------- feature sections */ .sol-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 56px; align-items: center; } /* Alternating layout: the visual leads on every other section. Applied with `order` so the DOM keeps a single, sensible reading order for screen readers regardless of direction. */ .sol-feature.is-reversed .sol-feature-visual { order: -1; } .sol-feature-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; } .sol-feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--sol-ink-dim); font-size: 0.95rem; } .sol-feature-list i { color: var(--sol-mint); margin-top: 4px; flex: none; } .sol-feature-list strong { color: var(--sol-ink); font-weight: 600; } .sol-note { margin-top: 24px; padding: 14px 18px; border-radius: var(--sol-radius-sm); border: 1px solid var(--sol-border); background: var(--sol-surface); font-size: 0.86rem; color: var(--sol-ink-dim); } .sol-note i { color: var(--sol-gold); margin-right: 8px; } /* ---- property card mock ---- */ .sol-prop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .sol-prop { border-radius: var(--sol-radius); border: 1px solid var(--sol-border); background: rgba(12, 18, 38, 0.86); overflow: hidden; } .sol-prop-media { position: relative; aspect-ratio: 4 / 3; background: var(--sol-bg-2); overflow: hidden; } .sol-prop-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Crops the right edge of a source image whose right side isn't part of the subject. The image is made wider than its frame and pinned left, so the unwanted strip falls outside the frame's overflow. object-position alone can't do this: object-fit:cover already fills the width, so there is no horizontal slack for it to shift within. */ .sol-prop-media.is-crop-right img { width: 134%; object-position: left 32%; } .sol-prop-status { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(7, 11, 24, 0.82); border: 1px solid var(--sol-border-strong); font-size: 0.68rem; font-weight: 600; } .sol-prop-body { padding: 16px; } .sol-prop-price { font-size: 1.2rem; font-weight: 700; } .sol-prop-addr { margin: 4px 0 10px; font-size: 0.82rem; color: var(--sol-ink-faint); } .sol-prop-specs { display: flex; gap: 12px; font-size: 0.8rem; color: var(--sol-ink-dim); } .sol-prop-agent { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sol-border); font-size: 0.76rem; color: var(--sol-ink-faint); } .sol-prop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .sol-prop-actions span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--sol-border-strong); font-size: 0.72rem; color: var(--sol-ink-dim); } /* ---- AI content mock ---- */ .sol-ai-panel { border-radius: var(--sol-radius); border: 1px solid var(--sol-border-strong); background: linear-gradient(160deg, rgba(24, 18, 52, 0.94) 0%, rgba(10, 14, 32, 0.96) 100%); box-shadow: 0 36px 80px rgba(0, 0, 0, 0.5); overflow: hidden; } .sol-ai-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sol-border); font-size: 0.84rem; } .sol-ai-head i { color: var(--sol-purple-2); } .sol-ai-body { padding: 18px; } .sol-ai-post { padding: 16px; border-radius: var(--sol-radius-sm); border: 1px solid var(--sol-border); background: var(--sol-surface); font-size: 0.86rem; color: var(--sol-ink-dim); line-height: 1.65; white-space: pre-line; } .sol-ai-tags { margin-top: 10px; color: var(--sol-blue-2); font-size: 0.8rem; } .sol-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .sol-ai-actions span { padding: 6px 13px; border-radius: 999px; font-size: 0.74rem; border: 1px solid var(--sol-border-strong); color: var(--sol-ink-dim); } .sol-ai-actions span.is-primary { background: var(--sol-gradient); border-color: transparent; color: #fff; } .sol-chip-cloud { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; } .sol-chip-cloud span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sol-border); background: var(--sol-surface); font-size: 0.8rem; color: var(--sol-ink-dim); } /* ---------------------------------------------------------------- plan band */ .sol-plan-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 40px; } .sol-plan { position: relative; padding: 26px 22px; border-radius: var(--sol-radius); border: 1px solid var(--sol-border); background: var(--sol-surface); } .sol-plan.is-featured { border-color: rgba(157, 107, 255, 0.5); background: var(--sol-gradient-soft); box-shadow: 0 24px 60px rgba(77, 124, 254, 0.20); } .sol-plan-badge { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; background: var(--sol-gradient); color: #fff; font-size: 0.7rem; font-weight: 700; } .sol-plan h3 { margin: 0; font-size: 1rem; color: var(--sol-ink-dim); } .sol-plan-price { margin: 8px 0 4px; font-size: 2rem; font-weight: 700; } .sol-plan-price span { font-size: 0.9rem; font-weight: 500; color: var(--sol-ink-faint); } .sol-plan ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .sol-plan li { font-size: 0.86rem; color: var(--sol-ink-dim); display: flex; gap: 8px; } .sol-plan li i { color: var(--sol-mint); margin-top: 4px; flex: none; font-size: 0.75rem; } /* ---------------------------------------------------------------- closing CTA */ .sol-cta { text-align: center; padding: 72px 32px; border-radius: 28px; border: 1px solid var(--sol-border-strong); background: radial-gradient(600px 300px at 50% 0%, rgba(157, 107, 255, 0.22), transparent 70%), linear-gradient(160deg, rgba(18, 26, 51, 0.96) 0%, rgba(10, 15, 32, 0.96) 100%); } .sol-cta .sol-cta-row { justify-content: center; } .sol-flow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 44px; } .sol-flow span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--sol-border); background: var(--sol-surface); font-size: 0.82rem; color: var(--sol-ink-dim); } .sol-flow i { color: var(--sol-ink-faint); font-size: 0.75rem; } .sol-disclaimer { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--sol-border); font-size: 0.8rem; color: var(--sol-ink-faint); line-height: 1.7; max-width: 900px; } /* ---------------------------------------------------------------- motion Entrance animation is a single subtle fade-and-rise, applied per section via a scroll-triggered class. Everything is fully visible with no JavaScript: the .sol-reveal base state is only dimmed once .sol-js is present on the page root, which the page's own script adds. If the script never runs, nothing is hidden. */ .sol-js .sol-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .sol-js .sol-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sol-js .sol-reveal { opacity: 1; transform: none; transition: none; } .sol-btn, .sol-pillar { transition: none; } .sol-btn:hover, .sol-pillar:hover { transform: none; } } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1080px) { .sol-hero-grid { grid-template-columns: 1fr; gap: 44px; } .sol-float { display: none; } .sol-feature.is-reversed .sol-feature-visual { order: 0; } } @media (max-width: 720px) { .sol-container { width: calc(100% - 32px); } .sol-section { padding: 64px 0; } .sol-hero { padding: 56px 0 48px; } .sol-mock-kpis { grid-template-columns: 1fr; } .sol-cta { padding: 48px 20px; border-radius: 20px; } .sol-hero-proof { gap: 22px; } }