/* ============================================================ RentalSpaces - Main CSS ============================================================ */ /* ============================================================ FONTS — self-hosted woff2, latin + latin-ext only. No Google Fonts request: the CDN link cost a preconnect, a CSS round-trip and a third-party dependency on every page. Space Grotesk and Inter are variable faces, so one file per subset covers the whole weight range. IBM Plex Mono ships static, so the two weights we use are two files each. ============================================================ */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* The rupee sign on its own. CR-439: U+20B9 sits inside the latin-ext unicode-range, so one "₹" on a page (every price) downloaded the whole latin-ext file of each family in use: ~104 KB for Inter + Space Grotesk, on every page, for one glyph. These faces hold that glyph alone (subset from the same latin-ext files, axes kept, so it looks identical), inlined so they cost no request, and U+20B9 is cut out of the latin-ext ranges above so those files load only for real latin-ext text. Regenerate: pyftsubset -latin-ext.woff2 --unicodes=U+20B9 --flavor=woff2 --layout-features='*' (source files kept beside the subsets in /assets/fonts/). */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAANkABMAAAAABtgAAAMAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKj9IVkFSOgZgP1NUQVRYJx4ANC9EEQgKaHowcgE2AiQDCAsGAAQgBYQsByAMBxuaBQieA+7OxjYEDJF6KHWcMwl1SuIkhGgNLLN3BWJQKMuq9RWeyQHiIyxtC7FEJq4C71G0qiZMd4iFnp4HYhz+GxWa25xA9KWVqrxbg9K6ExTpNF+HPmEDbnBZbPSFpgU6uKbefazChtE8kIHOLJNH76u0aqAJboIVNEyK8hFMtxreUX0VW0NCZPTqqAJFVVdT9K8ZPp4kh/8BBIpqqLFUG09e3rt+JaX8bRCgPNoDCBQXqCgEva1RCcHNYqQgT60C0hUg7QycjDIsTxIzTQJSOGFSNrAR5VziyvEj7IP/T8i3BKQiIN4FrqO2TAiFBcrLUV3a1Ld4fUBh5dXXWkBENEeGFCn2k04hILL4BYVzfi1CgXO2QWllR0CTybXWKBIylJdJzKqNXC6ovfInGd3VoSFWWhJv/IVlo+lE+3BciMD6kYj9MMNfwrn0s8f/iAMJ5EiohyaAHJBqBcfE9s2ixaPYrusYuCoaGaUUdfxS/0V7hzdYGBDn0HPtpHplul5v6xkyePBedfT1vLT2F6OTswfk1FaOfByd+Cvzo9ftWSEQFqeqlFcBzftpRQ3vV4aqP+f0j535/PnW6dnI6Vs3aa9e/fnn+4vJf/rx9evN9lDmdKC/xI2dSwZJ9uNurzHbE46O0knv3Xr95cOrlw+eOPj/38EQgcTBp+mds0oVfYaz2Qd4PJ08ce09PI/+/xa8HNwFBSUQ/B/P1xLn36wRArhbpmyMX+CMRjSS6STz8QIAZDIUd0CQyIvgEkgTGrqkSUr6pMl09Ed3XtUUUDUgU11Q/YC6gqB4LDdNKBqbq7shLIvecViucOxVCRGdXMDjK4G2WkemtvEIOrnjEAYLGQ6SQ2VuIQJGYwyllnJ6H5WSD+UKoHH7tBJRmGqllUWC4jYV08A8KDG0UAx1cg2piNFjm4unhtaJAPO+RcOrkuHh34tcsZinEg/EJlpqHSq6GWhnpq3eadqHp11OGsAuWK23wMuFqike/soWqCS2UMzGAv9HLpd9LOB/L+R7AAAAAA==) format('woff2'); unicode-range: U+20B9; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAATEABQAAAAACSwAAARZAAQAQgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKj9IVkFSTT9NVkFSXgZgP1NUQVSBTicmADQvbBEICnSBCDCBTgE2AiQDCAsGAAQgBYVsByAMBxvbBwiO0x31wCRSqEHU49Tfe5IbJVxilTCEM+MQgGtOlAKgPxChiGLXLAAXeFESyAWUcSgv+j7PMePhODX/ooWHloVRXo1VYgOdTayb1kBlewdMB7HZ5gbuq4jEEUt6CEHLI0AEc8wjBUUVDRjoALYNADDWUsup9mI8vZaPGfhXAAFgCii+eo44CjDBUoJ6kAcBcHJCABAEBYi9KQgoFAKAgYOUbY36baOIsmMA42vAT0QIYwE2zmGLfR0BohBgzoPLKkABcnHHS2vR9UskhAMcyfpzwNmTTz3HUXXB9Dg0QKEDAAoAoK5V1vOgeZd7ybAH/58ExnvqVEAA9C7Hy4ApCkEw0IApIoHVlD8wtlkyYMMYsUQQl9XrESeKaRZaK0uRJn18NtvPyQigJJMYQBCQeAYyWgJP8ifKakDLVSgJgbqX+JPlV6GlqJb6VEpL00x3urb3pFKHyQVAAAFACGv2ohD1XOS+mWdPj1g6tPBEcnLCpU6cAAVowBQaAkyhYwIdHQHz2XZo/aAE+SaJwhThGB39rxmAhEDbCyAi8cAAJAF4EiQRZDVIEkgIJBnkV0gKqBaQVFD3gqSBZoKkg7YXEMS2iQVAAaADGrAAZAAAHQDQ9Jn6loa45k3rm6KPvPGG7Ho9Iqo58shrr7Hz1VcjIlxs6b7m3FeDSdfemHjt/MXBuAPaNmPoeFb5eMuec0+9dHrS1Z/e/Knle3rX+v5H3rJudnzeGBVd+HLStV85Ei8HAAEEgFkUALMAtJUiTn3xINQUTjj/LVPP//n5lg8+ueONMNM0v/jk5+c+ueHIoUOHgEN2XbS6nqRdcsmR63PtNnvtTqe9aVfsdx7Pdzg/Q/93QXrjFpndxuQ1qYmFHV38uyvbNuyd3lgzy/x+yarob28JDccb0bMSx6ysWtmLv4C7+IcfuYzLHM013/9O8Dg+ufHGT7hwt6Z9/9SpebbXnXS3ETHhh4+//+j6y9UueeK+vQigk3d/f/Bgd2zOb4ZmAPDx+gOhOOx5dvx/70fcabwHaCgABP6TPdJExH/bmmGuqRxOKdEbySKAYlAEbRwIAAAAOgJMjUJD9HAgBBmECEJQxHA2NBJcCZ1Z3oSDND+zJzAry8VEiJI8xGNIFRKYkiYkEiHrkEQMZyOZKLGQQlx2IhVDQkhjUs5EOhFyNTKYkVuRiSHPwkmUvGrIvXfuD8nnF7DJKJdhIyymJAkSpTE1GDHIVMrHMmiUqcYov3UG9eu5co2zjPAbNca03AiLJWBMlnjxhrlYRozrs1Y/P6/4ke01Jp6rpH5F4fR1Bg0b59FrVIq1EiRIlK1OvUr1SZ3VbM3WAXlMU5N0HuPi52MWqF/sXiPNyaZI1y9BX7mF/maDHSp743fxKbQxOqpXBdElG6k0aIDLOK96g7xc8vh5DKjuUB2grF20n1u1AItLv14epnoumw1KlCKkUpYSmupa/7NePhoA/H+po5jEO8Xed6N+DAA=) format('woff2'); unicode-range: U+20B9; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAR4ABAAAAAACIgAAAQhAAIAxAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcMAZgADQIQAmCcxEQCoF4ggwBNgIkAwYLBgAEIAWCegcgDIM0G4AHCJ4FTpk9GrF6yBCjEKNJFNE0+tsdPE921ftVPehewkfPnuxYDNLZPTAXHF0fzemlQJBeSjRmcrFDI+jnfuzMjCIC2/0AO480SAOZpxGFFgS+5Bf1//tjpT/mbVHh4jat+BoudVMGRxTgmkVelN4cVdCB3Byw35tO0elrOWkisvZGD0YAi1gsprVLYyfIMABsGwByolxJwr8z7b31RWDP2OYysBXMxYYaJntwgNqmhgH09CdlFIVR5jaVj8N0KI3lgFABNd1nEzIXEjv4UQ35/xlDJARAAJShOoFEQkABGgglRLyiiESA0SiQ+Gwb5B2e1sIAEKFQpSz9ym1bV4WXrk67boCvXUkl3ZHIdMF90VwFZeCrOtGrH+mF3EUx+w17Ftnl8Yq9kUJrf8FEjx6VoEhuIlbNVRIZk0dRuV4kOylB0bmJ1USndWnv9fUhn7it+wQ+sQvOjk0SI81rF1ZM8Z4CJAzMOaoelBxp9DhnDRP7+vITFKOPGh7eg0Gcb6LzWr7Jfx7FkdsTiU7v19vWS9ZUxpClddRwHFaRC/2GXS2tkbevL+12Hqz1kaM52+nY5XVms8PdZhkolkZO47nbwriPI2sk69yW4omXUS4MlQI0+inNxTqtjcqafiuWNWhzkuauUU+f0/6vlQmKmduzo7eq0slxfQlg0LixCCS2bQIAUAAYgADxgHQAgAHsAxLv126Jz/a74it+B+9YlvhhceK7fbBu3er0XD5OXll1X9GalRuuCtSXJ9Pu235UfTkqKy5Wte2KmvoOValfZOwD6BSL5WmGPKBoS0pAQcwLAcSOPiLwwf/xAgI78Mf9y4v5qEkzhxwZ2SRlDZM9TA4z0XM7cGeJ5o4htM4lcsEyMkNVvX+gl+CimB6HY7cvqt7FE6K+NDUNGEBxZV3h0rvRAbW/3aZ+B3hcq22Ap3tjO/47tcUYDWCiABD4YF41LIUsQTDfJ2oYKBcDKPlH1BwJAoAFCn0KjQAu2gkRwwTaQRQTop8lCn8WSDSVziUG2V4lDsJ9P6aTdD8qrFi1Z92cGbM2oXSp0uRAdco1wbR1XX+bhMosWoRF+0ZonfJ4qnrblEnJDmtr6TWm7EJNVixb0W7KjC2LxqxLl5ShQE2BqW6SBQkcdc8iVHv3eaENczkHbp7ENr8Qo569QCFAuIsXOV4JPqgc6cQXNcHn79MqR4yHEeDOOY8fjbJEsAwPF/BFGKFBgSjL8k4U/VXIFGTDgmaKLo3EsbjLoF66KGSCbgf9lMsQ6NvlpEAIy0oFu1wUCfIx00HBTR+l6vaXd5lk83IwUsIui70WG1IuDMo+9FQsdSuv/DFx5Xjhp6t5pZEBs9CTQLQAGqAR5sBhEuhcmCcLqcnZgHAIDsNVmCOYzcIdw2abH1MbCYCFWqSHAA==) format('woff2'); unicode-range: U+20B9; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAdUABEAAAAAFGwAAAb6AAIAxAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcMAZgFpc6ADQIRAmCcxEQCoF8gg4BNgIkAwYLBgAEIAWCZgcgDINYG1ATo6J+cFLiAH99oB2hsgu/woRgwU1iUQp0qFRCrSxLnUTuNc/vZ/SuG32KHY/lt9B4J1Dx8P/7fdvn/juqJLE0/2GSXKJZpTHTES8FGqGKru5WCs2OD69XvZ8/SoYr/1mQmVkqWUAHspJK5JwcXN81DVwKw9iVB8ubATAwTkPM5ERfGsUC+B+YZ22TdTMDAP7hv28/1O5kzvrc4LcbbLvqCVtZJ6sCRGVS6EnYOAXsCoCKLasar2ojvO6hQdWkpxagV7BQZKu7rg0mOiAPADq1iZLRv+d9ds3SDELPDS6fQ6i+mapF6p8DPZRb4xWwZ9M4ASmyTDxnNvJ6jqIChOIu2LW5npEnTDNnVfLvC3SPQrwAAZTK3QPzUASHi2K42dGOt/gR/GfC57+QJf9GbCBmt+TsPylHriUFz9w0I60K3pR8EPxU8s2l4o8WqEZQLqxgnBD3pZWwJnmB5bwQnrNW0ImgF6mDqJyOoreexOZk7pqiEJ+TQkKOhyXBdz2k5OiUyiXNb31k5PCVySdLf9k5kConT5OXfelkyNdMRdmTBaHYAQVLd6Ey4HJFKnZQEcyluHubqFSyaouiOA1DVZaxyTGNTw2BhchB4qrMW1f4qALTUk0XYUi2NqWrVqrY8osdxbKrnMZTT/saEGgtTKVIR2zIE9Niqpl5Ibd4QWmzfGU3X9vPNUTroJ3jbO/iA6NrPrnNzCzuuvKaXnv7Rrc+Uzs/3furZPIIwDEwPwFPnHIG0XPY+AXCL/UKOXaN0hv06C2GO3x+Txh54BFRn5CGASgOBISmYPQhCIZDN4NhDcKxBxA4BBIXFH6OJuzHgCVSHEkfntQJSiTvJVE4WSlUPVRqaDRKp+1m0MGk35rF1MU+5uR4Blyv3TwkB98bAh8IfarIV7vYt0r8tEn9IvOncv+/ULCgZFUV28/V7Gg4TZue6bjR8+QG3p8aMfHrs+BPXoTsNT1+E+ZdRD9Ef/QpwZck31L2kx7+SvNXNv+v8AMzloq5tdL3bdgrL+6otuas/j0XJc1dA08t9dZZ9dXFXy8P1P9ukFADDTf6JdLEo5vFmv4cb7Yp0RwkW1ycarUx3Qae0WzbDbl25DtQALQIvl6CtAxXKghVNK/hr9VpCLQpfLUlpi3RjuyVrpyewvpJNSB0SFaOKMa0TpiKKcuM0zlfvlCz1LDS6lpftjH49v+P7Yyle3PJwVL6XF/s0KCAFhhHL4noMKuBHJx3P+Mj/doJApilRrsxWar1OKHJiDtiiaZsth305zpLVMMQ08Eaw+JWRQdLuRdev8x70OxR8Qel60EOHlbj/1UV4mwNj57sS1KRhjHXpKjEAONcrlGRKWfqoqKF3Eoryt0iRchsb39o10i+zM0mBkeUGpWbhYuM7j2cwhSthybr89sOOZWNctDkJaOynJ+k0i3L69DewxhnU0vxqWZ3I39flb6pZUoruklqlpQLYpDtEv3ZTidzKc+amOFZl7NrdoOGrW0e37Vh0n+7zThsmHJ9piV1tYauje4g+dYtzt4Ip3IhHA7au1Bu5lM98TsMxNJR1VKnWlGubnTzQXHXZtMTxGwabYpDctBgITFJxTe1rZJL5DT595kEgjIROOgz2QEFUEGAOWAR8O32DxFzrF0CMe/7FGYh1jMfBYHYIbj8OMAM4c77Knn+GVo3tHulGBXMtZPK8oi03acx+JxmNp+90b6ptrRx20e/s8ADglBhI555UGHbIZV9aZDGLnS9nEoADD8s+7DGhv+t4r+X6fEY7xV43HGNCekCvWUjzqKuoR6j6PEyiiYUmfDNsxpuOWfZhlWer4vx5mum7ybg9T0Eo7gRz7zUNBBQvIgLzGnptxd+DXj6HuBHIf0P/DoSrP3P/BeUzXUVoAcHCPg5Hi6HNEJmHkSvK6S7wKzjkeMHLpMMCKAXCnoXRUCXrqmi8sA4xD1EoqyeY7Oznsp3/FqdXr2er5ev0yDWa1SYt2CNJZPGTViOSZcqTQ6mWrl6LP7rkgXJmDIzZrC5epdxukfHbbR7ZdgzInn+T9dkxqjVmHrz5sxjWo2aNancvBkjWowat8KMQUvSJctQsJT2qY6ldYbtJ1nHiSXLTGr1MXNlljBK9XYucZBAuJV70HYPYcW1yT023IQ9vvsEkYJ5s4Du9mN28SIE8eJ2wa9GFMiUIISn4iynzFQEcAgqW5KIaF9NZ0K7CjEC6JhendJuV6xAHDMolKa1K5gHzjWKFMov9Au4yMQlltNmtWMXL2d90bGaIEwAbzY8rWa21yJJiWhazaJZhUyRvKnXuh+7wvnHFXGPA8/YVuGx18Lc641Mj8eSWBoXrjunYzPtiI5dJXznjb5tiGfjufiqbJ5/YUBgOF9iDzNx3s+283qmAQ==) format('woff2'); unicode-range: U+20B9; } /* Variables */ :root { /* Brand colour. Sea green #10796A since CR-111 — the Chaldean value of "RentalSpaces" is 43 -> 7, whose palette is sea green and teal, ice blue, white and cream, and smoky grey, and which rules out red outright. The block that stood here described the coral/crimson pair as the only brand colour carrying buttons, links, the pin and the mark. All four moved; leaving the note would have told the next maintainer to put red back. */ /* ── Spacing scale ────────────────────────────────────────────────────── One 4px-based ramp for the whole site. Before this there were 75 distinct spacing values across 395 declarations, including 0.55/0.6/0.625/0.65/0.7rem — five values within 2px of each other, which is what made the layout read as clustered rather than deliberate. Use a token; do not invent a value. */ --sp-1: 0.25rem; /* 4px icon-to-text, tight inline gaps */ --sp-2: 0.5rem; /* 8px within a control */ --sp-3: 0.75rem; /* 12px between related items in a list */ --sp-4: 1rem; /* 16px default gap between components */ --sp-5: 1.5rem; /* 24px card padding, gap between cards */ --sp-6: 2rem; /* 32px between blocks inside a section */ --sp-7: 3rem; /* 48px between a heading group and its content */ --sp-8: 4rem; /* 64px between sections */ /* Removed in CR-114: this block asserted navy #1E3A5F and orange #F97316 as the brand colours. Orange was repointed to sea green in CR-111 (it also never passed contrast — white on #F97316 is 2.80:1). Navy is still live in --rs-primary with 215 uses and is on the avoid list; that is tracked as BR1 in project-todo.md, not fixed here. */ /* CR-111: was orange #F97316 / #ea6a0a. Orange is the one high-arousal colour the site had, and the vibration-7 brief rules out the whole red family — so the primary CTA now has to earn attention through placement, weight and contrast rather than hue. White on #10796A is 5.30:1, so the button is if anything more legible than it was: white on #F97316 was 2.93:1 and never passed. */ --rs-accent: #10796A; --rs-accent-dark: #0B5C51; /* Owner's call, 2026-08-18: white label and icon on the accent button. Measured: white on #F97316 is 2.80:1, below the 4.5:1 AA floor at the current 14-16px. Kept because it is an explicit decision, not an oversight — ink #142428 on the same orange would be 6.94:1. */ --rs-on-accent: #FFFFFF; --rs-primary: #1E3A5F; /* navy — 11.50:1 as text on white, and white on it is the same */ --rs-primary-ink: #1E3A5F; /* navy already passes as text, so ink is the same value */ --rs-primary-dark: #152d4a; /* hover fill */ --rs-primary-light: #2a5080; --rs-success: #10B981; --rs-error: #EF4444; --rs-warning: #F59E0B; --rs-info: #3B82F6; --rs-text: #1F2937; --rs-text-light: #6B7280; --rs-text-lighter: #9CA3AF; --rs-border: #E5E7EB; --rs-border-dark: #D1D5DB; --rs-bg: #F9FAFB; --rs-bg-white: #FFFFFF; --rs-bg-card: #FFFFFF; --rs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rs-font-heading: 'Space Grotesk', 'Inter', sans-serif; /* Prices, counts and stat figures. Tabular by default so a column of rents lines up on the decimal instead of drifting. */ --rs-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --rs-hdr-h: 68px; /* compact header height — the flow spacer */ --rs-radius: 8px; --rs-radius-lg: 12px; --rs-radius-xl: 16px; --rs-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --rs-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --rs-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); /* ---- Homepage palette. Every pair below carries a measured WCAG ratio; the ones that fail are named so nobody reaches for them again. Additive on purpose: --rs-primary / --rs-accent above still drive the rest of the site and are not touched here. ---- */ /* --rs-blue and --rs-coral removed in CR-111: zero call sites, and both were the retired cornflower/red pair. The live values are --rs-sea and --rs-sea-light. */ --rs-ice: #A8D8E8; /* CR-111: was cornflower #9FC0F0 (hue 216°, drifting toward the periwinkle/navy the brief warns off, and a second accent hue competing with sea green). #A8D8E8 is hue 195° — the brief's "light blue / ice blue", and it sits between the dark band (192°) and sea green (171°) so it reads as a tint of the band rather than a rival. 10.40:1 on #142428, up from 8.59:1. */ /* Links and anything that was crimson. Was cornflower #2C5AAE and crimson #C4382F (CR-111); renamed from --rs-blue-ink / --rs-coral-ink in CR-114, because a token called "coral" holding a teal value is how the next drift starts. The earlier note here claimed renaming risked missing a call site — it was a scripted rename of 30 occurrences across two files, verified by count before and after. Links keep an identity separate from the sea-green button by sitting in the brief's OTHER approved family, cyan/azure at hue 193, rather than becoming a second green. 5.90:1 on white, 5.52 on cream. */ --rs-azure: #0E6E80; /* the pale ground that pairs with it — moved with it, 193 */ --rs-azure-pale: #E8F4F7; /* One dark hue (192deg), five steps. Saturation RISES as the shade deepens, so the deep end stays a colour instead of collapsing to flat black and the light end stays restrained instead of turning teal. Adjacent steps differ by 1.04-1.16:1 — meant to be felt, not noticed. Overlays lift, footers recede: above the page takes a lighter step, behind or below it a darker one. The old footer navy #1E3A5F was wrong because it was a foreign HUE, not because of its lightness. */ /* Written in hsl, not hex, for two reasons: 8-bit hex quantises the hue by up to 2 degrees at the deep end (at #081214 the channels are 8/18/20, so one unit is degrees), and the ramp is legible here — one hue, saturation and lightness stepping together, so a new step is two obvious numbers rather than reverse-engineered hex. Nothing consumes these as strings; every use is a CSS colour. A would need hex. */ --rs-dark-950: hsl(192 42% 5.5%); /* insets, nav sub-panels */ --rs-dark-900: hsl(192 38% 7.5%); /* page footer — recedes */ --rs-dark-800: hsl(192 33% 11.8%); /* the dark bands. Base, == #142428 */ --rs-dark-700: hsl(192 29% 14.5%); /* overlay panels, mobile nav — lifts */ --rs-dark-600: hsl(192 25% 18.5%); /* raised surfaces inside dark bands. Coral is 4.20:1 here — surfaces only, text on it stays white */ --rs-dark-500: hsl(192 22% 23%); /* hover step above dark-600 */ --rs-dark: var(--rs-dark-800); /* alias, so existing uses keep working */ --rs-cream: #FBF7EF; --rs-cream-hi: #FFFDF7; --rs-ink: #2d3c3f; /* 10.74 on cream */ --rs-ink-muted: #5a6b6e; /* 5.22 on cream — the metadata floor */ --rs-on-dark: #FFFFFF; --rs-on-dark-body: #B7C7CA; /* 9.17 on dark */ --rs-on-dark-mut: #A3B5B8; /* 7.51 on dark — metadata floor on dark */ --rs-line: #e6ded1; /* decorative only */ --rs-line-ctrl: #5a6b6e; /* control borders on light */ --rs-line-dark: rgba(255,255,255,.10); --rs-line-dark-ctrl: rgba(255,255,255,.42); } /* ============================================================ BANDS — dark where we make a case, light where the visitor browses. Shared so a section can be moved up or down the page without its colours travelling with its position. ============================================================ */ /* clamp endpoints are tokens; the 5vw term is untouched. 375px: 18.75px -> floors at --sp-7 (48px), same as before. 1280px: 5vw is 64px, so the band lands exactly on --sp-8. The old 4.75rem ceiling was 76px and only bit above 1520px. */ .rs-band { padding: clamp(var(--sp-7), 5vw, var(--sp-8)) 0; } .rs-band--light { background: var(--rs-cream); color: var(--rs-ink); } .rs-band--white { background: var(--rs-cream-hi); color: var(--rs-ink); } .rs-band--dark { background: var(--rs-dark); color: var(--rs-on-dark); } /* Two dark bands may sit next to each other so long as they are different steps of the one scale — that is what the scale is for. Adjacent bands on the SAME step would read as an undifferentiated slab. */ .rs-band--dark-700 { background: var(--rs-dark-700); } .rs-band--tight { padding: clamp(var(--sp-6), 3.5vw, var(--sp-7)) 0; } .rs-band-title { font-family: var(--rs-font-heading); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; margin-bottom: var(--sp-2); } .rs-band--light .rs-band-title, .rs-band--white .rs-band-title { color: var(--rs-ink); } .rs-band--dark .rs-band-title { color: var(--rs-on-dark); } .rs-band-sub { font-size: 1rem; line-height: 1.6; margin: 0; } .rs-band--light .rs-band-sub, .rs-band--white .rs-band-sub { color: var(--rs-ink-muted); } .rs-band--dark .rs-band-sub { color: var(--rs-on-dark-body); } .rs-band-head { margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6)); max-width: 46rem; } /* Data face: prices, counts, stat figures. */ .rs-mono { font-family: var(--rs-font-mono); font-variant-numeric: tabular-nums; } /* ---- Brand marking ---- Coral marks exactly two things and always marks them: "Spaces" in RentalSpaces and the "X" in Xpert/Xperts. Coral #FE5F55 on cream is 2.81:1 and fails even the large-text floor, so light bands get #C43128 (5.15:1); the token flips on a dark band and the markup never changes. The span wraps a fragment of the word, so the word is still one word to a screen reader and to search. */ /* Wordmark colours, CR-111 (2026-09-03). Were Rental #0066FF, Spaces #FF6B00. "RentalSpaces" carries a Chaldean value of 43 -> 7, whose palette is sea green and teal, ice blue, white and cream, and smoky grey — and which rules out red outright. Orange was the nearest thing on the site to a red accent, and bright blue is neither ice blue nor sea green, so both moved. Rental takes the smoky-grey ink already in the system (10.74 on cream); Spaces takes sea green (4.96 on cream). Owner's call. */ :root { --rs-mark: #10796A; --rs-brand-ink: #2d3c3f; } /* Sea green as a set. Scoped on purpose: these exist so the opening section can be internally coherent WITHOUT repointing --rs-blue-* site-wide, which would recolour every button and link on every page in one unreviewed step. That migration is tracked separately in project-todo.md. */ :root { --rs-sea: #10796A; /* fills and buttons — white on it is 5.30:1 */ --rs-sea-ink: #0B5C51; /* where sea green has to go darker as text */ --rs-sea-light: #7FD3C2; /* on dark bands — 9.14:1 on #142428 */ --rs-sea-pale: #EAF6F3; /* tints and hover grounds */ } /* The two-colour brand mark is a signature, not a highlighter. It runs in the three places the brand signs its name — header, footer, hero — and nowhere else. In body copy and section headings both words take the surrounding text colour: a coloured mark in every H2 reads as noise and stops meaning anything. Owner's call, 2026-08-19. */ .rs-brand, .rs-brand .rs-mk { color: inherit; } .rs-header .rs-brand, .rs-footer .rs-brand, .rs-hero .rs-brand { color: var(--rs-brand-ink); } .rs-header .rs-mk, .rs-footer .rs-mk, .rs-hero .rs-mk { color: var(--rs-mark); } /* Xpert's "pert" is ordinary running text wherever it appears — blue there made a body sentence read as a link. */ .rs-brand--x { color: inherit; } .rs-header .rs-brand--x, .rs-footer .rs-brand--x, .rs-hero .rs-brand--x { color: inherit; } .rs-mk { color: var(--rs-mark); } /* .rs-hero dropped out of this list in CR-111: the homepage hero is a light cream band now, so its wordmark takes the light-ground colours like any other light section. Dark bands and the footer still flip. */ .rs-band--dark, .rs-footer { --rs-mark: #7FD3C2; --rs-brand-ink: #FFFFFF; --rs-pin: #2FA08C; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--rs-hdr-h) + 8px); } body { font-family: var(--rs-font); color: var(--rs-text); background: var(--rs-bg); line-height: 1.6; padding-top: var(--rs-hdr-h); } img { max-width: 100%; height: auto; display: block; } a { color: var(--rs-primary-ink); text-decoration: none; } a:hover { color: var(--rs-primary-dark); } /* The generic link-hover colour must not repaint text inside components that set their own. On a dark card it turned the label to #3D6FD1 — 3.07:1, and less legible on hover than at rest, which is backwards. */ a.rs-type-card:hover, a.rs-type-card:hover .rs-type-label, a.rs-btn:hover, a.rs-city-card:hover, a.rs-property-card:hover { color: inherit; } a.rs-type-card:hover .rs-type-label { color: var(--rs-on-dark); } ul { list-style: none; } [x-cloak] { display: none !important; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); } @media (min-width: 768px) { .container { padding: 0 var(--sp-5); } } @media (min-width: 1024px) { .container { padding: 0 var(--sp-6); } } /* ============================================================ HEADER / NAVBAR ============================================================ */ /* ============================================================ HEADER STATE — two states, one set of tokens. At the top of a page whose first section is dark, the header IS that dark block: same background, no seam, and scaled up. Once you scroll it becomes the compact white bar. Pages that open on a light section start compact, because white nav text on a cream band is invisible — the state is derived from the page's own first section via :has(), not hardcoded to one URL. No layout shift: the header is fixed and the body reserves exactly the COMPACT height, permanently. The tall state overhangs the dark section beneath it, which is the effect we want and costs nothing in flow. Resizing a sticky (in-flow) header would have shoved the whole page up by 28px the moment it shrank — the classic CLS bug in this pattern. ============================================================ */ .rs-header { /* white / compact — the default every page falls back to */ --hdr-bg: var(--rs-bg-white); --hdr-ink: var(--rs-text); --hdr-line: var(--rs-border); --hdr-shadow: var(--rs-shadow); /* CR-114: was --rs-primary. Tabbing the logo and the two nav dropdowns focused a 3px navy ring — the one place #1E3A5F actually painted on the homepage. */ --hdr-focus: var(--rs-sea-ink); --rs-nav-h: var(--rs-hdr-h); --rs-logo-h: 36px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line); box-shadow: var(--hdr-shadow); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* The page decides. Any page whose first section is the hero or a dark band opens with the merged dark header; everything else never matches. */ body:has(.rs-main > .rs-hero:first-child) .rs-header:not(.is-stuck), body:has(.rs-main > .rs-band--dark:first-child) .rs-header:not(.is-stuck) { --hdr-bg: var(--rs-dark); --hdr-ink: #FFFFFF; --hdr-line: transparent; --hdr-shadow: none; --hdr-focus: #FFFFFF; --rs-brand-ink: #FFFFFF; --rs-mark: #7FD3C2; --rs-pin: #2FA08C; --rs-nav-h: 96px; --rs-logo-h: 46px; } .rs-nav { display: flex; align-items: center; gap: var(--sp-3); height: var(--rs-nav-h); transition: height 0.25s ease; } /* Fallback matters: --rs-logo-h is set by the header's state block, and the FOOTER logo is outside it. Without the fallback the declaration is invalid there, height falls back to auto, and the SVG stretches to the column width — a 343x474 logo in the footer. */ .rs-logo img, .rs-logo svg { height: var(--rs-logo-h, 36px); width: auto; transition: height 0.25s ease; } /* Everything in the header reads the state tokens, so nothing can be left behind when the state flips. */ .rs-header .rs-nav-link { color: var(--hdr-ink); } .rs-header .rs-nav-link:hover { background: rgba(127,127,127,0.12); color: var(--hdr-ink); } .rs-header .rs-caret { color: var(--hdr-ink); } .rs-header .rs-btn-outline { color: var(--hdr-ink); border-color: var(--hdr-ink); background: transparent; } .rs-header .rs-btn-outline:hover { background: var(--hdr-ink); color: var(--hdr-bg); } .rs-header .rs-mobile-toggle, .rs-header .rs-user-btn { color: var(--hdr-ink); } .rs-header .rs-user-btn { border-color: var(--hdr-ink); } /* "Add Free Listing" is the one fixed point — coral with an ink label in both states, so it never becomes the thing that moved. */ .rs-header .rs-btn-primary { color: var(--rs-on-accent); } .rs-header a:focus-visible, .rs-header button:focus-visible { outline: 3px solid var(--hdr-focus); outline-offset: 2px; } /* Covered three selectors and left every other transition running — measured on the homepage, .rs-city-tile, .rs-type-card, .rs-search-tab, .rs-faq-toggle, .rs-citycloud a and .rs-btn all still animated under reduce, and html kept scroll-behavior: smooth. The !important is the documented legitimate use: this rule has to beat every component that sets its own transition, and a visitor asking for reduced motion is not negotiating. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } } .rs-nav-links { display: none; gap: 0; flex: 1; } @media (min-width: 1024px) { .rs-nav-links { display: flex; } } .rs-nav-link { padding: var(--sp-1) var(--sp-2); border-radius: var(--rs-radius); font-size: 0.82rem; font-weight: 500; color: var(--rs-text); transition: background 0.15s, color 0.15s; background: none; border: none; cursor: pointer; white-space: nowrap; } .rs-nav-link:hover { background: var(--rs-bg); color: var(--rs-primary-ink); } .rs-nav-more { position: relative; } .rs-nav-more-btn { display: flex; align-items: center; gap: var(--sp-1); white-space: nowrap; } .rs-dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: var(--rs-bg-white); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-lg); min-width: 180px; overflow: hidden; z-index: 50; } .rs-dropdown a { display: block; padding: var(--sp-3) var(--sp-4); font-size: 0.875rem; color: var(--rs-text); transition: background 0.1s; } .rs-dropdown a:hover { background: var(--rs-bg); } .rs-nav-cta { display: none; align-items: center; gap: var(--sp-3); margin-left: auto; } @media (min-width: 768px) { .rs-nav-cta { display: flex; } } .rs-mobile-group { padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9FB0B3; /* 6.46:1 on the overlay panel */ } .rs-mobile-toggle { margin-left: auto; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--rs-text); padding: var(--sp-1); } /* Hide toggle only at desktop where nav links are visible */ @media (min-width: 1024px) { .rs-mobile-toggle { display: none; } } /* On tablet (768–1023px): toggle visible, but margin-left: 0 since CTA is already there */ @media (min-width: 768px) and (max-width: 1023px) { .rs-mobile-toggle { margin-left: var(--sp-2); } } .rs-mobile-menu { background: var(--rs-dark-700); border-top: 1px solid var(--rs-line-dark); --rs-mark: #7FD3C2; --rs-brand-ink: #FFFFFF; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .rs-mobile-menu a { padding: var(--sp-3) var(--sp-3); border-radius: var(--rs-radius); font-weight: 500; color: #FFFFFF; } .rs-mobile-menu a:hover { background: rgba(255,255,255,0.08); } /* CR-120 — the cascade. Three levels, each indented one step further and each a touch quieter than its parent, so depth is legible without a rule or a box. */ .rs-mnav-l1, .rs-mnav-l2-city { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; font-family: inherit; color: #FFFFFF; padding: var(--sp-3); border-radius: var(--rs-radius); min-height: 44px; /* the whole row is the target, not the label */ } .rs-mnav-l1 { font-weight: 700; font-size: 1rem; } .rs-mnav-l2-city { font-weight: 500; font-size: 0.9375rem; padding-left: var(--sp-5); } .rs-mnav-l1:hover, .rs-mnav-l2-city:hover, .rs-mnav-l1:focus-visible, .rs-mnav-l2-city:focus-visible { background: rgba(255,255,255,0.08); } .rs-mnav-l1:focus-visible, .rs-mnav-l2-city:focus-visible { outline: 3px solid var(--rs-ice); outline-offset: -3px; } /* The chevron points right when closed and down when open — the only affordance telling a visitor there is another level under this row. */ .rs-mnav-chev { display: inline-block; font-size: 1.15rem; line-height: 1; color: var(--rs-ice); transition: transform 0.18s ease; } .rs-mnav-chev.is-open { transform: rotate(90deg); } .rs-mnav-l2 { display: flex; flex-direction: column; gap: 2px; } .rs-mnav-l3 { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-6); } .rs-mnav-l3 a { font-size: 0.875rem; font-weight: 400; opacity: 0.92; padding: var(--sp-2) var(--sp-3); } .rs-mnav-all { color: var(--rs-ice) !important; font-weight: 600 !important; opacity: 1 !important; } /* Search results. ONE line per row, left aligned: the place then where it is, as "Kharghar Navi Mumbai". It was two centred lines, which doubled the height of every row so only three fitted, and centring made a scannable list read as a stack of cards. The parent still has to be shown — "Sector 12" is ambiguous across Noida, Gurgaon and Kharghar — but it belongs beside the name, not beneath it. */ .rs-mnav-results { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-5); } .rs-mnav-results a { display: flex; align-items: baseline; gap: 0.4em; text-align: left; justify-content: flex-start; padding: var(--sp-2) var(--sp-3); min-height: 44px; } .rs-mnav-r-name { font-size: 0.9375rem; font-weight: 600; flex: none; } .rs-mnav-r-where { font-size: 0.8125rem; opacity: 0.65; font-weight: 400; /* the parent is the part that gives when the row runs out of width */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rs-mnav-hint { padding: var(--sp-3); margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); } /* Search sits INSIDE the open category, scoped to it, so it answers "residential where?" rather than being a second global search competing with the hero's. */ .rs-mnav-search { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-5); } .rs-mnav-search input[type="search"] { flex: 1; min-width: 0; min-height: 40px; padding: var(--sp-2) var(--sp-3); border-radius: var(--rs-radius); border: 1px solid var(--rs-line-dark); background: rgba(255,255,255,0.06); color: #FFFFFF; font-family: inherit; font-size: 0.875rem; } .rs-mnav-search input::placeholder { color: rgba(255,255,255,0.55); } .rs-mnav-search input:focus { outline: 2px solid var(--rs-ice); outline-offset: 1px; } .rs-mnav-search button { display: grid; place-items: center; min-width: 40px; min-height: 40px; border: 0; border-radius: var(--rs-radius); cursor: pointer; background: var(--rs-sea); color: #FFFFFF; } .rs-mobile-cta { margin-top: var(--sp-2); text-align: center; } .rs-mobile-menu hr { border: none; border-top: 1px solid var(--rs-line-dark); margin: var(--sp-1) 0; } /* User Menu */ .rs-user-menu { position: relative; } .rs-user-btn { display: flex; align-items: center; gap: var(--sp-2); background: none; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--rs-text); } .rs-user-dropdown { position: absolute; top: calc(100% + 4px); right: 0; background: var(--rs-bg-white); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-lg); min-width: 200px; overflow: hidden; z-index: 50; } .rs-user-dropdown a { display: block; padding: var(--sp-3) var(--sp-4); font-size: 0.875rem; color: var(--rs-text); transition: background 0.1s; } .rs-user-dropdown a:hover { background: var(--rs-bg); } .rs-user-dropdown hr { border: none; border-top: 1px solid var(--rs-border); margin: var(--sp-1) 0; } .rs-logout { color: var(--rs-error) !important; } .rs-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rs-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .rs-user-avatar--sm { width: 28px; height: 28px; font-size: 0.75rem; } /* ============================================================ BUTTONS ============================================================ */ .rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-5); border-radius: var(--rs-radius); font-size: 0.875rem; font-weight: 600; line-height: 1.5; cursor: pointer; border: 2px solid transparent; transition: all 0.15s ease; text-decoration: none; white-space: nowrap; } .rs-btn-primary { background: var(--rs-accent); color: var(--rs-on-accent); border-color: var(--rs-accent); } .rs-btn-primary:hover { background: var(--rs-accent-dark); border-color: var(--rs-accent-dark); color: var(--rs-on-accent); } .rs-btn-secondary { background: var(--rs-primary); color: white; border-color: var(--rs-primary); } .rs-btn-secondary:hover { background: var(--rs-primary-dark); border-color: var(--rs-primary-dark); color: white; } .rs-btn-outline { background: transparent; color: var(--rs-primary-ink); border-color: var(--rs-primary-ink); } .rs-btn-outline:hover { background: var(--rs-primary-ink); color: white; } .rs-btn-ghost { background: transparent; color: var(--rs-text); border-color: var(--rs-border); } .rs-btn-ghost:hover { background: var(--rs-bg); } .rs-btn-danger { background: var(--rs-error); color: white; border-color: var(--rs-error); } .rs-btn-sm { padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; } .rs-btn-lg { padding: var(--sp-3) var(--sp-6); font-size: 1rem; } .rs-btn-block { width: 100%; } .rs-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ============================================================ FORMS ============================================================ */ .rs-form-group { margin-bottom: var(--sp-5); } .rs-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--rs-text); margin-bottom: var(--sp-2); } .rs-label-required::after { content: ' *'; color: var(--rs-error); } .rs-input, .rs-select, .rs-textarea { width: 100%; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--rs-border-dark); border-radius: var(--rs-radius); font-size: 0.9rem; font-family: var(--rs-font); color: var(--rs-text); background: var(--rs-bg-white); transition: border-color 0.15s, box-shadow 0.15s; outline: none; appearance: none; } .rs-input:focus, .rs-select:focus, .rs-textarea:focus { border-color: var(--rs-primary); box-shadow: 0 0 0 3px rgba(61, 111, 209, 0.18); } .rs-input::placeholder { color: var(--rs-text-lighter); } .rs-textarea { min-height: 100px; resize: vertical; } /* padding-right is NOT on the scale: it reserves room for the caret drawn at `right 0.75rem`, and both neighbouring steps are wrong — 2rem crowds the arrow, 3rem leaves a dead third of the field. */ .rs-select { 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 fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; } .rs-input-error { border-color: var(--rs-error) !important; } .rs-form-error { font-size: 0.8rem; color: var(--rs-error); margin-top: var(--sp-1); } .rs-form-hint { font-size: 0.8rem; color: var(--rs-text-light); margin-top: var(--sp-1); } /* ============================================================ CARDS ============================================================ */ .rs-card { background: var(--rs-bg-white); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); padding: var(--sp-5); box-shadow: var(--rs-shadow); } .rs-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rs-border); } .rs-card-title { font-family: var(--rs-font-heading); font-size: 1.1rem; font-weight: 600; } /* ============================================================ PROPERTY CARD ============================================================ */ .rs-property-card { background: var(--rs-bg-white); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; display: flex; flex-direction: column; } .rs-property-card:hover { box-shadow: var(--rs-shadow-lg); transform: translateY(-2px); } .rs-property-img { position: relative; height: 200px; overflow: hidden; background: var(--rs-bg); } /* is inline by default, which would break the img's height:100% */ .rs-property-img picture { display: block; width: 100%; height: 100%; } .rs-property-img img { width: 100%; height: 100%; object-fit: cover; } .rs-property-badge { position: absolute; top: var(--sp-3); left: var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .rs-badge-featured { background: var(--rs-accent); color: var(--rs-on-accent); } .rs-badge-new { background: var(--rs-success); color: white; } .rs-property-save { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: transform 0.1s; } .rs-property-save:hover { transform: scale(1.1); } .rs-property-body { padding: var(--sp-4); flex: 1; } .rs-property-price { font-family: var(--rs-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--rs-primary-ink); margin-bottom: var(--sp-1); } .rs-property-price span { font-size: 0.8rem; font-weight: 400; color: var(--rs-text-light); } .rs-property-title { font-weight: 600; font-size: 0.95rem; margin-bottom: var(--sp-2); line-height: 1.4; color: var(--rs-text); } .rs-property-location { display: flex; align-items: center; gap: var(--sp-1); font-size: 0.825rem; color: var(--rs-text-light); margin-bottom: var(--sp-3); } .rs-property-location svg { flex-shrink: 0; } .rs-property-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* Building facts, deliberately NOT chips. The tags above describe the flat; these describe the building, and giving them the same treatment made a card read as nine competing boxes. Quiet text, one line, capped at three by the controller. */ .rs-property-amenities { margin: var(--sp-2) 0 0; font-size: .75rem; line-height: 1.4; color: var(--rs-text-light); } /* CR-464. The card's one action, pinned to the card's foot (the body is flex:1) so a row of cards lines its buttons up. Full width: a 44px tap target that cannot overflow at 360px. */ .rs-property-actions { padding: 0 var(--sp-4) var(--sp-4); } .rs-property-wa { width: 100%; color: var(--rs-text); } .rs-property-wa .rs-ico { width: 18px; height: 18px; flex-shrink: 0; } .rs-property-wa:hover, .rs-property-wa:focus-visible { border-color: var(--rs-accent); color: var(--rs-text); } .rs-tag { padding: var(--sp-1) var(--sp-2); background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: 4px; font-size: 0.75rem; color: var(--rs-text-light); } /* ============================================================ BREADCRUMBS ============================================================ */ .rs-breadcrumbs { background: var(--rs-bg-white); border-bottom: 1px solid var(--rs-border); padding: var(--sp-2) 0; } .rs-breadcrumb-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); font-size: 0.8rem; /* It is an
    , so without these the markers render inline and the trail reads "1. Home2. Navi Mumbai3. Kharghar". flex alone does not remove them. */ list-style: none; margin: 0; padding: 0; } .rs-breadcrumb-list a { color: var(--rs-text-light); } .rs-breadcrumb-list a:hover { color: var(--rs-primary-ink); } .rs-breadcrumb-list li:last-child { color: var(--rs-text); font-weight: 500; } .rs-breadcrumb-sep { color: var(--rs-text-lighter); } /* ============================================================ ALERTS ============================================================ */ .rs-alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--rs-radius); font-size: 0.875rem; font-weight: 500; margin-bottom: var(--sp-4); border: 1px solid transparent; } .rs-alert--success { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; } .rs-alert--error { background: #FEE2E2; color: #991B1B; border-color: #FECACA; } .rs-alert--warning { background: #FEF3C7; color: #92400E; border-color: #FDE68A; } .rs-alert--info { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; } /* ============================================================ BADGES ============================================================ */ .rs-badge { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-2); border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .rs-badge-primary { background: #DBEAFE; color: #1E40AF; } .rs-badge-success { background: #D1FAE5; color: #065F46; } .rs-badge-error { background: #FEE2E2; color: #991B1B; } .rs-badge-warning { background: #FEF3C7; color: #92400E; } .rs-badge-gray { background: #F3F4F6; color: #374151; } /* ============================================================ FOOTER ============================================================ */ /* A footer is a dark band. It used to be old navy #1E3A5F while every dark section on the page was #142428 — two darks stacked, visibly different. */ /* No margin-top: the footer butts straight against the section above it. A margin showed the page background as a white strip. */ .rs-footer { background: var(--rs-dark-900); color: rgba(255,255,255,0.85); padding: var(--sp-8) 0 0; } .rs-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); /* Separation by space, not by hairlines — stacked rules read as clutter. */ padding-bottom: var(--sp-8); } @media (min-width: 768px) { .rs-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .rs-footer-brand p { font-size: 0.875rem; margin-top: var(--sp-3); line-height: 1.6; } /* CR-170: the two Pages. Quiet by default, full white on hover; the ring is the focus state. */ .rs-footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .rs-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.75); transition: color .2s ease, background .2s ease, border-color .2s ease; } .rs-footer-social a:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); } .rs-footer-social a:focus-visible { outline: 2px solid #7FD3C2; outline-offset: 2px; } .rs-footer-logo { display: inline-block; margin-bottom: var(--sp-3); } .rs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rs-footer-col h3, .rs-footer-cities h3 { font-family: var(--rs-font-heading); font-size: 0.9rem; font-weight: 600; color: white; margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: 0.5px; } .rs-footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); } .rs-footer-col a { font-size: 0.875rem; color: rgba(255,255,255,0.7); transition: color 0.15s; } .rs-footer-col a:hover { color: #FFFFFF; } .rs-footer-bottom { padding-top: var(--sp-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); } .rs-footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.6); } /* Legal boilerplate. The class was in the markup but never styled, so it fell back to the 16px base and rendered LARGER than the footer nav links at 0.875rem — two dense paragraphs of disclaimer outweighing the links people actually came for. It has to appear on every page for RERA scope, but it is reference text, not navigation: smallest type in the footer, and dimmer than the links above it. */ /* Deepest step of the scale — the small print recedes furthest. Separated by space and shade, never by a hairline rule. */ /* One faint rule above the small print — a single hairline reads as a deliberate boundary where several read as clutter. The shade step does the rest of the work. */ .rs-footer-disclaimer { margin-top: 0; padding: var(--sp-6) 0; background: var(--rs-dark-950); border-top: 1px solid rgba(255,255,255,0.06); } .rs-footer-disclaimer p { font-size: 0.72rem; line-height: 1.55; color: rgba(255, 255, 255, 0.5); } .rs-footer-disclaimer p + p { margin-top: var(--sp-2); } /* "Disclaimer." only needs to mark where the notice starts — at full white it read as a heading competing with the column titles. */ .rs-footer-disclaimer strong { color: rgba(255, 255, 255, 0.65); font-weight: 600; } /* ============================================================ GRID & LAYOUT HELPERS ============================================================ */ .rs-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 640px) { .rs-grid-2 { grid-template-columns: 1fr 1fr; } } .rs-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 640px) { .rs-grid-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .rs-grid-3 { grid-template-columns: 1fr 1fr 1fr; } } .rs-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (min-width: 1024px) { .rs-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* padding-block, NOT the `padding: 3rem 0` shorthand it used to be. .rs-section is applied alongside .container on 13 content pages (about, city, locality, search, pricing, blog, contact, the legal pages...) and the shorthand reset .container's `padding: 0 1rem` to zero, so every one of them ran its text hard against both screen edges on mobile. Only the vertical rhythm belongs to this class; the horizontal gutter is .container's job and nothing here should overwrite it. */ .rs-section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); } .rs-section-title { font-family: var(--rs-font-heading); font-size: 1.75rem; font-weight: 700; color: var(--rs-primary-ink); margin-bottom: var(--sp-2); } .rs-section-subtitle { color: var(--rs-text-light); font-size: 1rem; margin-bottom: var(--sp-6); } /* ============================================================ UTILITIES ============================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .text-primary { color: var(--rs-primary-ink); } .text-accent { color: var(--rs-azure); } .text-light { color: var(--rs-text-light); } .text-success { color: var(--rs-success); } .text-error { color: var(--rs-error); } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-8 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); } .mb-8 { margin-bottom: var(--sp-6); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ============================================================ MEGA MENU ============================================================ */ .rs-has-mega { position: static !important; } .rs-caret { font-size: 10px; opacity: 0.55; margin-left: var(--sp-1); transition: transform 0.2s; } .rs-has-mega:hover .rs-caret { transform: rotate(180deg); } .rs-mega { position: absolute; top: var(--rs-nav-h); left: 0; right: 0; background: #fff; border-top: 3px solid var(--rs-primary); box-shadow: 0 16px 48px rgba(0,0,0,0.13); z-index: 999; } .rs-mega-inner { max-width: 1200px; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); } .rs-mega-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid #f0f0f0; } .rs-mega-top strong { font-size: 14px; font-weight: 600; color: #0A1628; } .rs-mega-view-all { font-size: 13px; color: var(--rs-primary); font-weight: 500; } .rs-mega-view-all:hover { text-decoration: underline; } .rs-mega-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 0 var(--sp-6); } .rs-mega-col-head { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #555; font-weight: 700; margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 2px solid color-mix(in srgb, var(--rs-primary) 13%, transparent); } .rs-mega-col a { display: block; font-size: 13.5px; color: #444; padding: var(--sp-1) 0; transition: color 0.12s, padding-left 0.12s; } /* Hover slide distance, not spacing — this is motion, so it stays in px. */ .rs-mega-col a:hover { color: var(--rs-primary); padding-left: 4px; } .rs-mega-col--types a { font-size: 13px; color: #555; padding: var(--sp-1) 0; border-bottom: 1px solid #f8f8f8; } .rs-mega-col--types a:last-child { border-bottom: none; } .rs-mega-col--types a:hover { color: var(--rs-accent); padding-left: 0; } /* ── Tab Mega Menu (More Cities) ── */ .rs-mega--tab .rs-mega-inner { display: grid; grid-template-columns: 190px 1fr; min-height: 420px; padding: 0; } .rs-mega-tab-sidebar { border-right: 1px solid #eee; padding: var(--sp-4) 0; background: #fafafa; } .rs-mega-tab-btn { display: block; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-5); font-size: 13.5px; color: #555; background: none; border: none; border-left: 3px solid transparent; cursor: pointer; font-family: inherit; transition: background 0.1s, color 0.12s, border-color 0.12s; } .rs-mega-tab-btn:hover { background: var(--rs-azure-pale); color: var(--rs-primary); } .rs-mega-tab-btn.is-active { background: var(--rs-azure-pale); color: var(--rs-primary); font-weight: 600; border-left-color: var(--rs-primary); } .rs-mega-tab-panels { padding: var(--sp-5) var(--sp-6); } .rs-mega-tab-panel { display: none; } .rs-mega-tab-panel.is-active { display: block; } .rs-mega-tab-city { font-size: 17px; font-weight: 700; color: #0A1628; margin-bottom: var(--sp-1); } .rs-mega-tab-hint { font-size: 11.5px; color: #aaa; margin-bottom: var(--sp-4); } .rs-mega-tab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-7); } .rs-mega-tab-col-head { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #555; font-weight: 700; margin-bottom: var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 2px solid color-mix(in srgb, var(--rs-primary) 13%, transparent); } .rs-mega-tab-col a { display: block; font-size: 13px; color: #555; padding: var(--sp-1) 0; transition: color 0.12s, padding-left 0.12s; } /* Hover slide distance, not spacing — see .rs-mega-col a:hover above. */ .rs-mega-tab-col a:hover { color: var(--rs-primary); padding-left: 3px; } .rs-mega-tab-col.is-types a:hover { color: var(--rs-accent); padding-left: 0; } .rs-mega-tab-all { display: inline-block; margin-top: var(--sp-4); font-size: 12.5px; color: var(--rs-primary); font-weight: 500; border-top: 1px solid #eee; padding-top: var(--sp-3); width: 100%; } /* ============================================================ LOGO — HTML wordmark (display face, crisp at all sizes) ============================================================ */ .rs-logo { display: flex; align-items: center; gap: var(--sp-1); text-decoration: none; flex-shrink: 0; } .rs-logo img, .rs-logo svg { display: block; } /* CR-169: the lockup is inline SVG (app/templates/partials/logo-lockup.svg, generated by docs/ads/navi-mumbai-branding/lockup.py). RENTAL takes --rs-brand-ink, SPACES takes --rs-mark, so the dark header, dark bands and the footer recolour it as they did the text; the pin lifts to --rs-pin there, the logo-white.svg colours. */ .rs-logo svg .rs-pin { fill: var(--rs-pin, #10796A); } /* ============================================================ MOBILE RESPONSIVENESS — comprehensive fixes ============================================================ */ /* ── Viewport meta safety: prevent horizontal overflow ── */ /* clip, not hidden: `hidden` makes html/body a scroll container, which disables position:sticky for every descendant on the site — the city page's locality rail and the property page's contact card both silently scrolled away. `clip` prevents the same horizontal overflow without creating that container. */ html, body { overflow-x: clip; width: 100%; } /* ── Nav: fix tablet gap (768–1023px) where CTA shows but no nav links ── */ @media (min-width: 768px) and (max-width: 1023px) { .rs-nav-cta { gap: var(--sp-2); } .rs-nav-cta .rs-btn { padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; } } /* ── Mobile toggle visible below 1024px (not 768px) to keep nav consistent ── */ @media (min-width: 768px) and (max-width: 1023px) { .rs-mobile-toggle { display: flex; } } /* ── Mobile menu: better touch targets ── */ @media (max-width: 767px) { .rs-mobile-menu a { padding: var(--sp-3) var(--sp-4); font-size: 0.95rem; min-height: 44px; display: flex; align-items: center; } .rs-mobile-cta { display: flex; justify-content: center; margin-top: var(--sp-3); } .rs-mobile-cta.rs-btn { display: flex; width: 100%; justify-content: center; } } /* ── Property card grid: 1 col mobile, 2 col tablet, 3 col desktop ── */ @media (max-width: 639px) { .rs-grid-3 { grid-template-columns: 1fr; } .rs-grid-2 { grid-template-columns: 1fr; } } /* ── Property card image: slightly smaller on mobile ── */ @media (max-width: 480px) { .rs-property-img { height: 180px; } } /* ── Minimum font sizes on mobile (nothing under 14px / 0.875rem) ── */ @media (max-width: 767px) { /* Spec labels, gallery counter, badges, meta text — bump to 14px */ .rs-spec-label { font-size: 0.875rem; } .rs-gallery-counter { font-size: 0.875rem; } .rs-property-badge { font-size: 0.875rem; padding: var(--sp-1) var(--sp-3); } .rs-trust-item span { font-size: 0.875rem; } .rs-trust-item strong { font-size: 1.1rem; } .rs-suggestion-meta { font-size: 0.875rem; } .rs-property-location { font-size: 0.875rem; } .rs-tag { font-size: 0.8125rem; } .rs-breadcrumb-list { font-size: 0.875rem; } .rs-seo-content p { font-size: 0.9rem; } } /* ── Search box: stack cleanly on mobile ── */ @media (max-width: 600px) { .rs-search-tabs { gap: var(--sp-2); } .rs-search-tab { flex: 1; padding: var(--sp-2) var(--sp-2); font-size: 0.8rem; text-align: center; } .rs-search-row { flex-direction: column; gap: var(--sp-3); } .rs-search-location { min-width: unset; width: 100%; } .rs-search-select { width: 100%; min-width: unset; } .rs-search-btn { width: 100%; padding: var(--sp-3); font-size: 1rem; } } /* ── Hero: smaller font on small screens ── */ @media (max-width: 479px) { /* CR-114: the !important pair here overrode home.php's clamp(1.9rem, 1.2rem + 3.1vw, 3.5rem), making its lower half unreachable and starting exactly the specificity war the design rules warn about. The clamp already floors at 1.9rem, which is the size these breakpoints wanted. */ .rs-hero-subtitle { font-size: 0.9375rem; } .rs-hero { padding: var(--sp-7) 0 var(--sp-6); } } @media (min-width: 480px) and (max-width: 767px) { } /* ── Trust bar: wrap gracefully on mobile ── */ @media (max-width: 479px) { .rs-trust-items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-2); text-align: center; } .rs-trust-divider { display: none; } } /* ── Property types grid (rs-grid-4): 2 col on mobile ── */ /* Already 2-col by default — just ensure text isn't clipped */ @media (max-width: 479px) { .rs-type-label { font-size: 0.8rem; padding: var(--sp-2) var(--sp-2); } .rs-type-img { height: 80px; } } /* ── Cities grid: 2 col on very small screens ── */ @media (max-width: 479px) { .rs-cities-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Section titles: scale down on mobile ── */ @media (max-width: 767px) { .rs-section-title { font-size: 1.375rem; } .rs-section-subtitle { font-size: 0.9rem; } .rs-section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); } } /* ── Partners card: better mobile layout ── */ @media (max-width: 600px) { .rs-partners-card { padding: var(--sp-5); gap: var(--sp-4); flex-direction: column; align-items: flex-start; } .rs-partners-icon { font-size: 2.5rem; } .rs-partners-content h2 { font-size: 1.15rem; } .rs-partners-content p { font-size: 0.875rem; } } /* ── CTA section: stack buttons vertically on small screens ── */ @media (max-width: 479px) { .rs-cta-card { padding: var(--sp-6) var(--sp-5); } .rs-cta-content h2 { font-size: 1.375rem; } .rs-cta-content > div { flex-direction: column; gap: var(--sp-3); } .rs-cta-content .rs-btn { width: 100%; justify-content: center; } } /* ── Featured listings header: stack on mobile ── */ @media (max-width: 479px) { .rs-section > .container > div[style*="display:flex"] { flex-direction: column; gap: var(--sp-2); } } /* ── Property detail page ── */ /* Gallery: smaller fixed height on mobile */ @media (max-width: 767px) { .rs-gallery-main { height: 240px; border-radius: var(--rs-radius); } .rs-gallery-placeholder { height: 240px; } .rs-gallery-prev, .rs-gallery-next { width: 36px; height: 36px; font-size: 1.1rem; } } @media (max-width: 479px) { .rs-gallery-main { height: 200px; } .rs-gallery-placeholder { height: 200px; } } /* Gallery thumbs: horizontal scroll — already set, ensure no overflow */ .rs-gallery-thumbs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rs-gallery-thumbs::-webkit-scrollbar { display: none; } @media (max-width: 767px) { .rs-gallery-thumb { width: 60px; height: 50px; } } /* Detail header: always stack title above price on mobile */ @media (max-width: 767px) { .rs-detail-header { flex-direction: column; gap: var(--sp-3); } .rs-detail-price-box { order: -1; } .rs-detail-title { font-size: 1.15rem; } .rs-detail-price { font-size: 1.5rem; } } /* Specs grid: 2 col on mobile is fine, but reduce padding */ @media (max-width: 479px) { .rs-detail-specs { padding: var(--sp-4); gap: var(--sp-3); } .rs-spec-value { font-size: 0.875rem; } } /* Amenities: 2 col is fine on mobile */ @media (max-width: 479px) { .rs-amenity-item { font-size: 0.875rem; } } /* Contact card: on mobile, add a sticky "Contact Owner" bar at the bottom */ @media (max-width: 1023px) { .rs-contact-card { position: static; } } /* ── Sticky contact bar on mobile property detail page ── */ @media (max-width: 1023px) { /* Sits ABOVE the global .rs-bottomnav, which already owns the bottom 66px of every page. This was bottom:0, which stacked the two bars on the same strip — and at z-index 90 over the nav's 40 it swallowed every tap, so all five nav items were unreachable on every property page below 1024px. */ .rs-mobile-contact-bar { display: flex; position: fixed; /* Flush on top of the nav, from the nav's own height — not a number copied across and left to rot, which is what opened the 8px gap. */ bottom: var(--rs-bottomnav-h); left: 0; right: 0; z-index: 90; background: white; border-top: 1px solid var(--rs-border); padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); box-shadow: 0 -4px 12px rgba(0,0,0,0.1); } .rs-mobile-contact-bar .rs-btn { flex: 1; min-height: 44px; } /* CR-327: with the icon-only call button there are three; keep them on one row at 360px. */ .rs-mbar-call { gap: var(--sp-2); } .rs-mbar-call .rs-btn { min-width: 0; padding-left: var(--sp-3); padding-right: var(--sp-3); white-space: nowrap; } .rs-mbar-call .rs-btn-call { flex: 0 0 52px; padding: 0; justify-content: center; } .rs-mbar-call .rs-btn-call .rs-ico { width: 21px; height: 21px; } /* Add bottom padding to body so content doesn't hide behind the bar */ .rs-detail-has-mobile-bar { padding-bottom: 80px; /* clearance for a fixed bar, not page rhythm */ } /* The rule above never applied: .rs-detail-has-mobile-bar also carries an inline padding-bottom, which wins. Clear both stacked bars (66px nav + 69px contact bar) from the body instead, where nothing competes. */ body.rs-body:has(.rs-mobile-contact-bar) { /* both stacked bars: the nav, plus the contact bar's own 69px measured height */ padding-bottom: calc(var(--rs-bottomnav-h) + 70px); } } @media (min-width: 1024px) { .rs-mobile-contact-bar { display: none !important; } } /* ── Search page: filter improvements on mobile ── */ @media (max-width: 1023px) { .rs-search-filters { margin-bottom: var(--sp-3); } .rs-filter-toggle { padding: var(--sp-3) 0; font-size: 0.95rem; min-height: 44px; } .rs-filter-body.open { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rs-border); } } @media (max-width: 767px) { .rs-search-h1 { font-size: 1.2rem; } .rs-filter-range { gap: var(--sp-2); } .rs-filter-range .rs-input { min-width: 0; padding: var(--sp-2) var(--sp-2); font-size: 0.875rem; } .rs-filter-checkbox { font-size: 0.9rem; } .rs-filter-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; } } /* ── Auth pages: full-width card on very small screens ── */ @media (max-width: 479px) { .rs-auth-right { padding: var(--sp-5) var(--sp-3); } .rs-auth-card { padding: var(--sp-5) var(--sp-5); border-radius: var(--rs-radius-lg); } .rs-auth-card-title { font-size: 1.25rem; } .rs-role-label { padding: var(--sp-3) var(--sp-2); font-size: 0.75rem; } .rs-role-icon { font-size: 1.25rem; } } /* ── City/Locality page: section block spacing on mobile ── */ @media (max-width: 767px) { .rs-city-hero { padding: var(--sp-5) 0 var(--sp-4); } .rs-city-h1 { font-size: 1.375rem; } .rs-city-subtitle { font-size: 0.9rem; } .rs-section-block { margin-bottom: var(--sp-6); } .rs-block-title { font-size: 1rem; } .rs-locality-name { font-size: 0.875rem; } .rs-locality-count { font-size: 0.75rem; } } /* On very small screens locality grid is 1 col */ @media (max-width: 479px) { .rs-locality-grid { grid-template-columns: 1fr; } } /* ── General: touch-friendly tap targets ── */ @media (max-width: 1023px) { .rs-btn { min-height: 44px; } .rs-btn-sm { min-height: 36px; } .rs-input, .rs-select, .rs-textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom */ } .rs-search-input { font-size: 16px; } } /* ── Footer: better mobile spacing ── */ @media (max-width: 767px) { .rs-footer { padding: var(--sp-6) 0 var(--sp-4); } .rs-footer-grid { gap: var(--sp-5); } .rs-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } } /* ── Cards: prevent content from overflowing narrow screens ── */ @media (max-width: 767px) { .rs-card { padding: var(--sp-5); } .rs-card-header { gap: var(--sp-3); } .rs-card-title { font-size: 1rem; } } /* ── Section heading + view-all flex on mobile ── */ @media (max-width: 479px) { .rs-view-all-link { font-size: 0.8rem; } } /* ── Mobile app-shell bottom nav ── */ /* The nav's height, declared rather than emergent. It used to be set by padding alone, and three separate values were hand-measured against it — body's reserve, the contact bar's offset and the two-bar reserve. Every one of them drifted: measured at 390px on 2026-09-04 the nav was 61.63px while the contact bar sat at 70px, so an 8px strip of the page showed through between the two bars. One number, three consumers, no drift. */ :root { --rs-bottomnav-h: calc(62px + env(safe-area-inset-bottom, 0px)); } .rs-bottomnav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--rs-bg-white); border-top: 1px solid var(--rs-border); height: var(--rs-bottomnav-h); padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px rgba(0,0,0,0.06); } @media (max-width: 1023px) { .rs-bottomnav { display: flex; align-items: flex-start; justify-content: space-around; } body.rs-body { padding-bottom: var(--rs-bottomnav-h); } } .rs-bottomnav-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); color: var(--rs-text-light); font-size: 0.65rem; font-weight: 600; padding: var(--sp-1) var(--sp-2); text-decoration: none; min-width: 52px; } .rs-bottomnav-item:hover, .rs-bottomnav-item.is-active { color: var(--rs-primary-ink); } .rs-bottomnav-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--rs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } /* ── Market rent ranges table (city + locality pages) ─────────────────────── */ .rs-rent-table-intro { color: var(--rs-text-light); margin: 0 0 var(--sp-4); font-size: .95rem; } .rs-rent-table-wrap { overflow-x: auto; /* narrow phones scroll the table, not the page */ -webkit-overflow-scrolling: touch; border: 1px solid var(--rs-border); border-radius: 10px; background: var(--rs-bg-white); } .rs-rent-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 30rem; } .rs-rent-table thead th { text-align: left; font-family: var(--rs-font-heading); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rs-text-light); background: var(--rs-bg); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rs-border); white-space: nowrap; } .rs-rent-table tbody th { text-align: left; font-weight: 600; color: var(--rs-text); } .rs-rent-table tbody th, .rs-rent-table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rs-border); white-space: nowrap; } .rs-rent-table tbody tr:last-child th, .rs-rent-table tbody tr:last-child td { border-bottom: 0; } .rs-rent-table tbody tr:hover { background: var(--rs-bg); } .rs-rent-table tbody td:first-of-type { font-variant-numeric: tabular-nums; /* rent columns line up digit-for-digit */ font-weight: 600; color: var(--rs-primary-ink); } .rs-rent-na { color: var(--rs-text-lighter); font-weight: 400; } .rs-rent-table-note { color: var(--rs-text-lighter); font-size: .85rem; margin: var(--sp-3) 0 0; } /* ── Legal pages (privacy policy, terms of service) ───────────────────────── */ /* The readable measure belongs to the text, not to the container: .container stays 1200px on every page so section edges line up site-wide. */ .rs-legal > * { max-width: 46rem; } .rs-legal-head { margin-bottom: var(--sp-6); } .rs-legal-head h1 { font-family: var(--rs-font-heading); margin: 0 0 var(--sp-1); } .rs-legal-meta { color: var(--rs-text-light); font-size: .9rem; margin: 0; } .rs-legal-callout { background: var(--rs-bg); border-left: 3px solid var(--rs-primary); border-radius: 0 8px 8px 0; padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-6); font-size: .95rem; line-height: 1.65; } .rs-legal-body h2 { font-family: var(--rs-font-heading); font-size: 1.1rem; margin: var(--sp-6) 0 var(--sp-2); padding-top: var(--sp-1); border-top: 1px solid var(--rs-border); } .rs-legal-body p, .rs-legal-body li { line-height: 1.7; color: var(--rs-text); } .rs-legal-body ul { padding-left: var(--sp-4); margin: var(--sp-2) 0 var(--sp-4); } .rs-legal-body li { margin-bottom: var(--sp-2); } .rs-legal-table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: .9rem; display: block; overflow-x: auto; } .rs-legal-table th, .rs-legal-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--rs-border); vertical-align: top; } .rs-legal-table th { background: var(--rs-bg); font-weight: 600; white-space: nowrap; } .rs-legal-related { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rs-border); } /* ── Mobile footer: bottom nav is the navigation, footer is just credits ────── The desktop footer renders 1,022px tall on a 812px phone — a full screen of link columns sitting above a bottom nav that already navigates. Below 1024px the columns collapse out and a compact essentials row carries the legal and company pages. The columns stay in the DOM, so crawling is unaffected and the same city links remain in the nav at every viewport. */ .rs-footer-mobile-links { display: none; } /* ── Rentals by city: every city on one full-width row ──────────────────────── The four footer columns cannot hold ten cities without one running twice the height of its neighbours. A full-width row fits all of them, and wrapping inline items means adding an eleventh city changes nothing about the layout. Kept visible on mobile, unlike the link columns: this is one wrapped row of short words, not a screen-height column, and it is the only place on a phone where another city is reachable from the footer. */ .rs-footer-cities { padding-top: 0; margin-top: var(--sp-7); } .rs-footer-cities h3 { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 var(--sp-2); } .rs-footer-cities ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); } .rs-footer-cities a { font-size: .85rem; color: rgba(255, 255, 255, .72); text-decoration: none; } .rs-footer-cities a:hover, .rs-footer-cities a:focus-visible { color: #fff; text-decoration: underline; } @media (max-width: 1023px) { .rs-footer-grid > .rs-footer-col { display: none; } .rs-footer-cities { padding-top: var(--sp-4); } .rs-footer-cities ul { gap: var(--sp-1) var(--sp-4); } .rs-footer-cities a { font-size: .8rem; } .rs-footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--sp-1); } .rs-footer-brand p { font-size: .825rem; } .rs-footer-mobile-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: var(--sp-6) 0 var(--sp-1); } .rs-footer-mobile-links a { color: rgba(255, 255, 255, .72); font-size: .85rem; text-decoration: none; padding: var(--sp-1) 0; /* keeps the tap target reasonable */ } .rs-footer-mobile-links a:hover, .rs-footer-mobile-links a:focus-visible { color: #fff; } } /* Residential vs commercial split inside the rent-range block */ .rs-rent-table-caption { font-family: var(--rs-font-heading); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rs-text-light); margin: var(--sp-5) 0 var(--sp-2); } .rs-rent-table-caption:first-of-type { margin-top: 0; } /* ── Locality / area grid ───────────────────────────────────────────────────── These classes were styled inside city.php only, so locality.php used them with no CSS at all and the "Areas in {locality}" block rendered as a run-on paragraph. Shared here so every page using them looks the same. */ .rs-locality-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } @media (min-width: 640px) { .rs-locality-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .rs-locality-grid { grid-template-columns: repeat(4, 1fr); } } .rs-locality-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--rs-bg-white); border: 1px solid var(--rs-border); border-radius: 8px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .rs-locality-card:hover, .rs-locality-card:focus-visible { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-sm, 0 1px 4px rgba(0,0,0,.07)); transform: translateY(-1px); } .rs-locality-name { font-weight: 600; font-size: .9rem; color: var(--rs-text); } .rs-locality-count { font-size: .78rem; color: var(--rs-text-light); } /* Filter box — only rendered when a locality has enough areas to need it */ .rs-area-filter { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); } .rs-area-filter input { flex: 1 1 auto; max-width: 22rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rs-border); border-radius: 8px; font-size: .9rem; font-family: inherit; } .rs-area-filter input:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 1px; border-color: var(--rs-primary); } .rs-area-filter-count { font-size: .82rem; color: var(--rs-text-light); white-space: nowrap; } .rs-area-empty { color: var(--rs-text-light); font-size: .9rem; padding: var(--sp-2) 0; } /* Screen-reader-only label — the filter input needs a name, not a placeholder. */ .rs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Alias line under a search H1 — names the other words for the same product. */ /* Now an inline span inside the count line, not a paragraph beneath it — so the block margin has to go or it would push the line it lives on. */ .rs-search-aliases { color: var(--rs-text-light); } .rs-search-help { font-size: .92rem; line-height: 1.6; color: var(--rs-text-light); margin: var(--sp-2) 0 0; /* No max-width. 62ch is the right measure for a column of prose, but this is a single lead paragraph sitting under a full-width H1 and above a full-width table — capping it stopped the text at ~40% of the container and left a band of dead space beside the header. Matching the blocks above and below it reads as deliberate; a lone narrow column in the middle reads as broken. */ } /* ── Header mega menu (Residential / Commercial) ────────────────────────────── Cities down the left act as tabs; hovering one swaps the locality panel on the right. Generated from live inventory, so it cannot drift out of sync. */ .rs-has-mega { position: relative; } .rs-mega--tabbed { position: absolute; top: calc(100% + 6px); left: 0; /* The legacy .rs-mega sets right:0, stretching this to the full viewport. Reset it and let the grid decide the width. */ right: auto; width: max-content; max-width: min(56rem, calc(100vw - 2rem)); border-top: 0; background: var(--rs-bg-white); border: 1px solid var(--rs-border); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.12); z-index: 60; overflow: hidden; } .rs-mega--tabbed .rs-mega-inner { display: grid; grid-template-columns: 13rem minmax(30rem, 42rem); } .rs-mega-cities { background: var(--rs-bg); border-right: 1px solid var(--rs-border); padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px; /* hairline stack, deliberately below the scale's 4px floor */ } .rs-mega-cities .rs-mega-col-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rs-text-lighter); padding: var(--sp-1) var(--sp-2) var(--sp-2); } .rs-mega-city { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-2); border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: .88rem; color: var(--rs-text); cursor: pointer; text-decoration: none; } .rs-mega-city:hover, .rs-mega-city:focus-visible { background: rgba(0,0,0,.04); } .rs-mega-city.is-active { background: var(--rs-bg-white); color: var(--rs-primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--rs-primary); } .rs-mega-city--all { color: var(--rs-text-light); font-size: .82rem; margin-top: var(--sp-1); } .rs-mega-panels { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .rs-mega-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--rs-border); } .rs-mega-panel-head strong { font-size: .9rem; } .rs-mega-panel-head a { font-size: .82rem; color: var(--rs-primary-ink); text-decoration: none; white-space: nowrap; } .rs-mega-panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); } .rs-mega-panel-col a { display: block; padding: var(--sp-1) 0; font-size: .85rem; color: var(--rs-text); text-decoration: none; } .rs-mega-panel-col a:hover, .rs-mega-panel-col a:focus-visible { color: var(--rs-primary-ink); text-decoration: underline; } /* The mega menu is desktop-only; the mobile menu carries the same links. */ @media (max-width: 1023px) { .rs-mega--tabbed { display: none !important; } } /* ── Franchise landing (/franchise) ────────────────────────────────────────── Mobile-first: base rules are the phone, and the only breakpoint is a min-width. The table becomes stacked rows below 768px rather than scrolling sideways, because an agent comparing territories on a phone should not have to swipe a table to read a price. */ .rs-fr-hero{padding: var(--sp-7) 0 var(--sp-6);background:linear-gradient(180deg,var(--rs-primary-50,#EEF3FF) 0%,transparent 100%)} .rs-fr-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; font-weight:700;color:var(--rs-primary-ink);margin-bottom: var(--sp-2)} .rs-fr h1{font-size:1.9rem;line-height:1.15;letter-spacing:-.02em;margin: 0 0 var(--sp-2);text-wrap:balance} .rs-fr-lede{font-size:1.02rem;line-height:1.6;color:#4B5563;max-width:60ch;margin: 0 0 var(--sp-5)} .rs-fr-cta-row{display:flex;flex-wrap:wrap;gap: var(--sp-3)} .rs-fr-cta{min-height:48px;display:inline-flex;align-items:center} .rs-fr-hero-note{font-size:.85rem;color:#6B7280;margin-top: var(--sp-4);max-width:52ch} .rs-fr-sec{padding: var(--sp-6) 0} .rs-fr-sec-alt{background:#F8FAFC} .rs-fr h2{font-size:1.4rem;letter-spacing:-.015em;margin: 0 0 var(--sp-2);text-wrap:balance} .rs-fr-sub{color:#4B5563;margin: 0 0 var(--sp-4);max-width:62ch} .rs-fr-grid{display:grid;grid-template-columns:1fr;gap: var(--sp-4);margin-top: var(--sp-4)} .rs-fr-card{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding: var(--sp-4) var(--sp-4)} .rs-fr-card h3{font-size:1rem;margin: 0 0 var(--sp-1);font-weight:650} .rs-fr-card p{margin: 0;color:#4B5563;font-size:.92rem;line-height:1.55} .rs-fr-steps{list-style:none;padding: 0;margin: var(--sp-4) 0 0;display:grid;gap: var(--sp-3)} .rs-fr-steps li{display:grid;grid-template-columns:auto 1fr;gap: var(--sp-3);align-items:start} .rs-fr-step-n{width:28px;height:28px;border-radius:50%;background:var(--rs-primary,var(--rs-primary));color:#fff; display:grid;place-items:center;font-size:.85rem;font-weight:700;flex:none} .rs-fr-steps div{color:#4B5563;font-size:.94rem;line-height:1.55} .rs-fr-steps b{color:#111827} .rs-fr-table-wrap{overflow-x:auto} .rs-fr-table{width:100%;border-collapse:collapse;font-size:.9rem} .rs-fr-table th{text-align:left;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase; color:#6B7280;font-weight:700;padding: var(--sp-2) var(--sp-3);border-bottom:1px solid #E5E7EB;white-space:nowrap} .rs-fr-table td{padding: var(--sp-3) var(--sp-3);border-bottom:1px solid #F1F5F9} .rs-fr-table td.r,.rs-fr-table th.r{text-align:right;font-variant-numeric:tabular-nums} .rs-fr-onreq{color:#6B7280;font-style:italic} .rs-fr-pill{display:inline-block;padding: var(--sp-1) var(--sp-2);border-radius:999px;font-size:.72rem;font-weight:650} .rs-fr-available{background:#E7F6EE;color:#0F7A49} .rs-fr-reserved{background:#FEF3DC;color:#96690D} .rs-fr-taken{background:#F1F5F9;color:#64748B} .rs-fr-waitlist{background:#EEF2FF;color:#4338CA} .rs-fr-note{margin-top: var(--sp-4);font-size:.88rem;color:#6B7280} .rs-fr-form{display:grid;grid-template-columns:1fr;gap: var(--sp-4);margin-top: var(--sp-4);max-width:640px} .rs-fr-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom: var(--sp-1);color:#374151} .rs-fr-opt{font-weight:400;color:#9CA3AF} .rs-fr-field input,.rs-fr-field select,.rs-fr-field textarea{width:100%;min-height:46px; border:1px solid #D1D5DB;border-radius:9px;padding: var(--sp-2) var(--sp-3);font-size:1rem;font-family:inherit;background:#fff} .rs-fr-field textarea{min-height:auto} .rs-fr-field input:focus,.rs-fr-field select:focus,.rs-fr-field textarea:focus{ outline:2px solid var(--rs-primary,var(--rs-primary));outline-offset:1px;border-color:transparent} .rs-fr-submit{min-height:48px;width:100%} .rs-fr-err{color:#B91C1C;font-size:.88rem;margin: var(--sp-2) 0 0} .rs-fr-ok{color:#0F7A49;font-size:.92rem;margin: var(--sp-2) 0 0;font-weight:600} @media (min-width:768px){ .rs-fr-hero{padding: var(--sp-8) 0 var(--sp-7)} .rs-fr h1{font-size:2.6rem} .rs-fr h2{font-size:1.7rem} .rs-fr-grid{grid-template-columns:repeat(2,1fr);gap: var(--sp-4)} .rs-fr-grid-3{grid-template-columns:repeat(3,1fr)} .rs-fr-form{grid-template-columns:1fr 1fr} .rs-fr-field-full{grid-column:1/-1} .rs-fr-submit{width:auto;min-width:220px} } @media (min-width:1024px){ .rs-fr-grid{grid-template-columns:repeat(3,1fr)} } /* Stacked table on phones — labels come from data-l so no markup duplication. */ @media (max-width:767px){ .rs-fr-table thead{display:none} .rs-fr-table,.rs-fr-table tbody,.rs-fr-table tr,.rs-fr-table td{display:block;width:100%} .rs-fr-table tr{border:1px solid #E5E7EB;border-radius:11px;padding: var(--sp-2) var(--sp-1);margin-bottom: var(--sp-3);background:#fff} .rs-fr-table td{border:0;display:flex;justify-content:space-between;gap: var(--sp-4);padding: var(--sp-1) var(--sp-3)} .rs-fr-table td.r{text-align:right} .rs-fr-table td::before{content:attr(data-l);color:#6B7280;font-size:.8rem;font-weight:600} } /* ── Listing CTAs: Call · WhatsApp · Book site visit ───────────────────────── Sticky at the foot on phones, because on a property page these are the whole point and a renter should never have to scroll to find them. Sits above the bottom nav rather than replacing it. */ /* Mobile already has the fixed contact bar pinned above the nav, so this in-content pair would be the same two actions a thumb apart — the page ended up with two WhatsApp buttons stacked. Hidden below 1024px; the fixed bar is the mobile CTA, this is the desktop one in the sidebar. */ .rs-cta-bar{display:none;grid-template-columns:1fr;gap: var(--sp-2);margin: 0 0 var(--sp-4)} @media (min-width:1024px){ .rs-cta-bar{display:grid} } /* Two actions now, not three — WhatsApp replaced the phone call, so each button gets half the width on tablet up instead of a third. */ .rs-cta{display:inline-flex;align-items:center;justify-content:center;gap: var(--sp-2); min-height:48px;padding: var(--sp-3) var(--sp-4);border-radius:10px;font-weight:650;font-size:.98rem; text-decoration:none;border:1px solid transparent} .rs-cta-call{background:var(--rs-primary,var(--rs-primary));color:#fff} .rs-cta-wa{background:#25D366;color:#fff} .rs-cta-wa svg{flex:none} .rs-cta-visit{background:#fff;color:var(--rs-primary-ink);border-color:var(--rs-primary-ink)} .rs-cta:focus-visible{outline:2px solid #111;outline-offset:2px} /* Desktop enquiry intents — a visitor who may never use WhatsApp still needs a way through, and telling us which they want is more useful than one generic "send". */ .rs-intent{display:grid;grid-template-columns:1fr;gap: var(--sp-2);margin-top: var(--sp-1)} .rs-intent-btn{min-height:46px;width:100%} .rs-btn-outline{background:#fff;color:var(--rs-primary-ink);border:1px solid var(--rs-primary-ink)} .rs-btn-outline:hover{background:var(--rs-primary-50,#EEF3FF)} .rs-managed-by{display:flex;align-items:center;gap: var(--sp-3);padding-bottom: var(--sp-4);margin-bottom: var(--sp-4); border-bottom:1px solid var(--rs-border,#E5E7EB)} .rs-managed-mark{flex:none;display:grid;place-items:center} .rs-managed-t{font-weight:700;font-size:.95rem;line-height:1.2} .rs-managed-s{font-size:.8rem;color:var(--rs-text-light,#6B7280);margin-top: var(--sp-1)} /* Site-visit slot picker — revealed only when the visitor chooses a visit, so a callback request never has to look at times it does not need. */ .rs-slot{background:var(--rs-bg,#F8FAFC);border:1px solid var(--rs-border,#E5E7EB); border-radius:10px;padding: var(--sp-3);margin: var(--sp-1) 0 var(--sp-3)} .rs-slot-t{font-size:.82rem;font-weight:650;margin-bottom: var(--sp-2);color:var(--rs-text,#1F2937)} .rs-slot-row{display:grid;grid-template-columns:1fr;gap: var(--sp-2)} .rs-slot-n{font-size:.74rem;color:var(--rs-text-light,#6B7280);margin: var(--sp-2) 0 0} @media (min-width:420px){ .rs-slot-row{grid-template-columns:1fr 1fr} } /* ── The option list, drawn by us ────────────────────────────────────────────────────── A native