/* ============================================================================ Leif — SHARED site-wide theme ("Editorial / Navy") ---------------------------------------------------------------------------- Load this on EVERY themed page, BEFORE any page-specific theme file. All rules are scoped under `.ed-theme` (applied to by utils/theme-boot.js from a saved flag), so when the theme is off these rules go inert and the original styling shows through. Contains the parts that are identical across pages: • design tokens (color system) • product cards (shared productCard.js) • base type / page background • shared buttons + section headers • announcement bar • eco value tags Page-specific chrome (header cluster, category band, value band, footer) lives in each page's own theme-*.css, loaded after this file. Golden rule (color is functional): • NAVY = large surfaces / bands (value band, footer). • GREEN = eco meaning ONLY (score dot, eco tags, value circles) AND call-to-action buttons. • Everything else neutral. Two font weights: 400 / 500. ============================================================================ */ :root { /* ---- Neutrals ---- */ --leif-canvas: #F6F4EF; /* page background (warm off-white) */ --leif-surface: #FFFFFF; /* cards, header */ --leif-text: #26241F; /* primary text (warm charcoal) */ --leif-text-secondary: #7D7B73; --leif-text-muted: #9A988F; --leif-border: #E8E4DC; /* ---- Green = eco meaning ---- */ --leif-score-green: #2F6B4F; /* the Leif score + eco meaning ONLY */ --leif-score-green-tint: #EAF0EC; /* eco tag backgrounds */ /* ---- Green = call-to-action (token names legacy, values are Leif green) ---- */ --leif-action-clay: #072908; /* ALL calls-to-action */ --leif-action-clay-dark: #0b4f2d; /* hover / small text-links */ --leif-action-clay-tint: #EAF0EC; /* soft green tint (extension band) */ /* ---- Navy = large surfaces ---- */ --leif-ink: #0C1E3A; /* footer background (deep navy) */ --leif-green-deep: #16304D; /* value band + category active accent (navy) */ --leif-cream: #F1ECE0; /* value-circle fills on the navy band */ --leif-ann-ink: #26241F; /* announcement bar (charcoal) */ --leif-badge-red: #DC2626; /* cart count badge — high-visibility alert red */ --hero-eyebrow: #9DB8D6; /* light-blue accents on navy */ --hero-heading: #F3EFE6; --hero-subtext: #B7C7DE; --hero-label: #D6E0EC; --hero-decor: #24406A; /* Remap the safe base tokens the original CSS reads so pages inherit neutrals. */ --bg-page: var(--leif-canvas); --text-primary: var(--leif-text); --text-secondary: var(--leif-text-secondary); --text-muted: var(--leif-text-muted); --card-bg: var(--leif-surface); --card-border: var(--leif-border); } /* ---------- Base ---------- */ .ed-theme, .ed-theme body { background-color: var(--leif-canvas); color: var(--leif-text); } .ed-theme { font-weight: 400; } .ed-theme h1, .ed-theme h2, .ed-theme h3, .ed-theme h4 { font-weight: 500; } /* ========================================================= Announcement bar (top) — charcoal surface, muted light text ========================================================= */ .ed-theme .ext-bar { background: var(--leif-ann-ink); border-bottom: 1px solid var(--leif-ann-ink); } .ed-theme .ext-bar-inner { color: rgba(255,255,255,0.72); } .ed-theme .ext-bar-icon, .ed-theme .ext-bar-msg { color: rgba(255,255,255,0.72); } .ed-theme .ext-bar-cta { color: var(--hero-eyebrow); font-weight: 500; text-decoration: none; } .ed-theme .ext-bar-cta:hover { color: var(--hero-eyebrow); text-decoration: underline; } .ed-theme .ext-bar-close { color: rgba(255,255,255,0.55); } .ed-theme .ext-bar-close:hover { color: #fff; } /* ========================================================= Section headers + shared action buttons — green tick, neutral title, green "View all" / load-more. ========================================================= */ .ed-theme .top-products-header { border-left: 3px solid var(--leif-score-green); } .ed-theme .top-products-header .section-title { color: var(--leif-text); font-weight: 500; } .ed-theme .section-title { color: var(--leif-text); font-weight: 500; } /* Neutralize tinted per-category hero backgrounds. */ .ed-theme .section-hero { background: transparent; } .ed-theme .section-hero .section-title { color: var(--leif-text); } .ed-theme .section-hero .section-icon { color: var(--leif-text-secondary); } /* "View all" / load-more are actions → green. */ .ed-theme .section-hero .view-all-btn, .ed-theme .view-all-btn { background: var(--leif-action-clay); color: #fff; font-weight: 500; } .ed-theme .section-hero .view-all-btn:hover, .ed-theme .view-all-btn:hover { background: var(--leif-action-clay-dark); } .ed-theme .load-more-btn { background: var(--leif-action-clay); } .ed-theme .load-more-btn:hover { background: var(--leif-action-clay-dark); } /* ========================================================= PRODUCT CARDS — one consistent template over shared productCard.js. (No JS fork: position/colour here; tag-trim + CTA text + "+N" in utils/theme-cards.js.) ========================================================= */ .ed-theme .product-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 .product-card:hover { border-color: var(--leif-text-muted); box-shadow: 0 10px 26px rgba(0,0,0,0.08); } /* Image area — white. */ .ed-theme .product-image { background: #FFFFFF; border-radius: 12px 12px 0 0; } /* Score icon — keep original dark pill, move to standardized TOP-LEFT. */ .ed-theme .product-score-pill, .ed-theme .product-score-pill--likely_great, .ed-theme .product-score-pill--likely_excellent { top: 12px; left: 12px; bottom: auto; right: auto; } /* Verified badge → bottom-left (avoids the top-left chip). */ .ed-theme .certified-card-badge { top: auto; bottom: 10px; left: 10px; } /* Heart stays top-right — neutralized. */ .ed-theme .product-heart-btn { background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .ed-theme .product-heart-btn svg { stroke: var(--leif-text-muted); } .ed-theme .product-info { gap: 5px; padding: 12px 14px 8px; } /* Title — clamp to 2 lines and reserve height so cards align. */ .ed-theme .product-title { min-height: 2.8em; margin: 0; font-weight: 400; } .ed-theme .product-title a { color: var(--leif-text); font-weight: 400; } .ed-theme .product-title a:hover { color: var(--leif-action-clay); } /* Price row — reserve height even when empty. */ .ed-theme .product-price-stars-row { min-height: 20px; } .ed-theme .product-price { color: var(--leif-text); font-weight: 500; } .ed-theme .see-on-amazon-link { color: var(--leif-action-clay-dark); font-weight: 400; } .ed-theme .see-on-amazon-link:hover { color: var(--leif-action-clay); } /* Eco tags — trimmed to values + capped to 3 + "+N" by theme-cards.js. */ .ed-theme .product-tags-grouped { overflow: visible; flex-wrap: nowrap; padding-right: 0; } .ed-theme .product-tags-arrow { display: none; } .ed-theme .product-tag { border-radius: 999px; border: 1px solid var(--leif-border); background: var(--leif-canvas); color: var(--leif-text-secondary); font-weight: 400; } /* Eco-meaning tags = green tint. */ .ed-theme .product-tag--sustainability, .ed-theme .product-tag--certification, .ed-theme .product-tag--health, .ed-theme .product-tag--diet { background: var(--leif-score-green-tint); border-color: var(--leif-score-green-tint); color: var(--leif-score-green); } .ed-theme .product-tag--sustainability .product-tag-icon, .ed-theme .product-tag--certification .product-tag-icon, .ed-theme .product-tag--health .product-tag-icon, .ed-theme .product-tag--diet .product-tag-icon { color: var(--leif-score-green); } /* Synthesized "+N" pill (added by theme-cards.js). */ .ed-theme .ed-tag-more { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--leif-border); background: transparent; color: var(--leif-text-muted); line-height: 1.2; white-space: nowrap; } /* Drop the blue "X/X FEATURES" badge — keep only the gold "X/X VALUES". */ .ed-theme .values-match--blue { display: none; } /* Footer row → just the CTA, right-aligned. */ .ed-theme .product-card-footer { border-top: 1px solid var(--leif-border); } /* One CTA button in green — all retailers. */ .ed-theme .product-source-btn, .ed-theme .product-source-btn--amazon, .ed-theme .product-source-btn--affiliate, .ed-theme .product-source-btn--target, .ed-theme .product-source-btn--walmart { background: var(--leif-action-clay); color: #fff; font-weight: 500; border-radius: 999px; } .ed-theme .product-source-btn:hover, .ed-theme .product-source-btn--amazon:hover, .ed-theme .product-source-btn--affiliate:hover, .ed-theme .product-source-btn--target:hover, .ed-theme .product-source-btn--walmart:hover { background: var(--leif-action-clay-dark); }