/* ============================================================================ Leif List CATEGORY page — "Editorial / Navy" theme (page-specific surfaces) ---------------------------------------------------------------------------- Load order in : ../styles/theme.css (tokens · base · product cards · buttons) ../styles/theme-chrome.css (header · category sub-nav · footer) ./theme-category.css (THIS FILE — subcategory hero · toolbar · filter drawer · active-filter pills · misc) All rules scoped under `.ed-theme`; consume tokens, never raw hex. Flag off ⇒ inert ⇒ original category page. ============================================================================ */ /* Page canvas */ .ed-theme .category-page { background: transparent; } /* Category sub-nav — center the icon+label links like the homepage. (Base category.css sets justify-content:flex-start; the shared theme-chrome override doesn't re-set it, so center it here.) */ .ed-theme .category-nav-inner { justify-content: center; } @media (max-width: 640px) { /* On narrow screens fall back to left-align so the overflow-x scroll can reach the first items. */ .ed-theme .category-nav-inner { justify-content: flex-start; } } /* ========================================================= Subcategory hero — navy band (matches the homepage "Good stuff, sorted" value band). Light title + cream, non-colored subcategory pills with a navy icon, sized down. ========================================================= */ .ed-theme .subcategory-hero { background: var(--leif-green-deep); border-bottom: none; } .ed-theme .subcategory-hero-header { border-left: 3px solid var(--hero-eyebrow); } .ed-theme .subcategory-hero-title { color: var(--hero-heading); font-weight: 500; } /* Subcategory circles → ONE cream treatment (drop the rotating palette), navy glyph, smaller. */ .ed-theme .filter-chip .chip-circle { width: 64px; height: 64px; background: var(--leif-surface); border: 1px solid var(--leif-surface); } .ed-theme .filter-chip .chip-circle svg { width: 28px; height: 28px; color: var(--leif-green-deep); } .ed-theme .filter-chip .chip-circle img { width: 34px; height: 34px; opacity: 1; } .ed-theme .filter-chip:hover .chip-circle { background: var(--leif-surface); box-shadow: 0 8px 20px rgba(0,0,0,0.28); transform: translateY(-2px); } .ed-theme .filter-chip .chip-label { color: var(--hero-label); font-size: 12px; font-weight: 400; } /* Active subcategory — keep the white pill, add a light ring + brighter label. */ .ed-theme .filter-chip.active { color: var(--hero-heading); font-weight: 500; } .ed-theme .filter-chip.active .chip-circle { background: var(--leif-surface); box-shadow: 0 0 0 2px var(--leif-green-deep), 0 0 0 4px var(--hero-eyebrow); } .ed-theme .filter-chip:focus-visible .chip-circle { outline: 2px solid var(--leif-surface); } /* ========================================================= Toolbar — filter button + inline sort/store selects ========================================================= */ .ed-theme .toolbar { border-bottom: 1px solid var(--leif-border); } .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 (below the toolbar) ========================================================= */ .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); } /* Selects + tag 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 { border: 1px solid var(--leif-border); background: var(--leif-surface); color: var(--leif-text-secondary); border-radius: 999px; } .ed-theme .fp-tag:hover { border-color: var(--leif-text-muted); background: var(--leif-canvas); } .ed-theme .fp-tag: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); } .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; } /* ========================================================= Back-to-top — green action button ========================================================= */ .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); } /* ========================================================= Empty state ========================================================= */ .ed-theme .empty-state { color: var(--leif-text-secondary); } /* ========================================================= Responsive — keep the sub-nav sticky offset correct on mobile (header collapses but stays 68px tall in this theme). ========================================================= */ @media (max-width: 880px) { .ed-theme .subcategory-hero { padding-top: 16px; } .ed-theme .filter-chip .chip-circle { width: 52px; height: 52px; } .ed-theme .filter-chip .chip-circle svg { width: 24px; height: 24px; } .ed-theme .filter-chip .chip-label { font-size: 11px; } } /* Toolbar controls as offset blocks, matching the boxes elsewhere on the site (theme.css --pop-shadow-ctl). Smaller offset than a card: 7px behind a 34px control reads as a smudge. */ .ed-theme .filter-toggle, .ed-theme .toolbar-select { border: 2px solid var(--ed-tile-ink); border-radius: 12px; color: var(--ed-tile-ink); box-shadow: var(--pop-shadow-ctl); transition: transform .12s ease, box-shadow .12s ease; } .ed-theme .filter-toggle:hover, .ed-theme .toolbar-select:hover { border-color: var(--ed-tile-ink); background: var(--leif-surface); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ed-tile-ink); } .ed-theme .toolbar-select:focus { border-color: var(--ed-tile-ink); } /* Room for the block below the controls so it does not sit on the toolbar rule. */ .ed-theme .toolbar { padding-bottom: 6px; } @media (prefers-reduced-motion: reduce) { .ed-theme .filter-toggle, .ed-theme .toolbar-select { transition: none; } .ed-theme .filter-toggle:hover, .ed-theme .toolbar-select:hover { transform: none; } }