/* Theme Name: 4MURS Theme URI: https://4murs.com Author: 4MURS Description: Thème immobilier sur-mesure pour le Cameroun. Bilingue FR/EN, sans JavaScript côté rendu, optimisé pour la recherche locale et les connexions lentes. Version: 0.1.0 Requires at least: 6.4 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: 4murs Tags: real-estate, listings, bilingual, lightweight */ /* ========================================================================== 1. Design tokens Everything visual is a variable. When the ThemeForest reference is chosen, reskinning should mean editing this block, not the templates. ========================================================================== */ :root { /* Colour. Placeholder palette — expect these to change. */ --c-bg: #ffffff; --c-surface: #f6f7f5; --c-border: #e2e5e0; --c-text: #16201c; --c-text-muted: #5d6b64; --c-brand: #0f3d2e; --c-brand-soft: #e8f0ec; --c-accent: #c8a44d; --c-danger: #b32d2e; --c-success: #00713f; /* Type. System stack only: a webfont costs 2 round trips and ~40KB, which is the wrong trade on a 3G connection. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; /* Space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --radius: 8px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05); --wrap: 1180px; } /* --- Dark scheme ----------------------------------------------------------- Three states, resolved server-side onto (see inc/theme-mode.php): data-theme="light" never dark data-theme="dark" always dark data-theme="auto" follow the device The media query is scoped to [data-theme="auto"] on purpose. Unscoped, a visitor who explicitly chose light would still be flipped to dark by their phone's system setting — the toggle would appear broken. Contrast is checked against WCAG AA in both schemes: light #16201c on #ffffff = 15.8:1 dark #eef2ef on #101513 = 15.1:1 muted #5d6b64 on #ffffff = 5.6:1 (AA for body text) muted #9aa8a1 on #101513 = 7.4:1 Any token edited below must keep body text at 4.5:1 or better. --------------------------------------------------------------------------- */ :root[data-theme="dark"] { --c-bg: #101513; --c-surface: #181f1c; --c-border: #2a332e; --c-text: #eef2ef; --c-text-muted: #9aa8a1; --c-brand: #4ba883; --c-brand-soft: #17251f; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --c-bg: #101513; --c-surface: #181f1c; --c-border: #2a332e; --c-text: #eef2ef; --c-text-muted: #9aa8a1; --c-brand: #4ba883; --c-brand-soft: #17251f; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4); color-scheme: dark; } } :root[data-theme="light"] { color-scheme: light; } /* ========================================================================== 2. Reset + base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-4); font-weight: 700; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } @media (min-width: 768px) { h1 { font-size: var(--fs-3xl); } } :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; background: var(--c-brand); color: #fff; padding: var(--sp-3) var(--sp-4); z-index: 100; } .skip-link:focus { left: var(--sp-4); top: var(--sp-4); } .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } /* ========================================================================== 3. Header + navigation The mobile menu is a checkbox toggle. No JavaScript, no layout shift, and it works before any script would have finished parsing. ========================================================================== */ .site-header { border-bottom: 1px solid var(--c-border); background: var(--c-bg); position: sticky; top: 0; z-index: 50; } /* --- WordPress admin bar offset --------------------------------------------- Logged-in users get a 32px fixed toolbar at the top of the viewport. A sticky header at top:0 sticks *underneath* it, and the absolutely positioned blended header on the homepage gets covered outright — which is why the header looked cut off when logged in but fine in a logged-out browser. The two cases need different offsets: - Sticky header (interior pages): the toolbar is `position: fixed` on desktop, so the header must stop 32px down. Below 782px WordPress switches the toolbar to `position: absolute` and it scrolls away, so the sticky header should return to top:0 or it leaves a permanent gap. - Absolute blended header (homepage): it sits at the top of the *document*, so it must clear the toolbar's height at both breakpoints — 32px desktop, 46px mobile. z-index also matters: the toolbar is 99999, so a header above that would cover the toolbar instead. 50 keeps us safely below it. --------------------------------------------------------------------------- */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { /* Toolbar scrolls away here, so the sticky header goes back to the top. */ .admin-bar .site-header { top: 0; } } .admin-bar.has-blend-header .site-header { top: 32px; } @media screen and (max-width: 782px) { /* Absolutely positioned: must clear the taller mobile toolbar. */ .admin-bar.has-blend-header .site-header { top: 46px; } } /* Keep the hero from overflowing the viewport by the toolbar's height. */ .admin-bar .hero { min-height: calc(var(--hero-height, 78vh) - 32px); } @media screen and (max-width: 782px) { .admin-bar .hero { min-height: calc(var(--hero-height, 78vh) - 46px); } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--header-gap, 16px); padding-block: var(--sp-3); } /* --- Header element layout ------------------------------------------------- Each element sits in a .hdr wrapper whose flex `order` comes from the Customizer. Order rather than absolute x/y: the header reflows on phones, so coordinates set against a 1280px desktop would be meaningless at 375px, whereas a reordering stays valid at every width. The nav keeps flex:1 so it absorbs leftover space and the elements either side stay pinned to the edges. --------------------------------------------------------------------------- */ .hdr { display: flex; align-items: center; } .hdr--logo { order: var(--order-logo, 1); } .hdr--nav { order: var(--order-nav, 2); flex: 1 1 auto; } .hdr--lang { order: var(--order-lang, 3); } .hdr--cta { order: var(--order-cta, 4); } .hdr--login { order: var(--order-login, 5); } /* Logo scale + nudge. transform rather than width/margin so resizing never reflows the row and shoves everything else sideways. */ .hdr--logo .site-logo { display: inline-block; transform-origin: left center; /* Space between the viewport edge and the content column. On a 1280px screen this is ~42px; at 1920px it is ~370px. The 8px subtraction keeps a hair of clearance for the scrollbar. On viewports narrower than the content column the calc goes negative, so max() falls back to 8px. */ --logo-gutter: max(8px, (100vw - var(--wrap)) / 2 - 8px); /* max() of two negatives picks the less negative — i.e. the logo moves as far left as asked, or as far as the gutter allows, whichever comes first. Dragging past that point simply stops having an effect instead of pushing the logo off the page. */ transform: translate( max(var(--logo-x, 0px), calc(-1 * var(--logo-gutter))), var(--logo-y, 0) ) scale(var(--logo-scale, 1)); } /* Older browsers without max() in transform get the raw offset. They are a rounding error of this audience, and the failure mode is cosmetic. */ @supports not (transform: translate(max(0px, -1px), 0)) { .hdr--logo .site-logo { transform: translate(var(--logo-x, 0), var(--logo-y, 0)) scale(var(--logo-scale, 1)); } } .header-cta { transform: scale(var(--cta-scale, 1)); transform-origin: right center; } /* Login control */ .header-login { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-2); border-radius: var(--radius); white-space: nowrap; } .header-login svg { width: 20px; height: 20px; flex: 0 0 auto; } .header-login:hover { color: var(--c-brand); } .has-blend-header .header-login { color: rgba(255,255,255,.92); } .has-blend-header .header-login:hover { color: #fff; } /* Below the nav breakpoint the label is dropped and only the icon remains — the row is already carrying a logo, a burger and the CTA. */ @media (max-width: 1099px) { .header-login__label { display: none; } } .site-logo { font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; color: var(--c-brand); text-decoration: none; } .site-logo span { color: var(--c-accent); } .nav-toggle { display: none; } .nav-toggle-label { display: block; padding: var(--sp-2); cursor: pointer; font-size: var(--fs-lg); border: 1px solid var(--c-border); border-radius: var(--radius); line-height: 1; } .site-nav { display: none; width: 100%; } .nav-toggle:checked ~ .site-nav { display: block; } .site-nav ul { list-style: none; margin: 0; padding: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-1); } .site-nav a { display: block; padding: var(--sp-2) 0; text-decoration: none; color: var(--c-text); border-bottom: 1px solid var(--c-border); } @media (min-width: 900px) { .nav-toggle-label { display: none; } .site-nav { display: block; width: auto; } .site-nav ul { flex-direction: row; align-items: center; gap: var(--sp-5); padding: 0; } .site-nav a { border: 0; padding: 0; } } /* On phones the CTA drops below the logo row rather than squeezing the nav toggle off-screen. It stays visible at every width — it is the only route to new inventory. */ .header-cta { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); order: 4; } @media (max-width: 899px) { .header-cta { order: 2; margin-left: auto; margin-right: var(--sp-2); } } .lang-switch { font-size: var(--fs-sm); color: var(--c-text-muted); } .lang-switch a { text-decoration: none; font-weight: 600; } .btn { display: inline-block; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); background: var(--c-brand); color: var(--c-brand-ink, #fff); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-size: var(--fs-base); font-family: inherit; } .btn:hover { filter: brightness(1.1); } .btn--ghost { background: transparent; color: var(--c-brand); border: 1px solid var(--c-border); } .btn--block { display: block; width: 100%; text-align: center; } /* ========================================================================== 4. Breadcrumbs ========================================================================== */ .breadcrumb { font-size: var(--fs-sm); color: var(--c-text-muted); padding-block: var(--sp-4) 0; } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .breadcrumb li + li::before { content: "›"; margin-right: var(--sp-2); } /* ========================================================================== 5. Landing page header + filters ========================================================================== */ .landing-head { padding-block: var(--sp-5) var(--sp-4); } .landing-head p { color: var(--c-text-muted); margin: 0; } .landing-count { font-weight: 600; color: var(--c-text); } .filters { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-4); margin-block: var(--sp-4); } .filters__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 700px) { .filters__grid { grid-template-columns: repeat(4, 1fr); align-items: end; } } .field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); } .field select, .field input { width: 100%; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-base); font-family: inherit; } /* Price band shortcuts — these are real indexable URLs, not JS filters. */ .price-bands { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); list-style: none; padding: 0; } .price-bands a { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-sm); text-decoration: none; background: var(--c-bg); } .price-bands a[aria-current="page"] { background: var(--c-brand); color: var(--c-brand-ink, #fff); border-color: var(--c-brand); } /* ========================================================================== 6. Listing grid + card ========================================================================== */ .listing-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-4); list-style: none; margin: 0; padding-inline: 0; } @media (min-width: 600px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 950px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } } .card { border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg); display: flex; flex-direction: column; } .card:hover { box-shadow: var(--shadow); } .card__media { aspect-ratio: 4 / 3; background: var(--c-surface); position: relative; } .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); background: rgba(0,0,0,.72); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); } .card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .card__price { font-size: var(--fs-lg); font-weight: 700; color: var(--c-brand); } .card__title { font-size: var(--fs-base); font-weight: 600; margin: 0; } .card__title a { color: var(--c-text); text-decoration: none; } .card__title a::after { content: ""; position: absolute; inset: 0; } .card { position: relative; } .card__place { font-size: var(--fs-sm); color: var(--c-text-muted); } .card__specs { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--c-border); list-style: none; padding-inline: 0; margin-bottom: 0; } /* ========================================================================== 7. Internal linking blocks These carry the site's internal link equity to the long-tail pages. They look like navigation; they are load-bearing SEO. ========================================================================== */ .link-cloud { background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--sp-5); margin-block: var(--sp-6); } .link-cloud h2 { font-size: var(--fs-lg); } .link-cloud ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } /* ========================================================================== 8. Single listing ========================================================================== */ .listing-layout { display: grid; gap: var(--sp-6); padding-block: var(--sp-5); } @media (min-width: 1000px) { .listing-layout { grid-template-columns: 1.9fr 1fr; align-items: start; } } /* --- CSS-only image viewer --- Radio inputs hold which image is showing; :checked reveals the matching pane and highlights its thumbnail. Clicking a thumbnail swaps the main image with zero JavaScript. Every image is in the DOM from the start, so all but the first are lazy-loaded. */ .viewer__radio { position: absolute; opacity: 0; pointer-events: none; } .viewer__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface); } .viewer__pane { position: absolute; inset: 0; margin: 0; display: none; } .viewer__pane img { width: 100%; height: 100%; object-fit: cover; } /* Default: show the first pane, so the gallery still works if a radio is somehow unchecked. */ .viewer__pane[data-index="0"] { display: block; } .viewer__count { position: absolute; right: var(--sp-3); bottom: var(--sp-3); background: rgba(0,0,0,.7); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: 999px; } .viewer__thumbs { list-style: none; margin: var(--sp-3) 0 0; padding: 0 0 var(--sp-2); display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; } .viewer__thumbs li { flex: 0 0 auto; scroll-snap-align: start; } .viewer__thumb { display: block; width: 96px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .62; } .viewer__thumb img { width: 100%; height: 100%; object-fit: cover; } .viewer__thumb:hover { opacity: 1; } /* Generated pairs: radio N checked -> show pane N, highlight thumb N. Written out rather than looped because CSS has no loops; 12 covers the 15-image upload cap comfortably and extra rules cost nothing. */ #shot-0:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-1:checked ~ .viewer__stage .viewer__pane[data-index="1"], #shot-2:checked ~ .viewer__stage .viewer__pane[data-index="2"], #shot-3:checked ~ .viewer__stage .viewer__pane[data-index="3"], #shot-4:checked ~ .viewer__stage .viewer__pane[data-index="4"], #shot-5:checked ~ .viewer__stage .viewer__pane[data-index="5"], #shot-6:checked ~ .viewer__stage .viewer__pane[data-index="6"], #shot-7:checked ~ .viewer__stage .viewer__pane[data-index="7"], #shot-8:checked ~ .viewer__stage .viewer__pane[data-index="8"], #shot-9:checked ~ .viewer__stage .viewer__pane[data-index="9"], #shot-10:checked ~ .viewer__stage .viewer__pane[data-index="10"], #shot-11:checked ~ .viewer__stage .viewer__pane[data-index="11"], #shot-12:checked ~ .viewer__stage .viewer__pane[data-index="12"], #shot-13:checked ~ .viewer__stage .viewer__pane[data-index="13"], #shot-14:checked ~ .viewer__stage .viewer__pane[data-index="14"] { display: block; } /* When any radio past the first is checked, stop forcing pane 0 visible. */ #shot-1:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-2:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-3:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-4:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-5:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-6:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-7:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-8:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-9:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-10:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-11:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-12:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-13:checked ~ .viewer__stage .viewer__pane[data-index="0"], #shot-14:checked ~ .viewer__stage .viewer__pane[data-index="0"] { display: none; } #shot-0:checked ~ .viewer__thumbs li:nth-child(1) .viewer__thumb, #shot-1:checked ~ .viewer__thumbs li:nth-child(2) .viewer__thumb, #shot-2:checked ~ .viewer__thumbs li:nth-child(3) .viewer__thumb, #shot-3:checked ~ .viewer__thumbs li:nth-child(4) .viewer__thumb, #shot-4:checked ~ .viewer__thumbs li:nth-child(5) .viewer__thumb, #shot-5:checked ~ .viewer__thumbs li:nth-child(6) .viewer__thumb, #shot-6:checked ~ .viewer__thumbs li:nth-child(7) .viewer__thumb, #shot-7:checked ~ .viewer__thumbs li:nth-child(8) .viewer__thumb, #shot-8:checked ~ .viewer__thumbs li:nth-child(9) .viewer__thumb, #shot-9:checked ~ .viewer__thumbs li:nth-child(10) .viewer__thumb, #shot-10:checked ~ .viewer__thumbs li:nth-child(11) .viewer__thumb, #shot-11:checked ~ .viewer__thumbs li:nth-child(12) .viewer__thumb, #shot-12:checked ~ .viewer__thumbs li:nth-child(13) .viewer__thumb, #shot-13:checked ~ .viewer__thumbs li:nth-child(14) .viewer__thumb, #shot-14:checked ~ .viewer__thumbs li:nth-child(15) .viewer__thumb { opacity: 1; border-color: var(--c-accent); } /* Keyboard users must be able to see which thumbnail has focus. */ .viewer__radio:focus-visible ~ .viewer__thumbs .viewer__thumb { outline: none; } .viewer__thumb:focus-within { outline: 3px solid var(--c-accent); outline-offset: 2px; } .listing-body { font-size: var(--fs-lg); line-height: 1.7; margin-top: var(--sp-5); } /* --- Side column --- */ .listing-side { display: grid; gap: var(--sp-4); } @media (min-width: 1000px) { .listing-side { position: sticky; top: 5.5rem; } } .side-card { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg); padding: var(--sp-5); } .side-card__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); } .side-card__place { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); } .side-card__price { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-brand); margin: 0; } .side-card__sub { color: var(--c-text-muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 var(--sp-4); } .side-card__facts { margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); } .side-card__facts dt { color: var(--c-text-muted); } .side-card__facts dd { margin: 0 0 var(--sp-3); } /* --- Stat row (shared with cards) --- */ .stats { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); } .stats__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); } .stats__value { font-weight: 700; color: var(--c-text); } .stats__label { display: none; } .stat-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-brand); } /* The detail view has room to name each number; a card does not. */ .stats--side { gap: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); } .stats--side .stats__item { flex-direction: column; align-items: flex-start; gap: var(--sp-1); } .stats--side .stats__label { display: block; font-size: var(--fs-xs); } .stats--card { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); gap: var(--sp-3); } /* --- Contact card --- */ .contact-card__heading { font-size: var(--fs-lg); margin-bottom: var(--sp-4); } .contact-card__person { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); } .contact-card__avatar { border-radius: 50%; } .contact-card__name { margin: 0; font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .contact-card__role { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); } .badge-verified { font-size: var(--fs-xs); font-weight: 700; background: var(--c-brand-soft); color: var(--c-brand); padding: 2px var(--sp-2); border-radius: 999px; white-space: nowrap; } /* --- Blurred phone reveal ---

gives click-to-reveal with no JavaScript. The blur is a CSS filter over the real number, so it stays available to screen readers and copyable once open. It slows casual scraping; it is not protection, since the digits are in the HTML either way. */ .reveal { margin-bottom: var(--sp-4); } .reveal__summary { list-style: none; cursor: pointer; border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .reveal__summary::-webkit-details-marker { display: none; } .reveal__summary:hover { border-color: var(--c-brand); } .reveal__masked { filter: blur(5px); user-select: none; font-weight: 700; font-size: var(--fs-lg); letter-spacing: .02em; } .reveal__cta { font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand); white-space: nowrap; } .reveal[open] .reveal__summary { display: none; } .reveal__body { display: grid; gap: var(--sp-3); } .reveal__number { font-size: var(--fs-xl); font-weight: 800; text-decoration: none; letter-spacing: .02em; } .contact-card__warn { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; } .amenities { list-style: none; padding: 0; margin: var(--sp-4) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .amenities li { font-size: var(--fs-sm); background: var(--c-brand-soft); color: var(--c-brand); padding: var(--sp-1) var(--sp-3); border-radius: 999px; } .notice { padding: var(--sp-4); border-radius: var(--radius); border-left: 4px solid; margin-block: var(--sp-4); font-size: var(--fs-sm); } .notice--warn { background: #fff8e6; border-color: var(--c-accent); color: #4a3a08; } .notice--danger { background: #fdeded; border-color: var(--c-danger); color: #5f1213; } .notice--ok { background: #e9f6ef; border-color: var(--c-success); color: #0a3d24; } /* ========================================================================== 9. Submission form ========================================================================== */ .submit-form { max-width: 720px; } .submit-form fieldset { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-block: var(--sp-5); } .submit-form legend { font-weight: 700; padding-inline: var(--sp-2); } .submit-form .field { margin-bottom: var(--sp-4); } .submit-form textarea { width: 100%; min-height: 180px; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); font-family: inherit; font-size: var(--fs-base); background: var(--c-bg); color: var(--c-text); } .field__hint { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--sp-1); } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2); } .checkbox-grid label { font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: center; } /* ========================================================================== 10. Pagination + footer ========================================================================== */ .pagination { padding-block: var(--sp-6); } .pagination .page-numbers { display: inline-block; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; margin-right: var(--sp-1); } .pagination .current { background: var(--c-brand); color: var(--c-brand-ink, #fff); border-color: var(--c-brand); } /* ========================================================================== Footer Dark in both colour schemes. Its tokens are self-contained rather than inherited from --c-bg / --c-text: in light mode the inherited pair would give dark-on-white, and the banner card above it is built for a dark surround. Fixing the footer's own palette keeps contrast guaranteed in both themes instead of depending on which one is active. ========================================================================== */ .footer-cta { padding-block: var(--sp-8) 0; } .footer-cta__card { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--c-brand); padding: clamp(2rem, 6vw, 4.5rem); min-height: 300px; display: flex; align-items: center; isolation: isolate; } /* Image layer + its scrim, so white text stays readable on any photo. */ .footer-cta.has-image .footer-cta__card::before { content: ""; position: absolute; inset: 0; background-image: var(--footer-cta-image); background-size: cover; background-position: center; z-index: -2; } .footer-cta.has-image .footer-cta__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 95deg, var(--footer-cta-overlay, rgba(6,20,15,.55)) 0%, var(--footer-cta-overlay, rgba(6,20,15,.55)) 45%, transparent 100% ); z-index: -1; } .footer-cta__body { max-width: 46ch; color: #fff; } .footer-cta__body h2 { color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.35rem); line-height: 1.15; margin-bottom: var(--sp-3); } .footer-cta__body p { color: rgba(255,255,255,.88); margin-bottom: var(--sp-5); } .site-footer { --foot-bg: #141b19; --foot-text: #e7ece9; --foot-muted: #9dab a4; --foot-muted: #9daba4; --foot-line: #26302c; background: var(--foot-bg); color: var(--foot-text); border-top: 0; margin-top: var(--sp-8); padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-sm); } .site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } /* Brand column is wider than the link columns — it carries a paragraph. */ @media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } } .site-footer h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: var(--sp-4); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: var(--sp-3); } /* Small caret before each link, as in the reference. Built with ::before so it is decorative and never read out or copied with the text. */ .site-footer li a { color: var(--foot-muted); text-decoration: none; position: relative; padding-left: 14px; display: inline-block; } .site-footer li a::before { content: ""; position: absolute; left: 0; top: .55em; border: 4px solid transparent; border-left-color: var(--c-accent); } .site-footer li a:hover { color: #fff; } .footer-brand__wordmark { display: inline-block; font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; color: #fff; text-decoration: none; margin-bottom: var(--sp-3); } .footer-brand__wordmark span { color: var(--c-accent); } .footer-brand__logo { display: inline-block; margin-bottom: var(--sp-3); } .footer-brand__logo img { max-width: 160px; height: auto; } .footer-brand__tagline { color: var(--foot-muted); margin: 0 0 var(--sp-4); max-width: 42ch; line-height: 1.6; } .footer-brand__contact { margin: 0 0 var(--sp-2); } .footer-brand__contact a { color: var(--foot-text); text-decoration: none; font-weight: 600; } .footer-brand__contact a:hover { color: var(--c-accent); } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--foot-line); color: var(--foot-muted); } .site-footer__bottom p { margin: 0; } .site-footer__legal a { color: var(--foot-muted); text-decoration: none; } .site-footer__legal a:hover { color: #fff; } /* ========================================================================== Features block ========================================================================== */ .features { padding-block: var(--sp-8); } .features__card { background: var(--c-bg); border: 1px solid var(--c-border); border-bottom: 3px solid var(--c-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 950px) { .features__card { grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); align-items: start; } } .features__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--sp-3); } .features__title { font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.2; margin-bottom: var(--sp-4); } .features__highlight { color: var(--c-brand); } .features__text { color: var(--c-text-muted); margin: 0; max-width: 52ch; } .features__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 620px) { .features__grid { grid-template-columns: 1fr 1fr; } } .features__item { display: flex; gap: var(--sp-4); align-items: flex-start; } .features__icon { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--c-brand-soft); color: var(--c-brand); } .features__icon svg { width: 22px; height: 22px; } .features__body strong { display: block; margin-bottom: var(--sp-1); } .features__body span { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.55; } .empty-state { text-align: center; padding: var(--sp-10) var(--sp-4); background: var(--c-surface); border-radius: var(--radius-lg); } /* -------------------------------------------------------------------------- Coming soon — a service switched off in Personnaliser → Services proposés. Deliberately not styled like .empty-state. An empty state says "your search found nothing, try another"; this says "this part of the site is not open yet". Making them look alike would invite the reader to treat a considered launch decision as a failed search, so this one is centred, full-height and carries real weight — it is the page, not a message inside one. -------------------------------------------------------------------------- */ .coming-soon { max-width: 46rem; margin-inline: auto; padding-block: var(--sp-10); text-align: center; } .coming-soon__eyebrow { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); } .coming-soon__title { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); } .coming-soon__text { margin: 0 auto var(--sp-5); max-width: 38rem; color: var(--c-text-muted); line-height: 1.6; } .coming-soon__subtitle { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); } .coming-soon__services { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); } /* One row per live service. Left-aligned inside a centred column: the service names are scannable as a list, which they stop being when every line is centred on its own width. */ .coming-soon__service { text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); } .coming-soon__service-link { display: block; font-weight: 700; } .coming-soon__service-types { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-muted); } .coming-soon__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: 0; } /* ========================================================================== 11. Homepage — hero, search, tiles Layout follows the reference: full-bleed hero, headline, pill tabs, an inline search row, and a white category strip overlapping the hero's lower edge. The controls inside it are ours, not the reference's. ========================================================================== */ /* --hero-image, --hero-height and --hero-scrim are all written by inc/dynamic-css.php from Customizer settings, and overwritten live by assets/customizer-preview.js while the slider is being dragged. The fallbacks here are what renders if either is unavailable. */ .hero { position: relative; background: var(--c-brand); color: #fff; min-height: var(--hero-height, 78vh); display: flex; align-items: center; padding-block: calc(var(--sp-10) + 3.5rem) calc(var(--sp-10) + 4rem); overflow: hidden; } /* The scrim is a separate layer over the photo, not a gradient baked into it, so its colour and opacity can be changed independently of the image. It is what guarantees the white text stays legible over a bright photograph — without it a sunlit facade shot makes the headline vanish. */ .hero__media { position: absolute; inset: 0; background-image: var(--hero-image, linear-gradient(135deg, #14503c 0%, #0a2018 55%, #1d6b4f 100%)); background-size: cover; background-position: center; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, var(--hero-scrim, rgba(10,32,24,.72)) 0%, var(--hero-scrim, rgba(10,32,24,.72)) 45%, color-mix(in srgb, var(--hero-scrim, rgba(10,32,24,.72)) 55%, transparent) 100% ); } /* color-mix is unsupported on older Android WebViews; they get a flat scrim, which is the safe direction to degrade — more contrast, not less. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .hero__media::after { background: var(--hero-scrim, rgba(10,32,24,.72)); } } /* Second scrim: an explicitly positioned rectangle behind the text. The four --scrim-* variables are edge insets, so the region is defined the way you actually think about it ("start 10% down, stop 45% from the right") rather than as a gradient whose falloff you aim by trial and error. --scrim-feather blurs the edges. This is the part that stops it reading as a grey box pasted on the photo: at 0 the rectangle is visible as a shape, at 60–90px it looks like the image is simply darker there. The blur is on a single static layer that is painted once, so it costs nothing to scroll. */ .hero__scrim { position: absolute; top: var(--scrim-top, 0%); bottom: var(--scrim-bottom, 0%); left: var(--scrim-left, 0%); right: var(--scrim-right, 45%); background: var(--hero-text-scrim, transparent); filter: blur(var(--scrim-feather, 70px)); pointer-events: none; z-index: 1; } /* Guide outline, shown only inside the Customizer preview so the region being dragged is visible while it is being set. Never rendered on the live site. */ .murs-customizing .hero__scrim { outline: 2px dashed rgba(255,255,255,.85); outline-offset: 0; } .hero__inner { position: relative; z-index: 2; } /* Header fade: a gradient that starts at the very top of the page and dissolves downward, replacing the header's hard bottom edge. It extends past the header itself, which is what makes it read as a blend into the hero rather than a taller bar. Only applies with .has-header-fade, so unchecking the setting restores the previous rendering exactly. */ Specificity note: `body.` is deliberate. The `.has-blend-header .site-header` rule further down sets a solid background at equal specificity, and being later in the file it would win — so with the fade on AND header opacity above 0, the hard bar would come back. The extra element selector makes the fade win regardless of source order. */ body.has-header-fade .site-header { background: transparent; border-bottom-color: transparent; } body.has-header-fade .site-header::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + var(--header-fade-distance, 170px)); background: linear-gradient( to bottom, var(--header-fade, rgba(6,20,15,.85)) 0%, color-mix(in srgb, var(--header-fade, rgba(6,20,15,.85)) 55%, transparent) 45%, transparent 100% ); pointer-events: none; z-index: -1; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { body.has-header-fade .site-header::before { background: linear-gradient( to bottom, var(--header-fade, rgba(6,20,15,.85)) 0%, transparent 100% ); } } .hero__inner { position: relative; } .hero__title { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; margin-bottom: var(--sp-4); color: #fff; } .hero__sub { max-width: 56ch; color: rgba(255,255,255,.86); font-size: var(--fs-lg); margin-bottom: var(--sp-6); } /* Blended header: sits over the hero instead of being a separate bar. Toggled by the `header_blend` setting, which adds .has-blend-header to . Its background is --header-bg (colour + opacity, both from the Customizer), so it can go fully transparent or become a tinted glass bar. Not sticky when blended: turning it solid on scroll would need JavaScript, and a translucent bar sliding over photography reads worse than one that simply scrolls away. */ .has-blend-header .site-header { position: absolute; inset: 0 0 auto; background: var(--header-bg, transparent); backdrop-filter: var(--header-blur, none); border-bottom-color: rgba(255,255,255,.15); } .has-blend-header .site-logo { color: #fff; } .has-blend-header .site-nav a { color: rgba(255,255,255,.92); } .has-blend-header .lang-switch, .has-blend-header .lang-switch a { color: rgba(255,255,255,.8); } .has-blend-header .nav-toggle-label { color: #fff; border-color: rgba(255,255,255,.35); } .has-blend-header .theme-toggle { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); } @media (max-width: 899px) { .has-blend-header .nav-toggle:checked ~ .site-nav { background: rgba(10,32,24,.97); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); } .has-blend-header .site-nav a { border-bottom-color: rgba(255,255,255,.15); } } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; color: var(--c-text-muted); line-height: 1.4; } .theme-toggle:hover { color: var(--c-text); } .theme-toggle__icon { font-size: 1em; } /* --- Pill tabs (radio, no JS) --- */ .pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .pills input { position: absolute; opacity: 0; pointer-events: none; } .pills label { display: inline-block; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; border: 1px solid transparent; } .pills input:checked + label { background: var(--c-accent); color: var(--c-accent-ink, #161200); } .pills input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; } /* --- Search row --- */ .hero-search__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); background: rgba(255,255,255,.1); padding: var(--sp-3); border-radius: var(--radius-lg); backdrop-filter: blur(6px); } @media (min-width: 800px) { .hero-search__grid { grid-template-columns: repeat(4, 1fr) auto; align-items: end; } } .hero-search .field label { color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); } .hero-search .field select { border: 0; height: 3.1rem; background: #fff; color: #16201c; } .hero-search__go { height: 3.1rem; min-width: 3.6rem; display: flex; align-items: center; justify-content: center; background: var(--c-accent); color: var(--c-accent-ink, #161200); border: 0; border-radius: var(--radius); cursor: pointer; } .hero-search__go:hover { filter: brightness(1.08); } /* --- Category tiles: white strip overlapping the hero --- */ .tiles { margin-top: calc(var(--sp-8) * -1); position: relative; z-index: 2; } .tiles__inner { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; } @media (min-width: 800px) { .tiles__inner { grid-template-columns: repeat(6, 1fr); } } .tile { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-2); text-align: center; text-decoration: none; color: var(--c-text); border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .tile:last-child { border-right: 0; } .tile:hover { background: var(--c-accent); color: var(--c-accent-ink, #161200); } .tile__icon svg { width: 28px; height: 28px; } .tile__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } @media (min-width: 800px) { .tile { border-bottom: 0; } } /* ========================================================================== 12. Homepage sections ========================================================================== */ .section { padding-block: var(--sp-8); } .section__head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-5); } .section__head h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); max-width: 20ch; margin-bottom: var(--sp-2); } .section__sub { color: var(--c-text-muted); max-width: 60ch; margin: 0; } .btn--accent { background: var(--c-accent); color: var(--c-accent-ink, #161200); } .btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-lg); } /* Scroll-snap rail on phones, grid from tablet up. Replaces the reference's JS carousel with a native gesture. */ @media (max-width: 599px) { .listing-grid--rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); padding-bottom: var(--sp-3); margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); } .listing-grid--rail .card { flex: 0 0 78%; scroll-snap-align: start; } } @media (min-width: 950px) { .listing-grid--rail { grid-template-columns: repeat(4, 1fr); } } /* --- City grid --- */ .city-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 700px) { .city-grid { grid-template-columns: repeat(4, 1fr); } } .city-card { position: relative; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--c-surface); } @media (min-width: 700px) { .city-card--wide { grid-column: span 2; } } .city-card__link { text-decoration: none; display: block; } .city-card__link::after { content: ""; position: absolute; inset: 0; } .city-card__name { display: block; font-size: var(--fs-xl); font-weight: 700; color: var(--c-text); } .city-card__meta { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-1); } .city-card__quartiers { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); border-top: 1px solid var(--c-border); padding-top: var(--sp-3); } .city-card:hover { border-color: var(--c-brand); } /* --- Market guide --- Long-form keyword copy plus the deep-link chips (see template-parts/guide.php). Sits on --c-surface so it reads as one editorial band between the white city grid and the brand-coloured trust block, rather than as a third card wall. The six panels are ONE horizontal rail, not a wrapping grid. Six cells across a 1180px wrap would be ~180px each, which is too narrow for the prose — every sentence and every chip label breaks mid-phrase. A rail lets each panel take a fixed 360px, so a line of body copy is ~45 characters and a chip label like "Studio à louer Douala · 30 000 FCFA" stays on one line. Same mechanism as .listing-grid--rail: native scroll-snap, no carousel JS. Nothing is hidden or lazily inserted — all six panels and all their links are in the initial HTML, which is the whole point of this block. --------------- */ .guide { background: var(--c-surface); border-block: 1px solid var(--c-border); padding-block: var(--sp-8); margin-top: var(--sp-8); } .guide__head { max-width: 62ch; margin-bottom: var(--sp-6); } .guide__eyebrow { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); } .guide__title { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: var(--sp-3); } .guide__highlight { color: var(--c-brand); } .guide__lead { color: var(--c-text-muted); margin: 0; } .guide__grid { list-style: none; margin: 0; display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; /* Stops a swipe that runs past the last card from turning into a browser back-gesture or a bounce of the whole page. */ overscroll-behavior-x: contain; /* Bleed to the wrap edges so a card can sit flush left and the next one peeks in from the right — the peek is what tells you it scrolls. */ margin-inline: calc(var(--sp-4) * -1); padding: var(--sp-1) var(--sp-4) var(--sp-4); scroll-padding-inline: var(--sp-4); } /* Thin, low-contrast scrollbar. Hiding it entirely would remove the second affordance and leave trackpad users guessing. */ .guide__grid { scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; } .guide__grid::-webkit-scrollbar { height: 8px; } .guide__grid::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 999px; } .guide__grid::-webkit-scrollbar-track { background: transparent; } .guide__panel { flex: 0 0 min(360px, 84%); scroll-snap-align: start; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); /* The accent hairline is the only decoration; it ties the panels to the tiles and the trust list without repeating their shapes. */ border-top: 3px solid var(--c-accent); } @media (min-width: 1100px) { .guide__panel { flex-basis: 380px; } } /* On phones the panel cannot actually shrink to 84%: chips are nowrap, and a flex item's default min-width:auto refuses to go below its widest chip. So the panel sits at its min-content width and the next card barely peeks. Trimming the padding is what buys the peek back without re-breaking a label across two lines, which is the thing this rail exists to prevent. */ @media (max-width: 599px) { .guide__panel { padding: var(--sp-4); } .guide__links a { padding: var(--sp-1) var(--sp-2); } } .guide__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--c-brand-soft); color: var(--c-brand); flex: none; } .guide__icon svg { width: 22px; height: 22px; } .guide__panel-title { font-size: var(--fs-lg); margin: 0; } .guide__panel-text { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.6; } /* Chips. Same visual weight as the hero pills, but on a light surface and as real links — they are the crawl path to the quartier and price-band pages. */ .guide__links { list-style: none; margin: auto 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: var(--sp-2); } .guide__links a { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; color: var(--c-text); text-decoration: none; background: var(--c-surface); /* A chip is one keyword. Letting "Studio à louer Douala · 30 000 FCFA" break after the separator reads as two different links. */ white-space: nowrap; } .guide__links a:hover, .guide__links a:focus-visible { background: var(--c-brand); color: var(--c-brand-ink, #fff); border-color: var(--c-brand); } /* No dot/arrow controls — this was tried and removed, do not re-add it. The obvious zero-JS control is a row of anchors: the browser is supposed to scroll the nearest scrollable ancestor to reveal the target. Setting location.hash from a console does exactly that. A real user click does NOT — in Chromium the page scrolls ~87px vertically and the rail stays at scrollLeft 0. It also puts #guide-p5 in the URL and pushes a history entry per dot, so Back becomes a dot-by-dot rewind. The alternative (radio inputs + :checked driving translateX on a track) gives working desktop controls, but replaces the scroll container with a transform and so kills native swipe. This site's traffic is overwhelmingly phones on 3G, so swipe is the interaction that must not break. What is left works everywhere and costs nothing: swipe on touch, shift+wheel or a drag of the scrollbar below on desktop, and the peeking next card that tells you there is more. Same call as .listing-grid--rail. ---------------- */ .guide__foot { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); } /* --- Trust block --- */ /* Deep tone, not --c-brand: the dark scheme lightens --c-brand for text legibility, which turned this whole section bright sage. --c-deep is a background colour and stays dark in both schemes. */ .trust { background: var(--c-deep, #232e1e); color: var(--c-deep-ink, #fff); padding-block: var(--sp-8); margin-top: var(--sp-8); } .trust h2 { color: #fff; } .trust .section__sub { color: rgba(255,255,255,.82); } .trust .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } .trust__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 900px) { .trust__grid { grid-template-columns: 1fr 1.1fr; } } .trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); } @media (min-width: 600px) { .trust__list { grid-template-columns: 1fr 1fr; } } .trust__list li { border-left: 3px solid var(--c-accent); padding-left: var(--sp-4); } .trust__list strong { display: block; margin-bottom: var(--sp-1); } .trust__list span { color: rgba(255,255,255,.78); font-size: var(--fs-sm); } /* --- Closing CTA --- */ .cta { padding-block: var(--sp-8); } .cta__inner { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; justify-content: space-between; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-6); } .cta h2 { margin-bottom: var(--sp-1); } .cta p { margin: 0; color: var(--c-text-muted); } /* ========================================================================== 13. Articles, pages, contact ========================================================================== */ .article { max-width: 72ch; margin-inline: auto; padding-block: var(--sp-6); } .article__meta { color: var(--c-text-muted); font-size: var(--fs-sm); } .article__hero { margin: var(--sp-5) 0; } .article__hero img { border-radius: var(--radius-lg); width: 100%; } .article__body { font-size: var(--fs-lg); line-height: 1.7; } .article__body h2 { margin-top: var(--sp-6); } .article__body h3 { margin-top: var(--sp-5); } .article__body ul, .article__body ol { padding-left: 1.3em; } .article__body li { margin-bottom: var(--sp-2); } .article__body blockquote { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--c-accent); background: var(--c-surface); border-radius: 0 var(--radius) var(--radius) 0; } .article__body img { border-radius: var(--radius); margin-block: var(--sp-4); } .article__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .article__body th, .article__body td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); text-align: left; } .page-content { max-width: 72ch; margin-bottom: var(--sp-5); } .post-nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; max-width: 72ch; margin-inline: auto; padding-block: var(--sp-6); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); } /* --- Contact --- */ .contact-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-block: var(--sp-5); } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1.4fr 1fr; align-items: start; } } .contact-aside { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); padding: var(--sp-5); } .contact-aside h2 { font-size: var(--fs-lg); } .contact-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; } .contact-list li { padding-block: var(--sp-3); border-bottom: 1px solid var(--c-border); } .contact-list strong { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); margin-bottom: var(--sp-1); } .contact-list a { font-weight: 600; text-decoration: none; } /* Honeypot. Must stay in the DOM and remain focusable-in-theory for bots to find it — display:none is skipped by some crawlers, so move it off-screen instead. aria-hidden + tabindex="-1" keep it away from real users. */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Mobile: the nav wrapper becomes its own row under the logo, so ordering the other elements never squeezes the burger off-screen. */ @media (max-width: 899px) { .hdr--nav { order: 99; flex-basis: 100%; } .hdr--nav .site-nav { width: 100%; } } /* ========================================================================== Move-in cost breakdown Deliberately loud. The advertised figure is the monthly rent; the number that decides whether someone can actually take the place is rent + deposit + agency + viewing fee, and that total is normally only discovered after a viewing has already been paid for. ========================================================================== */ .costs { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); } .costs__title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); margin-bottom: var(--sp-3); } .costs__list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; } .costs__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); border-bottom: 1px dashed var(--c-border); } .costs__line:last-child { border-bottom: 0; } .costs__label small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); } .costs__amount { font-weight: 600; white-space: nowrap; } /* A zero line is good news, so it reads as such rather than as a blank. */ .costs__line.is-free .costs__amount { color: var(--c-success); font-weight: 700; } .costs__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin: 0; padding: var(--sp-3); background: var(--c-brand-soft); border-radius: var(--radius); color: var(--c-brand); } .costs__total strong { font-size: var(--fs-lg); white-space: nowrap; } .costs__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; } /* Header login control sits beside the CTA. */ .header-login { line-height: 1; } /* Months payable on entry, on the listing card. Six or more gets a warning tone — not to shame the landlord, but because at that point it is the single fact that decides whether the listing is worth opening, and burying it wastes the renter's time and the landlord's calls. */ .card__upfront { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted); } .card__upfront.is-heavy { color: var(--c-danger); } /* Same figure, stated plainly above the cost breakdown on the detail page. */ .costs__upfront { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--c-surface); font-size: var(--fs-sm); font-weight: 600; } .costs__upfront.is-heavy { background: #fdeded; color: #5f1213; } :root[data-theme="dark"] .costs__upfront.is-heavy { background: #3a1a1a; color: #ffd9d9; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .costs__upfront.is-heavy { background: #3a1a1a; color: #ffd9d9; } } /* Image logo. Height is set rather than width so swapping in a wider or narrower file never changes the header's height, and --logo-scale still multiplies on top for fine adjustment. */ .site-logo--image { line-height: 0; } .site-logo--image img { height: var(--logo-height, 34px); width: auto; max-width: 260px; object-fit: contain; } /* ========================================================================== Account pages and member dashboard ========================================================================== */ .account { padding-block: var(--sp-6); } .account__cols { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 860px) { .account__cols { grid-template-columns: 1fr 1fr; } } .account__card { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); padding: var(--sp-5); } .account__card h2 { font-size: var(--fs-lg); } .account__pitch { color: var(--c-text-muted); font-size: var(--fs-sm); } /* Specificity note: `.submit-form .field label` sets display:block, which stacked the checkbox above its own text. Matching that weight puts them back on one line. */ .submit-form .field label.account__check { display: flex; gap: var(--sp-2); align-items: center; font-weight: 400; } .submit-form .field label.account__check input { width: auto; } .account__lost { margin-top: var(--sp-4); font-size: var(--fs-sm); } .account__lost summary { cursor: pointer; color: var(--c-brand); font-weight: 600; } .account__head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-5); } /* --- Quota meter --- Stated plainly rather than hidden until it runs out. Someone who can see they have one listing left behaves differently from someone who discovers the wall mid-form. */ .quota { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-5); background: var(--c-surface); } .quota__bar { height: 6px; border-radius: 999px; background: var(--c-border); overflow: hidden; } .quota__bar span { display: block; height: 100%; background: var(--c-success); border-radius: 999px; } .quota--spent .quota__bar span { background: var(--c-danger); } .quota__text { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); } .quota__cta { margin: var(--sp-4) 0 0; } .quota__note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); } /* --- My listings --- */ .my-listings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); } .my-listing { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg); } @media (min-width: 620px) { .my-listing { grid-template-columns: 180px 1fr; } } .my-listing__media { background: var(--c-surface); aspect-ratio: 4 / 3; } .my-listing__media img { width: 100%; height: 100%; object-fit: cover; } .my-listing__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .my-listing__title { font-size: var(--fs-base); margin: 0; } .my-listing__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); } .my-listing__todo { margin: 0; font-size: var(--fs-sm); color: var(--c-danger); font-weight: 600; } .my-listing__actions { margin: var(--sp-2) 0 0; display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); } .my-listing__actions .btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } .badge { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--sp-3); border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .badge--ok { background: #e9f6ef; color: #00713f; } .badge--wait { background: var(--c-surface); color: var(--c-text-muted); } .badge--warn { background: #fff8e6; color: #6b5307; } .badge--bad { background: #fdeded; color: #b32d2e; } /* --- Front-end listing editor --- */ .edit-head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); } .edit-form { max-width: 860px; } .edit-photos { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .edit-photos li { position: relative; } .edit-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); } .edit-photos__badge { position: absolute; left: var(--sp-2); top: var(--sp-2); background: rgba(0,0,0,.75); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius); } .edit-photos__remove { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-sm); } .edit-photos__remove input { width: auto; } /* --- Dropdown navigation --------------------------------------------------- Opened by :hover and :focus-within, so it works with a mouse and with a keyboard and still ships no JavaScript. On touch, the parent link is a real destination — tapping "À louer" goes to the apartments page rather than trapping the visitor in a menu that will not open. --------------------------------------------------------------------------- */ /* wp_nav_menu emits menu-item-has-children / sub-menu; the generated fallback emits has-sub / sub. Both are styled so the markup source does not matter. */ .site-nav .has-sub, .site-nav .menu-item-has-children { position: relative; } .site-nav .caret { display: inline-block; margin-left: 5px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); } .site-nav .sub, .site-nav .sub-menu { display: none; position: absolute; top: 100%; left: -12px; min-width: 232px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-2) 0; z-index: 60; flex-direction: column; gap: 0; } @media (min-width: 900px) { .site-nav .has-sub:hover > .sub, .site-nav .has-sub:focus-within > .sub, .site-nav .menu-item-has-children:hover > .sub-menu, .site-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; } /* Bridges the gap between the trigger and the panel so the menu does not close while the pointer travels the few pixels between them. */ .site-nav .has-sub::after, .site-nav .menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } .site-nav .sub a, .site-nav .sub-menu a { display: block; padding: var(--sp-2) var(--sp-4); white-space: nowrap; color: var(--c-text); border: 0; } .site-nav .sub a:hover, .site-nav .sub-menu a:hover { background: var(--c-surface); color: var(--c-brand); } } /* On phones the whole menu is already a stacked list, so sub-items simply render inline and indented rather than as a floating panel. */ @media (max-width: 899px) { .site-nav .sub, .site-nav .sub-menu { display: flex; position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 var(--sp-4); min-width: 0; } .site-nav .sub a, .site-nav .sub-menu a { font-size: var(--fs-sm); color: var(--c-text-muted); } .site-nav .caret { display: none; } } .has-blend-header .site-nav .sub, .has-blend-header .site-nav .sub-menu { background: rgba(10,32,24,.97); border-color: rgba(255,255,255,.15); } .has-blend-header .site-nav .sub a, .has-blend-header .site-nav .sub-menu a { color: rgba(255,255,255,.92); } .has-blend-header .site-nav .sub a:hover, .has-blend-header .site-nav .sub-menu a:hover { background: rgba(255,255,255,.08); color: #fff; } /* ========================================================================== Member dashboard shell + 3-step wizard Alignment is the point of this block. Every control shares one height token and one grid, so labels, inputs, selects and checkboxes line up on the same baselines both across a row and down a column. Mixed intrinsic heights are what made the earlier forms look "not aligned". ========================================================================== */ :root { --ctl-h: 46px; } .dash { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-block: var(--sp-6); align-items: start; } @media (min-width: 900px) { .dash { grid-template-columns: 250px 1fr; } } .dash__main { min-width: 0; } /* --- Sidebar --- */ .dash__nav { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); padding: var(--sp-4) 0; position: sticky; top: 5.5rem; } .dash__who { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: 0 var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--c-border); } .dash__who strong { display: block; font-size: var(--fs-sm); line-height: 1.3; } .dash__who small { color: var(--c-text-muted); font-size: var(--fs-xs); } .dash__avatar img { border-radius: 50%; display: block; } .dash__nav ul { list-style: none; margin: 0; padding: 0; } .dash__nav a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; border-left: 3px solid transparent; } .dash__nav a svg { width: 18px; height: 18px; flex: 0 0 18px; } .dash__nav a:hover { background: var(--c-bg); } .dash__nav a.is-current { border-left-color: var(--c-accent); background: var(--c-bg); color: var(--c-brand); } /* --- Horizontal step bar --- */ .wizard__radio { position: absolute; opacity: 0; pointer-events: none; } .steps { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface); } .steps__item + .steps__item { border-left: 1px solid var(--c-border); } .steps label { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); cursor: pointer; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); min-height: 62px; } .steps__num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-border); color: var(--c-text); font-size: var(--fs-xs); font-weight: 700; } @media (max-width: 640px) { .steps__label { display: none; } } /* Highlight the active step. Written out per step because CSS cannot compute "the nth sibling matching the checked radio". */ #step-1:checked ~ .steps .steps__item--1 label, #step-2:checked ~ .steps .steps__item--2 label, #step-3:checked ~ .steps .steps__item--3 label { color: var(--c-brand); background: var(--c-bg); } #step-1:checked ~ .steps .steps__item--1 .steps__num, #step-2:checked ~ .steps .steps__item--2 .steps__num, #step-3:checked ~ .steps .steps__item--3 .steps__num { background: var(--c-accent); color: var(--c-accent-ink, #161200); } /* --- Panels --- */ .wizard__panel { display: none; } #step-1:checked ~ .wizard__panel--1, #step-2:checked ~ .wizard__panel--2, #step-3:checked ~ .wizard__panel--3 { display: block; } .wizard__sub { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); margin: var(--sp-6) 0 var(--sp-3); } .wizard__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); } .wizard__nav .btn { cursor: pointer; } /* --- Aligned form grid --- */ .form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .form-grid { grid-template-columns: repeat(3, 1fr); } } .form-grid .field--full { grid-column: 1 / -1; } /* Label / control / hint stack, so every cell in a row shares the same baseline regardless of whether it has a hint under it. */ .form-grid .field { display: flex; flex-direction: column; min-width: 0; } .form-grid .field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); min-height: 1.4em; } .form-grid .field input, .form-grid .field select { height: var(--ctl-h); width: 100%; padding: 0 var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-base); font-family: inherit; } .form-grid .field input[type="file"] { height: auto; padding: var(--sp-3); } .form-grid .field textarea { min-height: 190px; width: 100%; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-family: inherit; font-size: var(--fs-base); } .form-grid .field__hint { margin: var(--sp-2) 0 0; } /* --- Aligned checkbox grid --- The native box sits on its own baseline and shifts with font metrics, which is what made these look ragged. A fixed-size drawn box on a fixed-height row makes every item line up in both directions. */ .check-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 560px) { .check-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .check-grid { grid-template-columns: repeat(3, 1fr); } } .check { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.3; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__box { flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid var(--c-border); border-radius: 50%; position: relative; background: var(--c-bg); } .check__box::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s ease; } .check input:checked + .check__box { background: var(--c-success); border-color: var(--c-success); } .check input:checked + .check__box::after { transform: rotate(45deg) scale(1); } .check input:focus-visible + .check__box { outline: 3px solid var(--c-accent); outline-offset: 2px; } .check__text { min-width: 0; } /* ========================================================================== Member profiles, account settings and tenant reviews Everything below is token-driven, so it inherits the dark palette from the :root[data-theme="dark"] block without needing its own overrides. ========================================================================== */ /* --- Choice groups (account type, review questions) ---------------------- */ .field--choice { border: 0; padding: 0; margin: 0 0 var(--sp-5); } .field--choice legend { padding: 0; margin-bottom: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); } .choice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); margin-bottom: var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer; transition: border-color .12s ease, background .12s ease; } .choice:hover { border-color: var(--c-brand); } .choice:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-soft); } .choice:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; } .choice input { margin-top: 0.2rem; flex: none; } .choice__body { display: block; min-width: 0; } .choice__body strong { display: block; } .choice__body small { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: 2px; } .choice--inline { display: inline-flex; margin-right: var(--sp-2); } /* --- Account settings ---------------------------------------------------- */ .settings-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); } .settings-card h2 { margin-top: 0; font-size: var(--fs-xl); } .settings-card .submit-form { max-width: 34rem; } .field__hint--strong { color: var(--c-text); background: var(--c-brand-soft); border-left: 3px solid var(--c-brand); padding: var(--sp-3); border-radius: 0 var(--radius) var(--radius) 0; } .field__hint--warn { color: var(--c-text-muted); border-left: 3px solid var(--c-accent); padding-left: var(--sp-3); } .dash__type, .dash__rating { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); } .dash__rating { color: var(--c-accent); } /* --- Role badges --------------------------------------------------------- */ .badge--role { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: 999px; vertical-align: middle; } .badge--proprietaire { background: var(--c-brand-soft); color: var(--c-brand); } .badge--facilitateur { background: rgba(200,164,77,.18); color: #6b5316; } :root[data-theme="dark"] .badge--facilitateur { color: var(--c-accent); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .badge--facilitateur { color: var(--c-accent); } } /* --- Stars --------------------------------------------------------------- */ .stars { letter-spacing: 1px; } .stars__s { color: var(--c-border); } .stars__s.is-on { color: var(--c-accent); } .stars__num { font-weight: 700; margin-left: var(--sp-2); } .stars__count { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 400; } /* --- Agent profile: hero ------------------------------------------------- */ .agent__hero { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: var(--sp-6) 0; margin-bottom: var(--sp-6); } .agent__hero-inner { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; } .agent__avatar { border-radius: 50%; flex: none; } .agent__id { flex: 1 1 16rem; min-width: 0; } .agent__name { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .agent__verified { font-size: var(--fs-xs); font-weight: 600; color: var(--c-success); border: 1px solid currentColor; border-radius: 999px; padding: 1px var(--sp-2); } .agent__verified::before { content: "✓ "; } .agent__role { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-2); } .agent__since { color: var(--c-text-muted); font-size: var(--fs-sm); } .agent__rating { margin: 0; } .agent__rating--none { color: var(--c-text-muted); font-size: var(--fs-sm); } .agent__stats { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; flex: none; } .agent__stats li { text-align: center; } .agent__stats strong { display: block; font-size: var(--fs-xl); line-height: 1.1; } .agent__stats span { color: var(--c-text-muted); font-size: var(--fs-xs); } /* --- Agent profile: layout ----------------------------------------------- */ .agent__layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-10); } .agent__main { min-width: 0; } .agent__side { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); } .agent__block { margin-bottom: var(--sp-8); } .agent__block > h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); } .agent__bio p { max-width: 62ch; } .agent__empty { color: var(--c-text-muted); } .agent__role-note { background: rgba(200,164,77,.12); border-left: 3px solid var(--c-accent); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--sp-5); } /* --- Agent profile: listing tabs (no JavaScript) ------------------------- */ .tabs__radio { position: absolute; opacity: 0; pointer-events: none; } .tabs__nav { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); flex-wrap: wrap; } .tabs__tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: 600; color: var(--c-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs__tab:hover { color: var(--c-text); } .tabs__count { font-size: var(--fs-xs); font-weight: 700; background: var(--c-surface); border-radius: 999px; padding: 1px var(--sp-2); } /* One pair of rules per tab: light up the label, reveal the panel. */ .tabs__panel { display: none; } .tabs__radio--all:checked ~ .tabs__nav .tabs__tab--all, .tabs__radio--rent:checked ~ .tabs__nav .tabs__tab--rent, .tabs__radio--sale:checked ~ .tabs__nav .tabs__tab--sale { color: var(--c-brand); border-bottom-color: var(--c-accent); } .tabs__radio--all:checked ~ .tabs__nav .tabs__tab--all .tabs__count, .tabs__radio--rent:checked ~ .tabs__nav .tabs__tab--rent .tabs__count, .tabs__radio--sale:checked ~ .tabs__nav .tabs__tab--sale .tabs__count { background: var(--c-brand-soft); color: var(--c-brand); } .tabs__radio--all:checked ~ .tabs__panel--all, .tabs__radio--rent:checked ~ .tabs__panel--rent, .tabs__radio--sale:checked ~ .tabs__panel--sale { display: grid; } .tabs__radio:focus-visible ~ .tabs__nav { outline: 3px solid var(--c-accent); outline-offset: 3px; } /* --- Agent profile: score summary ---------------------------------------- */ .score { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); } .score__figure { text-align: center; flex: none; } .score__figure strong { display: block; font-size: var(--fs-3xl); line-height: 1; } .score__figure .stars__num { display: none; } .score__count { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--sp-1); } .score__bars { list-style: none; margin: 0; padding: 0; flex: 1 1 14rem; min-width: 0; } .score__bars li { display: grid; grid-template-columns: 2.5rem 1fr 2rem; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); } .score__label { color: var(--c-text-muted); } .score__track { display: block; height: 8px; background: var(--c-border); border-radius: 999px; overflow: hidden; } .score__track > span { display: block; height: 100%; background: var(--c-accent); } .score__n { text-align: right; color: var(--c-text-muted); } /* --- Agent profile: sidebar ---------------------------------------------- */ .agent__contact-heading { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); } .agent__contact-person { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); } .agent__contact-avatar { border-radius: 50%; flex: none; } .agent__contact-name { margin: 0; font-weight: 600; } .agent__contact-role { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); } .agent__contact-none, .agent__contact-warn { color: var(--c-text-muted); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; } .agent__expertise h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); } .agent__facts { margin: 0; } .agent__facts > div { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); } .agent__facts > div:last-child { border-bottom: 0; } .agent__facts dt { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; } .agent__facts dd { margin: 2px 0 0; font-weight: 600; } /* --- Review list --------------------------------------------------------- */ .reviews { list-style: none; margin: 0 0 var(--sp-6); padding: 0; } .review { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--c-bg); } .review__head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; } .review__avatar { border-radius: 50%; flex: none; } .review__who { margin: 0; font-weight: 600; } .review__when { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); } .review__verified { color: var(--c-success); font-weight: 600; } .review__verified::before { content: "✓ "; } .review__stars { margin: 0 0 0 auto; } .review__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); } .review__body p { margin: 0 0 var(--sp-2); max-width: 68ch; } .review__answers { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 0; } .review__answer { background: var(--c-surface); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); } .review__answer dt { color: var(--c-text-muted); margin: 0; } .review__answer dd { margin: 0; font-weight: 600; } /* The two answers a tenant most needs to see before they call anyone. */ .review__answer.is-flag { background: rgba(179,45,46,.1); box-shadow: inset 3px 0 0 var(--c-danger); } .review__answer.is-flag dd { color: var(--c-danger); } .review__context { font-size: var(--fs-sm); color: var(--c-text-muted); margin: var(--sp-3) 0 0; } /* --- Review form --------------------------------------------------------- */ .review-form { border-top: 1px solid var(--c-border); padding-top: var(--sp-5); max-width: 34rem; } .review-form__gate { background: var(--c-surface); border-radius: var(--radius); padding: var(--sp-4); color: var(--c-text-muted); } .rating-field { border: 0; padding: 0; margin-bottom: var(--sp-5); } .rating-field legend { font-weight: 600; margin-bottom: var(--sp-2); } .rating-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: var(--sp-2); cursor: pointer; } .rating-opt:has(input:checked) { border-color: var(--c-accent); background: rgba(200,164,77,.1); } .rating-opt:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; } .rating-opt__stars { color: var(--c-accent); letter-spacing: 2px; } .rating-opt__label { color: var(--c-text-muted); font-size: var(--fs-sm); } /* --- Contact card additions ---------------------------------------------- */ .contact-card__rating { margin: 0 0 2px; font-size: var(--fs-sm); } .contact-card__rating a { text-decoration: none; } .contact-card__commission { background: rgba(200,164,77,.14); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); } .reveal--open { text-align: center; margin-bottom: var(--sp-3); } .reveal__trigger { margin-bottom: var(--sp-3); } .reveal__after { font-size: var(--fs-sm); color: var(--c-text-muted); margin: var(--sp-3) 0 0; } /* --- Declared amenities -------------------------------------------------- */ .amenities__declared { opacity: .92; } .amenities__tag { font-size: var(--fs-xs); color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: 999px; padding: 0 var(--sp-2); margin-left: var(--sp-2); } .amenities__note { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-2); } /* --- Main photo picker in the edit form ---------------------------------- */ .edit-photos li.is-main { outline: 3px solid var(--c-accent); outline-offset: 2px; } .edit-photos__main { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-2); } .field--main-photo { padding-bottom: var(--sp-2); } @media (max-width: 700px) { .review__stars { margin-left: 0; width: 100%; } } @media (max-width: 960px) { .agent__layout { grid-template-columns: minmax(0, 1fr); } .agent__side { position: static; } } @media (max-width: 700px) { .agent__hero-inner { flex-direction: column; align-items: flex-start; } .agent__stats { width: 100%; justify-content: space-between; gap: var(--sp-3); } .tabs__tab { padding: var(--sp-3) var(--sp-3); } } /* --- Agency directory --- /agences/ and /agences/{ville}/ (see inc/agencies.php). Reuses the design tokens rather than introducing new ones: the cards borrow .city-card's border and radius, the guide panels borrow .guide__panel's proportions. -------------------------------------------------------------------------- */ .agency-grid { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .agency-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .agency-grid { grid-template-columns: repeat(3, 1fr); } } .agency-card { display: flex; flex-direction: column; gap: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--c-surface); } .agency-card:hover { border-color: var(--c-brand); } .agency-card__head { display: flex; gap: var(--sp-3); align-items: center; } .agency-card__avatar { border-radius: 50%; flex: none; } .agency-card__id { min-width: 0; } .agency-card__name { font-size: var(--fs-lg); margin: 0 0 var(--sp-1); line-height: 1.2; } .agency-card__name a { color: var(--c-text); text-decoration: none; } .agency-card__name a:hover, .agency-card__name a:focus-visible { color: var(--c-brand); text-decoration: underline; } .agency-card__rating { margin: 0; font-size: var(--fs-sm); } .agency-card__rating--none { color: var(--c-text-muted); } .agency-card__bio { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.55; } .agency-card__facts { list-style: none; margin: auto 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--c-border); display: flex; gap: var(--sp-5); } .agency-card__facts strong { display: block; font-size: var(--fs-lg); line-height: 1.1; } .agency-card__facts span { color: var(--c-text-muted); font-size: var(--fs-xs); } .agency-card__cta { margin: 0; } .agency-card__cta .btn { width: 100%; text-align: center; } .agency-cities { margin-block: var(--sp-6); } .agency-cities h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); } .agency-guide { margin-block: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); } .agency-guide h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: var(--sp-4); } .agency-guide__lede { max-width: 68ch; color: var(--c-text-muted); line-height: 1.65; margin: 0 0 var(--sp-6); } .agency-guide__panels { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 700px) { .agency-guide__panels { grid-template-columns: repeat(2, 1fr); } } .agency-guide__panel { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--c-surface); } .agency-guide__panel h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); } .agency-guide__panel p { margin: 0 0 var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.65; } .agency-guide__panel p:last-child { margin-bottom: 0; } .agency-guide__panel ul { margin: 0; padding-left: 1.1em; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.6; } .agency-guide__panel li + li { margin-top: var(--sp-2); }