/* ============================================================================ OriginCRM landing page — /origincrm HAND-WRITTEN, NOT GENERATED. This file is not produced by Tailwind and is not `tailwind.output.css` — do not delete it as build output. `npm run css:build` writes only tailwind.output.css and never touches this file. WHY IT IS NOT TAILWIND. AGENTS.md mandates Tailwind utilities over bespoke CSS, and this page is the deliberate exception. It is a self-contained marketing page whose whole point is that it can be lifted onto its own host (origincrm.com) unchanged. Porting its bespoke gradients, mock-window chrome and section framing to utilities would be slower, would read worse, and would make that move harder rather than easier. It is linked from exactly one view — Views/OriginCrm/Index.cshtml, via the `Styles` section — so it cannot affect any other page in the Portal. The page's own brand tokens live in `:root` below. `--navy` and `--blue` are the seeded OriginCRM brand (CrmPrimaryColor #080055 / CrmAccentColor #04ADEC), which are deliberately NOT the BRK tenant brand. Nothing here reads `--color-primary` from the shared layout's agency-branding block, so the CTAs cannot turn BRK red. ============================================================================ */ /* ---------- Shared-layout compatibility ---------- The page renders inside _Layout with HideHeaderFooter set, so it keeps , GTM, Tailwind, HTMX, Alpine and the toast host, but drops the BRK header/footer. Two of the layout's own Tailwind utilities still need neutralising for a full-bleed page. Both selectors carry the utility class deliberately, so they out-specify it (0-1-1 beats 0-1-0) without an !important. */ body.bg-gray-50 { /* The layout paints gray-50; this page paints its own --bg. */ background: var(--bg); } main#main-content.flex-grow { /* No max-width, no gutter: every section owns its own padding and some are intentionally edge-to-edge. */ width: 100%; min-width: 0; } :root { --bg: #F7F8FA; --white: #ffffff; --text: #172026; --navy: #080055; --navy-soft: #150c7d; --blue: #04ADEC; --blue-hover: #039AD3; --blue-light: #22bdf5; --border: #E4E8ED; --border-dashed: #D8DEE5; --muted-1: #4A5560; --muted-2: #6B7580; --muted-3: #8B949D; --muted-4: #9AA4AE; --muted-5: #7B858F; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); font-family: "Inter", Arial, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); overflow-x: hidden; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-hover); } img { max-width: 100%; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- Buttons & pills ---------- */ /* ---------- Why the buttons are `oc-`prefixed ---------- The design shipped these as `.btn` / `.btn-primary` / `.btn-sm` / `.btn-lg`, which COLLIDE with the shared component layer: src/shared/wwwroot/css/components.css is @imported into the Portal's input.css, so `.btn-primary:hover:not(:disabled)` (0,3,0) ships in tailwind.output.css on every page and out-specifies a page-level `.btn-primary:hover` (0,2,0). The observable effect was that every CTA on this page turned BRK red on hover — the shared rule paints a --color-primary gradient over the background this file sets. The shared `.btn:focus { outline: 2px solid transparent }` reset landed on them too, leaving no visible keyboard focus ring. Prefixing is the fix rather than a specificity war: it makes the page's buttons genuinely page-local, which is also what the "liftable to its own host" goal needs. Don't reintroduce a bare `.btn` here. */ .oc-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 10px; font: 600 16px/1 Inter, sans-serif; white-space: nowrap; flex-shrink: 0; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; border: 1px solid transparent; cursor: pointer; } .oc-btn-sm { height: 48px; padding: 0 22px; font-size: 15px; } .oc-btn-lg { height: 54px; padding: 0 30px; font-size: 17px; } .oc-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(4,173,236,.3); } .oc-btn-primary:hover { background: var(--blue-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(4,173,236,.36); } .oc-btn-outline { background: #fff; color: var(--text); border-color: var(--border-dashed); } .oc-btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } .oc-btn-outline .oc-btn-arrow { display: inline-flex; align-items: center; margin-left: 8px; } .oc-btn-outline .oc-btn-arrow svg { display: block; width: 16px; height: 14px; } .oc-btn-dark { background: var(--navy); color: #fff; } .oc-btn-dark:hover { background: var(--navy-soft); color: #fff; transform: translateY(-1px); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: rgba(4,173,236,.1); border: 1px solid rgba(4,173,236,.3); font: 600 13px/1 Inter, sans-serif; color: #0369a1; letter-spacing: .01em; } .eyebrow-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--blue); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .site-header .wrap { padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: 30px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 34px; font: 500 15px/1 Inter, sans-serif; } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: #3D4A54; } .nav-links a:hover { color: var(--blue); } .nav-links .nav-signin-mobile { display: none; } .nav-actions { display: flex; align-items: center; gap: 22px; } .nav-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 500 15px/1 Inter, sans-serif; color: #3D4A54; } .nav-signin:hover { color: var(--blue); } .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; position: relative; } /* A 44x44 tap target for the page's only mobile control, without widening the header row. The visible box is 40px (32px on the narrowest breakpoint below), which is under the 44px guideline; growing the box itself would overflow the header at 320px, where the brand plus the demo button already use most of the width. A centred transparent pseudo-element costs no layout and still hit-tests as the button. */ .nav-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--navy); position: relative; transition: transform .2s ease, opacity .2s ease; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 84px 32px 96px; background: radial-gradient(1100px 520px at 82% 8%, rgba(4,173,236,.16), transparent 62%), radial-gradient(760px 420px at 6% 96%, rgba(8,0,85,.09), transparent 60%), var(--bg); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 64px; align-items: center; } .hero-content { display: flex; flex-direction: column; gap: 22px; animation: riseIn .6s ease both; } .hero-title { margin: 0; font: 700 58px/1.06 Inter, sans-serif; letter-spacing: -.025em; color: var(--text); max-width: 15ch; text-wrap: pretty; } .hero-lead { margin: 0; font: 400 19px/1.62 Inter, sans-serif; color: var(--text); max-width: 56ch; text-wrap: pretty; } .availability-pill { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 14px 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(23,32,38,.05); } .availability-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 4px rgba(4,173,236,.18); } .availability-pill span.label { font: 500 14px/1 Inter, sans-serif; color: var(--text); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; } .hero-actions .oc-btn { min-width: 252px; } .hero-note { margin: 2px 0 0; font: 400 14px/1.6 Inter, sans-serif; color: var(--text); max-width: 52ch; } .hero-note a { font-weight: 500; } .hero-visual { position: relative; animation: riseIn .75s ease .12s both; } .mock-window { border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 70px -28px rgba(8,0,85,.35), 0 4px 14px rgba(23,32,38,.06); overflow: hidden; } .mock-titlebar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #EDF0F3; background: #FBFCFD; } .mock-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--border); } .mock-label { margin-left: 10px; font: 500 11px/1 ui-monospace, Menlo, monospace; color: var(--muted-4); } .mock-canvas { height: 392px; background: repeating-linear-gradient(45deg, #FBFCFD, #FBFCFD 9px, #F1F4F7 9px, #F1F4F7 18px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .mock-canvas img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .mock-canvas span, .publish-canvas span { font: 500 12px/1.7 ui-monospace, Menlo, monospace; color: var(--muted-5); } .float-card { position: absolute; left: -34px; bottom: -30px; width: 250px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 22px 44px -18px rgba(8,0,85,.3); overflow: hidden; } .float-card .mock-canvas { height: 120px; } /* ---------- Logo strip ---------- */ .logo-strip { padding: 40px 32px 44px; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .logo-strip .wrap { display: flex; flex-direction: column; gap: 26px; align-items: center; } .logo-strip-lead { margin: 0; font: 500 15px/1.4 Inter, sans-serif; color: var(--text); text-align: center; } .logo-pair { display: flex; align-items: center; gap: 18px; } .logo-pair img { height: 30px; width: auto; display: block; } .logo-pair .divider { width: 1px; height: 22px; background: var(--border-dashed); } /* ---------- Generic section framing ---------- */ .section { padding: 96px 32px; scroll-margin-top: 90px; } .section.on-white { background: #fff; border-top: 1px solid var(--border); } .section.on-tint { background: var(--bg); } .section .wrap { flex-direction: column; gap: 44px; } .section-head { display: flex; flex-direction: column; gap: 16px; max-width: 70ch; } .eyebrow { font: 600 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); } .section-title { margin: 0; font: 700 42px/1.14 Inter, sans-serif; letter-spacing: -.02em; color: var(--text); text-wrap: pretty; } .section-lead { margin: 0; font: 400 18px/1.65 Inter, sans-serif; color: var(--text); text-wrap: pretty; } /* ---------- Product overview icon grid ---------- */ .icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding-top: 20px; } .icon-card { padding: 24px; border-radius: 14px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, box-shadow .2s ease; } .icon-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(8,0,85,.28); } .icon-badge { width: 40px; height: 40px; border-radius: 10px; background: rgba(4,173,236,.1); display: flex; align-items: center; justify-content: center; } .icon-card .label { font: 600 17px/1.3 Inter, sans-serif; color: var(--text); } /* small glyph shapes */ .glyph-listings, .glyph-phone, .glyph-matchbuyer { color: var(--blue); } .glyph-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 11px; } .glyph-bars span { width: 3px; background: var(--blue); } .glyph-bars span:nth-child(1) { height: 7px; } .glyph-bars span:nth-child(2) { height: 11px; } .glyph-bars span:nth-child(3) { height: 15px; } /* ---------- Features ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-top: 20px; } .feature-card { padding: 26px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .feature-card:hover { transform: translateY(-4px); border-color: rgba(4,173,236,.5); box-shadow: 0 20px 40px -22px rgba(8,0,85,.3); } .feature-icon { width: 44px; height: 44px; border-radius: 11px; background: rgba(4,173,236,.1); display: flex; align-items: center; justify-content: center; } .feature-card h3 { margin: 0; font: 600 21px/1.28 Inter, sans-serif; color: var(--text); } .feature-card p { margin: 0; font: 400 15px/1.6 Inter, sans-serif; color: var(--text); } .feature-shot { margin-top: 2px; height: 104px; border-radius: 10px; border: 1px dashed var(--border-dashed); background: repeating-linear-gradient(45deg, #fff, #fff 8px, #F1F4F7 8px, #F1F4F7 16px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font: 500 10px/1.6 ui-monospace, Menlo, monospace; color: var(--muted-5); } /* dashboard icon grid glyph */ .glyph-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 11px; width: 100%; height: 100%; } .glyph-dash span { border-radius: 1px; } .glyph-dash span.on { background: var(--blue); } .glyph-dash span.off { background: rgba(4,173,236,.25); } .glyph-lines { display: flex; flex-direction: column; gap: 3px; padding: 11px; justify-content: center; width: 100%; } .glyph-lines span { height: 4px; border-radius: 1px; } .glyph-tag { width: 18px; height: 14px; border: 2px solid var(--blue); border-radius: 4px 4px 4px 0; } .glyph-circles { display: flex; align-items: center; justify-content: center; gap: 4px; } .glyph-circles span { width: 11px; height: 11px; border-radius: 999px; border: 2px solid; } .glyph-bars2 { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 12px; width: 100%; height: 100%; } .glyph-bars2 span { width: 4px; border-radius: 1px; } .glyph-arc { width: 14px; height: 14px; border: 2px solid var(--blue); border-radius: 999px 999px 999px 0; transform: rotate(-45deg); } .glyph-arrow { font: 600 18px/1 Inter, sans-serif; color: var(--blue); } /* ---------- Workflow timeline ---------- */ .workflow-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 18px; } .workflow-line { position: absolute; top: 22px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, rgba(4,173,236,.15), rgba(4,173,236,.6), rgba(4,173,236,.15)); opacity: .55; } .workflow-step { position: relative; display: flex; flex-direction: column; gap: 12px; } .workflow-num { width: 46px; height: 46px; border-radius: 999px; background: #fff; border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center; font: 600 15px/1 Inter, sans-serif; color: var(--navy); } .workflow-num.done { background: var(--blue); color: #fff; } .workflow-title { font: 600 19px/1.3 Inter, sans-serif; color: var(--text); } .workflow-desc { font: 400 15px/1.6 Inter, sans-serif; color: var(--text); } /* ---------- Publishing section ---------- */ .publish-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } .publish-copy { display: flex; flex-direction: column; gap: 18px; } .checklist { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .checklist-item { display: flex; align-items: center; gap: 12px; } .checklist-item .check { width: 22px; height: 22px; border-radius: 999px; background: rgba(4,173,236,.12); display: flex; align-items: center; justify-content: center; font: 600 12px/1 Inter, sans-serif; color: var(--blue); flex-shrink: 0; } .checklist-item .text { font: 500 16px/1.5 Inter, sans-serif; color: var(--text); } .publish-visual { display: flex; flex-direction: column; gap: 18px; } .publish-window { border-radius: 16px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; box-shadow: 0 24px 54px -30px rgba(8,0,85,.35); } .publish-titlebar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #fff; } .publish-canvas { height: 250px; background: repeating-linear-gradient(45deg, #fff, #fff 9px, #F1F4F7 9px, #F1F4F7 18px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .publish-canvas img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .publish-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .publish-card { padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .publish-card h4 { margin: 0; font: 600 14px/1.3 Inter, sans-serif; color: var(--text); } .publish-card p { margin: 0; font: 400 12.5px/1.5 Inter, sans-serif; color: var(--muted-2); } .option-progress { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; } .option-progress span { display: block; height: 100%; background: var(--blue); border-radius: 999px; } .option-caption, .option-placeholder { font: 500 10px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .02em; color: var(--muted-5); } .option-placeholder { border: 1px dashed var(--border-dashed); border-radius: 8px; padding: 8px 10px; } /* ---------- Insights section ---------- */ .tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .tag { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font: 500 14px/1 Inter, sans-serif; color: var(--text); } .insights-panel { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 26px 60px -32px rgba(8,0,85,.35); display: flex; flex-direction: column; gap: 18px; } .insights-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .insights-panel-head .title { font: 600 15px/1 Inter, sans-serif; color: var(--text); } .sample-badge { padding: 6px 10px; border-radius: 6px; background: rgba(4,173,236,.1); border: 1px solid rgba(4,173,236,.35); font: 600 10px/1 ui-monospace, Menlo, monospace; color: #0369a1; letter-spacing: .06em; } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .metric-card { padding: 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .metric-card .label { font: 500 13px/1.35 Inter, sans-serif; color: var(--text); } .metric-card .value { font: 700 22px/1 Inter, sans-serif; color: var(--text); } .chart-placeholder { height: 196px; border-radius: 12px; border: 1px dashed var(--border-dashed); background: repeating-linear-gradient(45deg, #fff, #fff 9px, #F1F4F7 9px, #F1F4F7 18px); display: flex; align-items: center; justify-content: center; text-align: center; font: 500 11px/1.7 ui-monospace, Menlo, monospace; color: var(--muted-5); overflow: hidden; } .chart-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .metric-row .metric-card { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; } .metric-row .metric-card .value { font: 700 16px/1 Inter, sans-serif; } .insights-disclaimer { margin: 0; font: 400 12px/1.5 Inter, sans-serif; color: var(--text); } /* ---------- Roadmap ---------- */ .roadmap { padding: 96px 32px; background: linear-gradient(170deg, var(--navy) 0%, #0c0468 62%, var(--navy) 100%); scroll-margin-top: 90px; } .roadmap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .roadmap-head .section-head { max-width: 66ch; } .roadmap-head .section-title, .roadmap-head .section-lead { color: #fff; } .roadmap-head .section-lead { color: rgba(255,255,255,.78); } .roadmap-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(4,173,236,.16); border: 1px solid rgba(4,173,236,.45); font: 600 13px/1 Inter, sans-serif; color: #7FD8FA; } .roadmap-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--blue); } .roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding-top: 20px; } .roadmap-card { padding: 24px; border-radius: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .roadmap-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(4,173,236,.55); } .roadmap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .roadmap-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--blue); display: flex; align-items: center; justify-content: center; } .roadmap-tag { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font: 600 9px/1 ui-monospace, Menlo, monospace; color: rgba(255,255,255,.68); letter-spacing: .06em; white-space: nowrap; } .roadmap-card h3 { margin: 0; font: 600 20px/1.3 Inter, sans-serif; color: #fff; } .roadmap-card p { margin: 0; font: 400 14px/1.62 Inter, sans-serif; color: rgba(255,255,255,.74); } .roadmap-footnote { margin: 0; font: 400 13px/1.6 Inter, sans-serif; color: rgba(255,255,255,.55); max-width: 90ch; padding-top: 20px; } /* ---------- CTA banner ---------- */ .cta-section { padding: 96px 32px; background: #fff; scroll-margin-top: 90px; } .cta-banner { max-width: 1200px; margin: 0 auto; position: relative; border-radius: 24px; background: radial-gradient(600px 300px at 8% 10%, rgba(4,173,236,.14), transparent 60%), radial-gradient(600px 320px at 92% 92%, rgba(8,0,85,.08), transparent 60%), #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -36px rgba(8,0,85,.18); padding: 76px 56px; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .cta-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 999px; background: #fff; border: 1px solid rgba(4,173,236,.3); box-shadow: 0 2px 8px rgba(23,32,38,.05); position: relative; margin-bottom: 4px; } .cta-badge img { height: 18px; width: auto; display: block; } .cta-badge .divider { width: 1px; height: 16px; background: var(--border-dashed); } .cta-badge span:last-child { font: 600 13px/1 Inter, sans-serif; color: var(--text); } .cta-banner h2 { margin: 0; font: 700 46px/1.12 Inter, sans-serif; letter-spacing: -.025em; color: var(--text); max-width: 24ch; position: relative; } .cta-banner p { margin: 0; font: 400 19px/1.65 Inter, sans-serif; color: var(--muted-1); max-width: 64ch; position: relative; text-wrap: pretty; } .cta-banner .oc-btn { position: relative; margin-top: 8px; } .cta-note { margin: 6px 0 0; font: 400 15px/1.6 Inter, sans-serif; color: var(--muted-2); max-width: 66ch; position: relative; } .cta-note a { color: var(--blue); font-weight: 500; text-decoration: underline; } /* ---------- Footer ---------- */ .site-footer { background: linear-gradient(170deg, var(--navy) 0%, #0c0468 62%, var(--navy) 100%); padding: 56px 32px 32px; scroll-margin-top: 90px; } .footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .footer-brand { display: flex; flex-direction: column; gap: 18px; max-width: 320px; } .footer-brand img { height: 35px; width: auto; display: block; align-self: flex-start; } .footer-desc { margin: 0; font: 400 15px/1.5 Inter, sans-serif; color: rgba(255,255,255,.6); } .footer-avail { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); } .footer-avail .label { font: 600 13px/1.35 Inter, sans-serif; color: rgba(255,255,255,.85); } .footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer-col { display: flex; flex-direction: column; gap: 2px; } .footer-col .heading { font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px; } .footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0; font: 400 15px/1 Inter, sans-serif; color: rgba(255,255,255,.85); } .footer-col a:hover { color: var(--blue); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin-top: 40px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-legal { font: 400 13px/1.5 Inter, sans-serif; color: rgba(255,255,255,.5); } .footer-note { font: 500 12px/1.5 ui-monospace, Menlo, monospace; color: rgba(255,255,255,.4); } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .nav-links, .nav-signin { display: none; } .nav-toggle { display: flex; } .site-header.nav-open .nav-links { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 12px 32px 20px; } .site-header.nav-open .nav-signin-mobile { display: inline-flex; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .hero-title { font-size: 42px; } .section-title { font-size: 32px; } .cta-banner h2 { font-size: 34px; } .float-card { position: static; width: 100%; margin-top: 16px; } .mock-window .mock-canvas { height: auto; aspect-ratio: 1320 / 1176; } .feature-grid { grid-template-columns: minmax(0, 1fr); } .workflow-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .workflow-line { top: 23px; bottom: 23px; left: 22px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(4,173,236,.15), rgba(4,173,236,.6), rgba(4,173,236,.15)); } .workflow-step { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; } .workflow-step .workflow-num { grid-column: 1; grid-row: 1 / 3; align-self: start; } .workflow-step .workflow-title { grid-column: 2; grid-row: 1; } .workflow-step .workflow-desc { grid-column: 2; grid-row: 2; } .hero-grid { grid-template-columns: minmax(0, 1fr); } .roadmap-grid { grid-template-columns: minmax(0, 1fr); } .logo-pair { gap: 10px; } .logo-pair img { height: 20px; } .hero-actions .oc-btn { min-width: 0; width: 100%; } .insights-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; } .hero .wrap { padding-left: 0; padding-right: 0; } .cta-section { padding: 64px 20px; } .cta-banner { padding: 40px 20px; } .cta-badge { padding: 6px 12px; gap: 8px; } .cta-badge img { height: 14px; } .cta-badge .divider { height: 12px; } .cta-badge span:last-child { white-space: nowrap; font-size: 11px; } .availability-pill { padding: 6px 10px 6px 8px; gap: 6px; } .availability-pill .dot { width: 6px; height: 6px; } .availability-pill span.label { white-space: nowrap; font-size: 12px; } .site-header .wrap { padding: 14px 12px; gap: 8px; } .nav-actions { gap: 6px; } .nav-actions .oc-btn { padding: 0 10px; font-size: 13px; } .nav-toggle { width: 32px; height: 32px; flex-shrink: 0; } } @media (max-width: 355px) { .availability-pill span.label { font-size: 10.5px; } } @media (max-width: 640px) { /* minmax(0, 1fr), not a bare 1fr: a bare 1fr floors the track at its content's min-content width, which pushed this section 67px wider than a 320px viewport. Every other single-column override at this breakpoint already does this. */ .publish-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- Rules lifted out of inline style attributes ---------- The artifact carried four `style="…"` attributes. They live here instead so the views stay markup-only, per AGENTS.md. */ .publish-copy .section-lead { max-width: 56ch; } /* The "Talk to us about publishing options" CTA — publish-copy is a flex column, so the button has to opt out of stretching. */ .publish-cta { align-self: flex-start; margin-top: 6px; } /* Illustrative package-usage bar. Paired with the "68% of package used" caption beside it and the SAMPLE DATA convention used elsewhere on the page. */ .option-progress-fill { width: 68%; } @media (max-width: 640px) { /* The page's longest label ("Talk to us about publishing options"). `.oc-btn` is white-space: nowrap with a fixed 52px height by design, so at 320px this one button alone pushed the page 67px wider than the viewport. At this breakpoint it goes full width and is allowed to wrap — the same treatment .hero-actions .oc-btn already gets. Placed after the base .publish-cta rule so the cascade is obvious. */ .publish-cta { width: 100%; height: auto; min-height: 52px; padding: 14px 20px; white-space: normal; line-height: 1.35; text-align: center; } } @media (max-width: 355px) { /* The closing CTA's availability pill. Its label is nowrap from the 860px breakpoint, and at 320px that clipped it to "Available to BuyRentKenya cus" — the banner's own padding leaves 240px and the pill wants 245px. Letting it wrap to two lines is the smallest fix that keeps the whole sentence readable. Scoped to 355px because the pill fits unwrapped from 360px up. */ .cta-badge { max-width: 100%; } .cta-badge span:last-child { white-space: normal; text-align: left; } } /* An explicit focus ring. Prefixing removed the shared `.btn:focus` transparent-outline reset, so the UA default would return — but a branded ring on the page's own accent is what the rest of the design would expect. */ .oc-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }