/* blx-press.css ------------- Two things, both approved by Naor on 2026-08-17 after seeing the demo. 1. PRESS FEEDBACK. The site had 9,663 :hover rules and ZERO :active rules that give press feedback. On a phone there is no hover and no cursor, so a visitor who taps "WhatsApp Li" gets nothing back until the app opens, which on a real connection is half a second to a second of silence. People tap again when that happens, and on the WhatsApp bar a second tap is a second window. 2. STICKY HOVER ON TOUCH. Not one hover rule on the site is gated behind a pointer media query, so on a touchscreen the hover state fires on tap and STAYS until the visitor taps somewhere else. The lift on a building card just stays lifted. WHY THIS IS ONE FILE AND NOT AN EDIT TO 1,532 PAGES. Reverting is deleting the one line, and the site returns to exactly what it was. This repo has been burned by sitewide sweeps more than once, so the whole change is quarantined here. WHAT IS DELIBERATELY NOT IN HERE. The 11,426 `transition: all` declarations. Replacing them is a 1,532-file rewrite for a difference nobody can see, which is a bad trade. Left alone on purpose. THE SELECTOR LIST IS EXPLICIT, NEVER `button` ON ITS OWN. A blanket rule would scale the burger menu, the language toggle, the unit tabs and Leaflet's own map controls, all of which either look wrong scaled or sit inside a bordered grid where a scale reads as a glitch. Every selector below was grepped against the live templates first. Only `transform` is animated, so no layout is touched and nothing can shift. */ :root { /* Strong ease-out. The built-in CSS easings are too weak to read at 160ms. */ --blx-press-ease: cubic-bezier(0.23, 1, 0.32, 1); } /* ---------- 1. PRESS FEEDBACK ---------- */ /* The real call-to-action buttons, verified present on the templates: cta-button (66 pages), cta-btn (56), tb-cta (129), nav-cta, hero-search-submit, the property page's own .btn / .btn.solid and its lead-capture buttons, and the mobile Call/WhatsApp bar on 1,397 pages. */ .cta-button, .cta-btn, .tb-cta, .nav-cta, .hero-search-submit, #page .btn, #tourBtn, #reqBtn, #waBtn, #blxBar a, #blxWa, .bx-row, .sx-actbtn, .blx-bl-pill { transition: transform 160ms var(--blx-press-ease), border-color 160ms ease, background 160ms ease; } .cta-button:active, .cta-btn:active, .tb-cta:active, .nav-cta:active, .hero-search-submit:active, #page .btn:active, #tourBtn:active, #reqBtn:active, #waBtn:active, #blxWa:active, .sx-actbtn:active, .blx-bl-pill:active { transform: scale(0.97); } /* The bottom bar's two taps are already edge to edge, so a scale on the whole cell would pull it off the screen edge. It gets a smaller dip instead. */ #blxBar a:active { transform: scale(0.94); } /* A table row cannot be scaled without the borders shivering, so the row that opens a building in the directory gets a tint on press rather than a scale. */ .bx-row:active { background: rgb(var(--blx-accent-rgb) / 0.09); } /* ---------- 2. STICKY HOVER ON TOUCH ---------- */ /* Only where the hover moves the element. A colour or background change on tap is harmless and reads as selection, so those are left alone: the point is to stop a card sitting permanently lifted after a finger has been near it. `hover: none` catches phones and tablets; `pointer: coarse` catches hybrids reporting both. */ @media (hover: none), (pointer: coarse) { /* The links strip pills lift their border to brass on hover; on a phone that state sticks after a tap and reads as a selected filter. */ .blx-bl-pill:hover { border-color: var(--blx-line-2); background: #FFFFFF; } .blx-bl-sc:hover .blx-bl-scv { color: var(--blx-ink); } .bldg-card:hover, .bx-row:hover, .cta-button:hover, .cta-btn:hover, .tb-cta:hover, .sim-card:hover, .project-card:hover, .editorial-card:hover, .editorial-feature:hover, .article-card:hover, .gal-item:hover, .fp-card:hover, .contact-card:hover, .option-card:hover, .blx-lv-card:hover, .sxs-item:hover { transform: none; } } /* ---------- ACCESSIBILITY ---------- */ /* Reduced motion means gentler, not none. The press dip is 160ms and carries real information (your tap registered), so it stays; it just stops moving. */ @media (prefers-reduced-motion: reduce) { .cta-button, .cta-btn, .tb-cta, .nav-cta, .hero-search-submit, #page .btn, #tourBtn, #reqBtn, #waBtn, #blxBar a, #blxWa, .bx-row, .sx-actbtn { transition: none; } .cta-button:active, .cta-btn:active, .tb-cta:active, .nav-cta:active, .hero-search-submit:active, #page .btn:active, #tourBtn:active, #reqBtn:active, #waBtn:active, #blxWa:active, #blxBar a:active, .sx-actbtn:active { transform: none; opacity: 0.82; } } /* ============================================================ 3. HOVER SURFACE Naor pointed at the Compass building table, where a row lifts to a light grey under the cursor before you click, and asked for the same here. THEIR SCALE, READ OFF THEIR OWN CSS VARIABLES RATHER THAN GUESSED FROM A SCREENSHOT: #F4F4F4 for a light interactive surface, #E8E8E8 for a table row, #DADADA for a selected row. Ours is built the same way, one step darker than whatever the surface already is. IT IS DEFINED AS INK AT LOW ALPHA, NOT AS A GREY HEX, on purpose. A fixed grey would fight the warm panels the site uses today and would have to be rewritten again if the palette goes monochrome. An alpha tint of the text colour is always exactly one step darker than the surface underneath it, in any palette, on the white cards and on the var(--blx-panel) panels alike. WHAT GETS WHICH. The site already had hover on the listing cards, the search cards, the filter pills and the directory rows; the gaps were the past sales and rentals tables and the similar-buildings ring. Those two are different jobs and get different weights: - a CLICKABLE thing gets the stronger tint, because the tint is saying "this does something". - a DATA ROW that is not a link gets the lighter one, because there the job is tracking your eye across six columns, not promising a click. Giving a table row the full clickable tint would be the same mistake as the neighbourhood pill that looked like a button and went nowhere. Every rule is inside `@media (hover: hover)`, so a phone never paints a hover state that then sticks after the tap. */ @media (hover: hover) { :root { --blx-hover: rgb(var(--blx-ink-rgb) / .043); --blx-hover-strong: rgb(var(--blx-ink-rgb) / .09); } /* Past Sales and Past Rentals: a reading aid across a six column row. */ .blx-sold-tbl tbody tr { transition: background 120ms var(--blx-press-ease); } .blx-sold-tbl tbody tr:hover { background: var(--blx-hover); } /* More buildings in this neighbourhood: these are real links. */ .blx-similar-grid a { transition: background 140ms var(--blx-press-ease), color 140ms ease; border-radius: 4px; } .blx-similar-grid a:hover { background: var(--blx-hover-strong); } /* The directory row already had a tint, but it was mixed from the khaki that was retired in July, so it was quietly still wearing the old brand. It now uses the same token as everything else. */ .bx-row:hover { background: var(--blx-hover) !important; } /* The unit tabs and the bed and bath filters only moved their border and text colour on hover. That read clearly while the accent was brass; with a neutral palette a border going from one grey to another is close to invisible, so they get the fill too. The active tab is excluded: it is already solid ink and a tint on top of it does nothing. The active class is `on`, not `active`: guessing that wrong would have tinted the selected tab and left the unselected ones flat, i.e. exactly backwards. */ .blx-utab:not(.on):hover, .blx-lv-pill:not(.on):hover { background: var(--blx-hover-strong) !important; } } /* ============================================================ THE PALETTE Every brand colour on the site resolves through the :root below. Nothing else carries a brand hex, so changing the site's colours means editing that block, and changing them back means editing it again. CURRENT: MONOCHROME, after compass.com, chosen by Naor on 2026-08-17. Measured off their own CSS rather than guessed from a screenshot: text #171717 and not pure black, hairlines #DADADA, no accent colour at all. Hierarchy comes from weight and size, which is why the small labels sit at #6C6C6C and the link underline stays #DADADA. Strip both and a link becomes indistinguishable from body text. THE STATUS COLOURS ARE DELIBERATELY NOT NEUTRALISED. Green for up, red for down, the amber and the orange alert carry meaning rather than brand. TO GO BACK TO THE WARM PALETTE, replace every value in the :root below with the value printed beside its name here. This list is REFERENCE ONLY and is inside a comment: a previous edit inserted live declarations into this list by matching a token name that appears in both places, which left sixteen tokens referenced by the site and defined nowhere, and the Notify me button rendered white on white. If a token needs a value, it goes in the :root. --blx-ink: #1A3A4A; --blx-ink-deep: #17242E; --blx-ink-night: #0C1E2A; --blx-ink-3: #0D1F28; --blx-ink-4: #10222C; --blx-accent: #B0895A; --blx-accent-retired: #8A7355; --blx-accent-soft: #C9A96A; --blx-accent-soft-2: #C9A86A; --blx-rule: #D4AF37; --blx-panel: #F3EEE4; --blx-panel-2: #F2EEE6; --blx-panel-3: #FAF7F2; --blx-panel-4: #FAF7F1; --blx-panel-5: #FAF8F3; --blx-panel-6: #FAFAF7; --blx-panel-7: #EDEAE3; --blx-cream: #F5F1E8; --blx-warm-white: #FFF9F0; --blx-warm-white-2: #FFF7F3; --blx-line: #E2DACB; --blx-line-2: #D8CEBC; --blx-accent-deep: #96703F; --blx-accent-retired-deep: #6F5C43; --blx-panel-8: #EDE7DA; --blx-ink-soft: #4A5A66; --blx-ink-soft-2: #7A8894; --blx-accent-hover: #9A7749; --blx-err: #8A4B2A; --blx-ink-5: #33454F; --blx-ink-6: #3A4C56; --blx-ink-7: #7A8790; --blx-ink-8: #8593A0; --blx-ink-9: #5B6B73; --blx-panel-9: #EEEAE1; --blx-panel-10: #EFEADF; --blx-line-3: #D9D2C4; --blx-panel-11: #FDFBF6; --blx-up: #2E7D5B; --blx-down: #A8443C; --blx-alert: #D07857; --blx-ink-rgb: 26 58 74; --blx-ink-deep-rgb: 23 36 46; --blx-ink-3-rgb: 13 31 40; --blx-ink-4-rgb: 16 34 44; --blx-scrim-rgb: 8 14 22; --blx-accent-rgb: 176 137 90; --blx-accent-retired-rgb: 138 115 85; --blx-accent-soft-rgb: 168 144 114; --blx-cream-rgb: 245 241 232; ============================================================ */ :root { --blx-ink: #171717; --blx-ink-deep: #171717; --blx-ink-night: #171717; --blx-ink-3: #171717; --blx-ink-4: #171717; --blx-accent: #171717; --blx-accent-retired: #171717; --blx-accent-soft: #6C6C6C; --blx-accent-soft-2: #6C6C6C; --blx-rule: #DADADA; --blx-panel: #F7F7F7; --blx-panel-2: #F7F7F7; --blx-panel-3: #FFFFFF; --blx-panel-4: #FFFFFF; --blx-panel-5: #FFFFFF; --blx-panel-6: #FFFFFF; --blx-panel-7: #F0F0F0; --blx-cream: #F7F7F7; --blx-warm-white: #FFFFFF; --blx-warm-white-2: #FFFFFF; --blx-line: #DADADA; --blx-line-2: #DADADA; --blx-accent-deep: #171717; --blx-accent-retired-deep: #6C6C6C; --blx-panel-8: #F0F0F0; --blx-ink-soft: #6C6C6C; --blx-ink-soft-2: #8E8E8E; --blx-accent-hover: #3A3A3A; --blx-err: #8A4B2A; --blx-ink-5: #171717; --blx-ink-6: #171717; --blx-ink-7: #8E8E8E; --blx-ink-8: #8E8E8E; --blx-ink-9: #6C6C6C; --blx-panel-9: #F0F0F0; --blx-panel-10: #F4F4F4; --blx-line-3: #DADADA; --blx-panel-11: #FAFAFA; --blx-up: #2E7D5B; --blx-down: #A8443C; --blx-alert: #D07857; --blx-ink-rgb: 23 23 23; --blx-ink-deep-rgb: 23 23 23; --blx-ink-3-rgb: 23 23 23; --blx-ink-4-rgb: 23 23 23; --blx-scrim-rgb: 23 23 23; --blx-accent-rgb: 23 23 23; --blx-accent-retired-rgb: 23 23 23; --blx-accent-soft-rgb: 108 108 108; --blx-cream-rgb: 247 247 247; } /* ============================================================ 4. THE BOTTOM BAR ICONS The bar's background is near black and its icons were painted with --blx-accent, which was brass and is now #171717. Dark on dark: the labels stayed readable and the three glyphs above them vanished, which is what Naor saw. They take the same colour as the label they sit above, because an icon and its label are one control and should not be two colours. The WhatsApp glyph carries an inline fill, so it needs !important. That is the one place on this sheet where that is true and it is why. */ #blxBar a svg { stroke: var(--blx-cream); } #blxBar a#blxWa svg { fill: var(--blx-cream) !important; stroke: none; } /* ============================================================ 5. THE BUILDINGS DIRECTORY ON A PHONE It was a desktop table squeezed onto a 390px screen: a black header block, 56px of margin on each side, and column widths written for six columns still applied to the three that survive. The name wrapped onto three lines and the address onto three more, so five buildings filled a screen and the whole thing read as a boxed object dropped into the page. One row per building now, name left and address right on the SAME line, both clipped rather than wrapped. Clipping is doing real work here: the address ends in the neighbourhood, which the section heading directly above already states, so the part that gets cut is the part that was redundant. The header row goes. On a phone it labelled two columns that are obvious, and being a solid dark block it was most of what made this look like a table rather than part of the page. */ @media (max-width: 600px) { .bx-section { width: calc(100vw - 36px) !important; } .bx-table { min-width: 0 !important; } .bx-table thead { display: none; } .bx-table tbody td { padding: 15px 0 !important; vertical-align: middle; } /* The name gets the room, because that is what anyone scans a directory for. The address clips from the END, which keeps the street number and drops the neighbourhood, and the neighbourhood is the section heading directly above it. */ .bx-table td:nth-child(1) { width: 57%; } .bx-table td:nth-child(2) { width: 39%; } .bx-table td:nth-child(6) { width: 4%; } /* The page's own phone rule is `.bx-table tbody td{white-space:normal}`, which is more specific than a bare class, so the first version of this lost and the row still wrapped onto six lines. Matched at the same depth rather than reached for !important. */ /* DO NOT PUT display:block ON THE CELL. A table cell set to block drops out of the table layout and sizes to its own content, which left the address ending 94px short of the arrow with a hole between them. The cell keeps its display and only the anchor inside the name needs one, because an anchor is inline and an inline box cannot show an ellipsis. */ .bx-table tbody td.bx-name a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-table tbody td.bx-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-table tbody td.bx-name a { font-size: 1rem !important; } .bx-table tbody td.bx-addr { text-align: right; padding-left: 12px !important; font-size: .78rem !important; color: rgb(var(--blx-ink-rgb) / .55); } .bx-go { text-align: right; color: rgb(var(--blx-ink-rgb) / .35); } }