/* ============================================================================ PropertyInsider.sg — combined project search ---------------------------------------------------------------------------- One field over three record types: tracked launches, government land sites and completed resale estates. Lives in the page head of /new-launches/upcoming/. The suggestion row is the point of the component. It is not a name with a grey subtitle: it is a ledger line carrying the one figure that record type is judged on, so three letters return evidence rather than links. Every resale share prints its denominator (non-negotiable 16) and every estimate carries (est.) on the figure itself (non-negotiable 1). Colour codes the record type on the left rule, but the type is ALSO spelled out in a badge on every row, so the coding is never load-bearing (non-negotiable 15). All four badge inks clear WCAG AA on their tint: moss #4B5528 on #EDF1DC .... 6.4:1 gold #5F5619 on #F6EFCE .... 7.1:1 teal #245A51 on #E4EFEC .... 6.5:1 indigo #33406F on #E9ECF6 .... 8.0:1 The host surface must set overflow:visible. Both .page-head (nl.css) and .hero (site.css) clip by default, and the panel would be sliced off at the bottom edge of the head. TWO THINGS THE HOST PAGE OWNS 1. overflow:visible on whatever wraps the field (see below). 2. If anything later on the page is sticky with a z-index, the host must lift an ancestor of the panel while it is open. The component adds `ps-open` to for exactly this, e.g. html.ps-open .page-head-inner{ z-index:950 } A permanent lift is wrong: it lets the page head paint over the sticky bar during a normal scroll. Used by /price-trends/, /new-launches/upcoming/ and the homepage. It was briefly shipped under /new-launches/assets/; that was wrong once the homepage needed it. ========================================================================== */ .ps { position: relative; text-align: left; } .ps-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #5A6335; margin: 0 0 10px; text-align: center; } /* ---- the field ---------------------------------------------------------- */ .ps-field { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid rgba(70, 82, 31, .30); border-radius: 14px; padding: 0 14px 0 18px; box-shadow: 0 6px 20px rgba(70, 82, 31, .10), 0 1px 2px rgba(70, 82, 31, .06); transition: border-color .15s, box-shadow .15s; } .ps-field:focus-within { border-color: var(--moss, #5E6B33); box-shadow: 0 0 0 3px rgba(94, 107, 51, .18), 0 8px 26px rgba(70, 82, 31, .14); } .ps-icon { flex: none; width: 20px; height: 20px; color: #6B7444; } .ps-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: 17px; line-height: 1.4; color: var(--text-ink, #262B1F); padding: 17px 0; } .ps-input::placeholder { color: #8A8E76; } /* Safari renders a native clear affordance on type=search; we ship our own. */ .ps-input::-webkit-search-decoration, .ps-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .ps-clear { flex: none; border: 0; background: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; color: #6C6E5E; font-size: 18px; line-height: 1; display: none; align-items: center; justify-content: center; } .ps-clear:hover { background: var(--moss-soft, #EDF1DC); color: var(--moss-dark, #46521F); } .ps.is-dirty .ps-clear { display: flex; } /* ---- scope toggles ------------------------------------------------------ */ .ps-scope { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .ps-chip { font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 14px; border-radius: 999px; cursor: pointer; color: #4B5528; background: rgba(255, 255, 255, .80); border: 1px solid rgba(70, 82, 31, .24); transition: background .15s, border-color .15s, color .15s; } .ps-chip:hover { background: #fff; border-color: rgba(70, 82, 31, .48); } .ps-chip .n { font-variant-numeric: tabular-nums lining-nums; margin-left: 7px; font-weight: 400; color: #6C7150; } .ps-chip[aria-pressed="true"] { background: var(--moss, #5E6B33); border-color: var(--moss-dark, #46521F); color: #fff; } .ps-chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, .72); } /* ---- the panel ---------------------------------------------------------- */ .ps-panel { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line, #E5E4D6); border-radius: 14px; box-shadow: 0 18px 44px rgba(35, 42, 31, .16), 0 3px 10px rgba(35, 42, 31, .07); overflow: hidden; } .ps-panel[hidden] { display: none; } .ps-list { list-style: none; margin: 0; padding: 0; /* dvh, not vh: on a phone the virtual keyboard shrinks the visible area but not vh, so a 60vh panel put half its rows behind the keyboard and the row under the finger was not the row the reader meant to press. */ max-height: min(60vh, 460px); max-height: min(52dvh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .ps-note { margin: 0; padding: 11px 18px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft, #6C6E5E); background: var(--mist-2, #FBFAF4); border-bottom: 1px solid var(--line, #E5E4D6); } .ps-opt { display: block; cursor: pointer; padding: 12px 18px 13px; -webkit-tap-highlight-color: rgba(94, 107, 51, .12); touch-action: manipulation; border-bottom: 1px solid var(--line, #E5E4D6); border-left: 3px solid var(--stone, #9D948D); text-decoration: none; color: inherit; } .ps-list li:last-child .ps-opt { border-bottom: 0; } .ps-opt:hover, .ps-opt[aria-selected="true"] { background: var(--moss-soft, #EDF1DC); } .ps-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .ps-name { font-family: var(--font-serif); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text-ink, #262B1F); } .ps-name b { font-weight: 600; color: var(--moss-dark, #46521F); } .ps-kind { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .ps-dist { margin-left: auto; font-size: 12.5px; color: var(--text-soft, #6C6E5E); font-variant-numeric: tabular-nums lining-nums; } .ps-fig { display: block; /* spans inside a block run together otherwise */ margin: 3px 0 0; font-size: 14.5px; font-weight: 500; color: var(--ink-2, #333B2B); font-variant-numeric: tabular-nums lining-nums; } .ps-sub { display: block; margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft, #6C6E5E); font-variant-numeric: tabular-nums lining-nums; } /* Record types. Rule colour + badge word, always together. */ .ps-opt[data-k="sell"] { border-left-color: #5E6B33; } .ps-opt[data-k="sell"] .ps-kind { background: #EDF1DC; color: #4B5528; } .ps-opt[data-k="up"] { border-left-color: #7A6F22; } .ps-opt[data-k="up"] .ps-kind { background: #F6EFCE; color: #5F5619; } .ps-opt[data-k="gls"] { border-left-color: #2F6E63; } .ps-opt[data-k="gls"] .ps-kind { background: #E4EFEC; color: #245A51; } .ps-opt[data-k="res"] { border-left-color: #3B4A83; } .ps-opt[data-k="res"] .ps-kind { background: #E9ECF6; color: #33406F; } /* Empty state: an invitation, not an apology. */ .ps-empty { padding: 20px 18px; } .ps-empty p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2, #333B2B); } .ps-empty .ps-try { margin-top: 10px; font-size: 13.5px; color: var(--text-soft, #6C6E5E); } .ps-try button { font: inherit; font-weight: 600; color: var(--moss-dark, #46521F); background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .ps-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 18px; background: var(--mist-2, #FBFAF4); border-top: 1px solid var(--line, #E5E4D6); font-size: 12px; color: var(--text-soft, #6C6E5E); } .ps-foot .ps-keys { white-space: nowrap; } @media (max-width: 640px) { .ps-foot .ps-keys { display: none; } } .ps-hint { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: #5F6449; text-align: center; } /* Screen-reader-only live region for result counts. */ .ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 640px) { .ps-input { font-size: 16px; padding: 15px 0; } /* 16px: iOS will not zoom */ .ps-field { padding: 0 10px 0 14px; gap: 9px; } .ps-panel { top: calc(100% + 6px); } .ps-opt { padding: 11px 14px 12px; } .ps-name { font-size: 16.5px; } .ps-dist { margin-left: 0; } }