/* AqarTrust — design system. Arabic-first: every box property is logical (inline/block), so the whole layout mirrors from one attribute on . Nothing here is written left-or-right. */ :root { /* paper and ink — warm, not the usual cold navy */ --paper: #faf7f2; --surface: #ffffff; --surface-2: #f3efe8; --ink: #15181c; --ink-2: #4d5560; color-scheme: light; --ink-3: #656d79; /* 4.5:1 on --surface-2, the darkest light background (WCAG AA) */ --line: #e6e0d6; --line-2: #d5cdc0; /* jade = money coming back whole. ochre = careful. clay = loss. */ --jade: #0d7a58; --on-jade: #ffffff; /* text on a jade fill; dark in dark mode, where jade is light */ --jade-2: #0a6449; --jade-wash: #e7f4ee; --ochre: #b8722a; --ochre-wash: #fbf1e3; --ochre-ink: #8a5518; /* ochre dark enough for text on its wash (5.5:1) */ --clay: #b3382e; --clay-wash: #fbebe9; --gold: #d9a441; --gold-ink: #8a6417; /* gold dark enough for text on its wash */ --on-clay: #ffffff; /* text on a clay fill (danger button, unread count) */ /* Sign-in buttons, in each provider's own colours as their brand guidelines require (functions/views/_signin.js). Google: white, #747775 outline, #1f1f1f text; dark: #131314, #8e918f, #e3e3e3. Facebook: #0866ff with white (4.8:1) in both. Apple: black in light, white in dark. */ --google-bg: #ffffff; --google-line: #747775; --on-google: #1f1f1f; --facebook-bg: #0866ff; --on-facebook: #ffffff; --apple-bg: #000000; --on-apple: #ffffff; --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(21,24,28,.05); --sh-2: 0 2px 10px rgba(21,24,28,.07); --sh-3: 0 12px 34px rgba(21,24,28,.11); --ease: cubic-bezier(.22,.61,.36,1); /* The web font, the Gulf currency signs, then system fonts scaled to Plex's metrics (fonts.css, built by scripts/fonts/build-fonts.py) so the swap does not move text. */ --font: "IBM Plex Sans Arabic", "AqarTrust Signs", "IBM Plex Sans", "AqarTrust Fallback Arial", "AqarTrust Fallback Roboto", "AqarTrust Fallback Naskh", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --wrap: 1180px; --gut: clamp(16px, 4vw, 32px); --nav-h: 66px; /* Spacing: the only steps a panel, a form or a list row is spaced with (update/CONVENTIONS.md, "Spacing and panels"). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 32px; --check-size: 20px; /* a checkbox or radio */ --check-gap: 12px; /* from the box to its words */ --field-gap: 18px; /* under a .field, and under a group of fields */ --panel-pad-b: var(--space-4); --panel-pad-i: var(--space-5); /* a panel's head and body */ } @media (max-width: 560px) { :root { --panel-pad-i: var(--space-4); } } /* Colours that are the same in both themes, because they sit on something the theme does not paint: a photograph, the black photo viewer, the map's price ramp (data, not decoration), WhatsApp's green. Each is a fill and its own text colour together, so its contrast does not depend on the page behind it. Kept as tokens so every colour in the stylesheets has one name and one place. */ :root { --on-photo: #ffffff; --photo-glass: rgba(14,18,22,.72); /* a badge or button laid over a photo */ --photo-jade: rgba(9,74,54,.82); --photo-gold: rgba(140,94,18,.82); --photo-ochre: rgba(122,74,20,.85); --photo-clay: rgba(128,32,24,.86); /* sold, over a photo */ --photo-chip: rgba(255,255,255,.92); /* the pale "Seen" chip, dark text */ --on-photo-chip: #15181c; --heart: #ff6b5e; /* a saved heart, on the dark glass */ --viewer: #0b0d0f; /* the lightbox */ --viewer-glass: rgb(255 255 255 / .12); --viewer-dim: rgb(0 0 0 / .45); --thumb-scrim-0: rgba(4, 20, 16, .08); /* a reel's thumbnail scrim (N40): clear at the top... */ --thumb-scrim-1: rgba(4, 20, 16, .82); /* ...dark enough at the bottom for the caption */ --sheet: #ffffff; /* behind a floor plan drawn on a transparent page */ --wa: #1b9e4b; /* WhatsApp green, one step darker so the white glyph is 3.5:1 */ --on-wa: #ffffff; /* the map's price ramp, cheapest to dearest; map.js reads these */ --ramp-0: #0d7a58; --ramp-1: #5a8430; --ramp-2: #b8722a; --ramp-3: #c0542b; --ramp-4: #a8322a; --ramp-x: #6d7682; /* nothing to price */ --on-ramp: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #101316; --surface: #171b1f; --surface-2: #1e2429; color-scheme: dark; --ink: #f2efe9; --ink-2: #b3bac4; --ink-3: #8b95a0; --on-jade: #0b1512; --line: #272d33; --line-2: #333b42; --jade: #35b487; --jade-2: #5cc9a0; --jade-wash: #102c23; --ochre: #d69a4e; --ochre-wash: #2b2113; --ochre-ink: #d69a4e; --clay: #e2695c; --clay-wash: #2d1614; --gold-ink: #e2b660; --on-clay: #1c0b09; --google-bg: #131314; --google-line: #8e918f; --on-google: #e3e3e3; --apple-bg: #ffffff; --on-apple: #000000; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 10px rgba(0,0,0,.4); --sh-3: 0 12px 34px rgba(0,0,0,.5); } } :root[data-theme="dark"] { --paper:#101316; --surface:#171b1f; --surface-2:#1e2429; color-scheme: dark; --ink:#f2efe9; --ink-2:#b3bac4; --ink-3:#8b95a0; --on-jade:#0b1512; --line:#272d33; --line-2:#333b42; --jade:#35b487; --jade-2:#5cc9a0; --jade-wash:#102c23; --ochre:#d69a4e; --ochre-wash:#2b2113; --ochre-ink:#d69a4e; --clay:#e2695c; --clay-wash:#2d1614; --gold-ink:#e2b660; --on-clay:#1c0b09; --google-bg:#131314; --google-line:#8e918f; --on-google:#e3e3e3; --apple-bg:#ffffff; --on-apple:#000000; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 2px 10px rgba(0,0,0,.4); --sh-3:0 12px 34px rgba(0,0,0,.5); } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [dir="rtl"] body { line-height: 1.8; } /* Arabic needs more air between lines */ img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1,h2,h3,h4 { margin: 0; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.35; } p { margin: 0; } h1 { font-size: clamp(30px, 5.2vw, 52px); } h2 { font-size: clamp(24px, 3.4vw, 36px); } .h2 { font-size: clamp(24px, 3.4vw, 36px); } /* an h1 that sits where the section titles do (head1) */ h3 { font-size: clamp(18px, 2.2vw, 22px); } .lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--ink-2); } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .sm { font-size: 14px; } .xs { font-size: 12.5px; } /* A figure, or a figure with its words ("1.2 مليون جنيه", "1.2M EGP", "+20 100…"). plaintext takes the direction from the first letter inside: Arabic words make it read right to left, so the number sits on the right of «مليون جنيه» where Arabic puts it; a bare figure or phone has no letters and falls back to left to right, so "-12%" keeps its sign in front. Never force direction: ltr on text that can carry Arabic words — see update/CONVENTIONS.md. */ .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; display: inline-block; white-space: nowrap; } /* A count beside its label — a chip, a pill, a tab: "Verified 32". THE one look for it, everywhere: a small pill badge in the site's font, same weight as the words, centred on them, tabular digits. In Arabic it sits on the right of the words, at the start of the line. The gap is a flex gap, not a margin: .num is direction ltr, so a margin-inline-start on it lands on the side away from the words and the two touched ("أقل من سعر السوق30"). The badge tints itself from the text colour, so it reads on a plain chip, a selected (jade) one and in both themes without a rule per state. Markup: withCount() in functions/_render.js inside an element with .has-count; update/CONVENTIONS.md. A count at the far end of a list row (the filter panel's options) is a column, not this. */ .has-count { display: inline-flex; align-items: center; gap: 7px; } .has-count > .count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding-inline: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 13%, transparent); color: inherit; font: inherit; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: middle; } [dir="rtl"] .has-count > .count { order: -1; } :focus-visible { outline: 2.5px solid var(--jade); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--jade); color: var(--on-jade); } ::placeholder { color: var(--ink-3); opacity: 1; } /* the browser's grey is too faint on --surface-2 in either theme */ .skip { position: absolute; inset-block-start: -60px; inset-inline-start: 12px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm); } .skip:focus { inset-block-start: 12px; } /* The "demo data" strip, only while DEMO_MODE is on (functions/_app/launch.js). */ .demo-bar { margin: 0; padding: var(--space-1) var(--gut); background: var(--ochre-wash); color: var(--ochre-ink); font-size: 13px; line-height: 1.5; text-align: center; border-block-end: 1px solid var(--line); } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } html{scroll-behavior:auto} } /* ---------- layout ---------- */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap-sm { max-width: 760px; } .sec { padding-block: clamp(48px, 7vw, 92px); } .sec-tight { padding-block: clamp(32px, 4vw, 52px); } .grid { display: grid; gap: clamp(16px, 2.4vw, 28px); } .grid > * { min-width: 0; } /* grid tracks default to min-content; one wide input would push a phone page sideways */ .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (max-width: 900px) { .g3, .g4, .split { grid-template-columns: 1fr; } .g4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .g2, .g4 { grid-template-columns: 1fr; } } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .stack > * + * { margin-block-start: var(--s, 16px); } /* Read by screen readers, not drawn. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .center { text-align: center; } /* ---------- nav ---------- */ .nav { position: sticky; inset-block-start: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-block-end: 1px solid var(--line); } .nav-in { display: flex; align-items: center; gap: 14px; height: var(--nav-h); flex-wrap: nowrap; } .nav-end { flex: none; } [dir="ltr"] .nav-links a { font-size: 14.5px; padding: 8px 10px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; } [dir="rtl"] .brand { font-size: 22px; letter-spacing: 0; } .brand { flex: none; white-space: nowrap; } .brand svg { width: 28px; height: 28px; flex: none; } .nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .nav-links a { white-space: nowrap; padding: 8px 11px; border-radius: var(--r-xs); color: var(--ink-2); font-size: 15px; font-weight: 500; transition: color .18s, background .18s; } .nav-links a:hover { color: var(--ink); background: var(--surface-2); } .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; } @media (min-width: 1201px) and (max-width: 1360px) { .nav-links a, [dir="ltr"] .nav-links a { padding-inline: 7px; } } /* signed in, the account link and bell need the room just above the burger breakpoint */ .nav-end { display: flex; align-items: center; gap: 8px; } /* Icon buttons in the bar (the theme switch; the bell in account.css matches). */ .nav-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; } .nav-icon:hover { background: var(--surface-2); color: var(--ink); } /* The switch shows the state the page is in, from the first paint: the head script has set data-theme before this sheet applies, so no script is needed to pick it. */ .theme-btn .th-i { display: none; } :root:not([data-theme]) .theme-btn .th-system, :root[data-theme="light"] .theme-btn .th-light, :root[data-theme="dark"] .theme-btn .th-dark { display: block; } /* The logo's dot is jade, so it lifts with jade in dark mode. */ .brand .mk-dot, .authmark .mk-dot { fill: var(--jade); } .brand .mk-arc, .authmark .mk-arc { stroke: var(--gold); } .burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-xs); cursor: pointer; align-items: center; justify-content: center; } .burger span { display: block; width: 18px; height: 1.6px; background: var(--ink); margin-block: 3px; transition: transform .2s var(--ease), opacity .2s; } .nav.open .burger span:nth-child(1) { transform: translateY(4.6px) rotate(45deg); } .nav.open .burger span:nth-child(2) { opacity: 0; } .nav.open .burger span:nth-child(3) { transform: translateY(-4.6px) rotate(-45deg); } /* Below the burger breakpoint the language switch and the call to action move into the menu. Left in the bar they made the row 469px wide in a 390px viewport, which scrolled the whole site sideways on a phone. */ .nav-extra { display: inline-flex; align-items: center; gap: 8px; } .nav-menu-actions { display: none; } /* The language menu, when more than two languages are enabled (functions/_render.js, langSwitch); with two it is a single link and none of this draws. */ .lang-menu { position: relative; } .lang-menu > summary { list-style: none; cursor: pointer; } .lang-menu > summary::-webkit-details-marker { display: none; } .lang-list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-1)); z-index: 30; min-width: 12rem; display: grid; padding: var(--space-1); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); } .lang-opt { display: block; padding: var(--space-2) var(--space-3); border-radius: 8px; color: var(--ink); text-decoration: none; } .lang-opt:hover, .lang-opt:focus-visible { background: var(--jade-wash); } .nav-menu-actions .lang-list { position: static; box-shadow: none; margin-block-start: var(--space-1); } @media (max-width: 1200px) { .burger { display: inline-flex; } .nav-extra { display: none; } .nav-menu-actions { display: grid; gap: 8px; padding-block-start: 12px; } .nav-menu-actions .btn { width: 100%; } .nav-links { display: none; position: absolute; inset-inline: 0; inset-block-start: var(--nav-h); flex-direction: column; align-items: stretch; background: var(--surface); border-block-end: 1px solid var(--line); padding: 10px var(--gut) 18px; gap: 2px; box-shadow: var(--sh-2); } .nav.open .nav-links { display: flex; } .nav-links a { padding: 13px 10px; font-size: 16.5px; border-block-end: 1px solid var(--line); border-radius: 0; } } /* The same fold on a wide screen when the labels do not fit the bar: a language with longer words than English (German, the pseudo-locale in the tests). public/assets/app.js sets .nav-fold when the bar overflows; the rules are the block above. */ .nav.nav-fold .burger { display: inline-flex; } .nav.nav-fold .nav-extra { display: none; } .nav.nav-fold .nav-menu-actions { display: grid; gap: 8px; padding-block-start: 12px; } .nav.nav-fold .nav-menu-actions .btn { width: 100%; } .nav.nav-fold .nav-links { display: none; position: absolute; inset-inline: 0; inset-block-start: var(--nav-h); flex-direction: column; align-items: stretch; background: var(--surface); border-block-end: 1px solid var(--line); padding: 10px var(--gut) 18px; gap: 2px; box-shadow: var(--sh-2); } .nav.nav-fold.open .nav-links { display: flex; } .nav.nav-fold .nav-links a { padding: 13px 10px; font-size: 16.5px; border-block-end: 1px solid var(--line); border-radius: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; font-weight: 600; font-size: 15.5px; background: var(--ink); color: var(--paper); transition: transform .16s var(--ease), background .18s, border-color .18s, box-shadow .18s; } .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); } .btn:active { transform: translateY(0) scale(.985); } .btn-jade { background: var(--jade); color: var(--on-jade); } .btn-jade:hover { background: var(--jade-2); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface); border-color: var(--ink-3); } .btn-soft { background: var(--surface-2); color: var(--ink); } .btn-sm { min-height: 38px; padding: 7px 15px; font-size: 14px; } .btn-lg { min-height: 54px; padding: 14px 30px; font-size: 17px; } .btn-block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn svg { width: 17px; height: 17px; flex: none; } [dir="rtl"] .btn .arrow { transform: scaleX(-1); } .link { color: var(--jade); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .link:hover { color: var(--jade-2); } /* names in tables and name lists (places, developers, projects) are plainly links by their colour and weight: no underline until hovered (owner, 2026-09-28). Running text keeps it. */ .c-table .link, .gd-devs .link, .gd-inline .link { text-decoration: none; } .c-table .link:hover, .gd-devs .link:hover, .gd-inline .link:hover { text-decoration: underline; } /* ---------- surfaces ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px); } .card-flat { background: var(--surface-2); border: 0; } .card-hover { transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--jade); } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .tag-jade { background: var(--jade-wash); color: var(--jade); border-color: transparent; } .tag-ochre { background: var(--ochre-wash); color: var(--ochre-ink); border-color: transparent; } .tag-clay { background: var(--clay-wash); color: var(--clay); border-color: transparent; } .tag-gold { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-ink); border-color: transparent; } .hr { height: 1px; background: var(--line); border: 0; margin-block: 0; } /* ---------- folds ---------- A box a person can close:
> summary.fold-h, then .fold-b (update/CONVENTIONS.md, "Folds"; public/assets/fold.js remembers each one). The chevron points to the end of the line when closed (so it turns with the writing direction) and down when open. No height animation: opening pushes what is below, once, at the person's own tap, never on its own. */ .fold > .fold-h { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 36px; font-weight: 650; } .fold > .fold-h::-webkit-details-marker { display: none; } .fold > .fold-h::after { content: ""; flex: none; width: 7px; height: 7px; margin-inline-start: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--ink-3); transform: translateY(-1px) rotate(-45deg); transition: transform .15s var(--ease); } [dir="rtl"] .fold > .fold-h::after { transform: translateY(-1px) rotate(135deg); } .fold[open] > .fold-h::after, [dir="rtl"] .fold[open] > .fold-h::after { transform: translateY(-3px) rotate(45deg); } .fold > .fold-h:hover::after { color: var(--ink); } .fold > .fold-h:focus-visible { outline: 2.5px solid var(--jade); outline-offset: 2px; border-radius: var(--r-sm); } .fold-n { color: var(--ink-2); font-weight: 600; } .fold[open] > .fold-b { margin-block-start: var(--space-2); } /* ---------- the completeness bar — the signature device ---------- One line that says the whole product: the jade part is what the seller already paid and gets back; the rest is what the buyer carries on paying. */ .cbar { --paid: 30%; display: block; } .cbar-track { height: 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; display: flex; } .cbar-paid { width: var(--paid); background: linear-gradient(90deg, var(--jade), color-mix(in srgb, var(--jade) 72%, var(--gold))); } [dir="rtl"] .cbar-paid { background: linear-gradient(-90deg, var(--jade), color-mix(in srgb, var(--jade) 72%, var(--gold))); } .cbar-legend { display: flex; justify-content: space-between; gap: 10px; margin-block-start: 7px; font-size: 12.5px; } .cbar-legend b { font-weight: 600; } .cbar-legend .l-paid { color: var(--jade); } .cbar-legend .l-left { color: var(--ink-3); } /* ---------- unit card ---------- */ .units { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 24px); } /* position: relative anchors the heart. Without it .u-fav was placed against the page, so every card's heart stacked at the top of the page under the nav. */ .u { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; } .u-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; } .u-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); } .u:hover .u-media img { transform: scale(1.05); } .u-badges { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; inset-inline-end: 58px; display: flex; gap: 6px; flex-wrap: wrap; } /* wraps before the heart, not under it */ /* A badge sits on a photograph whose colours we do not control, so it cannot be a light chip with dark text — on a pale image it disappears. Dark and blurred reads on anything. */ .u-badges .tag { background: var(--photo-glass); color: var(--on-photo); border: 0; box-shadow: none; backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2); font-weight: 600; letter-spacing: .01em; } .u-badges .u-seen { background: var(--photo-chip); color: var(--on-photo-chip); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .u-badges .tag-gold { background: var(--photo-gold); color: var(--on-photo); } .u-badges .tag-jade { background: var(--photo-jade); color: var(--on-photo); } /* reserved and sold (functions/_app/offer.js): the state first on the photo, the photo greyed */ .u-badges .u-state.tag-ochre { background: var(--photo-ochre); color: var(--on-photo); } .u-badges .u-state.tag-clay { background: var(--photo-clay); color: var(--on-photo); } .u-off .u-media img { filter: grayscale(.7); } /* The heart sits on the photo too: the same dark glass as the badges. (A later white-circle rule used to override this, and in dark mode drew a light outline on a white circle.) */ .u-fav { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 38px; height: 38px; border-radius: 50%; background: var(--photo-glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-1); } .u-fav svg { width: 19px; height: 19px; stroke: var(--on-photo); fill: none; stroke-width: 1.8; } .u-fav[aria-pressed="true"] svg { fill: var(--heart); stroke: var(--heart); } /* the unit page's own Save button: the same heart, filled once saved */ .unit-save { gap: var(--space-2); } .unit-save svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; } .unit-save[aria-pressed="true"] svg { fill: var(--heart); stroke: var(--heart); } .u-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .u-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .u-title { font-size: 17px; font-weight: 700; line-height: 1.3; } .u-where { font-size: 13.5px; color: var(--ink-2); } .u-code { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .u-specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); } .u-specs span { display: inline-flex; align-items: center; gap: 5px; } .u-money { background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; } .u-cash { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .u-cash .k { font-size: 12.5px; color: var(--ink-2); } .u-cash .v { font-size: 20px; font-weight: 700; } .u-gain { font-size: 13px; font-weight: 600; color: var(--jade); } .u-gain.neg { color: var(--clay); } .u-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: auto; padding-block-start: 4px; } /* ---------- forms ---------- THE form controls, for the whole app. Every text box, select, textarea, checkbox and radio gets its look here and nowhere else; a page may change size or layout (width, min-height, padding) but not border, radius, background or colours. The rules are in update/CONVENTIONS.md. Checkbox and radio use :where() so any component rule (a hidden pill input, a bigger box) wins without !important. */ .field { display: block; margin-block-end: var(--field-gap); } /* a field's own label; a checkbox or radio row (.check, .radio) keeps its row layout */ .field > label:not(.check, .radio), .lbl, :where(legend) { display: block; font-size: 14.5px; font-weight: 600; margin-block-end: 7px; } .hint { font-size: 13px; color: var(--ink-3); margin-block-start: 6px; } /* A group of fields: no browser frame, no inset, and the legend reads like a .lbl (above). :where() keeps it at zero specificity, so a component's legend class wins. A group that should look framed opts in with .fieldset-box. */ :where(fieldset) { border: 0; padding: 0; margin: 0; min-width: 0; } :where(legend) { padding: 0; } .fieldset-box { border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-4); } /* The buttons that end a form: space above, start-aligned, wrapping on a phone. */ .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-2) var(--space-3); margin-block-start: var(--space-2); } /* input:not([type]) is a text box too, and without it the browser's white default showed through in dark mode under light text */ .inp, input:not([type]), input[type=text], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=month], input[type=url], input[type=password], select, textarea { width: 100%; min-height: 50px; padding: 12px 15px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r); transition: border-color .18s, box-shadow .18s; } input:hover, select:hover, textarea:hover { border-color: var(--ink-3); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--jade); box-shadow: 0 0 0 4px var(--jade-wash); } ::placeholder { color: var(--ink-3); opacity: 1; } input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; } /* A compact control for toolbars (the map bar, sort menus): same look, less height. */ .ctl-sm { min-height: 42px; padding-block: 8px; font-size: 14.5px; border-radius: var(--r-sm); } /* Checkbox and radio: drawn by us, not the browser, so they match the fields in both themes. The tick and the dot are ::before, scaled in when checked. */ input:where([type=checkbox], [type=radio]) { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 6px; transition: background .15s, border-color .15s, box-shadow .15s; } input:where([type=radio]) { border-radius: 50%; } input:where([type=checkbox])::before { content: ""; width: 12px; height: 12px; background: var(--on-jade); transform: scale(0); transition: transform .12s var(--ease); clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 8%, 38% 70%); } input:where([type=radio])::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-jade); transform: scale(0); transition: transform .12s var(--ease); } input:where([type=checkbox], [type=radio]):checked { background: var(--jade); border-color: var(--jade); } input:where([type=checkbox], [type=radio]):checked::before { transform: scale(1); } input:where([type=checkbox], [type=radio]):hover { border-color: var(--jade); } input:where([type=checkbox], [type=radio]):focus { box-shadow: none; } input:where([type=checkbox], [type=radio]):focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; } input:where([type=checkbox], [type=radio]):disabled { background: var(--surface-2); border-color: var(--line); cursor: not-allowed; } input[inputmode="numeric"], input[type=tel], input[type=number] { direction: ltr; text-align: start; font-variant-numeric: tabular-nums; } [dir="rtl"] input[inputmode="numeric"], [dir="rtl"] input[type=tel] { text-align: right; } textarea { min-height: 120px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%238a93a0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 15px center; padding-inline-end: 40px; } [dir="rtl"] select { background-position: left 15px center; } [dir="ltr"] select { background-position: right 15px center; padding-inline-end: 40px; padding-inline-start: 15px; } /* The open list, styled, where the browser allows it (Chromium 135+: customizable select). Elsewhere the closed control above is still ours and the list is the system's. One rule for every