/* ============================================================================ Leif List CONTENT PAGES (pages/*.html) — "Editorial / Navy" theme ---------------------------------------------------------------------------- Shared page-specific layer for the informational pages under pages/ (currently wired on methodology.html + extension.html; reusable for about/faq/contact/…). Load order in : ../styles/theme.css (tokens · base · product cards · buttons) ../styles/theme-chrome.css (header · footer) ./theme-pages.css (THIS FILE — content cards + the lighter header these pages use) pages.css gives these pages a GREEN header + green headings via --header-bg; theme-chrome makes the header white, and this file re-tunes the content surfaces + headings to the editorial palette. All scoped under `.ed-theme`. ============================================================================ */ /* ========================================================= Header — these pages carry a lighter action set (no cart / tutorial / hamburger). Keep the feedback icon + avatar visible at every width since there's no mobile overflow menu here. ========================================================= */ @media (max-width: 880px) { .ed-theme .ed-header .ed-icon-btn, .ed-theme .ed-header .ed-avatar-wrap { display: inline-flex; } } /* ========================================================= Page content — warm canvas, ink headings @ 500 (base uses the green --header-bg), neutral body text, white content cards. ========================================================= */ .ed-theme .page-content { background: transparent; } .ed-theme .page-title-section h1 { color: var(--leif-text); font-weight: 500; } .ed-theme .page-title-section .subtitle { color: var(--leif-text-secondary); } .ed-theme .content-card { background: var(--leif-surface); border: 1px solid var(--leif-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .ed-theme .content-card h2 { color: var(--leif-text); font-weight: 500; } .ed-theme .content-card h3 { color: var(--leif-text); font-weight: 500; } .ed-theme .content-card p, .ed-theme .content-card ul li { color: var(--leif-text); } .ed-theme .content-card a { color: var(--leif-action-clay); font-weight: 500; } .ed-theme .content-card a:hover { color: var(--leif-action-clay-dark); } /* Three-pillar cards (methodology) → white token surfaces, ink heads */ .ed-theme .pillar-card { background: var(--leif-surface); border: 1px solid var(--leif-border); border-radius: 12px; } .ed-theme .pillar-card h3 { color: var(--leif-text); font-weight: 500; } .ed-theme .pillar-card p { color: var(--leif-text-secondary); } /* ========================================================= Extension page — install buttons stay green (CTA); neutralize the feature cards + slideshow captions for cohesion. ========================================================= */ .ed-theme .install-btn { background: var(--leif-action-clay); color: #fff; } .ed-theme .install-btn:hover { background: var(--leif-action-clay-dark); } .ed-theme .install-btn.secondary { background: var(--leif-surface); color: var(--leif-text); border: 1px solid var(--leif-border); } .ed-theme .install-btn.secondary:hover { background: var(--leif-canvas); } .ed-theme .install-btn-note { color: var(--leif-text-muted); } .ed-theme .feature-item { background: var(--leif-surface); border: 1px solid var(--leif-border); } .ed-theme .feature-icon { color: var(--leif-score-green); } .ed-theme .feature-text h3, .ed-theme .feature-text h4 { color: var(--leif-text); font-weight: 500; } .ed-theme .feature-text p { color: var(--leif-text-secondary); } .ed-theme .slideshow-caption-title { color: var(--leif-text); font-weight: 500; } .ed-theme .slideshow-caption-text { color: var(--leif-text-secondary); } .ed-theme .slideshow-step-badge { background: var(--leif-canvas); color: var(--leif-text-secondary); border: 1px solid var(--leif-border); }