/* Map pins are deliberately NOT touched. coast.css already gives .pin a ::before that expands the hit area by 10px, and under @media (hover:none) it sets pointer-events:none on purpose so taps fall through to the canvas and Places.tapAt resolves which pin was meant. Adding a 44px overlay here would have blocked map drags on exactly the tablet the owner reviews on. */ /* ============================================================================ Coast View — interface redesign layer (loads AFTER css/coast.css) ---------------------------------------------------------------------------- WHY A SECOND SHEET RATHER THAN AN EDIT OF coast.css coast.css is 75 KB of working rules for the floor-plan modal, the 360 shell, the no-WebGL picker, the sun panel and the places panel - all of which still work and are NOT part of this redesign. Rewriting it would put every one of those at risk for no gain. This sheet owns only the CHROME (bars, docks, panels, legend, apartment sheet) and wins through `body.cv2` + id, which outranks the bare `#id` rules in coast.css without !important anywhere. Remove the cv2 class from and the old interface returns intact. DESIGN SOURCES - skill `ui-ux-pro-max` : --design-system run returned Hero-Centric layout + Glassmorphism + the real-estate type pairing, and supplied the delivery gates (contrast 4.5:1, 44px targets, focus-visible, reduced motion, 375/768/1024/1440). Its recommended TEAL palette was deliberately NOT taken - the owner requires Coast View branding, and the skill's own precedence rule puts the project's existing system above its suggestion. - skill `apple-liquid-glass` : unified-panel-with-hairlines over fragmented cards, glass only where layers genuinely overlap, negative tracking on display type, tabular-nums, the named radius/shadow tiers, and the --ease-spring / --ease-out-quart motion curves + the three reduced-* queries. - Modon Hudayriyat (owner reference) : building imagery dominant, chrome pushed to the four edges, one obvious primary action per state. SINGLE THEME ON PURPOSE. The "ground" here is a daylit 3D render, not a document background, so there is no light/dark pair to honour - the page commits to one light-glass world. Every colour is still stated explicitly so nothing inherits from the host. ========================================================================== */ body.cv2 { /* ---- brand (unchanged values, promoted to a system) ---- */ --cv-gold: #c9a25b; /* MEASURED, not estimated. The first pass used #9c7a33 on the strength of a guess that it was 4.6:1; computing it properly gave 4.00:1, which fails AA for the 15px floor labels. #8a6b2c is 4.98:1. The brand gold #c9a25b is unchanged and still used for fills, rules and the gold CTA - only TEXT uses this darker step. */ --cv-gold-deep: #8a6b2c; /* 4.98:1 on white - the only gold safe for text */ --cv-gold-soft: rgba(201,162,91,.13); --cv-ink: #16233a; /* 13.9:1 on white */ --cv-ink-2: #46536b; /* 7.1:1 - secondary */ --cv-ink-3: #667287; /* 4.6:1 - labels; never go lighter for text */ /* ---- status. Semantic, deliberately NOT the gold accent, and every one carries a shape as well as a colour so it never relies on hue ---- */ --cv-av: #2f8f5b; --cv-av-bg: rgba(47,143,91,.12); --cv-rs: #b5801f; --cv-rs-bg: rgba(181,128,31,.14); --cv-sd: #b4453c; --cv-sd-bg: rgba(180,69,60,.12); /* ---- surfaces. Glass ONLY here, because every one of these floats over the live 3D - which is exactly the overlap the rule asks for ---- */ --cv-glass: rgba(255,255,255,.80); --cv-glass-2: rgba(255,255,255,.92); --cv-solid: #fff; --cv-hair: rgba(22,35,58,.10); --cv-hair-2: rgba(22,35,58,.06); /* ---- radius / shadow tiers (named, never ad-hoc) ---- */ --cv-r-sm: 10px; --cv-r-md: 14px; --cv-r-lg: 20px; --cv-r-pill: 999px; --cv-sh-1: 0 1px 2px rgba(22,35,58,.07), 0 6px 20px rgba(22,35,58,.10); --cv-sh-2: 0 2px 6px rgba(22,35,58,.09), 0 18px 48px rgba(22,35,58,.17); /* ---- motion ---- */ --cv-spring: cubic-bezier(.32,.72,0,1); --cv-quart: cubic-bezier(.25,1,.5,1); --cv-fast: .18s; --cv-mid: .28s; --cv-slow: .42s; /* ---- touch. 44 is the floor; iPad gets 52 because the owner reviews on one held at arm's length ---- */ --cv-tap: 44px; --cv-gap: 10px; --cv-edge: 16px; /* measured, not guessed: the bar is 44px of button + 2x7px padding + 2x1px border = 60, and the two-line brand block pushes it to 71. The first attempt assumed 68 and the docks overlapped it by 3px. */ --cv-topbar: 71px; --cv-under-top: calc(var(--cv-edge) + var(--cv-topbar) + 10px); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* one glass recipe, used by every floating surface */ body.cv2 .cv-glass { background-color: var(--cv-glass); -webkit-backdrop-filter: saturate(175%) blur(22px); backdrop-filter: saturate(175%) blur(22px); border: 1px solid rgba(255,255,255,.62); box-shadow: var(--cv-sh-1); } /* Focus is never removed - only restyled. Gold ring + white halo so it is visible on glass AND on the dark parts of the render underneath. */ body.cv2 :focus-visible { outline: 2px solid var(--cv-gold-deep); outline-offset: 2px; border-radius: var(--cv-r-sm); } body.cv2 button, body.cv2 a { cursor: pointer; } /* =========================================================================== 1. TOP BAR - identity and the way out. Replaces the old separate #brand plate + #topbar. One bar, one row, so the building keeps the top of the frame instead of a 100px-tall brand block. =========================================================================== */ body.cv2 #brand, body.cv2 #topbar { all: unset; } body.cv2 #cv-top { position: fixed; top: var(--cv-edge); left: var(--cv-edge); right: var(--cv-edge); z-index: 60; display: flex; align-items: center; gap: var(--cv-gap); padding: 7px 8px 7px 10px; border-radius: var(--cv-r-pill); pointer-events: auto; } body.cv2 .cv-brand { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; } body.cv2 .cv-brand-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-weight: 400; letter-spacing: .20em; color: var(--cv-ink); white-space: nowrap; } body.cv2 .cv-brand-sub { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--cv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.cv2 .cv-top-spacer { flex: 1 1 auto; min-width: 4px; } /* =========================================================================== 2. BUTTONS - one family, three weights. Every one clears 44px. =========================================================================== */ body.cv2 .cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--cv-tap); padding: 0 15px; border: 0; border-radius: var(--cv-r-pill); font: 500 13px/1 Inter, -apple-system, sans-serif; letter-spacing: .02em; color: var(--cv-ink); background: transparent; white-space: nowrap; transition: background var(--cv-fast) var(--cv-quart), transform var(--cv-fast) var(--cv-quart), color var(--cv-fast) var(--cv-quart); } body.cv2 .cv-btn svg { width: 16px; height: 16px; flex: 0 0 auto; } body.cv2 .cv-btn:hover { background-color: var(--cv-gold-soft); color: var(--cv-gold-deep); } body.cv2 .cv-btn:active { transform: scale(.97); } body.cv2 .cv-btn[aria-pressed="true"], body.cv2 .cv-btn.on { background-color: var(--cv-ink); color: #fff; } body.cv2 .cv-btn.on:hover { background: #22324d; color: #fff; } body.cv2 .cv-btn-primary { background-color: var(--cv-ink); color: #fff; box-shadow: 0 2px 8px rgba(22,35,58,.22); } body.cv2 .cv-btn-primary:hover { background: #22324d; color: #fff; } body.cv2 .cv-btn-gold { background: linear-gradient(180deg, var(--cv-gold) 0%, #b8893a 100%); /* Ink, NOT white. Measured: #fff on this gradient is 2.39:1 at the top stop and 3.14:1 at the bottom - both fail AA. The brand ink gives 6.84:1 and 5.19:1. Gold is a light accent; it takes dark text. */ color: var(--cv-ink); box-shadow: 0 2px 10px rgba(184,137,58,.34); } body.cv2 .cv-btn-gold:hover { filter: brightness(1.06); color: var(--cv-ink); } /* icon-only buttons still carry an aria-label; the class only sets the box */ body.cv2 .cv-btn-icon { width: var(--cv-tap); padding: 0; } /* =========================================================================== 3. LEFT DOCK - availability, legible BEFORE anything is selected. This is the part the brief calls out: a visitor must see what is free without clicking. Count first, legend second, full list on demand. =========================================================================== */ body.cv2 #cv-avail { position: fixed; left: var(--cv-edge); top: var(--cv-under-top); z-index: 55; width: 252px; border-radius: var(--cv-r-lg); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - var(--cv-edge)*2 - 160px); } body.cv2 .cv-avail-head { padding: 13px 15px 11px; border-bottom: 1px solid var(--cv-hair); } body.cv2 .cv-avail-kick { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--cv-ink-3); margin-bottom: 7px; } body.cv2 .cv-avail-big { display: flex; align-items: baseline; gap: 7px; font-family: "Cormorant Garamond", Georgia, serif; color: var(--cv-ink); } body.cv2 .cv-avail-n { font-size: 32px; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } body.cv2 .cv-avail-of { font-size: 13px; color: var(--cv-ink-2); font-family: Inter, sans-serif; } /* legend: unified row, hairline separated - not three tinted chips */ body.cv2 #legend { position: static; inset: auto; transform: none; display: flex; flex-direction: column; gap: 0; background: none; border: 0; box-shadow: none; padding: 4px 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } body.cv2 #legend > span { display: flex; align-items: center; gap: 9px; padding: 9px 15px; font-size: 12px; color: var(--cv-ink-2); border-bottom: 1px solid var(--cv-hair-2); } body.cv2 #legend > span:last-child { border-bottom: 0; } body.cv2 #legend i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; border: 2px solid currentColor; background: transparent; } /* shape as well as colour, so status never depends on hue alone */ body.cv2 #legend .lg-av i { color: var(--cv-av); background-color: var(--cv-av); } body.cv2 #legend .lg-rs i { color: var(--cv-rs); border-radius: 2px; } body.cv2 #legend .lg-sd i { color: var(--cv-sd); background: transparent; } body.cv2 #legend .lg-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--cv-ink); font-weight: 500; } /* the touch-friendly apartment list the brief asks for */ body.cv2 .cv-list-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--cv-tap); padding: 0 15px; border: 0; border-top: 1px solid var(--cv-hair); background: transparent; font: 500 12px/1 Inter, sans-serif; color: var(--cv-ink); transition: background var(--cv-fast) var(--cv-quart); } body.cv2 .cv-list-toggle:hover { background-color: var(--cv-gold-soft); } body.cv2 .cv-list-toggle .chev { transition: transform var(--cv-mid) var(--cv-spring); } body.cv2 .cv-list-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } body.cv2 #cv-units { overflow-y: auto; -webkit-overflow-scrolling: touch; } body.cv2 #cv-units[hidden] { display: none; } body.cv2 .cv-ublock { padding: 9px 15px 5px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cv-ink-3); border-top: 1px solid var(--cv-hair); position: sticky; top: 0; background-color: var(--cv-glass-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.cv2 .cv-urow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--cv-tap); padding: 0 15px; border: 0; border-bottom: 1px solid var(--cv-hair-2); background: transparent; font: 400 13px/1 Inter, sans-serif; color: var(--cv-ink); text-align: left; transition: background var(--cv-fast) var(--cv-quart); } body.cv2 .cv-urow:hover { background-color: var(--cv-gold-soft); } body.cv2 .cv-urow.on { background-color: var(--cv-ink); color: #fff; } body.cv2 .cv-urow.on .cv-umeta { color: rgba(255,255,255,.72); } body.cv2 .cv-udot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } body.cv2 .cv-urow[data-st="av"] .cv-udot { background-color: var(--cv-av); } body.cv2 .cv-urow[data-st="rs"] .cv-udot { background-color: var(--cv-rs); border-radius: 2px; } body.cv2 .cv-urow[data-st="sd"] .cv-udot { background: transparent; box-shadow: inset 0 0 0 2px var(--cv-sd); } body.cv2 .cv-uid { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 42px; } body.cv2 .cv-umeta { margin-left: auto; font-size: 11.5px; color: var(--cv-ink-3); font-variant-numeric: tabular-nums; } /* =========================================================================== 4. RIGHT DOCK - building then floor. The old rail listed A1..A R, B1..BR and Ground as nine equal rows, which made "which building am I in" a reading task. Segmented control answers it in one glance, then the floors below it are only ever the floors of the chosen building. =========================================================================== */ body.cv2 #cv-levels { position: fixed; right: var(--cv-edge); top: var(--cv-under-top); z-index: 55; width: 214px; border-radius: var(--cv-r-lg); overflow: hidden; } body.cv2 .cv-seg { display: flex; gap: 3px; padding: 5px; border-bottom: 1px solid var(--cv-hair); } body.cv2 .cv-seg button { flex: 1 1 0; min-height: 38px; padding: 0 6px; border: 0; border-radius: var(--cv-r-sm); background: transparent; font: 500 12px/1 Inter, sans-serif; color: var(--cv-ink-2); transition: background var(--cv-fast) var(--cv-quart), color var(--cv-fast) var(--cv-quart); } body.cv2 .cv-seg button:hover { background-color: var(--cv-gold-soft); color: var(--cv-gold-deep); } body.cv2 .cv-seg button[aria-selected="true"] { background-color: var(--cv-ink); color: #fff; } body.cv2 #rail { position: static; inset: auto; transform: none; display: block; background: none; border: 0; box-shadow: none; padding: 4px 0 5px; border-radius: 0; max-height: none; width: auto; backdrop-filter: none; -webkit-backdrop-filter: none; } body.cv2 #rail .rail-cap { display: none; } /* the segment says it now */ body.cv2 #rail .floor-btn { display: flex; align-items: center; gap: 11px; width: 100%; min-height: var(--cv-tap); padding: 0 14px; margin: 0; border: 0; border-bottom: 1px solid var(--cv-hair-2); background: transparent; font: 400 13px/1 Inter, sans-serif; color: var(--cv-ink); text-align: left; transition: background var(--cv-fast) var(--cv-quart); } body.cv2 #rail .floor-btn:last-child { border-bottom: 0; } body.cv2 #rail .floor-btn:hover { background-color: var(--cv-gold-soft); } body.cv2 #rail .floor-btn .lvl { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; letter-spacing: .04em; color: var(--cv-gold-deep); min-width: 26px; flex: 0 0 auto; } body.cv2 #rail .floor-btn.on { background-color: var(--cv-ink); color: #fff; } body.cv2 #rail .floor-btn.on .lvl { color: var(--cv-gold); } body.cv2 #rail .floor-btn .cv-fcount { margin-left: auto; font-size: 11px; color: var(--cv-ink-3); font-variant-numeric: tabular-nums; } body.cv2 #rail .floor-btn.on .cv-fcount { color: rgba(255,255,255,.7); } body.cv2 #rail .floor-btn[hidden] { display: none; } /* =========================================================================== 5. BOTTOM BAR - every remaining action, one row, centred under the building. =========================================================================== */ body.cv2 #tools { position: fixed; left: 50%; bottom: var(--cv-edge); transform: translateX(-50%); z-index: 60; right: auto; top: auto; /* flex-direction is stated EXPLICITLY: coast.css sets column on small screens, and an undeclared property there would win by default. */ display: flex; flex-direction: row; align-items: center; gap: 3px; padding: 5px; border-radius: var(--cv-r-pill); max-width: calc(100vw - var(--cv-edge)*2); overflow-x: auto; scrollbar-width: none; } body.cv2 #tools::-webkit-scrollbar { display: none; } body.cv2 #tools > button, body.cv2 #tools > a { /* neutralise the old per-button plate look; .cv-btn supplies the new one */ background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.cv2 .cv-sep { width: 1px; height: 22px; background-color: var(--cv-hair); flex: 0 0 auto; margin: 0 3px; } /* =========================================================================== 6. APARTMENT SHEET - the selection panel. Desktop/landscape: right-hand panel. Phone/portrait: bottom sheet. Actions are ordered exactly as the brief requires: [ View apartment in 3D ] primary [ Enter apartment ] appears only after the preview [ Enquire ] secondary =========================================================================== */ body.cv2 #card { /* coast.css anchors this bottom-LEFT (left:22px;bottom:22px). Setting only right/top left BOTH anchors live, and left wins in LTR - so the panel sat on top of the availability dock. Clear the old anchors explicitly. */ position: fixed; right: var(--cv-edge); top: var(--cv-under-top); left: auto; bottom: auto; width: 344px; max-height: calc(100vh - var(--cv-edge)*2 - 150px); z-index: 70; border-radius: var(--cv-r-lg); background-color: var(--cv-glass-2); -webkit-backdrop-filter: saturate(175%) blur(24px); backdrop-filter: saturate(175%) blur(24px); border: 1px solid rgba(255,255,255,.66); box-shadow: var(--cv-sh-2); padding: 0; overflow: hidden auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(8px) scale(.985); pointer-events: none; transition: opacity var(--cv-mid) var(--cv-spring), transform var(--cv-mid) var(--cv-spring); } body.cv2 #card.show { opacity: 1; transform: none; pointer-events: auto; } body.cv2 #card > * { padding-left: 18px; padding-right: 18px; } body.cv2 #card .close { /* size is coast.css's - it already grows the pressable area to 44x44 while keeping the glyph small, and says so. Only the look changes here. */ z-index: 2; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(22,35,58,.06); color: var(--cv-ink-2); font-size: 19px; line-height: 1; transition: background var(--cv-fast) var(--cv-quart); } body.cv2 #card .close:hover { background: rgba(22,35,58,.13); color: var(--cv-ink); } body.cv2 #card-kick { padding-top: 17px; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--cv-ink-3); } body.cv2 #card-title { margin: 5px 0 0; padding-right: 40px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; font-weight: 400; letter-spacing: -.012em; line-height: 1.05; color: var(--cv-ink); text-wrap: balance; } body.cv2 #card-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 13px; } body.cv2 #card-status .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--cv-r-pill); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; } body.cv2 #card-status .badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } body.cv2 #card-status .s-av { background-color: var(--cv-av-bg); color: #226b43; } body.cv2 #card-status .s-rs { background-color: var(--cv-rs-bg); color: #8a6115; } body.cv2 #card-status .s-rs::before { border-radius: 2px; } body.cv2 #card-status .s-sd { background-color: var(--cv-sd-bg); color: #8e352e; } body.cv2 #card-status .s-sd::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; } body.cv2 #card-status .price { font-size: 12px; color: var(--cv-ink-2); } /* one panel + hairlines, not a stack of bordered rows */ body.cv2 #card-rows { padding-top: 0; padding-bottom: 4px; } body.cv2 #card-rows .row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9.5px 0; border-bottom: 1px solid var(--cv-hair-2); font-size: 13px; border-radius: 0; } body.cv2 #card-rows .row:last-child { border-bottom: 0; } body.cv2 #card-rows .row > span:first-child { color: var(--cv-ink-3); } body.cv2 #card-rows .row > span:last-child { color: var(--cv-ink); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; } body.cv2 #card-note { padding-top: 12px; padding-bottom: 4px; font-size: 12px; line-height: 1.62; color: var(--cv-ink-2); } body.cv2 #card-note .ready-360, body.cv2 #card-note .soon-360 { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 3px 9px; border-radius: var(--cv-r-pill); font-size: 10.5px; font-weight: 500; letter-spacing: .03em; } body.cv2 #card-note .ready-360 { background-color: var(--cv-av-bg); color: #226b43; } body.cv2 #card-note .soon-360 { background: rgba(22,35,58,.07); color: var(--cv-ink-2); } body.cv2 #card-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 15px; padding-bottom: 18px; } body.cv2 #card-actions .act { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--cv-r-md); text-decoration: none; font: 500 13.5px/1 Inter, sans-serif; letter-spacing: .01em; transition: background var(--cv-fast) var(--cv-quart), transform var(--cv-fast) var(--cv-quart), filter var(--cv-fast) var(--cv-quart); } body.cv2 #card-actions .act:active { transform: scale(.985); } body.cv2 #card-actions .act-3d { background-color: var(--cv-ink); color: #fff; box-shadow: 0 2px 10px rgba(22,35,58,.22); } body.cv2 #card-actions .act-3d:hover { background: #22324d; } body.cv2 #card-actions .act-enter, body.cv2 #card-actions .act-enter-flat { background: linear-gradient(180deg, var(--cv-gold) 0%, #b8893a 100%); color: var(--cv-ink); /* see .cv-btn-gold - white fails AA on gold */ box-shadow: 0 2px 12px rgba(184,137,58,.34); } body.cv2 #card-actions .act-enter:hover, body.cv2 #card-actions .act-enter-flat:hover { filter: brightness(1.06); } body.cv2 #card-actions .act-wa { background: rgba(22,35,58,.05); color: var(--cv-ink); box-shadow: inset 0 0 0 1px var(--cv-hair); } body.cv2 #card-actions .act-wa:hover { background: rgba(22,35,58,.09); } body.cv2 #card-actions .act[aria-disabled="true"] { background: rgba(22,35,58,.05); color: var(--cv-ink-3); box-shadow: inset 0 0 0 1px var(--cv-hair); cursor: default; } /* =========================================================================== 7. THE PREVIEW STATE - "View apartment in 3D". While previewing, the chrome steps back so the apartment is the only thing the eye has to do. The exit is always visible (wayfinding: how do I get out). =========================================================================== */ body.cv2.previewing #cv-avail, body.cv2.previewing #cv-levels, body.cv2.previewing #tools, body.cv2.previewing #minimap, body.cv2.previewing #compass { opacity: 0; pointer-events: none; transition: opacity var(--cv-mid) var(--cv-quart); } body.cv2 #cv-preview-bar { position: fixed; left: 50%; bottom: var(--cv-edge); transform: translate(-50%, 14px); z-index: 75; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: var(--cv-r-pill); opacity: 0; pointer-events: none; transition: opacity var(--cv-mid) var(--cv-spring), transform var(--cv-mid) var(--cv-spring); } body.cv2.previewing #cv-preview-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } body.cv2 #cv-preview-bar .cv-pv-id { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; letter-spacing: .04em; color: var(--cv-ink); padding: 0 6px 0 10px; font-variant-numeric: tabular-nums; } /* =========================================================================== 8. OTHER CHROME - compass, minimap, credit, hint, home. =========================================================================== */ body.cv2 #compass { top: auto; bottom: calc(var(--cv-edge) + 70px); right: var(--cv-edge); left: auto; width: 46px; height: 46px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 55; } body.cv2 #minimap { left: var(--cv-edge); bottom: var(--cv-edge); top: auto; border-radius: var(--cv-r-md); overflow: hidden; z-index: 50; box-shadow: var(--cv-sh-1); border: 1px solid rgba(255,255,255,.62); } body.cv2 #map-credit { left: var(--cv-edge); right: auto; bottom: 3px; max-width: 360px; font-size: 8.5px; line-height: 1.45; color: rgba(22,35,58,.42); text-shadow: 0 1px 2px rgba(255,255,255,.75); z-index: 40; } body.cv2 #map-credit a { color: rgba(22,35,58,.58); } body.cv2 #hint { left: 50%; transform: translateX(-50%); bottom: calc(var(--cv-edge) + 62px); top: auto; right: auto; z-index: 45; padding: 8px 15px; border-radius: var(--cv-r-pill); font-size: 11.5px; color: var(--cv-ink-2); } body.cv2 #home-btn { left: var(--cv-edge); top: var(--cv-under-top); right: auto; bottom: auto; z-index: 58; } /* =========================================================================== 9. RESPONSIVE. Breakpoints per the ui-ux-pro-max gate: 375 / 768 / 1024 / 1440. The iPad cases are treated separately in BOTH orientations because the owner reviews on one. =========================================================================== */ /* --- iPad landscape and small laptops: narrow the docks, keep the layout --- */ @media (max-width: 1180px) { body.cv2 { --cv-edge: 13px; } body.cv2 #cv-avail { width: 226px; } body.cv2 #cv-levels { width: 196px; } body.cv2 #card { width: 316px; } } /* --- iPad PORTRAIT (and any tall tablet): the two side docks would leave the building a letterbox, so availability collapses to a summary strip under the top bar and the level dock becomes a horizontal scroller. --- */ @media (max-width: 1024px) and (orientation: portrait), (max-width: 860px) { body.cv2 { --cv-tap: 48px; } body.cv2 #cv-avail { left: var(--cv-edge); right: var(--cv-edge); width: auto; top: var(--cv-under-top); max-height: none; } body.cv2 .cv-avail-head { display: flex; align-items: center; gap: 13px; padding: 11px 15px; } body.cv2 .cv-avail-kick { margin: 0; } body.cv2 .cv-avail-big { margin-left: auto; } body.cv2 .cv-avail-n { font-size: 25px; } body.cv2 #legend { flex-direction: row; padding: 0; } body.cv2 #legend > span { flex: 1 1 0; justify-content: center; border-bottom: 0; border-right: 1px solid var(--cv-hair-2); padding: 11px 6px; font-size: 11.5px; } body.cv2 #legend > span:last-child { border-right: 0; } body.cv2 #legend .lg-count { margin-left: 4px; } body.cv2 #cv-units { max-height: 46vh; } body.cv2 #cv-levels { right: var(--cv-edge); left: var(--cv-edge); width: auto; top: auto; bottom: calc(var(--cv-edge) + 70px); } body.cv2 #rail { display: flex; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; } body.cv2 #rail::-webkit-scrollbar { display: none; } body.cv2 #rail .floor-btn { width: auto; flex: 0 0 auto; border-bottom: 0; border-radius: var(--cv-r-sm); padding: 0 14px; gap: 8px; } body.cv2 #rail .floor-btn .cv-fcount { margin-left: 0; } body.cv2 #minimap, body.cv2 #compass, body.cv2 #hint { display: none; } body.cv2 #map-credit { max-width: 100%; right: var(--cv-edge); } } /* --- PHONE: the apartment panel becomes a real bottom sheet --- */ @media (max-width: 720px) { body.cv2 { --cv-edge: 10px; } body.cv2 .cv-brand-sub { display: none; } body.cv2 .cv-brand-name { font-size: 16px; letter-spacing: .16em; } body.cv2 #cv-top { padding: 5px 6px 5px 9px; } body.cv2 .cv-btn { padding: 0 12px; font-size: 12.5px; } body.cv2 #back-site span { display: none; } /* icon + aria-label remain */ body.cv2 #card { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 76vh; border-radius: var(--cv-r-lg) var(--cv-r-lg) 0 0; border-bottom: 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0); } body.cv2 #card.show { transform: translateY(0); } /* grab handle - says "this is a sheet" without an icon */ body.cv2 #card::before { content: ''; position: sticky; top: 0; display: block; width: 38px; height: 4px; margin: 9px auto 2px; border-radius: 2px; background: rgba(22,35,58,.18); } body.cv2 #card-title { font-size: 27px; } body.cv2 #card-actions { padding-bottom: 22px; } body.cv2.card-open #cv-levels, body.cv2.card-open #tools { opacity: 0; pointer-events: none; } body.cv2 #tools { bottom: calc(var(--cv-edge) + env(safe-area-inset-bottom, 0px)); } body.cv2 #cv-units { max-height: 38vh; } } /* --- 375px: the smallest supported phone --- */ @media (max-width: 400px) { body.cv2 #tools > button span:not(.cv-keep) { display: none; } /* icons only */ body.cv2 #tools > button { width: var(--cv-tap); padding: 0; } body.cv2 .cv-avail-n { font-size: 22px; } } /* =========================================================================== 10. THE THREE REDUCED-* QUERIES. Reduced motion means gentler, not none - a state change with zero feedback is harder to follow, not easier. =========================================================================== */ @media (prefers-reduced-motion: reduce) { body.cv2 *, body.cv2 *::before, body.cv2 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } body.cv2 #card, body.cv2 #cv-preview-bar { transition: opacity .12s linear; transform: none; } body.cv2 #card.show { transform: none; } body.cv2 .cv-btn:active, body.cv2 #card-actions .act:active { transform: none; } } /* transparency is a preference, not a decoration - honour it with solid fills */ @media (prefers-reduced-transparency: reduce) { body.cv2 .cv-glass, body.cv2 #card, body.cv2 .cv-ublock { background-color: var(--cv-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { body.cv2 { --cv-ink-3: #4a5568; --cv-hair: rgba(22,35,58,.28); --cv-hair-2: rgba(22,35,58,.18); } body.cv2 .cv-glass, body.cv2 #card { background: #fff; border-color: var(--cv-ink-3); -webkit-backdrop-filter: none; backdrop-filter: none; } body.cv2 :focus-visible { outline-width: 3px; } } /* screen-reader-only text for the icon-only cases */ body.cv2 .cv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* =========================================================================== 11. OUTDOOR TOUR LAYER Sits over the live 3D so returning is instant and the map state survives. The bar is the tour's way OUT - it is never covered by the tour's own chrome. =========================================================================== */ body.cv2 #cv-outdoor-layer { position: fixed; inset: 0; z-index: 200; background: #dce1d9; } body.cv2 #cv-outdoor-layer[hidden] { display: none; } body.cv2 #cv-outdoor-layer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } body.cv2 #cv-od-bar { position: absolute; top: var(--cv-edge); left: var(--cv-edge); right: var(--cv-edge); z-index: 2; display: flex; align-items: center; gap: var(--cv-gap); padding: 6px 8px; border-radius: var(--cv-r-pill); } body.cv2 #cv-od-bar .cv-od-title { flex: 1 1 auto; text-align: center; min-width: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; letter-spacing: .13em; color: var(--cv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.cv2 #cv-od-bar a.cv-btn { text-decoration: none; } @media (max-width: 720px) { body.cv2 #cv-od-bar .cv-od-title { display: none; } body.cv2 #cv-od-bar a.cv-btn { margin-left: auto; } } /* =========================================================================== 12. TOUCH-TARGET REPAIR. coast.css styles these by ID, and an id (0,1,0,0) outranks the .cv-btn class (0,0,2,1) - so the class alone left them at 36-40px. Raising them here by id keeps the cascade honest (no !important) and gets every control in the redesigned chrome over the 44px floor from ui-ux-pro-max priority 2. =========================================================================== */ body.cv2 #lang-btn, body.cv2 #sun-btn, body.cv2 #around-btn, body.cv2 #guide-btn, body.cv2 #reset, body.cv2 #back-site, body.cv2 #home-btn, body.cv2 #cv-aerial, body.cv2 #cv-outdoor, body.cv2 #cv-pv-back, body.cv2 #cv-pv-enter { min-height: var(--cv-tap); height: auto; padding: 0 15px; } /* Panels that predate the redesign but are still reachable from it. Their rows were 42px; a 2px miss is still a miss on a tablet. */ body.cv2 .ap-item, body.cv2 .gd-item { min-height: var(--cv-tap); } body.cv2 .ap-cats button, body.cv2 .gd-all, body.cv2 .gc-ask, body.cv2 .gc-open, body.cv2 .gc-stop, body.cv2 .ap-actions button, body.cv2 .ap-actions a, body.cv2 .sp-seasons button, body.cv2 #sp-play, body.cv2 .sp-close, body.cv2 .ap-close, body.cv2 .ap-back, body.cv2 #plan-close { min-height: var(--cv-tap); min-width: 44px; } /* Map pins are LABELS on a map - growing them to 44px would cover the streets they sit on. Give them a 44px hit area instead, centred on the visible label, so the target is large without the graphic changing size. */ /* second pass: these are styled by id in coast.css, so they need the id here */ body.cv2 .cv-seg button { min-height: var(--cv-tap); } body.cv2 #guide-chip .gc-ask, body.cv2 #guide-chip .gc-open, body.cv2 #guide-chip .gc-stop { min-height: var(--cv-tap); height: var(--cv-tap); } body.cv2 #sun-panel .sp-seasons button, body.cv2 #sun-panel #sp-play, body.cv2 #sun-panel .sp-close { min-height: var(--cv-tap); } /* NOT raised, on purpose: the map-attribution links. They are inline links inside a sentence of legal credit text, which WCAG 2.2 SC 2.5.8 exempts ("inline" exception). Padding them to 44px would push the ODbL credit over the building it must sit beside. */ /* Provenance disclosure - where a walkthrough differs from the apartment it is offered for. Set apart from the body copy so it reads as a caveat, not as marketing, but not alarming either: it is an honest footnote. */ body.cv2 #card-note .prov-note { display: block; margin-top: 10px; padding: 9px 11px; border-left: 2px solid var(--cv-gold); background-color: var(--cv-gold-soft); border-radius: 0 var(--cv-r-sm) var(--cv-r-sm) 0; font-size: 11.5px; line-height: 1.55; color: var(--cv-ink-2); } /* =========================================================================== 13. BOTTOM BAR, SMALL SCREENS. coast.css moves the old tool stack to the top-right as a COLUMN and lifts #reset out of it entirely (`#tools #reset{position:fixed}`, two ids). The redesign keeps one horizontal bar at the bottom on every size, so both of those are answered here at matching or higher specificity - no !important. =========================================================================== */ @media (max-width: 1024px) { body.cv2 #tools { flex-direction: row; align-items: center; top: auto; bottom: calc(var(--cv-edge) + env(safe-area-inset-bottom, 0px)); right: auto; left: 50%; gap: 3px; } body.cv2 #tools #reset { position: static; display: inline-flex; order: 0; right: auto; bottom: auto; width: auto; } body.cv2 #tools > button, body.cv2 #tools > button:not(#reset), body.cv2 #sun-btn, body.cv2 #around-btn, body.cv2 #guide-btn { width: auto; height: auto; min-height: var(--cv-tap); padding: 0 14px; border-radius: var(--cv-r-pill); } } @media (max-width: 400px) { /* icons only at 375-400px, but still 44px wide and still one row */ body.cv2 #tools > button, body.cv2 #tools > button:not(#reset), body.cv2 #sun-btn, body.cv2 #around-btn, body.cv2 #guide-btn { width: var(--cv-tap); padding: 0; border-radius: 50%; } } /* iPad portrait: the level dock sits above the bar, so the bar's own clearance has to account for it rather than the two fighting for the same strip. */ @media (max-width: 1024px) and (orientation: portrait), (max-width: 860px) { body.cv2 #cv-levels { bottom: calc(var(--cv-edge) + var(--cv-tap) + 22px); } } /* =========================================================================== 14. THREE DEFECTS FOUND BY LOOKING AT THE RENDER. =========================================================================== */ /* (a) #reset escaped the bottom bar. coast.css pins it with `#tools #reset` (two ids, 0-2-0-0) which outranks `body.cv2 #reset` (0-1-1-1), so it floated over the Mario button. Match it with two ids + class + element. */ body.cv2 #tools #reset { position: static; order: 0; right: auto; bottom: auto; top: auto; left: auto; display: inline-flex; width: auto; height: auto; min-height: var(--cv-tap); padding: 0 15px; border-radius: var(--cv-r-pill); background: transparent; box-shadow: none; border: 0; color: var(--cv-ink); font: 500 13px/1 Inter, -apple-system, sans-serif; letter-spacing: .02em; } body.cv2 #tools #reset:hover { background-color: var(--cv-gold-soft); color: var(--cv-gold-deep); } /* (b) the ODbL credit was rendering underneath the minimap. It is a legal attribution and must stay legible, so it moves to the right of the minimap rather than being shrunk or hidden. */ body.cv2 #map-credit { left: calc(var(--cv-edge) + 112px); max-width: min(420px, calc(100vw - var(--cv-edge)*2 - 130px)); } @media (max-width: 1024px) and (orientation: portrait), (max-width: 860px) { /* the minimap is hidden at these sizes, so the credit takes the corner back */ body.cv2 #map-credit { left: var(--cv-edge); max-width: calc(100vw - var(--cv-edge)*2); } } /* (c) "Building A" wrapped onto two lines inside the segment. Give the dock the width the real label needs instead of trimming the label - "A" alone would make the visitor work out what A is. */ body.cv2 #cv-levels { width: 238px; } body.cv2 .cv-seg button { font-size: 11.5px; padding: 0 4px; white-space: nowrap; } @media (max-width: 1180px) { body.cv2 #cv-levels { width: 224px; } } /* =========================================================================== 15. CARD READING ORDER. The markup order is rows -> sunlight -> plan -> chips -> note -> actions, which pushed the 360 status AND the provenance caveat below the fold behind a long sunlight read-out. Whether the apartment can be walked, and any caveat about the walkthrough, must be seen before the optional detail. Re-ordered visually with flex; the DOM order is untouched, so the reading order for a screen reader still follows the source. =========================================================================== */ body.cv2 #card { display: flex; flex-direction: column; } body.cv2 #card::before { order: -2; } body.cv2 #card-kick { order: 0; } body.cv2 #card-title { order: 1; } body.cv2 #card-status { order: 2; } body.cv2 #card-rows { order: 3; } body.cv2 #card-note { order: 4; } /* 360 status + provenance, before detail */ body.cv2 #card-actions { order: 5; } body.cv2 #card-sun { order: 6; } body.cv2 #card-plan { order: 7; } body.cv2 #card-chips { order: 8; } body.cv2 #card-actions { margin-bottom: 4px; } /* The sun-study link inherits coast.css's --gold-lt (#9c7a33, 4.00:1) at 10px. Same fix, scoped to the redesign. */ body.cv2 { --gold-lt: #8a6b2c; } /* =========================================================================== 16. KEEP THE LEGEND ALIVE. coast.css hides #legend whenever a card, panel or notice opens: body.card-open / .has-note / .away / .sun-open / .around-open / .guide-open #legend { opacity:0 } (and display:none on small screens) That was right when the legend was a floating pill at bottom-left, sharing that corner with the card. In the redesign it lives INSIDE the availability dock at top-left and the apartment panel is on the right, so they never collide - and availability must stay readable exactly while an apartment is being considered. Each hide is answered at higher specificity. body.diving is deliberately NOT overridden: during the flight into an apartment nothing should compete with it. =========================================================================== */ body.cv2.card-open #legend, body.cv2.has-note #legend, body.cv2.away #legend, body.cv2.sun-open #legend, body.cv2.around-open #legend, body.cv2.guide-open #legend { opacity: 1; pointer-events: auto; display: flex; } /* the small-screen rules use display:none, so they need the same answer there */ @media (max-width: 1024px) and (orientation: portrait), (max-width: 860px) { body.cv2.card-open #legend { display: flex; flex-direction: row; } } @media (max-width: 720px) { body.cv2.card-open #legend { display: flex; flex-direction: row; } } /* The apartment panel and the floor dock share the right rail on wide screens. The panel is the detail view that temporarily replaces browsing, so the dock steps aside rather than being covered - and comes straight back on close. */ body.cv2.card-open #cv-levels { opacity: 0; pointer-events: none; transition: opacity var(--cv-mid) var(--cv-quart); } @media (max-width: 1024px) and (orientation: portrait), (max-width: 860px) { /* in portrait the dock is a bottom strip and the panel is a sheet: no clash */ body.cv2.card-open #cv-levels { opacity: 1; pointer-events: auto; } } /* =========================================================================== 17. THE [hidden] TRAP. Setting `display:flex` on a class beats the UA's `[hidden]{display:none}`, so every element this UI hides with the hidden PROPERTY kept rendering: the Building filter left Block A rows on screen while the segment said Block B. The rail already had an explicit rule; the list and legend did not. Any element given `display` here must also answer [hidden]. =========================================================================== */ body.cv2 .cv-urow[hidden], body.cv2 .cv-ublock[hidden], body.cv2 #legend > span[hidden], body.cv2 #cv-units[hidden], body.cv2 #rail .floor-btn[hidden] { display: none; } /* =========================================================================== 18. iPAD PORTRAIT: the apartment panel becomes a sheet. As a right-hand panel it sat on top of the full-width availability dock and cut it in half. Portrait has height to spare and no width to spare, so the panel takes the bottom - the same shape as the phone, sized for the tablet. =========================================================================== */ @media (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) { body.cv2 #card { left: var(--cv-edge); right: var(--cv-edge); bottom: 0; top: auto; width: auto; max-width: none; max-height: 62vh; border-radius: var(--cv-r-lg) var(--cv-r-lg) 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0); } body.cv2 #card.show { transform: translateY(0); } /* the level strip and the bar would sit under the sheet */ body.cv2.card-open #cv-levels, body.cv2.card-open #tools { opacity: 0; pointer-events: none; } } /* =========================================================================== 19. BAR LABELS, CONSISTENTLY. coast.css collapses #sun-btn/#around-btn/#guide-btn to icon-only circles on small screens, which left three buttons labelled and three not in the same bar. Either all carry a label or none do. =========================================================================== */ @media (min-width: 561px) { body.cv2 #tools > button > span, body.cv2 #sun-btn > span, body.cv2 #around-btn > span, body.cv2 #guide-btn > span { display: inline; } } @media (max-width: 560px) { body.cv2 #tools > button > span:not(.cv-keep) { display: none; } body.cv2 #tools > button { width: var(--cv-tap); padding: 0; border-radius: 50%; } }