/* =================================================================== Insight City — shared stylesheet Premium, fast, RTL-ready (logical properties only). Theme + per-language fonts are set via :root on each page. =================================================================== */ :root { /* Palette — warm ivory + deep ink-navy + gold */ --ivory: #f7f4ee; --ivory-2: #efeae0; --ivory-3: #e6dfd1; --ink: #11161d; --ink-soft: #2b333d; --ink-muted: #5b626d; --navy: #0f1b2d; --navy-2: #16263d; --gold: #bf9b56; --gold-deep: #8a6d2f; --gold-text: #715820; /* darker gold for eyebrow/label text on ivory (AA contrast) */ --line: rgba(17, 22, 29, 0.12); --line-strong: rgba(17, 22, 29, 0.28); --on-dark: #f4efe5; --on-dark-mut: rgba(244, 239, 229, 0.66); /* Fonts — overridden per language in page */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --container: 1200px; --gutter: 40px; --radius: 14px; --radius-lg: 22px; --shadow: 0 18px 50px -24px rgba(15, 27, 45, 0.45); --shadow-soft: 0 10px 30px -18px rgba(15, 27, 45, 0.35); } * , *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select, button { font: inherit; } a { color: inherit; text-decoration: none; } body { font-family: var(--font-body); color: var(--ink); background: var(--ivory); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; } h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); } h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 120px); } .eyebrow { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); } .lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 62ch; } .muted { color: var(--ink-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 100px; font-weight: 600; font-size: 1rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; } .btn--primary { background: var(--navy); color: var(--on-dark); box-shadow: var(--shadow-soft); } .btn--primary:hover { background: var(--navy-2); transform: translateY(-2px); } .btn--gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #1c1408; } .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(167,133,63,.7); } .btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); } .btn--wa { background: #25d366; color: #06351a; } .btn--block { width: 100%; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 244, 238, 0.82); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; } .brand b { color: var(--navy); } .brand span { color: var(--gold-deep); } .brand small { font-family: var(--font-body); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: .96rem; color: var(--ink-soft); transition: color .15s; } .nav-links a:hover { color: var(--gold-deep); } .nav-actions { display: flex; align-items: center; gap: 14px; } .lang-switch { display: flex; gap: 4px; align-items: center; font-size: .82rem; font-weight: 600; } .lang-switch a { padding: 5px 9px; border-radius: 8px; color: var(--ink-muted); } .lang-switch a[aria-current="true"] { background: var(--navy); color: var(--on-dark); } .nav-toggle { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; color: var(--on-dark); /* Реальный кадр Downtown / Burj Khalifa на закате под бренд-вуалью. Вуаль чисто вертикальная (RTL-safe): темнее сверху (навигация/H1) и снизу (форма поиска + trust-цифры), середина приоткрыта ~34% — видно башню и зарево. */ background: linear-gradient(180deg, rgba(8,12,22,.74) 0%, rgba(8,12,22,.46) 34%, rgba(8,12,22,.60) 64%, rgba(8,12,22,.88) 100%), url(img/districts/downtown.jpg) center 38% / cover no-repeat, #0c1626; overflow: hidden; } .hero::after { content: ""; position: absolute; inset-inline-end: -120px; top: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(191,155,86,.22), transparent 65%); pointer-events: none; } /* Лёгкое зерно поверх фото-кадра, чтобы JPEG не выглядел плоско (frontend-design: grain против цифровой плоскости). Силуэт-SVG убран — у фото свой скайлайн. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.04'/%3E%3C/svg%3E") top left / 180px 180px repeat; } .hero-inner { padding-block: clamp(72px, 12vw, 150px); position: relative; z-index: 1; } .hero .eyebrow { color: var(--gold); text-shadow: 0 1px 8px rgba(0,0,0,.45); } .hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--on-dark); max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.55); } .hero p.lede { color: var(--on-dark-mut); margin-top: 22px; max-width: 54ch; text-shadow: 0 1px 14px rgba(0,0,0,.5); } .hero-trust { display: flex; flex-wrap: wrap; gap: 26px 38px; margin-top: 38px; } .hero-trust div { display: flex; flex-direction: column; } .hero-trust b { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold); line-height: 1; } .hero-trust span { font-size: .82rem; color: var(--on-dark-mut); margin-top: 6px; letter-spacing: .02em; } /* Hero search card */ .search-card { margin-top: 44px; background: rgba(247,244,238,.97); color: var(--ink); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: end; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); } .field select, .field input { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 13px; background: #fff; color: var(--ink); width: 100%; } .field select:focus, .field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } /* keyboard focus visibility (a11y) — all interactive elements */ a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible, summary:focus-visible, .nav-toggle:focus-visible, .lang-switch a:focus-visible, .mobile-bar a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 6px; } .search-card .btn { height: 46px; } /* ---------- Generic grid cards ---------- */ .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-soft); } .card h3 { margin-bottom: 10px; } .card .num { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-deep); } /* District tiles */ .district { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; color: #fff; padding: 22px; background-size: cover; background-position: center; box-shadow: var(--shadow-soft); isolation: isolate; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; } .district::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 35%, rgba(7,12,20,.82)); z-index:-1; transition: background .35s ease; } .district > div { transition: transform .35s cubic-bezier(.2,.7,.3,1); } .district b { font-family: var(--font-display); font-size: 1.4rem; display:block; } .district span { font-size: .85rem; color: rgba(255,255,255,.82); } /* Match the "alive" hover the catalog/gallery cards already have, so the homepage district tiles don't read as static next to everything else. */ .district:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .district:hover::before { background: linear-gradient(180deg, transparent 22%, rgba(7,12,20,.9)); } .district:hover > div { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .district, .district > div, .district::before { transition: none; } .district:hover { transform: none; } .district:hover > div { transform: none; } } /* Answer capsule (GEO/AEO) */ .capsule { border-inline-start: 4px solid var(--gold); background: var(--ivory-2); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; max-width: 70ch; font-size: 1.06rem; color: var(--ink-soft); } /* Services list */ .svc { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .svc .ic { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--ivory-2); display:grid; place-items:center; color: var(--gold-deep); font-weight: 700; } .svc h3 { font-size: 1.15rem; } /* Steps / what happens after */ .steps { counter-reset: step; display: grid; gap: 16px; } .step { display: flex; gap: 16px; align-items: flex-start; } .step::before { counter-increment: step; content: counter(step); flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--on-dark); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; } /* ---------- Lead form (dark band) ---------- */ .lead { background: radial-gradient(120% 120% at 0% 0%, #16263d, #0c1626 60%, #080e18); color: var(--on-dark); } .lead .eyebrow { color: var(--gold); } .lead h2 { color: var(--on-dark); } .lead p { color: var(--on-dark-mut); } .lead-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; } .form-card { background: rgba(247,244,238,.98); color: var(--ink); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); } .form-steps { display: flex; gap: 8px; margin-bottom: 22px; } .form-steps i { height: 4px; flex: 1; border-radius: 2px; background: var(--ivory-3); } .form-steps i.on { background: var(--gold); } .form-progress-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px; } .calc-cta { margin-top: 16px; width: 100%; justify-content: center; } .ic-pop { animation: icpop .45s cubic-bezier(.2,.9,.3,1.3) both; } @keyframes icpop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ic-pop { animation: none; } } .fstep { display: none; } .fstep.active { display: block; animation: fade .3s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .chip { border: 1px solid var(--line-strong); border-radius: 100px; padding: 9px 16px; font-size: .92rem; transition: all .15s; } .chip[aria-pressed="true"] { background: var(--navy); color: var(--on-dark); border-color: var(--navy); } .form-card label.lbl { font-size: .74rem; font-weight: 700; letter-spacing:.08em; text-transform: uppercase; color: var(--ink-muted); display:block; margin: 16px 0 7px; } .form-card input, .form-card select, .form-card textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 13px; background:#fff; } .form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; } .after-list { display: grid; gap: 18px; margin-top: 26px; } .after-list .step::before { background: var(--gold); color: #1c1408; } /* ---------- FAQ ---------- */ .faq details { border-bottom: 1px solid var(--line); padding: 6px 0; } .faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 1.1rem; display:flex; justify-content: space-between; gap: 16px; align-items:center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.4rem; color: var(--gold-deep); transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { padding-bottom: 18px; color: var(--ink-soft); max-width: 72ch; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy); color: var(--on-dark); padding-block: 56px 32px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .site-footer a { color: var(--on-dark-mut); } .site-footer a:hover { color: var(--gold); } .site-footer h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--on-dark-mut); } .disclaimer { font-size: .78rem; color: rgba(244,239,229,.68); max-width: 80ch; margin-top: 14px; } /* ---------- Sticky mobile action bar ---------- */ .mobile-bar { display: none; } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--ivory-2); border-block: 1px solid var(--line); } .trust-strip .container { display:flex; flex-wrap: wrap; align-items:center; justify-content: space-between; gap: 18px; padding-block: 18px; } .trust-strip .t { display:flex; align-items:center; gap: 10px; font-size: .92rem; color: var(--ink-soft); font-weight: 500; } .trust-strip .t b { color: var(--gold-deep); } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .search-card { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .lead-grid { grid-template-columns: 1fr; gap: 32px; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { :root { --gutter: 22px; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } .search-card { grid-template-columns: 1fr; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } body { padding-bottom: 68px; } .mobile-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--line-strong); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.4); } .mobile-bar a { background: var(--ivory); display:flex; flex-direction:column; align-items:center; gap:3px; padding: 10px 4px; font-size: .72rem; font-weight: 600; color: var(--ink); } .mobile-bar a.wa { background:#25d366; color:#06351a; } .mobile-bar a.call { background: var(--navy); color: var(--on-dark); } } /* =================================================================== Catalog page =================================================================== */ .cat-head { background: radial-gradient(120% 120% at 80% 0%, #1b3553 0%, #0c1626 60%, #080e18); color: var(--on-dark); } .cat-head .container { padding-block: clamp(40px, 7vw, 72px); } .cat-head .eyebrow { color: var(--gold); } .cat-head h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3rem); color: var(--on-dark); max-width: 20ch; } .cat-head p { color: var(--on-dark-mut); margin-top: 12px; max-width: 60ch; } .cat-toolbar { position: sticky; top: 72px; z-index: 30; background: rgba(247,244,238,.92); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); } .cat-toolbar .container { padding-block: 16px; } .cat-filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; } .cat-filters .field label { font-size: .68rem; } .cat-filters select { border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 11px; background: #fff; width: 100%; } .cat-filters select:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .cat-subbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .cat-subbar .res { font-size: .95rem; color: var(--ink-soft); } .cat-subbar .res b { color: var(--ink); font-weight: 700; } .cat-subbar .right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cat-subbar select { border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 11px; background: #fff; } .cat-reset { font-size: .88rem; color: var(--gold-deep); font-weight: 600; } .cat-reset:hover { text-decoration: underline; } .lc-grid { margin-top: 0; } .cat-results.lc-grid { padding-block: clamp(34px, 5vw, 56px); } /* Listing card */ .lc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .18s ease, box-shadow .18s ease; } .lc:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .lc-img { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; } .lc-badge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; background: rgba(247,244,238,.94); color: var(--ink); font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 100px; letter-spacing: .02em; } .lc-badge--off { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1c1408; } .lc-roi { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; background: rgba(12,22,38,.78); color: var(--gold); font-size: .76rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; } .lc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .lc-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1; } .lc h3 { font-size: 1.08rem; line-height: 1.25; } .lc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--ink-muted); } .lc-meta span { position: relative; } .lc-meta span + span::before { content: "·"; position: absolute; inset-inline-start: -9px; } .lc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .84rem; } .lc-id { color: var(--ink-muted); letter-spacing: .04em; } .lc-cta { color: var(--gold-deep); font-weight: 600; } .lc-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-muted); padding: 60px 0; } /* =================================================================== Property detail page =================================================================== */ .pd-crumb { padding-block: 22px 4px; font-size: .86rem; color: var(--ink-muted); } .pd-crumb a:hover { color: var(--gold-deep); } .pd-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 14px; } .pd-main { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background-size: cover; background-position: center; box-shadow: var(--shadow-soft); } .pd-main .lc-badge { inset-block-start: 16px; inset-inline-start: 16px; } .pd-thumbs { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: 1fr 1fr; gap: 14px; } .pd-thumbs > div { border-radius: var(--radius); background-size: cover; background-position: center; min-height: 90px; } .pd-thumb-more { display: grid; place-items: center; background: var(--ivory-2) !important; color: var(--ink-soft); font-weight: 600; font-size: .9rem; border: 1px solid var(--line); } .pd-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 48px; padding-block: clamp(36px, 5vw, 60px); align-items: start; } .pd-left .eyebrow { color: var(--gold-deep); } .pd-left h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; margin-top: 4px; } .pd-price { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--navy); margin-top: 14px; } .pd-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px; } .pd-specs > div { background: #fff; padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; } .pd-specs span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .pd-specs b { font-size: 1.02rem; } .pd-h2 { font-size: 1.5rem; margin-top: 40px; margin-bottom: 14px; } .pd-feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; } .pd-feat li { position: relative; padding-inline-start: 26px; color: var(--ink-soft); } .pd-feat li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--gold-deep); font-weight: 700; } .pd-plan { width: 100%; border-collapse: collapse; } .pd-plan td { padding: 13px 4px; border-bottom: 1px solid var(--line); } .pd-plan td:last-child { text-align: end; font-weight: 700; color: var(--navy); white-space: nowrap; } .pd-aside { position: sticky; top: 92px; } .pd-cta { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); } .pd-cta-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--navy); } .pd-cta .btn { margin-top: 16px; } .pd-incl { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .pd-incl ul { display: grid; gap: 8px; } .pd-incl li { position: relative; padding-inline-start: 22px; font-size: .92rem; color: var(--ink-soft); } .pd-incl li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--gold-deep); } .pd-cur { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; font-size: .82rem; font-weight: 600; color: var(--ink-muted); } .pd-cur select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; background: #fff; } @media (max-width: 980px) { .cat-filters { grid-template-columns: repeat(3, 1fr); } .pd-gallery { grid-template-columns: 1fr; } .pd-thumbs { grid-template-rows: 1fr; } .pd-grid { grid-template-columns: 1fr; gap: 32px; } .pd-aside { position: static; } } @media (max-width: 720px) { .cat-filters { grid-template-columns: 1fr 1fr; } .cat-toolbar { position: static; } .pd-specs, .pd-feat { grid-template-columns: 1fr; } } /* Guide article body */ .guide-body .guide-sec { margin-top: 38px; } .guide-body .guide-sec h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 14px; } .guide-body .guide-sec p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.7; margin-bottom: 14px; max-width: 68ch; } .guide-body .guide-sec ul, .guide-body .guide-sec ol { max-width: 68ch; } .guide-body .guide-sec ul { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.7; padding-inline-start: 22px; } .guide-body .guide-sec li { margin-bottom: 10px; list-style: disc; } /* =================================================================== "Alive" layer — trust, social proof, desire, micro-interactions (added per MASTER-PROMPT §1–§2: Cialdini + CRO + microinteractions) =================================================================== */ /* Scroll-reveal (respects reduced motion) */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* "Manager online" badge (hero) */ .online { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font-size: .86rem; color: var(--on-dark-mut); font-weight: 500; } .online .dot { width: 9px; height: 9px; border-radius: 50%; background: #36d07b; box-shadow: 0 0 0 0 rgba(54,208,123,.6); animation: pulse 2.2s infinite; } .online b { color: var(--on-dark); font-weight: 600; } .online-status { color: var(--on-dark); font-weight: 600; } .online.is-off .dot { background: #c9a23f; animation: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(54,208,123,.55); } 70% { box-shadow: 0 0 0 9px rgba(54,208,123,0); } 100% { box-shadow: 0 0 0 0 rgba(54,208,123,0); } } /* Live social-proof ticker (rotating) */ .proof { background: var(--navy); color: var(--on-dark); border-block: 1px solid rgba(255,255,255,.08); overflow: hidden; } .proof .container { display: flex; align-items: center; gap: 16px; padding-block: 11px; } .proof .live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .proof .live .dot { width: 7px; height: 7px; border-radius: 50%; background: #36d07b; animation: pulse 2.2s infinite; } .proof .feed { position: relative; flex: 1; height: 1.5em; overflow: hidden; } .proof .feed span { position: absolute; inset-inline: 0; top: 0; font-size: .9rem; color: var(--on-dark-mut); opacity: 0; transform: translateY(100%); transition: opacity .5s, transform .5s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proof .feed span.show { opacity: 1; transform: none; } .proof .feed b { color: var(--on-dark); font-weight: 600; } /* Developer / partner logos (authority) */ .logos-strip { padding-block: 34px; border-bottom: 1px solid var(--line); } .logos-strip p.cap { text-align: center; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin-bottom: 20px; } .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 46px; } .logos span { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); opacity: .62; filter: grayscale(1); transition: opacity .2s, filter .2s, transform .2s; } .logos span:hover { opacity: 1; filter: none; transform: translateY(-2px); color: var(--navy); } /* Google rating + reviews (social proof) */ .rating { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; } .rating .stars { color: var(--gold); font-size: 1.2rem; letter-spacing: 2px; } .rating .score { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); } .rating .src { font-size: .9rem; color: var(--ink-muted); } .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; } .review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 14px; } .review .stars { color: var(--gold); font-size: .95rem; letter-spacing: 1px; } .review p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; } .review .who { display: flex; align-items: center; gap: 12px; margin-top: auto; } .review .av { flex: 0 0 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); } /* Honest credibility cards — replaced fabricated star reviews with verifiable facts (UAE Law 15/2020: advertising claims must be substantiated; no fake trust signals). */ .trust-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; } .tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-soft); } .tcard b { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--gold-text); } .tcard span { display: block; margin-top: 10px; font-size: .9rem; line-height: 1.5; color: var(--ink-muted); } @media (max-width: 760px) { .trust-cards { grid-template-columns: repeat(2, 1fr); } } .review .who b { display: block; font-size: .96rem; } .review .who span { font-size: .82rem; color: var(--ink-muted); } /* Calculators (engagement / reciprocity / commitment) */ .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; } .calc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-soft); } .calc h3 { margin-bottom: 6px; } .calc .hint { font-size: .9rem; color: var(--ink-muted); margin-bottom: 18px; } .calc .row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .calc .row label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .calc .row input, .calc .row select { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 13px; background: #fff; width: 100%; } .calc .row input:focus, .calc .row select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } .calc .range-val { font-weight: 700; color: var(--navy); } .calc .out { background: var(--ivory-2); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 4px; } .calc .out div { display: flex; flex-direction: column; } .calc .out span { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); } .calc .out b { font-family: var(--font-display); font-size: 1.55rem; color: var(--gold-deep); line-height: 1.1; } .calc .disc { font-size: .76rem; color: var(--ink-muted); margin-top: 14px; } /* Stats counters (about) reuse .hero-trust b styling but on light */ .statline { display: flex; flex-wrap: wrap; gap: 22px 44px; margin-top: 26px; } .statline div { display: flex; flex-direction: column; } .statline b { font-family: var(--font-display); font-size: 2.1rem; color: var(--gold-deep); line-height: 1; } .statline span { font-size: .86rem; color: var(--ink-muted); margin-top: 6px; } /* Urgency / "why now" band (ethical, factual) */ .urgency { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #1c1408; } .urgency .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding-block: 16px; text-align: center; } .urgency b { font-weight: 700; } .urgency .pill { background: rgba(28,20,8,.14); border-radius: 100px; padding: 5px 14px; font-size: .86rem; font-weight: 600; } /* News teaser (auto-news engine, MASTER-PROMPT §4) */ .news-teaser .grid { margin-top: 34px; } .news-card { display: flex; flex-direction: column; gap: 10px; } .news-card time { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; } .news-card h3 { font-size: 1.15rem; line-height: 1.3; } .news-card .src { font-size: .82rem; color: var(--ink-muted); margin-top: auto; } @media (max-width: 980px) { .reviews { grid-template-columns: 1fr 1fr; } .calc-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .reviews { grid-template-columns: 1fr; } .proof .container { gap: 12px; } } /* RTL niceties (logical props handle most; a couple of fixes) */ [dir="rtl"] .eyebrow::before { transform: none; } [dir="rtl"] .hero h1, [dir="rtl"] .hero p.lede { max-width: 22ch; } [dir="rtl"] .pd-crumb { direction: rtl; } /* =================================================================== Living office — real team/office media (trust via authenticity) =================================================================== */ .office-feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; margin-top: 36px; } .office-feature video { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; aspect-ratio: 16 / 10; object-fit: cover; background: var(--navy); } .office-feature h3 { margin-bottom: 6px; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; } .gcard { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; isolation: isolate; margin: 0; background: var(--ivory-2); } .gcard img, .gcard video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .gcard:hover img { transform: scale(1.05); } .gcard figcaption { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 14px 16px; color: #fff; font-size: .9rem; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(7,12,20,.85)); pointer-events: none; } @media (max-width: 980px) { .office-feature { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } } /* ===== Programmatic SEO spoke pages (type × district) ===== */ .crumbs { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.72); margin-bottom: 14px; } .crumbs a { color: rgba(255,255,255,.92); text-decoration: none; } .crumbs a:hover { color: var(--gold); } .price-guide { width: 100%; border-collapse: collapse; font-size: .95rem; max-width: 640px; } .price-guide th, .price-guide td { text-align: start; padding: 13px 16px; border-bottom: 1px solid var(--line); } .price-guide thead th { font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; } .price-guide tbody td:first-child { font-weight: 600; color: var(--ink); } .price-guide tbody td:last-child { color: var(--ink-soft); } .price-guide tbody tr:last-child td { border-bottom: 0; } .chip-links { line-height: 1.6; } .chip-link { display: inline-block; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none; background: #fff; transition: border-color .2s ease, color .2s ease, background .2s ease; } .chip-link:hover { border-color: var(--gold); color: var(--gold-deep); } .chip-link--hub { background: var(--ivory-2); border-color: var(--gold); color: var(--gold-deep); } .chip-link--static { color: var(--ink-muted); border-style: dashed; cursor: default; } .chip-link--static:hover { border-color: var(--line-strong); color: var(--ink-muted); } /* developer cards / rating */ .dev-card .lc-roi { background: rgba(15,27,45,.55); letter-spacing: .12em; } .dev-stars { color: var(--gold); letter-spacing: .08em; } /* active-filter pill (catalog) */ .cat-active:not(:empty) { margin-bottom: 22px; } .cat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; background: var(--ivory-2); border: 1px solid var(--gold); border-radius: 999px; font-size: .9rem; color: var(--ink); } .cat-pill__lbl { color: var(--ink-muted); font-weight: 600; } .cat-pill b { font-weight: 700; } .cat-pill__x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-inline-start: 2px; border: 0; border-radius: 999px; background: var(--gold); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .2s ease; } .cat-pill__x:hover { background: var(--gold-deep); } /* ===== Premium visual pass (refactoring-ui: depth, image treatment, hierarchy) ===== */ /* Brand wordmark stays "Insight City" even in RTL */ .brand { direction: ltr; } /* Listing/area card image: turn flat gradient tiles into dimensional, on-brand tiles */ .lc-img { isolation: isolate; } .lc-img::before { /* soft top-left sheen for depth */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 85% at 22% 8%, rgba(255,255,255,.18), transparent 58%); } .lc-img::after { /* faint Dubai skyline watermark + bottom vignette */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url(img/skyline.svg) bottom center / 100% auto no-repeat, linear-gradient(180deg, transparent 48%, rgba(7,12,20,.42)); } .lc-img > * { position: relative; z-index: 2; } /* keep badges/labels above overlays */ .lc:hover .lc-img::after { background-position-y: bottom, 0; } /* View label (from listing data) — bottom-left, balances the ROI chip */ .lc-view { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; background: rgba(12,22,38,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #f4efe5; font-size: .72rem; font-weight: 600; letter-spacing: .01em; padding: 4px 10px; border-radius: 8px; } /* District tile (pillar) — name as the hero of the tile */ .lc--area .lc-img { aspect-ratio: 16 / 10; } .lc-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px; } .lc-ov b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,.45); } .lc-ov small { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } /* Sparse result grids (1–2 items): center instead of leaving an empty column */ .lc-grid--few { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .lc-grid--few .lc { flex: 1 1 300px; max-width: 380px; } /* Hero band depth — subtle radial light so the dark gradient reads dimensional */ .cat-head { position: relative; overflow: hidden; isolation: isolate; } .cat-head::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 120% at 88% -10%, rgba(201,162,77,.16), transparent 55%), url(img/skyline.svg) bottom center / 1100px auto no-repeat; opacity: .9; } .cat-head .container { position: relative; z-index: 1; } /* Photo hero: real district image behind the brand veil — drop the decorative skyline silhouette (would double up over the photo) and shadow text for legibility */ .cat-head--photo::after { background: radial-gradient(80% 120% at 88% -10%, rgba(201,162,77,.12), transparent 55%); opacity: 1; } .cat-head--photo h1, .cat-head--photo p, .cat-head--photo .eyebrow, .cat-head--photo .crumbs { text-shadow: 0 1px 14px rgba(4,10,20,.55), 0 1px 3px rgba(4,10,20,.45); } /* ===== Listing media: real render when present, branded placeholder otherwise (no "black screens") ===== */ .lc-ph, .pd-ph { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 16px; pointer-events: none; } .lc-ph b, .pd-ph b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: #fff; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,.45); } .pd-ph b { font-size: 1.7rem; } .lc-ph small, .pd-ph small { font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .pd-ph small { font-size: .72rem; } /* When a real photo is set, drop the skyline watermark + sheen, keep a light readability vignette */ .lc-img--photo::before { display: none; } .lc-img--photo::after { background: linear-gradient(180deg, transparent 55%, rgba(7,12,20,.42)); } /* Property page: floor plan + brochure */ .pd-floorplan { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .pd-floorplan img { width: 100%; height: auto; display: block; } .pd-brochure { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 10px; padding: 13px 20px; border-radius: 100px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--ink); transition: border-color .18s, background .18s; } .pd-brochure:hover { border-color: var(--gold); background: var(--ivory-2); } .pd-brochure::before { content: "⤓"; font-size: 1.1em; } /* =================================================================== Conversion + "alive" layer (injected by app.js; RTL-safe) =================================================================== */ /* Reading / scroll progress — thin gold bar pinned to the very top */ .scroll-progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 200; block-size: 3px; inline-size: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 10px -2px rgba(191,155,86,.7); transition: inline-size .12s linear; will-change: inline-size; pointer-events: none; } /* "Updated today" freshness chip inside the live proof strip */ .proof .fresh { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--on-dark-mut); white-space: nowrap; } .proof .fresh::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(191,155,86,.6); animation: pulse 2.6s infinite; } @media (max-width: 720px) { .proof .fresh { display: none; } } /* Lead nudge — tasteful dismissible slide-in (not a full-screen modal) */ .ic-nudge { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 80; inline-size: min(340px, calc(100vw - 32px)); background: var(--navy); color: var(--on-dark); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px 20px 18px; transform: translateY(140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; } .ic-nudge.in { transform: none; opacity: 1; } .ic-nudge h4 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.15; margin-bottom: 8px; } .ic-nudge p { font-size: .9rem; color: var(--on-dark-mut); margin-bottom: 14px; } .ic-nudge .btn { inline-size: 100%; justify-content: center; } .ic-nudge .ic-nudge-x { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; inline-size: 30px; block-size: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; color: var(--on-dark-mut); transition: color .15s, background .15s; } .ic-nudge .ic-nudge-x:hover { color: #fff; background: rgba(255,255,255,.1); } @media (max-width: 720px) { .ic-nudge { inset-block-end: 80px; inset-inline: 12px; inline-size: auto; } } @media (prefers-reduced-motion: reduce) { .ic-nudge { transition: opacity .3s; transform: none; } .scroll-progress { transition: none; } } /* --- PDPL consent checkbox + footer legal links --- */ .consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: .78rem; line-height: 1.45; color: var(--ink-muted); cursor: pointer; } .consent input[type="checkbox"] { flex: 0 0 auto; inline-size: 16px; block-size: 16px; margin-block-start: .15em; accent-color: var(--gold-deep); } .consent a { color: var(--gold-text); text-decoration: underline; } .consent.invalid { color: #c0392b; } .consent.invalid input[type="checkbox"] { outline: 2px solid #c0392b; outline-offset: 1px; } .foot-legal { margin-top: 10px; font-size: .8rem; } .foot-legal a { color: var(--on-dark-mut); text-decoration: underline; } .foot-legal a:hover { color: #fff; }