/* 99Yard — design system. Dark, premium, AI-forward. =========================================================================== KYUN DARK --------- Maalik ko chahiye tha ki dekhte hi lage "yeh AI-enabled platform hai". Halka safed card-grid har property site jaisa dikhta hai. Gehra base + ek hi jagah se aata glow + kaanch jaisi partein -- yahi aaj ke AI product ki bhasha hai, aur photo bhi ispar zyada ubharti hai. LAKEER KE TEEN DARJE (maalik ka niyam) — gehre par dobara naapi gayi: surface #0e1524 ke against --line ~1.6:1 card ki lakeer --line-strong ~3:1 input ki lakeer button apne bharav se hi 2.3:1 se kaafi upar hai. Nayi hadd YAHIN badlegi, neeche kahin hex likh kar nahi. INK KE TEEN DARJE — 28 Sep 2026 ko browser me NAAPE gaye -------------------------------------------------------- Naap asli pixel se hai (aath panne chala kar, matn chhupa kar uske theek peeche ka rang padh kar), computed style ke andaaze se nahi -- isliye gradient, scrim aur alpha sab isme aa chuke hain. --bg --bg-2 --surface --surface-2 --surface-3 --ink 16.87 16.40 15.64 13.83 12.33 --ink-2 8.93 8.68 8.27 7.32 6.52 --ink-3 6.36 6.18 5.90 5.22 4.65 Yeh table saja hui nahi hai -- `scripts/test/ink-contrast.test.js` har khaana token ke hex se dobara ginta hai aur na milne par girta hai. Token badlo to yeh table bhi badlo, warna test bolega. ⚠️ `--ink-3` 28 Sep 2026 tak `#6b7d99` tha, aur wo **kisi bhi** background par AA (4.5) paar nahi karta tha: `--bg` par 4.70 aur `--bg-2` par 4.57 ko chhod kar baaki sab neeche -- card par 4.36, aur `--surface-2` par 3.86. Aath panne par naapa gaya tha: 35 me se 28 lakeerein AA se neeche thin. Sabse chhota matn poore portal par sabse kam padha ja sakta tha. Naya `#7e94b5` wahi rang hai, sirf halka (ek hi factor se, isliye hue aur thandapan waisa ka waisa). Ab **palette ke har** background par AA paas hai -- `--surface-3` sameth, jispar aaj ek bhi ink-3 matn baithta hi nahi. Wo jaan-boojh kar hai: pehra us rule ke liye bhi chahiye jo kal likha jaayega. ⚠️ Teen darje TEEN hi rehne chahiye. `--ink-3` aur `--ink-2` ke beech ab 1.40:1 hai -- kam hai, par wo abhi bhi ek dikhne wala kadam hai. `--ink-3` ko aur halka karna teen darje ko do bana dega. `scripts/test/ink-contrast.test.js` dono baatein naapta hai. MOTION ------ Har animation `prefers-reduced-motion` ke peechhe hai. Chamak dikhane ke chakkar me kisi ko chakkar nahi aana chahiye. =========================================================================== */ :root { color-scheme: dark; --shell: 1220px; --shell-form: 540px; /* base */ --bg: #070b14; --bg-2: #0a0f1c; --surface: #0e1524; --surface-2: #16203a; --surface-3: #1d2947; /* lakeerein — upar likha naap */ --line: #2a3348; --line-strong: #5b6784; /* ink — naap upar likhi hai; badalna ho to wahi table dobara naapo */ --ink: #e8eef7; --ink-2: #9fb0c9; --ink-3: #7e94b5; /* 28 Sep 2026: #6b7d99 se halka -- wo AA se neeche tha */ /* accent */ --a1: #4f8cff; /* electric blue */ --a2: #22d3ee; /* cyan */ --a3: #a78bfa; /* violet */ --brand-a: #f59e0b; --brand-b: #1e3a8a; --grad: linear-gradient(120deg, var(--a1), var(--a2)); --grad-soft: linear-gradient(120deg, rgba(79,140,255,.16), rgba(34,211,238,.10)); --grad-ai: linear-gradient(120deg, var(--a3), var(--a2)); --ok: #34d399; --warn: #fbbf24; /* ── galti ka rang, aur do amber ke saathi (3 Oct 2026) ─────────────── `--due` naya TOKEN hai, naya RANG nahi: #f87171 is file me pehle se do jagah haath se likha tha (`.inp.bad` ki lakeer, `.f-err` ka tint). Dono ab isi se padhte hain -- ek rang, ek ghar. Zaroorat posting form se aayi: ab wo panne ke token pehenta hai ("FORM KA RANG" wala banaya hua block), aur us block me galti ka rang `--due` hai -- wahi naam jo 99Lease me hai, taaki DONO portal me block byte-for-byte ek rahe. `--warn-bg` / `--warn-line` usi wajah se. */ --due: #f87171; --warn-bg: #241d0d; --warn-line: #5a4a1e; /* rgba() ke liye -- alpha wala tint token se banta rahe, naye hex se nahi */ --a1-rgb: 79,140,255; --a3-rgb: 167,139,250; --due-rgb: 248,113,113; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(0,0,0,.5); --sh-2: 0 10px 30px -12px rgba(0,0,0,.7); --sh-glow: 0 0 0 1px rgba(79,140,255,.35), 0 12px 38px -14px rgba(79,140,255,.55); --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--ink); font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; /* Poore page ke peechhe ek halka jaal + do dhundhle gole. Yahi wo "kuch zinda hai" wala ehsaas deta hai bina kisi image ke (page hallka rehta). */ background-image: radial-gradient(900px 520px at 12% -6%, rgba(79,140,255,.13), transparent 60%), radial-gradient(760px 460px at 92% 4%, rgba(167,139,250,.11), transparent 62%), linear-gradient(var(--bg), var(--bg-2)); background-attachment: fixed; } /* [hidden] ka bharosa ------------------- HTML ka `hidden` attribute browser ke default me `display:none` deta hai -- par wo default hai, aur koi bhi class use haraa deti hai. `.y-warn { display:flex }` theek yahi kar raha tha: `#notice` par `hidden` laga hota, phir bhi khaali amber patti har page par dikhti. Yeh ek line usse bandh kar deti hai. `!important` yahan jaayaz hai -- `hidden` ka matlab hi "mat dikhao", uspar bahas ki gunjaish nahi. Yard me bhi yahi kami thi (1 Sep 2026 ko lease banate waqt pakdi -- wahan bhi lagi hai). */ [hidden] { display: none !important; } img { max-width: 100%; display: block; } a { color: inherit; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 14px; } .shell-form { width: 100%; max-width: var(--shell-form); margin: 0 auto; padding: 0 16px; } @media (min-width: 561px) { .shell { padding: 0 20px; } } /* ── entrance ─────────────────────────────────────────────────────────── */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rise { animation: rise .5s var(--ease) both; } .d1 { animation-delay: .05s } .d2 { animation-delay: .11s } .d3 { animation-delay: .17s } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ── header ───────────────────────────────────────────────────────────── */ .y-head { position: sticky; top: 0; z-index: 40; background: rgba(7,11,20,.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--line); } /* ⚠️ Base me sab kuch TANG hai (sabse chhota phone), aur 401px se upar khulta hai. Phone ka menu (☰) aane se header me ek aur 36px ki cheez aa gayi thi aur 320/375 par "List your property" do lakeer me toot kar header 64 se 85px ka ho gaya tha -- naapa gaya. */ .y-head-in { display: flex; align-items: center; gap: 8px; padding: 12px 0; } @media (min-width: 401px) { .y-head-in { gap: 14px; } } .y-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .y-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--grad); color: #04121f; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; letter-spacing: -.5px; box-shadow: 0 6px 18px -8px rgba(79,140,255,.9); } /* ⚠️ ★ TANG PHONE PAR SIRF GOL NISHAAN, SHABD NAHI -- naap kar chuna gaya. 480px ke neeche logo ka shabd chhupta hai aur 53px ki jagah bachti hai; gol "99" nishaan rehta hai (wo khud link hai aur ghar le jaata hai). Wahi faisla 99Lease par bhi hai, usi wajah se, aur uske comment me teeno vikalp ki naap likhi hai. */ .y-word { display: none; font-weight: 800; font-size: 17px; letter-spacing: -.4px; } @media (min-width: 481px) { .y-word { display: block; } } .y-word em { font-style: normal; color: var(--a2); } .y-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; } @media (min-width: 401px) { .y-nav { gap: 4px; } } .y-nav a { font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--ink-2); padding: 8px 9px; border-radius: var(--r-sm); transition: .18s var(--ease); /* ⚠️ Nav ka koi link DO LAKEER me nahi tootta -- wahi cheez header ko 85px ka bana deti thi. */ white-space: nowrap; } @media (min-width: 401px) { .y-nav a { font-size: 13.5px; padding: 9px 12px; } } .y-nav a:hover { color: var(--ink); background: var(--surface-2); } .y-nav a.cta { color: #04121f; background: var(--grad); font-weight: 700; padding: 8px 12px; font-size: 12px; border-radius: var(--r-pill); box-shadow: 0 6px 20px -10px rgba(79,140,255,.95); } @media (min-width: 401px) { .y-nav a.cta { padding: 9px 17px; font-size: 13.5px; } } .y-nav a.cta:hover { color: #04121f; filter: brightness(1.08); } /* ⚠️ `.hide-sm` ab BASE me chhupa hai aur 700px se upar dikhta hai -- pehle ulta likha tha. Dikhaawat wahi, par ab "chhupana" apwaad nahi, "dikhana" apwaad hai; yahi mobile-first ka poora matlab hai. `display: block` jaan-boojh kar: `.y-nav` flex hai, to uske bachche ka `inline` waise bhi `block` ban jaata hai (blockification). */ .y-nav a.hide-sm { display: none; } /* ⚠️ 6 Oct 2026: 701px -> 780px, aur yeh NAAPA hua hai. Nav me ek chautha link aaya ("Paperwork help", /services ka darwaza) aur 701px par qataar 639px ki ho gayi -- shell se 66px BAHAR, yaani panna bagal me khisakne laga (740px par 27px). HEAD par ye 516px thi aur kahin overflow nahi tha; A/B chala kar dono naapi gayin. 780px uss soochi ka apna ank hai jo §23 me jyun ka tyun rakhi gayi thi -- naya paimana yahan nahi ghusaya ja raha. Neeche `.y-more` ka ank bhi WAHI hona chahiye, warna link ek pal DO jagah dikhte hain (mobile-first.test.js dono ko CSS se nikaal kar milaata hai). */ @media (min-width: 780px) { .y-nav a.hide-sm { display: block; } } /* ═══ PHONE KA MENU (maalik, 3 Oct 2026) ════════════════════════════════ Maalik: "99lease and 99Yard koa mobile first banao … professional feel nahin aa raha". ⚠️ ★ 3 OCT SE PEHLE PHONE PAR YE LINK KAHIN SE BHI NAHI KHULTE THE ★ `.hide-sm` 700px ke neeche "Post requirement", "Sign up" aur "CP login" chhupa deta tha aur unke badle kuch aata hi nahi tha -- poore repo me hamburger ka koi nishaan nahi mila (grep: 0). Wo chhupana adhoora tha, faisla nahi. ⚠️ `
` -- apna banaya hua toggle NAHI: wo bina JS ke keyboard, screen reader aur "find in page" teenon sambhaalta hai. ⚠️ Panel ke link upar wali `hide-sm` soochi se HU-BA-HU hain, aur `mobile-first.test.js` dono ko milaata hai. 99Lease par jodidaar hai (`.l-more`, wahan 800px par). */ .y-more { position: relative; flex: 0 0 auto; } .y-more-btn { list-style: none; width: 34px; height: 34px; margin-left: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 15px; line-height: 1; transition: .18s var(--ease); } /* Safari ka apna teer -- `list-style: none` har jagah kaam nahi karta. */ .y-more-btn::-webkit-details-marker { display: none; } .y-more-btn::marker { content: ""; } .y-more-btn:hover { color: var(--ink); border-color: var(--line-strong); } .y-more[open] .y-more-btn { color: var(--ink); border-color: var(--a1); } .y-more-panel { position: absolute; right: 0; top: calc(100% + 9px); z-index: 60; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-2); } /* Panel ke link nav se BADE hain -- yeh ungli ki jagah hai, maus ki nahi. 44px wahi hadd hai jo form ke design system me `--rds-touch` me likhi hai. */ .y-more-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .y-more-panel a:hover { color: var(--ink); background: var(--surface-2); } @media (min-width: 780px) { .y-more { display: none; } } /* ★ upar wale `hide-sm` ke ank se BANDHA hua -- dono ek saath badlo */ @media (prefers-reduced-motion: reduce) { .y-more-btn { transition: none; } } /* ═══ UNGLI KA NISHAANA 44px ════════════════════════════════════════════ Chhote gol/chaukor button dekhne me theek, chhoone me chhote. NAAP NAHI BADHAYA, NISHAANA BADHAYA -- ek paardarshi `::after` 44x44 ka ilaaka banata hai aur layout ka ek bhi pixel nahi hilta. Sirf `pointer: coarse` par, warna maus par yeh nishaana padosi button ke upar chadh jaata. */ @media (pointer: coarse) { /* ⚠️ Share wala button is soochi ke ANT me nahi hai, aur wo jaan-boojh kar hai: `share-button.test.js` uske rule ke sar se block kaat-ta hai, aur agar wahi shakl yahan bhi likhi ho to test YAHAN se kaat-na shuru kar deta hai aur 450 lakeer aage tak chala jaata hai. Pehli koshish me theek wahi hua ("naye block me hardcode hex hai"). */ .y-save, .y-send, .y-more-btn { position: relative; } .y-more-btn::after, .y-save::after, .y-send::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* ── buttons / inputs ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; transition: .18s var(--ease); } .btn:hover { background: var(--surface-3); border-color: var(--a1); } .btn-primary { border-color: transparent; color: #04121f; background: var(--grad); box-shadow: 0 10px 28px -12px rgba(79,140,255,.9); } .btn-primary:hover { filter: brightness(1.08); background: var(--grad); } .btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--r-sm); } .btn:disabled { opacity: .42; cursor: not-allowed; } .btn:disabled:hover { background: var(--surface-2); border-color: var(--line-strong); } .inp, .sel { font: inherit; font-size: 14.5px; width: 100%; color: var(--ink); padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); transition: .18s var(--ease); } .sel { appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0c9' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .inp:focus, .sel:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px rgba(79,140,255,.22); } .inp::placeholder { color: var(--ink-3); opacity: 1; } .sel option { background: var(--surface-2); color: var(--ink); } .chip { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: .18s var(--ease); } .chip:hover { color: var(--ink); border-color: var(--line-strong); } .chip[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #04121f; box-shadow: 0 8px 22px -12px rgba(79,140,255,.95); } /* ── AI pill ──────────────────────────────────────────────────────────── */ .ai-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 6px 13px; border-radius: var(--r-pill); color: var(--a2); background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.32); } .ai-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 10px var(--a2); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } /* ── hero ─────────────────────────────────────────────────────────────── */ .y-hero { position: relative; padding: 62px 0 40px; overflow: hidden; } .y-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* Halka jaal — perspective ke bina, warna wo 2014 lagta hai. */ background-image: linear-gradient(rgba(79,140,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(79,140,255,.055) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%); } .y-hero .shell { position: relative; } .y-hero h1 { margin: 16px 0 12px; font-size: clamp(30px, 5.2vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -1.6px; max-width: 17ch; } .y-hero h1 .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .y-hero .sub { margin: 0 0 26px; font-size: clamp(14.5px, 1.6vw, 17px); color: var(--ink-2); max-width: 56ch; } /* search panel — kaanch ki parat */ .y-search { background: rgba(14,21,36,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px; box-shadow: var(--sh-2); } .y-search-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .y-purpose { display: flex; gap: 8px; } .y-searchrow { display: flex; flex-direction: column; gap: 10px; } .y-searchrow .btn { width: 100%; padding: 14px; } .y-searchrow .inp { flex: 1 1 auto; font-size: 15.5px; padding: 15px 17px; } /* mobile-first: base phone ka, badi screen apwaad. */ @media (min-width: 621px) { .y-searchrow { flex-direction: row; } .y-searchrow .btn { width: auto; padding: 12px 20px; } } .y-hints { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; align-items: center; } .y-hints .lbl { font-size: 12px; color: var(--ink-3); margin-right: 2px; } .y-hint { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-2); transition: .18s var(--ease); } .y-hint:hover { color: var(--a2); border-color: var(--a2); border-style: solid; } /* parsed filter -> chips */ .y-parsed { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .y-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(79,140,255,.14); border: 1px solid rgba(79,140,255,.34); color: #bcd4ff; } /* ── stat strip ───────────────────────────────────────────────────────── */ .y-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 26px; } .y-stat { background: var(--surface); padding: 18px 16px; text-align: center; } .y-stat b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.8px; } .y-stat span { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .7px; font-weight: 600; } /* mobile-first: base phone ka, badi screen apwaad. */ @media (min-width: 701px) { .y-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .y-stat b { font-size: 24px; } } /* ── sections ─────────────────────────────────────────────────────────── */ .y-sec { padding: 52px 0 6px; } .y-sec-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .y-sec h2 { margin: 0 0 4px; font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.8px; } .y-sec .sub { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; } .y-sec-head .more { margin-left: auto; } /* ── grid + property card ─────────────────────────────────────────────── */ .y-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 621px) { .y-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } } .y-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .y-card:hover { transform: translateY(-4px); border-color: rgba(79,140,255,.55); box-shadow: var(--sh-glow); } .y-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(150deg, var(--surface-2), var(--surface-3)); display: flex; align-items: center; justify-content: center; } .y-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .y-card:hover .y-photo img { transform: scale(1.06); } /* Photo na ho to khaali dhabba nahi -- ek saaf nishaan. */ .y-noimg { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink-3); } .y-noimg svg { opacity: .55; } .y-noimg span { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; } .y-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(7,11,20,.86) 0%, rgba(7,11,20,0) 52%); } .y-badge { position: absolute; top: 11px; left: 11px; z-index: 2; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(7,11,20,.78); border: 1px solid var(--line-strong); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .y-badge.rent { color: var(--a2); border-color: rgba(34,211,238,.5); } .y-badge.sale { color: var(--a1); border-color: rgba(79,140,255,.5); } .y-count { position: absolute; bottom: 11px; right: 11px; z-index: 2; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-sm); background: rgba(7,11,20,.72); border: 1px solid var(--line); color: var(--ink-2); } .y-priceover { position: absolute; left: 13px; bottom: 11px; z-index: 2; font-size: 20px; font-weight: 800; letter-spacing: -.6px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); } .y-priceover small { font-size: 12px; font-weight: 600; color: #cbd8ea; } .y-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .y-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .y-loc { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; } .y-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .y-fact { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); } .y-foot-row { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); } .y-ava { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--grad-ai); color: #04121f; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; } .y-foot-row .ago { margin-left: auto; } /* CP ki listing: naam ke BAGAL me uska referral code (2 Oct 2026, Brokers99 patch 603). Maalik ke shabd: "small fonts mein slightly highlighted". Naam, CP ID aur taareekh EK qataar me -- maalik, usi din, card ka screenshot bhej kar: "Name , CP ID , Listed ek row mein rakho". (Pehle code naam ke neeche apni qataar me tha.) * Naam lamba ho to wahi `...` me kat-ta hai -- poora naam `title` me. Code kabhi nahi kat-ta (`nowrap`): wo aadmi ki pehchan hai. * Naam ki basis 4em, aur `max-width: max-content`: qataar todne ka faisla naam ki POORI lambai par nahi hota (warna har lamba naam code ko neeche dhakel deta), aur chhota naam bhi faltu jagah nahi gherta -- code naam ke theek bagal me, bachi jagah taareekh se pehle. * Teeno ek saath samaa hi na sakein to `wrap`: taareekh agli lakeer par utarti hai, naam gaayab NAHI hota. Desktop ka 4-column card sirf 250px ka footer deta hai, aur avatar + code + taareekh akele 248px lete hain -- `nowrap` par naam 0px ho jaata tha aur code card se bahar nikal jaata tha (browser me naapa gaya). Rang sirf token se; `color-mix` na samajhne wala purana browser upar wali saadi keemat par rukta hai. Naap: maalik, usi din -- "CP ID thoda chota rakho". 10.5 -> 9.5px, gaddi aur letter-spacing bhi kam. 9px se neeche nahi (test ki hadd). */ .y-foot-row.has-cp { flex-wrap: wrap; row-gap: 3px; } .y-foot-row.has-cp > .y-ava + span { flex: 1 1 4em; min-width: 0; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .y-foot-row.has-cp > .y-cp, .y-foot-row.has-cp > .ago { flex: none; white-space: nowrap; } .y-cp { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 0 6px; border-radius: var(--r-pill); font-size: 9.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.6; color: var(--a2); background: var(--surface-2); background: color-mix(in srgb, var(--a2) 12%, var(--surface)); border: 1px solid var(--line); border-color: color-mix(in srgb, var(--a2) 32%, var(--surface)); } .y-cp-l { color: var(--ink-2); font-weight: 600; } /* ── AI feature cards ─────────────────────────────────────────────────── */ .y-feat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; overflow: hidden; transition: .22s var(--ease); } .y-feat:hover { border-color: rgba(167,139,250,.5); transform: translateY(-3px); } .y-feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad-ai); } .y-feat .ico { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; background: var(--grad-soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--a2); } .y-feat h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.3px; } .y-feat p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } /* ── cities ───────────────────────────────────────────────────────────── */ .y-cities { display: flex; flex-wrap: wrap; gap: 9px; } .y-city { text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 10px 17px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: .18s var(--ease); } .y-city:hover { border-color: var(--a1); color: var(--a1); background: var(--surface-2); } .y-city span { color: var(--ink-3); font-weight: 500; margin-left: 4px; } /* ── CTA band ─────────────────────────────────────────────────────────── */ .y-band { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(700px 300px at 15% 0%, rgba(79,140,255,.20), transparent 62%), radial-gradient(600px 300px at 90% 100%, rgba(167,139,250,.16), transparent 60%), var(--surface); padding: 26px 20px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .y-band h2 { margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.7px; } .y-band p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 54ch; } .y-band .acts { margin-left: 0; width: 100%; display: flex; gap: 10px; flex-wrap: wrap; } .y-band .acts .btn { flex: 1; } /* mobile-first: base phone ka, badi screen apwaad. */ @media (min-width: 761px) { .y-band { padding: 36px 30px; } .y-band .acts { margin-left: auto; width: auto; } .y-band .acts .btn { flex: 0 1 auto; } } /* ── filters (search page) ────────────────────────────────────────────── */ .y-filters { position: sticky; top: 61px; z-index: 30; background: rgba(7,11,20,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding: 14px 0; } /* ═══ FILTER KI QATAAR — PHONE PAR LIPAT-TI HAI, KAT-TI NAHI ═══════════ (maalik, 3 Oct 2026: "mobile mode mein text ki alignment out … properly aligned nahin hai") ⚠️ ★ YAHAN SACH ME EK CHEEZ KAT RAHI THI, aur wo CHHUPI HUI THI. Pehle yeh qataar har naap par `overflow-x: auto` + `scrollbar-width: none` thi. Chromium me 375px par naapa gaya: andar ka maal 686px tak jaata tha, yaani aakhri do filter aur "Clear" screen se BAHAR the -- aur scrollbar chhupi hone ki wajah se koi nishaan bhi nahi tha ki aage kuch hai. Aadmi ke liye wo "kata hua matn" dikhta tha. Ab phone par qataar LIPAT-TI hai -- do khaane ek lakeer me (`.sel` ki apni hadd 136px hai; 320px ke phone me 292px ki jagah hai, aur 9px gap ke saath do 136 = 281). 620px se upar wahi purani khisakne wali patti. 99Lease par jodidaar badlaav hai (`.l-filterrow`). */ .y-filterrow { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 2px; } .y-filterrow::-webkit-scrollbar { display: none; } .y-filterrow > * { flex: 1 1 calc(50% - 5px); min-width: 0; } /* "Clear" poori lakeer par -- wo filter nahi, unhe HATANE ka kaam hai. */ .y-filterrow > .btn { flex: 1 1 100%; } @media (min-width: 621px) { .y-filterrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .y-filterrow > *, .y-filterrow > .btn { flex: 0 0 auto; } } .y-filterrow .sel { width: auto; min-width: 136px; padding: 10px 32px 10px 13px; font-size: 13.5px; } /* ── states ───────────────────────────────────────────────────────────── */ .y-note { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 26px 22px; text-align: center; color: var(--ink-2); font-size: 14px; } .y-note strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; font-weight: 700; } .y-warn { text-align: left; padding: 14px 16px; font-size: 13.5px; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.07); color: #f5d99b; display: flex; gap: 10px; align-items: flex-start; } .y-warn::before { content: "!"; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: #23180a; font-weight: 900; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* Kiraye wali soochna -- 99Lease ka rang (violet), taaki wo "kuch galat hua" wale peele warning se alag dikhe. Yeh galti nahi hai, raasta hai. */ .y-lease { border-color: rgba(167,139,250,.42); background: radial-gradient(420px 180px at 50% 0%, rgba(167,139,250,.14), transparent 70%), var(--surface); } .y-lease span { display: block; margin-top: 2px; } .y-lease b { color: var(--a3); } .y-lease .soon { margin-top: 13px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: var(--a3); } @keyframes shim { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } } .y-sk { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shim 1.5s ease infinite; border-radius: var(--r-sm); } /* ── footer ───────────────────────────────────────────────────────────── */ .y-foot { margin-top: 64px; border-top: 1px solid var(--line); background: rgba(10,15,28,.7); padding: 30px 0; font-size: 13px; color: var(--ink-3); } .y-foot-in { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; } .y-foot a { color: var(--ink-2); text-decoration: none; } .y-foot a:hover { color: var(--a2); } .y-foot .sp { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; } /* footer ki RBN99 lakeer (27 Sep 2026) -- 99Lease ke `.foot-rbn` ki jodidaar. Har rang token se: is panne ka apna koi naya hex nahi banta (#earn ke `.ce-*` par wahi niyam hai). */ /* ⚠️ `justify-content: space-between` hai, `margin-left: auto` NAHI -- aur is farq ki apni wajah hai. `auto` wali shakl me jis pal matn aur link alag lakeeron me wrap hote hain, link daayein kinare chipke rehte hain aur matn baayein: ek hi patti ke do alag kinare. space-between me akeli lakeer apne start se shuru hoti hai, isliye har chaudai par theek dikhta hai aur koi media query nahi chahiye. Matn ka `flex` isliye ki wo pehle SIKUDE, link toote nahi. */ .y-foot .foot-rbn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .y-foot .foot-rbn-t { flex: 1 1 360px; max-width: 64ch; color: var(--ink-2); } .y-foot .foot-rbn-a { display: flex; gap: 18px; flex-wrap: wrap; } .y-foot .foot-rbn-go { color: var(--a2); font-weight: 700; } /* FOOTER KI PEHCHAN KI LAKEER (28 Sep 2026). Maalik, Brokers99 ke naye footer ke baad: "99yard and 99lease par bhi same footer" -- aur usi din, use dekh kar: "Brokers99 ...a Unit of RBN (Rudra Business Network), ispe rbn99.com site ka link hoa ... baaki koi address display nahin karna." ⚠️ PEHLI LIKHAWAT ME YAHAN PATA AUR DO NUMBER THE, AUR MAALIK NE HATWA DIYE. Wo wapas mat laana: footer par sirf pehchan ki ek lakeer hai, aur uska kaam RBN99 ka darwaza khola hai. `footer-id.test.js` ab ULTI disha me khada hai -- wo naap kar dekhta hai ki footer par koi number ya pata LAUT na aaye. ⚠️ Block HAR panne par hai, sirf home par nahi. `.foot-rbn` sirf home par isliye hai ki uska link `#earn` par jaata hai, jo baaki panno par hai hi nahi; is lakeer par aisi koi shart nahi. ⚠️ Har copy (aur doosre portal ki) ko drift se `footer-id.test.js` bachata hai: wo har panne ka block hu-ba-hu milaata hai aur TWIN_SHA se doosre portal se bhi. Rang sirf token se: ek bhi naya hex nahi. */ .y-foot .foot-id { padding: 20px 0; border-bottom: 1px solid var(--line); } .y-foot .foot-id-name { font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--ink); } .y-foot .foot-id-unit { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* Link ka rang naam lekar: `.y-foot a` har footer-link ko --ink-2 deta hai, aur wo is ek lakeer par galat hai -- yeh RBN99 ka darwaza hai, aam link nahi. Hover par rekha, kyunki rang pehle se accent hai. */ .y-foot .foot-id-unit a { color: var(--a2); text-decoration: none; } .y-foot .foot-id-unit a:hover { text-decoration: underline; } /* ── shortlist ka dil (card par) ──────────────────────────────────────── */ .y-save { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line-strong); background: rgba(7, 11, 20, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: .18s var(--ease); } /* Bina bhara hua dil = "abhi saved nahi". Bhara hua = saved. Sirf rang badalne se colour-blind ko farq nahi dikhta, isliye bharav bhi badalta. */ .y-save svg { fill: none; stroke: var(--ink); stroke-width: 1.8; } .y-save:hover { border-color: #f472b6; } .y-save:hover svg { stroke: #f472b6; } .y-save.on { background: rgba(244, 114, 182, .18); border-color: #f472b6; } .y-save.on svg { fill: #f472b6; stroke: #f472b6; } /* Share -- dil ke theek bagal me, bilkul usi naap aur usi scrim par. ⚠️ Naam `.y-share` NAHI: kal koi search ke nateeje wala share yahan bhi laaye (99Lease par wo `.l-share` pill hai) to do alag shakl ek naam par takra jaayengi. */ .y-send { position: absolute; top: 10px; right: 52px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line-strong); background: rgba(7, 11, 20, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: .18s var(--ease); } .y-send svg { fill: none; stroke: var(--ink); stroke-width: 1.8; } .y-send:hover { border-color: var(--a1); } .y-send:hover svg { stroke: var(--a1); } /* "Link copied" -- gol button me shabd ki jagah hai hi nahi, isliye nishaan rang se jaata hai. `aria-label` bhi usi pal badalta hai (yard-share.js), taaki screen-reader ko bhi pata chale -- akela rang ek khabar nahi hoti. */ .y-send.is-copied { border-color: var(--a1); } .y-send.is-copied svg { stroke: var(--a1); } /* Header par shortlist ki ginti */ .y-nav .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--a1); color: #04121f; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; } /* ── compare table (shortlist) ────────────────────────────────────────── */ /* Chaudi table mobile par page ko todti hai. Isliye wo APNE andar scroll karti hai -- page kabhi baayen-daayen nahi khiskta. */ .y-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .y-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; } .y-table th, .y-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .y-table thead th { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--surface-2); position: sticky; top: 0; } .y-table thead th a { color: var(--a1); text-decoration: none; } .y-table thead th a:hover { text-decoration: underline; } .y-table tbody th { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; width: 1%; } .y-table tbody td { color: var(--ink); font-weight: 600; } .y-table tr:last-child th, .y-table tr:last-child td { border-bottom: 0; } /* Header ka Save button jab saved ho */ .btn.on { border-color: #f472b6; color: #f9a8d4; background: rgba(244, 114, 182, .12); } .btn.on:hover { border-color: #f472b6; background: rgba(244, 114, 182, .2); } /* ── breadcrumb (city page) ───────────────────────────────────────────── */ .y-crumb { padding: 18px 0 4px; font-size: 12.5px; color: var(--ink-3); } .y-crumb a { color: var(--ink-2); text-decoration: none; } .y-crumb a:hover { color: var(--a2); } .y-crumb span { margin: 0 6px; } .y-crumb span:last-child { margin: 0; color: var(--ink); font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════ FORM PAGES — join / login / post-property / requirement ══════════════════════════════════════════════════════════════════════ ⚠️ 9 Sep 2026 — YE BLOCK EK NAAPI HUI KAMI KA JAWAB HAI. Owner: "signup aur sign-in ka UI theek karo, impressive nahi hai, aisa lagta hai 3rd grade student ne banaya hai." Wajah dhoondhne par nikla ki galti design ki nahi, ADOPTION ki thi: is site ka apna design system (yahi file, 532 line) index / search / city / shortlist par chalta hai -- aur chaar FORM page use load hi nahi karte the. Har page apna alag inline