/* Ghosla SEO landing pages — mobile-first, self-contained, no external fonts. Brand: primary #E91E63 (pink), deep purple #1A0A32, accent #FFB82C. */ :root { --pink: #e91e63; --pink-dark: #c2185b; --purple: #1a0a32; --purple-soft: #5f4c7b; --amber: #ffb82c; --bg: #f8f7ef; --card: #ffffff; --line: #ece9e0; --text: #1a0a32; --muted: #6b6478; --radius: 14px; --maxw: min(90vw, 1680px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; font-size: 16px; } /* Dark mode — toggled via data-theme="dark" on (see theme.js). */ [data-theme="dark"] { --bg: #150826; --card: #241338; --line: #362450; --text: #ece7f3; --muted: #a99cbe; --purple: #ffffff; /* headings + rent go light */ --pink: #ff84a1; --pink-dark: #ff9db5; } [data-theme="dark"] .intro { color: var(--text); } [data-theme="dark"] .card-meta { color: #d9d0e6; } [data-theme="dark"] .card-desc { color: #b9aecb; } [data-theme="dark"] .card-media { background: #2a1a3e; } [data-theme="dark"] .card-cta { background: rgba(255, 132, 161, .16); color: #ff9db5; } [data-theme="dark"] .chip-row a { background: var(--card); color: var(--text); } [data-theme="dark"] .faq details { background: var(--card); } [data-theme="dark"] .faq details p { color: #d9d0e6; } [data-theme="dark"] .store-badge img { border: 1px solid #4a3a63; } a { color: var(--pink-dark); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; color: var(--purple); } h1 { font-size: 1.75rem; margin: 0 0 .5rem; } h2 { font-size: 1.3rem; margin: 0 0 .75rem; } h3 { font-size: 1rem; margin: 0 0 .4rem; } main { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 48px; } /* Header */ .site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; max-width: var(--maxw); margin: 0 auto; padding: 14px 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { height: 72px; width: auto; display: block; } .brand-name { font-weight: 800; font-size: 1.7rem; color: var(--purple); letter-spacing: -.5px; } .brand:hover { text-decoration: none; } .header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .theme-toggle { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--purple); background: var(--purple); /* opposite colour of the page */ cursor: pointer; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle:hover { opacity: .85; } .theme-toggle::before { content: '🌙'; } [data-theme="dark"] .theme-toggle::before { content: '☀️'; } .header-cta { background: var(--pink); color: #fff; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem; } .header-cta:hover { background: var(--pink-dark); text-decoration: none; } /* App-store / Play-store badge buttons */ .store-badge { display: inline-block; } .store-badge img { height: 40px; width: auto; display: block; border-radius: 8px; } .store-badge:hover { text-decoration: none; opacity: .92; } /* Breadcrumb */ .breadcrumb { max-width: var(--maxw); margin: 0 auto; padding: 4px 16px 0; font-size: .82rem; color: var(--muted); } .breadcrumb span { color: var(--muted); } /* Hero */ .hero { padding: 20px 0 8px; } .intro { max-width: 760px; color: #34293f; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; } .btn-primary { background: var(--pink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; display: inline-block; } .btn-primary:hover { background: var(--pink-dark); text-decoration: none; } .btn-lg { padding: 15px 36px; font-size: 1.1rem; } .hero-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .btn-ghost { background: transparent; color: var(--purple); border: 1.5px solid var(--line); padding: 11px 18px; border-radius: 999px; font-weight: 600; display: inline-block; } .btn-ghost:hover { border-color: var(--pink); text-decoration: none; } /* Listings */ .listings { margin-top: 28px; } .listings-note { color: var(--muted); font-size: .9rem; margin: -4px 0 16px; } .card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 560px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } .listing-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .card-media { display: block; aspect-ratio: 4 / 3; background: #efe9f5; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .card-rent { font-size: 1.15rem; font-weight: 800; color: var(--purple); margin: 0; } .card-rent span { font-size: .8rem; font-weight: 600; color: var(--muted); } .card-meta { font-size: .85rem; color: #3d3350; margin: 0; } .card-where { font-size: .85rem; color: var(--muted); margin: 0; } .card-desc { font-size: .82rem; color: #55495f; margin: 6px 0 0; line-height: 1.45; } .card-desc-wrap { margin-top: 6px; } .card-desc-wrap .card-desc { margin-top: 0; } .card-desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rm-toggle:checked ~ .card-desc.clamp { -webkit-line-clamp: 999; } .rm-label { display: inline-block; margin-top: 4px; color: var(--pink-dark); font-size: .78rem; font-weight: 700; cursor: pointer; } .rm-label::before { content: 'Read more'; } .rm-toggle:checked ~ .rm-label::before { content: 'Read less'; } .card-deposit { font-size: .78rem; color: var(--muted); margin: 0; } .card-cta { margin-top: 10px; text-align: center; background: #fce4ec; color: var(--pink-dark); padding: 8px; border-radius: 10px; font-weight: 700; font-size: .85rem; } .card-cta:hover { background: #f8bbd0; text-decoration: none; } .listings-more { margin-top: 22px; text-align: center; } /* Locality page: scrollable listings + big sticky map (map-search layout) */ .area-layout { display: flex; gap: 24px; align-items: flex-start; } .area-layout .listings { flex: 1; min-width: 0; margin-top: 0; } .area-map { position: sticky; top: 32px; flex: 0 0 52%; max-width: 900px; /* Fill the viewport minus equal top+bottom padding, so when it sticks it's vertically centred (no big gap at the bottom). */ height: calc(100vh - 64px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .area-map #map { width: 100%; height: 100%; } /* On the list side, cards are large and horizontal (image left, details right) so the description has room to breathe. */ .area-layout .card-grid { grid-template-columns: 1fr; gap: 14px; } .area-layout .listing-card { flex-direction: row; } .area-layout .card-media { flex: 0 0 40%; max-width: 240px; aspect-ratio: 4 / 3; } .area-layout .card-body { flex: 1; padding: 14px 16px 16px; } .area-layout .card-rent { font-size: 1.25rem; } @media (max-width: 899px) { .area-layout { display: block; } .area-map { display: none; } /* map is a desktop enhancement; keeps mobile fast */ .area-layout .listing-card { flex-direction: column; } .area-layout .card-media { flex: none; max-width: none; width: 100%; } } /* Map pins + hover linking */ .map-pin { width: 16px; height: 16px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4); cursor: pointer; transition: transform .1s ease, background .1s ease; } .map-pin-active { transform: scale(1.55); background: var(--amber); z-index: 3; } .listing-card.card-hl { outline: 2px solid var(--pink); outline-offset: 0; } .map-pop { font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1a0a32; } .map-pop a { color: var(--pink-dark); font-weight: 700; } /* Link clusters */ .links { margin-top: 36px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip-row a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: .85rem; color: var(--purple); } .chip-row a:hover { border-color: var(--pink); text-decoration: none; } /* FAQ */ .faq { margin-top: 36px; max-width: 800px; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; } .faq summary { font-weight: 700; cursor: pointer; color: var(--purple); } .faq details p { color: #3d3350; margin: 8px 0 0; } /* Footer — dense tabbed link web (same as the homepage), on every page */ .sf { max-width: var(--maxw); margin: 0 auto; } .sf-title { color: #fff; font-size: 1.15rem; font-weight: 800; margin: 0 0 16px; } .sf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .sf-tab { padding: 7px 16px; border-radius: 999px; border: 1px solid #33254d; background: transparent; color: #cbbfe0; font-size: .85rem; font-weight: 700; cursor: pointer; } .sf-tab:hover { border-color: var(--pink); } .sf-tab.is-active { background: var(--pink); border-color: var(--pink); color: #fff; } .sf-panel { display: none; } .sf-panel.is-active { display: grid; grid-template-columns: 1fr; gap: 8px 24px; } @media (min-width: 560px) { .sf-panel.is-active { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .sf-panel.is-active { grid-template-columns: repeat(3, 1fr); } } .sf-panel a { color: #cbbfe0; font-size: .82rem; padding: 1px 0; } .sf-panel a:hover { color: #fff; } /* Footer */ .site-footer { background: #1A0A32; color: #d9d2e6; margin-top: 48px; padding: 36px 16px 28px; } .footer-cols { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 20px 24px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px) { .footer-cols { grid-template-columns: repeat(7, 1fr); } } .link-city h3 { color: #fff; font-size: .9rem; margin-bottom: 8px; } .link-city a, .link-city .muted { display: block; font-size: .8rem; margin-bottom: 5px; color: #cbbfe0; } .link-city a:hover { color: #fff; } .link-city .muted { color: #7d7391; } .footer-apps { max-width: var(--maxw); margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid #33254d; } .footer-apps a { color: var(--amber); font-size: .85rem; font-weight: 600; } .footer-legal { max-width: var(--maxw); margin: 16px auto 0; font-size: .75rem; color: #8a7fa3; } /* Listing detail pages (/flat-for-rent/…, /room-for-rent/…) */ .listing-page .hero { padding-bottom: 0; } .listing-price { font-size: 1.5rem; font-weight: 800; color: var(--purple); margin: 6px 0 0; } .listing-price span { font-size: .95rem; font-weight: 600; color: var(--muted); } .listing-gallery { margin-top: 18px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .listing-gallery img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: #efe9f5; } .listing-gallery img:first-child { grid-column: 1 / -1; max-height: 460px; } .listing-facts { margin-top: 28px; } .listing-facts dl { display: grid; gap: 12px 24px; grid-template-columns: repeat(2, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0 0; } @media (min-width: 700px) { .listing-facts dl { grid-template-columns: repeat(4, 1fr); } } .listing-facts dt { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .listing-facts dd { margin: 2px 0 0; font-weight: 700; color: var(--purple); font-size: .95rem; } [data-theme="dark"] .listing-facts dl { background: var(--card); } .listing-desc { margin-top: 28px; max-width: 800px; } .listing-desc p { color: #3d3350; line-height: 1.6; margin: 10px 0 0; } [data-theme="dark"] .listing-desc p { color: #d9d0e6; } .listing-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* App-download banner (injected by app-banner.js) */ #app-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--purple); color: #fff; display: flex; align-items: center; gap: 12px; padding: 10px 14px; box-shadow: 0 -4px 16px rgba(0,0,0,.18); } #app-banner p { margin: 0; font-size: .85rem; flex: 1; } #app-banner .ab-cta { background: var(--pink); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .85rem; white-space: nowrap; } #app-banner .ab-close { background: transparent; border: 0; color: #b8acce; font-size: 1.3rem; cursor: pointer; line-height: 1; }