/* טודירה — design system. Teal + a gold accent (a nod to Todi's crown) on warm cream — 2026-09-03 redesign, inspired by the reference bot dorin.app's clean/modern look but its own identity. Rubik for display headings/price/buttons (rounded, friendly, full Hebrew support), Heebo for body/UI text. Replaces the earlier wine + Frank Ruhl Libre look. */ :root { --teal: #0e8a82; --teal-dark: #173c40; --teal-tint: #eaf5f3; --gold: #d9a441; --gold-light: #ecc978; --bg: #fbf7ef; --card: #ffffff; /* muted cream chip/panel surfaces (amenity chip, "without Todira" compare column) — one shade off --card, distinct enough to read as a secondary surface in both themes */ --surface-tint: #f6f2ea; /* heading/text-on-a-theme-adapting-surface color (h1-h3, badges on --teal-tint, etc) — starts equal to --teal-dark in light mode but gets its OWN, lighter value in dark mode below. --teal-dark itself stays frozen across themes: it also does double duty as fixed dark text on gold surfaces (.btn.gold, badges) and as a background gradient stop (header, footer-cta), neither of which should flip color just because the page theme did. */ --heading: var(--teal-dark); --text: #1e2a29; --text-muted: #66787c; --border: #e6e1d4; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 9px; --shadow-sm: 0 1px 3px rgba(14, 60, 58, .08); --shadow-md: 0 8px 24px rgba(14, 60, 58, .10); --shadow-lg: 0 16px 40px rgba(14, 60, 58, .16); } /* ---------- dark mode (2026-09-05) ---------- Same three-state model as any theme-aware surface: the default "system" setting follows prefers-color-scheme with no attribute needed at all (pure CSS, zero JS, zero flash); an explicit choice from the header's theme toggle stamps data-theme="dark"/"light" on and wins in both directions (see base.html's early script + the toggle's own JS at the bottom of ). Only the tokens that should actually flip are redefined here — --teal-dark, --gold/--gold-light, and the brand-button colors are deliberately left untouched, see their own comments above/below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --teal: #2bbcae; --teal-tint: #123330; --bg: #0f1715; --card: #182422; --surface-tint: #1c2725; --heading: #d9f2ee; --text: #eef3f1; --text-muted: #9db2ad; --border: #2b3937; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow-md: 0 8px 24px rgba(0, 0, 0, .40); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --teal: #2bbcae; --teal-tint: #123330; --bg: #0f1715; --card: #182422; --surface-tint: #1c2725; --heading: #d9f2ee; --text: #eef3f1; --text-muted: #9db2ad; --border: #2b3937; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow-md: 0 8px 24px rgba(0, 0, 0, .40); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Heebo', system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: 'Rubik', Arial, sans-serif; font-weight: 700; color: var(--heading); line-height: 1.2; margin: 0 0 .4em; } a { color: inherit; } img { max-width: 100%; display: block; } /* ---------- header ---------- */ header.site { position: sticky; top: 0; z-index: 40; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.15); } .header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: .3px; } .brand .crown { font-size: 1.15rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); display: inline-block; animation: float 3.2s ease-in-out infinite; } /* Spells out that the logo is a "go home" control — a person less comfortable with web conventions won't necessarily know a site's own name/logo is clickable (2026-09-06 request). */ .brand-home-hint { font-size: .68rem; font-weight: 500; opacity: .75; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-4deg); } } /* ---------- nav: single hamburger toggle, panel pushes the page down (no overlay) ---------- 2026-09-03 request, matching the reference bot dorin.app's own nav: one button instead of a crowded inline row of nav links + lang switcher + auth box (which is what this used to be — the old `.nav-group`/`nav.site-nav`/`nav.lang-switcher`/`.auth-box` rules, now replaced). `.nav-panel` lives inside `header.site` itself (a normal-flow block, not `position: absolute`), so expanding it pushes `main` down the page rather than covering it. */ .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Anonymous-visitor login/signup — moved out of the hamburger onto the always-visible toolbar (2026-09-06 request: it was too easy to miss buried in the menu on a first visit). */ .auth-login-toolbar { color: var(--teal-dark); background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 8px 16px; border-radius: 999px; transition: filter .15s; } .auth-login-toolbar:hover { filter: brightness(1.06); } .nav-toggle { width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } .nav-toggle:hover { background: rgba(255,255,255,.22); } .nav-toggle-lines { width: 18px; height: 13px; position: relative; display: block; } .nav-toggle-lines span { position: absolute; inset-inline-start: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease, top .2s ease; } .nav-toggle-lines span:nth-child(1) { top: 0; } .nav-toggle-lines span:nth-child(2) { top: 5.5px; } .nav-toggle-lines span:nth-child(3) { top: 11px; } .nav-toggle.open .nav-toggle-lines span:nth-child(1) { top: 5.5px; transform: rotate(45deg); } .nav-toggle.open .nav-toggle-lines span:nth-child(2) { opacity: 0; } .nav-toggle.open .nav-toggle-lines span:nth-child(3) { top: 5.5px; transform: rotate(-45deg); } .nav-panel { max-height: 0; overflow: hidden; transition: max-height .32s ease; } .nav-panel.open { max-height: 70vh; overflow-y: auto; } .nav-panel-inner { max-width: 1100px; margin: 0 auto; padding: 6px 16px 16px; background: var(--card); border-radius: 0 0 var(--radius-md) var(--radius-md); } nav.site-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; } nav.site-nav a { text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: .96rem; font-weight: 600; transition: background .15s, color .15s; } nav.site-nav a:hover, nav.site-nav a.active { background: var(--teal-tint); color: var(--heading); } main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff !important; padding: 13px 26px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem; border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark) !important; } .btn.gold:hover { filter: brightness(1.06); } .btn.outline { background: transparent; color: var(--teal) !important; border: 1.5px solid var(--teal); box-shadow: none; } .btn.outline:hover { background: var(--teal-tint); } .btn.block { width: 100%; justify-content: center; } /* Real brand colors — /login's "continue with X" buttons (2026-09-05), matching the reference product's own login screen: Telegram blue, WhatsApp green, both distinct from the site's own teal/gold so each reads as "this is that platform's button," not a themed variant of ours. Gradients (2026-09-06, matching the reference product's own more vibrant button look) stay inside each brand's own real color range — Telegram's two documented blues, WhatsApp's own light/dark green pairing from its own app icon — not a stylized hue that would read as a different color entirely. */ .btn.telegram { background: linear-gradient(135deg, #2AABEE, #229ed9); } .btn.telegram:hover { filter: brightness(1.06); } .btn.whatsapp { background: linear-gradient(135deg, #25d366, #128C7E); color: #fff !important; } .btn.whatsapp:hover { filter: brightness(1.06); } .btn.google { background: #fff; color: #3c4043 !important; border: 1.5px solid #dadce0; box-shadow: none; } .btn.google:hover { background: #f8f9fa; } /* ---------- hero (home page) ---------- Headline/CTA live in the plain hero, on the page's own background - no image behind them, so nothing ever needs to fight the image for legibility. The brand portrait gets its own section right after, completely unobstructed: full width, no border/shadow/rounded frame (so it doesn't read as "a photo in a box"), full-bleed edge-to-edge past main's own side padding, and sized at its natural aspect ratio so NOTHING is ever cropped - the image's own baked-in caption at the bottom stays 100% visible. */ .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(217,164,65,.14), transparent 45%), radial-gradient(circle at 85% 0%, rgba(14,138,130,.10), transparent 40%); border-radius: var(--radius-lg); padding: 48px 28px 36px; text-align: center; margin-bottom: 0; } .hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: .3em; } .hero .lead { font-size: 1.1rem; color: var(--text-muted); max-width: 540px; margin: 0 auto 26px; } .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; font-size: .82rem; font-weight: 700; color: var(--teal); margin-bottom: 18px; box-shadow: var(--shadow-sm); } .hero-image-full { margin: 18px calc(50% - 50vw) 0; width: 100vw; } .hero-image-full img { width: 100%; height: auto; display: block; } @media (min-width: 700px) { .hero-image-full { display: flex; justify-content: center; background: var(--bg); } .hero-image-full img { width: auto; max-width: 100%; height: 560px; } } /* Blend the brand image's flat-color top/bottom margins into the page background instead of a hard rectangle edge (2026-09-03 request, inspired by dorin.app's illustration melting into its own page). The fade window is deliberately tight — only the plain background strip above the crown (~0-3% of the image's height) and below the "טודירה" wordmark (~95-100%) — so the crown and the caption text stay fully visible; this must never be widened without re-checking that. */ .brand-blend { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 95%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 95%, transparent 100%); } /* ---------- "look, it's alive" strip right under the hero CTAs ---------- */ .fresh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin-top: 22px; } .live-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font-size: .8rem; font-weight: 700; color: var(--heading); box-shadow: var(--shadow-sm); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: live-pulse 1.7s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .ai-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); font-weight: 700; font-size: .8rem; padding: 8px 16px; border-radius: 999px; } .example-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 16px; box-shadow: var(--shadow-sm); text-align: start; } .example-card .ec-top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .example-card .ec-title { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: .9rem; } .example-card .ec-badge { background: var(--teal-tint); color: var(--heading); font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; } .example-card .ec-sub { color: var(--text-muted); font-size: .8rem; } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* ---------- floating stat cards, right under the hero image ---------- */ .hero-float-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 720px; margin: 26px auto 60px; padding: 0 18px; } .hero-float-stats.momentum-row { margin-top: 8px; } .hero-float-stats.momentum-row .float-stat b { font-size: 1.25rem; } .float-stat { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex: 1 1 140px; min-width: 140px; } .float-stat .fs-icon { font-size: 1.3rem; } .float-stat b { display: block; font-family: 'Rubik', sans-serif; color: var(--teal); font-size: 1.05rem; line-height: 1.2; } .float-stat .label-sm { font-size: .72rem; color: var(--text-muted); } @media (max-width: 480px) { .hero-float-stats { gap: 8px; } .float-stat { padding: 10px 12px; min-width: 42%; } } /* ---------- "why todira" comparison ---------- */ .compare { margin: 60px 0; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 780px; margin: 0 auto; } @media (max-width: 620px) { .compare-grid { grid-template-columns: 1fr; } } .compare-col { border-radius: var(--radius-md); padding: 24px 22px; border: 1px solid var(--border); } .compare-col h3 { font-size: 1.05rem; margin-bottom: 14px; } .compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .compare-col li { font-size: .88rem; color: var(--text-muted); padding-inline-start: 24px; position: relative; } .compare-col.without { background: var(--surface-tint); } .compare-col.without li::before { content: '✕'; position: absolute; inset-inline-start: 0; color: #b06a6a; font-weight: 700; } .compare-col.with { background: linear-gradient(160deg, var(--teal-tint), var(--card)); border-color: var(--border); box-shadow: var(--shadow-sm); } .compare-col.with h3 { color: var(--heading); } .compare-col.with li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--gold); font-weight: 700; } .section-title { text-align: center; margin-bottom: 8px; font-size: clamp(1.5rem, 3.5vw, 2rem); } .section-sub { text-align: center; color: var(--text-muted); max-width: 520px; margin: 0 auto 36px; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 56px 0; } @media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 22px; box-shadow: var(--shadow-sm); } .feature-card .icon { width: 46px; height: 46px; border-radius: 12px; background: var(--teal-tint); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; } .feature-card h3 { font-size: 1.08rem; margin-bottom: 6px; } .feature-card p { color: var(--text-muted); font-size: .92rem; margin: 0; } .steps { counter-reset: step; position: relative; max-width: 480px; margin: 44px auto; display: flex; flex-direction: column; gap: 32px; } .steps::before { content: ''; position: absolute; top: 22px; bottom: 22px; inset-inline-start: 18px; width: 2px; background: linear-gradient(var(--gold-light), var(--teal)); opacity: .45; } .step { position: relative; padding-inline-start: 56px; } .step::before { counter-increment: step; content: counter(step); position: absolute; inset-inline-start: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); font-weight: 700; font-family: 'Rubik', sans-serif; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 0 0 6px var(--bg); } .step h3 { font-size: 1rem; margin-bottom: 4px; } .step p { color: var(--text-muted); font-size: .9rem; margin: 0; } /* ---------- FAQ accordion ---------- */ .faq { margin: 60px 0; } .faq-list { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 20px; box-shadow: var(--shadow-sm); } .faq-item summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700; font-size: .96rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .chevron { color: var(--gold); font-size: 1.2rem; transition: transform .2s ease; flex-shrink: 0; } .faq-item[open] .chevron { transform: rotate(180deg); } .faq-item p { color: var(--text-muted); font-size: .89rem; margin: 0 0 16px; } .footer-cta { text-align: center; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; border-radius: var(--radius-lg); padding: 48px 24px; margin-top: 60px; } .footer-cta h2 { color: #fff; } .footer-cta p { color: rgba(255,255,255,.82); max-width: 460px; margin: 0 auto 24px; } /* ---------- filter summary bar ---------- */ .filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 26px; box-shadow: var(--shadow-sm); } .filter-bar .label { font-weight: 600; color: var(--text-muted); font-size: .85rem; } .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--teal-tint); color: var(--teal); border-radius: 999px; padding: 5px 13px; font-size: .82rem; font-weight: 600; } .filter-bar .btn.outline { padding: 8px 16px; font-size: .85rem; margin-inline-start: auto; } .chip-toggle { border: none; cursor: pointer; font-family: inherit; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); } .chip-toggle.active { background: var(--teal-tint); color: var(--teal); border-color: transparent; } /* ---------- listing grid & cards ---------- */ /* ---------- page banner (apartments / liked / filter headers) ---------- */ .page-banner { background: radial-gradient(circle at 15% 20%, rgba(217,164,65,.14), transparent 45%), radial-gradient(circle at 85% 0%, rgba(14,138,130,.10), transparent 40%); border-radius: var(--radius-lg); padding: 26px 24px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-banner .pb-text h1 { margin: 0 0 4px; font-size: clamp(1.4rem, 4vw, 1.9rem); } .page-banner .pb-text p { margin: 0; color: var(--text-muted); font-size: .92rem; } .page-banner .pb-count { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 20px; text-align: center; box-shadow: var(--shadow-sm); min-width: 92px; } .page-banner .pb-count b { display: block; font-family: 'Rubik', sans-serif; font-size: 1.5rem; color: var(--teal); } .page-banner .pb-count span { font-size: .72rem; color: var(--text-muted); } .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; } /* Invisible trigger for /apartments' infinite scroll (see that page's own script) — spans the full row so it doesn't leave a stray near-empty grid cell the width of one card. */ .load-more-sentinel { grid-column: 1 / -1; height: 1px; } .listing-card { background: var(--card); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; } .listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .listing-cover-wrap { position: relative; } .listing-cover { display: flex; aspect-ratio: 4 / 3; overflow-x: auto; scroll-snap-type: x mandatory; background: linear-gradient(135deg, #f1e2c8, #e7c9a8); scrollbar-width: none; /* Firefox */ } .listing-cover::-webkit-scrollbar { display: none; } .cover-slide { flex: 0 0 100%; scroll-snap-align: start; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .no-image-caption { background: var(--teal); color: #fff; padding: 10px 16px; font-size: 1.05rem; font-weight: 700; text-align: center; line-height: 1.3; } /* Top-left badge stack (source + broker) — 2026-09-03 request, matching the reference bot dorin.app's own card (no price shown over the photo at all — .price-badge/.gold-text removed the same day, price only lives in .listing-price below now). A flex column so a listing with BOTH badges (source always shown, broker only for is_broker_listing) stacks them with a small gap instead of needing hand-tuned per-badge pixel offsets; a listing with only the source badge just has one child, no different from before. Physical `left` (not inset-inline-start) — a deliberate, language-independent visual corner. */ .listing-cover-wrap .top-left-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .listing-cover-wrap .source-badge { background: rgba(255,255,255,.9); color: var(--teal); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .listing-cover-wrap .broker-badge { background: var(--gold); color: var(--teal-dark); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .listing-cover-wrap .photo-count-badge { position: absolute; bottom: 10px; inset-inline-end: 12px; /* No backdrop-filter (was blur(3px)) — with up to 200 cards on /apartments, up to ~600 simultaneous backdrop-filter layers (this badge + the 2 reaction buttons below, per card) is a known iOS Safari/WebKit compositor crasher, matching the real crash reports on this exact page (2026-09-06, see PROJECT_STATE.md). The background alone still reads fine. */ background: rgba(36, 20, 23, .82); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; pointer-events: none; } /* Website equivalent of the Telegram bot's ❤️/🙈 inline buttons — top-right corner (physical `right`, mirroring .top-left-badges' own deliberate `left`), same UserListingAction table so state matches the bot instantly either direction. */ .card-reactions { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .card-reaction-form { margin: 0; } .card-reaction-btn { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; /* No backdrop-filter — see .photo-count-badge's own comment just above; this button exists twice per card (like + hide), so it's the biggest single contributor to that count. */ background: rgba(255,255,255,.94); font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform .12s ease; } .card-reaction-btn:hover { transform: scale(1.08); } .card-reaction-btn:active { transform: scale(.94); } .card-reaction-btn.active { background: var(--gold); } .listing-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .listing-price { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--teal); } .listing-loc { font-weight: 700; font-size: 1.02rem; } .listing-loc .muted { color: var(--text-muted); font-weight: 400; font-size: .9rem; } .meta-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: .87rem; color: var(--text-muted); } .meta-row span { display: inline-flex; align-items: center; gap: 4px; } .amenity-row { display: flex; gap: 6px; flex-wrap: wrap; } .amenity { font-size: .74rem; background: var(--surface-tint); color: var(--text-muted); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; } .listing-desc { color: var(--text-muted); font-size: .87rem; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .listing-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 6px; } .listing-footer .posted { font-size: .78rem; color: var(--text-muted); white-space: nowrap; } .listing-footer a.view-btn { color: var(--teal); font-weight: 700; font-size: .88rem; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .listing-footer a.view-btn:hover { text-decoration: underline; } .listing-footer a.view-btn.locked { color: var(--gold); } /* ---------- empty states ---------- */ .empty-state { text-align: center; padding: 70px 24px; background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted); } .empty-state .glyph { font-size: 2.6rem; margin-bottom: 14px; opacity: .7; } .empty-state p { max-width: 420px; margin: 0 auto 22px; } .empty-state .hint { font-size: .82rem; opacity: .75; } .notice { background: #fff3cd; border: 1px solid #ffe69c; color: #6b5200; padding: 10px 16px; border-radius: var(--radius-sm); font-size: .86rem; margin-bottom: 20px; } .welcome-banner { background: var(--teal-tint); border: 1px solid var(--teal); color: var(--teal-dark); padding: 12px 18px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; margin-bottom: 20px; text-align: center; } /* ---------- /login — a dedicated screen, not a menu widget (2026-09-05) ---------- */ .login-card { max-width: 380px; margin: 40px auto; padding: 36px 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; text-align: center; } .login-head { margin-bottom: 8px; } .login-head .crown { font-size: 2rem; display: block; margin-bottom: 6px; } .login-head h1 { font-size: 1.35rem; margin: 0 0 6px; } .login-head p { color: var(--text-muted); font-size: .92rem; margin: 0; } .login-divider { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .8rem; margin: 6px 0; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-hint { font-size: .78rem; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; } /* ---------- settings / filter form ---------- */ .settings-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-sm); } .field { margin-bottom: 20px; } .field label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--text); } .field .field-icon { font-size: 1rem; } .field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .96rem; font-family: inherit; background: var(--bg); transition: border-color .15s; } .field textarea { resize: vertical; min-height: 120px; } .field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--card); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } .field-hint { font-size: .78rem; color: var(--text-muted); margin-top: 5px; } /* toggle-chip checkboxes (amenities, property types, etc) */ .checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px; } .check-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; background: var(--bg); border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: .88rem; transition: border-color .15s, background .15s, color .15s; } .check-chip input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--teal); margin: 0; } .check-chip:has(input:checked) { background: var(--teal-tint); border-color: var(--teal); color: var(--teal); font-weight: 600; } /* `.check-chip`'s own `display: inline-flex` above overrides the browser's default `[hidden] { display: none }` rule (author styles always beat user-agent styles) - without this, setting an element's `.hidden` property from JS (the city search filter below) has no visible effect at all. Found live 2026-09-02: the filter ran correctly, nothing ever actually hid. */ .check-chip[hidden] { display: none !important; } /* the cities grid (~40 options) gets its own scrollable box so the page doesn't get huge; the shorter amenity/property-type grids stay unbounded */ .checkbox-grid-scroll { max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 12px; } .field-section-title { font-weight: 700; font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--border); } .field-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } /* ---------- /account channel-linking tiles (Telegram/WhatsApp/Google brand badges) ---------- */ .channel-tile { text-align: center; } .channel-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px; } .channel-icon svg { display: block; } /* Telegram/WhatsApp draw their own colored circle inside the SVG itself; Google's "G" glyph has no background of its own, so it gets one here to match the other two tiles' visual weight. */ .channel-icon-plain { background: var(--card); border: 1.5px solid var(--border); border-radius: 50%; } .channel-status { font-size: .95rem; font-weight: 600; margin: 6px 0 0; } .channel-status.connected { color: var(--teal); } /* ---------- scroll-reveal & tactile feedback ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .brand .crown, .hero .crown-badge { animation: none; } } .btn:active { transform: scale(.96); } .listing-card:active { transform: translateY(-1px) scale(.99); } nav.site-nav a:active { transform: scale(.95); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); margin-top: 40px; background: var(--card); } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 32px 20px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .footer-inner .brand { color: var(--heading); font-size: 1.1rem; } .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .footer-nav a { text-decoration: none; color: var(--text-muted); font-size: .88rem; } .footer-nav a:hover { color: var(--teal); } .footer-note { font-size: .78rem; color: var(--text-muted); margin: 0; } .footer-legal { max-width: 480px; } /* ---------- accessibility: skip link + visible focus ---------- */ .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--teal); color: #fff !important; text-decoration: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; z-index: 100; transition: top .15s ease; } .skip-link:focus { top: 12px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; } .field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(217, 164, 65, .25); } /* ---------- lang switcher + auth, inside the nav panel's footer row (white bg now, not teal) --- */ .nav-panel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); } .auth-box { display: flex; align-items: center; gap: 10px; } .auth-box .auth-name { color: var(--text); font-size: .84rem; font-weight: 600; } .auth-box .auth-logout { color: var(--text-muted); font-size: .8rem; text-decoration: underline; text-underline-offset: 2px; } .auth-box .auth-logout:hover { color: var(--text); } .auth-box .auth-login { color: var(--teal-dark); background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-size: .78rem; font-weight: 700; text-decoration: none; padding: 7px 15px; border-radius: 999px; } .auth-box .auth-login:hover { filter: brightness(1.06); } .preview-banner { background: #3a2a06; color: #ffd97a; font-size: .82rem; font-weight: 600; text-align: center; padding: 9px 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .preview-banner a { color: #ffd97a; text-decoration: underline; text-underline-offset: 2px; } nav.lang-switcher { display: flex; gap: 2px; } nav.lang-switcher a { text-decoration: none; color: var(--text-muted); padding: 5px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; transition: background .15s, color .15s; } nav.lang-switcher a:hover, nav.lang-switcher a.active { background: var(--teal-tint); color: var(--heading); } /* ---------- contact page ---------- */ .contact-other { max-width: 560px; margin: 28px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .contact-other .section-title { font-size: 1.1rem; } /* ---------- legal pages (terms / privacy) ---------- */ .legal-page { max-width: 720px; margin: 0 auto; } .legal-page h1 { margin-bottom: .2em; } .legal-page .legal-updated { color: var(--text-muted); font-size: .85rem; margin-bottom: 28px; } .legal-page h2 { font-size: 1.15rem; margin-top: 30px; } .legal-page p, .legal-page li { color: var(--text); line-height: 1.7; } .legal-page ul { padding-inline-start: 22px; } /* ---------- Arabic script fallback (Heebo/Rubik don't cover Arabic glyphs) ---------- */ :lang(ar) { font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .display { font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', Georgia, serif; } /* ---------- Admin inbox (/admin/messages) ---------- */ .admin-message-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; } .admin-message-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); } .amc-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .amc-source { font-weight: 700; font-size: .88rem; } .amc-date { color: var(--text-muted); font-size: .82rem; } .amc-status { font-size: .78rem; margin-inline-start: auto; } .amc-status-warn { color: #b45309; } .amc-status-ok { color: #15803d; } /* .amc-status-bad (2026-09-06): failed/cancelled payment rows on /account's payment history — same family as the two colors above, just the "this one didn't go through" case they didn't need to cover yet. */ .amc-status-bad { color: #b91c1c; } .amc-meta { display: flex; gap: 14px; color: var(--text-muted); font-size: .86rem; margin-bottom: 4px; } .amc-body { white-space: pre-wrap; margin: 8px 0 0; line-height: 1.6; } /* ---------- /account payment history (2026-09-06) ---------- */ .payment-history { display: flex; flex-direction: column; gap: 10px; } .payment-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: .9rem; } .payment-plan { font-weight: 700; } .payment-amount { color: var(--teal); font-weight: 700; font-family: 'Rubik', sans-serif; } .payment-date { color: var(--text-muted); } .payment-row .amc-status { font-size: .85rem; } @media (max-width: 620px) { .header-inner { padding: 12px 16px; } .brand { font-size: 1.15rem; } nav.site-nav a { padding: 7px 10px; font-size: .84rem; } nav.lang-switcher a { padding: 5px 7px; font-size: .74rem; } main { padding: 24px 14px 60px; } .amc-status { margin-inline-start: 0; } } /* ================= Accessibility widget ================= */ /* 2026-09-03 request (real legal concern under Israeli accessibility regulations, matching the floating accessibility button pattern on yad2.co.il and similar Israeli sites). Physical `left` (not inset-inline-start) — a fixed, language-independent corner, same convention as the listing-card badges above. Sits above everything else (z-index) since it must stay reachable from anywhere on the page. */ #a11y-widget { position: fixed; left: 16px; bottom: 16px; z-index: 200; } #a11y-toggle { width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--teal); color: #fff; font-size: 1.6rem; line-height: 1; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; } #a11y-toggle:hover { background: var(--teal-dark); } #a11y-panel { position: absolute; bottom: 64px; left: 0; width: 280px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 14px; display: flex; flex-direction: column; gap: 8px; } /* `display: flex` above (an author style) always beats the browser's own default `[hidden] { display: none }` UA rule, regardless of specificity — the SAME bug this project already hit once with `.check-chip[hidden]` (see that rule's own comment). Without this, toggling the `hidden` attribute in JS (base.html's openPanel/closePanel) has no visual effect at all: the panel stays permanently visible, and neither the ✕ nor the toggle button can ever close it — confirmed live 2026-09-04. */ #a11y-panel[hidden] { display: none !important; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-family: 'Rubik', sans-serif; font-size: 1rem; } .a11y-panel-head button { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-muted); padding: 4px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; } .a11y-font-controls { display: flex; gap: 4px; } .a11y-font-controls button { border: 1px solid var(--border); background: var(--bg); border-radius: 8px; cursor: pointer; padding: 5px 9px; font-size: .8rem; font-weight: 700; color: var(--text); } .a11y-toggle-chip { text-align: start; border: 1.5px solid var(--border); background: var(--bg); border-radius: 10px; padding: 9px 12px; font-size: .88rem; cursor: pointer; color: var(--text); } .a11y-toggle-chip.active { border-color: var(--teal); background: var(--teal-tint); color: var(--heading); font-weight: 700; } .a11y-reset { border: none; background: var(--teal-tint); color: var(--heading); border-radius: 10px; padding: 9px 12px; font-size: .85rem; font-weight: 700; cursor: pointer; margin-top: 4px; } .a11y-statement-link { text-align: center; font-size: .78rem; color: var(--text-muted); margin-top: 2px; } /* ---- toggle effects, applied to ---- */ html.a11y-font-112 { font-size: 112.5%; } html.a11y-font-125 { font-size: 125%; } html.a11y-font-137 { font-size: 137.5%; } html.a11y-font-150 { font-size: 150%; } html.a11y-contrast { --teal: #7fe9df; --teal-dark: #ffffff; --teal-tint: #0a2a28; --gold: #ffd166; --gold-light: #ffe08a; --bg: #000000; --card: #0d0d0d; --text: #ffffff; --text-muted: #e6e6e6; --border: #777777; } html.a11y-contrast body { background: #000; } html.a11y-grayscale { filter: grayscale(1); } html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 2px; } html.a11y-big-targets .btn, html.a11y-big-targets nav.site-nav a, html.a11y-big-targets .a11y-toggle-chip, html.a11y-big-targets .check-chip, html.a11y-big-targets a.view-btn { padding-top: 14px; padding-bottom: 14px; font-size: 1.08em; } html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation: none !important; transition: none !important; } #a11y-reading-guide-bar { position: fixed; left: 0; width: 100%; height: 32px; margin-top: -16px; background: rgba(217, 164, 65, .28); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); pointer-events: none; z-index: 199; } /* 2026-09-06: the 9 rules below match a competitor's (Takbull) own accessibility toolbar, screenshot by the owner — filling real gaps between what we had and what theirs offers. */ html.a11y-line-height body { line-height: 2.1; } html.a11y-letter-spacing body { letter-spacing: .06em; word-spacing: .12em; } html.a11y-readable-font, html.a11y-readable-font body { font-family: Verdana, Arial, Heebo, sans-serif !important; letter-spacing: .02em; } html.a11y-emphasize-headings h1, html.a11y-emphasize-headings h2, html.a11y-emphasize-headings h3, html.a11y-emphasize-headings h4, html.a11y-emphasize-headings h5, html.a11y-emphasize-headings h6 { text-decoration: underline; text-underline-offset: 4px; background: var(--teal-tint); color: var(--heading); box-decoration-break: clone; -webkit-box-decoration-break: clone; } html.a11y-invert-colors { filter: invert(1) hue-rotate(180deg); } html.a11y-invert-colors img, html.a11y-invert-colors video, html.a11y-invert-colors picture { filter: invert(1) hue-rotate(180deg); } /* Hand-drawn arrow (SVG data URI, URL-encoded) at 2x the default size — browsers don't offer a plain "make the system cursor bigger" API, so a custom cursor image is the only real option. */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 L2 20 L7 16 L10 22 L13 20.5 L10 14 L16 14 Z' fill='%23111' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 2 2, auto !important; } /* Reading mask: two fixed dark panels created/positioned by base.html's mousemove handler, leaving a bright horizontal band around the pointer — a spotlight, distinct from the reading-guide bar above (a highlighted line vs. dimming everything else). */ .a11y-reading-mask-part { position: fixed; left: 0; width: 100%; background: rgba(0, 0, 0, .72); pointer-events: none; z-index: 199; } #a11y-reading-mask-top { top: 0; } #a11y-reading-mask-bottom { bottom: 0; } html.a11y-justify-text main :where(p, li, blockquote) { text-align: justify; text-justify: inter-word; } html.a11y-keyboard-nav *:focus { outline: 3px solid var(--teal) !important; outline-offset: 2px !important; } @media (max-width: 480px) { #a11y-widget { left: 10px; bottom: 10px; } #a11y-panel { width: calc(100vw - 20px); } } /* ---------- dark-mode header toggle ---------- */ .theme-toggle { width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; line-height: 1; transition: background .15s; } .theme-toggle:hover { background: rgba(255,255,255,.22); } /* ---------- dark mode: one-off component colors that aren't worth their own tokens ---------- */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .notice { background: #3a2f0a; border-color: #5c4a12; color: #f0d585; } html:not([data-theme="light"]) .amc-status-warn { color: #f0b169; } html:not([data-theme="light"]) .amc-status-ok { color: #6fd897; } html:not([data-theme="light"]) .amc-status-bad { color: #f28b82; } } html[data-theme="dark"] .notice { background: #3a2f0a; border-color: #5c4a12; color: #f0d585; } html[data-theme="dark"] .amc-status-warn { color: #f0b169; } html[data-theme="dark"] .amc-status-ok { color: #6fd897; } html[data-theme="dark"] .amc-status-bad { color: #f28b82; }