/* Di Real Estate — design tokens & site styles. Brand: primary dark navy #1a1a2e, gold accent #c9a84c. Light and dark theme: the dark one follows the device setting (prefers-color-scheme) and only redefines the tokens. RTL-ready: use logical properties (inline-start/end), never left/right margins. */ :root { --color-primary: #1a1a2e; --color-primary-soft: #2a2a44; --color-accent: #c9a84c; --color-accent-dark: #b3923c; /* Gold for text on light backgrounds: #b3923c reads at only 2.9:1 on white, this at 5:1. */ --color-accent-text: #8a6d1f; --color-bg: #ffffff; --color-surface: #f5f5f8; --color-line: #e6e6ee; --color-text: #23233a; --color-text-muted: #6f6f84; --color-ok: #1d7a3e; --color-error: #b3261e; /* Text roles. --color-primary is the navy used for fills (active pills, footer…); headings, prices and links use --color-ink so the dark theme can lighten them without touching the fills. --color-on-light is for text on gold or on the white buttons laid over photos, which stay light in both themes. */ --color-ink: #1a1a2e; --color-on-light: #1a1a2e; --color-footer: #1a1a2e; --color-ok-bg: #eaf6ee; --color-ok-text: #1d5b33; --color-error-bg: #fbeaea; --color-error-text: #8a1f1f; --color-gold-soft: #f7f1e1; --color-gold-ink: #6b5518; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 12px; --container-max: 1200px; /* One spacing ladder for the whole site, so gutters, gaps and section rhythm are multiples of the same step instead of ad-hoc numbers. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; } /* Theme: the visitor's choice (cookie "theme" → , see js/theme.js) wins; without a choice the device setting decides. The dark tokens are written twice because CSS can't share one block between a selector and a media query. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #2b2b4d; --color-primary-soft: #3a3a62; --color-accent-dark: #d9ba62; --color-accent-text: #d9ba62; --color-bg: #101019; --color-surface: #1a1a27; --color-line: #2d2d42; --color-text: #e3e3ec; --color-text-muted: #a2a2b8; --color-ok: #5fc585; --color-error: #ff8a80; --color-ink: #f3f3f8; --color-footer: #0a0a12; --color-ok-bg: #15301f; --color-ok-text: #9fe0b4; --color-error-bg: #3a1717; --color-error-text: #ffb4ab; --color-gold-soft: #2c2616; --color-gold-ink: #e2c572; } } :root[data-theme="dark"] { --color-primary: #2b2b4d; --color-primary-soft: #3a3a62; --color-accent-dark: #d9ba62; --color-accent-text: #d9ba62; --color-bg: #101019; --color-surface: #1a1a27; --color-line: #2d2d42; --color-text: #e3e3ec; --color-text-muted: #a2a2b8; --color-ok: #5fc585; --color-error: #ff8a80; --color-ink: #f3f3f8; --color-footer: #0a0a12; --color-ok-bg: #15301f; --color-ok-text: #9fe0b4; --color-error-bg: #3a1717; --color-error-text: #ffb4ab; --color-gold-soft: #2c2616; --color-gold-ink: #e2c572; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { color: var(--color-ink); } .wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: 24px; } .section { padding-block: var(--space-7) var(--space-2); } .section--narrow { max-width: 46rem; padding-block: 56px; } .btn { display: inline-block; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--color-on-light); background: var(--color-accent); border: 0; border-radius: 8px; padding: 11px 26px; cursor: pointer; text-decoration: none; text-align: center; } .btn:hover { background: var(--color-accent-dark); } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn--ghost { background: transparent; border: 1px solid var(--color-line); color: var(--color-ink); } .btn--ghost:hover { border-color: var(--color-accent); background: transparent; } .btn--ghost-light { color: #fff; border-color: rgba(255,255,255,0.4); } .btn--ghost-light:hover { border-color: var(--color-accent); } .btn--whatsapp { background: #22b358; color: #fff; } .btn--whatsapp:hover { background: #1c9a4b; } /* ---------- header ---------- */ .site-header { border-block-end: 1px solid var(--color-line); } /* Three zones of equal weight (brand | nav | tools) so the nav is centred on the page rather than on whatever space the brand and the tool cluster happen to leave. */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); padding-block: var(--space-3); } .site-header__brand { justify-self: start; display: inline-flex; } .site-header__logo { height: 52px; width: auto; display: block; } .site-header__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); } .nav { display: flex; align-items: center; justify-content: center; gap: var(--space-5); } .nav > a, .nav-item > a { color: var(--color-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding-block: 14px; border-block-end: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; } .nav > a:hover, .nav-item > a:hover { color: var(--color-ink); } .nav .caret { font-size: 0.6rem; color: var(--color-text-muted); } .nav-item { position: relative; } .dropdown { position: absolute; top: 100%; inset-inline-start: -10px; min-width: 230px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(26,26,46,0.14); padding: 8px; display: none; z-index: 60; } .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { display: grid; gap: 2px; } .dropdown a { display: block; padding: 9px 12px; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.88rem; font-weight: 500; } .dropdown a:hover { background: var(--color-surface); color: var(--color-ink); } .dropdown a small { display: block; font-size: 0.72rem; color: var(--color-text-muted); font-weight: 400; } .dropdown .dd-divider { height: 1px; background: var(--color-line); margin: 6px 4px; } /* Language switcher flags. Source SVGs range from 2:1 to 11:8, so they are cropped into one 20x14 box — a shared size matters more here than each flag's true ratio. The hairline ring keeps white-edged flags (GB, IL) from dissolving into the menu. */ .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: none; background: var(--color-surface); box-shadow: 0 0 0 1px rgba(26,26,46,0.12); } .lang-current { display: inline-flex; align-items: center; gap: 7px; } .lang-switch .dropdown a { display: flex; align-items: center; gap: 10px; } /* Theme switch (light / dark / automatic), next to the language switcher. */ /* Written against .nav-item > a, which would otherwise add its padding and underline border. */ .theme-switch .theme-current { display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); } .theme-switch .theme-current:hover { border-color: var(--color-accent); } .theme-current [data-theme-current] { display: grid; place-items: center; } .theme-switch .dropdown { min-width: 170px; } .theme-switch .dropdown a { display: flex; align-items: center; gap: 10px; } .theme-switch .dropdown a.on { color: var(--color-ink); font-weight: 700; background: var(--color-surface); } .theme-icon { inline-size: 18px; block-size: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-icon__fill { fill: currentColor; stroke: none; } .nav-vip { color: var(--color-accent-text) !important; font-weight: 700 !important; letter-spacing: 0.08em; } .nav-vip:hover { color: var(--color-accent) !important; } .header-tools { display: flex; align-items: center; gap: 14px; } .header-tools .btn--ghost { padding: 8px 16px; font-size: 0.85rem; } .social-links { display: flex; align-items: center; gap: 6px; } /* 24px hit area around each 18px icon: the minimum touch-target size (WCAG 2.5.8). */ .social { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; color: var(--color-text-muted); } .social:hover { color: var(--color-ink); } .social svg { width: 18px; height: 18px; fill: currentColor; display: block; } .lang-switch .lang-current { text-decoration: none; color: var(--color-text); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; border: 1px solid var(--color-line); border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 5px; } .lang-switch .lang-current:hover { border-color: var(--color-accent); } .dropdown--end { inset-inline-start: auto; inset-inline-end: 0; min-width: 160px; } .dropdown a.on { background: var(--color-surface); font-weight: 700; } .footer-legal { display: flex; gap: 8px; align-items: baseline; } .footer-legal a { color: #b9b9cd; } .footer-legal a:hover { color: var(--color-accent); } .footer-credit { color: #8f8fa8; } .footer-credit a { color: #b9b9cd; font-weight: 600; } .footer-credit a:hover { color: var(--color-accent); } /* ---------- legal pages ---------- */ .legal h2 { font-size: 1.05rem; color: var(--color-ink); margin: 28px 0 8px; } .legal p, .legal li { font-size: 0.93rem; } .legal ul { padding-inline-start: 20px; } .legal li { margin-block: 6px; } .legal code { background: var(--color-surface); border-radius: 4px; padding: 1px 6px; font-size: 0.85em; } .mobile-nav { display: none; position: relative; } .mobile-nav summary { list-style: none; cursor: pointer; font-size: 1.3rem; color: var(--color-ink); padding: 6px 10px; border: 1px solid var(--color-line); border-radius: 8px; } .mobile-nav summary::-webkit-details-marker { display: none; } .mobile-nav[open] summary { border-color: var(--color-accent); } .mobile-nav__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(26,26,46,0.14); padding: 10px; display: grid; gap: 2px; z-index: 70; } .mobile-nav__panel a { text-decoration: none; color: var(--color-ink); font-weight: 600; font-size: 0.92rem; padding: 8px 10px; border-radius: 7px; } .mobile-nav__panel a.sub { font-weight: 400; color: var(--color-text); padding-inline-start: 22px; font-size: 0.86rem; } .mobile-nav__panel a:hover { background: var(--color-surface); } .mobile-theme { border-block-start: 1px solid var(--color-line); margin-block-start: 6px; padding: 10px 4px 2px; } .mobile-theme__label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-block-end: 8px; } .mobile-theme__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .mobile-nav__panel .mobile-theme__options a { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--color-line); border-radius: 9px; font-size: 0.74rem; font-weight: 600; color: var(--color-text); } .mobile-nav__panel .mobile-theme__options a.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .mobile-nav__panel a.vip-link { color: var(--color-accent-text); letter-spacing: 0.08em; } /* ---------- hero ---------- */ .hero-banner { position: relative; /* The page's largest image, so its size follows the screen (WebP 800 / 1200 / 1920) and Home/Index.cshtml preloads the same file; keep the two in step. */ --hero-image: url("/assets/hero-banner-800.webp"); background-image: linear-gradient(180deg, rgba(26,26,46,0.62) 0%, rgba(26,26,46,0.38) 55%, rgba(26,26,46,0.55) 100%), var(--hero-image); background-size: cover; background-position: center 62%; color: #fff; padding-block: 104px 124px; text-align: center; } @media (min-width: 701px) { .hero-banner { --hero-image: url("/assets/hero-banner-1200.webp"); } } @media (min-width: 1301px) { .hero-banner { --hero-image: url("/assets/hero-banner-1920.webp"); } } .hero-banner .eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin-block-end: 14px; } .hero-banner h1 { margin: 0 auto 14px; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em; font-weight: 800; max-width: 18ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(10,10,24,0.45); } .hero-banner p.lede { margin: 0 auto; font-size: 1.06rem; color: rgba(255,255,255,0.88); max-width: 52ch; text-shadow: 0 1px 12px rgba(10,10,24,0.5); } /* ---------- search card ---------- */ .search-card { margin-block-start: -64px; position: relative; z-index: 5; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(26,26,46,0.10); overflow: hidden; } /* Tabs are sized to their labels: three equal thirds turned a five-letter word into a 350px slab and made the card read as navigation rather than as a search box. */ .search-tabs { display: flex; flex-wrap: wrap; justify-content: center; background: var(--color-surface); border-block-end: 1px solid var(--color-line); } .search-tabs .tab { flex: 0 0 auto; font: inherit; font-size: 0.85rem; font-weight: 600; padding: 15px 30px; background: transparent; color: var(--color-text-muted); text-align: center; text-decoration: none; border: 0; border-inline-end: 1px solid var(--color-line); cursor: pointer; } .search-tabs .tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .search-tabs .tab:first-child { border-inline-start: 1px solid var(--color-line); } .search-tabs .tab:last-child { border-inline-end: 0; } .search-tabs .tab.on { background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 3px 0 var(--color-accent); } .search-panel[hidden] { display: none; } .search-subtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-5) var(--space-5) 0; } .search-subtabs .subtab { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 8px 18px; background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-line); border-radius: 999px; cursor: pointer; } .search-subtabs .subtab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .search-subtabs .subtab.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .search-fields { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: var(--space-4); padding: var(--space-5); align-items: end; } .search-fields[hidden] { display: none; } .field[hidden] { display: none; } .search-fields--wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } .search-fields--wrap .field--range { grid-column: span 2; } .search-fields--wrap .btn { align-self: end; } .search-fields--wrap .search-submit { grid-column: 1 / -1; justify-self: center; min-inline-size: 240px; } /* Suspended categories (yacht charter / car rental): the tab shows a notice, not filters. */ .search-soon { display: flex; align-items: center; gap: 18px; padding: 26px 22px; background: linear-gradient(180deg, var(--color-surface), var(--color-bg)); } .search-soon[hidden] { display: none; } .search-soon__ico { flex: none; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 12px; background: rgba(201,168,76,0.16); font-size: 1.35rem; } .search-soon__body { flex: 1; min-inline-size: 0; } .search-soon__badge { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); } .search-soon h3 { margin: 2px 0 4px; font-size: 1.05rem; color: var(--color-ink); } .search-soon p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); max-width: 62ch; } .search-soon .btn { flex: none; } .field label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-block-end: 6px; } .field select, .field input { width: 100%; font: inherit; font-size: 0.9rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 8px; padding: 10px 12px; } .field select:focus-visible, .field input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* Range pair: two controls over one ladder (min - max) sharing a single label. */ .range-pair { display: flex; align-items: center; gap: 6px; } .range-pair select, .range-pair input { flex: 1 1 0; min-inline-size: 0; padding-inline: 8px; } .range-sep { flex: none; color: var(--color-text-muted); font-size: 0.85rem; } /* ---------- listing cards ---------- */ .row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-block-end: 20px; } .row-head h2 { margin: 0; font-size: 1.45rem; letter-spacing: -0.015em; color: var(--color-ink); } .row-head a { color: var(--color-accent-text); font-size: 0.88rem; font-weight: 600; text-decoration: none; } .row-head a:hover { text-decoration: underline; } .page-title { margin: 0; font-size: 1.7rem; letter-spacing: -0.015em; color: var(--color-ink); } .page-sub { margin: 4px 0 0; color: var(--color-text-muted); font-size: 0.9rem; } /* 404 page */ .not-found { text-align: center; padding-block: 72px 96px; } .not-found__code { margin: 0 0 8px; font-size: clamp(4.5rem, 18vw, 7.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--color-accent); } .not-found .page-sub { max-width: 36rem; margin-inline: auto; margin-block-start: 10px; font-size: 1rem; } .not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 28px; } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block-end: var(--space-6); } .card { border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; background: var(--color-bg); transition: box-shadow 0.18s ease, transform 0.18s ease; } .card:hover { box-shadow: 0 12px 32px rgba(26,26,46,0.12); transform: translateY(-2px); } .card { display: flex; } .card-link { text-decoration: none; color: inherit; display: grid; grid-template-rows: auto 1fr; flex: 1; min-inline-size: 0; } .card-photo { aspect-ratio: 4 / 3; position: relative; background: var(--color-surface); } .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* gradient placeholders until real photos are uploaded */ .card-photo--empty.card-photo--real-estate { background: linear-gradient(135deg, #8fb4c6 0%, #5d8ba3 45%, #3d6a84 100%); } .card-photo--empty.card-photo--yachts { background: linear-gradient(135deg, #7ba3b8 0%, #37667e 60%, #24485c 100%); } .card-photo--empty.card-photo--cars { background: linear-gradient(135deg, #c4ccd6 0%, #8f9dae 50%, #5c6b80 100%); } .badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--color-primary); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } .badge--gold { background: var(--color-accent); color: var(--color-on-light); } .badge--inline { position: static; display: inline-block; } .card-body { padding: var(--space-4) 18px 18px; display: flex; flex-direction: column; flex: 1; } .card-loc { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 4px; } .card-title { margin: 0 0 10px; font-size: 1.02rem; font-weight: 600; color: var(--color-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--color-text-muted); margin-block-end: 12px; } .card-price { margin: auto 0 0; font-size: 1.15rem; font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; } .card-price span { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); } /* ---------- list page ---------- */ /* Filter panel: the homepage card without the hero overlap, so both pages present their search the same way. A lighter shadow -- here it sits on white, not on a photo. */ .filter-card { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: 0 6px 22px rgba(26,26,46,0.07); overflow: hidden; margin-block: var(--space-5) var(--space-6); } .type-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-5) var(--space-5) 0; } .type-tab { font-size: 0.85rem; font-weight: 600; color: var(--color-text); text-decoration: none; border: 1px solid var(--color-line); border-radius: 999px; padding: 7px 18px; } .type-tab:hover { border-color: var(--color-accent); } .type-tab.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* A grid, not wrapped flex: the category decides how many fields there are, and free wrapping left them at three different widths on two ragged rows. */ .filter-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: end; padding: var(--space-5); } .filter-bar .field--range { grid-column: span 2; } .filter-actions { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: var(--space-4); } .filter-bar .btn { min-inline-size: 240px; } .filter-clear { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); text-decoration: underline; } .filter-clear:hover { color: var(--color-ink); } .empty-state { text-align: center; padding: 64px 24px; background: var(--color-surface); border-radius: var(--radius); color: var(--color-text-muted); } .pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-block: 8px 40px; } .pager__gap { color: var(--color-text-muted); padding-inline: 2px; } /* Arrows point the reading direction: flipped for Arabic and Hebrew. */ [dir="rtl"] .pager__step { transform: scaleX(-1); } .pager a { min-width: 38px; text-align: center; padding: 8px 10px; border: 1px solid var(--color-line); border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; } .pager a.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Area landing pages: breadcrumb above the title, "browse by area" links under the results. */ .crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block-end: 6px; font-size: 0.82rem; color: var(--color-text-muted); } .row-head .crumbs a { color: var(--color-text-muted); font-size: inherit; font-weight: 500; } .row-head .crumbs a[aria-current] { color: var(--color-ink); } .area-links { border-block-start: 1px solid var(--color-line); padding-block: 24px 40px; } .area-links h2 { margin: 0 0 14px; font-size: 1.1rem; color: var(--color-ink); } .area-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .area-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); font-size: 0.88rem; text-decoration: none; } .area-links a span { color: var(--color-text-muted); font-size: 0.8rem; } .area-links a:hover { border-color: var(--color-accent); } .area-links a.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .area-links a.on span { color: rgba(255, 255, 255, 0.75); } /* ---------- detail page ---------- */ .crumbs { font-size: 0.82rem; color: var(--color-text-muted); margin-block-end: 18px; } .crumbs a { color: var(--color-text-muted); } .crumbs a:hover { color: var(--color-ink); } .photo-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 21 / 9; } .photo-grid > a, .photo-grid > .main { min-height: 0; display: block; } .photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-grid .main { grid-row: 1 / 3; position: relative; overflow: hidden; } .photo-grid .main-link { display: block; width: 100%; height: 100%; position: relative; z-index: 1; } /* Blur-fill: the photo keeps its own aspect ratio and sits centred, with a blurred copy of itself filling the rest of the frame. Nothing is cropped or zoomed. */ .main-slider img { object-fit: contain; } .main-bg { position: absolute; inset: -24px; z-index: 0; background-size: cover; background-position: center; filter: blur(22px) brightness(0.75); } .photo-grid--single { display: block; aspect-ratio: 16 / 9; } .photo-grid--single .main { height: 100%; } /* Slider / lightbox icons. Drawn as SVG rather than ‹› glyphs: the quote characters sit off the optical centre of their em box and render small inside the round button. The glyphs were auto-mirrored by bidi in RTL; SVG is not, so mirror it explicitly. */ .icon-chevron, .icon-close { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; display: block; } .slider-nav .icon-chevron { width: 20px; height: 20px; } .lightbox__nav .icon-chevron { width: 24px; height: 24px; } .lightbox__close .icon-close { width: 18px; height: 18px; stroke-width: 2; } [dir="rtl"] .icon-chevron { transform: scaleX(-1); } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--color-on-light); background: rgba(255,255,255,0.9); border: 0; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(15,15,28,0.25); } .slider-nav:hover { background: #fff; } .slider-nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .slider-nav--prev { inset-inline-start: 12px; } .slider-nav--next { inset-inline-end: 12px; } .slider-count { position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 2; background: rgba(15,15,28,0.65); color: #fff; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px; pointer-events: none; } .photo-grid--empty { display: grid; place-items: center; aspect-ratio: 21 / 9; color: rgba(255,255,255,0.85); font-weight: 600; } .see-all { position: absolute; bottom: 14px; inset-inline-end: 14px; background: rgba(255,255,255,0.95); color: var(--color-on-light); font: inherit; font-size: 0.78rem; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-line); cursor: pointer; } .see-all:hover { border-color: var(--color-accent); } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15, 15, 28, 0.94); display: flex; align-items: center; justify-content: center; } .lightbox[hidden] { display: none; } .lightbox__img { max-width: min(92vw, 1600px); max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .lightbox__close, .lightbox__nav { position: absolute; font: inherit; font-size: 1.4rem; line-height: 1; color: #fff; background: rgba(255,255,255,0.12); border: 0; border-radius: 50%; width: 46px; height: 46px; cursor: pointer; display: grid; place-items: center; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.25); } .lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .lightbox__close { top: 18px; inset-inline-end: 18px; } .lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2rem; } .lightbox__nav--prev { inset-inline-start: 16px; } .lightbox__nav--next { inset-inline-end: 16px; } .lightbox__counter { position: absolute; bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 0.85rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; } @media (max-width: 560px) { .lightbox__nav { width: 40px; height: 40px; } } .photo-hero { position: relative; margin-block-end: 22px; } .photo-hero .see-all { z-index: 3; } /* The gallery fills the left detail column, start-aligned, with the price/contact card level with it on the right (Onur, 2026-09-22). Height is still capped so a tall window doesn't push the facts below the fold. */ .photo-hero .photo-grid { inline-size: 100%; max-block-size: min(62vh, 560px); } .detail-head { margin-block-end: 16px; } .detail-head .detail-title { margin: 8px 0 2px; font-size: 1.6rem; letter-spacing: -0.015em; color: var(--color-ink); text-wrap: balance; } .detail-head .sub { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; } .detail-head__type { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } /* Phones only (see the 880px breakpoint); on desktop the price lives in the agent card. */ .detail-head__price { display: none; font-size: 1.25rem; font-weight: 800; color: var(--color-ink); font-variant-numeric: tabular-nums; line-height: 1; } .detail-head__price span { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); } /* The price/contact card keeps a fixed, narrow width (a phone number plus two app buttons fit in 320px); the photo column takes all the rest. */ .detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-block: 0 48px; } .facts { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 22px; } .fact { background: var(--color-surface); border-radius: 8px; padding: 8px 14px; font-size: 0.84rem; font-weight: 500; } .fact b { color: var(--color-ink); } .detail-desc { max-width: 62ch; } .detail-desc p { margin: 0 0 14px; font-size: 0.95rem; } .feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 24px; } .chip { font-size: 0.8rem; color: var(--color-ink); border: 1px solid var(--color-line); border-radius: 999px; padding: 6px 14px; } .chip::before { content: "✓ "; color: var(--color-accent-text); font-weight: 700; } .listing-map { height: 300px; border-radius: var(--radius); margin-block-start: 8px; } .map-note { font-size: 0.78rem; color: var(--color-text-muted); margin: 8px 0 0; } .agent-card { border: 1px solid var(--color-line); border-radius: var(--radius); padding: 22px; background: var(--color-surface); align-self: start; position: sticky; top: 16px; /* With the contact form the card can outgrow a laptop screen; scroll inside it rather than leave the button out of reach while the card sticks. */ max-block-size: calc(100vh - 32px); overflow-y: auto; } .agent-card .price { font-size: 1.7rem; font-weight: 800; color: var(--color-ink); margin: 0 0 2px; font-variant-numeric: tabular-nums; } .agent-card .price span { font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); } .agent-row { display: flex; align-items: center; gap: 12px; margin-block: 18px; } .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%); color: var(--color-accent); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; } .agent-row .name { font-weight: 600; color: var(--color-ink); font-size: 0.92rem; } .agent-row .role { font-size: 0.78rem; color: var(--color-text-muted); } .agent-card .stack { display: grid; gap: 10px; } /* two contact numbers, each with WhatsApp + Viber */ .contact-lines { display: grid; gap: 10px; margin-block: 4px 14px; } .contact-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; padding: 8px 10px 8px 14px; } .cl-num { font-weight: 700; font-size: 1rem; color: var(--color-ink); text-decoration: none; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .cl-num:hover { color: var(--color-accent-text); } .cl-apps { display: flex; gap: 8px; } .app { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; transition: transform 0.12s ease, filter 0.12s ease; } .app:hover { transform: translateY(-1px); filter: brightness(1.06); } .app:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .app svg { width: 20px; height: 20px; display: block; } .app--wa { background: #25d366; } .app--vb { background: #7360f2; } .contact-email { display: block; text-align: center; } /* ---------- VIP ---------- */ .vip { background: linear-gradient(150deg, var(--color-primary) 0%, #23233f 60%, #2b2b4a 100%); border-radius: 16px; padding: 44px; color: #d6d6e4; position: relative; overflow: hidden; margin-block-end: 40px; } .vip::after { content: ""; position: absolute; top: -60px; inset-inline-end: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.22) 0%, transparent 70%); pointer-events: none; } .vip-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 10px; } .vip-eyebrow, .vip > h1, .vip > h2, .vip > p { text-align: center; } .vip h1, .vip h2 { margin: 0 auto 8px; color: #fff; letter-spacing: -0.015em; max-width: 30ch; text-wrap: balance; } .vip h2 { font-size: 1.7rem; } .vip h1 { font-size: 2rem; } .vip > p { margin: 0 auto 30px; max-width: 62ch; font-size: 0.95rem; } .vip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .vip-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.35); border-radius: 10px; padding: 20px 18px; } .vip-card .ico { width: 38px; height: 38px; border-radius: 9px; background: rgba(201,168,76,0.16); display: grid; place-items: center; font-size: 1.05rem; margin-block-end: 12px; } .vip-card h3 { margin: 0 0 6px; font-size: 0.95rem; color: #fff; font-weight: 600; } .vip-card p { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #b9b9cd; } .vip .btn, .vip-actions { margin-block-start: 28px; } .vip > .btn { display: block; inline-size: fit-content; margin-inline: auto; } .vip-actions { justify-content: center; } .vip-actions { display: flex; gap: 12px; flex-wrap: wrap; } .vip-actions .btn { margin-block-start: 0; } .vip--page { margin-block-start: 16px; } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 28px; } .contact-tile { display: grid; gap: 4px; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 20px; text-decoration: none; } .contact-tile:hover { border-color: var(--color-accent); } .contact-tile__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } .contact-tile__value { font-weight: 600; color: var(--color-ink); } .contact-note { color: var(--color-text-muted); font-size: 0.85rem; } /* Contact form (listing sidebar and /contact). */ .inquiry { margin-block-start: 24px; } .inquiry h2 { margin: 0 0 12px; font-size: 1.05rem; color: var(--color-ink); } .inquiry__form { display: grid; gap: 12px; } .inquiry__form .btn { width: 100%; } .field textarea { width: 100%; font: inherit; font-size: 0.9rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 8px; padding: 10px 12px; resize: vertical; min-block-size: 96px; } .field textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .inquiry__hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; } .inquiry__notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; font-size: 0.9rem; } .inquiry__notice--ok { background: var(--color-ok-bg); color: var(--color-ok-text); } .inquiry__notice--error { background: var(--color-error-bg); color: var(--color-error-text); } .inquiry__privacy { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); } .inquiry__privacy a { color: inherit; } /* ---------- footer ---------- */ .site-footer { margin-block-start: 56px; background: var(--color-footer); border-block-start: 1px solid var(--color-line); color: #b9b9cd; padding-block: 48px 36px; } .footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); margin-block-end: 32px; } .site-footer h4 { margin: 0 0 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); } .site-footer a { color: #e6e6f0; text-decoration: none; } .site-footer a:hover { color: var(--color-accent); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.88rem; } .site-footer .brandline { font-size: 0.9rem; max-width: 40ch; margin: 0; } .footer-bottom { border-block-start: 1px solid rgba(255,255,255,0.12); padding-block-start: 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 0.78rem; flex-wrap: wrap; } /* ---------- responsive ---------- */ @media (max-width: 880px) { .detail-cols, .footer-grid, .contact-grid { grid-template-columns: 1fr; } .cards, .vip-grid { grid-template-columns: 1fr 1fr; } .search-fields { grid-template-columns: 1fr 1fr; } .search-fields--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Back to one flex row: display:contents lets .social-links keep its order:-1 */ .site-header__inner { display: flex; justify-content: space-between; } .site-header__end { display: contents; } .nav { display: none; } .mobile-nav { display: block; } .header-phone { display: none; } .theme-switch { display: none; } /* mobile: three balanced zones — social (left), logo (center), tools (right) */ .site-header__inner { gap: 6px; padding-inline: 14px; } .social-links { order: -1; gap: 0; } .social-links .social { inline-size: 24px; block-size: 24px; } .social-links .social svg { width: 16px; height: 16px; } .header-tools { gap: 8px; } .site-header__logo { height: 2.2rem; } .photo-grid { aspect-ratio: 16 / 10; } .hero-banner { padding-block: 72px 96px; } .agent-card { position: static; max-block-size: none; overflow: visible; } /* Price moves up level with the type badge, badge at the start edge and price at the end edge; the card keeps only the contact lines. */ .detail-head__type { justify-content: space-between; } .detail-head__price { display: inline-block; } .agent-card .price { display: none; } } @media (max-width: 560px) { .cards, .vip-grid { grid-template-columns: 1fr; } /* Two per row rather than one tall column: the plain selects are short enough to pair up, while a min-max pair needs the full width to stay typable. */ .search-fields, .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .search-fields .field--range, .filter-bar .field--range { grid-column: 1 / -1; } .filter-actions { justify-self: stretch; } .filter-bar .btn { flex: 1; min-inline-size: 0; } /* Three equal thirds so the strip fills the width evenly instead of wrapping the last label onto a second row; each label stays centred inside its own third. */ .search-tabs .tab { flex: 1 1 0; padding: 12px 6px; font-size: 0.75rem; line-height: 1.25; } .search-subtabs { padding-inline: var(--space-4); } .search-fields { padding: var(--space-4); } .search-soon { flex-direction: column; text-align: center; } } @media (prefers-reduced-motion: reduce) { .card { transition: none; } } /* withdrawn-listing page (Listings/Gone.cshtml) reuses the 404 layout */ .not-found__title { margin-block-start: 14px; } /* Listing status labels (reserved / sold / rented) — Display.StatusBadgeKey */ .badge--status { inset-inline-start: auto; inset-inline-end: 12px; background: var(--color-accent); color: var(--color-on-light); } .badge--status-inline { background: var(--color-accent); color: var(--color-on-light); } .status-note { margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--color-gold-soft); color: var(--color-gold-ink); font-size: 0.9rem; } .status-note a { font-weight: 700; color: var(--color-ink); margin-inline-start: 6px; }