/* ============================================= ixiun Collections — front-end styles --------------------------------------------- Colors and fonts come from the active theme's CSS custom properties (--color-*, --font-*), so the gallery and seasonal output track whatever palette the theme defines. On ixiun-onyx these variables exist already; on a different theme, define the same variables (or override these rules) to match. ============================================= */ /* --------------------------------------------- GALLERY — filterable portfolio grid ([cc_gallery]) A row of pill filters (built from the gallery_cat taxonomy) sits above a responsive grid of Gallery Item cards. gallery-filter.js toggles .is-hidden / .is-leaving; the active pill carries .is-active. --cc-gallery-cols is inline. --------------------------------------------- */ /* The highlight colour shared by the selected filter pill and the lightbox controls. Tracks the theme's primary-button gold so the gallery speaks the same language as every other button on the site; themes that don't define the button variables fall back to their plain accent. Declared on both roots because the lightbox is appended to , outside .cc-gallery. */ .cc-gallery, .cc-lightbox { --cc-accent: var(--color-btn-primary-bg, var(--color-accent)); --cc-accent-text: var(--color-btn-primary-text, var(--color-primary)); } .cc-gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 auto 3rem; } /* Pills: quiet-but-legible by default (a visible border, not a hairline); hover washes in the active colour; the selected one fills with it outright and lifts on a soft ring, so which category you're on is readable at a glance. */ .cc-gallery__filter { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: 1; padding: 0.7em 1.4em; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .cc-gallery__filter:hover { background: color-mix(in srgb, var(--cc-accent) 18%, var(--color-surface)); border-color: var(--cc-accent); } .cc-gallery__filter.is-active { background: var(--cc-accent); color: var(--cc-accent-text); border-color: var(--cc-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-accent) 22%, transparent); transform: translateY(-1px); } .cc-gallery__filter:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .cc-gallery__filter { transition: none; transform: none; } .cc-gallery__filter.is-active { transform: none; } } /* Responsive grid: --cc-gallery-cols columns on desktop, degrading to 2 then 1. */ .cc-gallery__grid { display: grid; grid-template-columns: repeat(var(--cc-gallery-cols, 3), 1fr); gap: 1.75rem; } @media (max-width: 900px) { .cc-gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cc-gallery__grid { grid-template-columns: 1fr; } } .cc-gallery__item { margin: 0; /* Filter transition: the fade/rise is driven by .is-leaving (added/removed in gallery-filter.js). Keep this 350ms in sync with FADE_MS there. */ transition: opacity 0.35s ease, transform 0.35s ease; } /* Animatable "out" (or not-yet-in) state — 0 opacity + a slight scale/drop. */ .cc-gallery__item.is-leaving { opacity: 0; transform: scale(0.96) translateY(8px); } /* Final resting state for filtered-out items: removed from the grid so the remaining items reflow to fill the gaps. Applied after the fade completes. */ .cc-gallery__item.is-hidden { display: none; } @media (prefers-reduced-motion: reduce) { .cc-gallery__item { transition: none; } } /* The media is a