/* Avelon Spaces - consolidated CSS. Original desktop/mobile declarations preserved in order. */ /* ===================== index.php ===================== */ body.av-page--index { --pic-blue: #073f69; --pic-green: #175f45; --pic-gold: #95620d; --pic-purple: #38207e; --pic-rose: #8f2b30; --pic-ink: #142039; } body.av-page--index *, body.av-page--index *::before, body.av-page--index *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.av-page--index { margin: 0; font-family: "Satoshi", sans-serif !important; overflow-x: clip; } body.av-page--index a { text-decoration: none; } body.av-page--index button { font: inherit; } body.av-page--index img, body.av-page--index svg { max-width: 100%; } body.av-page--index .pic-adv-section { position: relative; width: 100%; overflow: hidden; padding: 50px 0 38px; background: #dedbd4; } body.av-page--index .pic-adv-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; } body.av-page--index .pic-adv-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: center; transform: translate(-50%, -50%); pointer-events: none; } body.av-page--index .pic-adv-overlay { position: absolute; inset: 0; background: rgba(8, 12, 11, .40); z-index: 1; pointer-events: none; } body.av-page--index .pic-adv-container { position: relative; z-index: 2; width: calc(100% - 40px); max-width: 1050px; margin: 0 auto; } body.av-page--index .pic-adv-header { max-width: 850px; margin: 0 auto 28px; text-align: center; } body.av-page--index .pic-adv-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px auto 15px; } body.av-page--index .pic-adv-eyebrow span { display: block; flex: 0 0 55px; height: 1px; background: rgba(255, 255, 255, .65); } body.av-page--index .pic-adv-eyebrow p { margin: 0; color: rgba(255, 255, 255, .95); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 2.8px; } body.av-page--index .pic-adv-title { margin: 0; color: #fff; font-size: 50px; line-height: 1.04; font-weight: 500; letter-spacing: -1.4px; text-shadow: 0 3px 18px rgba(0, 0, 0, .16); } body.av-page--index .pic-adv-title strong { display: inline-block; margin-top: 5px; color: #ffcc6e; font-weight: 500; } body.av-page--index .pic-adv-start { margin-top: 22px; text-align: center; } body.av-page--index .pic-adv-start p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 4px; } body.av-page--index .pic-adv-start span { display: block; width: 48px; height: 2px; margin: 12px auto 0; background: #ca9c4c; } body.av-page--index .pic-adv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1050px; margin: 0 auto; } body.av-page--index .pic-adv-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; min-height: 0; height: 100%; padding: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .48); border-radius: 16px; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); opacity: 0; transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .7s ease, box-shadow .3s ease; } body.av-page--index .pic-adv-card:nth-child(odd) { transform: translateX(-140px); } body.av-page--index .pic-adv-card:nth-child(even) { transform: translateX(140px); } body.av-page--index .pic-adv-card.pic-adv-visible { transform: translateX(0); opacity: 1; } body.av-page--index .pic-adv-card.pic-adv-visible:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 18px 38px rgba(0, 0, 0, .13); border-color: rgba(255, 255, 255, .72); } body.av-page--index .pic-adv-card::before { content: ""; position: absolute; top: -30%; left: -35%; width: 18%; height: 160%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); transform: rotate(16deg) translateX(-240%); opacity: 0; pointer-events: none; z-index: 1; } body.av-page--index .pic-adv-card.pic-adv-visible::before { animation: picAdvCardShine 1.25s ease .25s 1; } @keyframes picAdvCardShine { 0% { transform: rotate(16deg) translateX(-240%); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(16deg) translateX(700%); opacity: 0; } } body.av-page--index .pic-adv-blue { color: var(--pic-blue); background: linear-gradient(105deg, rgba(236, 247, 253, .94), rgba(220, 239, 249, .9)); } body.av-page--index .pic-adv-green { color: var(--pic-green); background: linear-gradient(105deg, rgba(237, 248, 241, .94), rgba(223, 241, 230, .9)); } body.av-page--index .pic-adv-gold { color: var(--pic-gold); background: linear-gradient(105deg, rgba(255, 247, 234, .95), rgba(248, 236, 214, .91)); } body.av-page--index .pic-adv-peach { color: var(--pic-gold); background: linear-gradient(105deg, rgba(255, 241, 227, .96), rgba(249, 232, 216, .94)); } body.av-page--index .pic-adv-rose { color: var(--pic-rose); background: linear-gradient(105deg, rgba(255, 240, 240, .96), rgba(249, 229, 229, .94)); } body.av-page--index .pic-adv-purple { color: var(--pic-purple); background: linear-gradient(105deg, rgba(245, 242, 254, .95), rgba(232, 227, 250, .91)); } body.av-page--index .pic-adv-image-wrap { position: relative; z-index: 2; width: 100%; height: auto; aspect-ratio: 16 / 10; flex: 0 0 auto; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .35); } body.av-page--index .pic-adv-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } body.av-page--index .pic-adv-card:hover .pic-adv-image { transform: scale(1.035); } body.av-page--index .pic-adv-content { flex: 1 1 auto; width: 100%; padding: 18px 2px 10px; position: relative; z-index: 2; min-width: 0; opacity: 0; transform: translateY(18px); transition: transform .75s cubic-bezier(.16, 1, .3, 1) .16s, opacity .6s ease .16s; } body.av-page--index .pic-adv-card.pic-adv-visible .pic-adv-content { opacity: 1; transform: translateY(0); } body.av-page--index .pic-adv-offer-label { display: inline-block; margin-bottom: 8px; padding: 5px 11px; border-radius: 9px; background: rgba(255, 255, 255, .55); color: currentColor; font-size: 11px; font-weight: 700; letter-spacing: .4px; } body.av-page--index .pic-adv-content h3 { margin: 0 0 10px; color: var(--pic-ink); font-size: 22px; line-height: 1.08; font-weight: 500; font-family: "Satoshi", sans-serif !important; letter-spacing: 0.1px; overflow-wrap: break-word; } body.av-page--index .pic-adv-content p { margin: 0; color: #353a3d; font-size: 15px; line-height: 1.38; font-weight: 400; overflow-wrap: break-word; } body.av-page--index .pic-adv-arrow { position: absolute; right: 16px; bottom: 16px; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pic-gold); opacity: 0; transform: translateX(-12px) scale(.75); transition: transform .65s cubic-bezier(.16, 1, .3, 1) .27s, opacity .5s ease .27s, box-shadow .3s ease; } body.av-page--index .pic-adv-card.pic-adv-visible .pic-adv-arrow { opacity: 1; transform: translateX(0) scale(1); } body.av-page--index .pic-adv-card:hover .pic-adv-arrow { transform: translateX(3px) scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, .16); } body.av-page--index .pic-adv-blue .pic-adv-arrow { background: var(--pic-blue); } body.av-page--index .pic-adv-green .pic-adv-arrow { background: var(--pic-green); } body.av-page--index .pic-adv-purple .pic-adv-arrow { background: var(--pic-purple); } body.av-page--index .pic-adv-rose .pic-adv-arrow { background: var(--pic-rose); } body.av-page--index .pic-adv-arrow svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; } body.av-page--index .pic-adv-card:hover .pic-adv-arrow svg { transform: translateX(2px); } body.av-page--index .pic-adv-bottom { max-width: 980px; margin: 21px auto 0; padding-bottom: 40px; } body.av-page--index .pic-adv-skyline { display: flex; align-items: flex-end; opacity: .65; } body.av-page--index .pic-adv-skyline>span { flex: 1; height: 1px; background: rgba(221, 177, 99, .62); } body.av-page--index .pic-adv-skyline svg { width: 58%; height: 50px; fill: none; stroke: #d7ad69; stroke-width: 1; } body.av-page--index .pic-adv-bottom-title { display: flex; align-items: center; justify-content: center; gap: 15px; } body.av-page--index .pic-adv-bottom-title span { width: 135px; height: 1px; background: rgba(255, 255, 255, .42); } body.av-page--index .pic-adv-bottom-title p { margin: 0; color: rgba(255, 255, 255, .92); font-size: 10px; line-height: 1.4; font-weight: 600; letter-spacing: 4px; white-space: nowrap; } @media (max-width:991px) { body.av-page--index .pic-adv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.av-page--index .pic-adv-section { padding: 44px 0 36px; } body.av-page--index .pic-adv-container { width: calc(100% - 30px); } body.av-page--index .pic-adv-title { font-size: 45px; } body.av-page--index .pic-adv-card { gap: 14px; padding: 12px; } body.av-page--index .pic-adv-image-wrap { height: auto; } body.av-page--index .pic-adv-content h3 { font-size: 26px; } body.av-page--index .pic-adv-content p { font-size: 14px; } body.av-page--index .pic-adv-arrow { width: 42px; height: 42px; } } @media (max-width:767px) { body.av-page--index .pic-adv-cards { grid-template-columns: minmax(0, 1fr); max-width: 480px; } body.av-page--index .pic-adv-section { padding: 32px 0 28px; } body.av-page--index .pic-adv-container { width: calc(100% - 22px); } body.av-page--index .pic-adv-header { margin-bottom: 22px; } body.av-page--index .pic-adv-eyebrow { gap: 7px; margin-bottom: 12px; } body.av-page--index .pic-adv-eyebrow span { flex-basis: 18px; } body.av-page--index .pic-adv-eyebrow p { font-size: 8px; line-height: 1.45; letter-spacing: 1.4px; } body.av-page--index .pic-adv-title { font-size: 36px; line-height: 1.04; letter-spacing: -.8px; } body.av-page--index .pic-adv-start { margin-top: 17px; } body.av-page--index .pic-adv-start p { font-size: 9px; letter-spacing: 2.2px; } body.av-page--index .pic-adv-start span { width: 40px; margin-top: 9px; } body.av-page--index .pic-adv-cards { gap: 10px; } body.av-page--index .pic-adv-card { gap: 10px; padding: 12px; border-radius: 14px; } body.av-page--index .pic-adv-card:nth-child(odd) { transform: translateX(-70px); } body.av-page--index .pic-adv-card:nth-child(even) { transform: translateX(70px); } body.av-page--index .pic-adv-card.pic-adv-visible { transform: translateX(0); } body.av-page--index .pic-adv-image-wrap { height: auto; border-radius: 9px; } body.av-page--index .pic-adv-offer-label { font-size: 8px; padding: 4px 7px; margin-bottom: 5px; } body.av-page--index .pic-adv-content h3 { font-size: 21px; line-height: 1.08; letter-spacing: -.35px; } body.av-page--index .pic-adv-content p { font-size: 11px; line-height: 1.4; } body.av-page--index .pic-adv-arrow { width: 35px; height: 35px; } body.av-page--index .pic-adv-arrow svg { width: 18px; height: 18px; } body.av-page--index .pic-adv-bottom { margin-top: 16px; } body.av-page--index .pic-adv-skyline svg { width: 78%; height: 36px; } body.av-page--index .pic-adv-bottom-title { gap: 8px; } body.av-page--index .pic-adv-bottom-title span { width: 32px; } body.av-page--index .pic-adv-bottom-title p { font-size: 7px; letter-spacing: 2.2px; } } @media (max-width:430px) { body.av-page--index .pic-adv-container { width: calc(100% - 16px); } body.av-page--index .pic-adv-eyebrow p { font-size: 7px; letter-spacing: 1px; } body.av-page--index .pic-adv-title { font-size: 31px; line-height: 1.06; } body.av-page--index .pic-adv-start p { font-size: 8px; letter-spacing: 1.7px; } body.av-page--index .pic-adv-card { gap: 8px; padding: 12px; border-radius: 12px; } body.av-page--index .pic-adv-image-wrap { height: auto; } body.av-page--index .pic-adv-offer-label { font-size: 7px; letter-spacing: 0; } body.av-page--index .pic-adv-content h3 { font-size: 18px; } body.av-page--index .pic-adv-content p { font-size: 9.5px; line-height: 1.38; } body.av-page--index .pic-adv-arrow { width: 31px; height: 31px; } body.av-page--index .pic-adv-arrow svg { width: 16px; height: 16px; } } @media (max-width:340px) { body.av-page--index .pic-adv-card { gap: 6px; padding: 12px; } body.av-page--index .pic-adv-content h3 { font-size: 16px; } body.av-page--index .pic-adv-content p { font-size: 9px; } body.av-page--index .pic-adv-arrow { width: 27px; height: 27px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } body.av-page--index .pic-adv-card { opacity: 1; transform: none; } body.av-page--index .pic-adv-content, body.av-page--index .pic-adv-arrow { opacity: 1; transform: none; } body.av-page--index .pic-adv-card::before { display: none; } } @media (min-width: 768px) { body.av-page--index .pic-adv-arrow { display: none; } } @media (max-width: 767px) { body.av-page--index .pic-adv-cards { display: flex; flex-direction: column; max-width: 980px; } body.av-page--index .pic-adv-card { display: grid; flex-direction: initial; align-items: center; height: auto; } body.av-page--index .pic-adv-image-wrap { aspect-ratio: auto; flex: initial; } body.av-page--index .pic-adv-content { flex: initial; padding: 0; } body.av-page--index .pic-adv-arrow { display: flex; position: relative; right: auto; bottom: auto; } } @media (max-width:767px) { body.av-page--index .pic-adv-section { padding: 32px 0 28px; } body.av-page--index .pic-adv-container { width: calc(100% - 22px); } body.av-page--index .pic-adv-header { margin-bottom: 22px; } body.av-page--index .pic-adv-eyebrow { gap: 7px; margin-bottom: 12px; } body.av-page--index .pic-adv-eyebrow span { flex-basis: 18px; } body.av-page--index .pic-adv-eyebrow p { font-size: 8px; line-height: 1.45; letter-spacing: 1.4px; } body.av-page--index .pic-adv-title { font-size: 36px; line-height: 1.04; letter-spacing: -.8px; } body.av-page--index .pic-adv-start { margin-top: 17px; } body.av-page--index .pic-adv-start p { font-size: 9px; letter-spacing: 2.2px; } body.av-page--index .pic-adv-start span { width: 40px; margin-top: 9px; } body.av-page--index .pic-adv-cards { gap: 10px; } body.av-page--index .pic-adv-card { grid-template-columns: minmax(0, 29%) minmax(0, 1fr) 37px; gap: 10px; min-height: 112px; padding: 13px 11px; border-radius: 14px; } body.av-page--index .pic-adv-card:nth-child(odd) { transform: translateX(-70px); } body.av-page--index .pic-adv-card:nth-child(even) { transform: translateX(70px); } body.av-page--index .pic-adv-card.pic-adv-visible { transform: translateX(0); } body.av-page--index .pic-adv-image-wrap { height: 90px; border-radius: 9px; } body.av-page--index .pic-adv-offer-label { font-size: 8px; padding: 4px 7px; margin-bottom: 5px; } body.av-page--index .pic-adv-content h3 { font-size: 21px; line-height: 1.08; letter-spacing: -.35px; } body.av-page--index .pic-adv-content p { font-size: 11px; line-height: 1.4; } body.av-page--index .pic-adv-arrow { width: 35px; height: 35px; } body.av-page--index .pic-adv-arrow svg { width: 18px; height: 18px; } body.av-page--index .pic-adv-bottom { margin-top: 16px; } body.av-page--index .pic-adv-skyline svg { width: 78%; height: 36px; } body.av-page--index .pic-adv-bottom-title { gap: 8px; } body.av-page--index .pic-adv-bottom-title span { width: 32px; } body.av-page--index .pic-adv-bottom-title p { font-size: 7px; letter-spacing: 2.2px; } } @media (max-width:430px) { body.av-page--index .pic-adv-container { width: calc(100% - 16px); } body.av-page--index .pic-adv-eyebrow p { font-size: 7px; letter-spacing: 1px; } body.av-page--index .pic-adv-title { font-size: 31px; line-height: 1.06; } body.av-page--index .pic-adv-start p { font-size: 8px; letter-spacing: 1.7px; } body.av-page--index .pic-adv-card { grid-template-columns: minmax(0, 28%) minmax(0, 1fr) 32px; gap: 8px; min-height: 105px; padding: 11px 9px; border-radius: 12px; } body.av-page--index .pic-adv-image-wrap { height: 78px; } body.av-page--index .pic-adv-offer-label { font-size: 7px; letter-spacing: 0; } body.av-page--index .pic-adv-content h3 { font-size: 18px; } body.av-page--index .pic-adv-content p { font-size: 9.5px; line-height: 1.38; } body.av-page--index .pic-adv-arrow { width: 31px; height: 31px; } body.av-page--index .pic-adv-arrow svg { width: 16px; height: 16px; } } @media (max-width:340px) { body.av-page--index .pic-adv-card { grid-template-columns: minmax(0, 27%) minmax(0, 1fr) 28px; gap: 6px; padding: 9px 7px; } body.av-page--index .pic-adv-content h3 { font-size: 16px; } body.av-page--index .pic-adv-content p { font-size: 9px; } body.av-page--index .pic-adv-arrow { width: 27px; height: 27px; } } /* ===================== property.php ===================== */ /* ============================================ AVELON SPACES - PROPERTY PAGE Consolidated CSS ============================================ */ body.av-page--property { --avs-navy: #142039; --avs-gold: #b78232; --avs-muted: #687183; --avs-cream: #f8f5ef; --avs-border: #e9e5df; } body.av-page--property *, body.av-page--property *::before, body.av-page--property *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.av-page--property { margin: 0; font-family: "Satoshi", sans-serif; color: var(--avs-navy); } body.av-page--property button, body.av-page--property input { font: inherit; } body.av-page--property img, body.av-page--property svg { max-width: 100%; } body.av-page--property .avs-page a { text-decoration: none; } body.av-page--property .avs-container { width: min(1320px, calc(100% - 40px)); margin-inline: auto; } /* ============================================ HEADER - EXISTING HEADER.PHP STYLES ============================================ */ /* ============================================ 1. PROPERTY HERO ============================================ */ body.av-page--property .avs-hero { min-height: 690px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(8, 17, 30, .85), rgba(8, 17, 30, .46)), url("https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=2200&q=85") center / cover no-repeat; } body.av-page--property .avs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: center; gap: 65px; padding-block: 75px; } body.av-page--property .avs-hero-content { color: #fff; } body.av-page--property .avs-hero-label { margin: 0 0 18px; color: #eac58b; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } body.av-page--property .avs-hero-title { margin: 0 0 20px; color: #fff; font-size: clamp(43px, 5vw, 70px); font-weight: 500; line-height: 1.05; } body.av-page--property .avs-hero-description { max-width: 470px; margin: 0; color: #e8ebef; font-size: 18px; line-height: 1.6; } body.av-page--property .avs-hero-line { width: 55px; height: 2px; margin: 28px 0; background: var(--avs-gold); } body.av-page--property .avs-hero-facts { display: flex; flex-wrap: wrap; gap: 20px; } body.av-page--property .avs-hero-fact { padding-right: 20px; border-right: 1px solid rgba(255, 255, 255, .4); } body.av-page--property .avs-hero-fact:last-child { padding-right: 0; border-right: 0; } body.av-page--property .avs-hero-fact strong { display: block; font-size: 16px; font-weight: 600; } body.av-page--property .avs-hero-fact span { display: block; margin-top: 5px; color: #dce0e7; font-size: 13px; } /* Premium hero enquiry */ body.av-page--property .avs-hero-form { padding: 33px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 20px 55px rgba(0, 0, 0, .15); } body.av-page--property .avs-hero-form h2 { margin: 0 0 9px; color: var(--avs-navy); font-size: 25px; font-weight: 700; } body.av-page--property .avs-hero-form>p { margin: 0 0 23px; color: var(--avs-muted); font-size: 13px; line-height: 1.6; } body.av-page--property .avs-form-field { margin-bottom: 16px; } body.av-page--property .avs-form-field label { display: block; margin-bottom: 7px; color: var(--avs-navy); font-size: 12px; font-weight: 700; } body.av-page--property .avs-form-field input { display: block; width: 100%; height: 46px; padding: 0 13px; border: 1px solid #dfe2e8; border-radius: 9px; background: #fff; color: var(--avs-navy); font-size: 14px; } body.av-page--property .avs-form-field input:focus { outline: 2px solid rgba(183, 130, 50, .2); border-color: var(--avs-gold); } body.av-page--property .avs-form-submit { display: block; width: 100%; min-height: 48px; margin-top: 5px; border: 0; border-radius: 9px; background: var(--avs-gold); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .3s, transform .3s; } body.av-page--property .avs-form-submit:hover { background: #97661d; transform: translateY(-2px); } body.av-page--property .avs-form-note { margin: 13px 0 0; color: #747d8a; font-size: 11px; line-height: 1.5; } /* ============================================ 2. DISCOVER AVELON SPACES ============================================ */ /* ===== MAIN SECTION ===== */ body.av-page--property .avs-story { --story-navy: #142039; --story-gold: #b78232; --story-muted: #687183; padding: 75px 0; background: #ffffff; font-family: "Satoshi", sans-serif; } body.av-page--property .avs-story, body.av-page--property .avs-story * { box-sizing: border-box; } body.av-page--property .avs-story-container { width: min(1350px, calc(100% - 48px)); margin: 0 auto; } /* ===== ORIGINAL TWO-COLUMN LAYOUT ===== */ body.av-page--property .avs-story-layout { display: grid; grid-template-columns: 52% minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 25px 35px; align-items: center; } /* ===== LARGE IMAGE - LEFT ===== */ body.av-page--property .avs-story-main { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / 3; height: 520px; overflow: hidden; border-radius: 30px; } body.av-page--property .avs-story-main img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } body.av-page--property .avs-story-main:hover img { transform: scale(1.035); } /* ===== CONTENT - TOP RIGHT ===== */ body.av-page--property .avs-story-content { grid-column: 2; grid-row: 1; min-width: 0; align-self: center; } body.av-page--property .avs-story-label { margin: 0 0 12px; color: var(--story-gold); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } body.av-page--property .avs-story-heading { margin: 0 0 14px; color: var(--story-navy); font-size: clamp(23px, 3vw, 35px); font-weight: 600; line-height: 1.3; letter-spacing: -0.4px; } body.av-page--property .avs-story-description { margin: 0; color: var(--story-muted); font-size: 16px; line-height: 1.7; } /* ===== EXISTING COUNTER DESIGN ===== */ body.av-page--property .avs-story-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; } body.av-page--property .avs-story-stat { min-width: 0; } body.av-page--property .avs-story-number { display: block; color: var(--story-navy); font-size: clamp(30px, 3.6vw, 45px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } body.av-page--property .avs-story-stat p { margin: 5px 0 0; color: var(--story-muted); font-size: 16px; line-height: 1.3; } /* ============================================= SMALL GIFT IMAGES - FRONT OF MAIN PHOTO Native placement retained; JS controls motion ============================================= */ body.av-page--property .avs-story-gallery { position: relative; z-index: 10; grid-column: 2; grid-row: 2; min-width: 0; margin: 0 0 30px -70px; isolation: isolate; } body.av-page--property .avs-story-slider { position: relative; z-index: 11; width: 100%; overflow: hidden; border-radius: 15px; } body.av-page--property .avs-story-track { display: flex; width: max-content; max-width: none; gap: 0; will-change: transform; } body.av-page--property .avs-story-slidegroup { display: flex; align-items: stretch; flex: 0 0 auto; gap: 10px; padding-right: 10px; } body.av-page--property .avs-story-thumb { flex: 0 0 128px; width: 128px; height: 136px; padding: 5px; overflow: hidden; border: 1px solid #eee8df; border-radius: 15px; background: #fff; box-shadow: 0 5px 14px rgba(20, 32, 57, .07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } body.av-page--property .avs-story-thumb img { display: block; width: 100%; height: 101px; object-fit: cover; border-radius: 10px; transition: transform .35s ease; } body.av-page--property .avs-story-thumb span { display: block; margin-top: 6px; color: #142039; font-family: "Satoshi", sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; } body.av-page--property .avs-story-thumb:hover { transform: translateY(-3px); border-color: #b78232; box-shadow: 0 9px 20px rgba(20, 32, 57, .12); } body.av-page--property .avs-story-thumb:hover img { transform: scale(1.04); } /* ===== TABLET ===== */ @media (max-width: 1100px) { body.av-page--property .avs-story-layout { grid-template-columns: 46% minmax(0, 1fr); gap: 20px; } body.av-page--property .avs-story-gallery { margin-left: -35px; } body.av-page--property .avs-story-thumb { flex-basis: 115px; width: 115px; height: 125px; } body.av-page--property .avs-story-thumb img { height: 91px; } body.av-page--property .avs-story-number { font-size: 30px; } body.av-page--property .avs-story-stat p { font-size: 13px; } } @media (max-width: 991px) { body.av-page--property .avs-story { padding: 55px 0; } body.av-page--property .avs-story-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 25px; } body.av-page--property .avs-story-main, body.av-page--property .avs-story-content, body.av-page--property .avs-story-gallery { grid-column: 1; grid-row: auto; } body.av-page--property .avs-story-main { height: 430px; } body.av-page--property .avs-story-gallery { margin: 0; } body.av-page--property .avs-story-stats { max-width: 650px; } } /* ===== MOBILE ===== */ @media (max-width: 767px) { body.av-page--property .avs-story { padding: 45px 0; } body.av-page--property .avs-story-container { width: calc(100% - 30px); } body.av-page--property .avs-story-main { height: 330px; border-radius: 20px; } body.av-page--property .avs-story-heading { font-size: 24px; } body.av-page--property .avs-story-description { font-size: 13px; } body.av-page--property .avs-story-stats { gap: 8px; margin-top: 22px; } body.av-page--property .avs-story-stat { text-align: center; } body.av-page--property .avs-story-number { font-size: 31px; } body.av-page--property .avs-story-stat p { font-size: 10px; } body.av-page--property .avs-story-thumb { flex-basis: 100px; width: 100px; height: 112px; padding: 4px; border-radius: 11px; } body.av-page--property .avs-story-thumb img { height: 79px; border-radius: 8px; } body.av-page--property .avs-story-thumb span { margin-top: 5px; font-size: 10px; } body.av-page--property .avs-story-slidegroup { gap: 8px; padding-right: 8px; } } @media (max-width: 380px) { body.av-page--property .avs-story-main { height: 270px; } body.av-page--property .avs-story-heading { font-size: 22px; } body.av-page--property .avs-story-number { font-size: 27px; } body.av-page--property .avs-story-thumb { flex-basis: 88px; width: 88px; height: 105px; } body.av-page--property .avs-story-thumb img { height: 72px; } body.av-page--property .avs-story-thumb span { font-size: 9px; } } /* ============================================ 3. AVELON PERSPECTIVE STICKY LEFT + ICON INFORMATION CARDS ============================================ */ body.av-page--property .avs-perspective { padding: 95px 0; background: var(--avs-cream); } body.av-page--property .avs-perspective-grid { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: start; gap: 70px; } /* Left side remains sticky on desktop */ body.av-page--property .avs-perspective-left { position: sticky; top: 100px; align-self: start; padding-top: 18px; } body.av-page--property .avs-perspective-label { margin: 0 0 17px; color: var(--avs-gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } body.av-page--property .avs-perspective-title { margin: 0 0 14px; color: var(--story-navy); font-size: clamp(23px, 3vw, 35px); font-weight: 600; line-height: 1.3; letter-spacing: -0.4px; } body.av-page--property .avs-perspective-description { max-width: 415px; margin: 0; color: var(--avs-muted); font-size: 16px; line-height: 1.8; } body.av-page--property .avs-perspective-button { display: inline-flex; align-items: center; gap: 16px; margin-top: 29px; padding: 15px 24px; border-radius: 9px; background: var(--avs-navy); color: #fff; font-size: 14px; font-weight: 600; transition: background .3s, transform .3s; } body.av-page--property .avs-perspective-button:hover { transform: translateY(-3px); background: var(--avs-gold); color: #fff; } body.av-page--property .avs-perspective-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } /* Right-side cards */ body.av-page--property .avs-perspective-right { display: grid; gap: 15px; min-width: 0; } body.av-page--property .avs-perspective-card { position: relative; display: flex; align-items: flex-start; gap: 19px; min-height: 150px; padding: 26px; overflow: hidden; border: 1px solid #e8e1d6; border-radius: 17px; background: #fff; box-shadow: 0 5px 20px rgba(20, 32, 57, .035); transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .35s ease, box-shadow .35s ease, border-color .35s ease; } body.av-page--property .avs-perspective-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--avs-gold); transform: scaleY(0); transform-origin: bottom; transition: transform .35s ease; } /* Icon replaces numbers */ body.av-page--property .avs-perspective-icon { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #eadbc4; border-radius: 14px; background: #fff8ee; color: var(--avs-gold); transition: background .35s ease, color .35s ease, transform .35s ease; } body.av-page--property .avs-perspective-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } body.av-page--property .avs-perspective-copy { flex: 1; min-width: 0; } body.av-page--property .avs-perspective-card h3 { margin: 2px 0 8px; color: var(--avs-navy); font-size: 22px; font-weight: 500; line-height: 1.3; transition: color .3s; } body.av-page--property .avs-perspective-card p { margin: 0; color: var(--avs-muted); font-size: 16px; line-height: 1.65; } /* Information card hover */ body.av-page--property .avs-perspective-card:hover { transform: translateY(-5px); background: #fffdfa; border-color: #d8bd92; box-shadow: 0 18px 36px rgba(20, 32, 57, .10); } body.av-page--property .avs-perspective-card:hover::before { transform: scaleY(1); } body.av-page--property .avs-perspective-card:hover .avs-perspective-icon { transform: translateY(-3px); background: var(--avs-gold); color: #fff; } body.av-page--property .avs-perspective-card:hover h3 { color: #a5742b; } /* ============================================ 4. FEATURED PROPERTIES ============================================ */ body.av-page--property .avs-featured { padding: 85px 0; background: #fff; } body.av-page--property .avs-section-header { margin-bottom: 36px; text-align: center; } body.av-page--property .avs-section-title { margin: 0 0 10px; color: var(--avs-navy); font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.2; } body.av-page--property .avs-section-subtitle { margin: 0; color: var(--avs-muted); font-size: 16px; line-height: 1.6; } body.av-page--property .avs-featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } body.av-page--property .avs-featured-card { min-width: 0; overflow: hidden; border: 1px solid #ececf0; border-radius: 18px; background: #fff; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } body.av-page--property .avs-featured-image { height: 235px; overflow: hidden; } body.av-page--property .avs-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } body.av-page--property .avs-featured-content { padding: 19px 20px 21px; } body.av-page--property .avs-featured-content h3 { margin: 0 0 9px; color: var(--avs-navy); font-size: 18px; font-weight: 700; } body.av-page--property .avs-featured-location { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--avs-muted); font-size: 14px; line-height: 1.5; } body.av-page--property .avs-featured-location svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--avs-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Image card hover */ body.av-page--property .avs-featured-card:hover { transform: translateY(-7px); border-color: #d8bd92; box-shadow: 0 18px 36px rgba(20, 32, 57, .11); } body.av-page--property .avs-featured-card:hover img { transform: scale(1.055); } /* ============================================ 5. HOW WE HELP ============================================ */ body.av-page--property .avs-help { padding: 60px 0px 120px; background: #f6f6f6; } body.av-page--property .avs-help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } body.av-page--property .avs-help-card { min-width: 0; padding: 29px 25px; border: 1px solid #ececf0; border-radius: 17px; background: #fff; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } body.av-page--property .avs-help-icon { width: 47px; height: 47px; margin-bottom: 20px; color: var(--avs-gold); transition: transform .35s ease; } body.av-page--property .avs-help-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } body.av-page--property .avs-help-card h3 { margin: 0 0 10px; color: var(--avs-navy); font-size: 22px; font-weight: 500; } body.av-page--property .avs-help-card p { margin: 0; color: var(--avs-muted); font-size: 16px; line-height: 1.7; } body.av-page--property .avs-help-card:hover { transform: translateY(-7px); border-color: #d8bd92; box-shadow: 0 18px 36px rgba(20, 32, 57, .09); } body.av-page--property .avs-help-card:hover .avs-help-icon { transform: translateY(-3px) scale(1.06); } /* ============================================ RESPONSIVE - LAPTOP ============================================ */ @media (max-width: 1199px) { body.av-page--property .avs-hero-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 30px; } body.av-page--property .avs-perspective-grid { gap: 35px; } body.av-page--property .avs-featured-grid, body.av-page--property .avs-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================ RESPONSIVE - TABLET ============================================ */ @media (max-width: 991px) { body.av-page--property .avs-hero-grid, body.av-page--property .avs-perspective-grid { grid-template-columns: 1fr; } body.av-page--property .avs-hero-grid { gap: 35px; } body.av-page--property .avs-hero-form { width: 100%; max-width: 520px; } body.av-page--property .avs-perspective-left { position: static; padding-top: 0; } body.av-page--property .avs-perspective-right { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.av-page--property .avs-perspective-card { min-height: 200px; } } /* ============================================ RESPONSIVE - MOBILE ============================================ */ @media (max-width: 767px) { body.av-page--property .avs-container { width: calc(100% - 30px); } body.av-page--property .avs-hero { min-height: auto; background-position: 57% center; } body.av-page--property .avs-hero-grid { padding-block: 55px; } body.av-page--property .avs-hero-title { font-size: 43px; } body.av-page--property .avs-hero-description { font-size: 15px; } body.av-page--property .avs-hero-facts { gap: 12px; } body.av-page--property .avs-hero-fact { padding-right: 12px; } body.av-page--property .avs-hero-fact strong { font-size: 13px; } body.av-page--property .avs-hero-fact span { font-size: 11px; } body.av-page--property .avs-hero-form { padding: 25px 20px; } body.av-page--property .avs-story, body.av-page--property .avs-perspective, body.av-page--property .avs-featured, body.av-page--property .avs-help { padding: 55px 0; } body.av-page--property .avs-story-description { font-size: 14px; } body.av-page--property .avs-story-stats { gap: 8px; } body.av-page--property .avs-story-number { font-size: 30px; } body.av-page--property .avs-story-stat p { font-size: 11px; } body.av-page--property .avs-perspective-title { font-size: 36px; } body.av-page--property .avs-perspective-description { font-size: 14px; } body.av-page--property .avs-perspective-right { grid-template-columns: 1fr; gap: 13px; } body.av-page--property .avs-perspective-card { min-height: auto; padding: 20px; gap: 14px; } body.av-page--property .avs-perspective-icon { width: 45px; height: 45px; flex-basis: 45px; border-radius: 11px; } body.av-page--property .avs-perspective-icon svg { width: 23px; height: 23px; } body.av-page--property .avs-perspective-card h3 { font-size: 18px; } body.av-page--property .avs-perspective-card p { font-size: 13px; } body.av-page--property .avs-featured-grid, body.av-page--property .avs-help-grid { grid-template-columns: 1fr; } body.av-page--property .avs-featured-image { height: 235px; } body.av-page--property .avs-section-subtitle { font-size: 14px; } } @media (max-width: 380px) { body.av-page--property .avs-hero-title { font-size: 37px; } body.av-page--property .avs-perspective-title { font-size: 32px; } } /* Motion preferences */ /* @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .avs-page *, .avs-page *::before, .avs-page *::after { transition-duration: 3ms; } } */ body.av-page--property .avs-featured-link { display: block; height: 100%; text-decoration: none; color: inherit; } body.av-page--property .avs-featured-link .avs-featured-card { height: 100%; cursor: pointer; } body.av-page--property .avs-featured-link:hover .avs-featured-card { transform: translateY(-7px); border-color: #d8bd92; box-shadow: 0 18px 36px rgba(20, 32, 57, .11); } body.av-page--property .avs-featured-link:hover .avs-featured-card img { transform: scale(1.055); } body.av-page--property .avs-featured-link:focus-visible { outline: 2px solid #b78232; outline-offset: 5px; border-radius: 18px; } body.av-page--property { --pl-navy: #142039; --pl-gold: #b78232; --pl-mute: #687183; --pl-cream: #f8f5ef; --pl-border: #e9e5df; --pl-purple: #6e63c7; --pl-shadow: 0 12px 36px rgba(20, 32, 57, .065) } body.av-page--property *, body.av-page--property *::before, body.av-page--property *::after { box-sizing: border-box } body.av-page--property { margin: 0; font-family: Satoshi, Arial, sans-serif; color: var(--pl-navy); background: #faf9f7 } body.av-page--property button, body.av-page--property input, body.av-page--property select { font: inherit } body.av-page--property button { cursor: pointer } body.av-page--property img, body.av-page--property svg { max-width: 100% } body.av-page--property a { text-decoration: none } body.av-page--property button:focus-visible, body.av-page--property a:focus-visible, body.av-page--property input:focus-visible, body.av-page--property select:focus-visible { outline: 3px solid rgba(183, 130, 50, .55); outline-offset: 2px } /* Match the existing Avelon header markup while leaving header.php unchanged. */ /* Listing page */ body.av-page--property .pl-page { background: linear-gradient(180deg, #fff 0, #faf9f7 290px); min-height: 80vh } body.av-page--property .pl-wrap { width: min(1380px, calc(100% - 64px)); margin: auto } body.av-page--property .pl-intro { padding: 38px 0 25px } body.av-page--property .pl-kicker { font-size: 11px; letter-spacing: 2.7px; text-transform: uppercase; color: var(--pl-gold); font-weight: 700; margin: 0 0 8px } body.av-page--property .pl-title { font-size: clamp(29px, 3vw, 43px); font-weight: 600; letter-spacing: -1.1px; line-height: 1.16; margin: 0 0 9px } body.av-page--property .pl-description { font-size: 15px; color: var(--pl-mute); margin: 0; line-height: 1.7 } body.av-page--property .pl-toolbar { display: flex; align-items: center; gap: 14px; margin: 25px 0 22px } body.av-page--property .pl-search { flex: 1; display: flex; min-width: 180px; max-width: 490px; height: 49px; overflow: hidden; background: white; border: 1px solid var(--pl-border); border-radius: 10px; box-shadow: 0 3px 12px rgba(20, 32, 57, .025) } body.av-page--property .pl-search input { width: 100%; min-width: 0; outline: none; border: 0; padding: 0 17px; color: var(--pl-navy); font-size: 14px } body.av-page--property .pl-search button { flex: none; background: var(--pl-gold); border: 0; color: #fff; font-size: 13px; font-weight: 700; padding: 0 23px; transition: background .2s } body.av-page--property .pl-search button:hover { background: #97651f } body.av-page--property .pl-count { color: var(--pl-mute); font-size: 13px; white-space: nowrap; margin-left: 3px } body.av-page--property .pl-toolbar-end { margin-left: auto; display: flex; gap: 9px; align-items: center } body.av-page--property .pl-sort { height: 43px; padding: 0 12px; border: 1px solid var(--pl-border); border-radius: 9px; background: #fff; color: #445067; font-size: 13px; max-width: 180px } body.av-page--property .pl-view { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--pl-border); border-radius: 10px; background: #fff } body.av-page--property .pl-view button { border: 0; border-radius: 7px; background: transparent; color: #596273; width: 35px; height: 34px; display: grid; place-items: center } body.av-page--property .pl-view button[aria-pressed=true] { background: var(--pl-purple); color: #fff } body.av-page--property .pl-view svg, body.av-page--property .pl-filter-mobile svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } body.av-page--property .pl-main { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 25px; align-items: start; padding-bottom: 85px } body.av-page--property .pl-filter-panel { padding: 22px 20px 25px; border: 1px solid #eee9e2; background: #fff; border-radius: 16px; box-shadow: var(--pl-shadow) } body.av-page--property .pl-filter-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px } body.av-page--property .pl-filter-title h2 { font-size: 17px; margin: 0; font-weight: 700 } body.av-page--property .pl-reset { font-size: 12px; background: none; border: 0; color: var(--pl-gold); font-weight: 700; padding: 4px } body.av-page--property .pl-filter-block { padding: 17px 0; border-top: 1px solid #eeece7 } body.av-page--property .pl-filter-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: block; color: #26324a } body.av-page--property .pl-select { width: 100%; height: 42px; border: 1px solid #e9e9eb; background: #fff; border-radius: 8px; color: #697184; font-size: 12px; padding: 0 11px } body.av-page--property .pl-checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 4px } body.av-page--property .pl-check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: #667084 } body.av-page--property .pl-check input { accent-color: var(--pl-gold); width: 14px; height: 14px; margin: 0 } body.av-page--property .pl-range { width: 100%; accent-color: var(--pl-purple); margin: 8px 0 3px } body.av-page--property .pl-range-labels { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: #6c7481 } body.av-page--property .pl-type { display: flex; gap: 7px; flex-wrap: wrap } body.av-page--property .pl-type button { background: #fff; border: 1px solid #e8e3dc; padding: 8px 11px; border-radius: 7px; color: #657080; font-size: 12px } body.av-page--property .pl-type button[aria-pressed=true] { background: #fbf2e3; border-color: var(--pl-gold); color: #99601d } body.av-page--property .pl-filter-mobile { display: none; align-items: center; gap: 8px; height: 43px; padding: 0 14px; border: 1px solid var(--pl-border); border-radius: 9px; background: #fff; color: var(--pl-navy); font-size: 13px; font-weight: 700 } body.av-page--property .pl-filter-top { display: none } body.av-page--property .pl-results { min-width: 0 } body.av-page--property .pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px } body.av-page--property .pl-card { position: relative; min-width: 0; background: #fff; border: 1px solid #e9e8e6; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 18px rgba(20, 32, 57, .045); transition: transform .25s, border-color .25s, box-shadow .25s } body.av-page--property .pl-card:hover { transform: translateY(-5px); border-color: #e3c99f; box-shadow: 0 14px 32px rgba(20, 32, 57, .12) } body.av-page--property .pl-card-image { position: relative; display: block; aspect-ratio: 1.48; overflow: hidden; background: #e9ebe8 } body.av-page--property .pl-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s } body.av-page--property .pl-card:hover .pl-card-image img { transform: scale(1.04) } body.av-page--property .pl-favorite { position: absolute; top: 12px; left: 12px; border: 0; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .13); width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; color: #778092; z-index: 2 } body.av-page--property .pl-favorite svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round } body.av-page--property .pl-favorite[aria-pressed=true] { color: #dc6b6b } body.av-page--property .pl-favorite[aria-pressed=true] svg { fill: #dc6b6b } body.av-page--property .pl-tag { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .94); color: #27354c; padding: 6px 9px; border-radius: 7px; font-size: 10px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .1) } body.av-page--property .pl-card-body { padding: 16px 16px 14px } body.av-page--property .pl-price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 6px } body.av-page--property .pl-price { font-size: 20px; font-weight: 700; color: var(--pl-purple); letter-spacing: -.55px } body.av-page--property .pl-price small { font-size: 11px; color: var(--pl-mute); font-weight: 500; letter-spacing: 0 } body.av-page--property .pl-status { font-size: 10px; color: #af791e; background: #fbf4e5; padding: 4px 6px; border-radius: 5px; white-space: nowrap } body.av-page--property .pl-card h3 { font-size: 16px; font-weight: 700; margin: 7px 0 5px; color: var(--pl-navy); white-space: nowrap; text-overflow: ellipsis; overflow: hidden } body.av-page--property .pl-location { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #7a8290; margin: 0 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } body.av-page--property .pl-location svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--pl-gold); stroke-width: 2 } body.av-page--property .pl-card-footer { border-top: 1px solid #f0eeeb; padding-top: 11px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: #707989 } body.av-page--property .pl-spec { display: flex; align-items: center; gap: 4px } body.av-page--property .pl-spec svg { width: 14px; height: 14px; fill: none; stroke: #9c9fa8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round } body.av-page--property .pl-card .pl-detail-link { position: absolute; inset: 0; z-index: 1 } body.av-page--property .pl-card-body, body.av-page--property .pl-card-image { pointer-events: none } body.av-page--property .pl-favorite { pointer-events: auto } body.av-page--property .pl-empty { display: none; text-align: center; background: white; border: 1px dashed #d8c6a9; border-radius: 16px; padding: 60px 24px } body.av-page--property .pl-empty h3 { margin: 8px 0; font-size: 22px } body.av-page--property .pl-empty p { color: var(--pl-mute); font-size: 14px } body.av-page--property .pl-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 33px 0 0 } body.av-page--property .pl-pagination button { border: 1px solid #e5e2db; border-radius: 8px; background: #fff; color: var(--pl-navy); min-width: 37px; height: 37px; font-size: 13px } body.av-page--property .pl-pagination button[aria-current=page] { background: var(--pl-gold); border-color: var(--pl-gold); color: white } body.av-page--property .pl-pagination button:disabled { opacity: .4; cursor: not-allowed } body.av-page--property .pl-cards.is-list { grid-template-columns: 1fr } body.av-page--property .pl-cards.is-list .pl-card { display: grid; grid-template-columns: minmax(190px, 36%) 1fr } body.av-page--property .pl-cards.is-list .pl-card-image { aspect-ratio: 1.55; height: 100% } body.av-page--property .pl-cards.is-list .pl-card-body { display: flex; flex-direction: column; justify-content: center; padding: 22px } body.av-page--property .pl-cards.is-list .pl-card h3 { font-size: 21px } body.av-page--property .pl-cards.is-list .pl-card-footer { gap: 20px } @media (max-width:1250px) { body.av-page--property .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width:991px) { body.av-page--property .pl-wrap { width: calc(100% - 36px) } body.av-page--property .pl-main { grid-template-columns: 225px minmax(0, 1fr); gap: 16px } body.av-page--property .pl-filter-panel { padding: 18px 15px } body.av-page--property .pl-cards { gap: 14px } body.av-page--property .pl-card-body { padding: 14px 12px } body.av-page--property .pl-sort { max-width: 135px } } @media (max-width:767px) { body.av-page--property .pl-wrap { width: calc(100% - 30px) } body.av-page--property .pl-intro { padding: 26px 0 12px } body.av-page--property .pl-title { font-size: 31px } body.av-page--property .pl-description { font-size: 13px } body.av-page--property .pl-toolbar { flex-wrap: wrap; gap: 9px; margin: 19px 0 17px } body.av-page--property .pl-search { max-width: none; flex-basis: 100%; order: 0; height: 45px } body.av-page--property .pl-search button { padding: 0 17px } body.av-page--property .pl-filter-mobile { display: flex; order: 1 } body.av-page--property .pl-count { font-size: 11px; order: 2; margin: 0 } body.av-page--property .pl-toolbar-end { order: 3; gap: 6px } body.av-page--property .pl-sort { height: 41px; max-width: 118px; font-size: 11px; padding: 0 6px } body.av-page--property .pl-view button { width: 30px; height: 30px } body.av-page--property .pl-view { padding: 4px } body.av-page--property .pl-main { display: block; padding-bottom: 62px } body.av-page--property .pl-filter-panel { position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; width: min(340px, 90vw); height: 100dvh; border-radius: 0; overflow: auto; transform: translateX(-105%); visibility: hidden; transition: transform .3s, visibility .3s; box-shadow: 0 0 55px rgba(0, 0, 0, .19) } body.av-page--property .pl-filter-panel.is-open { transform: translateX(0); visibility: visible } body.av-page--property .pl-filter-top { display: flex; justify-content: space-between; align-items: center; padding: 0 0 15px; margin-bottom: 10px; border-bottom: 1px solid #eee } body.av-page--property .pl-filter-top strong { font-size: 18px } body.av-page--property .pl-filter-top button { width: 35px; height: 35px; border: 0; border-radius: 50%; background: #f6f4ef; font-size: 23px } body.av-page--property .pl-filter-shade { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(13, 23, 41, .55) } body.av-page--property .pl-filter-shade.is-open { display: block } body.av-page--property .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } body.av-page--property .pl-card-image { aspect-ratio: 1.12 } body.av-page--property .pl-tag { font-size: 9px; top: 8px; right: 8px } body.av-page--property .pl-favorite { width: 30px; height: 30px; top: 8px; left: 8px } body.av-page--property .pl-price { font-size: 17px } body.av-page--property .pl-card h3 { font-size: 14px } body.av-page--property .pl-card-footer { gap: 7px } body.av-page--property .pl-spec { font-size: 10px } body.av-page--property .pl-cards.is-list .pl-card { grid-template-columns: minmax(120px, 36%) 1fr } body.av-page--property .pl-cards.is-list .pl-card-body { padding: 12px } body.av-page--property .pl-cards.is-list .pl-card h3 { font-size: 15px } } @media (max-width:520px) { body.av-page--property .pl-cards { grid-template-columns: 1fr; gap: 16px } body.av-page--property .pl-card-image { aspect-ratio: 1.65 } body.av-page--property .pl-card-body { padding: 15px } body.av-page--property .pl-price { font-size: 20px } body.av-page--property .pl-card h3 { font-size: 17px } body.av-page--property .pl-card-footer { gap: 14px } body.av-page--property .pl-toolbar-end { margin-left: auto } body.av-page--property .pl-cards.is-list .pl-card-image { aspect-ratio: 1.1 } body.av-page--property .pl-cards.is-list .pl-card h3 { font-size: 14px } body.av-page--property .pl-cards.is-list .pl-price { font-size: 16px } body.av-page--property .pl-cards.is-list .pl-location { white-space: normal } body.av-page--property .pl-count { max-width: 90px; line-height: 1.3; white-space: normal } } @media (max-width:380px) { body.av-page--property .pl-view { display: none } body.av-page--property .pl-sort { max-width: 125px } } /* @media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto } .pl-card, .pl-card-image img, .pl-filter-panel { transition: none } } */ /* ===================== property-detail.php ===================== */ body.av-page--detail { margin: 0px; box-sizing: border-box; } body.av-page--detail { --pd-navy: #142039; --pd-navy2: #0c1930; --pd-gold: #b78232; --pd-gold-dark: #996b27; --pd-cream: #f8f5ef; --pd-muted: #647084; --pd-line: #e9e4db; --pd-white: #fff; --pd-radius: 17px; --pd-shadow: 0 16px 42px rgba(20, 32, 57, .08) } body.av-page--detail .pd-page, body.av-page--detail .pd-page *, body.av-page--detail .pd-page *::before, body.av-page--detail .pd-page *::after { box-sizing: border-box } body.av-page--detail .pd-page { font-family: Satoshi, Arial, sans-serif; color: var(--pd-navy); background: #fff; overflow: clip } body.av-page--detail .pd-page a { text-decoration: none } body.av-page--detail .pd-page img { display: block; max-width: 100% } body.av-page--detail .pd-page button, body.av-page--detail .pd-page input, body.av-page--detail .pd-page select { font: inherit } body.av-page--detail .pd-page button { cursor: pointer } body.av-page--detail .pd-container { width: min(1320px, calc(100% - 48px)); margin: auto } body.av-page--detail .pd-eyebrow { margin: 0 0 12px; color: var(--pd-gold); font-weight: 700; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase } body.av-page--detail .pd-title { font-weight: 600; font-size: clamp(30px, 3.4vw, 35px); line-height: 1.13; letter-spacing: 0px; margin: 0 0 18px } body.av-page--detail .pd-subtitle { line-height: 1.75; color: var(--pd-muted); font-size: 16px; margin: 0 } body.av-page--detail .pd-btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 8px; padding: 13px 20px; background: var(--pd-gold); font-size: 13px; font-weight: 700; color: #fff; transition: background .25s, transform .25s; white-space: nowrap } body.av-page--detail .pd-btn:hover { background: var(--pd-gold-dark); transform: translateY(-2px); color: #fff } body.av-page--detail .pd-btn-outline { background: transparent; border-color: var(--pd-gold); color: var(--pd-gold) } body.av-page--detail .pd-btn-outline:hover { background: var(--pd-gold); color: #fff } body.av-page--detail .pd-btn:focus-visible, body.av-page--detail .pd-page button:focus-visible, body.av-page--detail .pd-page a:focus-visible { outline: 3px solid #e3b466; outline-offset: 3px } body.av-page--detail .pd-page .icon { font-size: 23px; line-height: 1; color: var(--pd-gold) } /* New banner — intentionally different from listing page */ body.av-page--detail .pd-hero { background: linear-gradient(120deg, #f8f5ef, #fff); padding: 35px 0 26px } body.av-page--detail .pd-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 16px; color: #748091; margin-bottom: 22px } body.av-page--detail .pd-breadcrumb a { color: var(--pd-navy) } body.av-page--detail .pd-breadcrumb strong { color: var(--pd-gold); font-weight: 600 } body.av-page--detail .pd-hero-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, .78fr); gap: 22px; align-items: stretch } body.av-page--detail .pd-hero-photo { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; min-height: 520px; background: #142039 } body.av-page--detail .pd-hero-photo>img { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; transition: transform .65s } body.av-page--detail .pd-hero-photo:hover>img { transform: scale(1.035) } body.av-page--detail .pd-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 12, 23, .91) 0%, rgba(5, 12, 23, .17) 68%); z-index: 1 } body.av-page--detail .pd-photo-badge { position: absolute; z-index: 2; top: 24px; left: 26px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 30px; background: rgba(16, 30, 50, .50); backdrop-filter: blur(10px); padding: 9px 14px; color: #fff; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase } body.av-page--detail .pd-hero-copy { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 40px 44px; color: #fff } body.av-page--detail .pd-hero-copy .pd-eyebrow { color: #e9c388 } body.av-page--detail .pd-hero-copy h1 { font-size: clamp(35px, 4vw, 55px); line-height: 1.04; letter-spacing: 0px; font-weight: 500; margin: 0 0 12px } body.av-page--detail .pd-hero-copy>p:not(.pd-eyebrow) { font-size: 16px; opacity: .93; line-height: 1.5; margin: 0 0 22px } body.av-page--detail .pd-hero-facts { display: flex; gap: 20px; flex-wrap: wrap } body.av-page--detail .pd-hero-fact { display: flex; gap: 9px; align-items: center; padding-right: 20px; border-right: 1px solid rgba(255, 255, 255, .28) } body.av-page--detail .pd-hero-fact:last-child { border: 0; padding-right: 0 } body.av-page--detail .pd-hero-fact .icon { color: #e5b369 } body.av-page--detail .pd-hero-fact span { font-size: 12px; font-weight: 600; line-height: 1.35 } body.av-page--detail .pd-enquiry { padding: 26px 26px 22px; border-radius: 20px; background: #fff; box-shadow: var(--pd-shadow); border: 1px solid #eee9e1; display: flex; flex-direction: column; justify-content: center } body.av-page--detail .pd-enquiry h2 { font-size: 25px; line-height: 1.2; margin: 0 0 9px; font-weight: 600 } body.av-page--detail .pd-enquiry>p { font-size: 13px; color: var(--pd-muted); line-height: 1.6; margin: 0 0 23px } body.av-page--detail .pd-field { margin-bottom: 13px } body.av-page--detail .pd-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700 } body.av-page--detail .pd-field input, body.av-page--detail .pd-field select { height: 46px; width: 100%; background: #fcfcfb; border: 1px solid #e7e8e8; border-radius: 8px; padding: 0 13px; color: #243249; font-size: 13px } body.av-page--detail .pd-field input:focus, body.av-page--detail .pd-field select:focus { outline: 2px solid #e8c99a; border-color: var(--pd-gold) } body.av-page--detail .pd-enquiry .pd-btn { font-size: 15px; width: 100%; min-height: 49px } body.av-page--detail .pd-enquiry small { display: flex; gap: 7px; align-items: center; color: #84909a; font-size: 11px; margin-top: 15px; line-height: 1.5 } body.av-page--detail .pd-quickfacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 17px; padding: 16px 23px; background: #fff; border: 1px solid var(--pd-line); border-radius: 13px } body.av-page--detail .pd-quickfacts span { font-size: 15px; color: var(--pd-muted) } body.av-page--detail .pd-quickfacts strong { display: block; font-size: 16px; margin-top: 3px; color: var(--pd-navy) } body.av-page--detail .pd-quickfacts .pd-price strong { color: var(--pd-gold); font-size: 22px } /* gallery strip */ body.av-page--detail .pd-strip { padding: 22px 0 54px } body.av-page--detail .pd-strip-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px } body.av-page--detail .pd-strip-button { position: relative; overflow: hidden; border: 0; padding: 0; height: 170px; border-radius: 12px; background: #ede9e1 } body.av-page--detail .pd-strip-button img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s } body.av-page--detail .pd-strip-button:hover img { transform: scale(1.07) } body.av-page--detail .pd-strip-button span { position: absolute; right: 10px; bottom: 10px; background: rgba(20, 32, 57, .78); border-radius: 30px; color: #fff; font-size: 11px; padding: 5px 9px } /* Overview */ body.av-page--detail .pd-overview { padding: 44px 0 78px; background: #fff } body.av-page--detail .pd-overview-grid { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.8fr); gap: 55px; align-items: start } body.av-page--detail .pd-overview-copy .pd-subtitle { margin-bottom: 24px } body.av-page--detail .pd-note { margin-top: 20px; padding: 12px 14px; background: #fbf7ef; border-left: 3px solid var(--pd-gold); font-size: 15px; color: #6d685e; line-height: 1.55 } body.av-page--detail .pd-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } body.av-page--detail .pd-spec { display: flex; align-items: center; gap: 14px; min-height: 91px; border: 1px solid #eeeae5; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(20, 32, 57, .035); padding: 14px } body.av-page--detail .pd-spec .icon { flex: 0 0 27px; font-size: 27px } body.av-page--detail .pd-spec span { display: block; color: var(--pd-muted); font-size: 15px; margin-bottom: 4px } body.av-page--detail .pd-spec strong { display: block; font-size: 16px; line-height: 1.3; font-weight: 600 } /* Amenities */ body.av-page--detail .pd-amenities { padding: 70px 0; background: var(--pd-navy2); color: #fff } body.av-page--detail .pd-amenities-grid { display: grid; grid-template-columns: 275px minmax(0, 1fr); gap: 50px; align-items: center } body.av-page--detail .pd-amenities .pd-title { color: #fff } body.av-page--detail .pd-amenities .pd-subtitle { color: #c2cbd8 } body.av-page--detail .pd-amenities-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 } body.av-page--detail .pd-amenity { min-height: 112px; display: flex; flex-direction: column; gap: 13px; justify-content: center; align-items: center; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .14); border-right: 1px solid rgba(255, 255, 255, .14); padding: 13px } body.av-page--detail .pd-amenity:nth-child(n/**/+5) { border-bottom: 0 } body.av-page--detail .pd-amenity:nth-child(4n) { border-right: 0 } body.av-page--detail .pd-amenity .icon { font-size: 31px; color: #efbf7e } body.av-page--detail .pd-amenity span:last-child { font-size: 16px; line-height: 1.4 } body.av-page--detail .pd-amenity:hover { background: rgba(255, 255, 255, .05) } /* Floor plans */ body.av-page--detail .pd-floor { padding: 85px 0; background: var(--pd-cream) } body.av-page--detail .pd-section-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.75fr); gap: 45px; align-items: start } body.av-page--detail .pd-floor-intro .pd-subtitle { margin-bottom: 24px } body.av-page--detail .pd-floor-content { min-width: 0 } body.av-page--detail .pd-tabs { display: inline-flex; background: #fff; padding: 5px; border-radius: 10px; border: 1px solid var(--pd-line); margin-bottom: 17px; gap: 5px } body.av-page--detail .pd-tab { min-width: 133px; padding: 10px 14px; background: transparent; border: 0; border-radius: 7px; font-weight: 700; font-size: 13px; color: #596479 } body.av-page--detail .pd-tab[aria-selected="true"] { background: var(--pd-gold); color: #fff } body.av-page--detail .pd-floor-panel[hidden] { display: none } body.av-page--detail .pd-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px } body.av-page--detail .pd-plan { display: grid; grid-template-columns: 46% 1fr; min-height: 260px; gap: 16px; background: #fff; border-radius: 13px; border: 1px solid #ede8e0; padding: 17px; box-shadow: 0 6px 22px rgba(20, 32, 57, .035) } body.av-page--detail .pd-plan-visual { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f4f0e9; overflow: hidden } body.av-page--detail .pd-plan-visual img { width: 100%; height: 100%; object-fit: cover } body.av-page--detail .pd-plan-meta { display: flex; flex-direction: column; align-items: start } body.av-page--detail .pd-plan-meta h3 { font-size: 16px; margin: 3px 0 6px } body.av-page--detail .pd-plan-meta>p { margin: 0 0 12px; color: var(--pd-gold); font-weight: 600; font-size: 15px } body.av-page--detail .pd-plan-meta ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 11px } body.av-page--detail .pd-plan-meta li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #536072 } body.av-page--detail .pd-plan-meta li .icon { font-size: 15px } body.av-page--detail .pd-plan-meta .pd-btn { margin-top: auto; padding: 10px 13px; font-size: 11px } /* Location */ body.av-page--detail .pd-location { padding: 85px 0; background: #fff } body.av-page--detail .pd-location-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.25fr) minmax(220px, .65fr); gap: 30px; align-items: center } body.av-page--detail .pd-location-copy .pd-subtitle { margin-bottom: 22px } body.av-page--detail .pd-map { min-height: 340px; position: relative; border-radius: 17px; overflow: hidden; border: 1px solid #e5e2db; background-image: linear-gradient( rgba(20, 32, 57, 0.15), rgba(20, 32, 57, 0.35) ), url("https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1200&q=85"); background-position: center; background-size: cover; background-repeat: no-repeat; } body.av-page--detail .pd-map-pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; text-align: center; z-index: 2 } body.av-page--detail .pd-map-pin .icon { font-size: 43px; color: #fff; filter: drop-shadow(0 4px 5px #ac9b82) } body.av-page--detail .pd-map-pin strong { padding: 7px 12px; border-radius: 8px; background: #fff; box-shadow: var(--pd-shadow); font-size: 12px; white-space: nowrap } body.av-page--detail .pd-map-hint { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255, 255, 255, .86); padding: 9px 12px; border-radius: 8px; font-size: 11px; color: #536072; text-align: center } body.av-page--detail .pd-nearby { padding: 19px; background: #fbf7ee; border: 1px solid #efe4d2; border-radius: 13px } body.av-page--detail .pd-nearby h3 { margin: 0 0 16px; font-size: 19px; font-weight: 600 } body.av-page--detail .pd-nearby ul { margin: 0; padding: 0; list-style: none } body.av-page--detail .pd-nearby li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 15px; border-top: 1px solid #e7dfd1 } body.av-page--detail .pd-nearby li b { color: var(--pd-gold); font-weight: 700; white-space: nowrap } body.av-page--detail .pd-nearby small { display: block; color: #897e6e; line-height: 1.55; margin-top: 12px } /* Gallery */ body.av-page--detail .pd-gallery { padding: 76px 0; background: var(--pd-cream) } body.av-page--detail .pd-gallery-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px } body.av-page--detail .pd-gallery-heading .pd-title { margin-bottom: 0 } body.av-page--detail .pd-gallery-nav { display: flex; gap: 8px } body.av-page--detail .pd-round { height: 40px; width: 40px; border: 1px solid #eadbc5; border-radius: 50%; background: #fff; color: var(--pd-gold); font-size: 19px } body.av-page--detail .pd-round:hover { background: var(--pd-gold); color: #fff } body.av-page--detail .pd-gallery-scroll { display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px } body.av-page--detail .pd-gallery-scroll::-webkit-scrollbar { display: none } body.av-page--detail .pd-gallery-card { flex: 0 0 calc((100% - 45px)/4); border: 0; background: #fff; padding: 0; border-radius: 12px; overflow: hidden; scroll-snap-align: start; min-width: 0; box-shadow: 0 6px 14px rgba(20, 32, 57, .07) } body.av-page--detail .pd-gallery-card img { width: 100%; height: 200px; object-fit: cover; transition: transform .35s } body.av-page--detail .pd-gallery-card:hover img { transform: scale(1.06) } /* Similar */ body.av-page--detail .pd-similar { padding: 84px 0 100px } body.av-page--detail .pd-similar-head { display: flex; justify-content: space-between; gap: 25px; align-items: end; margin-bottom: 26px } body.av-page--detail .pd-similar-head .pd-title { margin-bottom: 0 } body.av-page--detail .pd-similar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px } body.av-page--detail .pd-similar-card { border: 1px solid var(--pd-line); border-radius: 13px; overflow: hidden; background: #fff; box-shadow: 0 5px 15px rgba(20, 32, 57, .04); transition: transform .3s, box-shadow .3s } body.av-page--detail .pd-similar-card:hover { transform: translateY(-6px); box-shadow: var(--pd-shadow) } body.av-page--detail .pd-similar-card img { width: 100%; height: 230px; object-fit: cover } body.av-page--detail .pd-similar-card-body { padding: 19px } body.av-page--detail .pd-similar-card h3 { margin: 0 0 7px; font-size: 19px } body.av-page--detail .pd-similar-card p { margin: 0 0 8px; color: var(--pd-muted); font-size: 12px; display: flex; align-items: center; gap: 7px } body.av-page--detail .pd-similar-card .icon { font-size: 15px } body.av-page--detail .pd-similar-card small { color: var(--pd-gold); font-weight: 700 } /* Lightbox */ body.av-page--detail .pd-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(5, 12, 26, .94); display: grid; place-items: center; padding: 60px 60px 35px } body.av-page--detail .pd-lightbox[hidden] { display: none } body.av-page--detail .pd-lightbox figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: grid; gap: 9px; justify-items: center } body.av-page--detail .pd-lightbox img { max-height: 76vh; max-width: 100%; border-radius: 9px; object-fit: contain } body.av-page--detail .pd-lightbox figcaption { color: #fff; font-size: 13px } body.av-page--detail .pd-lightbox-close { position: absolute; right: 21px; top: 16px; background: transparent; color: #fff; border: 0; font-size: 34px } body.av-page--detail .pd-lightbox-prev, body.av-page--detail .pd-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #777; border-radius: 50%; height: 43px; width: 43px; background: #fff; color: var(--pd-navy); font-size: 24px } body.av-page--detail .pd-lightbox-prev { left: 12px } body.av-page--detail .pd-lightbox-next { right: 12px } @media (max-width:1199px) { body.av-page--detail .pd-hero-layout { grid-template-columns: minmax(0, 1.5fr) minmax(310px, .82fr) } body.av-page--detail .pd-hero-photo { min-height: 505px } body.av-page--detail .pd-hero-copy { padding: 30px } body.av-page--detail .pd-hero-facts { gap: 11px } body.av-page--detail .pd-hero-fact { padding-right: 11px } body.av-page--detail .pd-plan { grid-template-columns: 1fr } body.av-page--detail .pd-plan-visual { height: 155px } body.av-page--detail .pd-overview-grid { gap: 30px } body.av-page--detail .pd-section-grid { gap: 28px } body.av-page--detail .pd-location-grid { grid-template-columns: minmax(200px, .7fr) minmax(0, 1.35fr) } body.av-page--detail .pd-nearby { grid-column: 2 } body.av-page--detail .pd-location-copy { grid-row: 1/3 } body.av-page--detail .pd-gallery-card { flex-basis: calc((100% - 30px)/3) } } @media (max-width:991px) { body.av-page--detail .pd-hero-layout { grid-template-columns: 1fr } body.av-page--detail .pd-hero-photo { min-height: 475px } body.av-page--detail .pd-enquiry { max-width: none } body.av-page--detail .pd-enquiry form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px } body.av-page--detail .pd-enquiry .pd-btn { grid-column: 1/-1 } body.av-page--detail .pd-overview-grid, body.av-page--detail .pd-section-grid, body.av-page--detail .pd-amenities-grid { grid-template-columns: 1fr } body.av-page--detail .pd-amenities-grid { gap: 22px } body.av-page--detail .pd-location-grid { grid-template-columns: 1fr 1fr } body.av-page--detail .pd-location-copy { grid-column: 1/-1; grid-row: auto } body.av-page--detail .pd-nearby { grid-column: auto } body.av-page--detail .pd-strip-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto } body.av-page--detail .pd-strip-button { height: 135px } body.av-page--detail .pd-plan { grid-template-columns: 45% 1fr } body.av-page--detail .pd-plan-visual { height: auto } body.av-page--detail .pd-similar-grid { gap: 12px } body.av-page--detail .pd-similar-card img { height: 180px } } @media (max-width:767px) { body.av-page--detail .pd-container { width: calc(100% - 30px) } body.av-page--detail .pd-hero { padding: 19px 0 20px } body.av-page--detail .pd-breadcrumb { margin-bottom: 14px } body.av-page--detail .pd-hero-photo { min-height: 410px; border-radius: 14px } body.av-page--detail .pd-photo-badge { top: 16px; left: 17px } body.av-page--detail .pd-hero-copy { padding: 24px } body.av-page--detail .pd-hero-copy h1 { font-size: clamp(34px, 9vw, 49px) } body.av-page--detail .pd-hero-copy>p:not(.pd-eyebrow) { font-size: 13px } body.av-page--detail .pd-hero-fact .icon { font-size: 19px } body.av-page--detail .pd-hero-fact span { font-size: 10px } body.av-page--detail .pd-hero-facts { gap: 11px } body.av-page--detail .pd-hero-fact { padding-right: 11px } body.av-page--detail .pd-enquiry { padding: 25px 20px } body.av-page--detail .pd-enquiry form { display: block } body.av-page--detail .pd-quickfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 15px } body.av-page--detail .pd-strip { padding: 17px 0 40px } body.av-page--detail .pd-strip-grid { gap: 9px; grid-template-columns: repeat(5, 145px); margin-right: -15px } body.av-page--detail .pd-strip-button { height: 105px } body.av-page--detail .pd-overview, body.av-page--detail .pd-floor, body.av-page--detail .pd-location, body.av-page--detail .pd-gallery, body.av-page--detail .pd-similar { padding: 53px 0 } body.av-page--detail .pd-title { font-size: clamp(29px, 7vw, 39px) } body.av-page--detail .pd-subtitle { font-size: 14px } body.av-page--detail .pd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)) } body.av-page--detail .pd-spec { min-height: 79px; padding: 10px; gap: 8px } body.av-page--detail .pd-spec .icon { font-size: 24px; flex-basis: 25px } body.av-page--detail .pd-spec strong { font-size: 12px } body.av-page--detail .pd-amenities { padding: 53px 0 } body.av-page--detail .pd-amenities-items { grid-template-columns: repeat(2, minmax(0, 1fr)) } body.av-page--detail .pd-amenity:nth-child(n) { border-bottom: 1px solid rgba(255, 255, 255, .14); border-right: 1px solid rgba(255, 255, 255, .14) } body.av-page--detail .pd-amenity:nth-child(even) { border-right: 0 } body.av-page--detail .pd-amenity:nth-last-child(-n/**/+2) { border-bottom: 0 } body.av-page--detail .pd-plan-grid { grid-template-columns: 1fr } body.av-page--detail .pd-plan { min-height: 210px; grid-template-columns: 40% 1fr; padding: 12px; gap: 13px } body.av-page--detail .pd-plan-meta h3 { font-size: 15px } body.av-page--detail .pd-plan-visual { height: auto } body.av-page--detail .pd-location-grid { grid-template-columns: 1fr } body.av-page--detail .pd-location-copy, body.av-page--detail .pd-nearby { grid-column: auto } body.av-page--detail .pd-map { min-height: 310px } body.av-page--detail .pd-gallery-card { flex-basis: 72% } body.av-page--detail .pd-similar-grid { grid-template-columns: 1fr } body.av-page--detail .pd-similar-card img { height: 235px } body.av-page--detail .pd-similar-head { align-items: start } body.av-page--detail .pd-similar-head .pd-btn { display: none } body.av-page--detail .pd-lightbox { padding: 50px 26px } body.av-page--detail .pd-lightbox-prev { left: 3px } body.av-page--detail .pd-lightbox-next { right: 3px } } @media (max-width:380px) { body.av-page--detail .pd-hero-photo { min-height: 395px } body.av-page--detail .pd-hero-copy { padding: 16px } body.av-page--detail .pd-hero-fact span { font-size: 9px } body.av-page--detail .pd-hero-facts { gap: 7px } body.av-page--detail .pd-hero-fact { padding-right: 7px } body.av-page--detail .pd-specs { gap: 8px } body.av-page--detail .pd-spec { gap: 6px } body.av-page--detail .pd-spec strong { font-size: 11px } body.av-page--detail .pd-plan { grid-template-columns: 1fr } body.av-page--detail .pd-plan-visual { height: 170px } body.av-page--detail .pd-enquiry h2 { font-size: 22px } } /* @media(prefers-reduced-motion:reduce) { .pd-page * { scroll-behavior: auto; transition: none !important } } */ /* ===================== under-development-page.php ===================== */ body.av-page--maintenance * { margin: 0; padding: 0; box-sizing: border-box; } body.av-page--maintenance { font-family: "Satoshi", sans-serif; color: #fff; } body.av-page--maintenance .maintenance-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; background: linear-gradient( rgba(10, 18, 28, 0.82), rgba(10, 18, 28, 0.90) ), url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=2400&q=85") center / cover no-repeat; } body.av-page--maintenance .maintenance-content { width: 100%; max-width: 760px; } body.av-page--maintenance .logo { margin-bottom: 45px; } body.av-page--maintenance .logo img { width: 190px; max-width: 100%; height: auto; } body.av-page--maintenance h1 { margin-bottom: 20px; font-size: clamp(42px, 6vw, 60px); line-height: 1.08; font-weight: 500; letter-spacing: -2px; } body.av-page--maintenance .subtitle { max-width: 590px; margin: 0 auto 38px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); } body.av-page--maintenance .notify-form { width: 100%; max-width: 560px; margin: 0 auto; display: flex; gap: 8px; padding: 7px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 60px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); } body.av-page--maintenance .notify-form input { flex: 1; min-width: 0; padding: 0 20px; border: 0; outline: 0; background: transparent; color: #fff; font-family: inherit; font-size: 15px; } body.av-page--maintenance .notify-form input::placeholder { color: rgba(255, 255, 255, 0.55); } body.av-page--maintenance .notify-form button { padding: 15px 24px; border: 0; border-radius: 50px; background: #4572ab; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.25s ease; } body.av-page--maintenance .notify-form button:hover { background: #4572ab; transform: translateY(-1px); } body.av-page--maintenance .notify-form button i { margin-left: 7px; } body.av-page--maintenance .message { min-height: 22px; margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.75); } body.av-page--maintenance .socials { display: flex; justify-content: center; gap: 12px; margin-top: 45px; } body.av-page--maintenance .socials a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: #fff; text-decoration: none; transition: 0.25s ease; } body.av-page--maintenance .socials a:hover { background: #4572ab; border-color: #4572ab; transform: translateY(-3px); } @media (max-width: 600px) { body.av-page--maintenance .maintenance-page { padding: 30px 18px; } body.av-page--maintenance .logo { margin-bottom: 35px; } body.av-page--maintenance .logo img { width: 160px; } body.av-page--maintenance h1 { letter-spacing: -1px; } body.av-page--maintenance .subtitle { font-size: 15px; margin-bottom: 30px; } body.av-page--maintenance .notify-form { flex-direction: column; padding: 8px; border-radius: 18px; } body.av-page--maintenance .notify-form input { min-height: 52px; text-align: center; } body.av-page--maintenance .notify-form button { width: 100%; border-radius: 12px; } } /* ===================== shared header.php ===================== */ body.pic-menu-open { overflow: hidden; } .pic-site-header { position: relative; z-index: 8; width: 100%; background: linear-gradient(110deg, #fffdf8 0%, #fcf6e9 35%, #fffdf8 65%, #fcf6e9 100%); border-bottom: 1px solid rgba(184, 139, 54, .28); } .pic-site-header-inner { position: relative; min-height: 94px; margin: auto; display: flex; align-items: center; justify-content: center; padding: 12px 80px; } .pic-adv-logo { display: inline-flex; align-items: center; justify-content: center; } .pic-adv-logo img { display: block; width: auto; height: 68px; max-width: min(250px, 100%); object-fit: contain; } .pic-top-menu { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #e9e1d2; border-radius: 50%; background: #e1a33a; color: #fff; cursor: pointer; } .pic-top-menu svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .pic-drawer-shade { position: fixed; z-index: 30; inset: 0; background: rgba(5, 16, 29, .52); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .pic-drawer-shade.is-open { opacity: 1; visibility: visible; } .pic-drawer { position: fixed; z-index: 31; inset: 0 0 0 auto; width: min(390px, 88vw); height: 100vh; height: 100dvh; padding: 26px; overflow-y: auto; background: #fff; color: #122138; transform: translateX(105%); visibility: hidden; transition: transform .35s ease, visibility .35s ease; } .pic-drawer.is-open { transform: translateX(0); visibility: visible; } .pic-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #e5e7eb; } .pic-drawer-brand img { display: block; max-width: 100%; width: 200px; height: auto; max-height: 55px; object-fit: contain; } .pic-drawer-close { flex: 0 0 42px; height: 42px; border: 0; border-radius: 50%; background: #f3f4f6; font-size: 26px; cursor: pointer; } .pic-drawer-nav { display: grid; margin-top: 14px; } .pic-drawer-nav a { padding: 15px 2px; border-bottom: 1px solid #eee; text-decoration: none; font-size: 16px; font-weight: 600; color: #122138; font-family: Satoshi, Arial, sans-serif; } .pic-drawer-nav a:hover { color: var(--pic-gold); } .pic-drawer-social-title { margin: 28px 0 14px; color: #122138; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .pic-social-list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .pic-social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; transition: transform .25s ease, box-shadow .25s ease; } .pic-social-link:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .24); } .pic-social-link svg { width: 19px; height: 19px; fill: #fff; } .pic-social-facebook { background: #1877f2; } .pic-social-instagram { background: radial-gradient(circle at 32% 100%, #feda75 0%, #fa7e1e 23%, #d62976 48%, #962fbf 72%, #4f5bd5 100%); } .pic-social-youtube { background: #ff0000; } .pic-social-linkedin { background: #0a66c2; } .pic-social-whatsapp { background: #25d366; } .pic-social-x { background: #000; } @media (max-width:767px) { .pic-site-header-inner { min-height: 78px; padding: 10px 65px; } .pic-adv-logo img { height: 55px; max-width: 150px; } .pic-top-menu { right: 14px; width: 48px; height: 48px; } .pic-top-menu svg { width: 23px; height: 23px; } } @media (max-width:430px) { .pic-site-header-inner { min-height: 70px; padding: 8px 62px; } .pic-adv-logo img { height: 50px; width: 150px; max-width: 150px; } .pic-social-list { gap: 8px; } .pic-social-link { width: 40px; height: 40px; } .pic-social-link svg { width: 16px; height: 16px; } .pic-drawer { padding: 20px; } } @media (max-width:340px) { .pic-site-header-inner { padding-inline: 55px; } .pic-top-menu { width: 42px; height: 42px; right: 9px; } .pic-adv-logo img { max-width: 150px; } } @media (max-width:767px) { .pic-site-header-inner { min-height: 78px; padding: 10px 65px; } .pic-adv-logo img { height: 55px; max-width: 190px; } .pic-top-menu { right: 14px; width: 40px; height: 40px; } .pic-top-menu svg { width: 23px; height: 23px; } } @media (max-width:430px) { .pic-site-header-inner { min-height: 70px; padding: 8px 62px; } .pic-adv-logo img { height: 50px; max-width: 165px; } .pic-social-list { gap: 8px; } .pic-social-link { width: 40px; height: 40px; } .pic-social-link svg { width: 16px; height: 16px; } .pic-drawer { padding: 20px; } } @media (max-width:340px) { .pic-site-header-inner { padding-inline: 55px; } .pic-top-menu { width: 42px; height: 42px; right: 9px; } .pic-adv-logo img { max-width: 150px; } } /* ===================== shared footer.php ===================== */ /* Footer: floating brand card and animated navigation */ .pic-site-footer { position: relative; z-index: 5; isolation: isolate; padding: 92px 22px 22px; /* background: #E3D2AE; */ background: #fdf9f1; color: #142039; } .pic-footer-inner { width: min(1050px, 100%); margin: auto; } .pic-footer-brand-card { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 34px; margin-top: -150px; margin-bottom: 47px; border: 1px solid rgba(189,145,65,.25); border-radius: 19px; background: linear-gradient(115deg, #faf4e4, #f1e3c7 55%, #e8eced); box-shadow: 0 18px 42px rgba(9, 20, 38, .08); } .pic-footer-brand-card img { display: block; width: min(250px, 100%); height: auto; max-height: 77px; object-fit: contain; } .pic-footer-brand-card .pic-social-list { justify-content: flex-end; } .pic-footer-brand-card .pic-social-link { flex: 0 0 40px; } .pic-footer-label { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; color: #70511d; } .pic-footer-nav-card { padding: 30px 0 24px; border-top: 1px solid rgba(20,32,57,.16); border-bottom: 1px solid rgba(20,32,57,.16); } .pic-footer-nav-heading { margin: 0 0 24px; font-size: 18px; font-weight: 600; color: #142039; } .pic-footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; } .pic-footer-page-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px 14px; border: 1px solid rgba(20,32,57,.14); border-radius: 10px; text-decoration: none; background: rgba(255,255,255,.28); color: #142039; font-size: 15px; font-weight: 500; line-height: 1.35; transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease; animation: picFooterFadeUp .65s both; animation-delay: calc(var(--item-index) * 75ms); } .pic-footer-page-link span { min-width: 0; overflow-wrap: anywhere; } .pic-footer-page-link svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #70511d; stroke-width: 1.7; } .pic-footer-page-link:hover, .pic-footer-page-link:focus-visible { color: #101d33; background: rgba(255,255,255,.55); border-color: rgba(112,81,29,.40); transform: translateY(-3px); } @keyframes picFooterFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .pic-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; font-size: 15px; color: #25354a; } .pic-footer-bottom p { margin: 0; } .pic-footer-bottom a { color: #57401c; } @media (max-width: 767px) { .pic-site-footer { padding: 78px 16px 20px; } .pic-footer-brand-card { padding: 22px; margin-top: -111px; margin-bottom: 35px; } .pic-footer-brand-card img { width: 185px; } .pic-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .pic-site-footer { padding-top: 82px; } .pic-footer-brand-card { flex-direction: column; text-align: center; gap: 16px; padding: 23px 14px; margin-top: -117px; } .pic-footer-brand-card .pic-social-list { justify-content: center; } .pic-footer-nav-heading { font-size: 16px; } .pic-footer-links { gap: 10px; } .pic-footer-page-link { padding: 12px 10px; font-size: 12px; } .pic-footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 340px) { .pic-footer-links { grid-template-columns: 1fr; } }