/*! * Article Page Styles * ------------------------------------------------------------ * Extends storetheme.css for long-form editorial / buying-guide * pages. Load AFTER storetheme.css — article pages only. * * Colour contract: every colour references a storetheme.css * custom property (--c-*) so the five accessibility themes * apply automatically. No new property names are introduced. * * Scoping: overrides that would change the meaning of a class * already in storetheme.css (e.g. .callout, .article-section) * are scoped under .article-page on . */ /* ════════════════════════════════════════════ ARTICLE BREADCRUMB BAR Standalone breadcrumb + disclosure row above the article hero (not inside .featured-strip). ════════════════════════════════════════════ */ .article-breadcrumb-bar { max-width: 1200px; margin: 0 auto; padding: 0.75rem 1.5rem; } /* Breadcrumb contrast fix — storetheme uses rgba(0,0,0,0.4) which is designed for the featured-strip gradient background. On the article page's white/light background the ratio drops below AA 4.5:1, so we darken the links and separators here. */ .article-breadcrumb-bar .breadcrumb a { color: rgba(0, 0, 0, 0.6); } .article-breadcrumb-bar .breadcrumb a:hover { color: rgba(0, 0, 0, 0.8); } .article-breadcrumb-bar .breadcrumb .sep, .article-breadcrumb-bar .breadcrumb span { color: rgba(0, 0, 0, 0.55); } .article-breadcrumb-bar .breadcrumb [aria-current="page"] { color: rgba(0, 0, 0, 0.6); } /* ════════════════════════════════════════════ ARTICLE HERO ════════════════════════════════════════════ */ .article-hero { background: linear-gradient(135deg, var(--c-hero-from), var(--c-hero-to)); color: #fff; padding: 3.5rem 1.5rem 3rem; text-align: left; } .article-hero-inner { max-width: 1200px; margin: 0 auto; } .article-hero h1 { font-family: var(--heading-font, inherit); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.25; margin-bottom: 1rem; } .article-hero-inner h1 {text-align:center;} .article-hero-inner img {border-radius: 9px;margin-bottom:15px;} .article-hero .subtitle { font-size: 1.1rem; opacity: 0.9; line-height: 1.6; max-width: 1100px; margin: 0 auto 0.5rem; } /* Read-more collapse */ .subtitle-wrap { max-width: 1100px; margin: 0 auto 1.25rem; overflow: hidden; } .subtitle-wrap .subtitle:first-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .subtitle-wrap .subtitle:not(:first-child) { display: none; } .subtitle-wrap.expanded .subtitle:first-child { display: block; -webkit-line-clamp: unset; overflow: visible; } .subtitle-wrap.expanded .subtitle:not(:first-child) { display: block; } .read-more-btn { background: none; border: none; color: var(--accent); font-size: 0.95rem; cursor: pointer; padding: 0.25rem 0; font-weight: 600; } .read-more-btn:hover { text-decoration: underline; } .article-meta { display: flex; justify-content: center; gap: 1.5rem; font-size: 0.85rem; opacity: 0.8; flex-wrap: wrap; } /* ════════════════════════════════════════════ TABLE OF CONTENTS ════════════════════════════════════════════ */ .toc-wrapper { max-width: 1200px; margin: 1.5rem auto; padding: 0 clamp(1rem, 5vw, 2rem); } .toc { background: var(--c-surface, #f8f7f4); border: 1px solid var(--c-border); border-radius: var(--card-radius-sm, 10px); overflow: hidden; } /* Clickable header bar */ .toc-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.25rem; cursor: pointer; user-select: none; -webkit-user-select: none; } .toc-header:hover { background: var(--c-surface-hover, #fff); } .toc-header h2 { font-family: var(--heading-font, inherit); font-size: 1rem; font-weight: 700; margin: 0; color: var(--c-primary); } .toc-count { font-size: 0.78rem; color: var(--c-text-muted, #666); font-weight: 400; } /* Chevron — reuses same pattern as product-collapse */ .toc-chevron { margin-left: auto; width: 0.5em; height: 0.5em; border-right: 2px solid var(--c-text-muted, #666); border-bottom: 2px solid var(--c-text-muted, #666); transform: rotate(45deg); transition: transform 0.3s ease; flex-shrink: 0; } .toc[data-collapsed="false"] .toc-chevron { transform: rotate(-135deg); } /* Collapsible body */ .toc-body { overflow: hidden; transition: max-height 0.35s ease; } .toc ol { list-style: decimal; padding: 0 1.25rem 1rem 2.5rem; margin: 0; columns: 2; column-gap: 2rem; } .toc li { padding: 0.2rem 0; font-size: 0.88rem; break-inside: avoid; } .toc a { color: var(--c-text); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .toc a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); } /* ════════════════════════════════════════════ ARTICLE SECTION OVERRIDES (scoped) The base .article-section / .article-inner rules live in storetheme.css. These tweaks adjust the reading experience on dedicated article pages without affecting the category landing pages. ════════════════════════════════════════════ */ .article-page .article-section { padding: 2.5rem 1.5rem; } .article-page .article-inner h2 { color: var(--c-primary-dark); } .article-page .article-inner h3 { color: var(--c-primary); } .article-page .article-inner p { line-height: 1.75; } /* ════════════════════════════════════════════ ARTICLE PICTURE Full-width-capable image container that sits above a section heading. Centres any image (1200 px, 1680 px, etc.) with the section accent line above it. ════════════════════════════════════════════ */ .article-picture { border-top: var(--section-accent-line, none); background: var(--c-surface, #fff); padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 5vw, 2rem) 0; text-align: center; } .article-picture picture, .article-picture img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--card-radius-sm, 10px); } /* Remove border-top from the section that immediately follows */ .article-picture + .article-section { border-top: none; } /* ════════════════════════════════════════════ COMPARISON TABLE Distinct from .compare-table in storetheme which is used for product-review pages. ════════════════════════════════════════════ */ .comparison-table-wrapper { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--card-radius-sm, 8px); border: 1px solid var(--c-border); -webkit-overflow-scrolling: touch; } .comparison-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 600px; } .comparison-table thead { background: var(--c-primary); color: #fff; } .comparison-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; } .comparison-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--c-border); vertical-align: top; } .comparison-table tbody tr:nth-child(even) { background: var(--c-surface, #f8f7f4); } .comparison-table tbody tr:hover { background: var(--c-surface-hover, #fff); } /* ════════════════════════════════════════════ CALLOUT EXTENSIONS The base .callout lives in storetheme.css. These additions layer on article-page refinements and an Amazon-branded variant. ════════════════════════════════════════════ */ /* Theme-aware background (storetheme hardcodes #fff8f5) */ .article-page .callout { background: var(--c-surface, #fff8f5); } .callout-title { display: block; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-accent); margin-bottom: 0.4rem; } .callout-amazon { background: var(--c-surface, #fef9ee); border-left-color: var(--c-gold); } .callout-amazon .callout-title { color: #8a6d00; /* dark amber — passes AA 4.5:1 on all theme surfaces */ } /* ════════════════════════════════════════════ CTA BUTTON GROUP Inline Amazon route buttons within article content. These use data-gstore-route and render as