/* ============================================================================ Leif VALUES ("Shop by Values") page — "Editorial / Navy" theme ---------------------------------------------------------------------------- Load order in : ../styles/theme.css (tokens · base · product cards · buttons) ../styles/theme-chrome.css (header · footer) ./theme-values.css (THIS FILE — value-chips nav, bento hero, toolbar, filter drawer, back-to-top) All rules scoped under `.ed-theme`; consume tokens, never raw hex. Flag off ⇒ inert ⇒ original values page. ============================================================================ */ .ed-theme .values-page { background: transparent; } /* ========================================================= Value chips nav — locked under the 68px header, muted tabs with a navy active underline (mirrors the category sub-nav). ========================================================= */ .ed-theme .values-nav { background: var(--leif-surface); border-bottom: 1px solid var(--leif-border); box-shadow: none; top: 68px; /* = editorial header height (base is 58px) */ } .ed-theme .values-nav-link { color: var(--leif-text-secondary); font-weight: 400; border-bottom: 2px solid transparent; } .ed-theme .values-nav-link:hover { color: var(--leif-text); } .ed-theme .values-nav-link.active { color: var(--leif-text); font-weight: 500; border-bottom-color: var(--leif-green-deep); /* navy underline */ } /* ========================================================= Bento hero — feature card goes navy (matches the site's value band); the info cards become clean white surfaces. ========================================================= */ .ed-theme .hero-card--feature { background: var(--leif-green-deep); } .ed-theme .hero-feature-overlay { background: linear-gradient(to top, rgba(12,30,58,0.85) 0%, rgba(12,30,58,0.45) 35%, transparent 60%); } .ed-theme .hero-title { color: var(--hero-heading); font-weight: 500; } .ed-theme .hero-subtitle { color: var(--hero-subtext); opacity: 1; } .ed-theme .hero-icon { color: var(--hero-heading); } .ed-theme .hero-card--why, .ed-theme .hero-card--stats, .ed-theme .hero-card--related { background: var(--leif-surface); border: 1px solid var(--leif-border); } .ed-theme .hero-card-heading { color: var(--leif-text); font-weight: 500; border-left-color: var(--leif-score-green); } .ed-theme .hero-card-heading--sm { color: var(--leif-text); } .ed-theme .hero-card-body, .ed-theme .hero-card-body-detail, .ed-theme .related-subtitle { color: var(--leif-text-secondary); } .ed-theme .hero-card-body-highlight { color: var(--leif-text); } .ed-theme .stat-number { color: var(--leif-text); } .ed-theme .stat-label { color: var(--leif-text-secondary); } .ed-theme .stat-icon { color: var(--leif-score-green); } .ed-theme .stat-divider { background: var(--leif-border); } /* Related-value chips — neutral pill, green icon */ .ed-theme .related-chip { border: 1px solid var(--leif-border); background: var(--leif-surface); color: var(--leif-text-secondary); } .ed-theme .related-chip:hover { border-color: var(--leif-text-muted); color: var(--leif-text); } .ed-theme .related-chip-icon svg { color: var(--leif-score-green); } /* ========================================================= Products section header + tagging disclaimer ========================================================= */ .ed-theme .products-section-title { color: var(--leif-text); font-weight: 500; } .ed-theme .values-disclaimer { color: var(--leif-text-muted); } /* ========================================================= Toolbar — filter button + inline selects (shared class names with the category page). ========================================================= */ .ed-theme .toolbar { border-bottom: 1px solid var(--leif-border); } .ed-theme .toolbar-count { color: var(--leif-text-secondary); } .ed-theme .filter-toggle { background: var(--leif-surface); border: 1px solid var(--leif-border); color: var(--leif-text); border-radius: 10px; font-weight: 500; } .ed-theme .filter-toggle:hover { border-color: var(--leif-text-muted); background: var(--leif-canvas); } .ed-theme .filter-count-badge { background: var(--leif-action-clay); color: #fff; } .ed-theme .toolbar-select { background: var(--leif-surface); border: 1px solid var(--leif-border); color: var(--leif-text); border-radius: 10px; } .ed-theme .toolbar-select:hover { border-color: var(--leif-text-muted); } .ed-theme .toolbar-select:focus { border-color: var(--leif-action-clay); } /* ========================================================= Active filter pills bar ========================================================= */ .ed-theme .active-filters-bar { background: transparent; border-bottom: 1px solid var(--leif-border); } .ed-theme .active-filters-clear { color: var(--leif-action-clay); font-weight: 500; } /* ========================================================= Filter drawer — surfaces + tokenized controls + green primary ========================================================= */ .ed-theme .filter-drawer { background: var(--leif-surface); } .ed-theme .drawer-header { border-bottom: 1px solid var(--leif-border); } .ed-theme .drawer-title { color: var(--leif-text); font-weight: 500; letter-spacing: 0.4px; } .ed-theme .drawer-filter-count { background: var(--leif-action-clay); color: #fff; } .ed-theme .drawer-close { color: var(--leif-text-secondary); } .ed-theme .drawer-close:hover { background: var(--leif-canvas); color: var(--leif-text); } .ed-theme .drawer-section-title { color: var(--leif-text-secondary); font-weight: 500; letter-spacing: 0.4px; } .ed-theme .drawer-divider { background: var(--leif-border); } .ed-theme .drawer-active-pills { border-bottom: 1px solid var(--leif-border); } .ed-theme .drawer-pills-clear { color: var(--leif-action-clay); font-weight: 500; } /* Selects + tag/pill chips inside the drawer */ .ed-theme .fp-select { background: var(--leif-surface); border: 1px solid var(--leif-border); color: var(--leif-text); border-radius: 10px; } .ed-theme .fp-select:hover { border-color: var(--leif-text-muted); } .ed-theme .fp-select:focus { border-color: var(--leif-action-clay); box-shadow: 0 0 0 2px var(--leif-score-green-tint); } .ed-theme .fp-tag, .ed-theme .fp-pill { border: 1px solid var(--leif-border); background: var(--leif-surface); color: var(--leif-text-secondary); border-radius: 999px; } .ed-theme .fp-tag:hover, .ed-theme .fp-pill:hover { border-color: var(--leif-text-muted); background: var(--leif-canvas); } .ed-theme .fp-tag:has(input:checked), .ed-theme .fp-pill:has(input:checked) { border-color: var(--leif-score-green); background: var(--leif-score-green-tint); color: var(--leif-score-green); } /* Drawer footer buttons — Clear neutral, View primary green */ .ed-theme .drawer-footer { border-top: 1px solid var(--leif-border); background: var(--leif-surface); } .ed-theme .drawer-btn-clear { background: var(--leif-surface); border: 1px solid var(--leif-border); color: var(--leif-text); border-radius: 999px; font-weight: 500; } .ed-theme .drawer-btn-clear:hover { border-color: var(--leif-text-muted); } .ed-theme .drawer-btn-view { background: var(--leif-action-clay); color: #fff; border-radius: 999px; font-weight: 500; } .ed-theme .drawer-btn-view:hover { background: var(--leif-action-clay-dark); } /* ========================================================= Back-to-top + empty state ========================================================= */ .ed-theme .back-to-top { background: var(--leif-action-clay); color: #fff; border: none; } .ed-theme .back-to-top:hover { background: var(--leif-action-clay-dark); } .ed-theme .empty-state { color: var(--leif-text-secondary); } /* ========================================================= Responsive — sub-nav offset stays under the editorial header ========================================================= */ @media (max-width: 880px) { .ed-theme .values-nav { top: 68px; } }