(see
* cc_render_gallery_card()) rather than a plain — harmless no-op
* on the plain single-photo cards. */
text-decoration: none;
color: inherit;
background: var(--theme-palette-color-9);
}
.cc-listing-card__title {
font-family: var( --cc-font );
font-size: 20px;
font-weight: 400;
line-height: 1.235;
color: var( --cc-ink );
margin: 0;
}
.cc-listing-card__stats {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: -4px 0 0;
font-family: var( --cc-font );
font-size: 14px;
color: var( --cc-ink-soft );
}
.cc-listing-card__stat {
display: inline-flex;
align-items: center;
gap: 4px;
}
.cc-listing-card__stat svg {
width: 15px;
height: 15px;
display: block;
flex: 0 0 auto;
}
.cc-listing-card__dot {
color: var( --cc-ink-soft );
}
.cc-listing-card__hr {
border: 0;
border-top: 1px solid var( --cc-border );
margin: 0;
}
.cc-listing-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cc-listing-card__price {
font-family: var( --cc-font );
font-size: 24px;
font-weight: 400;
color: var( --cc-ink );
}
/* "Preço sob consulta" (cc_preco()) is a sentence, not a number — the
* regular price size/weight reads oddly on it. */
.cc-listing-card__price--indisponivel {
font-size: 14px;
}
.cc-listing-card__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var( --cc-font );
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var( --cc-ink );
white-space: nowrap;
}
.cc-listing-card__cta svg {
width: 16px;
height: 16px;
display: block;
flex: 0 0 auto;
}
.cc-listing-more {
display: flex;
justify-content: center;
margin-top: 52px;
}
.cc-listing-more__btn {
height: 48px;
padding-inline: 32px;
background: var( --cc-ink );
border: 1px solid rgba( 196, 199, 202, 0.6 );
border-radius: 6px;
font-family: var( --cc-font );
font-size: 14px;
font-weight: 500;
color: var( --cc-bg-alt );
cursor: pointer;
}
.cc-listing-more__btn:disabled {
opacity: 0.6;
cursor: default;
}
/* ----------------------------------------------------------------------
* Gallery-slider cards (.cc-gcard — cc_render_gallery_card()): the
* homepage's "Imóveis em destaque" / "Vendidos" teaser. A Swiper instance
* fills the photo area; its nav arrows and pagination dots stay hidden
* until the card is hovered, so the default look matches the plain
* single-photo cards exactly.
*
* This is a ≥1000px-only feature (Penpot: below that, each card in the
* outer .cc-gcard-grid slider shows just its single cover photo — there's
* no room for a second layer of per-card sliding, and no hover to reveal it
* from on a touch device anyway). assets/js/cc-gallery-cards.js only
* constructs the Swiper instance at ≥1000px in the first place, so below
* that .cc-gcard__swiper is never `.swiper-initialized` — the rules below
* key off that to fall back to a plain first-photo-only, controls-free look
* without needing a second, separate breakpoint check in JS.
* -------------------------------------------------------------------- */
.cc-gcard__swiper,
.cc-gcard__swiper .swiper-wrapper,
.cc-gcard__swiper .swiper-slide {
width: 100%;
height: 100%;
}
.cc-gcard__swiper .swiper-slide {
overflow: hidden;
}
.cc-gcard__swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cc-gcard__nav {
position: absolute;
top: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-top: -23px;
background: rgba( 255, 255, 255, 0.9 );
border: 1px solid rgba( 51, 53, 56, 0.35 );
border-radius: 999px;
color: var( --cc-ink );
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease, background-color 0.15s ease;
}
.cc-gcard__nav:hover {
opacity: 1;
}
.cc-gcard__nav svg {
width: 20px;
height: 20px;
display: block;
}
.cc-gcard__nav--prev {
left: 12px;
}
.cc-gcard__nav--next {
right: 12px;
}
.cc-gcard__nav.swiper-button-disabled {
opacity: 0 !important;
pointer-events: none;
}
.cc-gcard__pagination {
position: absolute;
bottom: 16px !important;
left: 0;
right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
opacity: 0;
transition: opacity 0.2s ease;
}
.cc-gcard__pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 !important;
background: #fff;
opacity: 1;
border-radius: 999px;
cursor: pointer;
transition: width 0.2s ease, background-color 0.15s ease;
}
.cc-gcard__pagination .swiper-pagination-bullet-active {
width: 24px;
background: var( --cc-accent );
}
/* ≥1000px only — see block docblock above. */
@media ( min-width: 1000px ) {
.cc-gcard:hover .cc-gcard__nav:not( .swiper-button-disabled ),
.cc-gcard:hover .cc-gcard__pagination {
opacity: 1;
}
}
/* <1000px (or the per-card Swiper simply never got initialized): show only
* the first photo, no nav/pagination — see block docblock above. */
.cc-gcard__swiper:not( .swiper-initialized ) .swiper-wrapper {
display: block;
}
.cc-gcard__swiper:not( .swiper-initialized ) .swiper-slide {
display: none;
}
.cc-gcard__swiper:not( .swiper-initialized ) .swiper-slide:first-child {
display: block;
}
.cc-gcard__swiper:not( .swiper-initialized ) .cc-gcard__pagination {
display: none;
}
.cc-gcard__swiper:not( .swiper-initialized ) ~ .cc-gcard__nav {
display: none;
}
/* ----------------------------------------------------------------------
* Outer card grid/slider (.cc-gcard-grid — cc_render_gcard_grid()): wraps
* .cc-gcard cards for the homepage's "Imóveis em destaque" and "Vendidos"
* teaser. ≥1000px it's a plain 3-column grid (assets/js/cc-gcard-grid.js
* never constructs the Swiper instance up there, so — same trick as the
* per-card slider above — it's never `.swiper-initialized` and these rules
* fall back to a static grid). Below 1000px it's a real one-card-at-a-time
* Swiper slider with a "1 / N" counter + nav row underneath, matching the
* Penpot mobile board (same recipe as [cc_testemunhos]/[cc_equipa]'s mobile
* sliders — assets/css/testemunhos.css / equipa.css — duplicated rather
* than shared, per this file's own "no cross-file dependency" convention).
* -------------------------------------------------------------------- */
.cc-gcard-grid__swiper {
width: 100%;
overflow: visible;
}
.cc-gcard-grid__slide {
background-color: var(--theme-palette-color-9);
transition: 500ms all ease;
}
.cc-gcard-grid__slide:hover {
box-shadow: 0px 225px 63px rgba(0, 0, 0, 0),
0px 144px 58px rgba(0, 0, 0, 0.01),
0px 81px 49px rgba(0, 0, 0, 0.05),
0px 36px 36px rgba(0, 0, 0, 0.09),
0px 9px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.cc-gcard-grid__slide:hover .cc-listing-card__cta {
color: var(--theme-palette-color-1);
}
.cc-gcard-grid__slide:hover .cc-listing-card__cta svg path {
fill: var(--theme-palette-color-1);
}
/* min-width:1000px guard: a single card (no .cc-gcard-grid__foot at all —
* see cc_render_gcard_grid()) never gets a Swiper instance on ANY
* breakpoint, so without this guard it would also be "not initialized" —
* and thus forced into a 3-column grid — below 1000px too. Scoping the
* fallback to the same breakpoint the JS uses means an un-initialized
* wrapper below 1000px just gets normal block layout instead (a single
* full-width card, which is exactly what it should look like there). */
@media ( min-width: 1000px ) {
/* `>` (direct child), not a bare descendant selector: .swiper-wrapper and
* .swiper-slide are generic Swiper class names, and each .cc-gcard card
* rendered inside a slide here (cc_render_gallery_card()) has its OWN,
* separately-scoped nested photo slider (.cc-gcard__swiper, ≥1000px only
* — see its block above), with its own .swiper-wrapper/.swiper-slide
* several levels deeper. An unscoped descendant selector matches those
* too, and — by specificity (0,3,0) vs. that slider's own (0,2,0) —
* actually WINS, grid-ifying every card's photo slides into a useless
* static 3-up thumbnail grid instead of a slider. `>` keeps this fallback
* to exactly the outer, whole-card wrapper/slides it's meant for. */
.cc-gcard-grid__swiper:not( .swiper-initialized ) > .swiper-wrapper {
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: 24px 24px;
}
.cc-gcard-grid__swiper:not( .swiper-initialized ) > .swiper-wrapper > .swiper-slide {
width: auto;
height: auto;
/* Same "grid item defaults to min-width:auto" fix as .cc-listing-card
* — see its own comment above for the full explanation. */
min-width: 0;
}
}
.cc-gcard-grid__foot {
display: none;
align-items: center;
justify-content: space-between;
margin-top: 24px;
}
.cc-gcard-grid__foot-nav {
display: flex;
gap: 8px;
}
.cc-gcard-grid__counter {
font-family: var( --cc-font );
font-size: 18px;
font-weight: 500;
color: var( --cc-ink );
}
.cc-gcard-grid__prev,
.cc-gcard-grid__next {
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 999px;
border: 1px solid rgba( 51, 53, 56, 0.35 );
background: transparent;
color: var( --cc-ink );
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: opacity 0.15s ease;
}
.cc-gcard-grid__prev svg,
.cc-gcard-grid__next svg {
width: 18px;
height: 18px;
display: block;
}
.cc-gcard-grid__prev.swiper-button-disabled,
.cc-gcard-grid__next.swiper-button-disabled {
opacity: .35;
pointer-events: none;
}
@media ( max-width: 999px ) {
.cc-gcard-grid__foot {
display: flex;
}
}
/* ----------------------------------------------------------------------
* Mobile (<768px): filter bar → drawer trigger; grid → single column.
* -------------------------------------------------------------------- */
@media ( max-width: 768px ) {
.cc-listing__container {
padding-block: 24px 64px;
}
.cc-filters-bar {
display: none;
}
.cc-filters-trigger {
display: inline-flex;
}
.cc-listing-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media ( prefers-reduced-motion: reduce ) {
.cc-filter__panel,
.cc-filter__trigger svg,
.cc-filters-drawer__scrim,
.cc-filters-drawer__panel,
.cc-listing-card__img img {
transition: none;
}
}