/* Villas Campestre Mediterráneo — page layer. * ===================================================================== * Loaded LAST (after brand-villas.css -> type-scale.css -> base.css -> * motion.css). Does only three things the base template can't know: * 1. Drops the real hand-drawn SKETCHES into the template's media zones. * 2. Guarantees text contrast over the light sketches (scrims). * 3. A few light-theme + landscape-artwork tunings and two restrained * terracotta notes. * Everything else is inherited from the premium base + the brand tokens. * =================================================================== */ /* Belt-and-suspenders canvas colour so there is never a dark flash before * .ck-shell paints (base.css sets body's neutral fallback to near-black). */ body { background: #F8F5EF; } /* --- Sketch media --------------------------------------------------- * A single helper: fill the template's media box with a sketch, cover- * cropped, on a clean white mat, with the shared whisper-light grade. * NOTE: the background-image URL is set INLINE on each element (not via * a custom property) — url() inside a custom prop resolves relative to * THIS stylesheet (/css/), which 404s; inline resolves against the page. */ .villas-shot { background-color: var(--villas-surface) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; filter: var(--ck-photo-filter); } /* Kill the base gradient stand-in on split media so the sketch shows. */ .ck-split__media.villas-shot::before { display: none !important; } /* --- HERO — ART-DIRECTED RESPONSIVE -------------------------------- * The hero image (entrance-vignette.jpg) is a colored watercolour that * carries the "VILLAS / CAMPESTRE MEDITERRÁNEO" sign, near-square (~1.14). * * MOBILE-FIRST / PORTRAIT (aspect < 1): show the WHOLE image, uncropped, * sign fully readable (width:100%; height:auto) with the tagline stacked * BELOW — never overlay type on the art, so the sign is never covered. * * LANDSCAPE / WIDE (aspect >= 1, incl. desktop): the image fills a fixed * viewport-height band (object-fit:cover) and the tagline overlays the * lower band over a scrim. * * A warm-white/soft-sky backdrop sits behind the image so any letterbox * edge is on-brand, never an ugly bar. */ .villas-hero-v2 { background: linear-gradient(180deg, color-mix(in srgb, var(--villas-blue) 9%, var(--villas-white)), var(--villas-white) 62%); } .villas-hero-v2__media { display: block; } .villas-hero-v2__img { display: block; width: 100%; height: auto; /* COMPLETE, uncropped */ filter: var(--ck-photo-filter); } .villas-hero-v2__copy { padding: clamp(1.6rem, 4vw, 2.75rem) var(--ck-gutter) clamp(2.5rem, 6vw, 4rem); max-width: 46rem; } .villas-hero-v2__copy .ck-overline { margin-bottom: clamp(0.85rem, 2vw, 1.25rem); } .villas-hero-v2__copy .ck-display { font-size: clamp(2.4rem, 1.7rem + 4.5vw, 3.6rem); line-height: 1.0; margin: 0 0 clamp(0.85rem, 1.6vw, 1.2rem); } .villas-hero-v2__copy .ck-hero__lead { max-width: 44ch; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .villas-hero-v2 .ck-scrollcue { display: none; } /* LANDSCAPE / WIDE — cover band with overlaid tagline. */ @media (min-aspect-ratio: 1/1) { .villas-hero-v2 { position: relative; isolation: isolate; overflow: clip; min-height: min(90svh, 58rem); display: flex; align-items: flex-end; } .villas-hero-v2__media { position: absolute; inset: 0; z-index: 0; } .villas-hero-v2__img { width: 100%; height: 100%; object-fit: cover; /* keep the sign board (upper-left) and buildings in the wide crop */ object-position: 32% 28%; } /* legibility scrim for the overlaid tagline in the lower band */ .villas-hero-v2__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(248,245,239,0.96) 0%, rgba(248,245,239,0.82) 12%, rgba(248,245,239,0.34) 26%, rgba(248,245,239,0) 46%); } .villas-hero-v2__copy { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 46rem; } .villas-hero-v2__copy .ck-display { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4rem); } .villas-hero-v2 .ck-scrollcue { display: flex; } } /* Wordmark: the community name is long — keep it tight + single-line. */ .ck-wordmark { white-space: nowrap; } /* --- SITE PLAN section (golf-adjacency proof) ----------------------- */ .villas-plan .ck-sechead { max-width: 60rem; margin-inline: auto; text-align: center; } .villas-plan .ck-sechead .ck-overline { justify-content: center; display: inline-flex; } .villas-plan .ck-sechead .ck-lead { margin-inline: auto; margin-top: 1.1rem; } .villas-plan__figure { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 80rem; } .villas-plan__img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--ck-hairline); border-radius: var(--ck-radius-lg); box-shadow: var(--ck-shadow-lift); } /* --- GALLERY ------------------------------------------------------- * The sketches are landscape; the base gallery frame is a tall arch. * Relax to a gentle-arched 4:3 so the drawings read whole, on a white * mat, and drop the caption scrim to a soft warm wash (light theme). */ .villas-gallery { align-items: start; } /* let a taller (portrait) frame extend down */ .villas-gallery .ck-frame { aspect-ratio: 4 / 3; border-start-start-radius: 6rem; border-start-end-radius: 6rem; background: var(--villas-surface); box-shadow: var(--ck-shadow); } /* Portrait sketch (courtyard, ~3:4) gets a tall frame so it shows whole, cover-cropped, never distorted. */ .villas-gallery .ck-frame--tall { aspect-ratio: 3 / 4; } .villas-gallery .ck-frame__cap { background: linear-gradient(transparent, rgba(248,245,239,0.92)); } .villas-gallery .ck-frame__cap .ck-h4 { color: var(--villas-ink); } /* --- SPLIT media (entrance + lifestyle) ---------------------------- * Landscape sketches into a 4:3 box; per-image focal nudge. */ .villas-split .ck-split__media { aspect-ratio: 4 / 3; box-shadow: var(--ck-shadow); } .villas-shot--pool { background-position: center 62% !important; } .villas-shot--entrance { background-position: center 46% !important; } /* --- Amenity / platform cards: keep them clean white on the light * canvas (base mixes surface+background; nudge toward pure white). */ .brand-villas .ck-card { background: color-mix(in srgb, var(--villas-surface) 96%, var(--villas-blue)); box-shadow: var(--ck-shadow); } /* --- Stat + stepper numerals in navy (base leaves stat-num to inherit). */ .brand-villas .ck-stat-num { color: var(--villas-ink); } /* --- Two restrained terracotta notes (the roof-tile warmth) --------- */ .brand-villas .ck-hero .ck-scrollcue::after { background: linear-gradient(var(--villas-terracotta), transparent); } .brand-villas .ck-stepper__legend li.is-active::before { background: var(--villas-terracotta); } /* --- Location strip: a compact figure row under the hero ------------ */ .villas-figrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ck-gutter); border-block: 1px solid var(--ck-hairline); padding-block: clamp(1.5rem, 3vw, 2.5rem); } .villas-figrow .fig { text-align: left; } .villas-figrow .fig .k { font-family: var(--ctx-font-display); font-weight: 500; font-size: clamp(1.75rem, 1rem + 3vw, 3rem); line-height: 1; letter-spacing: var(--ctx-tracking-tight); color: var(--villas-ink); } .villas-figrow .fig .l { margin-top: 0.5rem; font-size: var(--ctx-type-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--villas-muted); } @media (max-width: 720px) { .villas-figrow { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem,4vw,2rem); } } /* --- Estimate flag on unit sizes (honest caveat) -------------------- */ .villas-estimate { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.25rem; padding: .4em .8em; border: 1px solid var(--ck-hairline); border-radius: var(--ck-radius-pill); font-size: var(--ctx-type-caption); color: var(--villas-muted); } .villas-estimate::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--villas-terracotta); } /* --- Footer legal / image notice ------------------------------------ */ .villas-note { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--ck-hairline); max-width: 96ch; font-size: var(--ctx-type-caption); line-height: 1.65; color: var(--villas-muted); } .villas-note strong { color: color-mix(in srgb, var(--villas-ink) 80%, transparent); } .villas-note a { color: var(--villas-blue); } /* Powered-by banner — promoted from a small inline footnote to its own noticeable, clickable row (Ricardo: these sites are also exposure/lead-gen for Creytix itself — other businesses seeing this should notice it). */ .villas-powered-banner { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; padding: 1.1rem 1.4rem; border-radius: 14px; background: linear-gradient(160deg, #0c4067, #06263f); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .villas-powered-banner:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--villas-blue) 65%, transparent); } .villas-powered-banner__mark { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--villas-blue); color: #fff; font-family: var(--ctx-font-display); font-weight: 600; font-size: 1.3rem; } .villas-powered-banner__copy { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .villas-powered-banner__copy strong { color: #fff; font-size: 1rem; } .villas-powered-banner__copy span { color: color-mix(in srgb, #fff 78%, transparent); font-size: .85rem; } .villas-powered-banner__arrow { margin-left: auto; flex: none; color: #fff; font-size: 1.2rem; transition: transform .25s ease; } .villas-powered-banner:hover .villas-powered-banner__arrow { transform: translateX(4px); } @media (max-width: 560px) { .villas-powered-banner__copy span { display: none; } } /* ---------------------------------------------------------------------------- * Sign-up banner — Ricardo: make the CTA a BLUE banner (Aegean), white type, * contrasting button. Scoped to the Villas page (this sheet only loads here). * -------------------------------------------------------------------------- */ /* CRITICAL: paint the navy DIRECTLY on the section. The base template's .ck-cta__bg child uses z-index:-1, which on mobile falls BEHIND the opaque page background (body #F8F5EF) → the banner rendered WHITE on the phone and the white heading/overline/lead were invisible (desktop happened to paint it, hiding the bug). Setting the background on .ck-cta itself is bulletproof. */ .brand-villas .ck-cta { background: radial-gradient(100% 130% at 50% 130%, #04273f, transparent 62%), linear-gradient(160deg, #0c4067 0%, #06263f 100%); border-block: 1px solid rgba(255,255,255,.08); } .ck-cta__bg { background: radial-gradient(100% 130% at 50% 130%, #04273f, transparent 62%), linear-gradient(160deg, #0c4067 0%, #06263f 100%); border-block: none; } .ck-cta, .ck-cta .ck-display, .ck-cta .ck-overline { color: #fff; } .ck-cta .ck-overline { color: color-mix(in srgb, #fff 90%, transparent); } .ck-cta .ck-display { text-shadow: 0 2px 24px rgba(3,22,40,.35); font-weight: 600; } /* Long single-word titles (e.g. "Estacionamiento") must wrap inside cards. */ .brand-villas .ck-card .ck-h4 { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .brand-villas .ck-card--sm .ck-h4 { font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.3rem); } .ck-cta .ck-accent, .ck-cta .ck-emph { color: #fff; text-decoration-color: color-mix(in srgb,#fff 55%, transparent); } .ck-cta .ck-lead { color: color-mix(in srgb, #fff 88%, transparent); } .ck-cta .ck-btn--primary { background: var(--villas-blue); color: #fff; border-color: color-mix(in srgb,#fff 38%, transparent); box-shadow: 0 10px 26px -12px rgba(0,0,0,.6); } .ck-cta .ck-btn--primary:hover { background: color-mix(in srgb, var(--villas-blue) 86%, #fff); } .ck-cta .ck-btn--ghost { color: #fff; border-color: color-mix(in srgb,#fff 60%, transparent); } .ck-cta .ck-btn--ghost:hover { background: color-mix(in srgb,#fff 14%, transparent); } /* ---------------------------------------------------------------------------- * Marketplace banner — "se vende / se renta", links to the public market. * -------------------------------------------------------------------------- */ .villas-market { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; text-decoration: none; color: inherit; padding: clamp(1.6rem, 1.2rem + 2.5vw, 3rem); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--villas-blue) 5%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--villas-blue) 18%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -28px color-mix(in srgb, var(--villas-blue) 60%, transparent); transition: transform .35s ease, box-shadow .35s ease; } @media (hover:hover){ .villas-market:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -30px color-mix(in srgb, var(--villas-blue) 65%, transparent); } } .villas-market__intro .ck-btn { margin-top: 1.5rem; } .villas-market__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .villas-market__tile { display: flex; flex-direction: column; gap: .3rem; align-items: center; justify-content: center; padding: clamp(1.1rem, .8rem + 1.5vw, 2rem) 1rem; border-radius: 14px; background: color-mix(in srgb, var(--villas-blue) 8%, #fff); border: 1px solid color-mix(in srgb, var(--villas-blue) 14%, transparent); } .villas-market__count { font-family: var(--ctx-font-display); font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem); font-weight: 600; line-height: 1; color: var(--villas-blue); } .villas-market__label { font-size: var(--ctx-type-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--villas-muted); } @media (max-width: 640px){ .villas-market { grid-template-columns: 1fr; } } /* Loading state while market-teaser.js fetches live counts (cleared on success/failure alike — see clearBusy() in market-teaser.js). */ .villas-market__tiles[aria-busy="true"] .villas-market__count { display: inline-block; min-width: 2.5ch; border-radius: 6px; color: transparent; background: linear-gradient(90deg, color-mix(in srgb, var(--villas-blue) 10%, #fff) 25%, color-mix(in srgb, var(--villas-blue) 18%, #fff) 37%, color-mix(in srgb, var(--villas-blue) 10%, #fff) 63%); background-size: 400% 100%; animation: villas-market-skeleton 1.4s ease-in-out infinite; } @keyframes villas-market-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .villas-market__tiles[aria-busy="true"] .villas-market__count { animation: none; opacity: .5; } } /* ---------------------------------------------------------------------------- * Contrast hardening — WCAG AA audit (2026-07-27). Muted secondary text that * fell below 4.5:1 on the warm-white canvas, bumped to darker slates (~7-8:1). * -------------------------------------------------------------------------- */ .brand-villas .ck-stepper__legend li, .brand-villas .ck-stepper__legend li span { color: #2b4353; } .brand-villas .ck-stepper__hint, .brand-villas .ck-footer h5, .brand-villas .ck-footer__base, .brand-villas .ck-footer__base span { color: #3f5666; } .brand-villas .ck-footer__brand .ck-body { color: #3f5666 !important; } /* beat inline 60% */ /* Marquee band — was a faint ~4:1; make the community words clearly legible. */ .brand-villas .ck-marquee__item { color: #2b4353; opacity: 1; } /* ---------------------------------------------------------------------------- * Creytix platform — cost-transparency section (added per Ricardo). * -------------------------------------------------------------------------- */ .villas-creytix .ck-sechead { max-width: 62rem; margin-inline: auto; text-align: center; } .villas-creytix .ck-sechead .ck-overline { display: inline-flex; justify-content: center; } .villas-creytix .ck-sechead .ck-lead { margin-inline: auto; margin-top: 1.1rem; } /* Real, cited competitor-pricing comparison — a row list, not cards, so it reads like a rate table (Koti/AdminCondo/ComunidadFeliz-Neivor/Creytix), not a 3-tier upsell chooser. */ .villas-pricetable { display: flex; flex-direction: column; gap: .65rem; margin: clamp(2rem,4vw,3rem) 0 1.25rem; max-width: 46rem; margin-inline: auto; } .villas-pricetable__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1.5rem; padding: 1.1rem 1.5rem; border-radius: 14px; background: var(--villas-surface); border: 1px solid var(--ck-hairline); } .villas-pricetable__name { font-family: var(--ctx-font-display); font-size: 1.15rem; font-weight: 600; color: var(--villas-ink); grid-column: 1; } .villas-pricetable__detail { font-size: .85rem; color: #3f5666; grid-column: 1; } .villas-pricetable__price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--ctx-font-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 600; color: var(--villas-ink); } .villas-pricetable__price small { display: block; font-family: inherit; font-size: .7rem; font-weight: 400; letter-spacing: .04em; color: #3f5666; margin-top: .15rem; } .villas-pricetable__row--muted { background: color-mix(in srgb, var(--villas-ink) 4%, #fff); } .villas-pricetable__row--muted .villas-pricetable__price { font-size: .95rem; font-style: italic; color: #3f5666; } .villas-pricetable__row--feature { background: linear-gradient(160deg, #0c4067, #06263f); border-color: transparent; box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--villas-blue) 60%, transparent); } .villas-pricetable__row--feature .villas-pricetable__name, .villas-pricetable__row--feature .villas-pricetable__price { color: #fff; } .villas-pricetable__row--feature .villas-pricetable__detail { color: color-mix(in srgb, #fff 82%, transparent); } .villas-pricetable__row--feature .villas-pricetable__price small { color: color-mix(in srgb, #fff 75%, transparent); } /* Discounted row: name+detail span 2 lines (residents free / comité level), so the price column needs its own row-span + list/now price stack. */ .villas-pricetable__row--discounted { grid-template-columns: 1fr auto; align-items: start; padding-block: 1.3rem; } .villas-pricetable__row--discounted .villas-pricetable__detail { line-height: 1.5; } .villas-pricetable__row--discounted .villas-pricetable__price { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; } /* .was starts as the plain, only-shown price (no strikethrough) — a code reveal (JS toggles .is-code-applied on the price container) is what demotes it. */ .villas-pricetable__was { font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 600; color: #fff; transition: font-size .25s ease, opacity .25s ease, color .25s ease; } .villas-pricetable__was small { display: block; font-size: .7rem; font-weight: 400; letter-spacing: .04em; color: color-mix(in srgb, #fff 75%, transparent); margin-top: .15rem; } .villas-pricetable__price.is-code-applied .villas-pricetable__was { font-size: .95rem; font-weight: 400; text-decoration: line-through; color: color-mix(in srgb, #fff 55%, transparent); } .villas-pricetable__now { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 600; color: #fff; } .villas-pricetable__now small { display: block; font-size: .7rem; font-weight: 400; letter-spacing: .02em; color: color-mix(in srgb, #fff 78%, transparent); margin-top: .15rem; } .villas-pricetable__commit { text-align: center; max-width: 56rem; margin: 1.25rem auto 0; color: #3f5666; } /* Coupon-code reveal — client-side only, no real checkout exists yet (see the honest-limits note in CREYTIX_HOA_CONDOMINIO_PLATFORM.md): this confirms the price, it does not process a payment or redeem anything server-side. */ .villas-coupon { grid-column: 1 / -1; margin-top: .75rem; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, #fff 18%, transparent); } .villas-coupon__field { display: flex; gap: .6rem; flex-wrap: wrap; } .villas-coupon__field input { flex: 1 1 14rem; min-width: 10rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, #fff 30%, transparent); background: color-mix(in srgb, #fff 10%, transparent); color: #fff; font: inherit; font-size: .9rem; } .villas-coupon__field input::placeholder { color: color-mix(in srgb, #fff 55%, transparent); } .villas-coupon__field input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .villas-coupon__field .ck-btn { min-height: 2.75rem; border-color: color-mix(in srgb, #fff 40%, transparent); color: #fff; } .villas-coupon__field .ck-btn:hover { border-color: #fff; color: #fff; } .villas-coupon__msg { margin: .6rem 0 0; font-size: .85rem; font-weight: 600; min-height: 1.2em; } .villas-coupon__msg.is-success { color: #8fe3b0; } .villas-coupon__msg.is-error { color: #ffb4a8; } .villas-coupon__note { margin: .35rem 0 0; font-size: .75rem; color: color-mix(in srgb, #fff 65%, transparent); } @media (max-width: 560px) { .villas-pricetable__row { grid-template-columns: 1fr; text-align: left; } .villas-pricetable__price { grid-column: 1; grid-row: auto; text-align: left; margin-top: .4rem; } .villas-pricetable__row--discounted .villas-pricetable__price { align-items: flex-start; } .villas-coupon { grid-column: 1; } } /* --------------------------------------------------------------------------- * Screen-reader-only utility (labels a visually-hidden