/* Dream City Realty - post-Duda static fixes.
Duda hides every animated element up front and reveals it with a scroll
runtime that does not exist in a static export. #dmRoot is the , so
these selectors outrank Duda's class-only rules. Content appears instead of
animating in, which is the right trade for a static site. */
#dmRoot [data-anim-extended],
#dmRoot [data-anim-desktop]:not([data-anim-desktop='none']),
#dmRoot [data-anim-tablet]:not([data-anim-tablet='none']),
#dmRoot [data-anim-mobile]:not([data-anim-mobile='none']),
#dmRoot .dmNewParagraph[data-anim-extended],
#dmRoot .flex-element [data-anim-extended] {
visibility: visible !important;
opacity: 1 !important;
}
/* Galleries gate their thumbnails on a .ready class the same runtime adds. */
#dmRoot .dmPhotoGalleryHolder:not(.ready) li.photoGalleryThumbs {
visibility: visible !important;
display: inline-block !important;
}
/* ============ Agents grid: 4-up desktop, 2-up mobile ============
Duda's gallery widths are injected by the dead runtime. The cards
(photogallery-column) are ours to lay out now. Flex instead of floats so
the four cards in a row share a height -- a name that wraps to two lines
was otherwise making its card taller than its neighbours. */
#dmRoot .dmPhotoGallery .layout-container .photogallery-row {
display: flex;
flex-wrap: wrap;
}
/* 10px each side leaves a 20px gutter between photos and, at the 1200px
content cap, sizes the column so the 275px photo box below lands exactly. */
#dmRoot .dmPhotoGallery .layout-container .photogallery-column {
width: 25% !important;
max-width: 25% !important;
float: none;
box-sizing: border-box;
padding: 0 10px 24px;
}
/* Duda pads this 10px all round. The horizontal half has to go or the photo
can never measure 275 -- the column only has 295 to give. */
#dmRoot .dmPhotoGallery .layout-container .photoGalleryThumbs {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (max-width: 767px) {
#dmRoot .dmPhotoGallery .layout-container .photogallery-column {
width: 50% !important;
max-width: 50% !important;
}
}
/* ============ Gallery photos: 275 wide, square, 10px radius ============
The photo box is the inside .image-container. display must be block —
on an inline box overflow:hidden is ignored, so the radius computed but the
corners stayed square. The agents page is what needs exactly 275x275;
property and staff galleries share the width because they already sat at
275 and there is no reason to move them. They do not come out square: Duda
pins an explicit height on .image-container on those pages, which makes
aspect-ratio a no-op there. Leave that alone. */
#dmRoot .dmPhotoGallery .layout-container .image-container>a {
display: block;
width: 275px;
max-width: 100%;
aspect-ratio: 1 / 1;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
background-size: cover;
background-position: center center;
}
/* Duda paints the photo twice: a 640w background-image on the and a 1920w
![]()
on top of it. Untouched, the ![]()
keeps its intrinsic ratio while the
background is cover-cropped, so the two crops disagree and a portrait shows
as two mismatched halves. Cover the box with the ![]()
and one image wins. */
#dmRoot .dmPhotoGallery .layout-container .image-container>a>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* ============ Page gutter ============
Duda gives every top-level row 40px of horizontal padding. Above 1440 the
1200px content cap absorbs the slack and text sits 120px in, but from 1440
down the gutter collapses to that bare 40px and the hero headline ends up
against the edge of the screen. Raise it so the hero and the content below
it -- which share this left edge -- keep moving together.
Only the horizontal longhands are set: each row carries its own vertical
rhythm (179px on the hero, 0 on others) and has to keep it. !important is
required because Duda ships several !important padding rules on .dmRespRow.
Nested rows sit inside columns, not directly under .dmRespRowsWrapper, so
they are untouched and cannot double-indent.
Below 1100px this does not apply: the tablet and mobile builds already sit
at 40px and tightening them would be a regression. */
@media (min-width: 1100px) {
#dmRoot #dm_content .dmRespRowsWrapper > .dmRespRow {
padding-left: 80px !important;
padding-right: 80px !important;
}
}