, like the
Publishing card's "Publish later"): a bordered row with an icon, the
section's heading and a chevron that turns when it opens. Black and white,
no fills; the border is the field colour (fields.css), as every other line
on this page. Details and Article start open (they hold the required
fields), Tags and Cover image open on their own when they have a value or
an error. No overflow rule on them: the body's pinned toolbar needs them
to leave sticky alone. */
.article-form__import,
.article-form__section {
margin-bottom: 1rem;
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
}
/* A fixed height, so the aside (the Publishing card) can start level with the
first row under it from 992px (--article-form-toggle-height, below). */
.article-form {
--article-form-toggle-height: 2rem;
}
.article-form__toggle-all {
display: flex;
align-items: center;
justify-content: flex-end;
height: var(--article-form-toggle-height);
margin-bottom: 0.25rem;
}
/* Byte for byte the same as documents.css's .document-fill__collapse-all-btn
(the template fill page's "Collapse all sections"). */
.article-form__collapse-all-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
.article-form__collapse-all-btn:hover,
.article-form__collapse-all-btn:focus-visible {
text-decoration: underline;
}
.article-form__summary {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 1.15rem;
cursor: pointer;
list-style: none;
}
.article-form__summary::-webkit-details-marker {
display: none;
}
.article-form__summary-icon {
font-size: 1.25rem;
}
.article-form__section-title {
flex: 1;
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: #000;
}
.article-form__chevron {
transition: transform 0.15s ease;
}
[open] > .article-form__summary .article-form__chevron {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.article-form__chevron {
transition: none;
}
}
.article-form__section-body,
.article-form__import-body {
padding: 0.25rem 1.15rem 1.15rem;
}
.article-form__section-body > :last-child {
margin-bottom: 0;
}
.article-form__publishing,
.article-form__publishing .card-header {
border-color: var(--site-input-border-color, #767676);
}
/* The Draft / Published / Pending token in the Publishing card's subtitle,
small enough that the header is a single line tall. */
.article-form__publishing .card__token {
padding: 0 0.4rem;
font-size: 0.8125rem;
line-height: 1.25rem;
vertical-align: middle;
}
/* The builder shell's tighter card strip (assessments.css). */
.article-form .builder-form-card .card-header.builder-form-card__header {
padding: 0.85rem 1.35rem;
background-color: transparent;
border-bottom-color: var(--site-input-border-color, #767676);
}
.article-form .builder-form-card__title {
font-size: 1.15rem;
}
.article-form .builder-form-card__subtitle {
font-size: 0.9375rem;
}
.article-form__checklist {
margin-bottom: 1.25rem;
}
.article-form__check {
margin-bottom: 0.35rem;
}
/* The checklist's amber "worth adding" mark: Bootstrap's warning yellow is
1.6:1 on white, too faint to see; #946200 is 5.2:1. !important beats
the .text-warning utility (itself !important). */
.article-form__checklist .bi.text-warning {
color: #946200 !important;
}
.article-form__check-hint {
color: #5c6672;
}
.article-form__buttons {
display: grid;
gap: 0.6rem;
}
.article-form__delete {
margin-top: 1rem;
}
/* "Publish later": the date and time stay folded away until asked for, so the
card is not taller than most windows. It opens by itself after a refusal
(the template adds `open`). */
.article-form__schedule {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--site-input-border-color, #767676);
}
.article-form__schedule > summary {
font-weight: 600;
cursor: pointer;
}
.article-form__schedule-body {
padding-top: 0.75rem;
}
/* The body's Quill toolbar stays where Quill puts it, above the editor, and
pins under the navbar while the editor is on screen. From 576px only: below
it the toolbar wraps onto up to three rows, which would cover too much of a
phone's window. Its parent (.document-richtext) is as tall as the editor, so
it lets go when the editor ends. A box of its own, detached from the
editor below by a gap (the border and radius of every other field here, an
opaque fill so text scrolling under it doesn't show). This replaced
article_body_toolbar.js, which moved the toolbar into the old Write /
Publish tab bar (2026-11-05). */
.article-form .document-richtext .ql-toolbar.ql-snow {
margin-bottom: 0.5rem;
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
background-color: var(--site-bg-color, #fff);
}
@media (min-width: 576px) {
.article-form .document-richtext .ql-toolbar.ql-snow {
position: sticky;
top: calc(var(--lc-sticky-top, 4rem) + 0.75rem);
z-index: 5;
/* The page colour over the 0.75rem between the navbar and the toolbar,
so text scrolling past doesn't show in it. */
box-shadow: 0 -0.75rem 0 var(--site-bg-color, #fff);
}
/* Pinned under the navbar (article_form.js adds .is-stuck): square bottom
corners, so it reads as a bar rather than a floating box. */
.article-form .document-richtext .ql-toolbar.ql-snow.is-stuck {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
/* The body field's editable area, matching .article-detail__body's own
real typography (below) rather than Quill's own default content font
(quill.snow.css) -- the Write tab previews as the real published
article, so what you're typing should read at the same size/
line-height it'll actually publish at. Transparent background so the
editable area sits flush against the page's own warm-cream background
rather than reading as a separate white panel, same reasoning as the
"remove white background" pass elsewhere on this form (see
authored.html's own accordion-turned-tabs). Border/radius match this
form's other boxed fields (the site-wide field border/0.5rem) on all
four corners,
unconditionally -- a complete, self-contained box regardless of
whether the toolbar is currently showing up in the tabs bar above.
The full `border` shorthand (not just border-color) used to matter
here specifically because quill.snow.css's own `.ql-toolbar.ql-snow +
.ql-container.ql-snow { border-top: 0 }` adjacency rule fired
regardless of the toolbar's visibility as long as it stayed a true DOM
sibling of this element -- moot now that the toolbar is relocated
somewhere else entirely (never adjacent to .ql-container at all), but
left explicit anyway as cheap insurance against that rule ever
mattering again. */
#articleForm .document-richtext .ql-container.ql-snow {
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
font-size: 1.0625rem;
}
/* The cover-image dropzone's own radius (static/shared/css/cards.css,
0.75rem) is a site-wide default shared with every other cover-image
field on the site -- overridden here just for this page's own
instance (#articleFormImageDropzone, its own id, not the shared
.cover-image-dropzone class) to the same literal 0.5rem/8px every
other field on this page now uses (reported directly), without
touching that shared default anywhere else it's used. overflow:
hidden on the dropzone itself (cards.css) clips the preview image and
every other child to this same rounded shape automatically, no
separate override needed for them.
#learningPathFormImageDropzone (learning_path_author_form.html's own
cover-image dropzone -- same shared .cover-image-dropzone/ImageDropzoneWidget
shape, different page, different id) gets the identical override for
the same reason: it was still left at the shared 0.75rem/12px default,
the one field out of step with the rest of that page's own 8px fields
(reported directly: unify every field's corner radius on that page
too). */
#articleFormImageDropzone,
#learningPathFormImageDropzone {
border-radius: 0.5rem;
}
/* The last plain-Bootstrap-default fields on this page: the Cover image
modal's three input-groups (alt text/credit name/credit URL) and the
"Upload article from file" input. Setting --bs-border-radius (not a
literal border-radius) on each .input-group lets Bootstrap's own
internal corner-joining math do the right thing -- the icon box keeps
square inner corners against the text input beside it, only the
outer corners round, exactly like every other input-group on the
site; a flat border-radius here would round all four corners of each
piece and break that join. */
#articleForm .input-group {
--bs-border-radius: 0.5rem;
}
#articleDocumentImportFile {
border-radius: 0.5rem;
}
#articleForm .ql-editor {
line-height: 1.7;
background-color: transparent;
/* A short minimum, so an empty/near-empty body doesn't reserve a
tall block of mostly-blank space above the fold. */
min-height: 150px;
padding: 1.5rem;
}
#articleForm .ql-editor :is(h2, h3, h4) {
margin-top: 2rem;
}
/* Full 2px accent ring around the whole box on focus, matching every
other field on this form -- :focus-within (not a JS-toggled class)
since .ql-editor, the real
contenteditable, is a genuine descendant of .ql-container and focus
works natively here. */
#articleForm .ql-container.ql-snow:focus-within {
border-color: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8);
}
/* The "Write something brilliant..." placeholder -- quill.snow.css's own
.ql-editor.ql-blank::before hardcodes left/right: 15px (matching its
own default 12px/15px padding) and an italic style; both overridden to
match .ql-editor's own bumped-up padding above (otherwise the
placeholder text sits ~9px left of where typed text will actually
start) and this page's plain, non-italic, muted-gray convention. */
#articleForm .ql-editor.ql-blank::before {
left: 1.5rem;
right: 1.5rem;
color: #6c757d;
font-style: normal;
}
/* article_author_form.html's Write tab -- Title kept its large,
document-style heading type, but (like Category/Subcategory/Tags
below) now sits in the same persistent-box treatment as this form's
other fields instead of staying bare until focus: a boundary that
only appears once you're already interacting with the field isn't a
boundary a low-vision or first-time reader can rely on to find it.
Border/radius/fill match .article-form-select's own box. Also reused
by learning_path_author_form.html for its "Learning path name" field
-- same heading-style box. */
.article-form-title-input {
border: 1px solid var(--site-input-border-color, #767676);
/* Literal 0.5rem/8px, matching every other field's radius on this page
(reported directly: unify to 8px) -- not the branding-driven
var(--site-card-border-radius) other cards on the site use. */
border-radius: 0.5rem;
/* Transparent, not a filled box -- same "sits on the page, not as a
white box" treatment as .scheduled-publish-widget's own fields. */
background: transparent;
padding: 0.6rem 1rem;
/* Was 2rem (reported directly: too large/heavy next to the rest of
this form's own type scale). */
font-size: 1.5rem;
font-weight: 700;
box-shadow: none;
}
/* Full 2px accent ring around the whole box, same as
.article-form-select:focus -- not just a thicker bottom rule.
!important on these :focus rings (title, subtitle, outcome, tags) beats
Bootstrap's validation focus shadows (.form-control.is-invalid:focus and
.was-validated, higher specificity), so a field with an error keeps the
site's ring. */
.article-form-title-input:focus {
border-color: transparent;
background: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8) !important;
}
/* Same boxed treatment as Title just above, colored to match
_article_detail_content.html's own real rendering of this field
(a plain ) instead of Bootstrap's .lead
class directly -- this is an
, and still needs the
focus/box-shadow resets Title's own rule has. Radius matches every
other field on this page (0.5rem/8px, same literal value as Title
just above) -- the height is what still distinguishes this row of
fields from Title's own taller box
(line-height pinned to an absolute 1.5rem, padding at Bootstrap's own
.form-control vertical default of 0.375rem, the same two numbers
.article-form-tags-row hand-copies below) and the font-size: 1rem,
same as Category's own default .form-select text (this field, and its
own "Article subtitle" placeholder, used to run larger at 1.25rem for
a "lead"-text feel, but that read as visibly out of step with every
other field's own type size on this same row of fields) -- all four
of Subtitle/Category/Subcategory/Tags render at one shared height and
text size this way, matching the Publish tab's own time selects too. */
.article-form-subtitle-input {
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
background: transparent;
padding: 0.375rem 1rem;
line-height: 1.5rem;
font-size: 1rem;
font-weight: 300;
color: var(--bs-secondary-color, #6c757d);
box-shadow: none;
}
.article-form-subtitle-input:focus {
border-color: transparent;
background: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8) !important;
}
/* learning_path_author_form.html's learning_outcome textarea -- a
deliberate visual clone of the article body's Quill writing surface
(.ql-editor above), minus the editor itself: transparent, borderless
at rest, a generous inset padding, a comfortable reading size, and --
on focus -- the same full 2px accent ring (.ql-container.ql-snow:focus-within)
rather than a plain bottom rule. article_author_form.html has no direct
analogue: its body IS a real Quill instance. */
.article-form-outcome-input {
/* A hairline at rest so the empty field still reads as an input; on
focus it gives way to the 2px accent ring below (border kept, just
turned transparent, so the box never changes size). #767676 matches
the bottom rule on this form's own selects / tags input (contrast
rationale in .article-form-select above). */
border: 1px solid #767676;
background: transparent;
padding: 1.5rem;
font-size: 1.0625rem;
line-height: 1.7;
min-height: 150px;
/* Literal 0.5rem/8px, matching every other field's radius on this page
(reported directly: unify to 8px) -- used to be the theme's card
radius (var(--site-card-border-radius), 1.25rem/20px by default),
the one field left out of step with the rest once they were unified. */
border-radius: 0.5rem;
box-shadow: none;
resize: vertical;
}
.article-form-outcome-input:focus {
border-color: transparent;
background: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8) !important;
}
/* The "Words: N Characters: N" readout under learning_outcome
(shared/js/word_char_counter.js) -- a touch smaller than body text, in
the default text colour rather than the muted .form-text grey. */
.article-form-outcome-count {
font-size: 0.875em;
}
/* Category + Subcategory (article_author_form.html) now lay out via
plain Bootstrap .row.g-2 / .col-12.col-sm -- the same pattern as
learning_paths' own Category/Subcategory filters
(learning_paths/widgets/learning_path_articles.html, reported
directly: match that page's viewport behaviour here): full-width
stacked on an xs viewport, equal-width side by side at sm and up. No
custom rule needed any more -- this replaced the former fixed-width
flex-wrap row. */
/* Category/subcategory selects -- a full box (border on all four sides,
transparent fill), not just a bottom rule: a persistent bottom-only
underline reads as an input boundary only once you already know to
look for it, and disappears from a quick visual scan or for anyone
with low vision/cognitive load. The colour is the site-wide field
border, --site-input-border-color (static/shared/css/fields.css;
#767676 by default: 4.08:1 against a warm-cream page background /
4.54:1 against plain white, clearing WCAG 1.4.11's 3:1 non-text
minimum), shared with every other boxed field on this page
(.ql-container, .article-form-title-input/-subtitle-input/-tags-input/
-tags-row). It was #9aa5b1 for a while, to match .cover-image-
dropzone's dashed border, until the 2026-10-16 accessibility audit
(AX-07) flagged that at about 2.5:1. Padding left at Bootstrap's
own default .form-select padding (no custom padding here) rather than
the bumped-up box the rest of this form's fields use -- this select
needs to render at the exact same height as the Publish tab's own
"Publish later" time selects (#id_scheduled_at_hour/_minute/_ampm,
.schedule-time-select, plain undecorated .form-selects further down
this file), so Tags (below) and Subtitle (.article-form-subtitle-input
above) are hand-matched to this same box instead. border-radius is the
one literal 0.5rem every field on this page now shares (reported
directly), not Bootstrap's own default any more -- .scheduled-publish-
widget's own rule sets the matching value explicitly for the time
selects too, so the whole family stays in step. The native dropdown
chevron (.form-select's own background-image, untouched by only
overriding background-color/border here) stays, so it's still visibly a
dropdown, not a text field. */
.article-form-select {
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
}
.article-form-select:not(:disabled) {
background-color: transparent;
}
/* A full 2px accent ring around the whole box on focus (same pattern as
.ql-container.ql-snow:focus-within above), not just a thicker bottom rule -- a
partial indicator on one edge of the control is too easy to miss
entirely (WCAG 2.4.7 wants the *entire* control's focus state to be
obviously visible, not just implied by one edge changing). border
turns transparent instead of disappearing so the box never resizes at
focus. box-shadow: none only drops Bootstrap's own default glow, not
the browser's own native focus ring some engines (e.g. Firefox) still
draw on a regardless, which stays as an extra, unforced layer
of visibility. */
.article-form-select:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8);
}
/* Tags -- the plain, real submitted field (article_tags_editor.js's
no-JS fallback: this stays visible, exactly as it always rendered,
placeholder and all). Same full-box treatment as .article-form-select
just above -- not fully bare like Title, since typed text here would
otherwise read as plain words, not the tags they'll become. With JS,
article_tags_editor.js hides this and the chip editor below takes
over. Padding/radius left at Bootstrap's own .form-control default,
same reasoning as .article-form-select above -- .form-control and
.form-select share the same vertical padding (0.375rem) and
line-height (1.5), so this renders at that same reference height. */
.article-form-tags-input {
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
background-color: transparent;
box-shadow: none;
}
.article-form-tags-input:focus {
border-color: transparent;
background-color: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8) !important;
}
/* Outer row article_author_form.html wraps around the leading bi-hash
icon + article_tags_editor.js's own editor container -- same box
treatment as .article-form-tags-input above (the field it replaces),
just moved up here so the icon sits inside the same bordered row
instead of floating above/below it. padding/line-height are a manual
copy of Bootstrap's own .form-control values (0.375rem vertical /
1.5rem line box) -- this row is a plain , not a real
.form-control, so it has no Bootstrap default of its own to inherit;
matching those two numbers by hand is what makes it come out at the
same height as Category/Subcategory/the Tags no-JS fallback (and the
Publish tab's own time selects) despite the taller bi-hash icon
sitting inside it. :focus-within so the whole row lights up while the
typed-word input inside (see .article-form-tags-editor__input below)
has focus, not just if the row itself somehow did. */
.article-form-tags-row {
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--site-input-border-color, #767676);
border-radius: 0.5rem;
background-color: transparent;
padding: 0.375rem 0.75rem;
line-height: 1.5rem;
}
.article-form-tags-row:focus-within {
border-color: transparent;
box-shadow: 0 0 0 2px var(--site-link-color, #0067b8);
}
/* Persistent help text under Category/Subcategory/Tags (article_author_
form.html) -- darker than Bootstrap's own .form-text gray
(--bs-secondary-color, #6c757d, a ~4.7:1 AA pass only against a plain
white background) so it still clears WCAG's 4.5:1 normal-text minimum
against this page's own warm-cream PageBackground option too (#6c757d
drops to ~4.2:1 there and fails; #5c6672 holds ~5.2:1). Same gray
already used for .assessment-page-head__lede, for the same reason. */
.article-form-hint {
color: #5c6672;
}
/* A vertical rule right after the icon -- the same icon-cell/input seam
an .input-group's .input-group-text produces (see the practice-
templates/learning-path-articles search boxes above), hand-copied here
since this row is a plain flex
, not a real .input-group.
align-self: stretch fills the row's content-box height, but that box
is already inset from the row's own border by .article-form-tags-row's
0.375rem top/bottom padding -- the negative margin here cancels that
inset back out so the rule reaches the row's actual top/bottom border,
same full-height seam as a real .input-group-text's border. */
.article-form-tags-row__icon {
flex: 0 0 auto;
align-self: stretch;
margin: -0.375rem 0;
display: flex;
align-items: center;
padding-right: 0.75rem;
border-right: 1px solid var(--site-input-border-color, #767676);
color: var(--bs-secondary-color, #6c757d);
}
/* article_tags_editor.js's typed-word input, the only thing left inside
the bordered row (existing tags render as pills in
.article-form-tags-pills, below the row -- see that rule). Grows to
fill whatever width the row's icon leaves it (flex: 1 1 auto +
min-width: 0 so it can still shrink instead of overflowing the row). */
.article-form-tags-editor {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
}
.article-form-tags-editor__input {
flex: 1 1 8rem;
min-width: 6rem;
border: none;
background: transparent;
padding: 0.125rem 0;
/* 1rem, matching Category/Subcategory's own default .form-select text
size (and Subtitle's own, just above) -- this is the typed-word
input an author actually sees/types into once JS is available (the
no-JS-fallback #id_tags input it replaces is a plain .form-control,
already 1rem by Bootstrap's own default with no override needed). */
font-size: 1rem;
/* !important: beats focus.css's .form-control:focus halo, a more
specific rule; the editor box draws the ring (:focus-within). */
box-shadow: none !important;
outline: none;
}
/* This input carries no .form-control class (a plain element built by
article_tags_editor.js, not rendered by Django), so it falls back to
the browser's own lighter default placeholder gray instead of
Bootstrap's .form-control::placeholder rule -- same darker color as
Title/Subtitle's own placeholders (.article-form-title-input/
.article-form-subtitle-input, both plain Bootstrap .form-control
elements) for a readable, consistent hint across the whole tab. */
.article-form-tags-editor__input::placeholder {
color: var(--bs-secondary-color, #6c757d);
}
/* Existing tags render here, under the search/typed-word row above (not
inside it) -- a wrapping row of pills, spaced the same as the row's own
icon-to-input gap. Empty (no width/height of its own) until
article_tags_editor.js populates it, so it's harmless to leave
unhidden before JS runs. */
.article-form-tags-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
/* A pill itself never grows/shrinks with the row (its own text stays a
fixed, readable width). Larger + bold + the same muted gray as
Title/Subtitle's own hint/placeholder treatment above -- form-only
(scoped to .article-form-tags-pills, not the bare .article-detail__tag-
badge class itself), so the real published page's own tag pills
(_article_detail_content.html) are untouched. */
.article-form-tags-pills .article-detail__tag-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
flex: 0 0 auto;
cursor: default;
font-size: 0.85rem;
font-weight: 700;
color: var(--bs-secondary-color, #6c757d);
}
/* Plain "×", not a bi- icon -- small enough at this pill's own font-size
(0.8125rem) that an icon glyph would just look like a stray smudge;
a bare character reads cleanly at this scale. Muted at rest (a pill's
own border color, #6c757d) so a row of tags doesn't read as a row of
warnings; darkens to the pill's own :hover/:focus-visible text color
on interaction. */
.article-form-tags-editor__remove {
border: none;
background: none;
padding: 0;
margin: 0;
line-height: 1;
font-size: 1rem;
color: #6c757d;
}
.article-form-tags-editor__remove:hover,
.article-form-tags-editor__remove:focus-visible {
color: #212529;
}
/* .form-select:disabled's own background-color (Bootstrap's --bs-
secondary-bg tint) is deliberately left alone by the :not(:disabled)
rule above -- it's the one built-in visual cue a disabled select
already has, and removing it would make "disabled" and "enabled but
empty" indistinguishable. */
/* "Edit cover image" / "Remove cover image" under the cover dropzone
(article_author_form.html, learning_paths/author_form.html): the
assessment builder Overview step's link-styled pair, at the builder's
1rem text-size floor for small controls (`.assessment-builder .btn-sm`,
assessments.css) rather than Bootstrap's 0.875rem, so the two look the
same (product owner, 2026-10-19). Generic name: any cover-image row
could use it. */
/* .cover-image-dropzone / .cover-image-preview / .image-focal-editor__*
(the create-with-a-photo control's generic shape) now live in
static/shared/css/cards.css -- documents becoming a 3rd byte-for-byte
consumer was the "extract on the 3rd" trigger
(agent_docs/frontend-css-conventions.md). Only this form's own
per-instance override stays here: article_author_form.html's
featured_image and learning_path_author_form.html's cover_image both
author at 16:9 (.article-detail__hero's own 1920/1080), overriding
the shared block's 3/2 default. */
#articleFormFocalEditor .image-focal-editor__frame,
#learningPathFormFocalEditor .image-focal-editor__frame {
aspect-ratio: 1920 / 1080;
}
.learning-path-card__outcome {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Muted "5 articles · ~24 min" meta line under a card title. Generic
visual pattern (a small muted line of facts), so it gets a generic
name with no app prefix per agent_docs/frontend-css-conventions.md --
define it once per app stylesheet that uses it until a third app needs
a byte-for-byte copy, then it graduates to static/shared/css/cards.css.
Articles itself doesn't render this line (its own read-time badge is
.article-card__read-time below) -- learning_paths loads this same
stylesheet and is the only current user. font-size matches
.article-card__read-time's Bootstrap .small (.875em, reported directly
as a mismatch between the two cards' estimated-time text). color is
the same var(--bs-secondary-color, #6c757d) that underlies
.article-card__read-time's own .text-muted (Bootstrap 5.3's
.text-muted resolves to that token, not a flat #6c757d -- reported
directly as a colour mismatch between the two cards' article-count/
read-time text). */
.card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--bs-secondary-color, #6c757d);
}
.card__meta .card__meta-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: currentColor;
opacity: 0.55;
}
.card__meta .card__meta-total {
color: #0067b8;
font-weight: 600;
}
/* Learning-path cards: the reader card (learning_paths/_reader_card.html,
[data-lp-card] -- the Learning paths catalogue and My library's Enrolled
learning paths) and the management card (_card.html, My learning paths).
Both GitHub-style since 2026-10-18 (product owner), the same as
.article-card: no border, fill, shadow or padding, 0.5rem corners on card
and cover, a labels row under the cover (Enrolled / Completed, or the
publishing status), the title in the heading colour, the outcome as a
muted teaser, the "5 articles · ~24 min" line in the article card's
read-time spot, then text links in the footer. No fixed heights:
.card__spacer lines the footers up across a row. */
.learning-path-card {
--bs-card-border-width: 0;
--bs-card-bg: transparent;
display: flex;
flex-direction: column;
border-radius: 0.5rem;
}
.learning-path-card .card-body {
padding: 0;
}
.learning-path-card .learning-path-card__image-wrap {
aspect-ratio: 16 / 9;
}
.learning-path-card .learning-path-card__image {
aspect-ratio: 16 / 9;
height: 100%;
}
/* The reader card writes its row on one line, so it's :empty (and takes
no space) when neither Enrolled nor Completed applies. */
.learning-path-card__labels:empty {
display: none;
}
.learning-path-card__title a {
color: var(--site-heading-color, #1d1d1f);
}
/* Left out by both templates when the path has no outcome. truncatewords
cuts at a word boundary; the 4-line clamp is the safety net. */
.learning-path-card__summary {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 6em;
margin-bottom: 0.75rem;
color: #5c6672;
font-size: 1rem;
line-height: 1.5;
}
/* 1.5rem before the footer, as under the article card's read time
(0.75rem before a library card's progress bar). */
.learning-path-card__meta {
margin-bottom: 1.5rem;
}
.learning-path-card__meta--tight {
margin-bottom: 0.75rem;
}
/* Slim progress bar on the card face -- distinct from the chunkier
.learning-path-progress bar on the detail page / article page. */
.learning-path-card__progress {
height: 0.375rem;
background-color: #dee2e6;
border-radius: 980px;
overflow: hidden;
}
.learning-path-card__progress-fill {
height: 100%;
background-color: #0067b8;
border-radius: 980px;
}
.learning-path-card__progress-fill--done {
background-color: #1a7f37;
}
.learning-path-card__progress-label {
margin-top: 0.3rem;
margin-bottom: 1.5rem;
font-size: 0.75rem;
color: #6c757d;
}
/* The card face is one big Preview trigger (the title's .stretched-link
overlays it and opens the offcanvas). Each footer control is lifted
above that overlay so it keeps its own click target. */
.learning-path-card__quicklook-btn,
.learning-path-card__enroll-btn {
position: relative;
z-index: 2;
}
/* _learning_path_quicklook.html offcanvas -- a touch wider than
Bootstrap's 400px default so the numbered article list isn't cramped. */
@media (min-width: 576px) {
.offcanvas.learning-path-quicklook {
width: 27rem;
}
}
/* overflow:hidden on the wrap (not the
) so the focal-point zoom
(transform: scale below) is cropped to the box instead of spilling over
the offcanvas -- same split as .article-card__image-wrap /
.learning-path-card__image-wrap. 16 / 9 matches the browse card's own
cover ratio (.learning-path-card .learning-path-card__image-wrap). */
.learning-path-quicklook__cover-wrap {
overflow: hidden;
aspect-ratio: 16 / 9;
}
/* Bumped up from Bootstrap's .small (0.875em) -- the learning outcome is
the lead-in sentence for the tray, not a footnote. */
.learning-path-quicklook__outcome {
font-size: 1rem;
}
.learning-path-quicklook__cover,
.learning-path-preview__cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focal-x, 50%) var(--focal-y, 50%);
transform: scale(var(--zoom, 1));
transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
}
.learning-path-quicklook__list .list-group-item.is-read {
color: #6c757d;
}
.learning-path-quicklook__list .list-group-item.is-read .lp-quicklook__num {
color: #1a7f37;
}
/* "Read an article" / "Preview learning path" modal header
(learning_paths/_article_modal.html) -- site logo at the far left,
the loaded article's category/subcategory meta (moved up here by
article_modal.js's setModalMeta()) grouped with the close button at
the far right. */
.article-modal__header {
gap: 1rem;
}
.article-modal__brand .navbar-brand-logo {
height: 20px;
}
.article-modal__meta {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #6c757d;
text-transform: uppercase;
text-align: right;
}
/* "Preview learning path" modal (_learning_path_preview.html) -- a
full-bleed cover across the top of the modal body, same focal-point
crop treatment (--focal-x/--focal-y/--zoom, inline) as the card/row
images above. Also reused (unmodified) by learning_path_detail.html's
own cover. overflow:hidden on the wrap (not the
) so the zoom is
cropped to the box rather than spilling over the neighbouring column /
modal edge -- same split as .article-card__image-wrap. */
.learning-path-preview__cover-wrap {
overflow: hidden;
aspect-ratio: 3 / 2;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
/* Publish-tab readiness checklist item link (article_author_form.html +
static/shared/js/publish_checklist.js) -- jumps focus to the real field
back on the Write tab (or its cover-image modal). Generic name/no app
prefix since it's part of the shared publish_checklist.js widget, kept
here rather than in static/shared/css/cards.css until a 2nd app uses
it (same one-app-so-far threshold as every other shared-pattern rule --
see agent_docs/frontend-css-conventions.md). Plain inherited color +
no underline at rest -- the item
itself, not this link, already
carries the done/muted/optional color via .text-success/.text-muted
(JS-toggled) -- underline only on hover/focus is what marks it
interactive. */
.publish-checklist__link {
color: inherit;
text-decoration: none;
}
.publish-checklist__link:hover,
.publish-checklist__link:focus-visible {
text-decoration: underline;
}
/* --- End-of-article hand-off panels: "Put this into practice"
(documents/_practice_templates.html, {% practice_templates %}) and
"Build on What You Learned" (_article_detail_content.html). One look
for both since 2026-10-19 (product owner): black and white, no tinted
background, a 1px black border, neutral icons, and bordered rows that
turn black on hover. Each rule below names both panels' classes so the
two can't drift apart. The .practice-panel* selectors move to
static/shared/css/cards.css once a second host app renders the tag
(see that template's own comment). The learning-paths rows keep their
article-detail__ names, which the template carries for its group
labels. --- */
.practice-panel,
.learning-paths-panel {
position: relative;
overflow: hidden;
margin: 2.5rem 0;
padding: 2rem 2.25rem;
border-radius: 1.5rem;
background: none;
border: 1px solid #000;
}
.practice-panel__head,
.learning-paths-panel__head {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.35rem;
}
/* Neutral, like the card labels (.card__token's #f2f5f3): a black glyph
on pale grey, no colour. */
.practice-panel__icon,
.learning-paths-panel__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 0.85rem;
background: #f2f5f3;
color: #1d1d1f;
font-size: 1.35rem;
}
.practice-panel__title,
.learning-paths-panel__title {
font-size: 1.5rem;
font-weight: 800;
color: var(--site-text-color, #16233c);
margin: 0 0 0.35rem;
}
.practice-panel__lede,
.learning-paths-panel__lede {
color: var(--site-muted-text-color, #5c6672);
margin: 0;
max-width: 40rem;
}
.article-detail__learning-path-group + .article-detail__learning-path-group {
margin-top: 1.5rem;
}
/* Sentence case, as written ("Continue the series" / "Explore related
learning"); it was all caps (product owner, 2026-10-19). */
.article-detail__learning-path-group-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--site-muted-text-color, #5c6672);
margin: 0 0 0.65rem;
}
.practice-panel__list,
.article-detail__learning-path-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.practice-panel__item,
.article-detail__learning-path-item {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.85rem 1.1rem;
background: var(--site-card-bg-color, #fff);
border: 1px solid #dee2e6;
border-radius: 0.85rem;
text-decoration: none;
transition: border-color 0.15s ease;
}
/* A quiet hover that's still easy to see (product owner, 2026-10-19; it
was a lift with a shadow, then a pale grey fill too close to white to
notice, about 1.06:1): the row's border turns black, echoing the
panel's own black border, and the row's name is underlined. Nothing
moves, and no fill, so the grey icon tile stays visible. The underline
is the cue that doesn't rely on colour. */
.practice-panel__item:hover,
.practice-panel__item:focus-visible,
.article-detail__learning-path-item:hover,
.article-detail__learning-path-item:focus-visible {
border-color: #000;
}
.practice-panel__item:hover .practice-panel__item-title,
.practice-panel__item:focus-visible .practice-panel__item-title,
.article-detail__learning-path-item:hover .article-detail__learning-path-name,
.article-detail__learning-path-item:focus-visible .article-detail__learning-path-name {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Neutral like the panel's own icon (2026-10-19): the same black glyph on
pale grey for every row. The glyph tells an assessment from a template
in the practice panel; the group labels ("Continue the series" /
"Explore related learning") tell the learning-path rows apart. */
.practice-panel__item-icon,
.article-detail__learning-path-icon,
.article-detail__learning-path-icon--related {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.65rem;
font-size: 1.1rem;
background: #f2f5f3;
color: #1d1d1f;
}
.practice-panel__item-body,
.article-detail__learning-path-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.practice-panel__item-title,
.article-detail__learning-path-name {
font-weight: 700;
color: var(--site-link-color, #1668c9);
}
.practice-panel__item-desc,
.article-detail__learning-path-desc {
color: var(--site-muted-text-color, #5c6672);
font-size: 0.9rem;
}
/* #6c757d, 4.7:1 on white (it was #9aa5b1, about 2.5:1, under WCAG
1.4.11's 3:1); black with the border on hover / focus. */
.practice-panel__item-chevron,
.article-detail__learning-path-chevron {
flex: 0 0 auto;
color: #6c757d;
}
.practice-panel__item:hover .practice-panel__item-chevron,
.practice-panel__item:focus-visible .practice-panel__item-chevron,
.article-detail__learning-path-item:hover .article-detail__learning-path-chevron,
.article-detail__learning-path-item:focus-visible .article-detail__learning-path-chevron {
color: #000;
}
/* My library's In progress / Completed switch (learning_paths/
_library_section.html, inside the Learning Paths accordion): kept on one
line, counts included, inside the accordion's padding on a 320px phone. */
@media (max-width: 399.98px) {
.library-progress-switch .segmented-tabs__btn {
padding-left: 0.375rem;
padding-right: 0.375rem;
font-size: 0.75rem;
}
}