/** * NivoSync — Generic theme, catalogue (loop) styles. * * TOKEN LAYER: every colour/geometry is a `--ns-gen-*` custom property declared * on `.ns-theme-generic` (the class). Each resolves to * `var(--ns-gen-X-user, )` so the admin Styles panel can override it by * emitting only `--ns-gen-X-user` (scoped to .ns-theme-generic) — no source-order * fights, no collision with the plugin's global --ns-* layer, nothing leaks into * the host theme (all component rules are scoped under `.ns-generic`). * * @package NivoSync * @since 1.0.0 */ /* ========================================================================= DESIGN TOKENS — the admin overrides the *-user vars; these are the defaults. ========================================================================= */ .ns-theme-generic { --ns-gen-bg: var(--ns-gen-bg-user, #ffffff); --ns-gen-surface: var(--ns-gen-surface-user, #f4f4f3); --ns-gen-ink: var(--ns-gen-ink-user, #1a1a1a); --ns-gen-ink-soft: var(--ns-gen-ink-soft-user, #6b6b6b); --ns-gen-line: var(--ns-gen-line-user, #e3e3e1); --ns-gen-accent: var(--ns-gen-accent-user, #8a6d3b); --ns-gen-on-ink: var(--ns-gen-on-ink-user, #ffffff); --ns-gen-track: var(--ns-gen-track-user, #dcdcda); --ns-gen-active: var(--ns-gen-active-user, #d3a441); --ns-gen-focus: var(--ns-gen-focus-user, #2b6cb0); /* Button state tokens (configurable; sensible derived defaults). */ --ns-gen-btn-solid-bg: var(--ns-gen-btn-solid-bg-user, var(--ns-gen-ink)); --ns-gen-btn-solid-text: var(--ns-gen-btn-solid-text-user, var(--ns-gen-on-ink)); --ns-gen-btn-solid-hover-bg: var(--ns-gen-btn-solid-hover-bg-user, var(--ns-gen-accent)); --ns-gen-btn-solid-hover-text: var(--ns-gen-btn-solid-hover-text-user, var(--ns-gen-btn-solid-text)); --ns-gen-btn-ghost-bg: var(--ns-gen-btn-ghost-bg-user, var(--ns-gen-bg)); --ns-gen-btn-ghost-text: var(--ns-gen-btn-ghost-text-user, var(--ns-gen-ink)); --ns-gen-btn-ghost-hover-bg: var(--ns-gen-btn-ghost-hover-bg-user, var(--ns-gen-surface)); --ns-gen-card-hover-border: var(--ns-gen-card-hover-border-user, var(--ns-gen-line)); /* Type. */ --ns-gen-font-display: var(--ns-gen-font-display-user, Georgia, 'Times New Roman', serif); --ns-gen-font-body: var(--ns-gen-font-body-user, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif); /* Card text (configurable in Appearance › Styles → Card Text). */ --ns-gen-card-title-size: var(--ns-gen-card-title-size-user, 15px); --ns-gen-card-desc-size: var(--ns-gen-card-desc-size-user, 13px); --ns-gen-card-text-align: var(--ns-gen-card-text-align-user, left); /* Geometry / motion. */ --ns-gen-radius: var(--ns-gen-radius-user, 4px); --ns-gen-radius-lg: var(--ns-gen-radius-lg-user, 8px); --ns-gen-gap: 16px; --ns-gen-maxw: 1280px; --ns-gen-card-min: 240px; --ns-gen-t: 160ms ease; } /* ========================================================================= BASE (scoped) ========================================================================= */ .ns-generic { color: var(--ns-gen-ink); font-family: var(--ns-gen-font-body); font-size: 15px; line-height: 1.5; } .ns-generic *, .ns-generic *::before, .ns-generic *::after { box-sizing: border-box; } .ns-generic img, .ns-generic svg { display: block; max-width: 100%; } .ns-generic button { font: inherit; cursor: pointer; } .ns-generic a { color: inherit; text-decoration: none; } .ns-generic .ns-wrap { max-width: var(--ns-gen-maxw); margin: 0 auto; padding: 0 20px; } .ns-generic :focus-visible { outline: 2px solid var(--ns-gen-focus); outline-offset: 2px; } .ns-generic .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .ns-generic * { transition: none !important; } } /* Intro */ .ns-generic .ns-intro { text-align: center; padding: 20px 0 8px; } .ns-generic .ns-intro h1 { font-family: var(--ns-gen-font-display); font-weight: 500; font-size: 30px; margin: 0 0 10px; letter-spacing: .2px; color: var(--ns-gen-ink); } .ns-generic .ns-intro p { max-width: 620px; margin: 0 auto; color: var(--ns-gen-ink-soft); font-size: 14px; } /* Tabs */ .ns-generic .ns-tabs { display: flex; justify-content: center; gap: 34px; border-bottom: 1px solid var(--ns-gen-line); margin: 22px 0 26px; } .ns-generic .ns-tab { background: none; border: 0; padding: 12px 2px; color: var(--ns-gen-ink-soft); font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ns-gen-t), border-color var(--ns-gen-t); } .ns-generic .ns-tab[aria-selected="true"] { color: var(--ns-gen-ink); border-color: var(--ns-gen-ink); } /* Filters grid */ .ns-generic .ns-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 44px; margin-bottom: 22px; } .ns-generic .ns-filter__label { font-weight: 600; font-size: 14px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .ns-generic .ns-range__val { color: var(--ns-gen-accent); font-weight: 600; font-size: 12px; } /* Shape selector */ .ns-generic .ns-shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .ns-generic .ns-shape { border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ns-gen-ink-soft); transition: border-color var(--ns-gen-t), color var(--ns-gen-t); } .ns-generic .ns-shape svg { width: 22px; height: 22px; stroke: currentColor; fill: none; } .ns-generic .ns-shape[aria-pressed="true"] { border-color: var(--ns-gen-ink); color: var(--ns-gen-ink); } /* Range slider. Host themes style bare form fields aggressively: Elementor's kit ships `.elementor-kit-N input:not([type="button"]):not([type="submit"])` — (0,3,1), which outranks a plain `.ns-generic .ns-range__input` (0,2,0) and repaints the 3px track as a padded, rounded, opaque box. Match `.ns-range input[type=range]` to reach (0,4,1) so we win on specificity rather than on load order, and reset padding/border explicitly — the kit sets padding on every input and nothing here used to oppose it. Keep this shape when adding rules for these inputs. */ .ns-generic .ns-range { margin-top: 4px; } .ns-generic .ns-range input.ns-range__input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; padding: 0; border: 0; border-radius: 3px; background: var(--ns-gen-track); outline-offset: 6px; } .ns-generic .ns-range__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ns-gen-bg); border: 1px solid var(--ns-gen-ink-soft); box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: pointer; } .ns-generic .ns-range__input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ns-gen-bg); border: 1px solid var(--ns-gen-ink-soft); cursor: pointer; } /* Dual-handle range (colour / clarity / cut): two inputs over one track */ .ns-generic .ns-range--dual { position: relative; height: 18px; margin-top: 6px; } .ns-generic .ns-range--dual::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 3px; background: var(--ns-gen-track); } .ns-generic .ns-range--dual input.ns-range__input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 18px; margin: 0; padding: 0; background: transparent; pointer-events: none; } .ns-generic .ns-range--dual .ns-range__input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 2; } .ns-generic .ns-range--dual .ns-range__input::-moz-range-thumb { pointer-events: auto; } .ns-generic .ns-range--dual .ns-range__input[data-range="max"] { z-index: 1; } .ns-generic .ns-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ns-gen-ink-soft); margin-top: 8px; } /* Min/max selects */ .ns-generic .ns-minmax { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; } .ns-generic .ns-minmax__sel { flex: 1; padding: 8px 10px; font: inherit; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); color: var(--ns-gen-ink); } /* Advanced bar */ .ns-generic .ns-advbar { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; border-top: 1px solid var(--ns-gen-line); border-bottom: 1px solid var(--ns-gen-line); padding: 12px 0; margin: 6px 0 14px; } .ns-generic .ns-advbar__toggle { font-weight: 600; background: none; padding: 6px 12px; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); color: var(--ns-gen-ink); } .ns-generic .ns-toggle-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ns-gen-ink-soft); } .ns-generic .ns-search { margin-left: auto; position: relative; } .ns-generic .ns-search__input { padding: 9px 12px; width: 260px; max-width: 100%; font: inherit; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); color: var(--ns-gen-ink); } /* Advanced panel */ .ns-generic .ns-adv { display: flex; flex-wrap: wrap; gap: 26px; padding: 4px 0 18px; } .ns-generic .ns-adv__group { min-width: 160px; } .ns-generic .ns-adv__label { font-weight: 600; font-size: 13px; margin: 0 0 8px; } .ns-generic .ns-adv__chips { display: flex; flex-wrap: wrap; gap: 6px; } .ns-generic .ns-chip-btn { border: 1px solid var(--ns-gen-line); border-radius: 99px; background: var(--ns-gen-bg); color: var(--ns-gen-ink-soft); padding: 5px 12px; font-size: 12px; transition: all var(--ns-gen-t); } .ns-generic .ns-chip-btn[aria-pressed="true"] { background: var(--ns-gen-ink); color: var(--ns-gen-on-ink); border-color: var(--ns-gen-ink); } /* Toolbar */ .ns-generic .ns-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .ns-generic .ns-count { font-size: 13px; color: var(--ns-gen-ink-soft); } .ns-generic .ns-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; } .ns-generic .ns-sort { padding: 7px 10px; font: inherit; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); color: var(--ns-gen-ink); } /* Grid + card */ .ns-generic .ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ns-gen-card-min), 1fr)); gap: 24px; padding-bottom: 40px; } .ns-generic .ns-card { border: 1px solid transparent; border-radius: var(--ns-gen-radius); transition: border-color var(--ns-gen-t); cursor: pointer; } .ns-generic .ns-card:hover { border-color: var(--ns-gen-card-hover-border); } .ns-generic .ns-card__media { position: relative; background: var(--ns-gen-surface); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--ns-gen-radius) var(--ns-gen-radius) 0 0; } .ns-generic .ns-card__media-link { display: block; width: 100%; height: 100%; } .ns-generic .ns-card__img { width: 100%; height: 100%; object-fit: cover; } .ns-generic .ns-card__wish { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: var(--ns-gen-bg); border: 1px solid var(--ns-gen-line); border-radius: 50%; color: var(--ns-gen-ink-soft); transition: color var(--ns-gen-t); } .ns-generic .ns-card__wish svg { width: 18px; height: 18px; display: block; stroke: currentColor; } .ns-generic .ns-card__wish:hover, .ns-generic .ns-card__wish.is-active { color: var(--ns-gen-accent); } .ns-generic .ns-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--ns-gen-ink); color: var(--ns-gen-on-ink); font-size: 10px; letter-spacing: .3px; padding: 3px 8px; border-radius: 99px; text-transform: uppercase; } .ns-generic .ns-card__body { padding: 14px 12px 12px; text-align: var(--ns-gen-card-text-align); } .ns-generic .ns-card__title { font-weight: 600; font-size: var(--ns-gen-card-title-size); margin: 0 0 6px; } .ns-generic .ns-card__specs { color: var(--ns-gen-accent); font-size: var(--ns-gen-card-desc-size); margin: 0 0 12px; } .ns-generic .ns-card__price { font-weight: 700; font-size: 15px; color: var(--ns-gen-ink); } .ns-generic .ns-card__price small { font-weight: 400; color: var(--ns-gen-ink-soft); font-size: 12px; } .ns-generic .ns-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--ns-gen-t), opacity var(--ns-gen-t); } .ns-generic .ns-card__actions:only-child { grid-template-columns: 1fr; } .ns-generic .ns-card:hover .ns-card__actions, .ns-generic .ns-card:focus-within .ns-card__actions { max-height: 60px; opacity: 1; } /* Buttons */ .ns-generic .ns-btn { border-radius: var(--ns-gen-radius); padding: 10px 8px; font-size: 13px; text-align: center; border: 1px solid var(--ns-gen-ink); transition: background-color var(--ns-gen-t), color var(--ns-gen-t); } .ns-generic .ns-btn--ghost { background: var(--ns-gen-btn-ghost-bg); color: var(--ns-gen-btn-ghost-text); } .ns-generic .ns-btn--ghost:hover { background: var(--ns-gen-btn-ghost-hover-bg); } .ns-generic .ns-btn--solid { background: var(--ns-gen-btn-solid-bg); color: var(--ns-gen-btn-solid-text); border-color: var(--ns-gen-btn-solid-bg); } .ns-generic .ns-btn--solid:hover { background: var(--ns-gen-btn-solid-hover-bg); border-color: var(--ns-gen-btn-solid-hover-bg); color: var(--ns-gen-btn-solid-hover-text); } /* Numbered pagination */ .ns-generic .ns-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0 60px; } .ns-generic .ns-pagination[hidden] { display: none; } .ns-generic .ns-page { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--ns-gen-line); background: var(--ns-gen-bg); color: var(--ns-gen-ink); border-radius: var(--ns-gen-radius); font-size: 14px; transition: background-color var(--ns-gen-t), border-color var(--ns-gen-t); } .ns-generic .ns-page:hover:not([disabled]):not(.is-current) { border-color: var(--ns-gen-ink); } .ns-generic .ns-page.is-current { background: var(--ns-gen-ink); color: var(--ns-gen-on-ink); border-color: var(--ns-gen-ink); cursor: default; } .ns-generic .ns-page[disabled] { opacity: .4; cursor: default; } .ns-generic .ns-page-ellipsis { color: var(--ns-gen-ink-soft); padding: 0 2px; } /* Load more + empty */ .ns-generic .ns-loadmore-wrap { text-align: center; padding-bottom: 60px; } .ns-generic .ns-loadmore { background: var(--ns-gen-btn-solid-bg); color: var(--ns-gen-btn-solid-text); border: 1px solid var(--ns-gen-btn-solid-bg); border-radius: var(--ns-gen-radius); padding: 12px 28px; font-size: 14px; transition: background-color var(--ns-gen-t); } .ns-generic .ns-loadmore:hover { background: var(--ns-gen-btn-solid-hover-bg); border-color: var(--ns-gen-btn-solid-hover-bg); color: var(--ns-gen-btn-solid-hover-text); } /* --- Host-theme hover-bleed guard ---------------------------------------- Elementor's kit styles every bare