/* ========================================================== PG Bazar — Design System Mobile-first. Breakpoints: 640 / 900 / 1120 ========================================================== */ /* Fonts are linked from every page's rather than @import-ed here. An @import is discovered only after this file has downloaded AND parsed, so it serialises two round trips that can otherwise run at once — it was the single slowest thing about first paint. */ :root{ /* ink */ --ink:#14152E; --ink-2:#2A2C52; --muted:#63678C; --faint:#9195B4; /* brand */ --brand:#5A4BEF; --brand-600:#4536D9; --brand-700:#3527B8; --brand-50:#F1EFFF; --brand-100:#E3E0FF; /* accent — orange, sampled from spalba.com. #FC3700 and #FF7554 are that site's own accent ramp; its primary is actually the blue #0071EB, the orange is the accent. Close cousin of the #FF6102 in logo.png's "bazar", so the logo and the accent still sit together. Orange owns one thing: money and the commercial side — the savings stamp, promoted listings, the owner pitch. Giving it a job is what keeps two strong colours from fighting. Contrast: --orange is 2.87:1 on white, so it is a BACKGROUND only. Orange text on a light ground is --orange-700 (4.95:1 on --orange-50). Text on a vivid orange fill is --ink (5.92:1), never white. Every pairing in this file is >= 4.62:1. */ --orange:#FC3700; --orange-600:#DE3000; --orange-700:#A62400; --orange-300:#FF7554; --orange-50:#FFF1ED; --orange-100:#FFDBD1; /* the logo's navy — also the theme-color in every page's */ --navy:#012149; /* status */ --mint:#0EA968; --mint-50:#E7F8F0; --amber:#DD8A18; --amber-50:#FEF6E7; --rose:#E23D5A; --rose-50:#FDEEF1; /* surface */ --bg:#FFFFFF; --paper:#F7F7FB; --paper-2:#EFEFF7; --line:#E7E7F2; --line-soft:#F0F0F7; /* shape */ --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:26px; --r-pill:999px; /* shadow */ --sh-xs:0 1px 2px rgba(20,21,46,.05); --sh-sm:0 2px 6px rgba(20,21,46,.06); --sh:0 6px 20px rgba(20,21,46,.07); --sh-lg:0 16px 44px rgba(20,21,46,.11); --sh-brand:0 10px 30px rgba(90,75,239,.22); --sh-orange:0 8px 22px rgba(252,55,0,.26); /* motion */ --t:.18s cubic-bezier(.4,0,.2,1); --t-slow:.35s cubic-bezier(.4,0,.2,1); /* layout */ --wrap:1180px; --nav-h:60px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} body{ font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:none} :focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:4px} /* ---------- type ---------- */ .display{font-family:'Sora',sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.03em} h1,h2,h3,h4{font-family:'Sora',sans-serif;font-weight:700;line-height:1.18;letter-spacing:-.02em} h1{font-size:clamp(1.95rem,6.4vw,3.6rem);letter-spacing:-.035em;line-height:1.06} h2{font-size:clamp(1.45rem,4vw,2.3rem)} h3{font-size:clamp(1.05rem,2vw,1.3rem)} h4{font-size:1rem} p{color:var(--muted)} .lead{font-size:clamp(.95rem,2.1vw,1.1rem);color:var(--muted);line-height:1.62} .eyebrow{ display:inline-block;padding:5px 12px;border-radius:var(--r-pill); background:var(--brand-50);color:var(--brand-700); font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; } /* for the paid / owner-facing sections, so the orange thread runs strip → featured shelf → owner band */ .eyebrow.alt{background:var(--orange-50);color:var(--orange-700)} .tnum{font-variant-numeric:tabular-nums} .mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em} .hl{color:var(--brand)} /* headline underline swash */ .swash{ position:relative;white-space:nowrap; background:linear-gradient(96deg,var(--brand-700) 0%,var(--brand) 48%,#8163FF 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ---------- layout ---------- */ .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px} .sec{padding:52px 0} .sec-tight{padding:40px 0} .sec-paper{background:var(--paper)} .sec-ink{background:var(--ink);color:#fff} .sec-ink p,.sec-ink .lead{color:rgba(255,255,255,.72)} .center{text-align:center} .stack{display:flex;flex-direction:column} .row{display:flex;align-items:center} .gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px} .wrapf{flex-wrap:wrap} .spread{display:flex;align-items:center;justify-content:space-between;gap:14px} .grid{display:grid;gap:14px} .g2,.g3,.g4{grid-template-columns:1fr} .hide-sm{display:none} .mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px} .mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px} .mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px} .narrow{max-width:640px}.narrow-c{max-width:640px;margin-inline:auto} /* section heading block */ .sec-head{margin-bottom:30px} .sec-head h2{margin:14px 0 8px} .sec-head p{max-width:56ch} .sec-head.center p{margin-inline:auto} .sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;border-radius:var(--r-sm);font-weight:700;font-size:.9rem; border:1.5px solid transparent;transition:var(--t);white-space:nowrap; line-height:1.2;min-height:44px; } .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55;pointer-events:none} .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)} .btn-primary:hover{background:var(--brand-600)} /* the paid CTAs. Ink on orange, not white — white on this orange is 2.95:1 and unreadable at button size. */ .btn-accent{background:linear-gradient(135deg,var(--orange),var(--orange-300)); color:var(--ink);box-shadow:var(--sh-orange)} /* Hover deepens the fill AND flips to white. Ink on the deeper shade is only 3.85:1, white on it is 7.31:1 — so the swap is what keeps the hover state readable rather than a nice-looking regression. */ .btn-accent:hover{background:var(--orange-700);color:#fff} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--ink-2)} .btn-outline{background:#fff;color:var(--ink);border-color:var(--line)} .btn-outline:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)} .btn-soft{background:var(--brand-50);color:var(--brand-700)} .btn-soft:hover{background:var(--brand-100)} .btn-ghost{background:transparent;color:var(--muted);box-shadow:none} .btn-ghost:hover{color:var(--brand);background:var(--brand-50)} .btn-white{background:#fff;color:var(--ink)} .btn-white:hover{background:var(--paper)} .btn-mint{background:var(--mint);color:#fff} .btn-mint:hover{filter:brightness(.94)} .btn-danger{background:var(--rose-50);color:var(--rose);border-color:transparent} .btn-danger:hover{background:var(--rose);color:#fff} .btn-sm{padding:8px 13px;font-size:.82rem;min-height:38px;border-radius:var(--r-xs)} .btn-lg{padding:15px 26px;font-size:1rem;min-height:52px;border-radius:var(--r)} .btn-block{width:100%} .btn-icon{padding:0;width:40px;min-height:40px;border-radius:var(--r-xs)} /* ---------- chips / badges ---------- */ .chip{ display:inline-flex;align-items:center;gap:6px;padding:8px 14px; border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff; font-size:.83rem;font-weight:600;color:var(--muted);transition:var(--t); cursor:pointer;white-space:nowrap;min-height:38px; } .chip:hover{border-color:var(--brand);color:var(--brand)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff} .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none} .chip.on .dot{background:#fff} .badge{ display:inline-flex;align-items:center;gap:5px;padding:4px 10px; border-radius:var(--r-pill);font-size:.7rem;font-weight:700; letter-spacing:.02em;white-space:nowrap; } .b-verified{background:var(--mint-50);color:var(--mint)} .b-pending{background:var(--amber-50);color:var(--amber)} .b-rejected{background:var(--rose-50);color:var(--rose)} .b-brand{background:var(--brand-50);color:var(--brand-700)} .b-ink{background:var(--ink);color:#fff} .b-biz{ /* ink, not white: on the bright end of this ramp white is 2.65:1 */ background:linear-gradient(135deg,var(--orange),var(--orange-300));color:var(--ink); box-shadow:0 2px 8px rgba(252,55,0,.32); } /* Paid homepage slot. Same family as .b-biz, one step quieter, so a listing carrying both badges doesn't read as two of the same. */ .b-featured{background:var(--orange-50);color:var(--orange-700); box-shadow:inset 0 0 0 1px var(--orange-100)} .b-glass{background:rgba(255,255,255,.94);color:var(--ink);box-shadow:var(--sh-xs)} .pill-live{ display:inline-flex;align-items:center;gap:8px;padding:7px 15px; border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line); font-size:.76rem;font-weight:700;color:var(--ink-2);box-shadow:var(--sh-xs); } .pill-live .beacon{ width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none; box-shadow:0 0 0 0 rgba(14,169,104,.55);animation:beacon 2.2s infinite; } @keyframes beacon{ 0%{box-shadow:0 0 0 0 rgba(14,169,104,.5)} 70%{box-shadow:0 0 0 8px rgba(14,169,104,0)} 100%{box-shadow:0 0 0 0 rgba(14,169,104,0)} } /* ---------- cards ---------- */ .card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px} .card-flat{ background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px; transition:var(--t); } .card-flat:hover{border-color:var(--brand-100);box-shadow:var(--sh-sm);transform:translateY(-2px)} .card-hov{transition:var(--t)} .card-hov:hover{border-color:var(--brand-100);box-shadow:var(--sh);transform:translateY(-3px)} /* ---------- announcement + nav ---------- */ .strip{ /* Flat --orange-600 (#DE3000), not a gradient, and that shade is deliberate: white on spalba's exact #FC3700 is 3.69:1, under the 4.5 this size of text needs. One notch deeper in the same hue gives 4.64:1 and reads identically. A gradient would have failed across part of its own width. */ background:var(--orange-600); color:#fff;font-size:.79rem;font-weight:700;text-align:center; padding:9px 40px 9px 16px;position:relative;line-height:1.4; } .strip b{color:#fff} /* One line, always. The full sentence is 60 characters — at 12.6px that needs ~400px and wrapped to two lines on any phone, which also pushed everything below it down. Phones get a 42-character version instead; nowrap makes the guarantee explicit rather than hopeful. */ .strip-full,.strip-short{white-space:nowrap} .strip-short{display:none} @media(max-width:639px){ .strip{font-size:.72rem;padding:8px 34px 8px 12px} .strip-full{display:none} .strip-short{display:inline} .strip .x{right:4px;width:26px;height:26px} } .strip b{font-weight:800} /* the emoji renders a touch high against the text baseline */ .strip .rocket{display:inline-block;transform:translateY(1px);margin-right:2px} .strip .x{ position:absolute;right:8px;top:50%;transform:translateY(-50%); width:28px;height:28px;border-radius:50%;color:#fff;opacity:.72; display:flex;align-items:center;justify-content:center;font-size:15px; } .strip .x:hover{opacity:1;background:rgba(255,255,255,.18)} .nav{ position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1.5px solid var(--line-soft); transition:height .24s cubic-bezier(.4,0,.2,1),box-shadow .24s ease; } /* scrolled state: a little shorter, lifted off the page, and the wordmark collapses so the mark alone carries the brand */ .nav.compact{box-shadow:0 4px 20px rgba(20,21,46,.07)} .nav.compact .nav-in{height:52px} .logo-word{ display:inline-block;white-space:nowrap;max-width:200px;overflow:hidden; transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .18s ease; } .nav.compact .logo-word{max-width:0;opacity:0} /* Mobile keeps the wordmark hard-left and the quick action plus the account button hard-right, same shape as desktop. Measured: left group 129px, right group 176px. That fits from 360px up with 14px gutters; below it the wordmark collapses and frees 95px rather than letting the two groups collide. */ @media(max-width:899px){ .nav-in{padding:0 14px} .nav-act{gap:6px} } @media(max-width:359px){ .nav .logo-word{max-width:0;opacity:0} .nav .logo{gap:0} } /* the seeker's quick action is the heart alone on phones; the owner's keeps its label, because "+ Add PG" is the one CTA worth the pixels */ .nav-quick{gap:6px} .nq-s{display:none} @media(max-width:639px){ /* Seeker: the heart alone — "Favourites" is long and the icon is unambiguous. But .btn-ghost is transparent with muted text, so a label-less ghost button is a bare grey glyph floating next to a ringed avatar. It gets the same circular treatment as the avatar instead, so the two read as a matched pair of controls. */ .btn-ghost.nav-quick .nq-t{display:none} .btn-ghost.nav-quick{ width:38px;height:38px;min-height:38px;padding:0;border-radius:50%; background:#fff;color:var(--ink-2); box-shadow:0 0 0 1.5px var(--line); } .btn-ghost.nav-quick .ic-svg{width:20px;height:20px;stroke-width:1.9} .btn-ghost.nav-quick:hover,.btn-ghost.nav-quick:active{ background:var(--rose-50);color:var(--rose);box-shadow:0 0 0 1.5px rgba(226,61,90,.4); } /* Owner: keeps "+ Add PG". Hiding the label left a bare "+" in a box, which reads as nothing at all — and the label was measured to fit from 360px up, so there was never a reason to drop it. */ .btn-primary.nav-quick{padding-inline:12px} /* Only the signed-out CTA shortens, because it has a short form. */ .nav-cta .nq-t{display:none} .nav-cta .nq-s{display:inline} } /* Below the width where the first name shows, the account control is just the avatar — and a pill border around a circle read as a mis-drawn double ring. Borderless, it is simply the avatar. */ @media(max-width:1119px){ .avatar-btn{border-color:transparent;background:none;padding:0;box-shadow:none} .avatar-btn:hover{background:none;border-color:transparent} .avatar-btn img,.avatar-fb{width:32px;height:32px;box-shadow:0 0 0 1.5px var(--line)} .avatar-btn:hover img,.avatar-btn:hover .avatar-fb{box-shadow:0 0 0 1.5px var(--brand)} } /* the gap would otherwise linger once the word is gone */ .nav.compact .logo{gap:0} @media(prefers-reduced-motion:reduce){ .nav,.logo-word{transition:none} } /* Three columns, not space-between. space-between positions the middle group by whatever room is left over, so the links drift as the logo or the account button change width — signing in visibly shifted them. 1fr auto 1fr pins the middle group to the true centre of the bar regardless. */ .nav-in{ height:var(--nav-h);display:grid;align-items:center;gap:14px; grid-template-columns:1fr auto 1fr; max-width:var(--wrap);margin:0 auto;padding:0 18px; } .nav-in > .logo{grid-column:1;justify-self:start} .nav-in > .nav-links{grid-column:2;justify-self:center} .nav-in > .nav-act{grid-column:3;justify-self:end} /* below the links breakpoint the middle column is empty, so collapse it and let the burger sit hard right */ @media(max-width:899px){ .nav-in{grid-template-columns:1fr auto} .nav-in > .nav-act{grid-column:2} } .logo{display:flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:800;font-size:1.16rem;letter-spacing:-.03em;flex:none} .logo-mark{ width:34px;height:34px;border-radius:9px;flex:none; display:flex;align-items:center;justify-content:center;font-size:16px; } /* a glyph mark still gets the tinted tile; a real logo stands alone */ .logo-mark:not(:has(img)){ background:linear-gradient(140deg,var(--brand),#8B6DFF);color:#fff; box-shadow:0 3px 10px rgba(90,75,239,.3); } .logo-mark img{width:100%;height:100%;object-fit:contain} .logo b{color:var(--brand);font-weight:800} .nav-links{display:none;align-items:center;gap:2px} .nav-links a{padding:8px 12px;border-radius:var(--r-xs);font-size:.88rem;font-weight:600;color:var(--muted);transition:var(--t)} .nav-links a:hover{color:var(--brand);background:var(--brand-50)} .nav-links a.on{color:var(--brand)} .nav-act{display:flex;align-items:center;gap:8px} .burger{ width:42px;height:42px;border-radius:var(--r-xs);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4.5px;flex:none; } .burger i{width:19px;height:2px;background:var(--ink);border-radius:2px;transition:var(--t);display:block} .burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger.on i:nth-child(2){opacity:0} .burger.on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ── drawer ──────────────────────────────────────────────── A panel, not a takeover. It used to be inset:0 — a full-screen white sheet, which loses all sense of where you were. Now it covers part of the width with the page dimmed behind it, so the drawer reads as something you opened on top rather than a new page. Header / scrolling body / pinned footer, so the two calls to action stay reachable no matter how long the link list gets. */ .drawer-veil{ position:fixed;inset:0;z-index:69;background:rgba(20,21,46,.44); opacity:0;pointer-events:none;transition:opacity .26s ease; backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } .drawer-veil.on{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;bottom:0;z-index:70;background:#fff; width:min(87vw,370px); display:flex;flex-direction:column; transform:translateX(101%); /* visibility, not just transform: a translated-off panel is still rendered, so it stayed keyboard-focusable and — the visible bug — its leftward box-shadow painted a dark band down the right edge of every page. The shadow is applied only when open for the same reason. visibility is delayed on close so the slide-out is still seen, and instant on open. */ visibility:hidden; transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; } .drawer.on{ transform:none;visibility:visible; box-shadow:-12px 0 44px rgba(20,21,46,.18); transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; } .drawer-top{ flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 16px;border-bottom:1.5px solid var(--line-soft); } .drawer-title{font-family:'Sora',sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.02em} .drawer-x{ width:36px;height:36px;border-radius:50%;flex:none;font-size:1.35rem;line-height:1; color:var(--muted);display:flex;align-items:center;justify-content:center;transition:var(--t); } .drawer-x:hover{background:var(--paper);color:var(--ink)} /* The closed panel is sized to fit without scrolling — header, the who-block, two shortcuts and five collapsed groups come to ~619px, inside a 667px phone. Scrolling only ever happens when a group is expanded, and only one can be at a time. */ .drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 8px} .drawer-foot{ flex:none;display:grid;gap:8px;border-top:1.5px solid var(--line-soft); padding:12px 14px calc(12px + env(safe-area-inset-bottom)); } .drawer-foot .btn{min-height:44px} /* on a short phone the panel is all there is — reclaim a few more px */ @media(max-height:700px){ .drawer-who{padding:9px;margin-bottom:2px} .drawer-who .dw-av,.drawer-who .dw-av img,.drawer-who .dw-av .avatar-fb{width:34px;height:34px} .dgroup > summary{padding:11px 12px} .drawer a.dl,.drawer button.dl{padding:10px 12px} .drawer-foot .btn{min-height:42px} } /* collapsible groups — native
, so they work without JS and are keyboard-accessible for free */ .dgroup{border-bottom:1.5px solid var(--line-soft)} .dgroup > summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:10px;padding:13px 12px;font-weight:600;font-size:.95rem;color:var(--ink-2); transition:color var(--t); } .dgroup > summary::-webkit-details-marker{display:none} .dgroup > summary::marker{content:""} .dgroup > summary:hover{color:var(--brand)} .dgroup > summary .chev{flex:none;color:var(--faint);transition:transform .22s ease} .dgroup[open] > summary{color:var(--brand-700)} .dgroup[open] > summary .chev{transform:rotate(180deg);color:var(--brand)} .dgroup-in{padding:0 10px 10px} .dgroup-in a{ display:block;padding:10px 14px;border-radius:var(--r-xs); font-size:.89rem;font-weight:600;color:var(--muted); } .dgroup-in a:hover,.dgroup-in a:active{background:var(--brand-50);color:var(--brand-700)} .dgroup-in a.on{color:var(--brand);background:var(--brand-50)} /* flat rows with an icon, for the account block */ .drawer a.dl,.drawer button.dl{ display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-xs); font-weight:600;color:var(--ink-2);font-size:.93rem;width:100%;text-align:left; } .drawer a.dl:hover,.drawer a.dl:active,.drawer button.dl:hover{background:var(--brand-50);color:var(--brand-700)} .drawer .dl .di{width:24px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--faint)} .drawer .dl:hover .di{color:var(--brand)} .drawer .dl.danger{color:var(--rose)} .drawer .dl.danger:hover{background:var(--rose-50);color:var(--rose)} .drawer hr{border:none;border-top:1.5px solid var(--line-soft);margin:8px 10px} /* the "who you are" block at the top of the drawer */ .drawer-who{display:flex;align-items:center;gap:11px;padding:12px;margin-bottom:4px; background:var(--paper);border-radius:var(--r);transition:var(--t)} .drawer-who:hover{background:var(--brand-50)} .drawer-who:hover .dw-t b{color:var(--brand-700)} .drawer-who .dw-go{flex:none;color:var(--faint);transform:rotate(-90deg)} .drawer-who:hover .dw-go{color:var(--brand)} .drawer-who .dw-av{width:38px;height:38px;flex:none} .drawer-who .dw-av img,.drawer-who .dw-av .avatar-fb{width:38px;height:38px;border-radius:50%;object-fit:cover} .drawer-who .dw-t{min-width:0;display:flex;flex-direction:column} .drawer-who .dw-t b{font-size:.92rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drawer-who .dw-t span{font-size:.75rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* sub-line on a drawer row, e.g. the install row */ .drawer .dl-sub{display:block;font-size:.75rem;font-weight:600;color:var(--faint);margin-top:2px} .drawer .dl:hover .dl-sub{color:var(--brand)} /* the only bar that remains: the offline notice. Bottom-anchored, above the tab bar, so it never covers the nav or the content people are trying to read. */ .pwa-bar{ position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom)); z-index:120;display:flex;align-items:center;gap:11px; padding:12px 14px;border-radius:var(--r); background:var(--ink);color:#fff;box-shadow:var(--sh-lg); opacity:0;transform:translateY(12px);transition:opacity .24s ease,transform .24s ease; } .pwa-bar.on{opacity:1;transform:none} body.has-tabbar .pwa-bar{bottom:calc(72px + env(safe-area-inset-bottom))} .pwa-bar .pwa-t{min-width:0;display:flex;flex-direction:column;flex:1} .pwa-bar .pwa-t b{font-size:.88rem} .pwa-bar .pwa-t span{font-size:.76rem;opacity:.72;line-height:1.45} .pwa-dot{width:9px;height:9px;border-radius:50%;background:var(--rose);flex:none; box-shadow:0 0 0 0 rgba(226,61,90,.6);animation:beacon 2s infinite} @media(min-width:640px){ .pwa-bar{left:auto;right:22px;max-width:380px} } /* iOS install instructions */ .ios-steps{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px} .ios-steps li{font-size:.88rem;line-height:1.55;color:var(--ink-2)} .ios-share{display:inline-flex;vertical-align:-3px;color:var(--brand)} .drawer-lbl{ font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase; color:var(--faint);padding:12px 12px 6px; } /* avatar menu */ .avatar-btn{ display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px; border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff; font-weight:600;font-size:.85rem;transition:var(--t); } .avatar-btn:hover{border-color:var(--brand);background:var(--brand-50)} .avatar-btn img,.avatar-fb{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none} /* Two letters where there used to be one, so the tracking comes in a touch and the size drops a hair — otherwise "VT" crowds the edges of a 28px circle. Applied to every avatar that renders initials. */ .avatar-fb{background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center; font-size:.72rem;font-weight:800;letter-spacing:-.02em} .avatar-fb,.person-av,.creq-av,.oav,.pf-hero .pav,.quote .av,.drawer-who .dw-av{ font-variant-ligatures:none;text-transform:uppercase} .menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:252px;max-width:min(88vw,300px);background:#fff; border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg); padding:7px;z-index:80;display:none; } .menu.on{display:block} /* Tapping your own name is the obvious way to reach your account, so the header is the link rather than a label above one. */ /* Selector is `.menu a.menu-hd`, not `.menu-hd`, on purpose: once this header became a link it started matching `.menu a` below, which is a flex row — so the name, email and badge laid out side by side and the email wrapped one character per line. Same specificity meant the later rule won; the extra class settles it. */ .menu a.menu-hd{ display:block;padding:11px 12px 12px;border-bottom:1.5px solid var(--line-soft); margin-bottom:6px;border-radius:var(--r-xs) var(--r-xs) 0 0;transition:var(--t); } .menu a.menu-hd:hover{background:var(--brand-50)} .menu a.menu-hd:hover .nm{color:var(--brand-700)} .menu-hd .nm{font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.3} /* An address is one line with an ellipsis. break-all turned "vanshtiwari1404@gmail.com" into a five-line column. */ .menu-hd .em{ font-size:.76rem;color:var(--faint);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .menu a,.menu button{ display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px; border-radius:var(--r-xs);font-size:.88rem;font-weight:600;color:var(--ink-2); text-align:left;transition:var(--t); } .menu a:hover,.menu button:hover{background:var(--brand-50);color:var(--brand-700)} .menu .sep{height:1.5px;background:var(--line-soft);margin:6px 0} .menu .danger:hover{background:var(--rose-50);color:var(--rose)} .rel{position:relative} /* ---------- hero ---------- */ .hero{ position:relative;overflow:hidden;padding:44px 0 22px; background: radial-gradient(760px 380px at 50% -14%, rgba(90,75,239,.14), transparent 66%), radial-gradient(560px 320px at 12% 8%, rgba(129,99,255,.10), transparent 70%), radial-gradient(520px 300px at 88% 14%, rgba(14,169,104,.08), transparent 70%), linear-gradient(180deg,#fff 0%,var(--paper) 100%); } /* fine dot texture, fades out toward the fold */ .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(20,21,46,.075) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%); mask-image:linear-gradient(180deg,#000 0%,transparent 62%); } /* clean hand-off into the next section */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:44px;z-index:0; background:linear-gradient(180deg,transparent,var(--paper));pointer-events:none; } .hero-in{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center} /* ── phone: the search card as a 2x2 grid ─────────────────── Stacked one-per-row, the four fields plus the button plus the tabs came to 364px — most of a phone screen for one control. Two columns brings it to 240px. The hairline dividers change technique here: instead of each field drawing its own top rule, the grid's 1.5px gap shows the card's background through, which draws both the vertical and horizontal lines for free and can't misalign. */ @media(max-width:639px){ .search-card{padding:0;overflow:hidden} .search-card .search-grid{ gap:1.5px;background:var(--line); grid-template-columns:1fr 1fr; } .search-card .sf{background:#fff;border-radius:0;padding:11px 13px} .search-card .sf + .sf::before{display:none} /* the gap does this now */ .search-card .sf:focus-within{background:var(--brand-50)} .search-card .sf-go{grid-column:1 / -1;background:#fff;padding:8px} .search-card .sf-go .btn{min-height:50px} /* Daily needs mode has three fields, not four, so the odd one out left a bare grey cell beside it — the grid's background showing through where no .sf sat. Spanning it fixes the hole rather than papering over it. ("Area or sector" measured 70px in a 161px column, so it does not need a row of its own — an earlier attempt at that pushed a hole next to CITY instead.) */ .search-card .sf[data-only="needs"]{grid-column:1 / -1} } /* ── phone: the search box comes first ────────────────────── Measured on a 412px screen, the search box used to begin ~434px down: strip, nav, badge, headline and a five-line paragraph all sat above the one thing a visitor came to do. Nothing is hidden — the paragraph is reordered to sit under the search box instead. It still reads in the same place in the DOM, so nothing is lost to search engines either; it just stops standing between the visitor and the input. */ @media(max-width:639px){ .hero{padding-top:22px} .hero-in{display:flex;flex-direction:column} /* align-self, not text-align. The hero is a flex column here, and a flex item defaults to align-items:stretch — so this pill, an inline-flex, was stretched to the full width with its text sitting at the left edge. The parent's text-align:center has no say over a flex item's box. Only the pill needs shrink-wrapping; the headline, search card and paragraph all want the full width. */ .hero-in .pill-live {order:1;align-self:center} .hero-in h1 {order:2} .hero-in .search-wrap{order:3;margin-top:22px} /* The card's ::before glow reaches 18px past its bottom edge, so a 24px gap left the paragraph sitting inside the glow and reading as if it were attached to the card. Kill the glow here and give the paragraph real air. */ .search-card::before{display:none} /* The bigger culprit was --sh-lg: 0 16px 44px, up to 60px of shadow below the card, so a 38px margin still landed inside it. */ .search-card{box-shadow:0 6px 18px rgba(20,21,46,.09)} .hero-in .lead {order:4;margin-top:44px;font-size:.9rem;line-height:1.7} /* Seven centred lines is not readable. The second clause is dropped on phones — it stays in the DOM, so nothing is lost to crawlers, and the paragraph comes down to four lines. */ .lead-more{display:none} .hero-in .quick {order:5} .hero-in .stats {order:6} .hero-in .scroll-cue {order:7} /* the badge's second clause is the first thing to go — it is decoration, and it costs a whole extra line at this width */ .pill-live .tail{display:none} .pill-live{font-size:.72rem;padding:6px 13px} } /* Three short options (Boys/Girls/Unisex, Male/Female/Other) fit one row at any width. auto-fill gave them two columns and orphaned the third, which is what made the gender picker look broken on a phone. */ #gender-picks,#p-gender,#r-gender{grid-template-columns:repeat(3,1fr)} #gender-picks .pick,#p-gender .pick,#r-gender .pick{ padding-inline:9px;gap:6px;justify-content:center;font-size:.84rem} @media(max-width:400px){ #gender-picks .pick,#p-gender .pick,#r-gender .pick{font-size:.79rem;padding-inline:6px} #gender-picks .pick .ic,#p-gender .pick .ic,#r-gender .pick .ic{display:none} } .hero h1{margin:20px 0 16px} .hero .lead{max-width:52ch;margin:0 auto} /* search card */ .search-card{ position:relative;background:#fff;border:1.5px solid var(--line); border-radius:var(--r-xl);padding:8px;margin-top:0;text-align:left; box-shadow:var(--sh-lg); } /* soft brand halo behind the card */ .search-card::before{ content:"";position:absolute;inset:-10px -8px -18px;z-index:-1;border-radius:inherit; background:radial-gradient(60% 100% at 50% 0%,rgba(90,75,239,.16),transparent 72%); filter:blur(14px);pointer-events:none; } /* two-mode switcher sitting above the search card */ .search-wrap{margin-top:30px} .search-tabs{ display:inline-flex;gap:5px;padding:5px;margin-bottom:14px; background:rgba(255,255,255,.72); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1.5px solid var(--line);border-radius:var(--r-pill); box-shadow:var(--sh-xs); } .search-tabs button{ display:inline-flex;align-items:center;gap:7px; padding:9px 18px;border-radius:var(--r-pill); font-size:.87rem;font-weight:700;color:var(--muted); min-height:40px;white-space:nowrap;transition:var(--t); } .search-tabs button:hover{color:var(--ink)} .search-tabs button.on{ background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(90,75,239,.3); } .search-tabs button.on:hover{color:#fff} @media(max-width:479px){ .search-tabs{display:flex;width:100%} .search-tabs button{flex:1;justify-content:center;padding:9px 10px;font-size:.82rem} } /* Hero selects use a bottom sheet on phones: native option menus are cramped and can overlap the mode tabs in mobile Chrome. */ .mobile-picker{display:none} @media(max-width:639px){ body.picker-open{overflow:hidden} .mobile-picker{ position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end; background:rgba(11,16,42,.38);opacity:0;pointer-events:none; transition:opacity .2s ease; } .mobile-picker.on{opacity:1;pointer-events:auto} .mobile-picker-sheet{ width:100%;max-height:min(85vh,680px);display:flex;flex-direction:column;min-height:0; padding:10px 16px max(18px,env(safe-area-inset-bottom));border-radius:25px 25px 0 0; background:#fff;box-shadow:0 -14px 40px rgba(11,16,42,.18); transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1); } .mobile-picker.on .mobile-picker-sheet{transform:none} .mobile-picker-handle{width:42px;height:5px;margin:0 auto 13px;border-radius:999px;background:var(--line);flex:none} .mobile-picker-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 4px 13px;flex:none} .mobile-picker-kicker{margin:0 0 3px;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .mobile-picker-head h2{margin:0;font-size:1.12rem;letter-spacing:-.025em} .mobile-picker-close{width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:1.55rem;line-height:1} /* min-height:0 is the whole fix: a flex child will not shrink below its content height without it, so this list grew past the sheet's max-height and the tail got clipped rather than scrolling. The last option in each list — Noida, ₹50k+ — was simply unreachable. -webkit-overflow-scrolling keeps the momentum scroll on iOS. */ .mobile-picker-options{ flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 0 4px; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .mobile-picker-group{margin:14px 8px 6px;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .mobile-picker-option{ width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 14px;border-radius:13px;text-align:left;font-size:.95rem;font-weight:700;color:var(--ink); } .mobile-picker-option.on{background:var(--brand-50);color:var(--brand-700)} .mobile-picker-option .ic-svg{width:19px;height:19px;stroke-width:2.8} /* The select keeps the value and the form semantics, but it must not be the thing you tap: preventDefault() on a select's click does not stop Chrome or Safari opening their own option menu, so tapping used to open the native list AND the sheet at the same time. Making it pointer-events:none and covering the field with a button means only the sheet can ever open. */ /* Applies to any select the picker has taken over, not just the hero search — the overlay is only added where enhanceSelects() ran, so keying off it means a select that opted out (data-no-picker) keeps working natively. */ /* Only selects the picker actually took over: the overlay's presence is the marker, so a select opting out with data-no-picker keeps working natively. */ .sf:has(> .sf-tap) select, .sel-wrap:has(> .sf-tap) select{pointer-events:none} /* The sheet is the menu now, so the field reads as a value rather than a control waiting to be opened. */ .sel-wrap:has(> .sf-tap) select{font-weight:700} .sf-tap{ position:absolute;inset:0;z-index:2;border-radius:inherit; background:none;-webkit-tap-highlight-color:transparent; } .sf-tap:focus-visible{outline:2px solid var(--brand);outline-offset:-3px} /* A .field stacks label / control / hint, so an inset:0 overlay would swallow the label and the hint too. Anchoring it to the select's own box with anchor positioning is not universal yet, so the overlay is moved inside the field as a sibling of the select and sized to it — see enhanceSelects(), which wraps the select for exactly this. */ .sel-wrap{position:relative;display:block} .sel-wrap > .sf-tap{inset:0} } /* Above the sheet breakpoint the overlay must never intercept a tap. */ @media(min-width:640px){ .sf-tap{display:none} } .sf select:disabled{color:var(--faint);cursor:not-allowed} .search-grid{display:grid;gap:0;grid-template-columns:1fr} /* borderless fields separated by hairlines, not boxes */ .sf{position:relative;display:flex;flex-direction:column;gap:1px;min-width:0; padding:11px 14px;border-radius:var(--r);transition:var(--t)} .sf + .sf::before{content:"";position:absolute;left:14px;right:14px;top:0; height:1.5px;background:var(--line)} .sf:focus-within{background:var(--brand-50)} .sf:focus-within::before,.sf:focus-within + .sf::before{opacity:0} .sf label{font-size:.63rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .sf select,.sf input{ width:100%;padding:0;border:none;border-radius:0;background:transparent; font-size:.94rem;font-weight:700;color:var(--ink);min-height:32px; appearance:none;-webkit-appearance:none;transition:var(--t); /* a select won't wrap, so make the overflow graceful instead of a cut */ text-overflow:ellipsis;white-space:nowrap; } .sf select{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2363678C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 0 center;padding-right:22px; } .sf select:focus,.sf input:focus{outline:none;box-shadow:none} .sf-go{padding:6px} .sf-go .btn{border-radius:var(--r);min-height:52px} .quick{ display:flex;gap:8px;overflow-x:auto;padding:18px 2px 2px; scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); } .quick::-webkit-scrollbar{display:none} /* stat strip */ .stats{ display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start; gap:clamp(11px,4.4vw,54px);margin-top:32px; } .stat{text-align:center;min-width:0} .stat .n{font-family:'Sora',sans-serif;font-size:clamp(1.18rem,5vw,2.1rem);font-weight:800; letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums} .stat .n.hl{color:var(--brand)} .stat .l{font-size:clamp(.62rem,2.5vw,.78rem);font-weight:600;color:var(--faint); margin-top:6px;letter-spacing:.01em;white-space:nowrap} /* ---------- property card ---------- */ .pcard{ background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column;transition:var(--t); cursor:pointer;position:relative; } .pcard:hover{border-color:var(--brand-100);box-shadow:var(--sh);transform:translateY(-3px)} .pcard-img{ position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--brand-50),var(--paper-2)); display:flex;align-items:center;justify-content:center;font-size:2.6rem;overflow:hidden; } .pcard-img img{width:100%;height:100%;object-fit:cover} .pcard-tags{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 60px)} /* Favourite toggle. Was 36px with a 15px glyph — under the 44px minimum for a touch target, and a thin grey outline on a photo, so it read as a smudge rather than a control. Now 42px with a 20px glyph and a real edge, which also gives it something to sit on over a light photo. */ .pcard-save{ position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center; font-size:20px;box-shadow:0 2px 10px rgba(20,21,46,.16); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.9); transition:transform .18s cubic-bezier(.34,1.56,.64,1),background var(--t),border-color var(--t); } .pcard-save:hover{transform:scale(1.08);background:#fff} .pcard-save:active{transform:scale(.94)} .pcard-save .ic-svg{ width:1em;height:1em;stroke:var(--ink-2);stroke-width:1.9;fill:none; transition:stroke .16s ease,fill .16s ease,transform .18s cubic-bezier(.34,1.56,.64,1); } .pcard-save:hover .ic-svg{stroke:var(--rose)} /* saved: filled, and the ring picks up the colour so the state is readable at a glance without having to judge a fill */ .pcard-save[data-on="1"]{ background:var(--rose-50); box-shadow:0 2px 10px rgba(226,61,90,.22), 0 0 0 1.5px rgba(226,61,90,.42); } .pcard-save[data-on="1"] .ic-svg{stroke:var(--rose);fill:var(--rose)} /* a small pop on the way in — it is a like button, it should feel like one */ .pcard-save[data-on="1"] .ic-svg{animation:heartpop .32s cubic-bezier(.34,1.56,.64,1)} @keyframes heartpop{ 0%{transform:scale(.7)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} } @media(prefers-reduced-motion:reduce){ .pcard-save,.pcard-save .ic-svg{transition:none} .pcard-save[data-on="1"] .ic-svg{animation:none} } .pcard-shot{ position:absolute;bottom:0;left:0;right:0;padding:22px 12px 9px; background:linear-gradient(transparent,rgba(20,21,46,.78)); color:#fff;font-size:.74rem;font-weight:700;display:flex;justify-content:space-between;gap:8px; } .pcard-body{padding:14px;display:flex;flex-direction:column;flex:1} .pcard-type{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)} .pcard-name{ font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;color:var(--ink); margin:5px 0 3px;line-height:1.3;letter-spacing:-.02em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .pcard-dist{font-size:.78rem;font-weight:700;color:var(--mint);margin-top:3px} .pcard-loc{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:4px} .pcard-price{display:flex;align-items:baseline;gap:5px;margin-top:11px} .pcard-price .amt{font-family:'Sora',sans-serif;font-size:1.24rem;font-weight:800;color:var(--ink);letter-spacing:-.03em} .pcard-price .per{font-size:.76rem;font-weight:600;color:var(--faint)} /* signature: brokerage saved */ /* deposit terms under the price — the second number every seeker asks about, and the one that decides whether they can afford to move */ .pcard-dep{ display:inline-flex;align-items:center;gap:5px;margin-top:5px; font-size:.76rem;font-weight:700;color:var(--muted); } .pcard-dep .ic-svg{width:.95em;height:.95em;stroke-width:1.9;color:var(--faint)} /* per-occupancy price rows on the add-listing form */ /* "this is a listed property, not a verified one" panel */ .note-unver{ margin:18px 0 0;padding:15px 16px;border-radius:var(--r-lg); background:var(--amber-50);border:1.5px solid rgba(217,138,10,.22); } .note-unver .nu-h{ display:flex;align-items:center;gap:8px;margin-bottom:8px; font-family:Sora,sans-serif;font-weight:800;font-size:.94rem;color:var(--ink); } .note-unver .nu-h .ic-svg{width:18px;height:18px;flex:none;color:var(--amber)} .note-unver p{margin:0;font-size:.86rem;line-height:1.6;color:var(--muted)} .note-unver p + p{margin-top:9px} .note-unver .nu-do{font-weight:700;color:var(--ink)} /* inline warning under a text field that failed the contact/abuse check */ .text-warn{ display:flex;gap:7px;margin:7px 0 0;font-size:.79rem;font-weight:700; color:var(--rose);line-height:1.45; } textarea.bad,input.bad{border-color:var(--rose)!important} textarea.bad:focus,input.bad:focus{box-shadow:0 0 0 3px var(--rose-50)!important} /* rent-by-occupancy table on a listing page */ .occ-tbl{display:flex;flex-direction:column} .occ-row{ display:grid;gap:10px;grid-template-columns:1fr auto 76px;align-items:center; padding:11px 0;border-top:1px solid var(--line); } .occ-row:first-child{border-top:0;padding-top:2px} .occ-t{font-weight:700;font-size:.92rem;color:var(--ink)} .occ-r{font-family:Sora,sans-serif;font-weight:800;font-size:1.02rem;color:var(--ink)} .occ-r span{font-size:.74rem;font-weight:600;color:var(--faint)} .occ-b{text-align:right;font-size:.8rem;font-weight:700;color:var(--muted)} .occ-note{ display:flex;align-items:flex-start;gap:7px;margin:11px 0 0;padding-top:11px; border-top:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--orange-700); line-height:1.45; } .occ-note .ic-svg{width:16px;height:16px;flex:none;margin-top:2px} @media(max-width:420px){ .occ-row{grid-template-columns:1fr auto} .occ-b{grid-column:2;text-align:right;font-size:.76rem} } /* Visible to a screen reader, and to the select-picker sheet, which takes its heading from the field's