and these
rules reproduce the theme's `.page-title h1` styling exactly.
--------------------------------------------------------------------------- */
.page-title .page-title-head .page-title-heading,
.page-title .page-title-head .page-title-heading * {
font: 700 1px/1px "Roboto", Helvetica, Arial, Verdana, sans-serif;
color: #ffffff;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
text-decoration: none;
}
.page-title .page-title-head .page-title-heading {
margin: 0;
padding: 0;
clear: both;
}
.page-title.title-center .page-title-head .page-title-heading {
text-align: center;
}
@media screen and (max-width: 778px) {
.page-title-responsive-enabled.page-title .page-title-head .page-title-heading,
.page-title-responsive-enabled.page-title .page-title-head .page-title-heading * {
font: 700 24px/34px "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
}
/* ---------------------------------------------------------------------------
Jeep-eyes page title
These pages repeated their banner title inside the content block as a second
; it stays hidden.
--------------------------------------------------------------------------- */
.jeep-eyes-container .jeep-eyes-page-title {
display: none;
}
/* ---------------------------------------------------------------------------
The Journal — the posts index
Written by the admin's Posts section into the-journal.html, so it needs
styling that belongs to the site rather than to the theme. Phone first: one
post per row, the picture above the words; from 768px the picture sits
beside them. Every card is a single link with a 48px-plus touch box.
--------------------------------------------------------------------------- */
.journal-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.journal-list .journal-item {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
padding-bottom: 24px;
}
.journal-list .journal-item::before {
content: none;
}
.journal-item-link {
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
color: inherit;
}
.journal-item-img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
background: #f5f4f2;
}
.journal-item-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.journal-item-title {
display: block;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
overflow-wrap: anywhere;
}
.journal-item-link:hover .journal-item-title {
color: #e08244;
}
.journal-item-meta {
display: block;
font-size: 13px;
line-height: 1.4;
color: #767676;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.journal-item-excerpt {
display: block;
font-size: 16px;
line-height: 1.5;
}
/* The meta line under a post's own title, and the tag line at its foot. */
.post-meta,
.post-tags {
font-size: 14px;
color: #767676;
}
@media (min-width: 768px) {
.journal-item-link {
flex-direction: row;
gap: 20px;
align-items: flex-start;
}
.journal-item-img {
flex: 0 0 280px;
width: 280px;
aspect-ratio: 3 / 2;
}
.journal-item-title {
font-size: 26px;
}
}
@media (min-width: 1024px) {
.journal-item-img {
flex-basis: 340px;
width: 340px;
}
.journal-item-title {
font-size: 30px;
}
}
/* ---------------------------------------------------------------------------
Contact form status line
forms.js writes the result of a submission into the response box Contact
Form 7's markup already provides. The theme styles the box only while
WordPress is driving it, so the three states are coloured here.
--------------------------------------------------------------------------- */
.ng-form-status,
.wpcf7-response-output[role="status"] {
display: block;
margin: 12px 0 0;
padding: 10px 12px;
border: 1px solid rgba(0, 0, 0, 0.12);
font-size: 15px;
line-height: 1.4;
}
.ng-form-status:empty,
.wpcf7-response-output[role="status"]:empty {
display: none;
}
.ng-form-status.is-sent {
border-color: #2f8f4e;
color: #2f8f4e;
}
.ng-form-status.is-error {
border-color: #c0392b;
color: #c0392b;
}
.ng-form-status.is-sending {
border-color: #e08244;
color: #e08244;
}
/* ---------------------------------------------------------------------------
Footer area guides
The AREA GUIDES block under the footer logo links the two neighbourhood
guides. Where a page's block has been emptied, the empty div must not keep
its 30px footer-text margin, or that page's footer runs 30px taller than
the original's.
--------------------------------------------------------------------------- */
.footer-guides:empty {
display: none;
}
/* ---------------------------------------------------------------------------
The previous agency's credit, in the bottom bar
Removed at the client's request. The
stays because the visual editor
addresses elements by their data-mb id and the id belongs to it, so the
block is emptied rather than deleted and collapsed here — otherwise the
bottom bar keeps the line's height on every page.
--------------------------------------------------------------------------- */
.bottom-text-block:empty {
display: none;
}
/* A testimonial whose written quote has not been given yet.
Brian's row carried the words "coming soon" where the quote belongs. His
video is real and stays; only the placeholder text has gone. The paragraph
itself is kept - the visual editor addresses it by its data-mb id, and
deleting it would take that id with it - so it is collapsed here instead of
leaving a blank line under the name. The day someone types a quote in, it
fills back in on its own. */
.jeep-eyes-content-inner p:empty {
display: none;
}
/* ---------------------------------------------------------------------------
The page a visitor lands on when an address leads nowhere
Mostly reached by someone following an old link to a listing that has since
been taken down, so it apologises briefly and then does the only useful
thing available: offers the four places they were probably trying to get to,
and Derek's number.
--------------------------------------------------------------------------- */
.ng-404 {
max-width: 720px;
margin: 0 auto;
padding: 8px 0 48px;
text-align: center;
}
.ng-404 h1 {
display: block;
margin: 0 0 12px;
font-size: clamp(26px, 5vw, 44px);
line-height: 1.15;
}
/* The theme's banner heading, demoted to a paragraph here so the real heading
inside the page is its only h1. It keeps the banner's own look. */
.ng-banner-title {
margin: 0;
}
.ng-404 p {
font-size: 17px;
line-height: 1.6;
margin: 0 0 24px;
}
.ng-404-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 28px;
}
.ng-404-links .dt-btn {
flex: 0 1 auto;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 22px;
}
.ng-404-call {
font-size: 16px;
/* The line holds a phone number, which on a phone is the quickest way out
of a dead end - so the number itself has to be a comfortable tap, not a
23px-high line of text. */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0;
}
.ng-404-call a {
white-space: nowrap;
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 10px;
}
@media (max-width: 767px) {
.ng-404 {
padding: 4px 0 32px;
}
.ng-404 p {
font-size: 16px;
}
/* Four buttons in a column read better than two ragged rows, and each one
is a full-width tap target. */
.ng-404-links {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
}
/* ---------------------------------------------------------------------------
Phone tap targets — footer, contact details, partner cards
The theme leaves these links as inline boxes the height of one line (19px),
too small to hit reliably on a phone. Under 768px each gets a 48px touch
box WITHOUT moving a pixel of the original layout: the link becomes an
inline-block, grows by padding, and takes the same amount back as negative
margin, so its margin box (the one the line is laid out from) and its
painted glyphs stay exactly where the theme put them. Desktop and tablet
keep the theme's original inline rhythm untouched.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* 28px icons on a 19px line → 48px box */
.social-footer-icons a {
display: inline-block;
padding: 15px 10px;
margin: -15px -10px;
}
/* The footer logo link: the picture inside is already 62px tall, so the
link only needs to take the picture's height as its own. */
.textwidget.custom-html-widget > a {
display: inline-block;
padding: 15px 0;
margin: -15px 0;
}
/* 19px text lines → 48px box */
.footer-address p a[href^="tel:"],
.footer-text a[href^="tel:"],
.footer-text a[href^="mailto:"],
.bottom-text-block a {
display: inline-block;
padding: 15px 0;
margin: -15px 0;
}
/* 25px text lines on the Contact page → 48px box */
.jeep-eyes-content-inner a[href^="tel:"],
.jeep-eyes-content-inner a[href^="mailto:"] {
display: inline-block;
padding: 12px 0;
margin: -12px 0;
}
/* The partner cards sit inside .jeep-eyes-content-inner too, so these rules
come last to win on source order. Their links are already inline-blocks
carrying the theme's own 5px padding: keep that 5px in the margin box and
add the rest invisibly — padding grows by 12px, margins take 12px back. */
.partners-social-media a[href^="mailto:"],
.partners-social-media a[href^="tel:"] {
padding: 17px 5px;
margin: -12px 0;
}
/* The icon glyphs are 16px of content inside the theme's 5px padding, so
they need 16px a side to reach 48; the -11px margins hand the extra
22px back to the line, leaving the row exactly as the theme spaced it. */
.partners-social-media a[href^="http"] {
padding: 17px 16px;
margin: -12px -11px;
}
/* The bottom bar's credit line is 13px in the original, under the 14px a
phone wants. The glyphs go up by 1px; line-height stays pinned at the
theme's 25px so the paragraph and the bar keep the original's height. */
#bottom-bar .bottom-text-block p,
#bottom-bar .wf-float-left {
font-size: 14px;
line-height: 25px;
}
/* Visually hidden until focused, but sized so it is a real target when it is
revealed by keyboard focus. */
.skip-link.screen-reader-text {
min-width: 48px;
min-height: 48px;
}
}
/* =========================== listing cards: the photos keep their own shapes
A card's photo strip was once pinned to 16:3 with the pictures cropped to
fill it, so that every card in a gallery stood the same height whatever
shape its photos were, and so that a listing posted with a single photo did
not tower over its neighbours.
That cropped the copied listings too, which is the thing that matters more:
the strips on the original run between 269px and 480px tall precisely
because the photos are 16:9, 3:2, 4:3 and square, and the site is supposed
to look like the original. A listing posted from the admin now has its
photos cropped to the shape of the gallery when it is placed, so the strip
is even without a rule here forcing it.
What stays is the one genuine fault: below 778px the theme hides the strip's
last photo to show two at half width, and `:last-of-type` hid the only
picture a one-photo listing had. `nth-child(3)` only ever hides a third
that exists. */
@media (max-width: 778px) {
.ir_listing_image_wrap > div:last-of-type {
display: block;
}
.ir_listing_image_wrap > div:nth-child(3) {
display: none;
}
}
/* ===================== testimonial rows: the photo keeps its own proportions
These rows — The Partners, The Story, What Clients Say, Memorable Solds —
hold a block of copy beside either a video or a photo. The videos are
pinned to 16:9 by the theme's padding-top trick, and a photo was once
pinned to the same box here so that a row carrying one lined up with a row
carrying the other.
That was wrong, and badly so. The photos are not 16:9: the ten on The
Partners are portraits, eight at 2:3 and two at 3:4, and cropping a
portrait headshot to a landscape letterbox threw away most of the person.
The Story mixes 3:4, square and 3:2 in the same column. The original site
let every one of them keep its own shape, and matching the original is
worth more than making two kinds of row the same height.
So there is no rule here any more. The theme already says width 100%,
height auto, display block, which is exactly what the original did, and
leaving it alone is what keeps every copied photo the size it has always
been. A photo added from the admin is cropped to match its neighbours when
it is placed, which is the right place for it: cropping the file once
leaves the markup honest, where cropping in CSS lies to every other
photo on the page. */
/* ========================= menu items that show words instead of a wordmark
Every item in the original menu is a black SVG wordmark, with the item's
own text sitting behind it and hidden by the menu-image plugin. Because
nothing ever showed that text, the theme's white link colour on it never
mattered.
A page added in the admin has no wordmark, so its item falls back to its
words — and those words came out white on a white header, which read as a
missing menu item. They are coloured and set here to sit with the artwork
beside them: the same black, the site's condensed face, uppercase, and the
height the wordmarks are drawn at in each menu.
No white-space:nowrap — a long title has to be allowed to wrap rather than
push the header off the screen. Shorten the wording in the Menu section if
an item runs long. */
#primary-menu .menu-image-title,
#mobile-menu .menu-image-title {
/* Not pure black, even though the wordmarks beside it are. They are vector
artwork scaled down to 18px, which softens every edge and lands lighter
than the value it was drawn in; live text keeps its edges and reads
heavier at the same value. Grayscale smoothing below closes most of
that gap and this closes the rest — a tenth off black, which is
indistinguishable from it in isolation and matches the artwork when
they sit side by side. */
color: #1a1a1a;
font-family: "Myriad Pro Semibold Condensed", Helvetica, Arial, Verdana, sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: normal;
/* The wordmarks beside this are vector artwork; this is live text, and a
Mac renders the two differently. Its default subpixel smoothing thickens
type, so the same pure black reads heavier than the drawn letters next
to it. Grayscale smoothing is how text is already drawn on Windows and
Linux, so asking for it costs nothing there and brings the Mac into
line rather than fixing the symptom by watering down the colour, which
would then be wrong on every other machine. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Sized by the height of the letters, not by the height of the box they sit
in. Type puts its cap height at 0.6875 of the font size, so a wordmark and
a word of live text set to the same number come out different sizes.
The wordmarks do not fill their frame either. Measured path by path, the
994x185 frame is spanned by the sideways "The", which runs the full 185;
the main word's flat capitals run 3.1 to 182.8, so its cap height is 179.7
of those units, not 185. A wordmark drawn 18px tall therefore has capitals
18 * 179.7/185 = 17.48px, and the live text beside it needs
17.48 / 0.6875 = 25.43px to match — not the 26px that reading the frame as
if it were the letters gives.
Desktop wordmarks are drawn 18px, the mobile menu's 30px, so the cap height
to match is 18 * 179.7/185 = 17.484px and 30 * 179.7/185 = 29.141px.
Matching cap height alone is still not a match. Measured letter by letter
against the drawings, this webfont is a slightly wider cut of the same face:
its capitals carry 1/0.9243 — about 8% — more width at the same cap height,
and the drawings are tracked tighter on top of that, so a word set to the
right height came out 13% longer than the drawn one beside it and read
visibly looser. Of the 40 faces loaded on this site it is still far and away
the closest (the next best is 0.71), so the fix is to set it narrow rather
than to set it in something else.
Narrow it by reducing the font size, not by scaling it horizontally. Both
get the same letter width, but a smaller font size genuinely occupies less
room, so the item's width in the nav is right and no neighbouring gap has to
be corrected afterwards; scaleX would leave the box at its full width and
push the next item along. The cap height that reduction gives up is then
handed back with scaleY, which does not touch horizontal layout at all.
The item keeps the cap-matched size, and only the words inside it are set
narrow and stretched back: 0.9243em, scaled by 1/0.9243. The sideways "The"
is artwork and stays outside that — rendered inside a scaled element the
browser rasterises it at the smaller size and resamples the bitmap, which
banded it visibly against the crisp drawings either side. */
#primary-menu .menu-image-title {
font-size: 25.43px;
line-height: 1;
}
#mobile-menu .menu-image-title {
font-size: 42.39px;
line-height: 1;
}
/* An item that shows words has to take up exactly the room an item that shows
a wordmark takes up, or it sits off the line on the desktop bar and makes
its own row deeper than the rest of the stack on the phone — the mobile menu
was running 12.4px deep on the new item alone, and the desktop baseline
0.56px high.
Both links are flex rows that centre what they hold, but they hold the
wordmark differently: the desktop one sits it inline in a 20px line box,
the mobile one makes it a 30px item of its own. So the box given to the
words is the room the drawing occupies in each — 20px and 30px — rather
than one ratio that would be wrong in one of them.
Inside that box, line-height places the baseline. Chrome rounds inline
layout to whole pixels, so line-height alone can only land either side of
the drawings' baseline; the value below takes the nearer side and the
fraction still owed is paid by shifting the box, which is painted rather
than laid out and so keeps its decimals. Measured against the drawings
this lands within 0.002px at both sizes. */
#primary-menu a:not(.menu-image-title-hide) .menu-image-title,
#mobile-menu a:not(.menu-image-title-hide) .menu-image-title {
display: block;
position: relative;
}
#primary-menu a:not(.menu-image-title-hide) .menu-image-title {
height: 20px;
line-height: 27px;
top: -0.44px;
}
#mobile-menu a:not(.menu-image-title-hide) .menu-image-title {
height: 30px;
line-height: 38.09px;
}
.ng-menu-word {
display: inline-block;
font-size: 0.9243em;
line-height: 1;
/* What is left of the drawings' tighter tracking once the letters
themselves are the right width. */
letter-spacing: -0.02em;
transform: scaleY(1.0819);
/* About the baseline, so the cap height grows upward from it and the words
sit on the same line as the wordmarks either side. This face has a
0.75em ascent against a 0.25em descent, so at line-height 1 the baseline
is 0.75em below the top of the box. */
transform-origin: left 0.75em;
}
/* A leading "The" in a text menu item is not text. Every other item in this
nav is a drawn wordmark, and rotating live type only ever approximates the
sideways "The" those drawings carry — the cap height, the spacing between
its three letters and the gap before the main word are all draughtsman's
decisions, not font metrics. So content-build.js emits the artwork itself:
the same three outlines all six wordmarks share, lifted from
the-properties-black.svg. Identical by construction, on any machine,
whatever is installed.
The viewBox it carries is the artwork's own space. x runs 0 to 92.1 — the
"The" is 84.3 wide and the drawings leave 7.8 clear before the main word,
so that gap is inside the box. y runs the full 184.7 the "The" spans. The
main word's cap height in that space is 179.7 and its baseline sits at
182.8, which is what the two numbers below are built from.
Matched on the element and not the class alone, because pages published
before this carry the old markup — a span of rotated text under the same
class — and these rules would treat that span as if it were the drawing.
Those pages rewrite themselves the next time the client publishes; the
block at the end of this file keeps them looking right until they do. */
svg.ng-menu-the {
display: inline-block;
/* 184.7 units tall where 179.7 units is the cap height, and cap height is
0.6875em of the text beside it: 184.7/179.7 * 0.6875. */
height: 0.70663em;
/* Its own 92.1:184.7, at the artwork's proportions. It sits outside the
span that narrows the words, so nothing distorts it. */
width: calc(0.70663em * 92.1 / 184.7);
/* The drawings are pure black at full opacity. The live word beside this
is held just off black to answer how much heavier a rasterised glyph
reads than a drawn one — a compensation that applies to type and not to
artwork, so this takes the ink colour its neighbours actually use. */
fill: #000;
/* The box bottom is 1.9 units below the baseline (184.7 - 182.8), because
the sideways "The" hangs slightly under it: 1.9/179.7 * 0.6875. */
vertical-align: -0.00727em;
}
/* The 7.8-unit gap is already inside the viewBox above, measured to where the
main word's ink begins. Live text begins at its origin instead, and every
capital in this face carries a left side bearing that is an exact multiple
of 1/64 em — only five values occur across A-Z and 0-9 — so the word is
pulled back by the bearing of its own first letter and the drawn gap is
what remains. The pull belongs on the word, where 1em is the narrowed size
the bearing is actually measured against. */
.ng-menu-the + .ng-menu-word {
margin-left: calc(var(--ng-the-lsb, 0.015625em) * -1);
}
.ng-menu-word[data-lsb="-1"] { --ng-the-lsb: -0.015625em; } /* J Y */
.ng-menu-word[data-lsb="0"] { --ng-the-lsb: 0em; } /* A T V X Z 4 */
.ng-menu-word[data-lsb="1"] { --ng-the-lsb: 0.015625em; } /* C G O Q S W 0 2 3 5 6 8 9 */
.ng-menu-word[data-lsb="2"] { --ng-the-lsb: 0.03125em; } /* M 7 */
.ng-menu-word[data-lsb="3"] { --ng-the-lsb: 0.046875em; } /* B D E F H I K L N P R U 1 */
/* Pages published before the "The" became artwork carry it as a span of
rotated text instead, and they stay on the live site until the client next
presses Publish — which rewrites every page's menu, because the markup
version in content-build.js has moved on. This keeps those pages looking
the way they were signed off in the meantime rather than leaving a loose
lowercase "the" sitting in the bar, and can be deleted once a publish has
been through. Nothing generated now matches it. */
span.ng-menu-the {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.52em;
line-height: 1;
letter-spacing: 0;
vertical-align: baseline;
margin-right: -0.08em;
text-transform: uppercase;
}
/* ===================================== pictures dropped into the home collage
The collage is a flex row of quarter-width squares, and the theme only ever
says `width: 100%` on the picture inside one. That worked because every
picture the site shipped with was square: the height followed the width and
the tile came out square by accident, not by rule.
The moment the media library drops a photo that is not square into a tile,
the picture keeps its own proportions, the tile grows to fit it, and every
other tile on that row is stretched to match — one portrait photo took the
top row from 360px to 540px and hung the picture past the bottom of the
grid. The tile is a square by design, so it is told to be one here, and the
photo is cropped to fill it rather than being allowed to set the height.
This governs whatever gets put there later, so a client uploading a phone
photo gets the same tile as the artwork it replaced. */
.home-square img {
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
object-position: center;
}
/* The read-out ?ngforms=debug writes under a form. Never shown to a visitor:
the element is only created when that parameter is on the address, so this
styles something that does not otherwise exist. */
.ng-form-debug {
margin: 12px 0 0;
padding: 10px 12px;
border: 1px dashed #b7791f;
background: #fffaf0;
color: #5a4320;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
A listing's full address, under the heading
The heading gives the street and the municipality, which is how the page
reads. This gives the rest - province and postal code - because a search
engine matching a home to a place wants the whole address, and because the
structured data is meant to mirror what the page says rather than assert
things the page does not. Set quietly: it is a reference line, not a
headline, and it sits directly under one.
--------------------------------------------------------------------------- */
.listing_single_full_address {
margin: 4px 0 0;
font-size: 15px;
line-height: 1.4;
color: #767676;
letter-spacing: 0.2px;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.listing_single_full_address {
font-size: 14px;
}
}
/* ---------------------------------------------------------------------------
Property details on a phone, a tablet and a small laptop
The Inspired Realty stylesheet hides the whole details column below 1200px:
@media (max-width: 1199px) { .listing_details_col { display: none } }
So the one block of data that is unique to the property - bedrooms,
bathrooms, square feet, lot size, year built - disappears on every phone,
every tablet and most laptops. Google indexes the phone rendering, so what
it was shown of a listing page was the address, the price and a paragraph of
MLS remarks carried verbatim by forty other sites. Nothing of its own.
These rules put the block back below 1200px and give it a layout built for
the width rather than the desktop one squeezed. The desktop rules above
1200px are untouched.
--------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.listing_details_col {
display: block;
}
}
/* Small laptops keep the desktop's two columns, but the column is 267px wide
there rather than 316px and the desktop's 30px type breaks "Square Feet"
across two lines. Set to the size that keeps every label on one line. */
@media (min-width: 1024px) and (max-width: 1199px) {
.listing_details_col {
padding: 20px;
margin-right: 40px;
}
.listing_details_col_inner {
padding: 20px;
}
.listing_details_table_row > div {
font-size: 20px;
line-height: 1.3;
}
.listing_details_table_row .listing_flex_spacer {
margin-top: 16px;
margin-bottom: -16px;
}
}
@media (max-width: 1023px) {
/* The facts are a sibling column of the description, and the address and
price live inside that column. Dissolving the column's own box on the
narrow views lets all three stack in reading order - address, facts,
description - instead of dropping the facts under the buttons. */
.listing_details {
display: flex;
flex-flow: column nowrap;
padding: 24px 16px;
}
.listing_description_col {
display: contents;
}
.listing_single_image_info_details {
order: 1;
}
.listing_details_col {
order: 2;
margin: 12px 0 16px;
padding: 12px;
}
.listing_single_intro,
.listing_description {
order: 3;
}
.listing_button_container {
order: 4;
}
.listing_details_col_inner {
padding: 12px;
}
.listing_details_table_row {
margin-bottom: 4px;
}
.listing_details_table_row > div {
padding: 2px 0;
font-size: 16px;
line-height: 1.35;
}
.listing_details_table_row .listing_flex_spacer {
margin: 0 8px;
margin-top: 12px;
margin-bottom: -12px;
}
}
@media (max-width: 767px) {
.listing_details {
padding: 20px 16px;
}
.listing_details_table_row > div {
font-size: 15px;
}
.listing_details_table_row .listing_flex_spacer {
margin-top: 11px;
margin-bottom: -11px;
}
}
/* ---------------------------------------------------------------------------
A sold listing says so
A sold home kept its address, its photographs and an asking price, and read
on the page exactly like one still for sale - 203 of them against 49 that
are really on the market. The status line below carries the word, and the
price moves into it as history rather than sitting in the heading as an
invitation.
--------------------------------------------------------------------------- */
.listing_single_status {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
margin: 10px 0 0;
}
.listing_status_badge {
display: inline-block;
padding: 4px 12px;
background: #e08244;
color: #fff;
font: normal 16px/1.2 "Myriad Pro Semibold Condensed", Helvetica, Arial, sans-serif;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.listing_status_note {
font-size: 15px;
line-height: 1.4;
color: #767676;
}
@media (max-width: 767px) {
.listing_status_note {
font-size: 14px;
}
}