/**
* article-components.css — article typography + rich blocks · procyclingapparel.com
* §0 tokens only: ink type, g-200 hairlines, g-100 fills, red only on the CTA button.
* global.css resets every margin and list-style, so they are restored here explicitly.
*/
/* ========== Headings ========== */
.article-content h2,
.article-content h3,
.article-content h4 {
font-family: var(--ff-head, "IBM Plex Sans Condensed", Arial, sans-serif);
color: var(--ink, #111827);
font-weight: 600;
scroll-margin-top: 132px;
text-wrap: balance;
}
.article-content h2 {
font-size: clamp(26px, 2.2vw, 32px);
line-height: 1.15;
margin: 56px 0 16px;
padding-top: 24px;
border-top: 1px solid var(--g-200, #E5E7EB);
}
.article-content h3 { font-size: 22px; line-height: 1.25; margin: 36px 0 12px; }
.article-content h4 { font-size: 19px; line-height: 1.3; margin: 28px 0 10px; }
.article-content > h2:first-child,
.article-content > h3:first-child { margin-top: 0; }
/* ========== Paragraphs and lists ========== */
.article-content p { margin: 0 0 20px; text-wrap: pretty; }
.article-content > p:first-child { font-size: 19px; line-height: 1.6; }
.article-content ul,
.article-content ol { margin: 0 0 24px; padding-left: 1.4em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin: 0 0 8px; line-height: 1.65; padding-left: 4px; }
.article-content li::marker { color: var(--g-500, #6B7280); font-variant-numeric: tabular-nums; }
.article-content strong { font-weight: 600; }
/* ========== Tables (§0.4: square, hairline rows, row highlight) ========== */
.article-content table {
width: 100%;
border-collapse: collapse;
margin: 32px 0;
font-size: 15px;
line-height: 1.55;
font-variant-numeric: tabular-nums;
}
.article-content thead th {
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--g-600, #4B5563);
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--ink, #111827);
background: transparent;
}
.article-content tbody td { padding: 14px 16px; border-bottom: 1px solid var(--g-200, #E5E7EB); vertical-align: top; }
.article-content tbody tr { transition: background-color 160ms; }
.article-content tbody tr:is(:hover, :focus-within) { background: var(--g-50, #F9FAFB); box-shadow: inset 2px 0 0 var(--ink, #111827); }
/* ========== Blockquote ========== */
.article-content blockquote {
margin: 32px 0;
padding: 24px 28px;
background: var(--g-100, #F3F4F6);
border-radius: 10px;
color: var(--ink, #111827);
font-size: 19px;
line-height: 1.6;
}
.article-content blockquote p:last-child { margin-bottom: 0; }
/* ========== Code ========== */
.article-content code {
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: .9em;
padding: .1em .35em;
background: var(--g-100, #F3F4F6);
color: var(--ink, #111827);
border-radius: 2px;
}
.article-content pre {
margin: 24px 0;
padding: 20px;
background: var(--ink, #111827);
color: var(--on-ink-2, #D1D5DB);
border-radius: 10px;
overflow-x: auto;
font-size: 15px;
line-height: 1.6;
}
.article-content pre code { background: transparent; color: inherit; padding: 0; }
/* ========== Horizontal rule ========== */
.article-content hr { border: 0; height: 1px; background: var(--g-200, #E5E7EB); margin: 48px 0; }
/* ========== CTA banner ==========
render_article.py's _render_cta_banner() emits bare /
/
inside .cta-banner — style that literal shape. Ink block, one red button. */
.cta-banner-section { margin: 56px 0 0; }
.cta-banner {
padding: clamp(28px, 4vw, 44px);
background: var(--ink, #111827);
border-radius: 10px;
color: #fff;
}
.cta-banner h2,
.cta-banner-section h2,
.article-content .cta-banner h2 {
font-size: clamp(24px, 2vw, 30px);
line-height: 1.15;
color: #fff;
margin: 0 0 12px;
padding: 0;
border: 0;
}
.cta-banner p,
.article-content .cta-banner p { font-size: 17px; line-height: 1.6; color: var(--on-ink-2, #D1D5DB); margin: 0 0 24px; max-width: 56ch; }
.cta-banner .cta-button,
a.cta-button,
.article-content a.cta-button,
.cta-banner-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 14px 28px;
background: var(--red, #DC2626);
color: #fff;
font: 600 16px/1.3 var(--ff-body, "IBM Plex Sans", Arial, sans-serif);
text-decoration: none;
border-radius: 2px;
transition: background-color 160ms;
}
.cta-banner .cta-button:hover,
a.cta-button:hover,
.article-content a.cta-button:hover,
.cta-banner-button:hover { background: var(--red-dark, #B91C1C); color: #fff; text-decoration: none; }
.cta-banner-title { font-size: 28px; font-weight: 600; color: #fff; margin: 0 0 12px; }
.cta-banner-body { font-size: 17px; color: var(--on-ink-2, #D1D5DB); margin: 0 0 24px; }
/* ========== FAQ (render_article.py _render_faq() literal markup) ========== */
.faq-section { margin: 56px 0 0; }
.faq-item { border-bottom: 1px solid var(--g-200, #E5E7EB); }
.faq-item:first-of-type { border-top: 1px solid var(--g-200, #E5E7EB); }
.faq-item summary {
position: relative;
padding: 18px 40px 18px 0;
font: 600 19px/1.35 var(--ff-head, "IBM Plex Sans Condensed", Arial, sans-serif);
color: var(--ink, #111827);
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '';
position: absolute;
right: 6px;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid var(--ink, #111827);
border-bottom: 2px solid var(--ink, #111827);
transform: translateY(-70%) rotate(45deg);
transition: transform 160ms;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-answer { padding: 0 0 20px; color: var(--g-600, #4B5563); }
.faq-answer p { margin: 0; }
/* ========== Responsive ========== */
@media (max-width: 767.98px) {
.article-content h2 { margin-top: 44px; }
.article-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
.article-content tbody tr, .faq-item summary::after { transition: none; }
}