needs this to make the sticky row-label column below make sense. */
.table-comparison-wrapper {
overflow-x: auto;
}
.table-comparison thead th,
.table-comparison .table-comparison__section-row th,
.table-comparison .table-comparison__section-row td {
background: var(--bg-surface-alt);
color: var(--ink-strong);
font-weight: 700;
position: sticky;
/* Above the plain row-label column (z-index 1 below) when a sticky-top
row scrolls past a sticky-left cell in a different table row. */
z-index: 2;
}
/* Row-label column (first cell of the header row and every data row,
including section-divider rows - see the markup comment on why those use
one empty | per tier column instead of a single colspanned cell) -
pinned while the tier columns scroll horizontally. Added in Task 6 to
close the gap the brief flagged: the base rules above style *what* the
sticky cells look like, but nothing previously made the leftmost column
stick horizontally. Lower specificity than the two selectors above on
purpose, so a header-row label cell (matched by both) keeps the header's
--bg-surface-alt background instead of this rule's --bg-page. */
.table-comparison__row-label {
position: sticky;
left: 0;
background: var(--bg-page);
z-index: 1;
}
/* A row-label cell inside thead or a section-row also matches the base
sticky rule above (higher specificity, so its z-index: 2 wins there,
not this class's z-index: 1) - which ties it with that same row's other
cells (also z-index: 2), and CSS resolves stacking ties by DOM order, so
a later sibling cell's opaque background paints over the label's text
during horizontal scroll. Break the tie explicitly. */
.table-comparison thead th.table-comparison__row-label,
.table-comparison__section-row th.table-comparison__row-label {
z-index: 3;
}
.table-comparison th,
.table-comparison td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--line);
border-left: none;
border-right: none;
border-top: none;
/* Browsers bold | by default, and every data row's row-label cell is
a | (for accessibility) — with no author rule resetting
it, every row down the left edge rendered bold, not just the real
header/section rows. Those get their bold back from the more specific
"thead th, .table-comparison__section-row th/td" rule below, which
wins the cascade over this lower-specificity one. */
font-weight: 400;
}
.table-comparison .icon-check {
color: var(--success);
}
.table-comparison .icon-cross {
/* De-emphasised, not --danger — "not included" isn't an error. */
color: var(--line-strong);
}
/* Optional extra-cost add-on (e.g. Club Select's Blesta licence add-on) -
distinct from both icon-check ("included") and icon-cross ("not
included"). fa-adjust (half-filled circle) is the conventional
"partial/conditional" glyph in feature-comparison tables - a plain "~"
character sits far smaller than the fa-check/fa-times glyphs beside it,
so an actual FA icon is used to match their visual weight. Pairs with
the generic [data-tooltip] pattern above to explain the add-on on
hover/focus; cursor: help signals it's non-standard without needing a
native title="" tooltip alongside it. */
.table-comparison .icon-optional {
color: var(--warning);
cursor: help;
}
.table-comparison .text-user-choice {
color: var(--accent);
font-style: italic;
font-weight: 600;
}
.table-comparison .table-comparison__col--emphasis {
background: var(--accent-soft);
}
/* --accent-soft is translucent (rgba) by design — fine for an emphasis tint
sitting on the page background, but the emphasised tier's column also
passes through the sticky header/section rows above, where a translucent
background lets whatever has scrolled underneath show through the "solid"
header. Give sticky contexts an opaque, solid-blended equivalent instead;
higher specificity than the plain rule above, so only sticky cells are
affected — ordinary body-row emphasis cells keep the translucent tint. */
.table-comparison thead th.table-comparison__col--emphasis,
.table-comparison .table-comparison__section-row th.table-comparison__col--emphasis,
.table-comparison .table-comparison__section-row td.table-comparison__col--emphasis {
background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface-alt));
}
/* ==========================================================================
Prose / .card-markdown (README + blog content)
========================================================================== */
.card-markdown {
}
.card-markdown p {
font-size: 1rem;
line-height: 1.7;
color: var(--ink);
margin: 0 0 1em;
}
.card-markdown figure,
.card-markdown table,
.card-markdown hr,
.card-markdown pre,
.card-markdown blockquote,
.card-markdown h1,
.card-markdown h2,
.card-markdown h3,
.card-markdown h4,
.card-markdown h5,
.card-markdown h6 {
clear: both;
}
.card-markdown h1,
.card-markdown h2,
.card-markdown h3,
.card-markdown h4,
.card-markdown h5,
.card-markdown h6 {
color: var(--ink-strong);
margin: 1.6em 0 .5em;
}
.card-markdown a {
color: var(--accent);
}
/* reset.css zeroes ul/ol padding globally (needed elsewhere - nav menus,
card lists, etc. all supply their own layout). Markdown content never
overrides that, so with list-style-position's default of "outside" and
nowhere to put it, every bullet/number rendered hanging out past the
left edge of the surrounding paragraph text instead of sitting indented
above it. */
.card-markdown ul,
.card-markdown ol {
padding-left: 1.5em;
}
.card-markdown li + li {
margin-top: .35em;
}
.card-markdown ul ul,
.card-markdown ul ol,
.card-markdown ol ul,
.card-markdown ol ol {
margin-top: .35em;
}
.card-markdown li::marker {
color: var(--ink-muted);
}
.card-markdown code {
background: var(--accent-soft);
color: var(--ink-strong);
padding: 2px 6px;
border-radius: 4px;
}
.card-markdown pre {
background: var(--bg-inverse);
color: var(--ink-inverse-soft);
border-radius: 8px;
padding: 16px;
overflow-x: auto;
}
.card-markdown pre code {
background: transparent;
color: inherit;
padding: 0;
border-radius: 0;
}
.card-markdown blockquote {
border-left: 3px solid var(--accent);
background: var(--bg-surface-alt);
padding: 12px 20px;
color: var(--ink-soft);
font-style: italic;
}
.card-markdown table {
border-color: var(--line);
border-collapse: collapse;
width: 100%;
}
.card-markdown table td,
.card-markdown table th {
border: 1px solid var(--line);
padding: var(--space-2) var(--space-3);
text-align: left;
}
.card-markdown table th {
background: var(--bg-surface-alt);
font-weight: 600;
}
.card-markdown img {
max-width: 100%;
border-radius: var(--radius-sm);
}
.card-markdown hr {
border-color: var(--line);
width: 100%;
}
/* ---- Rich-text editor content classes (figures, image styles, font
sizes, highlights) - values match the editor's own defaults. ---- */
.card-markdown figure {
margin: 1.5em 0;
}
.card-markdown figure img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.card-markdown figure.table {
overflow-x: auto;
}
.card-markdown figure.table table {
margin: 0;
}
.card-markdown figcaption {
color: var(--ink-soft);
font-size: .875rem;
text-align: center;
margin-top: .5em;
}
.card-markdown .image-style-side {
float: right;
max-width: 50%;
margin: 0 0 1em 1.5em;
}
.card-markdown .text-tiny {
font-size: .7em;
}
.card-markdown .text-small {
font-size: .85em;
}
.card-markdown .text-big {
font-size: 1.4em;
}
.card-markdown .text-huge {
font-size: 1.8em;
}
.card-markdown mark.marker-yellow {
background-color: #fdfd77;
}
.card-markdown mark.marker-green {
background-color: #62f962;
}
.card-markdown mark.marker-pink {
background-color: #fc7999;
}
.card-markdown mark.marker-blue {
background-color: #72ccfd;
}
.card-markdown .pen-red {
color: #e71313;
}
.card-markdown .pen-green {
color: #12a800;
}
.card-markdown .oembed-video {
position: relative;
aspect-ratio: 16 / 9;
margin: 1.5em 0;
}
.card-markdown .oembed-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: var(--radius-sm);
}
/* ==========================================================================
Shared page-layout families
==========================================================================
The recipes below were duplicated verbatim across ~13 pages' page-scoped
|