` — "article-body" is only an attribute name on
the OUTER div, and the class on the INNER one (which everything actually
needs to be scoped to) is "markdown". All instances replaced with
`.markdown[itemprop="articleBody"]`, which — unlike a bare ".markdown"
— won't also catch community posts or comments if those ever reuse the
same "markdown" class for their own rendered content. If a future
change to headings, links, or code colors doesn't seem to take effect,
check this first: confirm the selector actually matches something in a
live page's dev tools before assuming a specificity/cascade problem.
FINAL PASS (2026-08-14): styling assignment marked complete by the
person. Later fixes not yet mentioned above: admonition h3.title labels
forced back to navy in dark mode (were losing to the general
heading-teal rule — direct rules beat inherited ones regardless of
specificity); the site's anchor-link "copy heading link" feature
(script.js, not this file — see SKILL.md) extended to h1-h6 and
excluded from admonition headings; definition-list terms bolded;
blockquote and span.quote both rebuilt using the real computed
admonition values the person provided directly (padding/margin/radius/
border-left width), rather than guessed ones, with a dark-mode
navy->teal border swap; span.quote's decorative quote-mark graphic
fully replaced (not recolored — original mechanism invisible to us) in
Nerdio purple, with a nested span.quote-inside-span.quote markup quirk
handled via `all: unset` + explicit ::before/::after suppression on the
inner one; the sidebar callout floated right with a light-mode-only
border + offset shadow; standard (non-hover) links fixed to Nerdio teal
in both modes, splitting a dark-mode rule that had wrongly lumped
:link and :visited into one color. The span.quote opening-mark's
`top` offset (0.1em) was tuned live by the person in dev tools, not
calculated — if the box's font-size/line-height/font-family ever
change, that value may need re-tuning the same way.
TABLE REBUILD (2026-08-15): section 7 rewritten from scratch, and the
legacy .TableStyle-Basic system (previously further up this file)
removed entirely — see each section's own removal/rebuild notes for
the full reasoning. Short version: Zendesk's own native
[data-plugin-formatting] .table styling (in their bundled CSS, not
this file) was bleeding onto Paligo's .table/.informaltable wrapper
divs due to a class-name collision, giving formal-table captions an
unwanted border; the .TableStyle-Basic system depended on per-cell
classes Paligo's actual output never uses; and admonition-embedded
layout-hack tables (confirmed via a real example) turned out to need
no special exclusion at all, since they never carry a
.table/.informaltable wrapper in the first place. New border color
is #595959 (a genuine dark grey, replacing the previous #9999a0) per
explicit request — an estimate, not color-picked against a live
render; adjust if it reads too dark/light. This is a preview version
the person is fine-tuning before it goes back into the theme zip —
don't assume it's final without checking for a newer round of edits.
============================================================================ */
/* ----------------------------------------------------------------------------
1. Font import & brand color tokens
---------------------------------------------------------------------------- */
/* Poppins is imported at the very top of this file instead — see line 1.
Per the CSS spec, @import rules must appear before every other rule in
a stylesheet (aside from @charset); an @import placed here, this deep
into the file, would be silently discarded by the browser. No
FontAwesome import — Zendesk's theme asset pipeline is built around
uploaded assets rather than arbitrary third-party CDN @imports, and CSP
behavior for that varies by account. Admonitions use a colored left
border + tint instead of an icon, so there's nothing depending on an
icon font loading correctly. */
:root {
--nerdio-navy: #042838; /* Navy orbit */
--nerdio-teal: #1E9DB8; /* Nerdio blue / azure — primary accent */
--nerdio-teal-dark: #12677A; /* Hover/active variant of teal */
--nerdio-green: #CDFF4E; /* Green galaxy */
--nerdio-green-dark: #B7E63F; /* Hover state for green */
--nerdio-purple: #A795C7; /* Visited-link purple */
}
/* ----------------------------------------------------------------------------
2. Typography — Poppins site-wide, everything else about nav/layout left as-is
Your base theme already routes every font-family declaration in the
entire stylesheet through two custom properties: `body { font-family:
var(--text-font-family); }` (line 112 — the universal default every
element inherits unless it overrides its own font-family) and
`h1..h6 { font-family: var(--heading-font-family); }` (line 395, plus a
couple of chrome selectors like .topbarmessage that reference it
directly). Redefining those two custom properties here — rather than
writing font-family rules against dozens of individual nav/layout
selectors — makes Poppins apply everywhere those variables are
consulted, site-wide, with zero risk of touching any nav/layout
selector's color, spacing, or anything else it doesn't declare its own
value for.
Weight follows the same logic: the base theme's `body` rule sets
font-weight:400 and its generic `h1..h6` rule sets font-weight:700 —
both overridden below to Poppins Light (300) for body text and Medium
(500) for headings, since Poppins reads noticeably heavier than most
system fonts at the same numeric weight, especially in dark mode.
Anything elsewhere in the theme with its OWN explicit font-weight (icon
glyphs, buttons, badges — several of those specifically require weight
900 to select the right icon variant) is untouched, since this only
changes what's inherited by elements that don't set their own weight.
Article content headings additionally get navy coloring below, which is
a deliberate content-only design choice (not extended to site-wide
chrome headings, since that wasn't part of the ask).
---------------------------------------------------------------------------- */
body {
--text-font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
--heading-font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-weight: 300;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-weight: 500;
}
.markdown[itemprop="articleBody"] h1,
.markdown[itemprop="articleBody"] h2,
.markdown[itemprop="articleBody"] h3,
.markdown[itemprop="articleBody"] h4,
.markdown[itemprop="articleBody"] h5,
.markdown[itemprop="articleBody"] h6,
.markdown[itemprop="articleBody"] .titlepage .title {
font-weight: 500;
color: var(--nerdio-navy);
}
/* ----------------------------------------------------------------------------
3. Links within article content — LVHA order matters, keep as written
---------------------------------------------------------------------------- */
.markdown[itemprop="articleBody"] a:link {
color: var(--nerdio-teal);
}
.markdown[itemprop="articleBody"] a:visited {
color: var(--nerdio-purple);
}
.markdown[itemprop="articleBody"] a:hover,
.markdown[itemprop="articleBody"] a:focus {
color: var(--nerdio-navy);
background-color: var(--nerdio-green);
}
.markdown[itemprop="articleBody"] a:active {
color: var(--nerdio-navy);
background-color: transparent;
text-decoration: underline;
text-decoration-color: var(--nerdio-green);
text-underline-offset: 2px;
}
/* ----------------------------------------------------------------------------
4. Inline character-level elements
guilabel/guibutton/etc. deliberately carry NO color override, in light
or dark mode — teal was tried here initially, but that's the same color
used for navigation links (and, in light mode, regular links too), which
made UI labels read as if they were clickable. Plain body text color +
a bit of weight is the same treatment Flare's span.UIField always used.
---------------------------------------------------------------------------- */
span.guilabel,
span.guibutton,
span.guimenu,
span.guisubmenu,
span.guimenuitem,
span.menuchoice {
font-weight: 500;
}
span.keycap {
display: inline-block;
font-weight: normal;
font-family: monospace;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.1em 0.5em;
margin: 0 0.2em;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
background-color: #f7f7f7;
/* PATCHED: no color was set, so text inherited dark mode's white
default — invisible against this fixed light background (which,
like the box-shadow's white inset border above, is unconditional
and doesn't change between modes). Navy applied unconditionally to
match, for the same reason as the table-cell fix above. */
color: var(--nerdio-navy);
}
code.literal,
span.literal,
span.filename,
span.systemitem,
span.command,
span.option,
span.replaceable,
span.parameter,
span.varname,
span.classname,
span.methodname,
span.prompt,
span.userinput,
span.computeroutput,
span.database,
span.application,
span.hardware,
span.envar,
span.errorcode {
font-family: "Consolas", "SF Mono", "Source Code Pro", monospace;
background-color: var(--secondary-bg-color);
border-radius: 3px;
padding: 0 4px;
}
/* PATCHED: Zendesk's native inline
styling — the dark
background-color: var(--primary-text-color) / color: var(--secondary-
bg-color) pill from .markdown code / .ui-light .markdown code, much
further up this file (part of the pre-existing, untouched theme) —
replaced here for Paligo's own inline code with the pink/rose treatment
Paligo's HTML5 output itself uses (matching Bootstrap's classic inline-
code convention, which the rest of this Zendesk theme is already built
on — bootstrap-grid.min.css is loaded in document_head.hbs). Solid hex,
not a CSS custom property or an alpha channel, so — per the same dark-
mode reasoning used throughout this file — it renders identically in
both modes with no separate .ui-dark rule needed. Scoped to code.code
and code.filename specifically (Paligo's actual inline-code classes),
not touched: pre code / code.hljs (the syntax-highlighted code blocks,
section 9b) and code.literal/span.* above (deliberately left as the
monospace-pill treatment). */
.markdown[itemprop="articleBody"] code.code,
.markdown[itemprop="articleBody"] code.filename {
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
padding: 2px 4px;
font-size: var(--text-font-size-small);
}
/* ----------------------------------------------------------------------------
5. Admonitions — Nerdio-tinted boxes, no icon font dependency
note & important -> Nerdio green (matches Paligo's own default grouping)
tip & notice -> Nerdio teal
warning, warning.danger, caution -> left as Paligo's own orange/red/yellow;
there is no orange, red, or yellow anywhere in the Nerdio palette, so
inventing a "close enough" brand color for these would be a worse fit
than the defaults already are. Flag if you'd like these swapped anyway.
Paligo bakes `style="margin-left: 0.5in; margin-right: 0.5in;"` directly
onto every one of these divs in its generated HTML — an inline style,
which beats any external stylesheet rule regardless of specificity or
cascade order, so it takes !important to override. Zeroing it out here
makes an admonition flush with the surrounding paragraph by default, and
correctly follow the margin of whatever it's nested inside (e.g. a
procedure step's own indent) rather than adding a further fixed inset on
top of that context.
---------------------------------------------------------------------------- */
div.note,
div.tip,
div.warning,
div.caution,
div.important {
display: block;
padding: 14px 20px;
margin: 20px 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 6px;
border: none;
border-left: 6px solid;
line-height: 1.5;
}
/* Title bar — always navy, regardless of the box's accent color. The
accent color reads fine as a border/tint but is too low-contrast for
text at this size against the light tinted backgrounds below. */
div.note > h3.title,
div.tip > h3.title,
div.warning > h3.title,
div.caution > h3.title,
div.important > h3.title {
font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-size: var(--text-font-size-large);
font-weight: 500;
margin-top: 0;
margin-bottom: 6px;
line-height: 1.3;
color: var(--nerdio-navy);
}
/* PATCHED: admonition boxes were overlapping the floated sidebar callout
(section 8b) — a classic CSS float quirk. A float only pulls INLINE
content (text) around itself; a neighboring block's own background/
border box does NOT shrink to avoid a float unless that block
establishes its own block formatting context (BFC). These divs weren't
establishing one, so their background stretched full-width and slid
underneath the floated box even where the text itself was fine.
display: flow-root is the modern, purpose-built way to get a BFC with
no side effects — unlike the older overflow: hidden trick, it won't
risk clipping anything meant to overflow. Same visual box-level
rendering as before (still block-level), just now correctly leaves
clear space beside a float instead of running under it. */
div.note, div.tip, div.warning, div.caution, div.important {
display: flow-root;
}
/* Note — Nerdio green
Solid pre-mixed color (base hue mixed 15% into white), not an alpha
blend. rgba() with an alpha channel shows whatever sits BEHIND the box
through it — over a white page that reads as a light tint, but over
Zendesk dark mode's dark background it shows through as a muddy
dark olive instead. A solid opaque color gives the identical light-mode
look while staying visually identical regardless of what's behind it —
which is what makes these boxes read consistently as light "island"
callouts in both light and dark mode. */
div.note {
border-left-color: var(--nerdio-green);
background-color: #F8FFE4;
}
/* Tip — Nerdio teal, same solid-mix approach (8% into white) */
div.tip {
border-left-color: var(--nerdio-teal);
background-color: #EDF7F9;
}
/* Important — now takes Paligo's former Caution color (yellow), one
severity step up from Note. Same solid-mix approach as the others. */
div.important {
border-left-color: #ffe81a;
background-color: #FFFEF4;
}
/* Caution — now takes Paligo's former plain-Warning color (orange), one
severity step up from Important. */
div.caution {
border-left-color: #ffb74d;
background-color: #FFF9F1;
}
/* Warning (+ .danger) — bright red border (CSS "red") with a solid
pre-mixed light-pink fill (red mixed ~6% into white), same solid-color
approach as the rest so it stays consistent in dark mode. Replaces the
previous orange/red scheme entirely; .danger is folded into the same
rule since Warning itself is now the reddest tier — flag if a visually
distinct danger look turns out to still be wanted. */
div.warning,
div.warning.danger {
border-left-color: red;
background-color: #FFF0F0;
}
/* These boxes are now solid-light in both modes (see above), so body text
and the title need to stay dark/navy in dark mode too — otherwise they'd
inherit Zendesk dark mode's light default text color and become
unreadable against a light box. In light mode this is already the
default, so no light-mode-specific rule is needed. */
.ui-dark div.note,
.ui-dark div.tip,
.ui-dark div.warning,
.ui-dark div.caution,
.ui-dark div.important {
color: var(--nerdio-navy);
}
/* PATCHED: the above sets navy on the admonition DIV, which h3.title
(the "Note"/"Warning"/etc. label) would normally just inherit — except
the dark-mode headings rule a bit further down this file
(.ui-dark .markdown[itemprop="articleBody"] h1...h6 { color: teal })
targets h3 DIRECTLY. A rule that sets a property directly on an element
always wins over an inherited value, regardless of specificity — so
admonition labels were turning teal despite the navy set on their
parent div above. This re-asserts navy specifically for admonition
h3.title, with extra ancestor classes added purely to out-rank that
teal rule on specificity (2 extra classes + 1 extra element beats it
clean, no !important needed). Note/Tip aren't affected by the teal rule
in the first place (already navy, unconditionally, from section 4 —
this only needed fixing for the three that got a dark-mode teal
override elsewhere: Important/Caution/Warning). Listed for all five
anyway, in case that teal rule's selector list ever changes. */
.ui-dark .markdown[itemprop="articleBody"] div.note h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.tip h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.warning h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.caution h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.important h3.title {
color: var(--nerdio-navy);
}
/* Admonition-label exclamation marks (Important!/Caution!/Warning!)
Appended via ::after rather than baked into content, so it survives if
the label text ever changes. Note and Tip are excluded. */
div.important > h3.title::after,
div.caution > h3.title::after,
div.warning > h3.title::after {
content: "!";
}
/* Links inside admonitions get their own rule too — see section 11 near
the end of this file, which has to come after section 10's dark-mode
link rule to actually win the cascade. */
/* ----------------------------------------------------------------------------
6. Procedures — graphical circular step numbers
Recreates the circular numbered-step treatment from Paligo's HTML5 output
(graphical-lists.css) using CSS counters, since Zendesk has no built-in
equivalent. Nested procedures fall back to lower-alpha / lower-roman
list markers rather than a second ring of circles, matching how nested
steps read in the Paligo portal.
---------------------------------------------------------------------------- */
ol.procedure {
counter-reset: procedure-step;
list-style: none;
margin-left: 0;
padding-left: 0;
}
ol.procedure > li.step {
counter-increment: procedure-step;
position: relative;
padding-left: 44px;
margin-bottom: 1.1em;
min-height: 30px;
}
ol.procedure > li.step::before {
content: counter(procedure-step);
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
background-color: var(--nerdio-teal);
color: #ffffff;
font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: var(--text-font-size-small);
text-align: center;
}
/* Nested procedures: plain lower-alpha / lower-roman markers, no circles */
ol.procedure ol.procedure {
list-style-type: lower-alpha;
counter-reset: none;
margin-top: 0.5em;
}
ol.procedure ol.procedure > li.step {
counter-increment: none;
padding-left: 0;
}
ol.procedure ol.procedure > li.step::before {
content: none;
}
ol.procedure ol.procedure ol.procedure {
list-style-type: lower-roman;
}
/* Single-step procedures come through as rather than
(no number needed for one step) — neither Paligo's own CSS nor the
base theme resets this, so today it just shows a plain disc bullet.
Strip the bullet so a single step reads as a clean paragraph, consistent
with how Paligo's portal renders the same case. */
ul.procedure {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul.procedure > li.step {
padding-left: 0;
}
div.procedure > p.title,
div.procedure > div.titlepage .title {
font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: var(--text-font-size-large);
color: var(--nerdio-navy);
}
/* ----------------------------------------------------------------------------
7. Tables — teal header, uniform grey body, dark-grey borders throughout
REBUILT FROM SCRATCH (this pass). Context for the design below:
1. Zendesk's own native rich-text-editor table styling
([data-plugin-formatting] .table, bundled in Zendesk's own
application-*.css — external, not in this file, not editable by us)
happens to use the exact class name "table" that DocBook/Paligo uses
for its formal- wrapper div. Since data-plugin-formatting
sits on the .markdown container wrapping ALL article content, that
native rule fires on Paligo's wrapper divs too — giving a formal
table's caption (which sits inside the OUTER wrapper div, not the
actual ) an unwanted border, plus a competing grey
thead/tfoot background. Confirmed directly against Zendesk's own
bundled CSS, not inferred. Neutralized below by resetting the DIV
wrappers specifically — a different tag from the real
element, so this reset can't affect the table's own styling further
down. Scoped to the article body only, so Zendesk's own
genuinely-authored tables elsewhere (comments, hand-built KB
articles) are untouched.
2. CORRECTION (same day): the first version of this rebuild required a
.table/.informaltable wrapper ancestor on every rule, on the
assumption all real content tables get one from Paligo. Confirmed
false via a real published example: older Flare-migrated content
that's never been reprocessed through Paligo has bare elements with NO wrapper div at all —
sometimes with no wrapper of any kind, sometimes inside an
unrelated ad-hoc . These got zero styling under the
wrapper-requiring version — not becuase per-cell Flare classes
"blocked" a more general rule, but because no general
wrapper-independent rule existed for them to match at all. Fixed by
dropping the wrapper requirement everywhere except the div-reset
immediately below (which only ever acts where that div genuinely
exists, so it's harmless to leave wrapper-scoped) — every rule now
matches ANY
in the article body, real Paligo output and
unreprocessed Flare legacy alike.
3. Because rule (2) now matches tables with no wrapper at all, the
admonition-embedded-table exclusion that used to happen for free
(see the previous version's note on this) needs to be explicit
again: legacy Flare admonition boxes build their icon+title layout
out of a bare 2-column directly inside div.note/div.tip/
div.warning/div.caution/div.important (confirmed via a real
example), and now that "any table" is in scope, those need active
exclusion or they'd get double, conflicting styling on top of
the pre-existing legacy admonition CSS that already handles them
(above the facelift banner, untouched). Excluded via a :where()
fragment — zero specificity cost, so it doesn't distort the
specificity numbers on every rule that repeats it.
4. The legacy ".TableStyle-Basic" system (formerly further up this
file, now removed — see that section's own removal note) depended
on per-cell classes. Replaced entirely by the rule set below, which
doesn't depend on any per-cell classes existing — real content
tables get identical treatment whether or not those classes happen
to still be present.
---------------------------------------------------------------------------- */
/* Wrapper divs (Paligo's own .table/.informaltable convention, where it
exists) — reset only, no visual styling of their own belongs here.
This is what neutralizes Zendesk's native bleed described in (1)
above. Targets the DIV specifically (tag "div"), a different element
from the real styled below, so this reset can't touch that.
No-op wherever this wrapper doesn't exist (the bare-Flare-table case
from (2)) — harmless to leave scoped this way. */
.markdown[itemprop="articleBody"] div.table,
.markdown[itemprop="articleBody"] div.informaltable {
border: none;
width: auto;
overflow-x: visible;
}
/* The real element — ANY table in the article body, wrapped or
not, except admonition-embedded layout hacks (see (3) above). */
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) {
border-collapse: collapse;
width: 100%;
margin-bottom: 18px;
border: 1px solid #595959;
}
/* Header — every header cell, whether it's a real or DocBook's
permitted thead>tr>td stand-in, gets identical treatment: teal
background, white bold centered text. */
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) th,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead td {
padding: 8px;
border: 1px solid #595959;
background-color: var(--nerdio-teal);
color: #ffffff;
font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-weight: 500;
text-align: center;
vertical-align: middle;
}
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) th p,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead td p {
color: #ffffff;
font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-weight: 500;
margin: 0;
}
/* Body — one uniform grey for every body cell, navy text, left-aligned.
Unconditional across light/dark mode (no separate .ui-dark rule) since
the background never changes between modes — same reasoning as
admonitions/blockquote/keycaps elsewhere in this file: a fixed light
background needs a fixed dark text color regardless of site mode. */
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) td {
padding: 8px;
border: 1px solid #595959;
background-color: #f2f2f2;
color: var(--nerdio-navy);
text-align: left;
vertical-align: top;
}
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) td p {
color: var(--nerdio-navy);
}
/* Caption — formal s only (a bare informaltable, or a
wrapper-less legacy Flare table, has no title/caption element to
style — this simply won't match either). Treated as a low-level
heading rather than a bold paragraph, mirroring the existing
div.procedure > p.title convention (just above this section) exactly,
including its dark-mode teal swap below. Still scoped to the wrapper
div specifically, since that's the only place this caption structure
actually occurs. */
.markdown[itemprop="articleBody"] .table > p.title {
font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: var(--text-font-size-large);
color: var(--nerdio-navy);
margin: 0 0 8px 0;
}
.ui-dark .markdown[itemprop="articleBody"] .table > p.title {
color: var(--nerdio-teal);
}
/* Neutralizes Zendesk's native grey thead/tfoot background + bold text
(see (1) above) for any table in the article body (same broadened
scope as the rules above, same admonition exclusion). Cell-level
backgrounds set above already visually win over a thead/tfoot-level
background in normal table-painting order regardless, but this closes
the one confirmed edge case where the native rule's border-color could
still show through: DocBook's permitted thead>tr>td stand-in. */
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) tfoot {
background-color: transparent;
font-weight: normal;
}
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead td,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) tfoot td {
border-color: #595959;
}
/* ----------------------------------------------------------------------------
8. Media objects — figure/screenshot spacing
---------------------------------------------------------------------------- */
.mediaobject {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.mediaobject img {
border: 1px solid #DEDEDE;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.14);
border-radius: 6px;
max-width: 100%;
}
.inlinemediaobject {
display: inline-block;
}
/* PATCHED: height/vertical-align moved here from the wrapper span above —
controlling size/alignment on the actual ![]() renders more reliably
than on the inline-block wrapper (the wrapper's own height didn't
necessarily scale the image proportionally). Wrapper keeps only
display: inline-block now. */
.inlinemediaobject img {
height: 1.2em;
vertical-align: 0.1em;
}
/* ----------------------------------------------------------------------------
8b. Definition lists, blockquotes, and the Paligo "sidebar" callout
---------------------------------------------------------------------------- */
/* Definition list terms — bold to match the other bold-type inline
elements (guilabel/guibutton/etc. in section 4 above use the same
Poppins Medium weight). */
span.term {
font-weight: 500;
}
/* Blockquote (with attribution). Two nested elements share the class
"blockquote" in Paligo's output — — so this targets the actual
tag specifically (blockquote.blockquote), not the bare
wrapper div, to avoid nesting two boxes inside each other.
Shape values (padding/margin/border-radius/border-left width) are the
actual computed values from a real admonition box (div.note etc.,
section 5), handed over directly rather than guessed — the !important
flags on the margins are carried over too, since a plain
has the browser's own default margin (1em 40px) to fight, which may
need the same override strength admonitions apparently needed against
some other rule.
Background is #F5F5F5 — Zendesk's own overall page background color in
light mode (theming_settings.background_color), which is what "the
colour of the light mode background" was taken to mean; NOT the same
grey as table cells (#f2f2f2, section 7) — the two were a shade apart
on purpose per the request treating them as separate things.
Border-left is navy in light mode, but switches to teal in dark mode —
navy is dark enough that it would nearly vanish against Zendesk's dark
background, the same problem the admonition/table/keycap dark-mode
fixes elsewhere in this file were solving. Background and text color
stay navy-on-#F5F5F5 unconditionally in both modes, per request — only
the border switches. */
div.blockquote {
margin: 0;
}
blockquote.blockquote {
display: flow-root; /* PATCHED: was display: block — same float-overlap
fix as the admonitions above; this box has no
overflow:hidden of its own (unlike span.quote
just below, which gets this for free) to
already provide a block formatting context. */
padding: 14px 20px;
margin: 20px 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 6px;
border: none;
border-left: 6px solid var(--nerdio-navy);
line-height: 1.5;
background-color: #F5F5F5;
color: var(--nerdio-navy);
}
.ui-dark blockquote.blockquote {
border-left-color: var(--nerdio-teal);
}
/* span.quote — Paligo's inline element, which turns out to
already render as a block (confirmed by testing, not by design) rather
than true inline text. Rather than fighting that back to inline, this
leans into it and gives it the exact same box treatment as the
blockquote just above: identical padding/margin/radius/border/
background/text-color/dark-mode border-swap. Kept as its own separate
rule (rather than just adding "span.quote" to the blockquote selector
list) since the two may still need to diverge later, and because of
the nested-markup handling immediately below.
Paligo's actual output nests the same class on two elements at once:
"quoted phrase"
— a literal opening curly-quote character, an INNER span.quote around
the real text, then a literal closing curly-quote character, all
inside an OUTER span.quote. Only the outer one should get boxed, or
the box would visually nest inside itself; the inner one is reset back
to plain unstyled inline text with "all: unset". */
.markdown[itemprop="articleBody"] span.quote {
display: block;
position: relative;
overflow: hidden;
padding: 14px 20px 14px 40px; /* PATCHED: left doubled (20px -> 40px) so
the text clears the opening quote glyph */
margin: 1em 0;
border-radius: 6px;
border: none;
border-left: 6px solid var(--nerdio-navy);
line-height: 1.5;
background-color: #F5F5F5;
color: var(--nerdio-navy);
}
.ui-dark .markdown[itemprop="articleBody"] span.quote {
border-left-color: var(--nerdio-teal);
}
.markdown[itemprop="articleBody"] span.quote span.quote {
all: unset;
}
/* Decorative quotation-mark graphic: kept, per request, rather than
removed — but fully replaced rather than recolored. The original
graphic's low contrast couldn't be fixed with a targeted color tweak
because we don't know how it's actually drawn (a background-image
would ignore a `color` override entirely; it lives in Zendesk's own
base CSS, invisible to us either way) — so this writes a complete new
::before/::after pair with its own content, sizing, and color, in
Nerdio purple specifically because it's the one brand color that reads
clearly against both the #F5F5F5/navy-text box AND (via the dark-mode
border-swap above establishing the pattern) doesn't need its own
dark-mode override — purple has enough contrast against a light
background at ~45% opacity without going invisible.
Scoped to the OUTER span.quote only: the nested-quote reset rule above
already neutralizes the inner one's box, but ::before/::after are a
separate mechanism from "all: unset" (pseudo-elements are generated
content, not inherited box styling) and would otherwise still render
on the inner span too, giving doubled-up quotation marks. */
.markdown[itemprop="articleBody"] span.quote::before,
.markdown[itemprop="articleBody"] span.quote::after {
position: absolute;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
font-size: 3.5em;
line-height: 1;
color: var(--nerdio-purple);
opacity: 0.45;
pointer-events: none;
}
.markdown[itemprop="articleBody"] span.quote::before {
content: "\201C";
/* Confirmed by the person live in dev tools — 0.1em visually matches
the closing mark's gap from the box bottom (bottom: -0.35em below).
Not derived analytically; if the box's font-size, line-height, or the
quote glyph's font-family ever changes, re-check this value rather
than assuming it still holds. */
top: 0.1em;
left: 0.15em;
}
.markdown[itemprop="articleBody"] span.quote::after {
content: "\201D";
bottom: -0.35em;
right: 0.15em;
}
.markdown[itemprop="articleBody"] span.quote span.quote::before,
.markdown[itemprop="articleBody"] span.quote span.quote::after {
content: none;
}
/* RESTORED, gated (this pass): a real HTML export with six actual
content-reuse blocks confirmed the risk described below was genuine —
every one of them (a caution box, an intro paragraph + note, four
standalone paragraphs, one wrapping an entire table) rendered as bare
|