/* ══════════════════════════════════════════════════════════════════════
article.css — everything INSIDE an article, and nothing else.
══════════════════════════════════════════════════════════════════════
WHY THIS FILE EXISTS
--------------------
Reported with a screenshot of a listing block coming apart inside the
editor:
"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 takey hum blog ke best standard ko meet
karein — saare blocks aise e bikhre re editor mein, is ka kya
solution e"
The diagnosis, measured rather than guessed: every rule that styles the
inside of an article lived in assets/css/gdir.css, under
`.bl60 .article-body …`. gdir.css is the PUBLIC site's stylesheet and is
not loaded inside the admin console — so the editor's writing surface
had no rule for a callout, a table, a figure, a rating, a listing card
or even an h4. The markup being saved was correct the whole time; there
was simply nothing to draw it with on that page.
v10.93 made this worse before it made it better: the new toolbar can
produce tables, figures, code blocks and h4s, and every one of them
arrived in an editor that had never been told what they look like.
THE RULE THIS FILE ENFORCES
---------------------------
There is ONE stylesheet for the inside of an article, and BOTH places
load it:
· the public article (views/layout.php, beside gdir.css)
· the editor surface (views/components/blog-editor.php)
and the editor's surface carries the same class chain the public page
gives the body — `.bl60`, the reader's chosen blog style, and
`.article-body` — so the selectors match in both places without a single
rule being duplicated for the editor.
That is what makes the editor honest: what a writer sees IS what the
page will render, because the same file drew both. A new block gets its
CSS written here once and appears, styled, on both sides.
WHAT BELONGS HERE, AND WHAT DOES NOT
------------------------------------
Here: the prose scale (p, h2–h4, lists, quote, table, figure, code,
hr, sup), every `.bb-*` block a writer can insert, the two blog
looks (.bls-editorial / .bls-cards), the format renderers
(listicle, guide, gallery), the @mention and embed styles, and
the author section under the article.
Not here: the page AROUND the article — the header, the breadcrumb, the
title band, the byline, the side rail, the comment form, the
share row. Those are gdir.css's, because the editor does not draw
them and never should.
These rules were MOVED from gdir.css, not rewritten: the public article
renders byte-identically before and after, which is how the extraction
was checked.
══════════════════════════════════════════════════════════════════════ */
.bl60 .article-body{font-size:16px;line-height:1.8;color:var(--tx-2);max-width:68ch}
.bl60 .article-body p{margin:0 0 1.1em}
.bl60 .article-body img{max-width:100%;border-radius:var(--r);margin:1.2em 0;height:auto}
.bl60 .article-body h2,.bl60 .article-body h3{margin:1.6em 0 .6em;color:var(--tx);font-weight:700}
.bl60 .article-body h2{font-size:24px}.bl60 .article-body h3{font-size:19px}
.bl60 .article-body blockquote{border-left:3px solid var(--brand);padding:.4em 1em;color:var(--tx-2);margin:1.2em 0;font-style:italic}
.bl60 .article-body ul,.bl60 .article-body ol{padding-left:1.4em;margin:0 0 1.1em}
.bl60 .article-body a{color:var(--brand-ink)}
/* ══════════════════════════════════════════════════════════════════════
v10.94 · THE ARTICLE'S OWN SCALE — everything the editor can produce
══════════════════════════════════════════════════════════════════════
Reported as "secitons ko sahi treat e nai kiya … no formating ui ux at
all". Two separate causes, and this block is the second one.
The first was the editor: it had ten buttons and could not make a
heading below h3, a table, a figure, a code block or an aligned
paragraph at all. v10.93 fixed that — and immediately created this
problem, because the six rules above are the WHOLE typography of an
article body, and a writer who now inserts an or a plain
gets browser default styling in the middle of a designed page.
So: one scale, covering every tag core/RichText.php allows, sized off
the same 16px/1.8 base the paragraphs use. `.bb-*` block markup keeps
its own richer rules further down this file — those are components; this
is the prose around them. Both blog looks (.bls-editorial and
.bls-cards) inherit from here and override only what makes them
different, which is what keeps switching between them safe on a live
site with articles already published.
══════════════════════════════════════════════════════════════════════ */
/* Headings. h4 was simply absent, so a writer using it got 1em bold text
indistinguishable from a paragraph. The ratios step down deliberately:
24 / 19 / 16.5 against a 16px body, so three levels are three visibly
different things rather than three sizes of nearly the same thing. */
.bl60 .article-body h4{font-size:16.5px;margin:1.5em 0 .5em;color:var(--tx);font-weight:700;letter-spacing:-.005em}
.bl60 .article-body h2,.bl60 .article-body h3,.bl60 .article-body h4{text-wrap:balance;scroll-margin-top:78px}
/* scroll-margin-top so the "On this page" links do not land a heading
underneath the sticky header — measured at 78px. */
/* A heading immediately after another heading gets no double gap. */
.bl60 .article-body h2 + h3,.bl60 .article-body h3 + h4{margin-top:.9em}
/* Tables the toolbar inserts are bare , not .bb-table. They get the
same treatment, and the same sideways scroll on a phone — a 3-column
comparison must never be what makes the page itself scroll. */
.bl60 .article-body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:1.6em 0;display:block;overflow-x:auto}
.bl60 .article-body table th,.bl60 .article-body table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl60 .article-body table thead th{background:var(--sub);font:600 12.2px/1.4 var(--font-h);
text-transform:uppercase;letter-spacing:.05em;color:var(--tx);white-space:nowrap}
.bl60 .article-body table tbody tr:last-child td{border-bottom:0}
/* Figure + caption, from the image button. */
.bl60 .article-body figure{margin:1.6em 0}
.bl60 .article-body figure img{width:100%;height:auto;border-radius:var(--r);display:block;margin:0}
.bl60 .article-body figcaption{margin-top:7px;font-size:12.8px;line-height:1.55;color:var(--mute);text-align:center}
/* Code, inline and block. Monospace at 0.88em so it sits ON the baseline
of the prose rather than towering over it. */
.bl60 .article-body code{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.88em;background:var(--sub);padding:1px 5px;border-radius:4px}
.bl60 .article-body pre{background:var(--sub);border:1px solid var(--line);border-radius:var(--r-sm);
padding:14px 16px;margin:1.6em 0;overflow-x:auto;font-size:13.6px;line-height:1.7}
.bl60 .article-body pre code{background:none;padding:0;font-size:inherit}
/* The divider, superscripts, and the alignment the toolbar writes as an
inline style — listed here so the intent is documented, not because the
browser needs telling. */
.bl60 .article-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.bl60 .article-body sup,.bl60 .article-body sub{font-size:.72em;line-height:0}
.bl60 .article-body [style*="text-align:center"]{margin-left:auto;margin-right:auto}
/* A list inside a list, and a list item holding paragraphs — both arrive
from a paste and both looked broken. */
.bl60 .article-body li{margin-bottom:.4em}
.bl60 .article-body li > ul,.bl60 .article-body li > ol{margin:.4em 0 .2em}
.bl60 .article-body li > p{margin:0 0 .5em}
/* Prose gets a measure; tables, figures and code are allowed past it,
because a 68ch cap on a comparison table is what makes the columns
unreadable. */
.bl60 .article-body > table,.bl60 .article-body > figure,.bl60 .article-body > pre{max-width:none}
/* ── the author's own section, under the article ────────────────────────
v10.94. The author used to be a 312x60 card at the top of the rail AND
a byline under the title — the same person twice, and nothing at the end
of the article where a reader actually asks who wrote this.
Deliberately NOT a card: no border on all four sides, no shadow. It is
the closing movement of the article, so it takes a rule above it and a
tint, the way a printed magazine ends a piece. */
.bl60 .au-box{margin:2.6em 0 0;padding:22px 0 0;border-top:2px solid var(--tx)}
.bl60 .au-head{display:flex;gap:16px;align-items:flex-start}
/* The avatar component emits ONLY its inner content — an ![]()
, or a bare
initial with no markup of its own — so every wrapper sizes and styles
it. Missing that, the box drew a 64px empty circle: caught by looking at
the rendered page, not at the partial. */
.bl60 .au-av{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;
display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-ink));
color:#fff;font:750 24px/1 var(--font-h);text-transform:uppercase}
.bl60 .au-av img{width:100%;height:100%;object-fit:cover;display:block}
.bl60 .au-id{min-width:0;flex:1}
.bl60 .au-kicker{display:block;font:700 10.5px/1 var(--font-h);letter-spacing:.13em;
text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.bl60 .au-name{font-family:var(--font-h);font-size:19px;font-weight:700;line-height:1.2;margin:0 0 3px}
.bl60 .au-name a{color:var(--tx);text-decoration:none}
.bl60 .au-name a:hover{color:var(--brand-ink);text-decoration:underline}
.bl60 .au-role{margin:0 0 8px;font-size:12.8px;color:var(--mute)}
.bl60 .au-bio{margin:0 0 12px;font-size:14.5px;line-height:1.62;color:var(--tx-2);max-width:58ch}
.bl60 .au-acts{display:flex;gap:8px;flex-wrap:wrap}
.bl60 .au-act{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);
padding:6px 13px;font-size:12.8px;font-weight:650;color:var(--tx);text-decoration:none;white-space:nowrap}
.bl60 .au-act:hover{border-color:var(--brand);color:var(--brand-ink)}
.bl60 .au-act-pri{background:var(--brand);border-color:var(--brand);color:#fff}
.bl60 .au-act-pri:hover{color:#fff;filter:brightness(1.07)}
.bl60 .au-stats{display:flex;gap:28px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bl60 .au-stat b{display:block;font-family:var(--font-h);font-size:17px;font-weight:750;line-height:1;
color:var(--tx);font-variant-numeric:tabular-nums}
.bl60 .au-stat span{display:block;margin-top:3px;font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--mute)}
@media (max-width:600px){
.bl60 .au-head{gap:12px}
.bl60 .au-av{width:52px;height:52px}
.bl60 .au-name{font-size:17.5px}
.bl60 .au-stats{gap:20px}
.bl60 .au-act{flex:1;justify-content:center}
}
.bl60 .gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:var(--s5) 0}
.bl60 .gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.bl60 .pf-listicle{list-style:none;counter-reset:li;padding:0;margin:0 0 1.2em}
.bl60 .pf-listicle li{position:relative;padding-left:42px;margin-bottom:.8em}
.bl60 .pf-listicle li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px;background:var(--brand-tint);color:var(--brand-ink);display:grid;place-items:center;font:700 13px var(--font-h)}
.bl60 .pf-guide-step{display:flex;gap:14px;margin-bottom:1em}
.bl60 .pf-guide-num{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font:700 13px var(--font-h);flex:none}
.bl60 .blog-embed{margin:1.4em 0}
/* v10.50 — an @mention inside body copy. It has to read as a LINK without
reading as a button: the article's own link colour, a faint underline
that firms up on hover, and never a pill, because a pill in the middle of
a sentence breaks the line rhythm and makes prose look like a toolbar. */
.bl60 .blog-mention{color:var(--brand-ink);font-weight:600;text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--brand-ink) 30%,transparent);
white-space:normal;overflow-wrap:anywhere}
.bl60 .blog-mention:hover{border-bottom-color:var(--brand-ink)}
@media (max-width:720px){
.bl60 .article-body{font-size:15.5px}
.bl60 .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ══════════════════════════════════════════════════════════════════════
v10.82 · BODY BLOCKS — what a writer can insert inside an article
══════════════════════════════════════════════════════════════════════
Asked for as "editor be empower karo very basic": before this the whole
editor was nine buttons and there was no way to put a table, an embed,
a callout, a page break, a card or a score into an article.
It lives HERE, under .bl60, because that is the blog's real stylesheet:
blog-editorial.css was retired at v9.62 ("blog still using its own kind
of css i do not need that") and views/layout.php no longer links it —
this block was written into that file first and rendered as plain
unstyled text on a real post, which is how the mistake was caught.
Every colour comes from the same --tx/--line/--brand tokens the rest of
.bl60 uses, so the blocks follow light and dark with the page instead of
carrying their own palette.
══════════════════════════════════════════════════════════════════════ */
.bl60 .article-body .bb-figure{margin:1.6em 0}
.bl60 .article-body .bb-figure img{width:100%;height:auto;border-radius:var(--r);display:block;margin:0}
.bl60 .article-body .bb-figure figcaption{margin-top:7px;font-size:12.8px;color:var(--mute);text-align:center}
/* A table scrolls sideways in its own box on a phone — it never squashes
the article's column, which is what every hand-pasted table did. */
.bl60 .article-body .bb-table{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:var(--r-sm)}
.bl60 .article-body .bb-table table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px;margin:0}
.bl60 .article-body .bb-table th,
.bl60 .article-body .bb-table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl60 .article-body .bb-table thead th{background:var(--sub);font:600 12.2px/1.4 var(--font-h);
letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.bl60 .article-body .bb-table tbody tr:last-child td{border-bottom:0}
.bl60 .article-body .bb-callout{margin:1.6em 0;padding:13px 16px;border-radius:var(--r-sm);
background:var(--brand-tint);border-left:3px solid var(--brand-ink)}
.bl60 .article-body .bb-callout strong{display:block;margin-bottom:3px;color:var(--brand-ink);font-family:var(--font-h)}
.bl60 .article-body .bb-callout p{margin:0}
.bl60 .article-body .bb-proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.6em 0}
.bl60 .article-body .bb-proscons>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface)}
.bl60 .article-body .bb-pros{border-top:3px solid var(--ok)}
.bl60 .article-body .bb-cons{border-top:3px solid var(--no)}
.bl60 .article-body .bb-proscons strong{font-family:var(--font-h);font-size:13.6px}
.bl60 .article-body .bb-proscons ul{margin:6px 0 0;padding-left:18px}
.bl60 .article-body .bb-proscons li{margin:3px 0}
/* ── v10.87 · the Numbered item block ──────────────────────────────────
Asked for as the thing a listicle never had: "7 best naashte" used to be
prose with numbers typed by hand, so the saved HTML of a listicle and of
a plain article were identical.
The NUMBER IS A CSS COUNTER, which is the whole reason this is worth
having: a writer who moves item 6 above item 2 does not renumber
anything, and a writer who deletes one does not leave a gap. The counter
is reset on .article-body rather than on a wrapper, because the items
are siblings of the paragraphs around them — a writer can put a
paragraph between two items and the numbering carries on.
Picture beside the text on a wide screen, above it on a phone. The image
is given its own aspect box so a portrait photo cannot make one item six
times the height of its neighbours. */
.bl60 .article-body{counter-reset:bbitem}
.bl60 .article-body .bb-item{counter-increment:bbitem;display:grid;grid-template-columns:148px 1fr;gap:14px;
align-items:start;margin:1.6em 0;padding:14px 16px 14px 14px;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--surface);position:relative}
.bl60 .article-body .bb-item .bb-item-pic{margin:0;border-radius:var(--r-sm);overflow:hidden;
aspect-ratio:4/3;background:var(--surface-2);max-width:100%}
.bl60 .article-body .bb-item .bb-item-pic img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
/* An item with no picture yet must not leave a grey hole in the article. */
.bl60 .article-body .bb-item .bb-item-pic img[src=""],
.bl60 .article-body .bb-item .bb-item-pic img:not([src]){display:none}
.bl60 .article-body .bb-item .bb-item-txt{min-width:0}
.bl60 .article-body .bb-item .bb-item-h{margin:0 0 4px;font-family:var(--font-h);font-size:17.4px;line-height:1.3;
display:flex;gap:9px;align-items:baseline}
.bl60 .article-body .bb-item .bb-item-h:before{content:counter(bbitem);flex:none;
font-size:13.4px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;
min-width:1.4em;text-align:right;opacity:.85}
.bl60 .article-body .bb-item p{margin:0 0 5px}
.bl60 .article-body .bb-item .bb-item-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
margin:6px 0 0;font-size:13.4px}
.bl60 .article-body .bb-item .bb-item-score{font-family:var(--font-h);font-weight:800;font-size:13.2px;
background:var(--primary);color:#fff;border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
/* An empty score chip is left over from the inserted snippet, not a zero. */
.bl60 .article-body .bb-item .bb-item-score:empty{display:none}
.bl60 .article-body .bb-item .bb-item-meta a[href=""]{pointer-events:none;color:var(--tx-mute);text-decoration:none}
@media (max-width:560px){
.bl60 .article-body .bb-item{grid-template-columns:1fr;padding:12px 13px}
.bl60 .article-body .bb-item .bb-item-pic{aspect-ratio:16/9}
}
.bl60 .article-body .bb-faq{margin:1em 0;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface)}
.bl60 .article-body .bb-faq-q{font-weight:700;font-size:15.2px;color:var(--tx)}
.bl60 .article-body .bb-faq-a{margin-top:4px}
.bl60 .article-body .bb-embed{margin:1.6em 0}
.bl60 .article-body .bb-embed audio{width:100%}
.bl60 .article-body .bb-embed iframe{width:100%;border:0;border-radius:var(--r-sm)}
.bl60 .article-body .bb-embed .ratio iframe{border-radius:var(--r)}
.bl60 .article-body .bb-embed-link{word-break:break-all}
/* A score reads as a number first — that is what a reader scans for. */
.bl60 .bb-rating{display:flex;align-items:center;gap:14px;margin:1.3em 0;
border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 15px;background:var(--surface)}
.bl60 .bb-rating-num{font:800 28px/1 var(--font-h);font-variant-numeric:tabular-nums;color:var(--brand-ink);flex:none}
.bl60 .bb-rating-num small{font-size:13px;font-weight:600;color:var(--mute)}
.bl60 .bb-rating-body{flex:1;min-width:0}
.bl60 .bb-rating-label{font-weight:600;font-size:14.4px;color:var(--tx);margin-bottom:7px}
.bl60 .bb-rating-bar{height:7px;border-radius:999px;background:var(--sub);overflow:hidden}
.bl60 .bb-rating-bar span{display:block;height:100%;border-radius:999px;background:var(--brand)}
/* Top rated's winner box: the same rating row, lifted and labelled. */
.bl60 .bb-winner{margin:0 0 var(--s6);border:1px solid var(--brand-ink);border-radius:var(--r);
padding:12px 14px 2px;background:var(--brand-tint)}
.bl60 .bb-winner-t{font:700 11.4px/1.5 var(--font-h);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.bl60 .bb-winner .bb-rating{margin:9px 0 12px}
/* A long read's 1 · 2 · 3. */
.bl60 .bb-pages{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:var(--s6) 0 var(--s4)}
.bl60 .bb-page,.bl60 .bb-page-prev,.bl60 .bb-page-next{display:inline-flex;align-items:center;justify-content:center;
min-width:36px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--surface);color:var(--tx);text-decoration:none;font:600 13.6px/1 var(--font-h)}
.bl60 .bb-page:hover,.bl60 .bb-page-prev:hover,.bl60 .bb-page-next:hover{border-color:var(--tx);color:var(--tx)}
.bl60 .bb-page.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bl60 .bb-page-prev{margin-right:auto}
.bl60 .bb-page-next{margin-left:auto}
/* Must visit is built from real listing cards, so it gets the grid the
format is for rather than one card per line. */
.bl60 .blog-format-must_visit .blog-embed-post{margin:1.2em 0}
@media (min-width:760px){
.bl60 .blog-format-must_visit .blog-embed-post{display:inline-block;width:calc(50% - 7px);vertical-align:top;margin:7px 2px}
}
@media (max-width:720px){
.bl60 .article-body .bb-proscons{grid-template-columns:minmax(0,1fr)}
.bl60 .bb-rating{gap:11px;padding:11px 12px}
.bl60 .bb-rating-num{font-size:24px}
}
/* ══════════════════════════════════════════════════════════════════════
v10.90 · TWO ARTICLE LOOKS
══════════════════════════════════════════════════════════════════════
Reported: "blog is still very basic, blog ke front ui ux mein secitons
ko sahi treat e nai kiya like owner block b weysea heading be weyse no
formating ui ux at all" and "un ko profesional level block banao …
currently looks like 2010 year wala ui ux".
Measured on his own install before this, on a 390px phone, with an
article containing every block:
.bb-callout 342x122 white, 1px border, 10px radius
.bb-table 342x172 white, 1px border, 10px radius
.bb-item 342x317 white, 1px border, 10px radius
.bb-rating 342x90 white, 1px border, 10px radius
.bb-faq 342x168 white, 1px border, 10px radius
Five blocks doing five different jobs, drawn identically. Nothing on the
page told a reader what kind of thing they were looking at — which is
what "sab lawaris" and "uncanny" describe. The fix is not more boxes; it
is that a block's weight should come from its job.
Two looks ship, chosen at Admin → Blog → How articles look
(core/BlogStyle.php), because he asked for both:
.bls-editorial A prose page. Callout, table, FAQ and pros/cons lose
their boxes and are drawn with colour, rules and
spacing instead. The three blocks that are OBJECTS —
a numbered item, a listing card, a rating — keep their
cards, because a card means "a separate thing you can
tap" and that is true of exactly those. When every
block is a card, a card stops meaning anything: that
is how a page made entirely of boxes reads flat.
.bls-cards The phone-app reading: every block on its own surface,
larger tap targets, the title sheet riding up over the
cover.
The saved HTML is identical under both. Switching is CSS only, so an
admin can change their mind on a live site with articles published.
══════════════════════════════════════════════════════════════════════ */
/* ── shared: the measure and the heading rhythm ──────────────────────── */
.bl60 .article-body{max-width:70ch}
.bl60 .article-body h2{letter-spacing:-.01em;text-wrap:balance}
/* ══ EDITORIAL ═══════════════════════════════════════════════════════ */
.bl60.bls-editorial .article-body{font-size:17px;line-height:1.78}
.bl60.bls-editorial .article-body h2{font-size:25px;margin:1.9em 0 .55em;font-weight:600}
/* The rule above an h2 is the cheapest possible hierarchy signal and the
one the old page had none of: every heading sat in the same flow as the
paragraph before it. */
.bl60.bls-editorial .article-body h2::before{content:"";display:block;width:26px;height:2px;
background:var(--brand);margin-bottom:.5em;border-radius:2px}
.bl60.bls-editorial .article-body h3{font-size:19.5px;margin:1.7em 0 .5em}
/* Callout — a coloured margin, not a box. */
.bl60.bls-editorial .article-body .bb-callout{background:var(--amber-tint);border:0;
border-left:3px solid var(--amber);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 16px}
.bl60.bls-editorial .article-body .bb-callout strong{color:var(--amber);font-size:11px;
letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px}
/* Table — rules, not a frame. The header row carries the weight. */
.bl60.bls-editorial .article-body .bb-table{border:0;border-radius:0}
.bl60.bls-editorial .article-body .bb-table thead th{background:transparent;border-bottom:1.5px solid var(--tx);
padding:0 0 9px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.bl60.bls-editorial .article-body .bb-table td{padding:11px 0;border-bottom:1px solid var(--sub);
font-variant-numeric:tabular-nums}
.bl60.bls-editorial .article-body .bb-table td:last-child{text-align:right;font-weight:600}
.bl60.bls-editorial .article-body .bb-table th:not(:first-child),
.bl60.bls-editorial .article-body .bb-table td:not(:first-child){padding-left:12px}
/* FAQ — a list of questions. */
.bl60.bls-editorial .article-body .bb-faq{border:0;border-radius:0;padding:0;background:transparent;
border-top:1px solid var(--line);margin:1.6em 0}
.bl60.bls-editorial .article-body .bb-faq .bb-faq-q{padding:15px 0 6px;font-weight:600;font-size:15.5px;
display:flex;gap:9px;align-items:baseline}
.bl60.bls-editorial .article-body .bb-faq .bb-faq-q::before{content:"Q";flex:none;font:700 10.5px/1 var(--font-h);
color:var(--brand-ink)}
.bl60.bls-editorial .article-body .bb-faq .bb-faq-a{padding:0 0 15px 19px;border-bottom:1px solid var(--sub);
color:var(--tx-2);font-size:14.6px}
/* Pros & cons — one object split in two, so one border, not two. */
.bl60.bls-editorial .article-body .bb-proscons{gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:var(--r-sm);overflow:hidden}
.bl60.bls-editorial .article-body .bb-proscons>div{border:0;border-radius:0}
.bl60.bls-editorial .article-body .bb-proscons .bb-pros strong{color:var(--ok)}
.bl60.bls-editorial .article-body .bb-proscons .bb-cons strong{color:var(--no)}
/* Figure — caption beside a rule, not centred under the picture. */
.bl60.bls-editorial .article-body .bb-figure figcaption{text-align:left;padding-left:11px;
border-left:2px solid var(--line)}
/* THE OBJECTS keep their cards. */
.bl60.bls-editorial .article-body .bb-item{box-shadow:var(--sh)}
.bl60.bls-editorial .article-body .bb-rating{border:0;border-radius:0;padding:16px 0;
border-top:2px solid var(--tx);border-bottom:1px solid var(--line);background:transparent}
/* ══ APP CARDS ════════════════════════════════════════════════════════ */
.bl60.bls-cards .article-body{font-size:16px;line-height:1.72}
.bl60.bls-cards .article-body h2{font-size:20px;margin:1.5em 0 .5em;font-weight:700}
.bl60.bls-cards .article-body h3{font-size:17.5px}
.bl60.bls-cards .article-body .bb-callout{border-radius:var(--r);border:1px solid var(--amber);
background:var(--amber-tint);padding:15px 16px}
.bl60.bls-cards .article-body .bb-table{border-radius:var(--r);box-shadow:var(--sh)}
.bl60.bls-cards .article-body .bb-table thead th{background:var(--sub)}
.bl60.bls-cards .article-body .bb-faq{border:1px solid var(--line);border-radius:var(--r);
padding:15px 16px;background:var(--surface);box-shadow:var(--sh)}
.bl60.bls-cards .article-body .bb-proscons>div{border-radius:var(--r);box-shadow:var(--sh)}
.bl60.bls-cards .article-body .bb-proscons .bb-pros{background:var(--ok-tint);border-color:var(--ok)}
.bl60.bls-cards .article-body .bb-proscons .bb-cons{background:var(--no-tint);border-color:var(--no)}
.bl60.bls-cards .article-body .bb-item{border-radius:var(--r);box-shadow:var(--sh-2);
grid-template-columns:minmax(0,1fr);padding:0;overflow:hidden}
.bl60.bls-cards .article-body .bb-item .bb-item-pic{aspect-ratio:16/9;border-radius:0}
.bl60.bls-cards .article-body .bb-item .bb-item-txt{padding:14px 15px}
/* A rating is the one block that should stop the eye, so in this look it
inverts rather than sitting in another white card among white cards. */
.bl60.bls-cards .article-body .bb-rating{background:var(--tx);color:#fff;border:0;
border-radius:var(--r);padding:16px}
.bl60.bls-cards .article-body .bb-rating .bb-rating-label{color:rgba(255,255,255,.9)}
.bl60.bls-cards .article-body .bb-rating .bb-rating-bar{background:rgba(255,255,255,.2)}
.bl60.bls-cards .article-body .bb-rating .bb-rating-bar span{background:#fff}
.bl60.bls-cards .article-body .bb-figure img{border-radius:var(--r)}
/* ══ DESKTOP ══════════════════════════════════════════════════════════
"desktop version b improve karna hey us mein b sab lawaris e".
Measured before this: the article body ran to whatever width the grid
column happened to be — on a 1280px screen that is well past the point
where a line of prose becomes hard to track back from. Three changes,
desktop only, and none of them touch the block order the Block Builder
owns:
· the prose gets a real measure and sits centred in its column
· the side rail becomes sticky, so the contents list is still there
when a reader is halfway down a long guide
· the rail's own cards stop repeating the article's background */
@media (min-width:992px){
/* Left-aligned, not centred: the title, the byline and the breadcrumb
all start at the column's left edge, and a centred measure puts the
prose on a different left edge from the headline above it. */
.bl60 .article-body{margin-left:0;margin-right:auto}
.bl60.bls-editorial .article-body{max-width:62ch}
.bl60.bls-cards .article-body{max-width:66ch}
}
/* ══════════════════════════════════════════════════════════════════════
v10.95 · REVIEW — the first block that is one file
══════════════════════════════════════════════════════════════════════
blocks/review.php is the whole block: its name in the + Block menu, the
questions its dialog asks, and the markup those answers make. This is
the only other place it exists, and because article.css is loaded by
BOTH the public article and the editor (v10.94), styling it once styles
it in both — which is the "scaleable" part of "one block, one file".
It reads as a judgement, not as a scorecard: the name and the stars on
one line, the writer's sentences given the room of ordinary prose, and
the two notes as a short list rather than a second set of boxes. Every
colour comes from the same tokens the rest of the article uses, so it
follows light and dark with the page.
══════════════════════════════════════════════════════════════════════ */
.bl60 .article-body .bb-review{margin:1.8em 0;padding:16px 18px;border:1px solid var(--line);
border-radius:var(--r);background:var(--surface);box-shadow:var(--sh)}
.bl60 .article-body .bb-review-head{display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;margin-bottom:8px}
.bl60 .article-body .bb-review-head strong{font-family:var(--font-h);font-size:16.5px;font-weight:700;color:var(--tx)}
.bl60 .article-body .bb-review-stars{display:inline-flex;gap:3px;flex:none}
/* Three states from one element: a CSS mask would need a file, and a
character does not need one. The half star is the full glyph clipped
down the middle, which is why it is two stacked backgrounds. */
.bl60 .article-body .bb-star{width:15px;height:15px;display:inline-block;flex:none;font-style:normal;
background:var(--line-2);
-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 15.2 8 12.6l4.4 2.6-1.2-5 3.9-3.4-5.1-.4L8 1.6 6 6.4l-5.1.4 3.9 3.4z'/%3E%3C/svg%3E");
mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 15.2 8 12.6l4.4 2.6-1.2-5 3.9-3.4-5.1-.4L8 1.6 6 6.4l-5.1.4 3.9 3.4z'/%3E%3C/svg%3E")}
.bl60 .article-body .bb-star.is-full{background:var(--amber)}
.bl60 .article-body .bb-star.is-half{background:linear-gradient(90deg,var(--amber) 50%,var(--line-2) 50%)}
.bl60 .article-body .bb-review-verdict{margin:0;font-size:15.5px;line-height:1.6;color:var(--tx-2)}
.bl60 .article-body .bb-review-notes{list-style:none;padding:0;margin:12px 0 0;
display:flex;flex-direction:column;gap:6px}
.bl60 .article-body .bb-review-notes li{display:flex;gap:9px;align-items:baseline;font-size:14px;
color:var(--tx-2);margin:0}
.bl60 .article-body .bb-review-notes li span{flex:none;font:700 10px/1.6 var(--font-h);letter-spacing:.08em;
text-transform:uppercase;padding:2px 7px;border-radius:999px}
.bl60 .article-body .bb-review-notes li.is-good span{background:var(--ok-tint);color:var(--ok)}
.bl60 .article-body .bb-review-notes li.is-bad span{background:var(--amber-tint);color:var(--amber)}
/* The two looks treat it the way they treat every other block: Editorial
drops the box and keeps a rule, Cards keeps the surface. */
.bl60.bls-editorial .article-body .bb-review{border:0;border-left:3px solid var(--amber);
border-radius:0;box-shadow:none;background:transparent;padding:4px 0 4px 16px}
.bl60.bls-cards .article-body .bb-review{border-radius:var(--r);box-shadow:var(--sh)}
@media (max-width:600px){
.bl60 .article-body .bb-review-head{gap:6px}
.bl60 .article-body .bb-review-notes li{flex-direction:column;gap:3px}
}
/* ══════════════════════════════════════════════════════════════════════
v10.95 · WHERE TO FIND THEM — the links row on a block
══════════════════════════════════════════════════════════════════════
"aur social links bhi ho yahan yaan website to make card engaging."
A row of small pills under a list item or a review: the network's name
with its mark, or the bare host for an ordinary website. A handle that
names no network is drawn in the same shape WITHOUT a link, because a
guessed link is worse than no link — it sends a reader somewhere the
writer never chose.
Deliberately small and quiet. These sit under the words, not beside the
heading: the item's own name is what a reader is scanning for, and a row
of brand colours next to it would read as advertising.
══════════════════════════════════════════════════════════════════════ */
.bl60 .article-body .bb-links{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.bl60 .article-body .bb-link{display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;border:1px solid var(--line);
background:var(--surface);color:var(--tx-2);font-size:12.2px;font-weight:600;
text-decoration:none;line-height:1.4;white-space:nowrap;max-width:100%}
.bl60 .article-body .bb-link i{font-size:13px;flex:none;opacity:.75}
.bl60 .article-body a.bb-link:hover{border-color:var(--brand);color:var(--brand-ink)}
.bl60 .article-body a.bb-link:hover i{opacity:1}
/* The one that is not a link says so by not behaving like one. */
.bl60 .article-body .bb-link-plain{background:var(--sub);border-style:dashed;cursor:default}
/* A long host must shorten rather than push the row sideways. */
.bl60 .article-body .bb-link{overflow:hidden;text-overflow:ellipsis}
.bl60.bls-editorial .article-body .bb-link{border-radius:6px}
@media (max-width:600px){
.bl60 .article-body .bb-links{gap:5px}
.bl60 .article-body .bb-link{font-size:11.6px;padding:3px 9px}
}