: a full 1px grey grid, zebra
striping on odd rows and a hover fill — none of it using a brand token, none
of it part of a design whose own rule is "no dividers, no shadows". The rule
below used to override only the padding, and set padding-left to 0, so every
first-column value sat hard against a border we never asked for. Reset the
inherited chrome explicitly rather than live beside it. */
.lvc-table th,
.lvc-table td {
padding: 15px 22px 15px 0;
border: 0;
border-bottom: 1px solid var(--lvc-border);
background: none;
text-align: left;
vertical-align: baseline;
}
.lvc-table tbody tr:nth-child(odd) > td,
.lvc-table tbody tr:nth-child(odd) > th,
.lvc-table tbody tr:hover > td,
.lvc-table tbody tr:hover > th { background: none; }
.lvc-table th {
color: var(--lvc-muted);
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
}
/* Areas and prices are compared DOWN a column, not read across a row, so they
are right-aligned against the tabular figures set above — the digits line up
by place value and a longer number reads as a bigger one at a glance.
Specificity is deliberate: a bare .lvc-table__num would lose to the
`.lvc-table td` rule above and silently stay left-aligned. */
.lvc-table .lvc-table__num { text-align: right; }
/* Last column ends flush with the table edge rather than floating 22px short. */
.lvc-table tr > *:last-child { padding-right: 0; }
/* Unavailable types stay readable. They are a real part of the mix — the reason
the remaining types are worth asking about — not disabled UI. */
.lvc-table__row--gone > td,
.lvc-table__row--gone > th { color: var(--lvc-soft); }
/* ── Gallery ───────────────────────────────────────────────────────────── */
/* auto-FIT, not auto-fill. auto-fill reserves every column the container is
wide enough to hold and stretches them all via 1fr, filled or not — so a
gallery of two photographs rendered two tiles and several empty grid cells
beside them. auto-fit collapses the empty tracks to zero instead, and the
1fr redistributes their width across the images that actually exist.
The two behave identically once there are enough images to fill a row, so
the large galleries are untouched. Below that the tiles now scale with the
count — three images become a full-width triptych rather than three small
tiles marooned beside dead space. That is a real visual change on the many
pages holding exactly three photographs, and a deliberate one: they were
already rendering the empty tracks, just less obviously than Stella's two.
Shared by the property, development and taxonomy galleries. */
.lvc-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.lvc-gallery img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--lvc-radius);
}
/* Floor plans are line drawings on white. Cropping them loses the plan, so they
are contained on their own surface rather than covered like photography. */
.lvc-gallery--plans img {
aspect-ratio: 4 / 3;
object-fit: contain;
background: var(--lvc-bg-alt);
padding: 12px;
}
/* ── Documents ─────────────────────────────────────────────────────────── */
.lvc-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lvc-doc {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1px solid var(--lvc-border);
border-radius: var(--lvc-radius);
color: var(--lvc-text);
text-decoration: none;
transition: border-color 220ms ease;
}
.lvc-doc:hover { border-color: var(--lvc-accent); }
.lvc-doc::before { content: '↓'; color: var(--lvc-accent); }
/* ── FAQ ───────────────────────────────────────────────────────────────── */
.lvc-faq { margin: 0; }
.lvc-faq__item { padding: 24px 0; border-bottom: 1px solid var(--lvc-border); }
.lvc-faq__q {
font-family: var(--lvc-font-display);
font-size: 1.125rem;
color: var(--lvc-text);
margin: 0;
}
.lvc-faq__a { margin: 10px 0 0; color: var(--lvc-soft); max-width: 72ch; }
/* ── Forms ─────────────────────────────────────────────────────────────── */
/* The FORM owns the rhythm between its rows. Without this every label after
the first sits hard against the field above it: `.lvc-form__row`'s gap only
separates the two columns INSIDE a row, never one row from the next, and
nothing else in this file gave the rows a margin. Hidden inputs and the
honeypot are display:none / absolutely positioned, so neither becomes a
flex item and neither leaves a phantom gap. */
.lvc-form { display: flex; flex-direction: column; gap: 22px; }
.lvc-form__row { display: grid; gap: 18px; grid-template-columns: 1fr; }
.lvc-form__group { display: flex; flex-direction: column; gap: 9px; }
.lvc-form label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: var(--lvc-muted);
}
.lvc-optional { text-transform: none; letter-spacing: 0; }
.lvc-form textarea { min-height: 130px; resize: vertical; }
/* Sized by its own label. A flex column stretches its children by default, so
without this the button would span the form's full width on desktop — the
mobile rule that deliberately sets width:100% still wins where it applies. */
.lvc-form__submit { align-self: flex-start; margin-top: 2px; }
.lvc-form__note {
margin: 0;
font-size: 0.8125rem;
color: var(--lvc-muted);
max-width: 60ch;
}
/* The consent line is a sentence, not a field name, so it must not inherit the
uppercase micro-label treatment above — set for one- and two-word labels, it
turns this into a wall of capitals. The flex belongs on the LABEL too: that
is what actually wraps the checkbox and the text, so gap on the parent div
(its only child being this label) did nothing at all. */
.lvc-form__consent label {
display: flex;
gap: 11px;
align-items: flex-start;
max-width: 60ch;
font-size: 0.8125rem;
line-height: 1.55;
text-transform: none;
letter-spacing: 0;
color: var(--lvc-soft);
cursor: pointer;
}
/* accent-color keeps the control native — real keyboard focus, real screen
reader semantics — while letting it carry the brand instead of system blue. */
.lvc-form__consent input {
width: 16px;
height: 16px;
flex: none;
margin-top: 2px;
accent-color: var(--lvc-accent);
cursor: pointer;
}
/* ── Enquiry section over a photograph ─────────────────────────────────────
A reusable modifier, not a one-off: add `lvc-enquiry-scene` plus the img and
overlay to any section that wraps an enquiry form.
The image is an , not a CSS background, for three reasons — it can be
lazy-loaded and served responsively, it never trips the `url()` parsing
problem that filenames containing parentheses cause (this one is literally
"… (22).jpg"), and it matches how every other hero on this site is built.
The form sits on its own near-opaque panel. A photograph directly behind
input fields is the classic way to make a form unreadable; darkening the
whole image enough to fix that would leave it a grey texture doing nothing.
Panel for the fields, gradient for the type, image still legible on the
right where nothing sits on top of it. */
.lvc-enquiry-scene { position: relative; overflow: hidden; background: var(--lvc-bg); }
.lvc-enquiry-scene__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.lvc-enquiry-scene__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(9, 11, 14, 0.95) 0%, rgba(9, 11, 14, 0.88) 46%, rgba(9, 11, 14, 0.55) 100%),
linear-gradient(180deg, rgba(9, 11, 14, 0.55), rgba(9, 11, 14, 0.15) 42%, rgba(9, 11, 14, 0.72));
}
.lvc-enquiry-scene__inner { position: relative; z-index: 1; }
.lvc-enquiry-scene .lvc-form {
max-width: 760px;
margin-top: 34px;
padding: clamp(22px, 2.6vw, 34px);
border: 1px solid var(--lvc-border);
border-radius: var(--lvc-radius);
background: rgba(9, 11, 14, 0.82);
backdrop-filter: blur(10px);
}
/* Fields need to read as raised ON the panel, not cut into it — the panel is
already close to --lvc-card, so the default field fill would vanish. */
.lvc-enquiry-scene .lvc-form input,
.lvc-enquiry-scene .lvc-form select,
.lvc-enquiry-scene .lvc-form textarea {
background: rgba(255, 255, 255, 0.045);
border-color: var(--lvc-border-strong);
}
/* Below the two-column form layout the content spans the full width, so the
left-weighted gradient above would leave the heading and intro sitting over
the LIGHTEST part of the photograph — the one place the desktop composition
deliberately lets the building show through. There is no empty right side to
preserve at this size, so go uniform and darker. */
@media (max-width: 900px) {
.lvc-enquiry-scene__overlay {
background: linear-gradient(180deg, rgba(9, 11, 14, 0.9), rgba(9, 11, 14, 0.84) 45%, rgba(9, 11, 14, 0.94));
}
}
@media (max-width: 520px) {
/* 5% container padding plus 22px of panel was spending roughly a quarter of
a 375px screen on gutters before a field began. Also drops the blur: a
backdrop-filter over a full-bleed photograph is the expensive kind of
compositing on a phone, and at this opacity it buys almost nothing. */
.lvc-enquiry-scene .lvc-form {
margin-top: 26px;
padding: 18px 15px;
background: rgba(9, 11, 14, 0.9);
backdrop-filter: none;
}
}
/* ── Floating WhatsApp ─────────────────────────────────────────────────────
Rendered once from wp_footer — see inc/conversion/whatsapp-float.php.
The green is WhatsApp's own and is deliberately exempt from the site
palette: at 52px the colour IS the affordance, and repainting it in brand
tones would leave a green-shaped mystery button. */
.lvc-wa {
position: fixed;
/* Above the mobile action bars (80), below the sticky header (100) and the
mobile nav (110) so an open menu covers it, and far below the lightbox. */
z-index: 90;
right: clamp(14px, 2.4vw, 26px);
bottom: clamp(14px, 2.4vw, 26px);
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lvc-wa svg { width: 27px; height: 27px; fill: #fff; }
.lvc-wa:hover,
.lvc-wa:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.46);
}
.lvc-wa:focus-visible { outline: 2px solid var(--lvc-accent); outline-offset: 3px; }
/* Clear the fixed 64px action bars, each at its OWN breakpoint rather than one
blanket lift — otherwise the button floats 64px off the floor on every page
that has no bar under it. */
@media (max-width: 760px) {
.single-property .lvc-wa { bottom: calc(64px + 14px); }
}
@media (max-width: 780px) {
.tax-development .lvc-wa { bottom: calc(64px + 14px); }
}
@media (prefers-reduced-motion: reduce) {
.lvc-wa { transition: none; }
.lvc-wa:hover,
.lvc-wa:focus-visible { transform: none; }
}
/* ── Reveal on scroll ──────────────────────────────────────────────────────
The hidden state lives behind `.lvc-js` — a class an inline script
adds ONLY when IntersectionObserver exists and reduced motion has not been
requested. If either is false, or the script is stripped by an optimiser,
or theme.js never loads, nothing is ever hidden and the page reads exactly
as it does today.
That gate is the entire safety story. Content that starts at opacity 0 and
waits on JavaScript to appear is one failed request from a blank page, and
a sister site in this portfolio has already shipped that bug once. */
.lvc-js .lvc-reveal {
opacity: 0;
transform: translateY(16px);
transition:
opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lvc-js .lvc-reveal.is-in { opacity: 1; transform: none; }
/* Belt and braces: the head script already declines to add `.lvc-js` under
reduced motion, so this only matters if the preference changes mid-session. */
@media (prefers-reduced-motion: reduce) {
.lvc-js .lvc-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── Blocks and lists ──────────────────────────────────────────────────── */
.lvc-cta-block {
padding: clamp(32px, 5vw, 60px);
background: var(--lvc-bg-alt);
border: 1px solid var(--lvc-border-strong);
border-radius: var(--lvc-radius);
text-align: center;
}
.lvc-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.lvc-list--inline {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
.lvc-listitem {
padding: 22px 0;
border-bottom: 1px solid var(--lvc-border);
}
.lvc-archive__head { padding-block: clamp(40px, 5vw, 72px) 0; }
/* ── Footer ────────────────────────────────────────────────────────────── */
.lvc-footer {
position: relative;
overflow: hidden;
background: var(--lvc-bg);
border-top: 1px solid var(--lvc-border);
font-size: 0.9375rem;
}
.lvc-footer__background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 54%;
transform: scale(1.02);
}
.lvc-footer__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(9, 11, 14, 0.97) 0%, rgba(9, 11, 14, 0.88) 48%, rgba(9, 11, 14, 0.7) 100%),
linear-gradient(0deg, rgba(9, 11, 14, 0.98) 0%, rgba(9, 11, 14, 0.42) 72%);
}
.lvc-footer__content {
position: relative;
z-index: 1;
padding-block: clamp(72px, 10vw, 136px) 34px;
}
.lvc-footer__lead {
display: flex;
justify-content: space-between;
align-items: end;
gap: clamp(40px, 8vw, 120px);
padding-bottom: clamp(52px, 7vw, 82px);
border-bottom: 1px solid rgba(243, 240, 232, 0.24);
}
.lvc-footer__lead h2 {
max-width: 14ch;
margin: 10px 0 0;
font-family: var(--lvc-font-display);
font-size: clamp(2.7rem, 6vw, 6.5rem);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--lvc-text);
}
.lvc-footer__lead > div > p:last-child {
max-width: 58ch;
margin: 24px 0 0;
font-size: clamp(1rem, 1.4vw, 1.18rem);
line-height: 1.65;
color: rgba(243, 240, 232, 0.78);
}
.lvc-footer__lead .lvc-btn { flex: 0 0 auto; }
.lvc-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: clamp(34px, 4vw, 64px);
padding-block: clamp(48px, 6vw, 72px);
}
.lvc-footer__title {
font-family: var(--lvc-font-body);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: var(--lvc-accent);
margin: 0 0 20px;
}
.lvc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lvc-footer__list a {
display: inline-block;
color: rgba(243, 240, 232, 0.76);
line-height: 1.45;
text-decoration: none;
transition: color 180ms ease, transform 180ms ease;
}
.lvc-footer__list a:hover { color: var(--lvc-text); }
.lvc-footer__list a:hover { transform: translateX(3px); }
.lvc-footer__col--contact .lvc-footer__list a { overflow-wrap: anywhere; }
.lvc-footer__legal {
padding-top: 28px;
border-top: 1px solid rgba(243, 240, 232, 0.18);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
gap: 18px 44px;
font-size: 0.75rem;
color: rgba(243, 240, 232, 0.54);
}
.lvc-footer__disclaimer { max-width: 82ch; margin: 0; }
.lvc-footer__copy { flex: 0 0 auto; margin: 0; }
.lvc-footer__legal-links {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
margin-top: 16px;
}
.lvc-footer__legal-links a {
color: rgba(243, 240, 232, 0.7);
text-decoration: none;
}
.lvc-footer__legal-links a:hover { color: var(--lvc-text); }
.lvc-term-index__group-link {
flex: 0 0 auto;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: var(--lvc-accent);
text-decoration: none;
}
/* ── Responsive ────────────────────────────────────────────────────────── */
/* The catalogue now carries the complete core navigation as well as the
advisor CTA. Collapse before that content can exceed the viewport on common
1280px and 1366px laptop screens; 1380px is the measured content breakpoint,
not a device-class guess. */
@media (max-width: 1380px) {
.lvc-editorial-split { grid-template-columns: 1fr; }
.lvc-header__toggle { display: block; }
/* Full-screen panel sitting UNDER the sticky header rather than measured
from it — an `inset: 72px` would silently break the moment the header
grew a line. `display` is driven by aria-expanded via a class on ,
so the a11y tree is the source of truth and CSS cannot disagree with the
screen reader. */
.lvc-nav {
position: fixed;
inset: 0;
z-index: 90;
display: none;
padding: 96px var(--lvc-px) 40px;
background: var(--lvc-bg);
overflow-y: auto;
}
.lvc-nav-open .lvc-nav { display: block; }
.lvc-nav-open { overflow: hidden; }
.lvc-nav__list { flex-direction: column; gap: 4px; }
.lvc-nav__list a {
display: block;
padding: 15px 0;
font-size: 1rem;
border-bottom: 1px solid var(--lvc-border);
}
.lvc-header__cta { padding: 10px 14px; font-size: 0.6875rem; }
.lvc-spec__row { gap: 16px; }
}
/* On narrow phones the brand, advisor CTA and menu control cannot all share
one line. Keep the menu reachable, then surface the advisor CTA inside the
open navigation panel. Long form-submit labels must wrap inside the viewport. */
@media (max-width: 520px) {
.lvc-header__inner { gap: 10px; }
.lvc-header__brand { font-size: 1rem; }
.lvc-header__cta { display: none; }
.lvc-header__toggle {
flex: 0 0 44px;
margin-left: auto;
}
.lvc-nav-open .lvc-nav { padding-bottom: 112px; }
.lvc-nav-open .lvc-header__cta {
position: fixed;
z-index: 110;
right: var(--lvc-px);
bottom: 24px;
left: var(--lvc-px);
display: block;
text-align: center;
}
.lvc-form__submit {
display: block;
width: 100%;
max-width: 100%;
padding-inline: 12px;
white-space: normal;
line-height: 1.35;
text-align: center;
}
.lvc-footer__lead {
display: grid;
align-items: start;
}
.lvc-footer__lead h2 { font-size: clamp(2.6rem, 15vw, 4.25rem); }
.lvc-footer__lead .lvc-btn { width: 100%; text-align: center; }
.lvc-footer__legal { display: grid; }
}
/* --3 column counts are flex bases, not tracks — see the centring note at
.lvc-grid--3. The trailing -0.01px absorbs sub-pixel rounding: grid divides
exactly, flex does not, and without it a full row can wrap one card early on
fractional container widths. */
@media (min-width: 640px) {
.lvc-grid { grid-template-columns: repeat(2, 1fr); }
.lvc-grid--3 > * {
flex-basis: calc((100% - var(--lvc-gap)) / 2 - 0.01px);
max-width: 100%; /* two-up: a lone last card may take the full row. */
}
.lvc-form__row { grid-template-columns: 1fr 1fr; }
.lvc-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.lvc-grid--3 > * {
flex-basis: calc((100% - 2 * var(--lvc-gap)) / 3 - 0.01px);
max-width: calc((100% - var(--lvc-gap)) / 2 - 0.01px); /* cap at 2-up */
}
.lvc-footer__inner { grid-template-columns: 0.7fr 0.8fr 0.8fr 1.15fr 1.55fr; }
}
/* Ultra-wide. Now the container is unbounded, three columns on a 2560px display
would render cards nearly 800px across — a property card blown up to the size
of a hero. A fourth column keeps the card at a sane size and puts the extra
width into MORE inventory on screen, which is what a catalogue wants. */
@media (min-width: 1700px) {
.lvc-grid--3 > * {
flex-basis: calc((100% - 3 * var(--lvc-gap)) / 4 - 0.01px);
/* Cap at 2-up, not 3-up. A 3-up cap looks right for a lone leftover but
strands a TWO-card remainder at 66% of the row with a third of it
empty — the exact hole this fix exists to close. At 2-up a remainder
of two fills the line exactly, a remainder of three still fills
(33% each never reaches the cap), and only a lone card centres. */
max-width: calc((100% - var(--lvc-gap)) / 2 - 0.01px);
}
}
/* And stop the edges hugging the viewport on very large screens — a percentage
gutter keeps growing, but not fast enough to stay comfortable past ~2000px. */
@media (min-width: 2000px) {
:root { --lvc-px: 6%; }
}
/* Small phones: the 4:3 crop wastes vertical space when cards are full-width. */
@media (max-width: 480px) {
.lvc-card__img,
.lvc-tcard__img { aspect-ratio: 3 / 2; }
}
/* ==========================================================================
Canonical single-property sales template
========================================================================== */
.lvc-property-page {
background: var(--lvc-bg);
color: var(--lvc-soft);
}
.lvc-property-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: var(--lvc-hero-h);
overflow: hidden;
background:
radial-gradient(circle at 82% 18%, rgba(200, 183, 155, 0.14), transparent 30%),
linear-gradient(135deg, var(--lvc-card), var(--lvc-bg));
}
.lvc-property-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.lvc-property-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(9, 11, 14, 0.95) 0%, rgba(9, 11, 14, 0.72) 48%, rgba(9, 11, 14, 0.35) 100%),
linear-gradient(0deg, rgba(9, 11, 14, 0.88) 0%, transparent 54%);
}
.lvc-property-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
align-items: end;
gap: clamp(40px, 7vw, 110px);
padding-block: clamp(100px, 14vh, 160px) clamp(58px, 8vh, 92px);
}
.lvc-property-hero__copy { max-width: 820px; }
.lvc-property-crumbs {
display: flex;
flex-wrap: wrap;
gap: 7px 10px;
margin-bottom: 28px;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: rgba(243, 240, 232, 0.68);
}
.lvc-property-crumbs a {
color: inherit;
text-decoration: none;
}
.lvc-property-crumbs a:hover { color: var(--lvc-text); }
.lvc-property-hero__eyebrow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: var(--lvc-accent);
}
.lvc-property-hero__title {
max-width: 14ch;
margin: 0;
font-family: var(--lvc-font-display);
font-size: clamp(2.8rem, 6vw, 6.25rem);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--lvc-text);
text-wrap: balance;
}
.lvc-property-hero__position {
max-width: 60ch;
margin: 24px 0 0;
font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
line-height: 1.55;
color: rgba(243, 240, 232, 0.86);
}
.lvc-property-hero__actions,
.lvc-property-location__actions,
.lvc-property-close > .lvc-container > div:last-child {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 30px;
}
.lvc-property-hero__gallery-link {
padding: 12px 0;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: var(--lvc-text);
text-decoration: none;
border-bottom: 1px solid var(--lvc-accent);
}
.lvc-property-summary {
padding: clamp(26px, 3vw, 38px);
background: rgba(16, 20, 26, 0.84);
border: 1px solid rgba(243, 240, 232, 0.18);
backdrop-filter: blur(18px);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
}
.lvc-property-summary__label {
margin: 0;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: var(--lvc-tracking-ui);
color: var(--lvc-muted);
}
.lvc-property-summary__price {
margin: 8px 0 0;
font-family: var(--lvc-font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.1;
color: var(--lvc-text);
}
.lvc-property-summary__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 28px;
border-top: 1px solid var(--lvc-border);
}
.lvc-property-summary__facts > div {
display: grid;
align-content: start;
gap: 5px;
min-height: 92px;
padding: 18px 16px 16px 0;
border-bottom: 1px solid var(--lvc-border);
}
.lvc-property-summary__facts > div:nth-child(even) {
padding-left: 16px;
border-left: 1px solid var(--lvc-border);
}
.lvc-property-summary__facts strong {
font-family: var(--lvc-font-display);
font-size: 1.2rem;
font-weight: 400;
line-height: 1.2;
color: var(--lvc-text);
}
.lvc-property-summary__facts span,
.lvc-property-summary__note {
font-size: 0.75rem;
line-height: 1.45;
color: var(--lvc-muted);
}
.lvc-property-summary__cta {
display: block;
margin-top: 26px;
text-align: center;
}
.lvc-property-summary__note { margin: 14px 0 0; }
.lvc-property-confidence {
background: var(--lvc-bg-alt);
border-block: 1px solid var(--lvc-border);
}
.lvc-property-confidence__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lvc-property-confidence__item {
display: grid;
align-content: center;
gap: 4px;
min-height: 108px;
padding: 24px clamp(18px, 3vw, 36px);
border-right: 1px solid var(--lvc-border);
}
.lvc-property-confidence__item:first-child { padding-left: 0; }
.lvc-property-confidence__item:last-child { border-right: 0; }
.lvc-property-confidence__item strong {
font-size: 0.875rem;
font-weight: 500;
color: var(--lvc-text);
}
.lvc-property-confidence__item span {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lvc-muted);
}
.lvc-property-highlights {
padding-block: 24px;
border-bottom: 1px solid var(--lvc-border);
}
.lvc-property-highlights ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 28px;
margin: 0;
padding: 0;
list-style: none;
}
.lvc-property-highlights li {
position: relative;
padding-left: 15px;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lvc-soft);
}
.lvc-property-highlights li::before {
position: absolute;
top: 0.72em;
left: 0;
width: 4px;
height: 4px;
background: var(--lvc-accent);
border-radius: 50%;
content: '';
}
.lvc-property-section-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 30px;
margin-bottom: clamp(28px, 4vw, 48px);
}
.lvc-property-section-head > p,
.lvc-property-section-head > a {
max-width: 48ch;
margin: 0;
font-size: 0.875rem;
color: var(--lvc-muted);
}
.lvc-property-section-head > a {
color: var(--lvc-accent);
text-decoration: none;
}
/* Flex, not grid, for the same reason .lvc-grid--3 is: a fixed three-column
grid keeps its third track reserved on a short final row, and on a dark page
that empty cell reads as a missing-image tile rather than as space. Five
photos — every Antilia unit — laid out as three plus a black gap. Twenty-five
of eighty-seven published listings land on a count that does this.
justify-content matters here: without it a capped final photo strands hard
left, which is the same shape as the bug. */
.lvc-property-gallery__lead {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.lvc-property-gallery figure,
.lvc-property-plans figure {
margin: 0;
overflow: hidden;
background: var(--lvc-card);
}
/* Basis reproduces the three-column track exactly, so a FULL row is identical
to what grid produced. The cap is two-up, not three-up: a three-up cap looks
right for a lone leftover but pins a TWO-photo remainder at 66% of the row,
leaving the gap this change exists to close. Capping at two-up also bounds
how tall a grown photo gets — these carry aspect-ratio, so width buys
height, and an uncapped final photo would be a full-width banner. */
.lvc-property-gallery__lead figure {
flex: 1 1 calc((100% - 12px) / 3);
max-width: calc((100% - 6px) / 2);
aspect-ratio: 4 / 3;
}
.lvc-property-gallery img,
.lvc-property-plans img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.lvc-property-gallery figure:hover img { transform: scale(1.018); }
/* The thumbnail is a