/** * OfficePlace — "Desk" redesign layer. * Loaded after op-core.css, so this wins the cascade. op-core.css keeps the * structure and plugin-only rules; this file carries the whole redesign: * light header, a data-forward listings table with a filter rail, rate per m² * everywhere, a compare flow, and a monospace numeric face for figures. * Every op-* class name is unchanged so it still maps to the plugin output. * The previous design pass lives in op-design.css (not loaded here) for reference. */ /* ------------------------------------------------------------ tokens */ :root { --op-ink: #232C34; /* headings, primary text, dark ground */ --op-ink-2: #323E48; /* secondary ink */ --op-muted: #5b6a77; /* muted UI text */ --op-soft: #616d78; /* muted meta on white (AA) */ --op-line: #e3e8ea; /* borders */ --op-line-2: #eef1f0; /* faint row rules */ --op-bg: #f6f8f7; /* section ground */ --op-green: #93D500; /* accent, safe on dark */ --op-green-text: #4a6b00; /* accent text on white (AA) */ --op-green-tint: #eef8d9; /* soft green fill */ --op-green-chip: #f7fbee; /* chip fill */ --op-green-cbrd: #cfe0a8; /* chip border */ --op-mono: var(--op-font-mono); } /* ------------------------------------------------------------ base */ .op-page, .op-single, .op-archive { background: #fff; } body { color: var(--op-ink); } /* Bands (hero, footer, page heads) run edge to edge; the CONTENT inside them centres at a comfortable max width so nothing sprawls on wide monitors. --op-cw is the wide content width; single-column pages use --op-cw-narrow. */ :root { --op-cw: 1400px; --op-cw-narrow: 1140px; } /* The full-bleed header bands break out with calc(50% - 50vw). When a classic (non-overlay) scrollbar is present, 50vw counts the scrollbar width, so the band ends up a hair wider than the content and a horizontal scrollbar can flicker in and out as you scroll (the "shake"). Clipping horizontal overflow at the root removes it on every platform, without creating a scroll container (so the sticky nav and nested scroll strips keep working). */ html { overflow-x: clip; } .op-wrap { max-width: var(--op-cw-narrow); margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 60px); } /* Hello Elementor caps .site-main (and content wrappers) at 1140px — remove it so the plugin's own full-bleed sections and op-wrap gutters control the width. */ /* Hello Elementor + op-core cap .site-main at ~1140-1180px. Remove it so the plugin's own full-bleed sections and op-wrap gutters control width. Article prose keeps its readable column via .op-prose / the single-post rules below. */ main.site-main, body .site-main { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; } /* Numeric / data face helper */ .op-num { font-family: var(--op-mono); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ header (light) */ .op-site-head { position: sticky; top: 0; z-index: 9000; background: rgba(255,255,255,.75); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid rgba(0,0,0,.07); box-shadow: 0 1px 0 rgba(0,0,0,.02); } .op-site-head-in { display: flex; align-items: center; gap: 30px; height: 64px; max-width: var(--op-cw); margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 60px); } .op-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; } .op-logo-mark { display: inline-flex; } .op-logo-mark svg { height: 22px; width: auto; } /* Wordmark logo: OFFICE heavy + PLACE light, green tittle over the "I", green underline bar. Sized in em so the dot + bar track the font size everywhere. */ .op-logo-word { position: relative; display: inline-block; font-family: var(--op-font-head); font-weight: 400; font-size: 19px; letter-spacing: .01em; line-height: 1; color: var(--op-ink); padding-bottom: .34em; } .op-logo-word b { font-weight: 800; letter-spacing: -.005em; } .op-logo-dot { position: relative; font-style: normal; } .op-logo-dot::after { content: ""; position: absolute; left: 50%; top: -.30em; width: .26em; height: .26em; border-radius: 50%; background: var(--op-green); transform: translateX(-50%); } .op-logo-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .18em; background: var(--op-green); } /* Nav */ .op-site-nav { display: flex; } .op-nav-list { display: flex; flex-wrap: nowrap; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; } .op-nav-list a { font-family: var(--op-font-body); font-weight: 500; font-size: 13.5px; color: var(--op-muted); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; white-space: nowrap; } .op-nav-list a:hover { color: var(--op-ink); } .op-nav-list .is-current > a, .op-nav-list .current-menu-item > a { color: var(--op-ink); border-bottom-color: var(--op-green); } .op-caret { margin-left: 3px; } /* Services dropdown */ .op-nav-list .op-has-sub { position: relative; } .op-nav-list .op-sub { position: absolute; left: 0; top: 100%; min-width: 210px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--op-line); box-shadow: 0 12px 30px rgba(35,44,52,.12); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 30; } .op-nav-list .op-has-sub:hover .op-sub, .op-nav-list .op-has-sub:focus-within .op-sub { opacity: 1; visibility: visible; transform: translateY(0); } .op-nav-list .op-sub a { display: block; padding: 8px 10px; border: 0; font-size: 13px; color: var(--op-muted); } .op-nav-list .op-sub a:hover { color: var(--op-ink); background: var(--op-bg); } /* Right-side controls */ .op-head-call, .op-head-saved, .op-head-list { flex: none; } .op-head-saved { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--op-line); color: var(--op-ink-2); text-decoration: none; font-family: var(--op-font-body); font-weight: 500; font-size: 13px; } .op-head-saved:hover { border-color: var(--op-ink); color: var(--op-ink); } .op-head-saved-icon { display: none; } .op-fav-count { position: static; background: var(--op-green-tint); color: var(--op-green-text); font-family: var(--op-mono); font-weight: 700; font-size: 12px; padding: 2px 6px; min-width: 0; height: auto; border-radius: 0; } .op-head-call { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px; color: var(--op-ink); text-decoration: none; font-family: var(--op-mono); font-weight: 500; font-size: 13.5px; } .op-head-call:hover { color: var(--op-green-text); background: none; border: 0; } .op-head-call svg { flex: none; } .op-head-list { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--op-ink); color: #fff; text-decoration: none; font-family: var(--op-font-head); font-weight: 700; font-size: 13px; letter-spacing: .02em; white-space: nowrap; } .op-head-list:hover { background: #000; color: #fff; } /* The Elementor kit colours anchor text green; on dark-background buttons that reads as low-contrast green-on-navy. Force legible white text on every dark button (these are all links, so the kit wins without !important). */ .op-head-list, .op-head-list:link, .op-head-list:visited, .op-head-list:hover, .op-view-format a.is-active, .op-view-format a.is-active:hover, .op-btn-dark, .op-btn-dark:link, .op-btn-dark:visited, .op-btn-dark:hover, .op-view-map-toggle button.is-active { color: #fff !important; } /* Mobile nav toggle */ .op-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: 4px; } .op-nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--op-ink); margin: 4.5px 0; border-radius: 2px; } /* ------------------------------------------------------------ search bar */ .op-searchx { background: #fff; border: 1px solid #cfd7d9; padding: 6px; border-radius: 0; box-shadow: none; } .op-searchx-hero { max-width: 720px; } .op-searchx-main { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .op-searchx-kw { display: flex; align-items: center; flex: 1 1 280px; min-width: 200px; padding: 0 10px; border: 0; box-shadow: none; } .op-searchx-kw svg { color: var(--op-soft); } .op-searchx-kw input { border: 0; outline: 0; width: 100%; padding: 12px 0; font: 400 15px var(--op-font-body); color: var(--op-ink); background: none; } .op-searchx-sel { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: 0 0 auto; border: 1px solid var(--op-line); color: var(--op-ink-2); font: 500 13px var(--op-font-body); padding: 11px 36px 11px 12px; border-radius: 0; background: var(--op-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8894' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center; } .op-searchx-sel:focus, .op-searchx-kw:focus-within { outline: 0; border-color: var(--op-green); box-shadow: none; } .op-searchx-more { flex: 0 0 auto; background: none; border: 1px solid var(--op-line); cursor: pointer; font: 500 13px var(--op-font-body); color: var(--op-muted); padding: 11px 12px; } .op-searchx-badge { font-family: var(--op-mono); font-weight: 700; background: var(--op-green-tint); color: var(--op-green-text); padding: 1px 6px; } .op-searchx-go { flex: 0 0 auto; border: 0; background: var(--op-green); color: var(--op-ink); font: 700 13px var(--op-font-head); letter-spacing: .04em; padding: 12px 24px; cursor: pointer; border-radius: 0; } .op-searchx-go:hover { background: #86c400; } .op-searchx-adv { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 6px 4px; } .op-searchx-adv[hidden] { display: none; } .op-searchx-advf { display: flex; flex-direction: column; gap: 5px; font: 500 12px var(--op-font-body); color: var(--op-ink-2); } .op-searchx-advf select, .op-searchx-advf input { border: 1px solid var(--op-line); padding: 9px 10px; font: 400 13px var(--op-font-body); border-radius: 0; } .op-searchx-clear { color: var(--op-green-text); font-weight: 600; align-self: center; } /* ------------------------------------------------------------ buttons */ .op-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--op-font-head); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 12px 22px; border-radius: 0; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .op-btn-green { background: var(--op-green); color: var(--op-ink); border-color: var(--op-green); } .op-btn-green:hover { background: #86c400; border-color: #86c400; color: var(--op-ink); } .op-btn-ghost { background: #fff; color: var(--op-ink); border-color: var(--op-ink); } .op-btn-ghost:hover { background: var(--op-ink); color: #fff; } .op-btn-dark { background: var(--op-ink); color: #fff; border-color: var(--op-ink); } .op-btn-dark:hover { background: #000; color: #fff; } /* Desk buttons are square (op-core's .op-btn.op-btn rounds them to 7px) */ .op-btn.op-btn, .op-searchx-go, .op-search-go { border-radius: 0; } /* ------------------------------------------------------------ badges, kickers, chips */ .op-badge { display: inline-block; font-family: var(--op-font-head); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 0; } .op-badge-status { background: var(--op-green); color: var(--op-ink); box-shadow: none; } .op-badge-grade { background: rgba(35,44,52,.85); color: #fff; } .op-badge-area { background: var(--op-green-chip); color: var(--op-green-text); border: 1px solid var(--op-green-cbrd); font-weight: 600; } .op-kick { font-family: var(--op-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--op-green-text); margin: 0 0 10px; } /* chips (amenities, applied filters) */ .op-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 500 11.5px var(--op-font-body); padding: 4px 8px; border: 1px solid var(--op-line); color: var(--op-muted); background: #fff; } .op-chip-green { color: var(--op-green-text); background: var(--op-green-chip); border-color: var(--op-green-cbrd); } /* ------------------------------------------------------------ footer */ .op-site-foot { background: var(--op-ink); color: #c6cfd5; } /* Align footer content with the header + page content (same centred max width). */ .op-site-foot .op-foot-cols { max-width: var(--op-cw); padding-left: clamp(20px, 3.5vw, 60px); padding-right: clamp(20px, 3.5vw, 60px); } /* Footer sits on dark ink, so the wordmark text is light (dot + bar stay green). */ .op-site-foot .op-logo-word, .op-foot-logo .op-logo-word { color: #fff; } .op-foot-col h5 { font-family: var(--op-font-head); color: #fff; } .op-foot-col a { color: #c6cfd5; } .op-foot-col a:hover { color: var(--op-green); } .op-foot-alerts input[type="email"] { border-radius: 0; } .op-foot-base a:hover { color: var(--op-green); } .op-social-link { border-radius: 0; } /* ============================================================ results (Desk) */ .op-wrap-wide { max-width: var(--op-cw); margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 60px); } .op-archive { background: #fff; padding-bottom: 60px; } /* keyword strip */ .op-search-strip { display: flex; gap: 6px; align-items: center; background: var(--op-bg); border: 1px solid var(--op-line); padding: 6px; margin: 20px 0 24px; } .op-search-strip .op-searchx-kw { flex: 1 1 auto; background: #fff; border: 1px solid var(--op-line); padding: 0 12px; } .op-search-strip .op-searchx-kw input { border: 0; outline: 0; width: 100%; padding: 12px 8px; font: 400 15px var(--op-font-body); background: none; color: var(--op-ink); } .op-search-go { flex: none; } /* body grid: rail + results */ .op-archive-body { display: grid; grid-template-columns: 244px 1fr; gap: 32px; align-items: start; } /* filter rail */ .op-rail { border: 1px solid var(--op-line); position: sticky; top: 80px; /* Natural height, no inner scrollbar. The filter set is short enough to show in full; it scrolls with the page rather than inside its own box. */ } .op-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--op-line); } .op-rail-title { margin: 0; font: 700 11px var(--op-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--op-ink); } .op-rail-reset { font: 500 12.5px var(--op-font-body); color: var(--op-green-text); text-decoration: none; } .op-rail-field { padding: 14px 16px; border-bottom: 1px solid var(--op-line-2); } .op-rail-field label { display: block; font: 500 12.5px var(--op-font-body); color: var(--op-ink-2); margin-bottom: 8px; } .op-rail-field select, .op-rail-field input { width: 100%; border: 1px solid var(--op-line); padding: 10px; border-radius: 0; font: 400 13px var(--op-font-body); color: var(--op-ink); background: #fff; } .op-rail-field input { font-family: var(--op-mono); } .op-rail-field select:focus, .op-rail-field input:focus { outline: 0; border-color: var(--op-green); } .op-rail-apply { margin: 16px; width: calc(100% - 32px); } .op-rail-two { display: flex; gap: 8px; } .op-rail-two input { width: 100%; } .op-size-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .op-size-chip { font: 500 11.5px var(--op-font-body); color: var(--op-muted); border: 1px solid var(--op-line); background: #fff; padding: 6px 9px; cursor: pointer; white-space: nowrap; } .op-size-chip:hover { border-color: var(--op-ink); color: var(--op-ink); } .op-size-chip.is-active { color: var(--op-green-text); border-color: var(--op-green-cbrd); background: var(--op-green-chip); } .op-rail-legend { font: 500 12.5px var(--op-font-body); color: var(--op-ink-2); margin: 0 0 10px; } .op-rail-checks { display: flex; flex-direction: column; gap: 10px; } .op-check { display: flex; gap: 9px; align-items: center; min-height: 24px; cursor: pointer; font: 400 13px var(--op-font-body); color: var(--op-muted); } .op-check input { width: 15px; height: 15px; accent-color: var(--op-green-text); flex: none; } /* strip carries keyword + the three dropdowns + Search (matches the mockup) */ .op-search-strip { flex-wrap: wrap; } .op-search-strip .op-searchx-kw { flex: 1 1 260px; min-width: 200px; } .op-search-strip .op-searchx-sel { flex: 0 0 auto; width: 150px; min-width: 132px; background-color: var(--op-bg); } /* "To Let or For Sale" is the longest option and was clipping in the 150px box */ .op-search-strip select[name="status"].op-searchx-sel { width: 178px; } .op-search-strip .op-searchx-sel { padding-right: 30px; text-overflow: ellipsis; } .op-search-strip .op-search-go { flex: 0 0 auto; } .op-applied-chip-green { color: var(--op-green-text); background: var(--op-green-chip); border-color: var(--op-green-cbrd); } /* results header */ .op-results { min-width: 0; } .op-results-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .op-results-top h1 { font: 700 24px var(--op-font-head); color: var(--op-ink); margin: 0 0 5px; letter-spacing: -.02em; } .op-results-count { font: 400 13px var(--op-font-mono); color: var(--op-soft); margin: 0; } .op-results-controls { display: flex; align-items: center; gap: 10px; flex: none; } .op-view-toggle { display: flex; border: 1px solid var(--op-line); } .op-view-toggle button { border: 0; background: #fff; color: var(--op-muted); cursor: pointer; font: 700 11.5px var(--op-font-head); letter-spacing: .08em; padding: 10px 14px; text-transform: uppercase; } .op-view-toggle button.is-active { background: var(--op-ink); color: #fff; } .op-sort { border: 1px solid var(--op-line); background: #fff; padding: 10px; font: 500 13px var(--op-font-body); color: var(--op-ink-2); border-radius: 0; } /* applied chips */ .op-applied { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--op-ink); margin-bottom: 2px; } .op-applied-label { font: 400 12.5px var(--op-font-body); color: var(--op-soft); } .op-applied-chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font: 500 12.5px var(--op-font-body); color: var(--op-ink); background: var(--op-bg); border: 1px solid var(--op-line); padding: 6px 10px; } .op-applied-chip:hover { border-color: var(--op-ink); } /* the table */ .op-archive-split { display: block; } .op-table { width: 100%; } .op-row { display: grid; grid-template-columns: 40px 116px minmax(0,1fr) 92px 56px 104px 150px 44px; column-gap: 12px; align-items: center; border-bottom: 1px solid var(--op-line-2); padding: 16px 0; } .op-row-head { padding: 9px 0; border-bottom: 1px solid var(--op-line); } .op-row-head span { font: 700 10.5px var(--op-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--op-soft); } .op-row-head .op-col { text-align: right; } .op-row-check { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; cursor: pointer; } .op-row-check input { width: 16px; height: 16px; accent-color: var(--op-green-text); cursor: pointer; } .op-card-row { display: contents; text-decoration: none; } .op-card-row .op-card-img { position: relative; display: block; width: 104px; height: 74px; overflow: hidden; background: #dde4ea; } .op-card-row .op-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-card-row .op-card-noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #dde4ea, #dde4ea 10px, #d2dae1 10px, #d2dae1 20px); } .op-card-row .op-badge-status { position: absolute; left: 0; top: 0; } .op-card-row .op-card-body { display: block; padding: 0 16px; min-width: 0; } .op-card-row .op-card-title { display: block; font: 700 15.5px var(--op-font-head); color: var(--op-ink); margin: 0 0 4px; } .op-card-row .op-card-meta { display: block; font: 400 12.5px var(--op-font-body); color: var(--op-soft); margin: 0 0 6px; } .op-card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .op-card-row .op-col { text-align: right; font: 500 14px var(--op-font-mono); color: var(--op-ink-2); } .op-card-row .op-col-price { text-align: right; font: 700 15px var(--op-font-head); color: var(--op-ink); white-space: nowrap; } .op-row .op-fav { position: static; justify-self: end; width: 44px; height: 44px; border: 1px solid var(--op-line); background: #fff; color: var(--op-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; } .op-row .op-fav.is-saved { border-color: var(--op-green); background: var(--op-green-tint); color: var(--op-green-text); } .op-row .op-fav.is-saved svg path { fill: var(--op-green); stroke: var(--op-green); } .op-row.is-checked { background: #fbfdf6; } /* pagination */ .op-pagination { display: flex; gap: 6px; align-items: center; margin-top: 20px; } .op-pagination .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--op-line); color: var(--op-ink-2); text-decoration: none; font: 500 13px var(--op-font-mono); } .op-pagination .page-numbers.current { background: var(--op-ink); color: #fff; border-color: var(--op-ink); } .op-pagination .page-numbers:hover { border-color: var(--op-ink); } /* v3: three-panel results = filter rail + listings + sticky map (desktop) */ .op-archive .op-wrap-wide { max-width: 1520px; } .op-archive-split { display: grid; gap: 24px; align-items: start; } .op-split-cards { grid-template-columns: minmax(0, 1fr) 400px; } .op-split-table { grid-template-columns: 1fr; } .op-map-archive { border: 1px solid var(--op-line); position: sticky; top: 78px; height: calc(100vh - 96px); min-height: 520px; } .op-card-grid { align-content: start; } /* card/table hover sync with the map */ .op-card.is-maphover { border-color: var(--op-green) !important; box-shadow: 0 0 0 2px var(--op-green-tint); } .op-row.is-maphover { background: #f6fbe9; } /* Cards / Table format toggle (anchor links) */ .op-view-format a { display: inline-flex; align-items: center; border: 0; background: #fff; color: var(--op-muted); cursor: pointer; font: 700 11.5px var(--op-font-head); letter-spacing: .08em; padding: 10px 14px; text-transform: uppercase; text-decoration: none; } .op-view-format a.is-active { background: var(--op-ink); color: #fff; } /* Toolbar controls: identical height so the Cards/Table toggle and the sort dropdown sit on the same line (item 6 alignment). */ .op-results-controls { align-items: center; } .op-results-controls .op-view-toggle { height: 42px; margin: 0; } .op-view-toggle { height: 42px; } .op-view-toggle a, .op-view-toggle button { display: inline-flex; align-items: center; height: 100%; padding-top: 0; padding-bottom: 0; } .op-results-controls .op-sort { height: 42px; padding: 0 14px; line-height: 1; } /* the List/Map toggle is only for mobile (desktop always shows the split) */ @media (min-width: 901px) { .op-view-map-toggle { display: none; } } @media (max-width: 900px) { .op-archive-split { grid-template-columns: 1fr; } .op-map-archive { display: none; position: static; height: 66vh; min-height: 0; top: 0; } #op-archive-body.is-map .op-results-col { display: none; } #op-archive-body.is-map .op-map-archive { display: block; } } /* compare bar */ .op-compare-bar { position: sticky; bottom: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--op-ink); margin-top: 22px; } /* display:flex above beats the browser's [hidden]{display:none}, so setting the hidden attribute never actually hid the bar — Clear/remove-to-empty left it on screen showing a stale count. Force it hidden when the attribute is set. */ .op-compare-bar[hidden] { display: none !important; } .op-compare-count { margin: 0; font: 500 13px var(--op-font-body); color: #c6cfd5; } .op-compare-count .op-num { color: var(--op-green); font-weight: 700; } .op-compare-actions { display: flex; gap: 10px; align-items: center; } .op-compare-clear { background: none; border: 0; color: #c6cfd5; cursor: pointer; font: 500 12.5px var(--op-font-body); padding: 8px; } .op-compare-clear:hover { color: #fff; } /* collapse toggle: minimise the bar to a compact pill so it's out of the way */ .op-compare-toggle { order: -1; background: none; border: 0; color: #c6cfd5; cursor: pointer; padding: 6px; margin: -4px 2px -4px -6px; display: inline-flex; align-items: center; } .op-compare-toggle:hover { color: #fff; } .op-compare-toggle svg { transition: transform .2s; } .op-compare-bar.is-min { width: fit-content; margin-left: auto; padding: 8px 12px 8px 6px; gap: 8px; } .op-compare-bar.is-min .op-compare-count, .op-compare-bar.is-min .op-compare-clear { display: none; } .op-compare-bar.is-min .op-compare-toggle svg { transform: rotate(180deg); } /* results mobile */ @media (max-width: 900px) { .op-archive-body { grid-template-columns: 1fr; gap: 18px; } .op-rail { position: static; } } @media (max-width: 680px) { .op-row, .op-row-head { grid-template-columns: 36px 84px 1fr auto; grid-auto-rows: auto; row-gap: 6px; padding: 14px 0; } .op-row-head { display: none; } .op-card-row .op-card-img { width: 84px; height: 62px; } .op-card-row .op-card-body { grid-column: 3 / 5; padding: 0 0 0 12px; } .op-card-row .op-col-size, .op-card-row .op-col-grade, .op-card-row .op-col-rate { grid-column: 2 / 4; text-align: left; padding-left: 12px; font-size: 12.5px; color: var(--op-soft); } .op-card-row .op-col-size::after { content: " floor"; color: var(--op-soft); } .op-card-row .op-col-rate::after { content: " / m²"; } .op-card-row .op-col-grade::before { content: "Grade "; } .op-card-row .op-col-price { grid-column: 3 / 5; text-align: right; } .op-row .op-fav { grid-row: 1; grid-column: 4; } .op-row-check { grid-row: 1; } } /* ============================================================ property detail */ .op-single { background: #fff; } .op-single .op-wrap { max-width: 1280px; } .op-crumbs { font: 400 12.5px var(--op-font-body); color: var(--op-soft); padding: 14px 0; } .op-crumbs a { color: var(--op-green-text); text-decoration: none; } .op-crumbs a:hover { color: var(--op-ink); } .op-single-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--op-ink); margin: 4px 0 0; } .op-single-top-head h1 { font: 700 clamp(24px, 3.2vw, 34px) var(--op-font-head); line-height: 1.1; letter-spacing: -.025em; color: var(--op-ink); margin: 0 0 9px; } .op-single-sub { font: 400 14px var(--op-font-body); color: var(--op-muted); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .op-single-addr { color: var(--op-ink-2); font-weight: 500; } .op-single-sub .op-ref { font: 500 12.5px var(--op-font-mono); color: var(--op-soft); border: 1px solid var(--op-line); padding: 3px 7px; margin-left: 4px; } .op-single-top-price { text-align: right; flex: none; } .op-single-top-price .op-badge-status { margin-bottom: 9px; } .op-single-price { font: 700 clamp(22px, 3vw, 30px) var(--op-font-head); color: var(--op-ink); margin: 0; letter-spacing: -.02em; white-space: nowrap; } .op-single-rate { font: 500 13px var(--op-font-mono); color: var(--op-soft); margin: 5px 0 0; white-space: nowrap; } /* Property gallery: a large main image + a horizontal thumbnail strip (click a thumb to swap it in; click the main to open the full-screen lightbox). */ .op-gallery { display: block; grid-template-columns: none; margin: 18px 0 0; } .op-gallery-main { height: 460px; overflow: hidden; background: #dde4ea; position: relative; cursor: zoom-in; } .op-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-gallery-main .op-card-noimg { display: block; width: 100%; height: 100%; cursor: default; background: repeating-linear-gradient(135deg, #e4e9e7 0 8px, #eef1f0 8px 16px); } .op-gallery-count { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; background: rgba(18,24,30,.72); color: #fff; font: 600 12.5px var(--op-font-body); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; } .op-gallery-strip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .op-gallery-thumb-btn { flex: 0 0 auto; width: 116px; height: 78px; padding: 0; border: 0; background: #dde4ea; overflow: hidden; cursor: pointer; position: relative; opacity: .72; transition: opacity .15s, box-shadow .15s; } .op-gallery-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-gallery-thumb-btn:hover { opacity: 1; } .op-gallery-thumb-btn.is-active { opacity: 1; box-shadow: inset 0 0 0 3px var(--op-green); } .op-single-layout { display: grid; grid-template-columns: 1fr 336px; gap: 44px; margin-top: 36px; align-items: start; } .op-single-main { min-width: 0; } .op-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--op-line); border: 1px solid var(--op-line); margin: 0 0 34px; } .op-fact { background: #fff; padding: 16px 18px; } .op-fact-n { display: block; white-space: nowrap; font: 700 21px var(--op-font-mono); color: var(--op-ink); } .op-fact-l { display: block; font: 400 12.5px var(--op-font-body); color: var(--op-soft); margin-top: 4px; text-transform: none; letter-spacing: 0; } .op-single-block { margin-bottom: 34px; } .op-single-block h2 { font: 700 20px var(--op-font-head); color: var(--op-ink); margin: 0 0 14px; letter-spacing: -.015em; } .op-single-desc { font: 400 15px/1.7 var(--op-font-body); color: #4a5762; max-width: 66ch; } .op-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--op-line); border: 1px solid var(--op-line); } .op-feature { background: #fff; padding: 12px 14px; font: 400 13.5px var(--op-font-body); color: var(--op-ink-2); display: flex; align-items: center; gap: 8px; } .op-feature svg { color: var(--op-green-text); flex: none; } .op-map-single { height: 280px; border: 1px solid var(--op-line); } /* sidebar */ .op-single-side { position: sticky; top: 16px; } .op-single-actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--op-line); border: 1px solid var(--op-line); margin-bottom: 16px; } .op-single-actions-row .op-mini-btn { position: static; border: 0; border-radius: 0; background: #fff; min-height: 48px; width: auto; height: auto; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 12.5px var(--op-font-body); color: var(--op-ink-2); cursor: pointer; box-shadow: none; } .op-single-actions-row .op-mini-btn:hover { background: var(--op-bg); color: var(--op-ink); transform: none; } .op-single-actions-row .op-mini-btn.is-saved { color: var(--op-green-text); background: var(--op-green-tint); } /* Property-page broker card: same style as the Brokers page (centred, circular photo, name, role, contact buttons). */ /* Property-page broker card — matches the brokers-page card: rounded white card, circular headshot, green name, role, then Call (outline) + WhatsApp (teal). */ .op-broker-card-listing { border: 1px solid var(--op-line); padding: 28px 24px 24px; margin-bottom: 16px; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(20,30,40,.05); text-align: center; } .op-broker-card-listing .op-broker-kick { display: none; } .op-broker-card-listing .op-broker-photo { display: block; width: 130px; height: 130px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; background: #dde4ea; } .op-broker-card-listing .op-broker-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; } .op-broker-card-listing h3 { font: 700 21px var(--op-font-head); margin: 0 0 4px; letter-spacing: -.01em; } .op-broker-card-listing h3 a { color: var(--op-green-text); text-decoration: none; } .op-broker-card-listing h3 a:hover { color: var(--op-ink); } .op-broker-card-listing .op-broker-role { font: 400 14px var(--op-font-body); color: var(--op-soft); margin: 0 0 20px; } .op-broker-card-listing .op-broker-ppra, .op-broker-card-listing .op-broker-email, .op-broker-card-listing .op-broker-listings { display: none; } .op-broker-card-listing .op-broker-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; } .op-broker-card-listing .op-broker-contact .op-btn { justify-content: center; padding: 12px 0; } /* Broker directory: compact cards with a circular headshot, centred, many per row (best-practice team grid). Overrides the op-core avatar + the old big portrait. */ .op-grid.op-brokers, .op-brokers.op-grid-3 { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; } .op-brokers .op-broker-card { text-align: center; border: 1px solid var(--op-line); background: #fff; padding: 20px 14px 16px; display: flex; flex-direction: column; align-items: center; } .op-brokers .op-broker-photo { display: block; width: 82px; height: 82px; aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: #dde4ea; flex: none; } .op-brokers .op-broker-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; } .op-brokers .op-broker-card h3 { margin: 0 0 2px; } .op-brokers .op-broker-namelink { font: 700 15.5px/1.25 var(--op-font-head); color: var(--op-ink); text-decoration: none; } .op-brokers .op-broker-namelink:hover { color: var(--op-green-text); } .op-brokers .op-broker-role { font: 400 12px/1.35 var(--op-font-body); color: var(--op-soft); margin: 0 0 14px; min-height: 32px; } .op-brokers .op-broker-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; margin-top: auto; } .op-brokers .op-broker-contact .op-btn { padding: 10px 0; font-size: 12.5px; } .op-broker-role { font: 400 12.5px var(--op-font-body); color: var(--op-soft); margin: 2px 0 0; } .op-broker-ppra { font: 400 11.5px var(--op-font-mono); color: var(--op-soft); margin: 8px 0 12px; } .op-broker-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .op-broker-contact .op-btn { padding: 13px 0; } .op-broker-email { margin: 12px 0 0; font-size: 13px; } .op-broker-email a { color: var(--op-green-text); } .op-broker-listings { display: inline-block; margin-top: 12px; color: var(--op-green-text); font-weight: 600; font-size: 13px; text-decoration: none; } .op-enquiry-panel { border: 1px solid var(--op-line); border-radius: 0; padding: 0; background: #fff; } .op-enquiry-panel .op-side-title, .op-enquiry-panel h3 { font: 700 16px var(--op-font-head); color: var(--op-ink); margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--op-line); } .op-enquiry-panel .op-enquiry { padding: 22px; } .op-enquiry form { border: 0; box-shadow: none; padding: 0; background: none; } /* Even vertical rhythm: op-core left the Name/Email row with no bottom margin, so the Phone field crowded up under it. Space every field block equally. */ .op-enquiry .op-form-row { gap: 16px; margin: 0 0 16px; } .op-enquiry .op-field { margin: 0 0 16px; } .op-enquiry .op-form-row .op-field { margin: 0; } .op-enquiry .op-field > label { display: block; margin: 0 0 7px; line-height: 1.2; } .op-enquiry .op-field input, .op-enquiry .op-field textarea { margin-top: 0; width: 100%; box-sizing: border-box; } .op-enquiry-form > .op-field:last-of-type { margin-bottom: 20px; } .op-enquiry .op-field input, .op-enquiry .op-field textarea { border: 1px solid #cfd7d9; border-radius: 0; padding: 12px 13px; font: 400 14px var(--op-font-body); } .op-enquiry .op-field input:focus, .op-enquiry .op-field textarea:focus { outline: 0; border-color: var(--op-green); box-shadow: none; } .op-enquiry .op-btn-green { width: 100%; padding: 15px; } .op-req { color: var(--op-green-text); } .op-opt { color: var(--op-soft); font-weight: 400; } .op-form-trust { font: 400 12px/1.55 var(--op-font-body); color: var(--op-soft); margin: 11px 0 0; } .op-notice { border-radius: 0; padding: 13px 16px; margin-bottom: 14px; font-size: 14px; } .op-notice-ok { background: var(--op-green-tint); border: 1px solid var(--op-green-cbrd); color: var(--op-green-text); } .op-notice-ok strong { display: block; margin-bottom: 3px; } .op-notice-err { background: #fbeeec; border: 1px solid #e6c0b8; color: #93402e; } /* mobile sticky action bar (detail) */ .op-single-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; display: none; gap: 8px; padding: 10px 14px; background: #fff; border-top: 1px solid var(--op-line); } .op-single-actions .op-btn { flex: 1; min-height: 46px; } /* ============================================================ tile card (block) */ .op-card:not(.op-card-row) { display: block; background: #fff; border: 1px solid var(--op-line); border-radius: 0; overflow: hidden; text-decoration: none; color: var(--op-ink); box-shadow: none; transition: border-color .15s, transform .15s; } .op-card.op-card-row { display: contents; } .op-card:not(.op-card-row):hover { border-color: var(--op-ink); transform: translateY(-2px); } .op-card:not(.op-card-row) .op-card-img { position: relative; aspect-ratio: 16 / 10; background: #dde4ea; } .op-card:not(.op-card-row) .op-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-card-noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #e4e9e7 0 8px, #eef1f0 8px 16px); } .op-card:not(.op-card-row) .op-card-img .op-badge-status { position: absolute; left: 0; top: 0; } .op-card:not(.op-card-row) .op-card-img .op-badge-grade { position: absolute; right: 0; top: 0; } .op-card:not(.op-card-row) .op-card-body { display: block; padding: 14px 16px; } .op-card:not(.op-card-row) .op-card-title { display: block; font: 700 15px var(--op-font-head); color: var(--op-ink); margin: 0 0 5px; line-height: 1.3; } .op-card:not(.op-card-row) .op-card-meta { display: block; font: 400 12.5px var(--op-font-body); color: var(--op-soft); margin: 0 0 8px; } .op-card:not(.op-card-row) .op-card-price { display: block; font: 700 15px var(--op-font-head); color: var(--op-ink); margin: 0; } .op-grid { display: grid; gap: 16px; } .op-grid-3 { grid-template-columns: repeat(3, 1fr); } .op-grid-2 { grid-template-columns: repeat(2, 1fr); } /* fav heart on tile cards */ .op-card:not(.op-card-row) .op-fav { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.94); border: 0; color: var(--op-ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(38,48,58,.18); z-index: 2; } .op-card:not(.op-card-row) .op-fav.is-saved { color: var(--op-green-text); } .op-card:not(.op-card-row) .op-fav.is-saved svg path { fill: var(--op-green); stroke: var(--op-green); } /* Compare toggle on each card (top-left, opposite the save heart) — clearly labelled so the compare feature is discoverable in the default Cards view. */ .op-card:not(.op-card-row) .op-cmp-btn { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--op-ink-2); font: 700 11.5px var(--op-font-head); letter-spacing: .01em; cursor: pointer; box-shadow: 0 2px 8px rgba(38,48,58,.18); } .op-card:not(.op-card-row) .op-cmp-btn:hover { color: var(--op-ink); } .op-card:not(.op-card-row) .op-cmp-btn.is-active { background: var(--op-green); color: var(--op-ink); } .op-cmp-btn svg { flex: none; } .op-empty { background: var(--op-bg); border: 1px solid var(--op-line); padding: 26px; text-align: center; color: var(--op-soft); } .op-empty a { color: var(--op-green-text); } /* detail mobile */ @media (max-width: 900px) { .op-single-layout { grid-template-columns: 1fr; gap: 28px; } .op-single-side { position: static; } .op-grid-3 { grid-template-columns: 1fr 1fr; } .op-single-actions { display: flex; } .op-single .op-wrap { padding-bottom: 70px; } } @media (max-width: 640px) { .op-single-top { flex-direction: column; align-items: flex-start; gap: 14px; } .op-single-top-price { text-align: left; } .op-gallery-main { height: 300px; } .op-gallery-thumb-btn { width: 96px; height: 66px; } .op-facts, .op-features { grid-template-columns: 1fr 1fr; } .op-grid-3 { grid-template-columns: 1fr; } } /* ============================================================ compare */ .op-comparepage { background: #fff; padding-bottom: 48px; } .op-compare-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 14px 0 20px; } .op-compare-head h1 { font: 700 28px var(--op-font-head); color: var(--op-ink); margin: 0 0 5px; letter-spacing: -.025em; } .op-compare-sub { font: 400 13px var(--op-font-mono); color: var(--op-soft); margin: 0; } .op-compare { display: grid; border: 1px solid var(--op-line); border-bottom: 0; } .op-compare-corner { border-bottom: 1px solid var(--op-line); } .op-compare-col { padding: 16px; border-left: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); position: relative; } .op-compare-photo { display: block; height: 96px; margin-bottom: 12px; overflow: hidden; background: #dde4ea; } .op-compare-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-compare-photo .op-card-noimg { display: block; width: 100%; height: 100%; } .op-compare-name { font: 700 15px var(--op-font-head); color: var(--op-ink); margin: 0 0 4px; line-height: 1.3; } .op-compare-meta { font: 400 12px var(--op-font-mono); color: var(--op-soft); margin: 0; } .op-compare-remove { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--op-line); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--op-soft); text-decoration: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; z-index: 3; transition: background .15s, color .15s, border-color .15s; } .op-compare-remove:hover, .op-compare-remove:focus { background: var(--op-ink); border-color: var(--op-ink); color: #fff; outline: none; } .op-compare-row { padding: 13px 16px; background: var(--op-bg); font: 500 12.5px var(--op-font-body); color: var(--op-ink-2); border-bottom: 1px solid var(--op-line-2); display: flex; align-items: center; } .op-compare-cell { padding: 13px 16px; border-left: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line-2); font: 500 14px var(--op-font-mono); color: var(--op-ink); display: flex; align-items: center; gap: 8px; } .op-compare-cell.is-big { font: 700 16px var(--op-font-head); } .op-compare-best { background: var(--op-green-chip); } .op-best-tag { font: 700 10px var(--op-font-head); letter-spacing: .08em; color: var(--op-green-text); } .op-compare-row.op-compare-foot { border-bottom: 1px solid var(--op-line); background: var(--op-bg); } .op-compare-cell.op-compare-foot { padding: 16px; border-bottom: 1px solid var(--op-line); } .op-compare-cell.op-compare-foot .op-btn { width: 100%; justify-content: center; } .op-compare-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 18px; background: var(--op-ink); } .op-compare-cta p { margin: 0; font: 500 13.5px var(--op-font-body); color: #c6cfd5; } /* Download-PDF button + print-only branding */ .op-compare-head-actions { display: flex; align-items: center; gap: 10px; flex: none; } .op-compare-pdf { display: inline-flex; align-items: center; gap: 8px; } .op-print-only { display: none; } @media print { /* Print/Save-as-PDF: strip the site chrome, show a clean branded document. */ .op-site-head, .op-site-foot, .op-compare-bar, .op-nav-toggle, .op-compare-head, .op-compare-head-actions, .op-compare-remove, .op-compare-cta, a[href*="wa.me"], .op-whatsapp-float, #wpadminbar { display: none !important; } /* The theme's print stylesheet appends the raw URL after every link ( a:after { content: attr(href) } ), which printed "View listing (/property/…)" and made the two buttons overlap. Suppress it and pin the button width. */ a[href]:after, a[href]:before { content: "" !important; } .op-compare-cell.op-compare-foot .op-btn { width: 100% !important; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; } .op-comparepage { padding: 0 !important; } .op-crumbs { display: none !important; } .op-print-only { display: block !important; } .op-print-head { display: flex !important; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--op-green); padding-bottom: 10px; margin-bottom: 18px; page-break-before: always; } .op-print-head .op-logo-word { font-size: 22px; } .op-print-title { font: 700 13px var(--op-font-head); color: var(--op-ink); letter-spacing: .02em; } .op-print-foot { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--op-line); font: 400 11px var(--op-font-mono); color: var(--op-soft); text-align: center; } .op-compare { break-inside: avoid; } .op-compare-photo img { max-height: 120px; } /* ---- Brochure cover (page 1) ---- */ .op-print-cover { display: flex !important; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 28mm); page-break-after: always; } .op-print-cover-top .op-logo-word { font-size: 30px; } .op-print-kick { font: 700 11px var(--op-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--op-green-text); margin: 0 0 12px; } .op-print-cover-mid h1 { font: 700 44px/1.05 var(--op-font-head); color: var(--op-ink); margin: 0 0 10px; letter-spacing: -.025em; } .op-print-cover-sub { font: 400 15px var(--op-font-mono); color: var(--op-soft); margin: 0 0 30px; } .op-print-cover-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--op-green); } .op-print-cover-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--op-line); } .op-pcl-name { font: 700 15.5px var(--op-font-head); color: var(--op-ink); } .op-pcl-meta { font: 400 12.5px var(--op-font-mono); color: var(--op-soft); white-space: nowrap; } .op-print-cover-foot { font: 400 11px var(--op-font-mono); color: var(--op-soft); border-top: 1px solid var(--op-line); padding-top: 12px; } /* ---- Brochure: one full page per property ---- */ .op-print-property { display: flex !important; flex-direction: column; page-break-after: always; min-height: calc(100vh - 28mm); } .op-print-prop-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--op-green); padding-bottom: 8px; margin-bottom: 16px; } .op-print-prop-head .op-logo-word { font-size: 18px; } .op-print-prop-idx { font: 700 11px var(--op-font-mono); color: var(--op-soft); letter-spacing: .04em; } .op-print-prop-photo { height: 82mm; overflow: hidden; background: #dde4ea; margin-bottom: 16px; } .op-print-prop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The theme's print reset does * { background: transparent !important } to save ink; force the brand backgrounds we actually want in the brochure back on. */ .op-print-prop-status { display: inline-block; font: 700 10px var(--op-font-head); letter-spacing: .08em; text-transform: uppercase; background: var(--op-green) !important; color: #14210a !important; padding: 4px 10px; margin-bottom: 9px; } .op-compare-best { background: var(--op-green-chip) !important; } .op-print-cover-list { } .op-print-prop-titles h2 { font: 700 26px/1.15 var(--op-font-head); color: var(--op-ink); margin: 0 0 4px; letter-spacing: -.01em; } .op-print-prop-area { font: 400 13px var(--op-font-mono); color: var(--op-soft); margin: 0 0 18px; } .op-print-facts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--op-line); border-right: 0; border-bottom: 0; } .op-print-fact { padding: 13px 15px; border-right: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); } .op-print-fact-l { display: block; font: 700 9.5px var(--op-font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--op-soft); margin-bottom: 5px; } .op-print-fact-v { font: 700 17px var(--op-font-head); color: var(--op-ink); } .op-print-line { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--op-line); } .op-print-line .op-print-fact-l { margin: 0; flex: 0 0 120px; } .op-print-line-v { font: 500 14px var(--op-font-body); color: var(--op-ink); } .op-print-prop-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--op-line); font: 400 11px var(--op-font-mono); color: var(--op-soft); } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } @page { margin: 14mm; } } @media (max-width: 720px) { .op-compare-head { flex-direction: column; align-items: flex-start; gap: 12px; } .op-compare { grid-template-columns: 108px repeat(2, minmax(0,1fr)) !important; overflow-x: auto; } .op-compare-cell, .op-compare-row { padding: 10px; font-size: 12.5px; } } /* ============================================================ home (Desk) */ .op-home { background: #fff; } .op-home a { text-decoration: none; } .op-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .op-section-head h2 { font: 700 26px var(--op-font-head); color: var(--op-ink); margin: 0; letter-spacing: -.02em; } .op-section-link { font: 500 13.5px var(--op-font-body); color: var(--op-green-text); text-decoration: none; white-space: nowrap; } /* hero — dark video band with content + a floating stock board over it */ .op-hero-video-band { position: relative; background: var(--op-ink); border-bottom: 4px solid var(--op-green); padding: clamp(44px,6.5vw,84px) 0 clamp(40px,5.5vw,68px); overflow: hidden; /* Full-bleed: after the Elementor conversion the hero sits in a boxed section; break it back out to the viewport edges. The inner .op-wrap-wide keeps the hero content and stock board at reading width. */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .op-hero-bg { position: absolute; inset: 0; z-index: 0; background: #232C34 url('../img/hero-capetown.jpg') center/cover no-repeat; } .op-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,24,30,.88) 0%, rgba(18,24,30,.66) 55%, rgba(18,24,30,.5) 100%); } .op-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .8s ease; } .op-hero-video.is-live { opacity: 1; } /* lift ALL hero content (grid + the search bar below it) above the video */ .op-hero-video-band > .op-wrap-wide { position: relative; z-index: 2; } .op-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,4vw,56px); align-items: center; } .op-hero-kick { letter-spacing: .18em; margin: 0 0 16px; } .op-hero-video-band .op-hero-kick { color: var(--op-green); } .op-hero-h1 { font: 700 clamp(32px,4.6vw,46px) var(--op-font-head); line-height: 1.08; letter-spacing: -.025em; color: #fff; margin: 0 0 18px; max-width: 18ch; text-shadow: 0 1px 20px rgba(0,0,0,.25); } .op-hero-sub { font: 400 16px/1.6 var(--op-font-body); color: #d7dee4; max-width: 48ch; margin: 0 0 28px; } .op-hero-video-band .op-stockboard { box-shadow: 0 30px 60px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.30); } /* full-width search bar, its own row below the headline + stat board */ /* Frosted-glass search bar: translucent white over the hero video, not a solid slab. */ /* True glassmorphism: transparent dark glass, real backdrop blur, a bright edge highlight and light text. Sits over the hero video as a frosted panel. */ .op-hero-search { background: rgba(15,21,27,.30); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border: 1px solid rgba(255,255,255,.22); padding: 0; box-shadow: 0 30px 60px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.30); max-width: none; margin-top: clamp(24px, 3vw, 40px); } .op-hero-search-main { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; } .op-hero-search-main .op-searchx-kw { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 200px; padding: 0 22px; } .op-hero-search-main .op-searchx-kw svg { color: rgba(255,255,255,.72); flex: none; } .op-hero-search-main .op-searchx-kw input { border: 0; outline: 0; width: 100%; padding: 20px 0; font: 400 16px var(--op-font-body); background: none; color: #fff; } .op-hero-search-main .op-searchx-kw input::placeholder { color: rgba(255,255,255,.66); opacity: 1; } .op-hero-search-main .op-searchx-sel { flex: 0 0 auto; width: auto; min-width: 172px; border: 0; border-left: 1px solid rgba(255,255,255,.16); padding: 0 46px 0 18px; font: 500 14.5px var(--op-font-body); color: #fff; cursor: pointer; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23e2e8ec' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; } .op-hero-search-main .op-searchx-sel option { color: #1a2027; } /* native dropdown list stays readable */ .op-hero-search-main .op-searchx-sel:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(147,213,0,.55); } .op-hero-search-main .op-searchx-go { flex: 0 0 auto; border: 0; background: var(--op-green); color: var(--op-ink); font: 700 14.5px var(--op-font-head); letter-spacing: .04em; padding: 0 44px; margin: 0; cursor: pointer; } .op-hero-search-main .op-searchx-go:hover { background: #86c400; } .op-hero-search-foot { display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-top: 1px solid rgba(255,255,255,.14); font: 400 13px var(--op-font-mono); color: rgba(255,255,255,.7); } .op-hero-search-foot a { color: #bdea52; text-decoration: none; font-family: var(--op-font-body); font-weight: 600; } .op-hero-sep { width: 1px; height: 14px; background: var(--op-line); } @media (max-width: 820px) { .op-hero-search-main { flex-wrap: wrap; } .op-hero-search-main .op-searchx-kw { flex: 1 1 100%; border-bottom: 1px solid var(--op-line); } .op-hero-search-main .op-searchx-sel { flex: 1 1 40%; border-left: 0; border-right: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); min-width: 0; padding: 14px 40px 14px 16px; } .op-hero-search-main .op-searchx-go { flex: 1 1 100%; padding: 16px; } } /* stock board */ .op-stockboard { border: 1px solid rgba(255,255,255,.22); background: rgba(15,21,27,.30); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); max-width: 312px; } .op-stockboard-head { font: 700 9px var(--op-font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.14); } .op-stockboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } /* square cells, hairline dividers only (no rounded per-cell border) */ .op-stockboard-grid .op-stat { padding: 9px 14px; border: 0; border-radius: 0; text-align: left; background: transparent; } .op-stockboard-grid .op-stat:nth-child(1), .op-stockboard-grid .op-stat:nth-child(3) { border-right: 1px solid rgba(255,255,255,.12); } .op-stockboard-grid .op-stat:nth-child(1), .op-stockboard-grid .op-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); } .op-stat-n { font: 700 18px/1.05 var(--op-font-mono); color: #fff; margin: 0; letter-spacing: -.01em; } .op-stat-l { font: 400 11px var(--op-font-body); color: rgba(255,255,255,.62); margin: 2px 0 0; } .op-stockboard-link { display: block; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.14); font: 600 11.5px var(--op-font-body); color: #bdea52; text-decoration: none; background: transparent; } /* three paths */ .op-paths { background: #fff; border-bottom: 1px solid var(--op-line); } .op-paths-grid { display: grid; grid-template-columns: repeat(3,1fr); } .op-path { text-decoration: none; padding: 28px; border-right: 1px solid var(--op-line-2); display: block; } .op-paths-grid .op-path:last-child { border-right: 0; } .op-path-kick { font: 700 10.5px var(--op-font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--op-green-text); margin: 0 0 10px; } .op-path h3 { font: 700 19px var(--op-font-head); color: var(--op-ink); margin: 0 0 7px; letter-spacing: -.01em; } .op-path-desc { font: 400 13.5px/1.55 var(--op-font-body); color: var(--op-muted); margin: 0 0 12px; max-width: 34ch; } .op-path-go { font: 500 13px var(--op-font-body); color: var(--op-green-text); } .op-path:hover h3 { color: var(--op-green-text); } /* featured + areas sections */ .op-home-featured { background: #fff; padding: 44px 0 20px; } .op-home-areas { background: #fff; padding: 36px 0 48px; } .op-node-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--op-line); border: 1px solid var(--op-line); } .op-node { background: #fff; padding: 18px; text-decoration: none; display: block; } .op-node-name { font: 700 16px var(--op-font-head); color: var(--op-ink); margin: 0 0 12px; } .op-node-n { font: 700 22px var(--op-font-mono); color: var(--op-ink); margin: 0 0 3px; } .op-node-l { font: 400 12px var(--op-font-body); color: var(--op-soft); margin: 0 0 10px; } .op-node-tag { font: 400 12.5px var(--op-font-body); color: var(--op-green-text); margin: 0; } .op-node:hover { background: var(--op-bg); } /* alerts band */ .op-alerts-band { background: var(--op-ink); padding: 44px 0; } .op-alerts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .op-kick-light { color: var(--op-green); } .op-alerts-band h2 { font: 700 28px/1.15 var(--op-font-head); color: #fff; margin: 0 0 10px; letter-spacing: -.02em; } .op-alerts-sub { font: 400 14.5px/1.6 var(--op-font-body); color: #b9c3ca; margin: 0; max-width: 44ch; } .op-alerts-form { display: flex; gap: 10px; align-items: stretch; } .op-alerts-form input { flex: 1; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; font: 400 14.5px var(--op-font-body); padding: 13px 14px; outline: 0; } .op-alerts-form input::placeholder { color: #8b98a1; } .op-alerts-form .op-btn { flex: none; } /* tail: news + brokers */ .op-home-tail { background: #fff; padding: 44px 0 48px; } .op-tail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; } .op-news-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 26px; margin-top: 6px; } .op-news-card { display: block; text-decoration: none; } .op-news-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #dde4ea; border-radius: 3px; margin-bottom: 14px; } .op-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .op-news-card:hover .op-news-thumb img { transform: scale(1.04); } .op-news-date { display: block; font: 400 12px var(--op-font-mono); color: var(--op-soft); margin-bottom: 6px; } .op-news-card .op-card-title { display: block; font: 700 18px/1.34 var(--op-font-head); color: var(--op-ink); margin-bottom: 8px; } .op-news-ex { display: block; font: 400 14px/1.55 var(--op-font-body); color: var(--op-muted); } .op-home-brokers { border: 1px solid var(--op-line); padding: 22px; height: fit-content; } .op-home-broker { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--op-line-2); margin-bottom: 16px; } .op-home-broker .op-broker-photo { width: 56px; height: 56px; flex: none; margin: 0; overflow: hidden; background: #dde4ea; border-radius: 50%; } .op-home-broker .op-broker-photo img { width: 100%; height: 100%; object-fit: cover; } .op-home-broker > span:last-child { padding-top: 2px; min-width: 0; } .op-home-broker .op-broker-namelink { display: block; font: 700 15px/1.3 var(--op-font-head); color: var(--op-ink); text-decoration: none; margin-bottom: 3px; } .op-home-broker .op-broker-role { display: block; font: 400 12.5px/1.4 var(--op-font-body); color: var(--op-soft); } .op-home-broker .op-broker-ppra { display: block; font: 400 11.5px var(--op-font-mono); color: var(--op-soft); margin-top: 4px; } /* home mobile */ @media (max-width: 900px) { .op-hero-grid, .op-alerts-grid, .op-tail-grid { grid-template-columns: 1fr; gap: 28px; } .op-paths-grid { grid-template-columns: 1fr; } .op-path { border-right: 0; border-bottom: 1px solid var(--op-line-2); } .op-node-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .op-node-grid { grid-template-columns: 1fr; } .op-alerts-form { flex-direction: column; align-items: stretch; } .op-section-head { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ============================================================ content pages */ /* Full-bleed grey header band, but the header CONTENT stays in the same Elementor column as the page body below it, so the title lines up with the body instead of sitting indented. The band runs edge to edge via a 100vw background layer; html{overflow-x:clip} keeps that from adding a horizontal scrollbar. */ .op-pagehead { position: relative; padding: clamp(28px,4vw,44px) 0; } /* Charcoal page-header band. Brief priority 1: inner pages read as washed out because the corporate charcoal only appears on the homepage. Leading every inner page with a charcoal header (matching the home hero) restores the charcoal/white rhythm the client signed off on. Colours mirror the hero: green kicker, white title, muted-light intro. */ .op-pagehead::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--op-ink); z-index: 0; } .op-pagehead > .op-wrap-wide { position: relative; z-index: 1; max-width: none; padding: 0; } /* Close the thin white strip between the nav and the header band: Elementor's default section/column wrappers add ~10px of top padding, which shows above the full-bleed band. Neutralise the top space on whichever wrapper holds the header band (classic .elementor-* markup or optimized .e-con containers). */ .elementor-element-populated:has(.op-pagehead), .elementor-element-populated:has(.op-hero-video-band), .elementor-widget-wrap:has(> .elementor-widget .op-pagehead), .elementor-widget-wrap:has(> .elementor-widget .op-hero-video-band), .elementor-section:has(.op-pagehead) > .elementor-container, .elementor-section:has(.op-hero-video-band) > .elementor-container, .e-con:has(.op-pagehead), .e-con:has(.op-hero-video-band), .e-con-inner:has(.op-pagehead), .e-con-inner:has(.op-hero-video-band) { padding-top: 0 !important; margin-top: 0 !important; } .elementor-widget:has(.op-pagehead), .elementor-widget:has(.op-hero-video-band) { margin-top: 0 !important; } /* --- Undo the Elementor 1140px box on full-width page bodies --- */ /* The conversion trapped the whole home page in a 1140px column, so the city band and the "latest from the desk" section were squashed. Let the home body fill the width; each block's own inner wrap (op-wrap / op-wrap-wide) still holds its text to reading width. */ body.home .elementor-section > .elementor-container { max-width: 100%; } body.home .elementor-widget-wrap.elementor-element-populated { padding-left: 0; padding-right: 0; } /* Area Guides directory keeps the default boxed width so it lines up with the boxed page header above it (the header no longer breaks out its content). */ .op-guides-wrap { max-width: none; padding: 0; } .op-pagehead .op-kick { margin: 0 0 10px; color: var(--op-green); } .op-pagehead h1 { font: 700 clamp(26px,3.4vw,34px) var(--op-font-head); color: #fff; margin: 0; letter-spacing: -.02em; } .op-pagehead-intro { font: 400 16px/1.6 var(--op-font-body); color: #c6cfd5; margin: 10px 0 0; max-width: 62ch; } .op-page-body { background: #fff; padding: 40px 0 60px; } .op-prose { max-width: 68ch; font: 400 15.5px/1.75 var(--op-font-body); color: #4a5762; } .op-prose h2 { font: 700 20px var(--op-font-head); color: var(--op-ink); margin: 26px 0 8px; letter-spacing: -.015em; } .op-prose h2:first-child { margin-top: 0; } .op-prose p { margin: 0 0 16px; } .op-prose ul { margin: 0 0 16px; padding-left: 20px; } .op-prose li { margin-bottom: 8px; } .op-prose a { color: var(--op-green-text); } /* broker + area shortcode grids sit on the Desk grid */ .op-page-body .op-grid, .op-page-body .op-broker-grid, .op-page-body .op-area-grid { margin-top: 8px; } /* ============================================================ areas directory */ .op-areas-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; } .op-areas-search { flex: 1 1 340px; max-width: 460px; display: block; } .op-areas-search input { width: 100%; padding: 13px 16px 13px 44px; font: 400 15px var(--op-font-body); color: var(--op-ink); border: 1px solid var(--op-line); border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8894' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center; } .op-areas-search input:focus { outline: none; border-color: var(--op-green); box-shadow: 0 0 0 3px var(--op-green-tint); } .op-areas-count { margin: 0; font: 500 13px var(--op-font-mono); color: var(--op-soft); white-space: nowrap; } /* Two tiers: areas that actually have stock lead as rich cards; the long tail is a compact A-Z directory so 100+ nodes stay browsable, not a wall of noise. */ .op-areas-sec { margin: 0 0 34px; } .op-areas-sec:last-child { margin-bottom: 0; } .op-areas-sechead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--op-line); } .op-areas-sechead h2 { margin: 0; font: 700 18px/1.2 var(--op-font-head); letter-spacing: -.01em; color: var(--op-ink); } .op-areas-secn { font: 700 12px var(--op-font-mono); color: var(--op-soft); background: #eef1f4; border-radius: 999px; padding: 2px 10px; } .op-areas-grid { display: grid; gap: 12px; } .op-areas-grid-stock { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); } .op-areas-grid-guide { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; } .op-area-card { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--op-line); border-radius: 14px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; } .op-area-card:hover { border-color: var(--op-green); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,26,32,.09); } .op-area-name { font: 700 15px/1.25 var(--op-font-head); color: var(--op-ink); margin: 0; text-transform: none; } .op-area-card:hover .op-area-name { color: var(--op-green-text); } .op-area-tag { display: block; margin-top: 2px; font: 600 12.5px var(--op-font-body); color: var(--op-soft); } .op-area-card.has-stock .op-area-count { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--op-green); color: #16230a; font: 800 19px/1 var(--op-font-head); } .op-area-card.has-stock .op-area-body { display: flex; flex-direction: column; min-width: 0; } .op-area-card.has-stock .op-area-tag-stock { color: var(--op-green-text); font-weight: 700; } .op-area-card.op-area-guide { flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px; border-radius: 11px; } .op-area-card.op-area-guide .op-area-name { font-size: 14px; } .op-area-card.op-area-guide .op-area-tag { font: 700 11px var(--op-font-mono); letter-spacing: .02em; } .op-areas-none { margin-top: 20px; } /* ============================================================ calculators */ .op-calc { border: 1px solid var(--op-line); background: #fff; max-width: 760px; } .op-calc-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--op-line); } .op-calc-tab { border: 0; background: #fff; cursor: pointer; padding: 14px 18px; font: 700 12px var(--op-font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--op-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } /* The tabs are native