/* Site-wide hover effects — toggled via data-site-hover on or preview frame */ @property --site-hover-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes site-hover-spin { to { --site-hover-angle: 360deg; } } @keyframes site-hover-ring-spin { to { transform: rotate(360deg); } } /* Shared rotating border (conic-gradient on border-box) */ :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .post-card, .card, .btn--ghost, .btn--secondary, .btn--outline, .product-cats__chip, .product-cats__tile, .pb-tool-cards__card, .pagination__link:not(.is-active), .product-taxonomy__link, .sidebar-share__link, .sidebar-actions__btn, .empty-state, .breadcrumbs__item:has(.breadcrumbs__link) ) { position: relative; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .post-card, .card, .product-cats__chip, .product-cats__tile, .pb-tool-cards__card, .pagination__link:not(.is-active), .product-taxonomy__link, .sidebar-share__link, .sidebar-actions__btn, .empty-state ):hover { border-width: 2px; border-color: transparent; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, conic-gradient( from var(--site-hover-angle), var(--border), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--accent), var(--accent-hover), var(--accent), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--border) ) border-box; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } /* Header nav & Header action controls (cart, search, theme toggle, profile) — refined rotating ring */ :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .site-nav__link, .site-header__auth-link, .site-header__auth-profile, .site-header__cart, .site-header__search-field input, .theme-toggle ) { position: relative; isolation: isolate; z-index: 0; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .site-nav__link, .site-header__auth-link, .site-header__auth-profile, .site-header__cart, .site-header__search-field input, .theme-toggle )::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient( from var(--site-hover-angle), var(--nav-border, var(--border)), color-mix(in srgb, var(--accent) 42%, var(--nav-border, var(--border))), var(--accent), color-mix(in srgb, var(--accent-hover, var(--accent)) 90%, var(--accent)), var(--accent), color-mix(in srgb, var(--accent) 42%, var(--nav-border, var(--border))), var(--nav-border, var(--border)) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.22s ease; pointer-events: none; z-index: 1; } @media (hover: hover) and (pointer: fine) { :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-nav__link:not(.is-active):hover { color: var(--nav-link-hover); background: var(--nav-link-hover-bg); box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 11%, transparent); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-nav__link:not(.is-active):hover::after { opacity: 1; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-nav__link.is-active:hover { box-shadow: var(--nav-link-active-shadow), 0 2px 10px color-mix(in srgb, var(--accent) 13%, transparent); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-nav__link.is-active:hover::after { opacity: 0.82; animation: site-hover-spin calc(var(--site-hover-rotate-duration, 1.6s) * 1.4) linear infinite; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .site-header__auth-link, .site-header__auth-profile, .site-header__cart, .site-header__search-field input, .theme-toggle ):hover { background: transparent !important; border-color: transparent !important; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .site-header__auth-link, .site-header__auth-profile, .site-header__cart, .site-header__search-field input, .theme-toggle ):hover::after { opacity: 1; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } /* Suppress search rotating ring when expanded / focused for typing */ :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-header__search-field input:focus::after, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-header__search.is-expanded .site-header__search-field input::after, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-header__search-field input:not(:placeholder-shown)::after { opacity: 0 !important; animation: none !important; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-header__auth-link--muted:hover { opacity: 1; } } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is(.site-nav__link, .site-header__auth-link):focus-visible { outline: none; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-nav__link:not(.is-active):focus-visible { color: var(--nav-link-hover); background: var(--nav-link-hover-bg); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .site-header__auth-link:focus-visible { color: var(--accent); background: var(--accent-soft); border-color: transparent; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is(.site-nav__link, .site-header__auth-link):focus-visible::after { opacity: 1; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } @media (prefers-reduced-motion: reduce) { :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is(.site-nav__link, .site-header__auth-link):is(:hover, :focus-visible)::after { animation: none !important; opacity: 1; background: conic-gradient( from 38deg, var(--nav-border, var(--border)), color-mix(in srgb, var(--accent) 55%, var(--nav-border, var(--border))), var(--accent), color-mix(in srgb, var(--accent) 55%, var(--nav-border, var(--border))), var(--nav-border, var(--border)) ); } } :is(html, #vb-preview-frame)[data-site-hover="rotating"] :is( .btn--ghost, .btn--secondary, .btn--outline ):hover { border-width: 2px; border-color: transparent; color: var(--accent); background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, conic-gradient( from var(--site-hover-angle), var(--border), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--accent), var(--accent-hover), var(--accent), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--border) ) border-box; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .btn--ghost:hover, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .btn--secondary:hover { background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, conic-gradient( from var(--site-hover-angle), var(--border), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--accent), var(--accent-hover), var(--accent), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--border) ) border-box; } @keyframes site-btn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--site-btn-breath-scale, 1.045)); } } /* Filled buttons — breathing scale on hover */ :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] :is( .btn--primary, .auth-btn--primary ) { transform-origin: center center; border-color: transparent; transition: background-color 0.22s ease, color 0.22s ease; } @media (hover: hover) and (pointer: fine) { :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] :is( .btn--primary, .auth-btn--primary ):hover { color: var(--accent-hover-fg, var(--accent-fg, #ffffff)) !important; animation: site-btn-breathe var(--site-btn-breath-duration, 2.2s) ease-in-out infinite; } :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] .btn--primary:hover { background-color: var(--accent-btn-hover, var(--accent-hover)) !important; background-image: none !important; } :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] .auth-btn--primary:hover { background-color: var(--accent-btn-hover, var(--auth-accent-hover, var(--accent-hover))) !important; background-image: none !important; } } :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] :is( .btn--primary, .auth-btn--primary ):focus-visible { color: var(--accent-hover-fg, var(--accent-fg, #ffffff)) !important; animation: site-btn-breathe var(--site-btn-breath-duration, 2.2s) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] :is( .btn--primary, .auth-btn--primary ):is(:hover, :focus-visible) { animation: none; transform: scale(var(--site-btn-breath-scale, 1.045)); } } :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] :is( .btn--primary, .auth-btn--primary ):active { animation: none; transform: scale(0.99); } :is(html, #vb-preview-frame)[data-site-hover="rotating"][data-site-filled-cloud="on"] .pb-hero__actions .btn:hover { opacity: 1; filter: none; } /* Breadcrumbs ribbon — rotating outline (must follow ring clip-path, not refill the body) */ :is(html, #vb-preview-frame)[data-site-hover="rotating"] .breadcrumbs--ribbon .breadcrumbs__item:has(.breadcrumbs__link):is(:hover, :focus-within) { z-index: 50; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .breadcrumbs--ribbon .breadcrumbs__item:has(.breadcrumbs__link):is(:hover, :focus-within) .breadcrumbs__ring { opacity: 1; visibility: visible; background: transparent; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .breadcrumbs--ribbon .breadcrumbs__item:has(.breadcrumbs__link):is(:hover, :focus-within) .breadcrumbs__ring::before { content: ''; position: absolute; inset: 0; clip-path: inherit; border-radius: inherit; background: conic-gradient( from var(--site-hover-angle), var(--crumb-border, var(--border)), color-mix(in srgb, var(--accent) 42%, var(--crumb-border, var(--border))), var(--accent), color-mix(in srgb, var(--accent-hover, var(--accent)) 90%, var(--accent)), var(--accent), color-mix(in srgb, var(--accent) 42%, var(--crumb-border, var(--border))), var(--crumb-border, var(--border)) ); animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .breadcrumbs--ribbon .breadcrumbs__item:has(.breadcrumbs__link):is(:hover, :focus-within) .breadcrumbs__ring::after { content: ''; position: absolute; inset: 2px; clip-path: inherit; border-radius: inherit; background: var(--crumb-surface); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .breadcrumbs--ribbon .breadcrumbs__link:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { :is(html, #vb-preview-frame)[data-site-hover="rotating"] .breadcrumbs--ribbon .breadcrumbs__item:has(.breadcrumbs__link):is(:hover, :focus-within) .breadcrumbs__ring::before { animation: none !important; background: conic-gradient( from 38deg, var(--crumb-border, var(--border)), color-mix(in srgb, var(--accent) 55%, var(--crumb-border, var(--border))), var(--accent), color-mix(in srgb, var(--accent) 55%, var(--crumb-border, var(--border))), var(--crumb-border, var(--border)) ); } } /* Suppress static border-color hovers when rotating mode is active */ :is(html, #vb-preview-frame)[data-site-hover="rotating"] .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .product-cats__chip:hover, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .product-cats__tile:hover { box-shadow: var(--shadow-sm); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .pb-tool-cards__card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md-hover); } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .btn--outline:hover { color: var(--accent); background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, conic-gradient( from var(--site-hover-angle), var(--border), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--accent), var(--accent-hover), var(--accent), color-mix(in srgb, var(--accent) 35%, var(--border)), var(--border) ) border-box; } /* Fallback for browsers without @property — spinning pseudo ring on cards */ @supports not (background: conic-gradient(from 0deg, red, blue)) { :is(html, #vb-preview-frame)[data-site-hover="rotating"] .post-card::before, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .card::before { content: ''; position: absolute; inset: -60%; z-index: 0; pointer-events: none; opacity: 0; background: conic-gradient( from 0deg, transparent 0deg 50deg, var(--accent) 120deg, var(--accent-hover) 220deg, var(--accent) 300deg, transparent 340deg 360deg ); transition: opacity 0.2s ease; animation: site-hover-ring-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; animation-play-state: paused; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .post-card:hover::before, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .card:hover::before { opacity: 1; animation-play-state: running; } :is(html, #vb-preview-frame)[data-site-hover="rotating"] .post-card > *, :is(html, #vb-preview-frame)[data-site-hover="rotating"] .card > * { position: relative; z-index: 1; } } /* Admin settings preview */ .admin-hover-preview { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--admin-border); } .admin-hover-preview__label { display: block; font-size: 0.82rem; color: var(--admin-text-muted); margin-bottom: 0.65rem; } .admin-hover-preview__demo { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .admin-hover-preview__nav { --nav-border: var(--admin-border); --nav-link-hover: var(--admin-text); --nav-link-hover-bg: color-mix(in srgb, var(--admin-primary) 8%, var(--admin-card-bg, var(--admin-bg))); --nav-link-active: var(--admin-primary); --nav-link-active-bg: color-mix(in srgb, var(--admin-primary) 14%, var(--admin-card-bg, var(--admin-bg))); --nav-link-active-shadow: 0 1px 3px color-mix(in srgb, var(--admin-primary) 16%, transparent); --accent: var(--admin-primary); --accent-hover: var(--admin-primary-hover, var(--admin-primary)); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.12rem; padding: 0.26rem; border-radius: 999px; background: var(--admin-card-bg, var(--admin-bg)); border: 1px solid var(--admin-border); } .admin-hover-preview__nav-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.38rem 0.8rem; border-radius: 999px; border: none; background: transparent; color: color-mix(in srgb, var(--admin-text) 54%, var(--admin-text-muted)); font-size: 0.82rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; } .admin-hover-preview__nav-link.is-active { color: var(--admin-primary); background: color-mix(in srgb, var(--admin-primary) 14%, var(--admin-card-bg, var(--admin-bg))); box-shadow: var(--nav-link-active-shadow); font-weight: 600; } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link { position: relative; isolation: isolate; z-index: 0; } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient( from var(--site-hover-angle), var(--nav-border), color-mix(in srgb, var(--admin-primary) 42%, var(--nav-border)), var(--admin-primary), var(--admin-primary-hover, var(--admin-primary)), var(--admin-primary), color-mix(in srgb, var(--admin-primary) 42%, var(--nav-border)), var(--nav-border) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.22s ease; pointer-events: none; z-index: -1; } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link:not(.is-active):hover { color: var(--nav-link-hover); background: var(--nav-link-hover-bg); box-shadow: 0 1px 5px color-mix(in srgb, var(--admin-primary) 11%, transparent); } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link:not(.is-active):hover::after, .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link.is-active:hover::after { opacity: 1; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link.is-active:hover { box-shadow: var(--nav-link-active-shadow), 0 2px 10px color-mix(in srgb, var(--admin-primary) 13%, transparent); } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__nav-link.is-active:hover::after { opacity: 0.82; animation-duration: calc(var(--site-hover-rotate-duration, 1.6s) * 1.4); } .admin-hover-preview__card { min-width: 8.5rem; padding: 0.85rem 1.1rem; border: 1px solid var(--admin-border); border-radius: var(--radius-md, 12px); background: var(--admin-card-bg, var(--admin-bg)); text-align: center; font-size: 0.88rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .admin-hover-preview__btn { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.88rem; } .admin-hover-preview__btn--filled { display: inline-flex; align-items: center; gap: 0.45rem; } .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__card:hover, .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__btn--outline:hover, .admin-settings__form[data-hover-preview-mode="rotating"] .admin-hover-preview__btn.btn--outline:hover { border: 2px solid transparent; background: linear-gradient(var(--admin-card-bg, var(--admin-bg)), var(--admin-card-bg, var(--admin-bg))) padding-box, conic-gradient( from var(--site-hover-angle), var(--admin-border), color-mix(in srgb, var(--admin-primary) 35%, var(--admin-border)), var(--admin-primary), var(--admin-primary-hover, var(--admin-primary)), var(--admin-primary), color-mix(in srgb, var(--admin-primary) 35%, var(--admin-border)), var(--admin-border) ) border-box; animation: site-hover-spin var(--site-hover-rotate-duration, 1.6s) linear infinite; } .admin-settings__form[data-hover-preview-mode="rotating"][data-filled-cloud-preview="on"] .admin-hover-preview__btn--filled, .admin-settings__form[data-hover-preview-mode="rotating"][data-filled-cloud-preview="on"] .admin-hover-preview__btn.btn--primary { transform-origin: center center; border-color: transparent; transition: background-color 0.22s ease, color 0.22s ease; } .admin-settings__form[data-hover-preview-mode="rotating"][data-filled-cloud-preview="on"] .admin-hover-preview__btn--filled:hover, .admin-settings__form[data-hover-preview-mode="rotating"][data-filled-cloud-preview="on"] .admin-hover-preview__btn.btn--primary:hover { color: var(--accent-hover-fg, var(--accent-fg, #fff)) !important; background-color: var(--accent-btn-hover, var(--accent-hover, var(--admin-primary-hover, var(--admin-primary)))) !important; background-image: none !important; animation: site-btn-breathe var(--site-btn-breath-duration, 2.2s) ease-in-out infinite; } .admin-settings__form[data-hover-preview-mode="rotating"][data-filled-cloud-preview="on"] .admin-hover-preview__btn--filled:active, .admin-settings__form[data-hover-preview-mode="rotating"][data-filled-cloud-preview="on"] .admin-hover-preview__btn.btn--primary:active { animation: none; transform: scale(0.99); }