/* ══════════════════════════════════════════════════════════════════════
card.css — the ONE card, wherever it appears.
══════════════════════════════════════════════════════════════════════
WHY THIS FILE CAME BACK
-----------------------
A card.css existed and was deliberately retired in v9.58, with a note in
views/layout.php that still says so: "card.css retired; the one card is
drawn by gdir.css". That was right at the time — the card was only ever
on public pages, and gdir.css was the public stylesheet.
v10.94 changed where the card appears. A writer can put a business card
into an article with the + Block menu, and v10.94 makes the editor SHOW
that card instead of the text "[post id=12]" (core/BlockPreview.php),
because of this report:
"mein ne blog mein listing dali editor mein, editor ne us ka live css
e nai samjha ke break kiya, ye bilkul waise e block mein ana chahey
jaise front render hota e"
The editor lives in the admin console, which does not load gdir.css. So
the card rendered with no rules at all: a full-bleed raw image, the
badge, the rating and the button stacked as loose text. Measured that
way on the first run — the fix for the shortcode made the missing
stylesheet visible.
So the card's rules are their own file again, and three places load it:
the public site, the article stylesheet's consumers, and the editor.
These rules were MOVED out of gdir.css unchanged — the card renders
identically on every public page before and after.
WHAT IS IN HERE
---------------
`.gc*` — the one card for every engine (business, job, event, product,
professional, candidate), its heads, badges, bodies, feet and density
variants — plus `.vmark` (the verified tick that sits on it) and
`.blog-embed*` (the wrapper an article puts a card inside).
Not in here: the GRIDS that lay cards out, which belong to the pages
that own them.
══════════════════════════════════════════════════════════════════════ */
/* ═══ THE CARD ═════════════════════════════════════════════════════════════
One skeleton: head (16:10) · body · foot. The HEAD changes with the kind
— a photo for a business, a typographic panel for a job (no picture,
ever), a portrait band for a person, a date block for an event — and
because the head is ALWAYS the same height, a mixed grid lines up. That
is the bug in the v9.56 screenshot: five card heights in one row. */
.gc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:.18s;position:relative;min-width:0}
@media (hover:hover) and (pointer:fine){.gc:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-2)}
}
/* ── v10.07 — a fixed-height card that cannot paint on itself ──────────
Measured before this, at 390x844 on a job card: .gc-chips ran 41px past
the bottom of .gc-body and straight through .gc-foot, so "120k – 200k a
month" and "2d ago" were drawn on top of each other. On a 400px
professional card the facts panel and the foot overlapped by 35px. The
card's height is fixed on purpose (a row of mixed cards stays level), so
something has to give when the content is taller — and it must not be the
text landing on other text.
Three rules, in the order they take effect:
· the PICTURE gives way first — aspect-ratio is a preference now, not a
floor, so a tall body eats into the photograph;
· the BODY clips its own content instead of spilling;
· the FOOT keeps its height, because it holds the one action. */
.gc-head{aspect-ratio:16/9;position:relative;overflow:visible;background:var(--wash,var(--sub));flex:0 8 auto;min-height:0}
.gc-head > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ── v10.83 · "trade ka bhi dekho, image kaise aa rahi" ───────────────
The rule above sizes `.gc-head > img`. But views/components/card.php
puts every real photograph one level deeper — inside `.gc-clip`, for
the rounded corners — and NOTHING sized that one. So a card photo was
laid out at its own intrinsic 400x250 attribute box and simply clipped
by the wrapper's overflow:hidden.
On a 16:9 photo head that is 400x250 against 1.78 — close enough that
it read as a slightly tight crop for years. On the `line` head it is
104x250 inside a 104x119 window: a square thumbnail showing the top
40% of the picture, stretched. Measured in a real browser at 390px on
/search?sector=11 (the card inspector reports it as a 4px overflow;
the overflow is 131px of image hidden under the card).
Same four declarations as the rule above, so a photo behaves the same
whichever head holds it. `.is-fit` still overrides object-fit below,
and the tile/date/object clips that hold initials and icons rather
than an ![]()
are untouched. */
.gc-head > .gc-clip > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gc-head::after{content:"";position:absolute;inset:0;pointer-events:none;border-bottom:1px solid var(--line);opacity:.6}
.gc-head .gc-clip{position:absolute;inset:0;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.gc-top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;z-index:3}
/* v10.07 — 32px painted, 44px tappable. The heart is the one control on a
card that is not the card's own link, and at 28px on a phone it was under
every guideline there is; the ::before enlarges what the finger hits
without moving what the eye sees. */
.gc-save::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.gc-save{position:relative;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:grid;place-items:center;color:var(--tx);margin-left:auto;box-shadow:0 1px 3px rgba(0,0,0,.15);cursor:pointer;font-size:14px;padding:0}
.gc-save:hover,.gc-save.is-on{color:var(--no)}
.gc-flag{background:var(--tx);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;white-space:nowrap}
.gc-flag.feat{background:var(--amber)}
.gc-flags{display:flex;gap:6px;flex-wrap:wrap}
/* v9.74 — the strip is bounded on the right too. A long seller name used to
run straight off the card on a phone; it now truncates, and it steps aside
where the logo badge sits. */
.gc-strip{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;gap:6px;min-width:0}
.gc-head:has(.gc-logo) .gc-strip{right:62px}
.gc-strip .gtag{min-width:0;max-width:100%}
.gc-strip .gtag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gc-strip .gtag{background:rgba(255,255,255,.94);backdrop-filter:blur(4px)}
.gc-strip .gtag.ok{color:var(--ok)}.gc-strip .gtag.no{color:var(--no)}
/* v10.07 — the badge hangs 16px below the picture, which is the look; what
was missing was the room for it. Measured: the "DA" badge sat on top of
the kick line ("DOCTOR · MODEL TOWN") by 4px on every width. The body
reserves that space when a badge is drawn — card.php adds .gc--badge — so
the overhang lands on ground, not on words. */
.gc--badge .gc-body{padding-top:26px}
.gc--badge.gc--line .gc-body{padding-top:12px}
.gc-logo{position:absolute;right:12px;bottom:-16px;width:44px;height:44px;border-radius:12px;background:var(--surface);border:3px solid var(--surface);box-shadow:var(--sh-2);display:grid;place-items:center;font-weight:700;font-size:13px;z-index:4;color:var(--tx);overflow:hidden}
.gc-logo img{width:100%;height:100%;object-fit:cover}
/* flex-shrink 8 on the picture against 1 here: when the words need more
room than the card has, the PHOTOGRAPH gives way, and the text is clipped
only if there is nothing left to take. */
.gc-body{padding:14px 16px 6px;flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0;overflow:hidden}
.gc-kick{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-name{font-family:var(--font-h);font-weight:600;font-size:15.5px;line-height:1.25;margin:0;display:flex;align-items:center;gap:5px;min-width:0}
.gc-name a{color:var(--tx);text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gc-name a::after{content:"";position:absolute;inset:0;z-index:1}
.gc-name .v,.gc-name .vmark{color:var(--info);font-size:14px;flex:none;line-height:1}
.gc-name .vmark--claimed{color:var(--mute)}
.gc-sub{color:var(--mute);font-size:13px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.gc-hit{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-2);background:var(--brand-tint);border-radius:8px;padding:5px 8px;margin-top:2px;min-width:0}
.gc-hit .bi{color:var(--brand-ink);flex:none}.gc-hit span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gc-hit b{color:var(--brand-ink);white-space:nowrap;margin-left:auto}
.gc-facts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--tx-2)}
.gc-facts span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.gc-facts .bi{color:var(--faint);font-size:12px}
.gc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 14px;margin-top:auto;position:relative;z-index:2;flex:0 0 auto}
.gc-price{font-family:var(--font-h);font-weight:700;font-size:16px;color:var(--brand-ink);line-height:1.1}
/* v10.07 — the foot's left side may shrink, and its note stays on one line.
On a 166px phone card "120k – 200k" plus "a month" made the foot 90px
tall, which pushed it up over the body's own facts: "2d ago" and "a
month" were painted on top of each other. */
.gc-price small{display:block;font:500 11.5px var(--font-b);color:var(--mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-foot > span:first-child{min-width:0;overflow:hidden}
.gc-price{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* v10.83 — a live sale on the card: the old price struck through and the
seller's own badge beside the new one. Reported as "dehkao card b sale ko
nai janata" — the page showed PKR 1,000 (was 2,500, Launch Sale) and the
card beside it showed PKR 2,500. Both read one row; only the page knew
what a deal was. */
.gc-was{font:500 12px var(--font-b);color:var(--mute);text-decoration:line-through;margin-left:6px;white-space:nowrap}
.gc-deal{display:inline-block;font:700 10.4px/1.5 var(--font-b);letter-spacing:.04em;text-transform:uppercase;
background:var(--amber-tint);color:var(--amber);border-radius:5px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.gc-pricewrap{display:inline-flex;align-items:baseline;gap:0;min-width:0;flex-wrap:wrap}
/* "PKR 1,000" is one word to a reader: at 167px the two-up card broke it
across two lines with the currency alone on the first. */
.gc-pricewrap > .gc-price{white-space:nowrap}
/* The foot may wrap when a card is wide enough to have room for it; the
phone-row rule above keeps the price GROUP on one line by ellipsing it,
which is why the group is one element in card.php. */
.gc-foot{flex-wrap:wrap}
.gc-rate{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px;color:var(--tx)}
.gc-rate .bi{color:var(--amber)}
.gc-rate small{color:var(--faint);font-weight:500}
/* v10.34 — "No reviews yet" is quieter than a real score: same row, same
star, but the muted weight of a note rather than the weight of a number. */
.gc-rate.is-empty{font-weight:500;font-size:12.4px;color:var(--mute)}
.gc-rate.is-empty .bi{color:var(--line-2)}
.gc-note{font-size:12.5px;color:var(--mute)}
.gc-foot .btn{position:relative;z-index:2}
/* head kinds */
.gc-head.tile .gc-clip{display:grid;place-items:center}
.gc-head.tile .gc-ini{font:700 34px var(--font-h);letter-spacing:-.02em;color:var(--tone,var(--brand));opacity:.35}
.gc-head.tile .gc-wm{position:absolute;right:-8px;bottom:-14px;font-size:96px;color:var(--tone,var(--brand));opacity:.08;pointer-events:none;line-height:1}
.gc-head.tile .icon-only .gc-ini{display:none}
.gc-head.tile .icon-only .gc-wm{position:static;font-size:52px;opacity:.28}
/* v10.07 — the panel head clips its own text. It has no badge to hang over
the edge (that is the whole point of the Panel layout), so unlike the
picture heads it can be closed. Measured at 390px before this: the job's
headline ran out of the panel and landed on the chips underneath it —
"Tandoor Chef" over "Food & Hospitality". */
.gc-head.type{display:flex;flex-direction:column;justify-content:flex-end;padding:16px;overflow:hidden}
.gc-head.type::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tone,var(--brand));border-radius:var(--r) 0 0 0}
.gc-head.type .big{font-family:var(--font-h);font-weight:700;font-size:19px;line-height:1.2;color:var(--tx);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-head.type .co{font-size:13px;color:var(--tx-2);margin-top:4px;display:flex;align-items:center;gap:6px;min-width:0}
.gc-head.type .co i{width:22px;height:22px;border-radius:6px;background:var(--surface);display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;color:var(--tone,var(--brand));flex:none}
.gc-head.type .co span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-head.type .co--plain{font-weight:600;color:var(--tone,var(--brand));font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.gc-head.type .chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
/* v9.64 — the name printed once: the body keeps it for the link/outline */
.gc-name--sr{height:0;margin:0;font-size:0;line-height:0;overflow:visible}
.gc-name--sr .vmark,.gc-name--sr .verified-mark,.gc-name--sr svg,.gc-name--sr i{display:none}
/* v9.70 — the type head is 16:10 like every other head (it used to grow
with its text, so a row of a job, a CV and a business had three head
heights — "scattering the layout"). What does not fit is clipped: the
role clamps to two lines, the chips stay on one row. */
.gc-head.type{overflow:hidden;box-sizing:border-box;padding:14px 16px}
.gc-head.type .big{font-size:17px}
.gc-chips{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.gc-chips span{background:var(--wash,var(--sub));border-radius:6px;padding:3px 8px;font-size:11.5px;font-weight:600;color:var(--tone,var(--brand))}
[data-head="type"] .gc-body{padding-top:12px}
.gc-head.type .chips span{background:var(--surface);border-radius:6px;padding:3px 8px;font-size:11.5px;font-weight:600;color:var(--tone,var(--brand))}
.gc-head.person{display:flex;align-items:flex-end;padding:16px}
.gc-head.person .pf{width:72px;height:72px;border-radius:18px;background:var(--surface);border:3px solid var(--surface);box-shadow:var(--sh-2);display:grid;place-items:center;font:700 20px var(--font-h);color:var(--tone,var(--brand));position:relative;z-index:2;overflow:hidden;flex:none}
.gc-head.person .pf img{width:100%;height:100%;object-fit:cover}
.gc-head.person .pt{margin-left:12px;font-size:12.5px;color:var(--tx-2);min-width:0;position:relative;z-index:2}
.gc-head.person .pt b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v9.70 — a long bio must not push the head past 16:10: clip it to two lines */
.gc-head.person{overflow:hidden;box-sizing:border-box}
.gc-head.person .pt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.gc-head.person .pt b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal}
.gc-head.date .gc-clip{display:grid;place-items:center}
.gc-head.date .db{position:absolute;left:12px;bottom:12px;z-index:3;background:var(--surface);border-radius:10px;text-align:center;padding:6px 10px;min-width:52px;box-shadow:var(--sh-2)}
.gc-head.date .db b{display:block;font:700 10.5px var(--font-b);letter-spacing:.08em;color:var(--c-event)}
.gc-head.date .db span{font:700 20px/1 var(--font-h);color:var(--tx)}.ggrid>.listing-card-wrap>.gc{flex:1}
.ggrid--list .gc{flex-direction:row;align-items:stretch}
.ggrid--list .gc-head{aspect-ratio:auto;width:220px;flex:none;border-radius:var(--r) 0 0 var(--r)}
.ggrid--list .gc-head .gc-clip{border-radius:var(--r) 0 0 var(--r)}
.ggrid--list .gc-body{padding:14px 16px}
.ggrid--list .gc-foot{padding:12px 16px;flex-direction:column;align-items:flex-end;justify-content:center;border-left:1px solid var(--line);margin:0;min-width:150px}
.ggrid--list .gc-logo{display:none}
/* v10.07 — the identity chip needs somewhere to be in a ROW.
The chip is absolute at left:10 top:10 of the head, which works in the
grid because a 16:9 head is ~215px tall and the Portrait layout centres
its avatar in it. In the list the head is 220x104 and the avatar is
bottom-aligned, so the chip landed straight on it: measured on the
professional list at 1400 and 820, "Professional" was painted over the
"DA" monogram by 50x13 and over "Doctor · Model Town" by 15x9. The head
reserves the strip the chip sits in, and the row grows the 22px it
needs — a list row has no fixed height, which is the whole reason this
is the layout that can afford it. */
.ggrid--list .gc-head.person,
.ggrid--list .gc-head.stat{padding-top:38px}
/* the lead card — the newest post on the blog, wide across the grid */
.gc--lead{grid-column:1/-1;display:grid;grid-template-columns:46% minmax(0,1fr);grid-template-rows:1fr auto}
.gc--lead .gc-head{grid-row:1/3;aspect-ratio:auto;min-height:260px;border-radius:var(--r) 0 0 var(--r)}
.gc--lead .gc-head .gc-clip{border-radius:var(--r) 0 0 var(--r)}
.gc--lead .gc-body{padding:24px 28px 8px;justify-content:center}
.gc--lead .gc-name{font-size:22px}
.gc--lead .gc-sub{-webkit-line-clamp:3;font-size:14px}
.gc--lead .gc-foot{padding:8px 28px 24px}
@media (max-width:720px){.gc--lead{display:flex;flex-direction:column}.gc--lead .gc-head{width:auto;aspect-ratio:16/10;min-height:0;border-radius:var(--r) var(--r) 0 0}.gc--lead .gc-body{padding:12px 12px 4px}.gc--lead .gc-name{font-size:17px}.gc--lead .gc-foot{padding:8px 12px 12px}
}
@media (max-width:720px){
.ggrid--list .gc{flex-direction:column}.ggrid--list .gc-head{width:auto;aspect-ratio:16/9;border-radius:var(--r) var(--r) 0 0}.ggrid--list .gc-foot{border-left:0;flex-direction:row;align-items:center;min-width:0}
.gc-body{padding:12px 12px 4px}.gc-foot{padding:8px 12px 12px}.gc-name:not(.gc-name--sr){font-size:14px}.gc-price{font-size:15px}
.gc-facts{gap:8px;font-size:12px}.gc-head.type .big{font-size:16px}.gc-head.type{padding:12px}
.gc-head.person .pf{width:56px;height:56px;font-size:16px;border-radius:14px}.gc-head.person{padding:12px}
.gc-head.tile .gc-ini{font-size:26px}
}
/* ── the small phone ──────────────────────────────────────────────────────
Two cards per row stays true all the way down: the client's own words,
"card mobile me ek row mein 2 open hone chahey". A 360px screen gives
each card about 156px, so the card gets tighter — smaller gap, smaller
padding, smaller type — rather than the row getting narrower. The one
exception is .ggrid--list, which is a one-per-row layout by definition
and sets its own grid-template-columns above --cols. */
@media (max-width:420px){
.gc-head{aspect-ratio:16/9}
.gc-body{padding:9px 9px 3px}
/* 150px of card is not enough for a price and a button side by side, so
the foot stacks: the number, then one full-width action. */
.gc-foot{padding:6px 9px 10px;gap:6px;flex-direction:column;align-items:stretch}
.gc-foot .btn-sm{width:100%;justify-content:center}
.gc-foot .gc-price small{display:inline;margin:0 0 0 3px}
.gc-name:not(.gc-name--sr){font-size:13px;line-height:1.3}
.gc-price{font-size:14px}
.gc-facts{gap:6px;font-size:11px}
.gc-sub{font-size:12px}
.gc-rate{font-size:12px}
.gc-head.type .big{font-size:14px}.gc-head.type{padding:9px}
.gc-head.person .pf{width:46px;height:46px;font-size:14px;border-radius:12px}.gc-head.person{padding:9px}
.gc-head.tile .gc-ini{font-size:21px}
.gc-head.date .db{left:8px;bottom:8px;padding:4px 7px;min-width:42px}
.gc-head.date .db span{font-size:16px}
.gc-logo{width:34px;height:34px;right:8px;bottom:-13px;border-width:2px;font-size:11px}
.gc-save{width:32px;height:32px;font-size:13px} /* v10.07 — was 28px, under every tap-target guideline */
.gc-foot .btn-sm{padding:0 9px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.gc,.fil,.btn{transition:none}
}
/* the marketplace block on a post page draws cards in this grid */
.gc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:720px){.gc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:420px){.gc-grid{grid-template-columns:minmax(0,1fr)}
}
.blog-grid .gc--lead{grid-column:1/-1}
.pd60 .ident h1 .vmark{font-size:.65em}
.pd60 .ident .l2 .gc-rate{font-size:14px;color:var(--tx)}
.pf60 .pf-id h1 .vmark{font-size:.65em;color:var(--info)}
/* ── the enquiry cart (assets/js/cart.js) ────────────────────────────
v9.69. A floating bar, a drawer (a sheet on the phone), and the review
page (/enquiry-cart). Dark bar so it reads as the one thing on the page
that follows you; the drawer is the site's own surface. */
.gc-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(20px);z-index:1180;width:min(560px,calc(100% - 32px));background:#0F1A17;color:#fff;border-radius:16px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 40px -14px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.2s;font-size:13.5px;cursor:pointer}
.gc-bar.on{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.gc-bar i{font-size:18px;color:var(--brand-soft,#9FD4CC)}.gc-bar b{font-size:14px}.gc-bar small{color:var(--brand-soft,#9FD4CC);font-size:12.5px;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-bar-go{height:38px;border-radius:11px;padding:0 14px;background:var(--brand);color:#fff;border:0;font:600 13.5px var(--font-b);flex:none}
/* v9.86 — the cross. It hides the bar for the visit; it does not empty the
basket (assets/js/cart.js). Sized as a real 34px target, because the one
control on this bar that must never be hit by accident is beside it. */
.gc-bar-x{width:34px;height:34px;flex:none;display:grid;place-items:center;border:0;padding:0;
background:rgba(255,255,255,.10);color:#fff;border-radius:10px;cursor:pointer;margin-left:2px}
.gc-bar-x:hover{background:rgba(255,255,255,.20)}
.gc-bar-x i{font-size:13px;color:#fff}
.gc-bd{position:fixed;inset:0;background:rgba(8,18,15,.45);z-index:1210;opacity:0;pointer-events:none;transition:.2s}.gc-bd.on{opacity:1;pointer-events:auto}
.gc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);color:var(--tx);z-index:1220;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s;box-shadow:-20px 0 60px -30px rgba(0,0,0,.4)}
.gc-drawer.on{transform:none}
@media (max-width:640px){.gc-drawer{top:auto;left:0;width:100%;max-height:88vh;border-radius:18px 18px 0 0;transform:translateY(100%)}.gc-drawer.on{transform:none}
}
.gc-h{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}.gc-h h3{font-size:16px;margin:0}.gc-h span{margin-left:auto;font-size:12.5px;color:var(--mute)}.gc-h i.bi-cart3{color:var(--brand)}
.gc-ic{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--mute);display:grid;place-items:center;cursor:pointer;flex:none}.gc-ic:hover{background:var(--sub);color:var(--tx)}
/* the enquiry drawer's notice. Scoped to the drawer since v9.74: the card's
own `.gc-note` (the foot's "46 views") is declared far above and this rule,
being later in the file, was silently repainting every foot note as a
tinted bar. Same prefix, two components — the drawer is the one that moves. */
.gc-drawer .gc-note{padding:10px 16px;background:var(--brand-tint);color:var(--brand-ink);font-size:12.5px;display:flex;gap:8px;align-items:center}
.gc-b{flex:1;overflow-y:auto;min-height:0}
.gc-grp{padding:12px 16px;border-bottom:1px solid var(--line)}
.gc-grp-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.gc-grp-h>i{width:26px;height:26px;border-radius:7px;background:var(--brand-tint);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:var(--brand-ink);flex:none}.gc-grp-h a{font-weight:600;font-size:13.5px;color:var(--tx);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gc-grp-h span{margin-left:auto;font-size:11.5px;color:var(--mute);flex:none}
.gc-ln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:7px 0;align-items:start}
.gc-ln-t b{font-size:13.5px;font-weight:600}.gc-ln-t b small{color:var(--mute);font-weight:500}.gc-ln-p{font-size:12px;color:var(--mute)}
.gc-ln-note{margin-top:6px}.gc-ln-note input{width:100%;height:32px;border:1px solid var(--line-2);border-radius:8px;padding:0 10px;font:inherit;font-size:12.5px;color:var(--tx);background:var(--surface)}
.gc-ln-r{display:flex;align-items:center;gap:4px}
.gc-q{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}.gc-q button{width:26px;height:28px;border:0;background:transparent;font-weight:700;color:var(--tx);cursor:pointer}.gc-q input{width:44px;height:28px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:inherit;font-size:12.5px;-moz-appearance:textfield}.gc-q input::-webkit-outer-spin-button,.gc-q input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gc-u{font-size:11px;color:var(--mute);margin:0 2px}
.gc-grp-f{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute);margin-top:6px}.gc-grp-f b{color:var(--tx)}
.gc-f{padding:14px 16px;background:var(--sub);border-top:1px solid var(--line)}
.gc-tot{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:10px}.gc-tot small{display:block;font-weight:500;color:var(--mute);font-size:11.5px}
.gc-go{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;background:var(--brand);color:#fff!important;font-weight:600;font-size:15px;text-decoration:none}
.gc-empty{padding:40px 20px;text-align:center;color:var(--mute)}.gc-empty i{font-size:34px;color:var(--faint);display:block;margin-bottom:8px}.gc-empty p{margin:0;font-size:14px}
.rfq .gc-grp{padding:12px 0}.rfq .gc-grp:first-child{padding-top:0}
.gc-drawer .gc-note--warn{background:var(--amber-tint);color:var(--amber)}
.gc-drawer .gc-note a{color:inherit;font-weight:600;white-space:nowrap}
/* ══════════════════════════════════════════════════════════════════════════
v9.73 — the card's picture and its mark.
The head is 16:9 (it was 16:10): the ratio a phone camera and a WhatsApp
forward already are, so an owner's photograph needs no crop. Every head
keeps the SAME box — that is what lines a mixed row up on the search page
and it is not a per-sector option.
The mark (the small logo badge) may now sit on a tile or a date head, not
only on a photograph — a business that uploaded a logo and no cover, or a
product showing its seller's logo, used to lose it entirely. When one is
drawn the tile drops its initials, which the badge would otherwise sit on.
══════════════════════════════════════════════════════════════════════════ */
.gc-head.tile.has-mark .gc-ini{display:none}
.gc-head.tile.has-mark .gc-wm{right:-8px;bottom:-14px;opacity:.10}
.gc-head.date.has-mark .gc-logo{bottom:-16px}
/* the small phone keeps the badge tucked in — this rule has to sit AFTER the
line above, which would otherwise win over the @media block on order. */
@media (max-width:420px){.gc-head.date.has-mark .gc-logo{bottom:-13px}
}
.pd60 .hd-id h1 .vmark{font-size:.62em}
.gcp-b .gc-ln{padding:11px 0;border-bottom:1px solid var(--line)}
.gcp-b .gc-ln:last-child{border-bottom:0}
.gcp-f .gc-tot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:11px}
.gcp-f .gc-tot span{font-size:12.4px;color:var(--mute);flex:1;min-width:0}
.gcp-f .gc-tot span small{display:block;font-size:11.2px;color:var(--faint)}
.gcp-f .gc-tot b{font-family:var(--font-h);font-size:21px;color:var(--brand-ink);white-space:nowrap;flex:none}
/* v9.88 — the button had a height and no padding, so "Send enquiry to
Javaid Industrial Company Pvt Limited" wrapped to two lines that touched
the top and bottom edges and ran to within a few pixels of the sides.
Reported with a screenshot. A real padding, a line height that lets two
lines breathe, and `height` given up for `min-height` so the button grows
with the name instead of squeezing it. */
.gcp-f .gc-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;
padding:11px 18px;box-sizing:border-box;text-align:center;
/* the line height goes INSIDE the shorthand: a `font:` declaration after
a `line-height` one silently resets it to normal, which is how two
wrapped lines came to touch. */
border-radius:11px;background:var(--brand);color:#fff;font:600 13.5px/1.35 var(--font-b);text-decoration:none}
.gcp-f .gc-go .bi{flex:none}
.gcp .gc-empty{padding:26px 18px;text-align:center;color:var(--mute)}
.gcp .gc-empty .bi{font-size:26px;color:var(--faint);display:block;margin-bottom:8px}
.gcp .gc-empty p{margin:0;font-size:13.2px;line-height:1.5}
.gcp .gc-empty small{color:var(--faint)}
/* v10.07 — a FLOOR, not a ceiling. `height` here (356px) plus a picture
pinned to 16:9 (line ~1758) left the body exactly what was left over, and
any card whose words needed more overflowed: measured on a professional
card, the facts panel and the foot overlapped by 35px; on a 390px job
card the chips ran 41px into the foot and "120k – 200k a month" was drawn
on top of "2d ago". The two rules the design actually cares about are
kept — every picture in a row is the same 16:9, and every card in a row
is the same height, because the grid stretches them together — and the
row simply grows by the few pixels a longer description needs. The
growth is bounded: the kick is one line, the name is clamped to two and
the description to one. */
.ggrid:not(.ggrid--list) .gc:not(.gc--lead){min-height:var(--cell)}
/* lead: the first card takes the whole first row */
.pbc-lead > .gc:first-child{grid-column:1/-1}
.pbc-rail > .gc{min-width:min(260px,72vw);flex:0 0 auto}
/* the tablet and phone overrides — the same nine, at two more widths */
@media(max-width:1024px) and (min-width:641px){
.pbc-t-rail > .gc{min-width:260px;flex:0 0 auto}
.pbc-t-lead > .gc:first-child{grid-column:1/-1}
}
@media(max-width:640px){
.pbc-m-rail > .gc{min-width:78vw;flex:0 0 auto;scroll-snap-align:start}
.pbc-m-lead > .gc:first-child{grid-column:1/-1}
}
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-head{aspect-ratio:auto;flex:1 1 auto;min-height:var(--canvas,130px)}
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-body{flex:0 0 auto}
/* each layout's FLOOR — the ceiling is whatever the words leave over */
.ggrid .gc[data-head="photo"] > .gc-head{--canvas:130px}
.ggrid .gc[data-head="tile"] > .gc-head{--canvas:130px}
.ggrid .gc[data-head="object"] > .gc-head{--canvas:120px}
.ggrid .gc[data-head="person"] > .gc-head{--canvas:126px}
.ggrid .gc[data-head="type"] > .gc-head{--canvas:150px}
.ggrid .gc[data-head="date"] > .gc-head{--canvas:118px}
/* ══════════════════════════════════════════════════════════════════════════
v9.89 — THE PICTURE HAS A SIZE AGAIN
──────────────────────────────────────────────────────────────────────────
The client, on the live site: "ye cover pic ka size kya e? aur ye har ek
per ek jeysa sahi kyu nai dikhta? pehle tu bohat fit atta tha."
The answer was that it had no size. The SLACK RULE above gives the head
`flex:1 1 auto` inside a fixed-height card, so the picture takes whatever
the words leave over — and a card with a shorter name gets a taller
photograph. Measured on one search page, one moment:
mobile 2-up 148px wide, 96 / 99 / 117 / 121 tall (25px spread)
desktop 3-up 366px wide, 205 … 249 tall (44px spread)
That is exactly what was reported, and the memory is right too: before
v9.79 the head WAS a fixed ratio (16:9, and 16:10 before that), and every
picture was identical. v9.79 spent that uniformity to close a white gap.
This buys it back and keeps the gap closed, by moving the slack ONE
region down:
.gc-head the picture flex:0, a fixed ratio ← identical, always
.gc-body the words flex:1 ← takes the leftovers
.gc-foot the number flex:0, margin-top:auto
The leftover is now air between the last line of text and the action
button, which is ordinary card spacing and reads as padding. A photograph
that is a different height on every card does not.
── One ratio per SURFACE, not one number everywhere ──
The picture is 148px wide on a phone and 366px on a desktop, so a single
ratio cannot serve both: 16:9 is 206px on a desktop and an 83px strip on
a phone. Uniform means "every picture in THIS grid is the same", so each
surface gets one ratio and holds it:
desktop / tablet grid 16:9 (366 x 206) the ratio a phone camera
and a WhatsApp forward
already are — v9.73's own
reason, restored
phone 2-up 4:3 (148 x 111) 16:9 here is a strip
row / list thumbnail 1:1 (104 x 104) it was already ~square
The `--canvas` floors above become dead weight for the grid and are left
where they are: they still apply to any surface that has not been given a
ratio, so nothing outside a grid changes.
══════════════════════════════════════════════════════════════════════════ */
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-head{flex:0 0 auto;aspect-ratio:16/9;min-height:0}
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-body{flex:1 1 auto;min-height:0}
/* The Panel layout takes the ratio too, and that is the point: it has no
photograph, but its tinted block sits in a row NEXT to photographs, and a
head 31px taller than its neighbours is exactly the raggedness this
release is removing. Measured at 206px it still holds everything it is
allowed to draw — the role clamps to two lines (~42px), the employer line
~22px, 28px of padding — so nothing is lost by lining it up.
/* ── the identity: a spine and a chip, on every card ─────────────────────
The colour is spent in exactly three places — this spine, this chip, and
the foot's number and button. Never on the card's ground: eight tinted
cards in a row destroy the very recognition the chip is there to give. */
.gc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone,var(--brand));z-index:5;
border-radius:var(--r) 0 0 var(--r)}
.gc-id{position:absolute;left:10px;top:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 56px);
background:rgba(255,255,255,.96);border-radius:999px;padding:4px 10px 4px 5px;
font:700 11px var(--font-b);color:var(--tone,var(--brand));box-shadow:0 2px 6px rgba(13,27,24,.13)}
.gc-id > i{width:17px;height:17px;border-radius:50%;background:var(--tone,var(--brand));color:#fff;
display:grid;place-items:center;font-size:10px;flex:none}
.gc-id > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the flags row starts to the right of the chip, so the two never collide */
.gc-head:has(.gc-id) .gc-top{left:auto;right:10px}
.gc-head.type::before{display:none} /* the type head had its own 5px rail */
/* ── Layout 2 · OBJECT — the thing, then the seller and the price ──────── */
.gc-head.object .gc-clip{display:grid;place-items:center}
.gc-head.object .gc-ini{font:700 30px var(--font-h);color:var(--tone,var(--brand));opacity:.9}
.gc-head.object .gc-wm{position:absolute;right:-6px;bottom:-10px;font-size:80px;color:var(--tone,var(--brand));opacity:.09;line-height:1}
/* ── Layout 6 · LINE — a thumbnail on the left, the detail on the right ── */
.gc--line{flex-direction:row;align-items:stretch}
/* v9.89 — the row thumbnail is a SQUARE, said out loud. It measured
104x106 by accident (the card's height minus its padding); one ratio per
surface means this one is named like the others. */
.gc--line > .gc-head{width:104px;flex:none;aspect-ratio:1/1;min-height:0;align-self:stretch;border-radius:var(--r) 0 0 var(--r)}
.gc--line > .gc-head .gc-clip{border-radius:var(--r) 0 0 var(--r)}
.gc--line > .gc-head::after{border-bottom:0;border-right:1px solid var(--line)}
.gc--line .gc-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.gc--line .gc-body{padding:10px 12px 0;flex:1 1 auto}
.gc--line .gc-foot{padding:6px 12px 10px}
.gc--line .gc-id{left:7px;top:7px;padding:0;width:23px;height:23px;border-radius:50%;
background:var(--tone,var(--brand));color:#fff;justify-content:center}
.gc--line .gc-id > i{background:transparent;box-shadow:none;width:auto;height:auto;font-size:11px}
.gc--line .gc-id > span{display:none}
.gc--line .gc-top{top:7px;left:auto;right:7px}
.gc--line .gc-strip{left:0;right:auto;bottom:0}
.gc--line .gc-strip .gtag{border-radius:0 8px 0 0;padding:3px 8px;font-size:10px}
.gc--line .gc-logo{display:none}
.ggrid:not(.ggrid--list) .gc--line{height:124px}
/* ══ THE PHONE ═════════════════════════════════════════════════════════════
390px leaves 167px per card in a two-up grid — measured inside the frame,
not guessed. That is too narrow for the desktop arrangement, so a grid
may ask for ROW instead: one card per line, 104px of picture and 238px of
reading area. It is a GRID's choice, not a card's, because a mixed row of
half-width and full-width cards is not a grid at all.
Row is done here in CSS rather than by rendering a different card,
because the server does not know the viewport. The markup is untouched;
.gc-head / .gc-body / .gc-foot are simply placed on a two-column grid.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-head{--canvas:96px}
/* v9.89 — 148px of picture is too narrow for 16:9 (it lands at 83px, a
strip). 4:3 gives it 111px and the card still closes at 292px. */
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-head{aspect-ratio:4/3}
/* v9.89 — a 167px card cannot hold a "SUN 27 SEP" flag as well as the
chip and the save button: it ran under the heart and was clipped
mid-word. The date BLOCK on that head already says the date, so the
flag goes — the same call .gc--line makes for the same reason. */
.ggrid:not(.ggrid--list) .gc[data-head="date"] .gc-flags{display:none}
/* and the name gets a size that fits two lines of a real product name in
167px — measured: "16mm Steel Bar — Grade 60" needs 13.6px to land in
two lines instead of being cut at "Grad…". */
/* v10.07 — :not(.gc-name--sr). This rule sizes the VISIBLE name, and it
was also sizing the screen-reader-only copy the Panel and Line layouts
collapse (.gc-name--sr sets font-size:0 at a lower specificity, so this
beat it). Measured at 390px on a job card: the title was painted twice,
the second copy landing on the chips — "Tandoor Chef" over "Food &
Hospitality". The two layouts that deliberately bring it back
(.gc--line, phone rows) set their own size and are untouched. */
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) .gc-name:not(.gc-name--sr){font-size:13.6px}
/* the foot stacks: a thumb needs 40px, and a 28px chip beside a price is
not a target. the number goes above the button, which spans the card. */
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-foot{flex-direction:column;align-items:stretch;gap:7px}
.ggrid:not(.ggrid--list) .gc:not(.gc--lead) > .gc-foot .btn{justify-content:center;min-height:36px}
/* the chip loses its word: the colour, the spine and the layout have said
it three times already, and 167px has no room for a fourth. */
.ggrid .gc-id{padding:0;width:26px;height:26px;border-radius:50%;background:var(--tone,var(--brand));color:#fff;justify-content:center}
.ggrid .gc-id > i{background:transparent;box-shadow:none;width:auto;height:auto;font-size:12px}
.ggrid .gc-id > span{display:none}
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead){height:var(--cell);display:grid;
grid-template-columns:104px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
grid-template-areas:"head body" "head foot"}
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-head{grid-area:head;width:auto;min-height:0;aspect-ratio:auto;
border-radius:var(--r) 0 0 var(--r)}
.ggrid[data-phone="row"] .gc > .gc-head .gc-clip{border-radius:var(--r) 0 0 var(--r)}
.ggrid[data-phone="row"] .gc > .gc-head::after{border-bottom:0;border-right:1px solid var(--line)}
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-body{grid-area:body;padding:9px 12px 0;
min-height:0;overflow:hidden}
/* 124px holds a kick line, a name and ONE more thing. The description is
the one that goes: the facts are this sector's chosen fields and say
more per character than a truncated sentence. */
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) .gc-sub{display:none}
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) .gc-name{-webkit-line-clamp:1}
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-foot{grid-area:foot;flex-direction:row;
align-items:center;justify-content:space-between;padding:2px 12px 9px;gap:8px}
/* v9.74's two-up rule makes every foot button full width below 420px.
Row mode is one card per line, so the button goes back to its own size —
width, not just flex, or the 100% survives flex:none. */
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-foot .btn{min-height:34px;flex:0 0 auto;width:auto}
/* 342 − 104 of thumbnail − 24 of padding leaves 214px for a number and a
button. Both stay on one line: the number ellipses, the button never
shrinks — a clipped "As…" is worse than a clipped price. */
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-foot > :first-child{
flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.2px}
.ggrid[data-phone="row"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-foot .gc-price small{display:inline}
.ggrid[data-phone="row"] .gc-col{display:contents} /* a LINE card is already this shape */
.ggrid[data-phone="row"] .gc-strip{left:0;right:auto;bottom:0}
.ggrid[data-phone="row"] .gc-strip{max-width:104px}
.ggrid[data-phone="row"] .gc-strip .gtag{border-radius:0 8px 0 0;padding:3px 7px;font-size:9.6px;max-width:100%}
.ggrid[data-phone="row"] .gc-logo{display:none}
}
/* ── the grown canvas, per layout ─────────────────────────────────────────
The canvas now absorbs whatever the words leave over, and three of the
layouts were composed for a fixed 16:9 band. Left alone they park their
content against the old edge and the extra pixels open a gap ABOVE it —
the same hole this release removed from the foot, moved upstairs.
Each one centres its content instead, so growth is felt as air. */
.ggrid:not(.ggrid--list) .gc-head.type{justify-content:center}
.ggrid:not(.ggrid--list) .gc-head.person{align-items:center}
/* the event's date block and its status strip both live bottom-left; the
strip starts to the right of the block so they cannot overlap. */
.gc-head:has(.db) .gc-strip{left:74px}
/* On a LINE card the 104px thumbnail holds the block alone and the strip
takes the corner under it. Row mode is the same shape, so the rules sit
in the phone media query with the rest of it — outside one, they would
apply to the desktop grid as well (the search grid carries data-phone at
every width) and the block would fly to the top-left, under the chip. */
.gc--line .gc-head:has(.db) .gc-strip{left:0;bottom:0}
.gc--line .gc-head .db{top:8px;bottom:auto;left:8px;min-width:42px;padding:4px 6px}
@media (max-width:560px){
.ggrid[data-phone="row"] .gc-head:has(.db) .gc-strip{left:0;bottom:0}
.ggrid[data-phone="row"] .gc-head .db{top:8px;bottom:auto;left:8px;min-width:42px;padding:4px 6px}
}
/* ── the third and last place the colour is spent ─────────────────────────
The spine says which sector, the chip says it in words, and the foot —
the number that matters and the one action — is drawn in the same ink.
Three places. The card's ground stays white, because eight tinted cards
in a row destroy the recognition the first two are there to give.
color-mix keeps the button's tint honest for any hue an admin sets: a
fixed pale-teal background under an amber label was the alternative. */
.gc .gc-price{color:var(--tone,var(--brand-ink))}
.gc .gc-foot .btn-soft{background:color-mix(in srgb,var(--tone,var(--brand)) 9%,#fff);color:var(--tone,var(--brand-ink));
border-color:color-mix(in srgb,var(--tone,var(--brand)) 22%,#fff)}
.gc .gc-foot .btn-soft:hover{background:color-mix(in srgb,var(--tone,var(--brand)) 16%,#fff);
border-color:color-mix(in srgb,var(--tone,var(--brand)) 34%,#fff);color:var(--tone,var(--brand-ink))}
/* ── a PANEL card in a row ────────────────────────────────────────────────
The `type` layout prints the role LARGE in its canvas and the body's own
is collapsed to nothing (.gc-name--sr) so the name is not said
twice. In a row that canvas is a 104px thumbnail — far too narrow for the
headline — so the two swap back: the thumbnail becomes the sector's tint
and its icon, and the real heading returns to the body where there is
room for it. Same markup, same card; only which of the two speaks.
The date block does the same swap: in a row it is the thumbnail, centred,
rather than a badge in a corner it would share with the chip. */
/* v10.07 — and the same in the LIST grid, which is the other place a card
becomes a row. The Panel head keeps its headline there, behind the "CV"
chip that sits on top of it: measured on the candidate row, the headline
ran under the chip by 17x13px. The row's own body already carries the
name, so the panel is a coloured plate with an icon — exactly what the
line layout decided. */
.gc--line .gc-head.type .big,.gc--line .gc-head.type .co,
.gc--line .gc-head.type .chips,
.ggrid--list .gc-head.type .big,.ggrid--list .gc-head.type .co,
.ggrid--list .gc-head.type .chips{display:none}
.gc--line .gc-name--sr{height:auto;font-size:13.6px;line-height:1.28;margin:2px 0 0}
.gc--line .gc-name--sr .vmark,.gc--line .gc-name--sr i{display:inline}
.gc--line .gc-head.type{padding:0;justify-content:center;align-items:center}
.gc--line .gc-head.type::after{content:"";position:absolute;inset:0;border:0;border-right:1px solid var(--line)}
@media (max-width:560px){
.ggrid[data-phone="row"] .gc-head.type .big,
.ggrid[data-phone="row"] .gc-head.type .co,
.ggrid[data-phone="row"] .gc-head.type .chips{display:none}
.ggrid[data-phone="row"] .gc-name--sr{height:auto;font-size:13.6px;line-height:1.28;margin:2px 0 0}
.ggrid[data-phone="row"] .gc-name--sr .vmark,.ggrid[data-phone="row"] .gc-name--sr i{display:inline}
.ggrid[data-phone="row"] .gc-head.type{padding:0}
/* the calendar block IS the thumbnail here, not a badge in the corner the
chip already occupies */
.ggrid[data-phone="row"] .gc-head .db{top:50%;left:50%;bottom:auto;transform:translate(-50%,-50%);
min-width:52px;padding:5px 9px;box-shadow:none;background:transparent}
.ggrid[data-phone="row"] .gc-head:has(.db) .gc-strip{display:none}
}
.gc--line .gc-head .db{top:50%;left:50%;bottom:auto;transform:translate(-50%,-50%);
min-width:52px;padding:5px 9px;box-shadow:none;background:transparent}
.gc--line .gc-head:has(.db) .gc-strip{display:none}
/* A 104px thumbnail cannot hold a "SUN 27 SEP" flag as well as the chip;
the flag spilled left and sat on top of it. The flags go — on a row the
date block already says the date, and Featured has the whole card's
colour to work with. */
.gc--line .gc-flags{display:none}
@media (max-width:560px){ .ggrid[data-phone="row"] .gc-flags{display:none}
}
/* A portrait head carries the face AND a two-line caption beside it. In a
104px thumbnail only the face fits; the caption's words are already in
the body, so it steps aside rather than being squeezed to "W…". */
.gc--line .gc-head.person{justify-content:center;padding:0}
.gc--line .gc-head.person .pt{display:none}
@media (max-width:560px){
.ggrid[data-phone="row"] .gc-head.person{justify-content:center;padding:0}
.ggrid[data-phone="row"] .gc-head.person .pt{display:none}
}
/* ══════════════════════════════════════════════════════════════════════════
v9.86 — THE REDRAW, THE SEVENTH LAYOUT, AND THE DENSITY AXIS
──────────────────────────────────────────────────────────────────────────
The client, with five reference sheets: "the cms lack interactive and
intuitive cards … the card design look so old, games ui ux … it should be
creative, interactive and eye-catching to the senior figma creator". Then,
on the mockups: "yes i want all these cards in card designer one".
Almost all of it is a STYLESHEET change, and that is the point. The markup
already carries the meaning — the head is already a region, the facts are
already a row, the layouts are already classes — so the inset frame, the
fact panel, the four densities and the two states are rules, not a second
card component. One thing below is not: the Profile layout, which puts the
name somewhere else, and a card's name is not something a stylesheet
should be moving about (see card.php).
These rules come last on purpose: every one of them is an override of a
block above, so the original is still legible where it was written and
this release is one thing to read and one thing to undo.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · THE INSET FRAME ──────────────────────────────────────────────────
The picture no longer runs to the card's edge; it sits in the card with
8px of ground around it and a radius of its own. Two radii — 22 outside,
15 inside, measured so the curves stay concentric — is the difference
between a photograph in a card and a photograph WITH a card drawn round
it, which is what the old one looked like. */
.gc{--rc:22px;--rf:15px;border-radius:var(--rc);padding:8px;overflow:visible;box-sizing:border-box;
box-shadow:0 1px 2px rgba(13,27,24,.05),0 10px 26px -18px rgba(13,27,24,.30);
transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.gc-head{border-radius:var(--rf)}
.gc-head > img{border-radius:var(--rf)}
.gc-head .gc-clip{border-radius:var(--rf)}
/* the hairline under the picture was there to divide two touching regions;
the 8px of ground now does that job, and better. */
.gc-head::after{border-bottom:0}
.gc-body{padding:12px 8px 2px}
.gc-foot{padding:8px}
.gc-name:not(.gc-name--sr){font-size:17px;letter-spacing:-.01em}
/* ── 2 · NO SPINE ─────────────────────────────────────────────────────────
The 3px rail down the left edge was v9.79's answer to "search mein sab ek
jaisa lag raha" and it worked, but it cannot survive the inset frame: it
either sits on the card's own padding, where it reads as a rendering
fault, or it hugs a picture it is no longer touching. The colour is still
spent in three places — the chip, the foot's number, and the hover ring
below — so nothing that rail was carrying is lost. */
.gc::before{display:none}
/* ── 3 · THE FACT PANEL ───────────────────────────────────────────────────
The facts were two grey lines floating under the description, at the same
weight as it; they are the only hard numbers on the card and they read as
an afterthought. A tinted inset block makes them a THING. */
.gc-facts{background:var(--sub);border:1px solid var(--line);border-radius:11px;
padding:7px 10px;margin-top:9px;gap:14px;row-gap:4px}
.gc-facts span{font-weight:500;color:var(--tx-2)}
.gc-facts .bi{color:var(--tone,var(--brand));opacity:.75}
/* ── 4 · THE ACTION ───────────────────────────────────────────────────────
Filled, in the sector's own ink, and as tall as the foot. A pale tinted
pill beside a bold price is the smaller of the two things on a row where
it is the only thing you can press. */
.gc .gc-foot .btn,.gc .gc-foot .btn-soft{background:var(--tone,var(--brand));border-color:var(--tone,var(--brand));
color:#fff;border-radius:11px;min-height:38px;padding:0 15px;font-weight:600}
.gc .gc-foot .btn-soft:hover,.gc .gc-foot .btn:hover{background:var(--tone,var(--brand));border-color:var(--tone,var(--brand));
color:#fff;filter:brightness(.92)}
.gc .gc-foot .btn .bi{opacity:.9}
/* ── 5 · THE HOVER ────────────────────────────────────────────────────────
A lift, a ring in the sector's colour, and the picture growing very
slightly inside its frame — which is only possible BECAUSE of the frame.
Reduced motion keeps the ring and drops the movement.
v9.89 — behind `hover: hover`. A phone has no hover, so :hover fired on
TAP and stayed on: the client photographed a card still wearing the ring
after their finger had left it, which reads as "this one is selected"
when nothing is. Same rules, only where there is a pointer that can
actually leave. */
@media (hover:hover) and (pointer:fine){
.gc:hover{transform:translateY(-3px);border-color:transparent;
box-shadow:0 0 0 1.5px var(--tone,var(--brand)),0 2px 4px rgba(13,27,24,.06),0 20px 40px -22px rgba(13,27,24,.45)}
/* only the FRAME's picture zooms — never the logo badge or a round
portrait, which are already cropped to a shape of their own. */
/* v10.00 — the --cz composition v9.97 added is gone with the zoom itself.
Back to the plain hover lift these two lines were before it. */
.gc-head > img,.gc-head > .gc-clip > img{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.gc:hover .gc-head > img,.gc:hover .gc-head > .gc-clip > img{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
.gc,.gc-head > img,.gc-head > .gc-clip > img{transition:none}
.gc:hover{transform:none}
.gc:hover .gc-head > img,.gc:hover .gc-head > .gc-clip > img{transform:none}
}
/* ── 6 · THE STATES ───────────────────────────────────────────────────────
`is-selected` is the compare/pick state the search page already toggles a
class for; the skeleton is what a grid draws while an AJAX search is in
flight, so the page does not collapse to nothing and jump back. Both are
the SAME shell — same radius, same padding, same height — or the redraw
is a flicker of a different layout. */
/* is-selected is defined in the v9.87 block at the foot of this file. It
was declared here in the sector's own ink and never applied by anything;
when it was wired it turned out to mean "in your enquiry", which is not a
thing the sector's colour can say — that ink already means "what kind of
thing is this" three times on the same card. One declaration, in the
release that gave it a meaning. */
.gc-sk{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:8px;
display:flex;flex-direction:column;gap:9px;overflow:hidden}
.gc-sk i,.gc-sk b,.gc-sk u{display:block;border-radius:8px;background:var(--sub);
background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
background-size:180px 100%;background-repeat:no-repeat;animation:gcsk 1.1s linear infinite}
.gc-sk i{flex:1 1 auto;min-height:130px;border-radius:15px}
.gc-sk b{height:13px;width:78%;margin:3px 0 0 0}
.gc-sk u{height:11px;width:52%}
.gc-sk::after{content:"";display:block;height:34px;border-radius:11px;background:var(--sub)}
@media (prefers-reduced-motion:reduce){.gc-sk i,.gc-sk b,.gc-sk u{animation:none}
}
.ggrid:not(.ggrid--list) .gc-sk{height:var(--cell)}
/* ── 7 · LAYOUT 7 · PROFILE ───────────────────────────────────────────────
A centred portrait, the name under it, and the facts as a key-and-value
list. The three engines whose subject is a PERSON asked for this and the
Portrait layout could not give it: Portrait leans the face on the left
edge with one line of text beside it, which is a business card; this is a
profile. The head keeps the shell's height, so a Profile card in a row of
Photo cards still lines up. */
.gc-head.stat{display:grid;place-items:center;background:var(--wash,var(--sub));overflow:hidden}
.gc-head.stat .pf{width:96px;height:96px;border-radius:50%;background:var(--surface);
border:3px solid var(--surface);box-shadow:var(--sh-2);display:grid;place-items:center;
font:700 26px var(--font-h);color:var(--tone,var(--brand));overflow:hidden;flex:none;position:relative;z-index:2}
.gc-head.stat .pf img{width:100%;height:100%;object-fit:cover}
[data-head="stat"] .gc-body{text-align:center;align-items:center;padding-top:11px}
[data-head="stat"] .gc-name{justify-content:center}
[data-head="stat"] .gc-sub{-webkit-line-clamp:2}
.gc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;margin:10px 0 0;
width:100%;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.gc-stats > div{background:var(--sub);padding:7px 6px;min-width:0}
.gc-stats dt{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-stats dd{margin:2px 0 0;font:600 13px var(--font-h);color:var(--tx);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggrid .gc[data-head="stat"] > .gc-head{--canvas:132px}
/* in a row the portrait is the thumbnail, and the list goes back to a line */
.gc--line .gc-head.stat .pf{width:64px;height:64px;border-width:2px;font-size:18px}
.gc--line [data-head="stat"] .gc-body,.gc--line .gc-body{text-align:left;align-items:stretch}
.gc--line .gc-stats{display:flex;background:transparent;border:0;border-radius:0;gap:12px;margin-top:5px}
.gc--line .gc-stats > div{background:transparent;padding:0;display:flex;gap:5px;align-items:baseline}
.gc--line .gc-stats dt{font-size:10px}
.gc--line .gc-stats dd{font-size:12.5px;font-weight:600}
/* a portrait head in a row: centred in the 104px thumbnail, not leaning */
.gc--line > .gc-head.person{justify-content:center;align-items:center;padding:0}
.gc--line > .gc-head.person .pt{display:none}
.gc--line > .gc-head.person .pf{width:64px;height:64px;margin:0}
.gc--line > .gc-head.stat{padding:0}
/* ── 8 · THE DENSITY AXIS ─────────────────────────────────────────────────
One component at four sizes. Every rule here HIDES something; none of
them re-arranges anything, which is what keeps the four from drifting
into four cards. `full` has no class at all — a card that predates this
release is a Full card, and renders as it always did.
Which size a surface gets is SectorCard::SURFACES (the surface decides,
the sector may override); the component resolves it and writes the class. */
.gc--d-compact .gc-sub,.gc--d-compact .gc-facts,.gc--d-compact .gc-stats,
.gc--d-compact .gc-chips,.gc--d-compact .gc-hit{display:none}
.gc--d-compact .gc-name{font-size:15.5px}
.gc--d-compact .gc-body{padding-bottom:0}
.ggrid:not(.ggrid--list) .gc--d-compact{height:auto}
.gc--d-tile .gc-sub,.gc--d-tile .gc-facts,.gc--d-tile .gc-stats,.gc--d-tile .gc-kick,
.gc--d-tile .gc-chips,.gc--d-tile .gc-hit,.gc--d-tile .gc-strip,.gc--d-tile .gc-flags{display:none}
.gc--d-tile .gc-foot .btn{display:none}
.gc--d-tile .gc-name{font-size:14px}
.gc--d-tile .gc-name a{-webkit-line-clamp:2}
.gc--d-tile .gc-body{padding:10px 6px 0}
.gc--d-tile .gc-foot{padding:6px 6px 4px}
.gc--d-tile .gc-price{font-size:14.5px}
.ggrid:not(.ggrid--list) .gc--d-tile{height:auto}
.gc--d-tile > .gc-head{aspect-ratio:1/1}
.ggrid:not(.ggrid--list) .gc--d-tile > .gc-head{flex:0 0 auto;aspect-ratio:1/1;min-height:0}
/* Row: the Line layout by another name. It already exists — this only says
that a Row-density card in a plain grid is one per line, which .gc--line
otherwise only knows how to be inside .ggrid--list. */
.ggrid:not(.ggrid--list):has(.gc--d-row){grid-template-columns:minmax(0,1fr)}
.ggrid:not(.ggrid--list) .gc--d-row{height:auto;min-height:112px}
.gc--d-row .gc-facts{background:transparent;border:0;padding:0;margin-top:4px}
/* ── 9 · THE PICTURE ──────────────────────────────────────────────────────
Two rules the client asked for by name: "card do not handle the cover
smartly".
TOP-WEIGHTED CROP. A 16:9 window on a portrait photograph cut the head
off — every shopfront sign, every face. Faces and signs live in the top
third of a photograph, so the window sits there instead of dead centre.
THE BLURRED FIT. When the picture's shape is far from the frame's — a
tall phone photograph, a wide banner — cropping it either way throws most
of it away. Those get `object-fit:contain` over a blurred copy of
themselves, so the whole picture is visible and the frame is still full.
WHICH pictures those are is measured in the browser from the file's own
dimensions (assets/js/app.js), never guessed here. */
.gc-head > img,.gc-head > .gc-clip > img{object-position:center 26%}
.gc-head.stat .pf img,.gc-head.person .pf img,.gc-logo img{object-position:center center}
.gc-fit{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0}
.gc-fit img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;
filter:blur(18px) saturate(1.15) brightness(.92);transform:none}
.gc-head.is-fit > img,.gc-head.is-fit .gc-clip > img{object-fit:contain;object-position:center center;z-index:1}
.gc:hover .gc-head.is-fit > img,.gc:hover .gc-head.is-fit .gc-clip > img{transform:none}
/* The Panel layout's own 5px rail is the one piece of colour that survives
the spine's removal, because a Panel head has no picture to carry the
sector's identity. It squares off the frame's top-left corner if left
alone, so it takes the frame's radius. */
.gc-head.type::before{border-radius:var(--rf) 0 0 var(--rf)}
/* Inside the list grid the Row density is what the grid already does, and
the grid's own measurements are the ones that were designed for it — a
220px thumbnail, not the 104px one a card in a plain grid gets. So the
density adds its meaning and takes none of the list view's away. */
.ggrid--list .gc--d-row.gc--line > .gc-head{width:220px}
.ggrid--list .gc--d-row .gc-body{padding:14px 16px}
.ggrid--list .gc--d-row .gc-foot{padding:12px 16px}
/* The row layout's status pill is flush with the bottom-left of the
thumbnail, and the thumbnail now has a 15px corner it did not have before
the inset frame — so the pill takes that corner rather than spilling over
the curve. Measured on the phone's search grid at 390px. */
.gc--line .gc-strip .gtag,
.ggrid[data-phone="row"] .gc-strip .gtag{border-radius:0 8px 0 var(--rf,15px)}
/* ══════════════════════════════════════════════════════════════════════════
v9.87 — THE TWO STATES, WIRED
──────────────────────────────────────────────────────────────────────────
v9.86 built both of these and drew neither: the rules existed and nothing
on the site ever put the class on. That is vocabulary, not behaviour, and
this release is the behaviour.
· is-selected now means "this thing is in your enquiry" — the real
selection this site has. (v9.86's note called it a compare state; there
is no compare feature here. Inventing one to justify a rule would have
been the wrong way round.) assets/js/cart.js puts it on.
· the skeleton now draws on "Show more", where the page below the button
used to not move at all. NOT on the full redraw, where the grid keeps
its results at 45% and stays readable — a filter change is a comparison,
and you cannot compare with nothing.
══════════════════════════════════════════════════════════════════════════ */
/* The ring says "in your enquiry", so it is the OK green, not the sector's
colour — the sector's ink already means "what kind of thing is this" on
this very card (the chip, the price, the button) and a second meaning on
the same hue is a colour that says nothing. */
.gc.is-selected{border-color:transparent;
box-shadow:0 0 0 2px var(--ok),0 10px 26px -18px rgba(13,27,24,.30)}
.gc.is-selected:hover{box-shadow:0 0 0 2px var(--ok),0 2px 4px rgba(13,27,24,.06),0 20px 40px -22px rgba(13,27,24,.45)}
/* a small tick in the corner, so the state survives a monochrome screen and
does not rest on colour alone */
.gc.is-selected::after{content:"\F26E";font-family:"bootstrap-icons";position:absolute;
right:14px;top:14px;z-index:6;width:22px;height:22px;border-radius:50%;
background:var(--ok);color:#fff;font-size:11px;display:grid;place-items:center;
box-shadow:0 2px 6px rgba(13,27,24,.2)}
/* the head's own top-right furniture steps aside for it */
.gc.is-selected .gc-save{margin-right:26px}
/* The skeleton stands in a grid cell exactly as a card does, so the page
grows by the right amount once and does not jump a second time when the
real cards arrive. */
.gc-sk-wrap{display:flex;min-width:0}
.gc-sk-wrap > .gc-sk{flex:1}
/* in the list view the skeleton is a row, like the cards it stands in for */
/* 124px is what a real row measures in this view, so the page does not
step by 8px when the cards land. */
.ggrid--list .gc-sk{flex-direction:row;align-items:stretch;gap:14px;height:auto;min-height:124px}
.ggrid--list .gc-sk i{flex:0 0 220px;min-height:0}
.ggrid--list .gc-sk b{align-self:flex-start;margin-top:14px}
.ggrid--list .gc-sk::after{align-self:center;width:120px;flex:none}
.ggrid:not(.ggrid--list) .gc-head.person{align-items:center}
.ggrid:not(.ggrid--list) .gc[data-head="person"] .gc-head.person:not(.is-fit) .pf{width:88px;height:88px;font-size:24px;border-radius:22px}
@media (max-width:991.98px){
.ggrid:not(.ggrid--list) .gc[data-head="person"] .gc-head.person:not(.is-fit) .pf{width:64px;height:64px;font-size:18px;border-radius:16px}
}
/* v9.93 — and the one thing moving professional to two-up on a phone broke.
Measured after the change: a Portrait head in a 166px tile drew its
portrait AND its text column, and the text column got 60px — "Wap…",
"Doc… Consulta dermato — ski…". Three clipped fragments where one
readable card should be.
The text beside the portrait is the person's role and area, and BOTH are
already printed in the card body under the name. So in a phone tile the
head is the portrait alone, centred, at the size the band can carry —
which is what the Profile layout (head "stat") does on every surface and
what the client's own reference sheets show. Only the phone tile: the
desktop grid and the row keep the pair, where there is room to read it. */
@media (max-width:575.98px){
.ggrid[data-phone="tile"]:not(.ggrid--list) .gc-head.person{justify-content:center;padding:8px}
.ggrid[data-phone="tile"]:not(.ggrid--list) .gc-head.person .pt{display:none}
.ggrid[data-phone="tile"]:not(.ggrid--list) .gc[data-head="person"] .gc-head.person:not(.is-fit) .pf{width:72px;height:72px;font-size:20px;border-radius:18px}
}
/* ══════════════════════════════════════════════════════════════════════════
v9.96 — THE CARD'S TEXT WAS BEING SHAVED, NOT WRAPPED
──────────────────────────────────────────────────────────────────────────
The client's photograph: a two-up phone grid where one card's category
line is cut through the middle of its letters, its title sits on top of
that line, and the description under it shows only the top half of every
letter — "Citysports gym" with the g and the y sliced off.
It is not a wrapping bug and it is not a font bug. Measured in a real
browser at 390px, on the live grid:
.gc-sub line-height 18.60px box 17.00px → 1.60px shaved
.gc-kick line-height 17.82px box 16.00px → 1.82px shaved
Two separate causes, and both had to go.
── 1. The body squeezed its own lines ──
`.gc-body` is `display:flex; flex-direction:column` with a fixed-height
card above it (v9.89's one-height-per-grid contract). A flex item's
default is `flex-shrink:1`, and in a column that means the MAIN axis —
so when the body's content came to a few pixels more than the space
(a kick, a two-line title AND a description is the case that does it),
the browser did exactly what it was told and took those pixels off the
HEIGHT OF EVERY LINE. A line box shorter than its own text does not wrap
and does not ellipsise: it clips, through the glyphs, which is what the
client photographed.
A line of text is not a spring. `flex:none` on the body's children.
── 2. The clamp box did not match the line it clamped ──
`.gc-sub` sets `-webkit-line-clamp:1` but no line-height, so it inherited
a RATIO (1.55) while the clamp resolved against the line box the browser
actually laid out (~1.42) — 17px of window for 18.6px of line. Every
descender in it lost its tail even before the squeeze above. The two
text blocks that carry a clamp now carry an explicit line-height, so the
window and the line are the same number by construction.
── 3. And then it has to FIT ──
With nothing shrinking any more, the worst case (kick + two-line title +
description) is a few pixels taller than the phone tile's body. Those
pixels come out of the tile's own padding and gap, where they cost
nothing, rather than out of the words. Measured after: no element on any
card at 390px is shorter than the line it draws, and the card is still
the same 292px it has been since v9.89.
══════════════════════════════════════════════════════════════════════════ */
.gc-body > *{flex:0 0 auto}
.gc-kick{line-height:1.5}
.gc-sub{line-height:1.42}
@media (max-width:575.98px){
/* the five pixels the worst case needs, taken from the padding */
.ggrid[data-phone="tile"]:not(.ggrid--list) .gc:not(.gc--lead) > .gc-body{padding:9px 8px 2px;gap:2px}
/* v10.07 — and the room for the badge, at the specificity this block uses.
The badge hangs 16px below the picture; without this the phone tile put
it straight on the kick line (measured: 34x4px of overlap). */
.ggrid[data-phone="tile"]:not(.ggrid--list) .gc--badge:not(.gc--lead) > .gc-body{padding-top:24px}
}
/* ── v10.42 · card THEME — how much of the sector's colour a card wears ──
The amount was never a choice. A card has spent the sector's colour in
three places since v9.79 — the chip, the price, the button — which is
right on a mixed search page, where six sectors share one grid and a loud
card shouts down its neighbours, and wrong on a sector's OWN archive,
where every card is that sector and the colour is the page's identity.
Four amounts, one axis, ONE shell: same box, same border, same radius,
same height in every one of them. Only the colour changes, which is why
this is four short rules and no second component. `accent` emits no
attribute at all, so a card that has not chosen renders byte-for-byte as
it did before this release. */
.gc[data-card-theme="tinted"]{background:var(--wash,var(--surface));
border-color:color-mix(in srgb,var(--tone,var(--brand)) 18%,var(--line))}
.gc[data-card-theme="tinted"] .gc-id{background:rgba(255,255,255,.94)}
/* The bar is INSET and pill-shaped, not edge-to-edge: the card's corners are
22px round and a full-width bar cuts straight across them, which reads as a
line floating above the card rather than as part of it. Photographed at
1280x1200 before the inset. */
.gc[data-card-theme="banded"]{padding-top:14px}
.gc[data-card-theme="banded"]::after{content:"";position:absolute;left:14px;right:14px;top:5px;height:4px;
background:var(--tone,var(--brand));border-radius:999px;z-index:6;pointer-events:none}
/* Plain does not mean colourless markup — the chip still says WHAT this is,
in ink rather than in hue, so a mixed row keeps its labels. */
.gc[data-card-theme="plain"]{--tone:var(--tx-2);--wash:var(--sub)}
.gc[data-card-theme="plain"] .gc-id{color:var(--tx);background:rgba(255,255,255,.96)}
.gc[data-card-theme="plain"] .gc-id > i{background:var(--tx-2)}