:root { --aio-brand-900: #1e2a52;
--aio-brand-800: #2c3d70;
--aio-brand-700: #35497f;
--aio-brand-600: #405aa6; --aio-brand-500: #5271ff; --aio-brand-400: #7b91ff;
--aio-brand-300: #a8b8ff;
--aio-brand-100: #e8ecff;
--aio-brand-50: #f3f5ff;
--aio-primary: var(--aio-brand-600);
--aio-primary-dark: var(--aio-brand-700);
--aio-primary-bright: var(--aio-brand-500);
--aio-primary-tint: var(--aio-brand-100);
--aio-accent: #f5a524;
--aio-success: #14a05c;
--aio-danger: #dc2626; --aio-radius-sm: 10px;
--aio-radius: 16px;
--aio-radius-lg: 24px;
--aio-radius-xl: 32px;
--aio-radius-pill: 999px; --aio-content: 760px;
--aio-wide: 1240px;
--aio-gutter: clamp(1rem, 4vw, 2rem);
--aio-header-height: 66px; --aio-ease: cubic-bezier(0.4, 0, 0.2, 1);
--aio-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--aio-transition: 200ms var(--aio-ease); --aio-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--aio-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--aio-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
} [data-scheme="light"],
:root:not([data-scheme]) {
--aio-bg: #f7f8fd;
--aio-surface: #ffffff;
--aio-surface-2: #eef1f9;
--aio-card: #ffffff;
--aio-ink: #16203d;
--aio-text: #414c6b; --aio-muted: #626c88;
--aio-line: #e2e7f3;
--aio-line-strong: #c9d1e6;
--aio-overlay: rgba(22, 32, 61, 0.5); --aio-glass-bg: rgba(255, 255, 255, 0.62);
--aio-glass-bg-strong: rgba(255, 255, 255, 0.82);
--aio-glass-border: rgba(255, 255, 255, 0.7);
--aio-glass-edge: rgba(64, 90, 166, 0.1);
--aio-glass-shadow: 0 1px 2px rgba(30, 42, 82, 0.04), 0 12px 32px rgba(30, 42, 82, 0.08);
--aio-glass-shadow-lg: 0 2px 6px rgba(30, 42, 82, 0.06), 0 24px 60px rgba(30, 42, 82, 0.12);
--aio-glass-blur: 18px; --aio-mesh-1: rgba(82, 113, 255, 0.16);
--aio-mesh-2: rgba(64, 90, 166, 0.13);
--aio-mesh-3: rgba(168, 184, 255, 0.18);
--aio-shadow-sm: 0 1px 2px rgba(30, 42, 82, 0.04), 0 6px 18px rgba(30, 42, 82, 0.06);
--aio-shadow: 0 2px 6px rgba(30, 42, 82, 0.06), 0 18px 44px rgba(30, 42, 82, 0.1);
color-scheme: light;
} [data-scheme="dark"] {
--aio-bg: #0a0f22;
--aio-surface: #121a33;
--aio-surface-2: #18213f;
--aio-card: #131c38;
--aio-ink: #eef2ff;
--aio-text: #c3cbe6;
--aio-muted: #8d98bb;
--aio-line: #253157;
--aio-line-strong: #35446f;
--aio-overlay: rgba(3, 6, 18, 0.68);
--aio-primary: var(--aio-brand-400);
--aio-primary-dark: var(--aio-brand-300);
--aio-primary-bright: var(--aio-brand-400);
--aio-primary-tint: rgba(82, 113, 255, 0.16);
--aio-glass-bg: rgba(24, 33, 63, 0.6);
--aio-glass-bg-strong: rgba(18, 26, 51, 0.85);
--aio-glass-border: rgba(255, 255, 255, 0.1);
--aio-glass-edge: rgba(123, 145, 255, 0.16);
--aio-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
--aio-glass-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.45);
--aio-mesh-1: rgba(82, 113, 255, 0.2);
--aio-mesh-2: rgba(64, 90, 166, 0.22);
--aio-mesh-3: rgba(123, 145, 255, 0.14);
--aio-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
--aio-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.4);
color-scheme: dark;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--aio-header-height) + 1rem);
} html,
body {
overflow-x: clip;
}
body {
position: relative;
margin: 0;
min-height: 100vh;
background: var(--aio-bg);
color: var(--aio-text);
font-family: var(--aio-font-sans);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: background-color var(--aio-transition), color var(--aio-transition);
} body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60rem 40rem at 12% -8%, var(--aio-mesh-1), transparent 60%),
radial-gradient(50rem 36rem at 92% 4%, var(--aio-mesh-3), transparent 62%),
radial-gradient(46rem 34rem at 74% 88%, var(--aio-mesh-2), transparent 60%);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.5em;
color: var(--aio-ink);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.022em;
text-wrap: balance;
} h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, figcaption {
overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); }
h4 { font-size: 1.0625rem; }
p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
margin: 0 0 1.25rem;
}
p:last-child,
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
a {
color: var(--aio-primary);
text-decoration: none;
transition: color var(--aio-transition);
}
a:hover,
a:focus-visible {
color: var(--aio-primary-bright);
text-decoration: underline;
text-underline-offset: 2px;
}
hr {
height: 1px;
margin: 2.5rem 0;
border: 0;
background: var(--aio-line);
}
blockquote {
padding-left: 1.25rem;
border-left: 3px solid var(--aio-primary-bright);
font-family: var(--aio-font-serif);
font-size: 1.125rem;
}
code,
kbd,
pre,
samp {
font-family: var(--aio-font-mono);
font-size: 0.875em;
}
code {
padding: 0.15em 0.4em;
border-radius: 6px;
background: var(--aio-surface-2);
}
pre {
padding: 1rem 1.25rem;
overflow-x: auto;
border-radius: var(--aio-radius);
background: var(--aio-surface-2);
}
pre code {
padding: 0;
background: none;
}
iframe,
embed,
object {
max-width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
} @media (max-width: 640px) {
.entry-content table,
.comparison__table,
.spec-table {
display: block;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
}
th,
td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--aio-line);
text-align: left;
vertical-align: top;
}
th {
color: var(--aio-ink);
font-weight: 600;
} @media (prefers-reduced-transparency: reduce) {
*,
*::before,
*::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.glass,
.stat-card,
.auth-card,
.btn--ghost {
background: var(--aio-surface) !important;
border-color: var(--aio-line) !important;
}
}  .glass {
position: relative;
background: var(--aio-surface);
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius);
box-shadow: var(--aio-glass-shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass {
background: var(--aio-glass-bg);
border-color: var(--aio-glass-border);
-webkit-backdrop-filter: blur(var(--aio-glass-blur)) saturate(180%);
backdrop-filter: blur(var(--aio-glass-blur)) saturate(180%);
}
.glass--strong {
background: var(--aio-glass-bg-strong);
}
} .glass--lit::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
border-radius: inherit;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.75),
transparent
);
pointer-events: none;
}
[data-scheme="dark"] .glass--lit::before {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.22),
transparent
);
} @media (prefers-reduced-transparency: reduce) {
.glass,
.glass--strong {
background: var(--aio-surface) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body::before {
display: none;
}
} :focus-visible {
outline: 2px solid var(--aio-primary-bright);
outline-offset: 2px;
border-radius: 6px;
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 999;
padding: 0.75rem 1.25rem;
border-radius: 0 0 var(--aio-radius-sm) var(--aio-radius-sm);
background: var(--aio-primary);
color: #fff;
font-weight: 600;
transition: top var(--aio-transition);
}
.skip-link:focus {
top: 0;
color: #fff;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
} .alignleft {
float: left;
margin: 0.5rem 1.5rem 1rem 0;
}
.alignright {
float: right;
margin: 0.5rem 0 1rem 1.5rem;
}
.aligncenter {
margin-inline: auto;
}
.wp-caption-text,
.wp-element-caption figcaption {
margin-top: 0.5rem;
color: var(--aio-muted);
font-size: 0.8125rem;
}
.sticky .card__title::before {
content: "★ ";
color: var(--aio-accent);
}.container {
width: 100%;
max-width: var(--aio-wide);
margin-inline: auto;
padding-inline: var(--aio-gutter);
}
.container--narrow {
max-width: var(--aio-content);
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1 0 auto;
padding-block: clamp(1.5rem, 4vw, 3rem);
}
.section {
margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
.section:first-child {
margin-top: 0;
}
.section__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--aio-line);
}
.section__title {
margin: 0;
font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
}
.section__title::before {
content: "";
display: inline-block;
width: 4px;
height: 0.85em;
margin-inline-end: 0.6rem;
border-radius: 2px;
background: linear-gradient(180deg, var(--aio-brand-500), var(--aio-brand-600));
vertical-align: -0.05em;
}
.section__link {
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.section__link::after {
content: " →";
} .grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.layout-sidebar {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 1000px) {
.layout-sidebar {
grid-template-columns: minmax(0, 1fr) 320px;
}
.layout-sidebar--left {
grid-template-columns: 300px minmax(0, 1fr);
}
}
.sidebar {
position: sticky;
top: calc(var(--aio-header-height) + 1.5rem);
display: grid;
gap: 1.5rem;
}
@media (max-width: 999px) {
.sidebar {
position: static;
}
} .site-header {
position: sticky;
top: 0;
z-index: 100;
border-width: 0 0 1px;
border-radius: 0;
box-shadow: none;
}
.site-header::after {
content: "";
position: absolute;
inset: auto 0 -1px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--aio-glass-edge), transparent);
}
.header-bar {
display: flex;
align-items: center;
gap: clamp(0.5rem, 2vw, 1.25rem);
min-height: var(--aio-header-height);
min-width: 0;
} .header-bar > * {
min-width: 0;
}
.site-branding {
display: flex;
align-items: center;
flex-shrink: 0;
min-width: 0;
}
.site-logo img,
.custom-logo {
width: auto;
height: 38px;
max-width: 100%;
}
@media (max-width: 480px) {
.site-logo img,
.custom-logo {
height: 30px;
}
}
.site-logo--mark img {
height: 34px;
}
.site-title {
margin: 0;
font-size: 1.1875rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.site-title a {
color: var(--aio-brand-600);
}
.site-title a:hover {
text-decoration: none;
}
.site-title__accent {
color: var(--aio-brand-500);
} .primary-nav {
margin-inline-start: 0.5rem;
}
.primary-nav ul {
display: flex;
align-items: center;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.primary-nav a {
display: block;
padding: 0.45rem 0.75rem;
border-radius: var(--aio-radius-sm);
color: var(--aio-text);
font-size: 0.9rem;
font-weight: 600;
transition: background-color var(--aio-transition), color var(--aio-transition);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
background: var(--aio-primary-tint);
color: var(--aio-primary);
text-decoration: none;
}
.primary-nav__footer {
display: none;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
margin-inline-start: auto;
} .header-search {
position: relative;
}
.header-search__panel {
position: absolute;
top: calc(100% + 0.6rem);
inset-inline-end: 0;
z-index: 130;
width: min(420px, calc(100vw - 2 * var(--aio-gutter)));
padding: 0.65rem;
border-radius: var(--aio-radius);
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(0.98);
transform-origin: top right;
transition:
opacity 160ms var(--aio-ease),
transform 200ms var(--aio-spring),
visibility 160ms;
}
.header-search[data-open="true"] .header-search__panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.header-search[data-open="true"] .header-search__toggle {
background: var(--aio-primary-tint);
border-color: var(--aio-primary);
color: var(--aio-primary);
} @media (min-width: 1120px) {
.header-search__panel {
width: 420px;
}
} .topics-bar {
border-top: 1px solid var(--aio-glass-edge);
}
.topics-bar__list {
display: flex;
gap: 1.25rem;
margin: 0;
padding: 0.55rem 0;
overflow-x: auto;
list-style: none;
scrollbar-width: none;
-ms-overflow-style: none;
}
.topics-bar__list::-webkit-scrollbar {
display: none;
}
.topics-bar__list a {
color: var(--aio-muted);
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.topics-bar__list a:hover,
.topics-bar__list .current-menu-item > a {
color: var(--aio-primary);
text-decoration: none;
}
@media (max-width: 900px) {
.topics-bar {
display: none;
}
}  .header-actions .nav-toggle {
display: none;
}
.nav-toggle__bars {
display: grid;
gap: 4px;
width: 18px;
}
.nav-toggle__bars span {
display: block;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform var(--aio-transition), opacity var(--aio-transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (max-width: 1000px) {
.header-actions__cta {
display: none;
}
}
@media (max-width: 920px) { .site-header {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--aio-bg);
}
.header-actions .nav-toggle {
display: inline-flex;
}
.header-actions__account {
display: none;
}
.primary-nav {
position: fixed;
inset: var(--aio-header-height) 0 0;
z-index: 90;
display: flex;
flex-direction: column;
gap: 1.5rem;
margin: 0;
padding: 1.5rem var(--aio-gutter) 2.5rem;
background: var(--aio-bg);
overflow-y: auto;
transform: translateX(100%);
transition: transform 260ms var(--aio-ease);
}
@supports (backdrop-filter: blur(1px)) {
.primary-nav {
background: var(--aio-glass-bg-strong);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
}
}
.primary-nav[data-open="true"] {
transform: translateX(0);
}
.primary-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
}
.primary-nav a {
padding: 0.85rem 1rem;
font-size: 1.0625rem;
}
.primary-nav__footer {
display: grid;
gap: 0.6rem;
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid var(--aio-line);
}
} .footer-cta-wrap {
margin-top: clamp(3rem, 8vw, 5rem);
}
.footer-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem 2.5rem;
padding: clamp(1.5rem, 4vw, 2.5rem);
border-radius: var(--aio-radius-lg);
overflow: hidden;
}
.footer-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(24rem 16rem at 88% 10%, rgba(82, 113, 255, 0.22), transparent 65%),
radial-gradient(20rem 14rem at 4% 92%, rgba(64, 90, 166, 0.18), transparent 65%);
pointer-events: none;
}
.footer-cta__text {
flex: 1 1 300px;
}
.footer-cta__text h2 {
margin-bottom: 0.35rem;
font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
}
.footer-cta__text p {
margin: 0;
color: var(--aio-muted);
max-width: 46ch;
}
.footer-cta__form {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1 1 320px;
max-width: 440px;
}
.footer-cta__form input[type="email"] {
flex: 1 1 190px;
min-width: 0;
} .site-footer {
margin-top: clamp(2.5rem, 6vw, 4rem);
border-top: 1px solid var(--aio-line);
background: linear-gradient(180deg, transparent, var(--aio-surface-2));
color: var(--aio-muted);
font-size: 0.9375rem; content-visibility: auto;
contain-intrinsic-size: auto 480px;
}
.footer-grid {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
padding-block: clamp(2.5rem, 5vw, 4rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.footer-brand {
grid-column: 1 / -1;
max-width: 40ch;
}
@media (min-width: 1000px) {
.footer-grid {
grid-template-columns: 1.6fr 1fr 1fr 1.4fr 1fr;
}
.footer-brand {
grid-column: span 1;
}
}
.footer-brand .site-logo img {
height: 34px;
}
.footer-brand__blurb {
margin: 1rem 0 1.25rem;
font-size: 0.875rem;
line-height: 1.65;
}
.footer-trust {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
}
.footer-trust li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.footer-trust__icon {
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 0.15rem;
border-radius: 50%;
background: var(--aio-primary-tint);
color: var(--aio-primary);
font-size: 10px;
font-weight: 800;
line-height: 16px;
text-align: center;
}
.footer-col__title {
margin: 0 0 1rem;
color: var(--aio-ink);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.09em;
}
.footer-col ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
font-size: 0.875rem;
}
.footer-col li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.footer-col a {
color: var(--aio-muted);
}
.footer-col a:hover {
color: var(--aio-primary);
}
.footer-count {
flex: 0 0 auto;
color: var(--aio-line-strong);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
} .footer-posts {
display: grid;
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer-posts li {
display: block;
}
.footer-posts a {
display: flex;
align-items: center;
gap: 0.7rem;
color: var(--aio-muted);
}
.footer-posts a:hover {
text-decoration: none;
}
.footer-posts img {
flex: 0 0 52px;
width: 52px;
height: 40px;
object-fit: cover;
border-radius: var(--aio-radius-sm);
}
.footer-posts__title {
display: block;
color: var(--aio-ink);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
transition: color var(--aio-transition);
}
.footer-posts a:hover .footer-posts__title {
color: var(--aio-primary);
}
.footer-posts__date {
display: block;
margin-top: 0.15rem;
font-size: 0.75rem;
}
.site-info {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.25rem;
border-top: 1px solid var(--aio-line);
font-size: 0.8125rem;
}
.site-info ul {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-info a {
color: var(--aio-muted);
}
.back-to-top {
margin-inline-start: auto;
} .breadcrumbs,
.rank-math-breadcrumb {
margin-bottom: 1.25rem;
color: var(--aio-muted);
font-size: 0.8125rem;
}
.breadcrumbs ol,
.breadcrumbs ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.breadcrumbs li + li::before {
content: "›";
color: var(--aio-line-strong);
}
.breadcrumbs a {
color: var(--aio-muted);
}
.breadcrumbs a:hover {
color: var(--aio-primary);
}
.breadcrumbs [aria-current="page"] {
color: var(--aio-ink);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 40ch;
} .page-header {
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--aio-line);
}
.page-header__title {
margin-bottom: 0.5rem;
}
.page-header__desc {
max-width: 68ch;
margin-bottom: 1rem;
color: var(--aio-muted);
font-size: 1.0625rem;
}
.page-header__desc p:last-child {
margin-bottom: 0;
}
.page-header__meta {
color: var(--aio-muted);
font-size: 0.875rem;
} .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.text-center { text-align: center; }
.text-muted { color: var(--aio-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flow > * + * { margin-top: 1rem; }
.stack { display: grid; gap: 1rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.2rem;
border: 1px solid transparent;
border-radius: var(--aio-radius-sm);
background: linear-gradient(140deg, var(--aio-brand-500), var(--aio-brand-600));
color: #fff;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
box-shadow: 0 1px 2px rgba(30, 42, 82, 0.12), 0 6px 16px rgba(64, 90, 166, 0.22);
transition: filter var(--aio-transition), transform var(--aio-transition), box-shadow var(--aio-transition);
}
.btn:hover,
.btn:focus-visible {
color: #fff;
text-decoration: none;
filter: brightness(1.07);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(30, 42, 82, 0.14), 0 10px 24px rgba(64, 90, 166, 0.28);
}
.btn:active {
transform: translateY(0);
}
.btn[disabled],
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
filter: none;
transform: none;
box-shadow: none;
} .btn--ghost {
background: var(--aio-glass-bg);
border-color: var(--aio-glass-border);
color: var(--aio-ink);
box-shadow: none;
}
@supports (backdrop-filter: blur(1px)) {
.btn--ghost {
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
}
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
border-color: var(--aio-primary);
color: var(--aio-primary);
filter: none;
box-shadow: 0 4px 14px rgba(64, 90, 166, 0.14);
}
.btn--subtle {
background: var(--aio-surface-2);
color: var(--aio-ink);
}
.btn--subtle:hover {
background: var(--aio-line);
color: var(--aio-ink);
}
.btn--sm {
padding: 0.45rem 0.85rem;
font-size: 0.8125rem;
}
.btn--lg {
padding: 0.9rem 1.6rem;
font-size: 0.9375rem;
}
.btn--block {
width: 100%;
} .icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-sm);
background: transparent;
color: var(--aio-ink);
transition: background-color var(--aio-transition), border-color var(--aio-transition);
}
.icon-btn:hover,
.icon-btn:focus-visible {
background: var(--aio-surface-2);
border-color: var(--aio-line-strong);
}
.icon-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
} [data-scheme="light"] .icon-moon { display: block; }
[data-scheme="light"] .icon-sun { display: none; }
[data-scheme="dark"] .icon-moon { display: none; }
[data-scheme="dark"] .icon-sun { display: block; } .badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: var(--aio-radius-pill);
background: var(--aio-surface-2);
color: var(--aio-muted);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.badge--primary { background: var(--aio-primary-tint); color: var(--aio-primary); }
.badge--accent { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.badge--success { background: rgba(22, 163, 74, 0.12); color: var(--aio-success); }
.badge--sponsored { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.badge--verified { background: rgba(22, 163, 74, 0.12); color: var(--aio-success); }
.badge--free { background: rgba(79, 70, 229, 0.1); color: var(--aio-primary); }
[data-scheme="dark"] .badge--accent,
[data-scheme="dark"] .badge--sponsored { color: #fbbf24; }
.chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-pill);
background: var(--aio-card);
color: var(--aio-text);
font-size: 0.8125rem;
font-weight: 500;
transition: border-color var(--aio-transition), color var(--aio-transition), background-color var(--aio-transition);
}
.chip:hover,
.chip:focus-visible {
border-color: var(--aio-primary);
color: var(--aio-primary);
text-decoration: none;
}
.chip--active {
border-color: var(--aio-primary);
background: var(--aio-primary-tint);
color: var(--aio-primary);
}
.chip__count {
color: var(--aio-muted);
font-size: 0.75rem;
}
.eyebrow {
display: inline-block;
margin-bottom: 0.5rem;
color: var(--aio-primary);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
} .card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius);
background: var(--aio-card);
transition: transform var(--aio-transition), box-shadow var(--aio-transition), border-color var(--aio-transition), background-color var(--aio-transition);
} .card:hover {
transform: translateY(-3px);
border-color: var(--aio-glass-border);
background: var(--aio-glass-bg-strong);
box-shadow: var(--aio-glass-shadow);
}
@supports (backdrop-filter: blur(1px)) {
.card:hover {
-webkit-backdrop-filter: blur(var(--aio-glass-blur)) saturate(180%);
backdrop-filter: blur(var(--aio-glass-blur)) saturate(180%);
}
}
.card__media {
position: relative;
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--aio-surface-2);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms var(--aio-ease);
}
.card:hover .card__media img {
transform: scale(1.04);
}
.card__body {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.7rem;
padding: 1.35rem 1.4rem 1.5rem;
}
.card__title {
margin: 0;
font-size: 1.0625rem;
line-height: 1.35; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card__title a {
color: var(--aio-ink);
}
.card__title a:hover {
color: var(--aio-primary);
text-decoration: none;
}
.card__excerpt {
margin: 0;
color: var(--aio-muted);
font-size: 0.875rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .card__media--ph {
display: grid;
place-items: center;
background:
radial-gradient(18rem 12rem at 85% 10%, rgba(255, 255, 255, 0.16), transparent 60%),
linear-gradient(140deg, var(--aio-brand-500), var(--aio-brand-700));
}
.card__media-initial {
color: rgba(255, 255, 255, 0.85);
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-top: auto;
padding-top: 0.9rem;
border-top: 1px solid var(--aio-line);
} .card--bare .card__footer,
.card--row .card__footer {
padding-top: 0.35rem;
border-top: 0;
} .card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.card__body a:not(.card__link),
.card__footer a {
position: relative;
z-index: 2;
} .card--row {
flex-direction: row;
align-items: center;
gap: 1rem;
padding: 0.85rem;
}
.card--row .card__media {
flex: 0 0 108px;
aspect-ratio: 3 / 2;
border-radius: var(--aio-radius-sm);
}
.card--row .card__body {
padding: 0;
gap: 0.35rem;
}
.card--row .card__title {
font-size: 0.9375rem;
} .card--bare {
border: 0;
background: none;
}
.card--bare:hover {
transform: none;
box-shadow: none;
}
.card--bare .card__body {
padding: 0.9rem 0 0;
} .aiolms-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
color: #fff;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
user-select: none;
} .entry-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.75rem;
color: var(--aio-muted);
font-size: 0.8125rem;
}
.entry-meta > * {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.entry-meta a {
color: var(--aio-muted);
font-weight: 500;
}
.entry-meta a:hover {
color: var(--aio-primary);
}
.entry-meta__sep::before {
content: "·";
color: var(--aio-line-strong);
}
.byline__avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
} .product-card__head {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.product-card__logo {
flex: 0 0 48px;
width: 48px;
height: 48px;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-sm);
background: var(--aio-bg);
object-fit: contain;
padding: 4px;
}
.product-card__logo--placeholder {
display: grid;
place-items: center;
color: var(--aio-muted);
font-size: 1.1rem;
font-weight: 800;
}
.product-card__price {
color: var(--aio-ink);
font-size: 0.875rem;
font-weight: 600;
}
.product-card__price span {
color: var(--aio-muted);
font-weight: 400;
} .rating {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8125rem;
white-space: nowrap;
}
.rating__stars {
position: relative;
display: inline-block;
color: var(--aio-line-strong);
font-size: 0.9375rem;
letter-spacing: 0.08em;
}
.rating__stars::before {
content: "★★★★★";
}
.rating__fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: var(--aio-accent);
white-space: nowrap;
}
.rating__fill::before {
content: "★★★★★";
}
.rating__value {
color: var(--aio-ink);
font-weight: 700;
}
.rating__count {
color: var(--aio-muted);
} .search-wrap {
position: relative;
width: 100%;
}
.search-form {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.4rem 0.3rem 0.85rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-pill);
background: var(--aio-surface);
transition: border-color var(--aio-transition), box-shadow var(--aio-transition);
}
.search-form:focus-within {
border-color: var(--aio-primary);
box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.16);
} .header-search__panel .search-form {
background: var(--aio-surface);
}
.header-search__panel .search-results {
position: static;
margin-top: 0.5rem;
border: 0;
background: none;
box-shadow: none;
max-height: min(60vh, 400px);
}
.search-form input[type="search"] {
flex: 1;
min-width: 0;
border: 0;
background: none;
font-size: 0.875rem;
outline: none;
}
.search-form input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--aio-primary);
color: #fff;
}
.search-form__submit svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
} .search-results {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
z-index: 120;
max-height: min(70vh, 480px);
overflow-y: auto;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius);
background: var(--aio-card);
box-shadow: var(--aio-shadow);
}
.search-results[hidden] {
display: none;
}
.search-results__group-title {
position: sticky;
top: 0;
margin: 0;
padding: 0.6rem 1rem 0.4rem;
background: var(--aio-card);
color: var(--aio-muted);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.search-results__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
border-top: 1px solid var(--aio-line);
color: var(--aio-text);
}
.search-results__item:hover,
.search-results__item:focus-visible {
background: var(--aio-surface-2);
text-decoration: none;
}
.search-results__item img {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 6px;
object-fit: cover;
}
.search-results__title {
color: var(--aio-ink);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.35;
}
.search-results__sub {
color: var(--aio-muted);
font-size: 0.75rem;
}
.search-results__empty,
.search-results__status {
padding: 1rem;
color: var(--aio-muted);
font-size: 0.875rem;
text-align: center;
} .pagination {
margin-top: 3rem;
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-sm);
color: var(--aio-text);
font-size: 0.875rem;
font-weight: 600;
}
.pagination .page-numbers:hover {
border-color: var(--aio-primary);
color: var(--aio-primary);
text-decoration: none;
}
.pagination .page-numbers.current {
border-color: var(--aio-primary);
background: var(--aio-primary);
color: #fff;
}
.pagination .page-numbers.dots {
border-color: transparent;
} input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 0.65rem 0.85rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-sm);
background: var(--aio-bg);
color: var(--aio-text);
font-size: 0.9375rem;
transition: border-color var(--aio-transition), box-shadow var(--aio-transition);
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--aio-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
outline: none;
}
label {
display: block;
margin-bottom: 0.35rem;
color: var(--aio-ink);
font-size: 0.875rem;
font-weight: 600;
} .newsletter {
display: grid;
gap: 1.25rem;
padding: clamp(1.5rem, 4vw, 2.75rem);
border-radius: var(--aio-radius-lg);
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: #fff;
text-align: center;
}
.newsletter h2 {
margin: 0;
color: #fff;
}
.newsletter p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
}
.newsletter__form {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
max-width: 460px;
margin-inline: auto;
}
.newsletter__form input[type="email"] {
flex: 1 1 200px;
border-color: transparent;
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.newsletter__form input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter__form input[type="email"]:focus {
background: rgba(255, 255, 255, 0.24);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.newsletter__form .btn {
background: #fff;
color: var(--aio-primary-dark);
}
.newsletter__form .btn:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--aio-primary-dark);
}
.newsletter__note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
} .widget {
padding: 1.25rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius);
background: var(--aio-card);
} .widget__title,
.widget > h2,
.widget .wp-block-heading {
margin: 0 0 1rem;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aio-ink);
}
.widget ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.65rem;
font-size: 0.875rem;
}
.widget ul a {
color: var(--aio-text);
font-weight: 500;
}
.widget ul a:hover {
color: var(--aio-primary);
}
.widget .wp-block-latest-posts__post-date,
.widget .wp-block-latest-comments__comment-date {
display: block;
color: var(--aio-muted);
font-size: 0.75rem;
} .widget .wp-block-search__inside-wrapper {
display: flex;
gap: 0.5rem;
}
.widget .wp-block-search__label {
display: none;
}
.widget .wp-block-search__input {
flex: 1;
min-width: 0;
padding: 0.55rem 0.8rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-sm);
background: var(--aio-surface);
font-size: 0.875rem;
}
.widget .wp-block-search__button {
padding: 0.55rem 1rem;
border: 0;
border-radius: var(--aio-radius-sm);
background: linear-gradient(140deg, var(--aio-brand-500), var(--aio-brand-600));
color: #fff;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
} .widget .wp-block-tag-cloud a {
display: inline-block;
margin: 0 0.3rem 0.4rem 0;
padding: 0.3rem 0.7rem;
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-pill);
color: var(--aio-text);
font-size: 0.8125rem !important;
}
.widget .wp-block-tag-cloud a:hover {
border-color: var(--aio-primary);
color: var(--aio-primary);
text-decoration: none;
} .notice-box {
display: flex;
gap: 0.75rem;
padding: 1rem 1.15rem;
border: 1px solid var(--aio-line);
border-left: 3px solid var(--aio-accent);
border-radius: var(--aio-radius-sm);
background: var(--aio-surface);
color: var(--aio-muted);
font-size: 0.875rem;
}
.notice-box--disclosure {
border-left-color: var(--aio-accent);
} .empty-state {
padding: clamp(2rem, 6vw, 4rem) 1rem;
border: 1px dashed var(--aio-line-strong);
border-radius: var(--aio-radius);
color: var(--aio-muted);
text-align: center;
}
.empty-state h2 {
margin-bottom: 0.5rem;
}  .aiolms-promo {
position: fixed;
bottom: 1.25rem;
z-index: 9998;
width: min(340px, calc(100vw - 2rem));
border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.12));
border-radius: var(--wp--custom--radius--lg, 16px);
background: var(--wp--preset--color--base, #fff);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.28s ease, transform 0.28s ease;
}
.aiolms-promo[hidden] {
display: none;
}
.aiolms-promo.is-visible {
opacity: 1;
transform: translateY(0);
}
.aiolms-promo--bottom-right { right: 1.25rem; }
.aiolms-promo--bottom-left { left: 1.25rem; }
.aiolms-promo__close {
position: absolute;
top: 0.4rem;
right: 0.55rem;
z-index: 2;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.aiolms-promo__close:hover,
.aiolms-promo__close:focus-visible {
background: rgba(0, 0, 0, 0.7);
}
.aiolms-promo__image {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
}
.aiolms-promo__body {
padding: 1rem 1.15rem 1.15rem;
}
.aiolms-promo__eyebrow {
margin: 0 0 0.25rem;
color: var(--wp--preset--color--accent, #2271b1);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.aiolms-promo__heading {
margin: 0 0 0.4rem;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
}
.aiolms-promo__text {
margin: 0 0 0.65rem;
font-size: 0.875rem;
line-height: 1.5;
opacity: 0.85;
}
.aiolms-promo__features {
margin: 0 0 0.9rem;
padding: 0;
list-style: none;
font-size: 0.8125rem;
}
.aiolms-promo__features li {
position: relative;
margin-bottom: 0.3rem;
padding-left: 1.15rem;
}
.aiolms-promo__features li::before {
position: absolute;
left: 0;
color: var(--wp--preset--color--accent, #2271b1);
font-weight: 700;
content: "✓";
}
.aiolms-promo__cta {
display: block;
padding: 0.7rem 1rem;
border-radius: var(--wp--custom--radius--md, 10px);
background: var(--wp--preset--color--accent, #2271b1);
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.aiolms-promo__cta:hover,
.aiolms-promo__cta:focus-visible {
filter: brightness(1.08);
color: #fff;
}
.aiolms-promo__disclosure {
margin: 0.6rem 0 0;
font-size: 0.6875rem;
line-height: 1.4;
opacity: 0.6;
} @media (max-width: 600px) {
.aiolms-promo {
right: 0;
left: 0;
bottom: 0;
width: 100%;
border-radius: var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px) 0 0;
}
.aiolms-promo__image {
height: 100px;
}
}
@media (prefers-reduced-motion: reduce) {
.aiolms-promo {
transition: none;
}
} .alert {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem 1.25rem;
border: 1px solid var(--aio-line);
border-left-width: 3px;
border-radius: var(--aio-radius-sm);
background: var(--aio-surface);
font-size: 0.9375rem;
}
.alert p {
margin: 0.25rem 0 0;
color: var(--aio-muted);
font-size: 0.875rem;
}
.alert--success { border-left-color: var(--aio-success); }
.alert--error   { border-left-color: var(--aio-danger); }
.alert--warning { border-left-color: var(--aio-accent); }
.alert--info    { border-left-color: var(--aio-primary); } .footer-cta__text .alert {
margin: 0.85rem 0 0;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(6px);
} #newsletter {
scroll-margin-top: 6rem;
}.filters-toggle {
display: none;
margin-bottom: 1rem;
}
.filters {
display: grid;
gap: 0.5rem;
align-content: start;
position: sticky;
top: calc(var(--aio-header-height) + 1.5rem);
max-height: calc(100vh - var(--aio-header-height) - 3rem);
overflow-y: auto;
padding-right: 0.35rem;
scrollbar-width: thin;
scrollbar-color: var(--aio-line-strong) transparent;
}
.filters::-webkit-scrollbar,
.facet__list::-webkit-scrollbar,
.term-picker::-webkit-scrollbar {
width: 6px;
}
.filters::-webkit-scrollbar-track,
.facet__list::-webkit-scrollbar-track,
.term-picker::-webkit-scrollbar-track {
background: transparent;
}
.filters::-webkit-scrollbar-thumb,
.facet__list::-webkit-scrollbar-thumb,
.term-picker::-webkit-scrollbar-thumb {
border-radius: 999px;
background: var(--aio-line-strong);
}
.filters:not(:hover)::-webkit-scrollbar-thumb {
background: transparent;
}
.filters__active {
padding: 1rem;
margin-bottom: 0.5rem;
border: 1px solid var(--aio-primary);
border-radius: var(--aio-radius);
background: var(--aio-primary-tint);
}
.filters__title {
margin: 0 0 0.75rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.facet {
border: 1px solid var(--aio-line);
border-radius: var(--aio-radius-sm);
background: var(--aio-card);
}
.facet__summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0.9rem;
color: var(--aio-ink);
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
list-style: none;
user-select: none;
}
.facet__summary::-webkit-details-marker {
display: none;
}
.facet__summary::after {
content: "";
width: 8px;
height: 8px;
margin-left: auto;
border-right: 2px solid var(--aio-muted);
border-bottom: 2px solid var(--aio-muted);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--aio-transition);
}
.facet[open] > .facet__summary::after {
transform: rotate(-135deg) translateY(-2px);
}
.facet__list {
display: grid;
gap: 0.1rem;
margin: 0;
padding: 0 0.4rem 0.6rem;
list-style: none;
max-height: 260px;
overflow-y: auto;
}
.facet__item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.5rem;
border-radius: 6px;
color: var(--aio-text);
font-size: 0.875rem;
}
.facet__item:hover {
background: var(--aio-surface-2);
text-decoration: none;
}
.facet__check {
flex: 0 0 16px;
width: 16px;
height: 16px;
border: 1.5px solid var(--aio-line-strong);
border-radius: 4px;
transition: background-color var(--aio-transition), border-color var(--aio-transition);
}
.facet__item--active {
color: var(--aio-primary);
font-weight: 600;
}
.facet__item--active .facet__check {
position: relative;
border-color: var(--aio-primary);
background: var(--aio-primary);
}
.facet__item--active .facet__check::after {
content: "";
position: absolute;
top: 1px;
left: 4.5px;
width: 4px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.facet__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.facet__count {
color: var(--aio-muted);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
} .directory__toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 1rem;
margin-bottom: 1.5rem;
}
.directory__sort {
display: flex;
align-items: center;
gap: 0.6rem;
}
.directory__sort label {
margin: 0;
color: var(--aio-muted);
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
}
.directory__sort select {
width: auto;
min-width: 160px;
padding-block: 0.45rem;
font-size: 0.875rem;
}
.directory__results[aria-busy="true"] {
opacity: 0.5;
pointer-events: none;
transition: opacity var(--aio-transition);
} @media (max-width: 999px) {
.filters-toggle {
display: block;
}
.filters {
position: static;
max-height: none;
overflow: visible;
}
.filters[hidden] {
display: none;
}
.directory__toolbar {
justify-content: space-between;
}
}