:root { --bg-page: #f4f7fb;
--bg-main: #ffffff;
--bg-secondary: #f8fafc;
--bg-sunken: #eef2f8; --text-primary: #0f172a;
--text-body: #334155;
--text-muted: #64748b;
--text-faint: #94a3b8; --border-color: #e2e8f0;
--border-strong: #cbd5e1; --accent-color: #2563eb;
--accent-hover: #1d4ed8;
--accent-soft: #eef4ff;
--accent-ink: #1e40af;
--accent-border: #bfdbfe; --accent-ai: #7c3aed;
--accent-ai-soft: #f3e8ff;
--accent-ai-ink: #5b21b6; --code-bg: #0f172a;
--code-text: #e2e8f0;
--code-muted: #64748b; --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --max-width-content: 760px;
--max-width-site: 1220px;
--header-height: 68px;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.03);
--shadow-md: 0 8px 16px -4px rgba(15, 23, 42, 0.06), 0 16px 32px -8px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
} *, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 1.25rem);
}
body {
margin: 0;
background-color: var(--bg-page);
background-image: radial-gradient(ellipse 80% 450px at 50% 0%, rgba(37, 99, 235, 0.04), transparent);
background-repeat: no-repeat;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
img {
max-width: 100%;
height: auto;
display: block;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
line-height: 1.22;
letter-spacing: -0.025em;
text-wrap: balance;
}
code, kbd, pre, samp {
font-family: var(--font-mono);
}
:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 4px;
}
::selection {
background: #c7d7fe;
color: var(--text-primary);
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
} .site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.90);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.site-header::before {
content: '';
display: block;
height: 3px;
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%);
}
.admin-bar .site-header {
top: 32px;
}
.header-container {
max-width: var(--max-width-site);
height: var(--header-height);
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.25rem;
}
.site-title a {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-size: 1.22rem;
font-weight: 800;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--text-primary);
white-space: nowrap;
}
.site-logo-mark {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
flex-shrink: 0;
position: relative;
}
.site-logo-mark::after {
content: '';
position: absolute;
inset: 5px;
border: 2px solid #ffffff;
border-radius: 2px;
opacity: 0.92;
}
.site-title a:hover {
color: var(--accent-color);
}
.site-title a:hover .site-logo-mark {
transform: rotate(-6deg) scale(1.05);
} .main-navigation {
margin-left: auto;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation > ul,
.main-navigation div > ul {
display: flex;
align-items: center;
gap: 0.25rem;
}
.main-navigation li {
position: relative;
margin: 0;
padding: 0;
}
.main-navigation > ul > li > a,
.main-navigation > div > ul > li > a {
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.5rem 0.85rem;
border-radius: var(--radius-sm);
font-size: 0.92rem;
font-weight: 600;
color: var(--text-body);
white-space: nowrap;
}
.main-navigation > ul > li:hover > a,
.main-navigation > div > ul > li:hover > a,
.main-navigation > ul > li:focus-within > a {
background-color: var(--bg-sunken);
color: var(--text-primary);
}
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-ancestor > a,
.main-navigation li.current-menu-parent > a {
color: var(--accent-color);
background-color: var(--accent-soft);
} .main-navigation > ul > li > a[href*="/invata-ai"] {
color: var(--accent-ai-ink);
background: rgba(124, 58, 237, 0.08);
}
.main-navigation > ul > li:hover > a[href*="/invata-ai"] {
background: rgba(124, 58, 237, 0.14);
color: var(--accent-ai);
}
.main-navigation li.menu-item-has-children > a::after {
content: '';
width: 6px;
height: 6px;
margin-top: -2px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg);
opacity: 0.55;
transition: transform 0.2s var(--ease);
}
.main-navigation li.menu-item-has-children:hover > a::after {
transform: translateY(1px) rotate(45deg);
opacity: 0.9;
} .main-navigation ul.sub-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 245px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0.45rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
z-index: 1000;
}
.main-navigation ul.sub-menu::before {
content: '';
position: absolute;
top: -12px;
left: 0;
width: 100%;
height: 12px;
}
.main-navigation li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation li.menu-item-has-children:focus-within > ul.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-navigation ul.sub-menu a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.58rem 0.85rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-body);
}
.main-navigation ul.sub-menu a:hover {
background-color: var(--accent-soft);
color: var(--accent-ink);
transform: translateX(2px);
} .main-navigation > ul > li:nth-last-child(-n+2) > ul.sub-menu,
.main-navigation > div > ul > li:nth-last-child(-n+2) > ul.sub-menu {
left: auto;
right: 0;
} .main-navigation ul.sub-menu ul.sub-menu {
position: static;
min-width: 0;
margin: 0 0 0.25rem 0.8rem;
padding: 0 0 0 0.5rem;
background: transparent;
border: 0;
border-left: 2px solid var(--border-color);
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: inherit;
transform: none;
}
.main-navigation ul.sub-menu ul.sub-menu::before {
display: none;
}
.main-navigation ul.sub-menu ul.sub-menu a {
padding: 0.4rem 0.7rem;
font-size: 0.86rem;
color: var(--text-muted);
} .header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.header-search-toggle {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 38px;
padding: 0 0.85rem;
font-size: 0.86rem;
font-weight: 600;
color: var(--text-body);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
cursor: pointer;
user-select: none;
transition: all 0.18s ease;
}
.header-search-toggle:hover {
color: var(--accent-color);
border-color: var(--accent-border);
background: var(--accent-soft);
}
.header-search-toggle .icon-close {
display: none;
}
#header-search-checkbox:checked ~ .header-container .header-search-toggle {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-color);
}
#header-search-checkbox:checked ~ .header-container .header-search-toggle .icon-search {
display: none;
}
#header-search-checkbox:checked ~ .header-container .header-search-toggle .icon-close {
display: block;
} .header-search-drawer {
display: none;
background: var(--bg-main);
border-top: 1px solid var(--border-color);
box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.12);
}
#header-search-checkbox:checked ~ .header-search-drawer {
display: block;
}
.header-search-drawer-inner {
max-width: 780px;
margin: 0 auto;
padding: 1.15rem 1.5rem 1.25rem;
}
.header-search-form {
display: flex;
gap: 0.6rem;
}
.header-search-input-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0 1rem;
background: var(--bg-secondary);
border: 1.5px solid var(--border-strong);
border-radius: var(--radius);
color: var(--text-faint);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.header-search-input-wrap:focus-within {
background: var(--bg-main);
border-color: var(--accent-color);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
color: var(--accent-color);
}
.header-search-input {
flex: 1;
min-width: 0;
height: 46px;
border: 0;
background: transparent;
font: inherit;
font-size: 0.98rem;
color: var(--text-primary);
outline: none;
}
.header-search-submit {
padding: 0 1.35rem;
font: inherit;
font-size: 0.92rem;
font-weight: 700;
color: #ffffff;
background: var(--accent-color);
border: 0;
border-radius: var(--radius);
cursor: pointer;
transition: background-color 0.18s ease, transform 0.15s ease;
}
.header-search-submit:hover {
background: var(--accent-hover);
}
.header-search-quicklinks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin-top: 0.8rem;
}
.header-search-quicklinks-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-faint);
margin-right: 0.25rem;
}
.quicklink-pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.7rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-body);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.quicklink-pill:hover {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-border);
}
.quicklink-pill--ai {
color: var(--accent-ai-ink);
background: var(--accent-ai-soft);
border-color: rgba(124, 58, 237, 0.25);
}
.quicklink-pill--ai:hover {
color: #ffffff;
background: var(--accent-ai);
border-color: var(--accent-ai);
} .menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 0;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
}
.menu-toggle .hamburger-bar {
display: block;
width: 18px;
height: 2px;
border-radius: 2px;
background-color: var(--text-primary);
transition: transform 0.2s var(--ease), opacity 0.2s ease;
}
.menu-toggle.is-active .hamburger-bar:nth-child(1),
#mobile-menu-checkbox:checked ~ .header-actions .menu-toggle .hamburger-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.menu-toggle.is-active .hamburger-bar:nth-child(2),
#mobile-menu-checkbox:checked ~ .header-actions .menu-toggle .hamburger-bar:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-active .hamburger-bar:nth-child(3),
#mobile-menu-checkbox:checked ~ .header-actions .menu-toggle .hamburger-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
} @media (max-width: 960px) {
:root {
--header-height: 60px;
}
.header-container {
padding: 0 1rem;
}
.site-title a {
font-size: 1.08rem;
}
.header-search-toggle {
padding: 0;
width: 40px;
height: 40px;
justify-content: center;
border-radius: var(--radius-sm);
}
.header-search-toggle-label {
display: none;
}
.menu-toggle {
display: flex;
}
.main-navigation {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0.75rem 1rem 1.5rem;
background: var(--bg-main);
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-lg);
}
#mobile-menu-checkbox:checked ~ .main-navigation,
.main-navigation.is-active {
display: block;
}
.main-navigation > ul,
.main-navigation div > ul {
flex-direction: column;
align-items: stretch;
gap: 0.15rem;
}
.main-navigation > ul > li > a,
.main-navigation > div > ul > li > a {
width: 100%;
justify-content: space-between;
padding: 0.75rem 0.85rem;
font-size: 1rem;
}
.main-navigation li.menu-item-has-children > a::after {
display: none;
}
.main-navigation ul.sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
margin: 0 0 0.5rem 0.85rem;
padding: 0 0 0 0.75rem;
background: transparent;
border: 0;
border-left: 2px solid var(--border-color);
border-radius: 0;
box-shadow: none;
}
.main-navigation ul.sub-menu::before {
display: none;
}
.main-navigation ul.sub-menu a {
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
color: var(--text-muted);
}
.header-search-drawer-inner {
padding: 1rem;
}
}
@media (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
} .site-main {
max-width: var(--max-width-site);
margin: 2rem auto 0;
padding: 0 1.5rem;
}
.content-with-sidebar-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 2.25rem;
align-items: start;
}
.main-content-column {
min-width: 0;
}
@media (max-width: 1024px) {
.content-with-sidebar-layout {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.site-main {
margin-top: 1.25rem;
padding: 0 1rem;
}
} .site-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-bottom: 1.5rem;
font-size: 0.84rem;
color: var(--text-faint);
}
.site-breadcrumbs a {
color: var(--text-muted);
font-weight: 500;
}
.site-breadcrumbs a:hover {
color: var(--accent-color);
}
.site-breadcrumbs .breadcrumb-sep {
color: var(--text-faint);
font-weight: 400;
}
.site-breadcrumbs span:not(.breadcrumb-sep) {
color: var(--text-primary);
font-weight: 600;
overflow-wrap: anywhere;
} .home-hubs-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.home-hub-pill {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 1.1rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s ease;
}
.home-hub-pill:hover {
transform: translateY(-2px);
border-color: var(--accent-border);
box-shadow: var(--shadow-md);
}
.home-hub-pill--ai {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, #ffffff 80%);
border-color: rgba(124, 58, 237, 0.25);
}
.home-hub-pill--ai:hover {
border-color: var(--accent-ai);
}
.home-hub-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent-ink);
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.home-hub-pill--ai .home-hub-icon {
background: linear-gradient(135deg, #8a3ffc 0%, #6366f1 100%);
color: #ffffff;
}
.home-hub-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.home-hub-text strong {
font-size: 0.94rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
}
.home-hub-text span {
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-hub-arrow {
color: var(--text-faint);
font-weight: 700;
transition: transform 0.2s var(--ease), color 0.2s ease;
}
.home-hub-pill:hover .home-hub-arrow {
transform: translateX(3px);
color: var(--accent-color);
}
.home-hub-pill--ai:hover .home-hub-arrow {
color: var(--accent-ai);
}
@media (max-width: 1024px) {
.home-hubs-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.home-hubs-strip {
grid-template-columns: minmax(0, 1fr);
gap: 0.65rem;
}
} .archive-header-box {
position: relative;
overflow: hidden;
margin-bottom: 2.25rem;
padding: 2.25rem 2.5rem;
background:
radial-gradient(circle at 95% 15%, rgba(37, 99, 235, 0.08) 0%, transparent 45%),
linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-main) 65%);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.archive-header-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.65rem;
}
.archive-eyebrow {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.65rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-ink);
background: rgba(37, 99, 235, 0.1);
border-radius: 999px;
}
.archive-count-badge {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
background: var(--bg-main);
border: 1px solid var(--border-color);
padding: 0.2rem 0.65rem;
border-radius: 999px;
}
.archive-header-box h1 {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.03em;
}
.archive-description {
max-width: 72ch;
margin-top: 0.7rem;
color: var(--text-body);
font-size: 1rem;
line-height: 1.6;
}
.archive-description p {
margin: 0;
}
@media (max-width: 640px) {
.archive-header-box {
padding: 1.5rem;
}
} .post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.6rem;
}
.post-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.25s ease;
}
.post-card:hover {
transform: translateY(-4px);
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
.post-card .post-thumbnail {
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--bg-sunken);
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.post-card .post-thumbnail a {
display: block;
height: 100%;
}
.post-card .post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s var(--ease);
}
.post-card:hover .post-thumbnail img {
transform: scale(1.045);
}
.post-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.35rem 1.45rem 1.4rem;
}
.post-card .entry-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
margin: 0 0 0.7rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
}
.meta-category-pill {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.6rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-ink) !important;
background: var(--accent-soft);
border-radius: 999px;
}
.meta-category-pill:hover {
background: var(--accent-color);
color: #ffffff !important;
}
.meta-dot {
color: var(--text-faint);
}
.post-card .entry-title {
margin: 0 0 0.65rem;
font-size: 1.2rem;
font-weight: 800;
line-height: 1.32;
letter-spacing: -0.02em;
}
.post-card .entry-title a:hover {
color: var(--accent-color);
}
.post-card .entry-excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 1.15rem;
font-size: 0.94rem;
line-height: 1.58;
color: var(--text-muted);
}
.post-card-footer {
margin-top: auto;
padding-top: 0.9rem;
border-top: 1px solid var(--bg-sunken);
}
.post-card-readmore {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.86rem;
font-weight: 700;
color: var(--accent-color);
}
.post-card-readmore svg {
transition: transform 0.2s var(--ease);
}
.post-card:hover .post-card-readmore {
color: var(--accent-hover);
}
.post-card:hover .post-card-readmore svg {
transform: translateX(3px);
} .home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
align-items: stretch;
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-thumbnail {
aspect-ratio: auto;
min-height: 340px;
border-bottom: 0;
border-right: 1px solid rgba(226, 232, 240, 0.6);
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-card-body {
justify-content: center;
padding: 2.25rem 2.5rem;
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .entry-title {
font-size: clamp(1.45rem, 2.4vw, 1.95rem);
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.85rem;
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .entry-excerpt {
font-size: 1rem;
-webkit-line-clamp: 4;
margin-bottom: 1.5rem;
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-card-footer {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-card-readmore {
padding: 0.65rem 1.2rem;
color: #ffffff;
background: var(--accent-color);
border-radius: var(--radius-sm);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-card-readmore:hover {
background: var(--accent-hover);
color: #ffffff;
}
@media (max-width: 840px) {
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child {
display: flex;
flex-direction: column;
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-thumbnail {
aspect-ratio: 16 / 9;
min-height: 0;
border-right: 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.home:not(.paged) .post-grid > .post-card.has-post-thumbnail:first-child .post-card-body {
padding: 1.45rem;
}
}
.no-results {
padding: 3rem 2rem;
text-align: center;
background: var(--bg-main);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
color: var(--text-muted);
} .navigation.pagination {
display: flex;
justify-content: center;
margin: 3.25rem 0 1rem;
}
.navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.45rem;
}
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
font-size: 0.92rem;
font-weight: 600;
color: var(--text-body);
background-color: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
.navigation.pagination a.page-numbers:hover {
border-color: var(--accent-color);
color: var(--accent-color);
transform: translateY(-1px);
}
.navigation.pagination .page-numbers.current {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #ffffff;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.navigation.pagination .page-numbers.dots {
min-width: 0;
padding: 0 4px;
border: 0;
background: transparent;
box-shadow: none;
} .single-post-container,
.page-article {
min-width: 0;
padding: 2.85rem 3.25rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.entry-header {
margin-bottom: 2.25rem;
}
.entry-categories {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.85rem;
}
.entry-category-badge {
display: inline-flex;
align-items: center;
padding: 0.24rem 0.72rem;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent-ink);
background: var(--accent-soft);
border: 1px solid var(--accent-border);
border-radius: 999px;
}
.entry-category-badge:hover {
color: #ffffff;
background: var(--accent-color);
border-color: var(--accent-color);
}
.entry-header h1 {
margin: 0 0 1.15rem;
font-size: clamp(1.85rem, 3.2vw, 2.45rem);
font-weight: 800;
line-height: 1.16;
letter-spacing: -0.035em;
overflow-wrap: break-word;
}
.single .entry-header .entry-meta,
.entry-header .entry-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.65rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
font-size: 0.88rem;
color: var(--text-muted);
}
.meta-author-wrap {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.meta-author-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #ffffff;
font-size: 0.74rem;
font-weight: 800;
}
.entry-meta .meta-sep {
color: var(--text-faint);
}
.entry-meta .meta-author {
font-weight: 700;
color: var(--text-primary);
}
.entry-meta .meta-reading-time {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--text-muted);
font-weight: 500;
}
.entry-meta a {
color: var(--accent-color);
font-weight: 600;
}
.entry-featured-image {
margin: 0 0 2.35rem;
overflow: hidden;
border-radius: var(--radius);
background: var(--bg-sunken);
border: 1px solid var(--border-color);
}
.entry-featured-image img {
width: 100%;
} .entry-content {
font-size: 1.07rem;
line-height: 1.8;
color: var(--text-body);
overflow-wrap: break-word;
}
.entry-content > *:first-child {
margin-top: 0;
}
.entry-content p {
margin: 0 0 1.45em;
}
.entry-content h2 {
margin: 2.3em 0 0.75em;
padding-bottom: 0.45rem;
border-bottom: 1px solid var(--border-color);
font-size: 1.58rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.025em;
}
.entry-content h3 {
margin: 1.9em 0 0.6em;
font-size: 1.28rem;
font-weight: 700;
}
.entry-content h4 {
margin: 1.6em 0 0.5em;
font-size: 1.08rem;
font-weight: 700;
}
.entry-content a {
color: var(--accent-color);
text-decoration: underline;
text-decoration-color: rgba(37, 99, 235, 0.35);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.entry-content a:hover {
color: var(--accent-hover);
text-decoration-color: currentColor;
}
.entry-content strong {
color: var(--text-primary);
}
.entry-content ul,
.entry-content ol {
margin: 0 0 1.45em;
padding-left: 1.4em;
}
.entry-content li {
margin-bottom: 0.48em;
padding-left: 0.2em;
}
.entry-content li::marker {
color: var(--accent-color);
}
.entry-content ol li::marker {
font-weight: 700;
}
.entry-content blockquote {
margin: 1.85em 0;
padding: 1.1rem 1.5rem;
background: var(--accent-soft);
border-left: 4px solid var(--accent-color);
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--text-primary);
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content img {
border-radius: var(--radius);
}
.entry-content figure {
margin: 2em 0;
}
.entry-content figcaption,
.entry-content .wp-caption-text {
margin-top: 0.6rem;
font-size: 0.85rem;
text-align: center;
color: var(--text-muted);
}
.entry-content hr {
margin: 2.5em 0;
border: 0;
border-top: 1px solid var(--border-color);
}
.entry-content :not(pre) > code {
padding: 0.14em 0.42em;
font-size: 0.88em;
background: var(--bg-sunken);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
}
.entry-content pre {
margin: 0 0 1.5em;
padding: 1.15rem 1.3rem;
overflow-x: auto;
background: var(--code-bg);
color: var(--code-text);
border-radius: var(--radius);
font-size: 0.9rem;
line-height: 1.65;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.entry-content pre code {
padding: 0;
background: none;
border: 0;
color: inherit;
font-size: inherit;
}
.entry-content table {
width: 100%;
margin: 0 0 1.5em;
border-collapse: separate;
border-spacing: 0;
font-size: 0.95rem;
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.entry-content th,
.entry-content td {
padding: 0.75rem 0.95rem;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border-color);
}
.entry-content tr:last-child td {
border-bottom: 0;
}
.entry-content tbody tr:nth-child(even) td {
background: rgba(248, 250, 252, 0.6);
}
.entry-content th {
background: var(--bg-secondary);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.entry-content .wp-block-table {
overflow-x: auto;
} .entry-footer-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
.entry-tags-label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.entry-tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.entry-tag-pill {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.75rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-body);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.entry-tag-pill:hover {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-border);
} .post-navigation-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 2.25rem;
}
.post-nav-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.1rem 1.25rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.post-nav-card:hover {
background: var(--bg-main);
border-color: var(--accent-color);
box-shadow: 0 4px 14px -4px rgba(37, 99, 235, 0.15);
transform: translateY(-2px);
}
.post-nav-next {
grid-column: 2;
text-align: right;
}
.post-nav-label {
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.post-nav-title {
font-size: 0.96rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-nav-card:hover .post-nav-title {
color: var(--accent-color);
} .related-posts-section {
margin-top: 2.75rem;
padding-top: 2.25rem;
border-top: 1px solid var(--border-color);
}
.related-posts-title {
margin: 0 0 1.25rem;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem;
}
.related-post-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: transform 0.22s var(--ease), border-color 0.22s ease, box-shadow 0.22s ease;
}
.related-post-card:hover {
background: var(--bg-main);
border-color: var(--border-strong);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.related-post-thumb {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-sunken);
}
.related-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s var(--ease);
}
.related-post-card:hover .related-post-thumb img {
transform: scale(1.05);
}
.related-post-info {
padding: 0.9rem 1rem 1rem;
}
.related-post-date {
display: block;
margin-bottom: 0.3rem;
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-faint);
}
.related-post-heading {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-primary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-post-card:hover .related-post-heading {
color: var(--accent-color);
}
.entry-comments {
margin-top: 3rem;
}
.page-article .entry-header h1 {
margin-bottom: 0;
}
@media (max-width: 768px) {
.single-post-container,
.page-article {
padding: 1.5rem 1.25rem;
border-radius: var(--radius);
}
.entry-content {
font-size: 1.02rem;
}
.entry-content h2 {
font-size: 1.4rem;
}
.entry-content pre {
font-size: 0.85rem;
}
.post-navigation-cards,
.related-posts-grid {
grid-template-columns: minmax(0, 1fr);
}
.post-nav-next {
grid-column: 1;
text-align: left;
}
} .site-sidebar {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.widget {
padding: 1.35rem 1.4rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.widget-title,
.widget h2,
.widget .wp-block-heading {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.widget-title::before,
.widget > h2::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-color);
flex-shrink: 0;
}
.invata-sidebar .widget-title::before {
display: none;
}
.widget-title a:hover {
color: var(--accent-color);
} .sidebar-hub-links {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.sidebar-hub-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0.85rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: all 0.2s var(--ease);
}
.sidebar-hub-item:hover {
background: var(--accent-soft);
border-color: var(--accent-border);
transform: translateX(2px);
}
.sidebar-hub-item--ai {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, var(--bg-secondary) 100%);
border-color: rgba(124, 58, 237, 0.22);
}
.sidebar-hub-item--ai:hover {
background: var(--accent-ai-soft);
border-color: rgba(124, 58, 237, 0.45);
}
.sidebar-hub-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 9px;
background: var(--accent-color);
color: #ffffff;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 800;
}
.sidebar-hub-item--ai .sidebar-hub-badge {
background: linear-gradient(135deg, #8a3ffc 0%, #6366f1 100%);
}
.sidebar-hub-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.sidebar-hub-info strong {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
}
.sidebar-hub-info span {
font-size: 0.75rem;
color: var(--text-muted);
}
.sidebar-hub-arrow {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-faint);
transition: transform 0.2s var(--ease);
}
.sidebar-hub-item:hover .sidebar-hub-arrow {
transform: translateX(2px);
color: var(--accent-color);
}
.sidebar-hub-item--ai:hover .sidebar-hub-arrow {
color: var(--accent-ai);
}
.widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.widget li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.93rem;
line-height: 1.4;
}
.widget li:last-child {
border-bottom: 0;
}
.widget li a {
color: var(--text-primary);
font-weight: 500;
}
.widget li a:hover {
color: var(--accent-color);
} .widget_categories ul,
.widget .wp-block-categories-list,
.widget-categories-fallback ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.widget_categories li,
.widget .wp-block-categories-list li,
.widget-categories-fallback li {
padding: 0;
border: 0;
font-size: 0.82rem;
}
.widget_categories li a,
.widget .wp-block-categories-list li a,
.widget-categories-fallback li a {
display: inline-block;
padding: 0.3rem 0.72rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
color: var(--text-body);
}
.widget_categories li a:hover,
.widget .wp-block-categories-list li a:hover,
.widget-categories-fallback li a:hover {
background: var(--accent-soft);
border-color: #c7d7fe;
color: var(--accent-ink);
}
.widget_categories .children,
.widget .wp-block-categories-list .children {
display: contents;
} .search-form,
.wp-block-search__inside-wrapper {
display: flex;
gap: 0.5rem;
}
.search-form label {
flex: 1;
}
.search-field,
.wp-block-search__input {
width: 100%;
padding: 0.6rem 0.85rem;
font: inherit;
font-size: 0.93rem;
color: var(--text-primary);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.search-field:focus,
.wp-block-search__input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
background: var(--bg-main);
}
.search-submit,
.wp-block-search__button {
padding: 0.6rem 0.95rem;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: #ffffff;
background: var(--accent-color);
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover {
background: var(--accent-hover);
}
.sidebar-sticky {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 1025px) {
.site-sidebar,
.invata-sidebar {
align-self: stretch;
}
.sidebar-sticky {
position: sticky;
top: calc(var(--header-height) + 1.25rem);
}
} .comments-area {
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
.comments-title,
.comment-reply-title {
margin: 0 0 1.25rem;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.025em;
}
.comment-reply-title small {
margin-left: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
}
.comment-reply-title small a {
color: var(--accent-color);
}
.comment-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-bottom: 1rem;
padding: 1.5rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.comment-form p {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
.comment-form .comment-form-cookies-consent {
flex-direction: row;
align-items: flex-start;
gap: 0.5rem;
}
.comment-form label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-body);
}
.comment-form .comment-form-cookies-consent label {
font-weight: 400;
color: var(--text-muted);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 0.75rem 0.9rem;
font-family: inherit;
font-size: 0.97rem;
color: var(--text-primary);
background-color: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.comment-form textarea {
min-height: 130px;
resize: vertical;
}
.comment-form .form-submit input[type="submit"] {
align-self: flex-start;
padding: 0.75rem 1.5rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
background-color: var(--accent-color);
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.comment-form .form-submit input[type="submit"]:hover {
background-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.45);
}
.comment-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0 0 2.5rem;
padding: 0;
list-style: none;
}
.comment-list .comment-body {
position: relative;
padding: 1.15rem 1.35rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.comment-list .comment-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.85rem;
margin-bottom: 0.65rem;
}
.comment-list .comment-author {
display: flex;
align-items: center;
gap: 0.65rem;
}
.comment-list .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.comment-list .fn {
font-style: normal;
font-weight: 700;
font-size: 0.98rem;
color: var(--text-primary);
}
.comment-list .says {
display: none;
}
.comment-list .comment-metadata a {
font-size: 0.8rem;
color: var(--text-muted);
}
.comment-list .comment-content {
font-size: 0.97rem;
line-height: 1.65;
color: var(--text-body);
}
.comment-list .comment-content p:last-child {
margin-bottom: 0;
}
.comment-list .reply {
margin-top: 0.6rem;
}
.comment-list .reply a {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent-color);
}
.comment-list .reply a:hover {
color: var(--accent-hover);
}
.comment-list .children {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
padding-left: 1.25rem;
list-style: none;
border-left: 2px solid var(--border-color);
} .site-footer {
margin-top: 5rem;
background: #0b1120;
background-image:
radial-gradient(circle at 15% 0%, rgba(37, 99, 235, 0.14) 0%, transparent 45%),
radial-gradient(circle at 85% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 45%);
border-top: 1px solid rgba(148, 163, 184, 0.14);
color: #94a3b8;
font-size: 0.92rem;
}
.footer-container {
display: grid;
grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
gap: 2.5rem;
max-width: var(--max-width-site);
margin: 0 auto;
padding: 3.5rem 1.5rem 2.75rem;
}
.footer-brand {
max-width: 360px;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-size: 1.18rem;
font-weight: 800;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #ffffff;
}
.footer-logo:hover {
color: #93c5fd;
}
.footer-tagline {
margin: 0.85rem 0 1.25rem;
line-height: 1.6;
color: #94a3b8;
}
.footer-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.footer-badge {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.72rem;
font-size: 0.76rem;
font-weight: 700;
color: #e2e8f0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
}
.footer-badge:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.footer-badge--ai {
color: #e9d5ff;
background: rgba(138, 63, 252, 0.18);
border-color: rgba(192, 132, 252, 0.3);
}
.footer-badge--ai:hover {
background: rgba(138, 63, 252, 0.3);
color: #ffffff;
}
.footer-col-title {
margin: 0 0 1rem;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #f8fafc;
}
.footer-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.footer-nav-list a {
color: #94a3b8;
font-size: 0.9rem;
font-weight: 500;
}
.footer-nav-list a:hover {
color: #ffffff;
}
.footer-bottom {
border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.footer-bottom-inner {
max-width: var(--max-width-site);
margin: 0 auto;
padding: 1.35rem 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: 0.85rem;
color: #64748b;
}
.footer-bottom p {
margin: 0;
}
.footer-bottom strong {
color: #cbd5e1;
}
.footer-back-top {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.8rem;
font-size: 0.8rem;
font-weight: 600;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
}
.footer-back-top:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
@media (max-width: 900px) {
.footer-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
.footer-brand {
grid-column: 1 / -1;
max-width: 100%;
}
}
@media (max-width: 560px) {
.site-footer {
margin-top: 3.5rem;
}
.footer-container {
grid-template-columns: minmax(0, 1fr);
padding: 2.5rem 1rem 2rem;
gap: 1.75rem;
}
.footer-bottom-inner {
padding: 1.25rem 1rem;
}
}  .post-type-archive-invata,
.single-invata,
.invata-language-card {
--lang: var(--accent-color);
--lang-ink: var(--accent-ink);
--lang-soft: var(--accent-soft);
--lang-on: #ffffff;
--lang-label: "COD";
}
.invata-lang-html {
--lang: #e34f26;
--lang-ink: #a53213;
--lang-soft: #fdf0ec;
--lang-on: #ffffff;
--lang-label: "HTML";
}
.invata-lang-css {
--lang: #264de4;
--lang-ink: #1a359e;
--lang-soft: #edf1fd;
--lang-on: #ffffff;
--lang-label: "CSS";
}
.invata-lang-php {
--lang: #6e72b5;
--lang-ink: #4b4f8f;
--lang-soft: #eff0fa;
--lang-on: #ffffff;
--lang-label: "PHP";
}
.invata-lang-javascript {
--lang: #f2d40f;
--lang-ink: #7a6500;
--lang-soft: #fffbe2;
--lang-on: #1f1d10;
--lang-label: "JavaScript";
}
.invata-lang-mysql {
--lang: #00758f;
--lang-ink: #005d72;
--lang-soft: #e7f4f7;
--lang-on: #ffffff;
--lang-label: "SQL";
}
.invata-lang-python {
--lang: #3776ab;
--lang-ink: #285a85;
--lang-soft: #eaf2fa;
--lang-on: #ffffff;
--lang-label: "Python";
}
.invata-lang-cpp {
--lang: #00599c;
--lang-ink: #00467a;
--lang-soft: #e6f0f8;
--lang-on: #ffffff;
--lang-label: "C++";
}
.invata-lang-ai {
--lang: #8a3ffc;
--lang-ink: #6420c9;
--lang-soft: #f3ecff;
--lang-on: #ffffff;
--lang-label: "AI";
}
.invata-lang-typescript {
--lang: #3178c6;
--lang-ink: #235a97;
--lang-soft: #eaf1fa;
--lang-on: #ffffff;
--lang-label: "TypeScript";
}
.invata-lang-go {
--lang: #00add8;
--lang-ink: #007d9c;
--lang-soft: #e6f7fb;
--lang-on: #ffffff;
--lang-label: "Go";
}
.invata-lang-rust {
--lang: #b7410e;
--lang-ink: #8c310a;
--lang-soft: #fbefe9;
--lang-on: #ffffff;
--lang-label: "Rust";
}
.invata-lang-java {
--lang: #e76f00;
--lang-ink: #a34f00;
--lang-soft: #fdf1e6;
--lang-on: #ffffff;
--lang-label: "Java";
}
.invata-lang-kotlin {
--lang: #7f52ff;
--lang-ink: #5a33d6;
--lang-soft: #f2edff;
--lang-on: #ffffff;
--lang-label: "Kotlin";
}
.invata-lang-dart {
--lang: #0175c2;
--lang-ink: #015a95;
--lang-soft: #e6f2fa;
--lang-on: #ffffff;
--lang-label: "Dart";
}
.invata-lang-linux,
.invata-lang-bash {
--lang: #24292e;
--lang-ink: #1b1f23;
--lang-soft: #f1f5f9;
--lang-on: #ffffff;
--lang-label: "Linux / Bash";
}
.invata-lang-git {
--lang: #f05032;
--lang-ink: #b73117;
--lang-soft: #fef1ee;
--lang-on: #ffffff;
--lang-label: "Git";
}
.invata-lang-docker {
--lang: #1d63ed;
--lang-ink: #0b4bc4;
--lang-soft: #eaf1fe;
--lang-on: #ffffff;
--lang-label: "Docker";
}
.invata-lang-kubernetes {
--lang: #326ce5;
--lang-ink: #1f4fb8;
--lang-soft: #ecf1fc;
--lang-on: #ffffff;
--lang-label: "Kubernetes";
}
.invata-lang-nginx {
--lang: #009639;
--lang-ink: #00702a;
--lang-soft: #e6f5ec;
--lang-on: #ffffff;
--lang-label: "Nginx";
}
.invata-lang-csharp {
--lang: #512bd4;
--lang-ink: #3b1fa1;
--lang-soft: #efeafd;
--lang-on: #ffffff;
--lang-label: "C# (.NET)";
}
.invata-lang-postgresql {
--lang: #336791;
--lang-ink: #244b6b;
--lang-soft: #ebf1f6;
--lang-on: #ffffff;
--lang-label: "PostgreSQL";
}
.invata-lang-regex {
--lang: #d97706;
--lang-ink: #b45309;
--lang-soft: #fef3c7;
--lang-on: #ffffff;
--lang-label: "RegEx";
}
.invata-lang-swift {
--lang: #f05138;
--lang-ink: #b82a14;
--lang-soft: #fef1ef;
--lang-on: #ffffff;
--lang-label: "Swift";
}
.invata-lang-redis {
--lang: #dc382d;
--lang-ink: #a7231a;
--lang-soft: #fdeeed;
--lang-on: #ffffff;
--lang-label: "Redis";
}
.invata-lang-claude-code,
.invata-lang-claude {
--lang: #d97757;
--lang-ink: #b85435;
--lang-soft: #fbf2ed;
--lang-on: #ffffff;
--lang-label: "Claude Code CLI";
}
.invata-lang-codex {
--lang: #10a37f;
--lang-ink: #0a7358;
--lang-soft: #ebf9f5;
--lang-on: #ffffff;
--lang-label: "OpenAI Codex CLI";
}
.invata-lang-antigravity {
--lang: #4f46e5;
--lang-ink: #3730a3;
--lang-soft: #eef2ff;
--lang-on: #ffffff;
--lang-label: "Antigravity CLI";
}
.invata-lang-hermes {
--lang: #d97706;
--lang-ink: #92400e;
--lang-soft: #fef3c7;
--lang-on: #ffffff;
--lang-label: "Hermes Agent CLI";
}
.invata-lang-llm {
--lang: #6366f1;
--lang-ink: #4338ca;
--lang-soft: #eef2ff;
--lang-on: #ffffff;
--lang-label: "LLM";
}
.invata-lang-prompt-engineering {
--lang: #0284c7;
--lang-ink: #0369a1;
--lang-soft: #f0f9ff;
--lang-on: #ffffff;
--lang-label: "Prompt";
}
.invata-lang-rag {
--lang: #0d9488;
--lang-ink: #0f766e;
--lang-soft: #f0fdfa;
--lang-on: #ffffff;
--lang-label: "RAG & Agenți";
}
.invata-lang-etica-ai {
--lang: #e11d48;
--lang-ink: #be123c;
--lang-soft: #fff1f2;
--lang-on: #ffffff;
--lang-label: "Etică AI";
}
.invata-lang-cursor {
--lang: #0f172a;
--lang-ink: #020617;
--lang-soft: #f8fafc;
--lang-on: #ffffff;
--lang-label: "Cursor IDE";
}
.invata-lang-copilot {
--lang: #6e40c9;
--lang-ink: #553098;
--lang-soft: #f5f0ff;
--lang-on: #ffffff;
--lang-label: "GitHub Copilot";
}
.invata-lang-aider {
--lang: #059669;
--lang-ink: #047857;
--lang-soft: #ecfdf5;
--lang-on: #ffffff;
--lang-label: "Aider CLI";
}
.invata-lang-ollama {
--lang: #18181b;
--lang-ink: #09090b;
--lang-soft: #f4f4f5;
--lang-on: #ffffff;
--lang-label: "Ollama CLI";
}
.invata-lang-vllm {
--lang: #7c3aed;
--lang-ink: #6d28d9;
--lang-soft: #f5f3ff;
--lang-on: #ffffff;
--lang-label: "vLLM";
}
.invata-lang-open-webui {
--lang: #2563eb;
--lang-ink: #1d4ed8;
--lang-soft: #eff6ff;
--lang-on: #ffffff;
--lang-label: "Open WebUI";
}
.invata-lang-midjourney {
--lang: #4f46e5;
--lang-ink: #3730a3;
--lang-soft: #eef2ff;
--lang-on: #ffffff;
--lang-label: "Midjourney";
}
.invata-lang-comfyui {
--lang: #e11d48;
--lang-ink: #be123c;
--lang-soft: #fff1f2;
--lang-on: #ffffff;
--lang-label: "ComfyUI";
}
.invata-lang-audio-video-ai {
--lang: #d97706;
--lang-ink: #b45309;
--lang-soft: #fffbeb;
--lang-on: #ffffff;
--lang-label: "AI Media";
}
.invata-lang-langchain {
--lang: #0f766e;
--lang-ink: #115e59;
--lang-soft: #f0fdfa;
--lang-on: #ffffff;
--lang-label: "LangChain";
}
.invata-lang-llamaindex {
--lang: #7e22ce;
--lang-ink: #6b21a8;
--lang-soft: #faf5ff;
--lang-on: #ffffff;
--lang-label: "LlamaIndex";
}
.invata-lang-huggingface {
--lang: #ca8a04;
--lang-ink: #a16207;
--lang-soft: #fefce8;
--lang-on: #ffffff;
--lang-label: "Hugging Face";
}
.invata-lang-n8n-ai {
--lang: #ea4b71;
--lang-ink: #be185d;
--lang-soft: #fdf2f8;
--lang-on: #ffffff;
--lang-label: "n8n AI";
}
.invata-lang-mcp {
--lang: #0369a1;
--lang-ink: #075985;
--lang-soft: #f0f9ff;
--lang-on: #ffffff;
--lang-label: "Protocol MCP";
}
.invata-lang-crewai {
--lang: #dc2626;
--lang-ink: #991b1b;
--lang-soft: #fef2f2;
--lang-on: #ffffff;
--lang-label: "CrewAI";
}
.invata-lang-vector-db {
--lang: #0891b2;
--lang-ink: #0e7490;
--lang-soft: #ecfeff;
--lang-on: #ffffff;
--lang-label: "Vector DB";
}
.invata-lang-pytorch {
--lang: #ee4c2c;
--lang-ink: #c23616;
--lang-soft: #fff5f2;
--lang-on: #ffffff;
--lang-label: "PyTorch";
}
.invata-lang-llmops {
--lang: #4f46e5;
--lang-ink: #3730a3;
--lang-soft: #eef2ff;
--lang-on: #ffffff;
--lang-label: "LLMOps";
}
.invata-lang-deepseek {
--lang: #1e40af;
--lang-ink: #1e3a8a;
--lang-soft: #eff6ff;
--lang-on: #ffffff;
--lang-label: "DeepSeek";
}
.invata-lang-groq {
--lang: #f97316;
--lang-ink: #c2410c;
--lang-soft: #fff7ed;
--lang-on: #ffffff;
--lang-label: "Groq LPU";
}
.invata-lang-dify {
--lang: #155eef;
--lang-ink: #0040c1;
--lang-soft: #eff8ff;
--lang-on: #ffffff;
--lang-label: "Dify.ai";
}
.invata-lang-ai-web-builders {
--lang: #10b981;
--lang-ink: #047857;
--lang-soft: #ecfdf5;
--lang-on: #ffffff;
--lang-label: "AI Builders";
}
.invata-lang-dspy {
--lang: #8b5cf6;
--lang-ink: #6d28d9;
--lang-soft: #f5f3ff;
--lang-on: #ffffff;
--lang-label: "DSPy";
} .invata-install-box {
margin: 1.75rem 0 1.25rem;
padding: 1.5rem 1.6rem;
background: var(--bg-secondary);
border: 1.5px solid var(--border-color);
border-left: 5px solid var(--lang);
border-radius: var(--radius-lg);
scroll-margin-top: calc(var(--header-height) + 1rem);
}
.invata-install-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-bottom: 1rem;
}
.invata-install-eyebrow {
display: inline-block;
margin-bottom: 0.35rem;
padding: 0.18rem 0.6rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lang-ink);
background: var(--lang-soft);
border-radius: 999px;
}
.invata-install-title {
margin: 0 0 0.3rem;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.invata-install-sub {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-muted);
}
.invata-install-reqs {
margin: 0 0 1rem;
padding: 0.55rem 0.85rem;
font-size: 0.85rem;
color: var(--text-body);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.invata-os-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.invata-os-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.85rem;
font: inherit;
font-size: 0.84rem;
font-weight: 700;
color: var(--text-body);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 9px;
cursor: pointer;
transition: all 0.16s ease;
}
.invata-os-tab:hover {
color: var(--lang-ink);
border-color: var(--lang);
}
.invata-os-tab.is-active {
color: var(--lang-on);
background: var(--lang);
border-color: var(--lang);
box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.2);
}
.invata-os-panel {
margin: 0 !important;
}
.invata-os-panel[hidden] {
display: none !important;
} .invata-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 50px;
width: auto;
height: 50px;
padding: 0 0.72rem;
border-radius: 13px;
background: var(--lang);
color: var(--lang-on);
font-family: var(--font-mono);
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 10px -2px rgba(15, 23, 42, 0.1);
}
.invata-mark--sm {
min-width: 30px;
width: auto;
height: 28px;
padding: 0 0.48rem;
border-radius: 7px;
font-size: 0.65rem;
}
.invata-mark--lg {
min-width: 64px;
width: auto;
height: 64px;
padding: 0 0.9rem;
border-radius: 16px;
font-size: 1.02rem;
} .invata-command code,
.invata-language code,
.invata-sidebar code,
.invata-hub code {
font-family: var(--font-mono);
} .invata-hero {
position: relative;
overflow: hidden;
margin-bottom: 2.5rem;
padding: 3rem;
background: #0f172a;
background-image:
radial-gradient(circle at 85% 20%, rgba(124, 58, 237, 0.45) 0, transparent 45%),
radial-gradient(circle at 70% 100%, rgba(37, 99, 235, 0.45) 0, transparent 50%);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
color: #cbd5e1;
}
.invata-hero::after {
content: 'echo "Salut!";\A const x = 42;\A SELECT * FROM lectii;';
white-space: pre;
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%) rotate(-4deg);
font-family: var(--font-mono);
font-size: 0.95rem;
line-height: 2;
color: rgba(226, 232, 240, 0.22);
pointer-events: none;
}
.invata-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 1rem;
padding: 0.3rem 0.75rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #c7d2fe;
background: rgba(99, 102, 241, 0.18);
border: 1px solid rgba(165, 180, 252, 0.25);
border-radius: 999px;
}
.invata-hero h1 {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 0 1rem;
font-size: 2.6rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.035em;
color: #ffffff;
}
.invata-hero p {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0;
font-size: 1.08rem;
line-height: 1.65;
}
.invata-stats {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.invata-stats li {
display: flex;
flex-direction: column;
}
.invata-stats strong {
font-size: 1.7rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
color: #ffffff;
}
.invata-stats span {
font-size: 0.85rem;
color: #94a3b8;
}
.invata-section-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.85rem 1.25rem;
margin-bottom: 1.35rem;
}
.invata-section-head .invata-section-title {
margin: 0;
}
.invata-domain-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.invata-domain-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.44rem 0.92rem;
font: inherit;
font-size: 0.84rem;
font-weight: 700;
color: var(--text-body);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
cursor: pointer;
transition: all 0.18s ease;
}
.invata-domain-tab span {
padding: 0.05rem 0.42rem;
font-size: 0.72rem;
border-radius: 999px;
background: var(--bg-sunken);
color: var(--text-muted);
}
.invata-domain-tab.is-active span {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
.invata-domain-tab:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
.invata-domain-tab.is-active {
color: #ffffff;
background: var(--accent-color);
border-color: var(--accent-color);
box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35);
}
[data-domain-item][hidden] {
display: none !important;
}
.invata-section-title {
margin: 0 0 1.25rem;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.invata-languages {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.35rem;
}
.invata-language-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.65rem;
overflow: hidden;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease), border-color 0.25s ease;
}
.invata-language-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--lang);
}
.invata-language-card:hover {
transform: translateY(-4px);
border-color: var(--lang);
box-shadow: var(--shadow-md);
}
.invata-language-name {
margin-top: 0.25rem;
font-size: 1.38rem;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.25;
color: var(--text-primary);
}
.invata-language-excerpt {
font-size: 0.94rem;
line-height: 1.58;
color: var(--text-muted);
}
.invata-language-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.invata-language-count {
font-size: 0.84rem;
font-weight: 600;
color: var(--text-muted);
}
.invata-language-cta {
font-size: 0.88rem;
font-weight: 700;
color: var(--lang-ink);
transition: transform 0.2s var(--ease);
}
.invata-language-card:hover .invata-language-cta {
transform: translateX(3px);
}
.invata-features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
margin: 3rem 0 0;
padding: 0;
list-style: none;
}
.invata-features li {
padding: 1.45rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.invata-features strong {
display: block;
margin-bottom: 0.35rem;
font-size: 1.02rem;
color: var(--text-primary);
}
.invata-features span {
font-size: 0.92rem;
line-height: 1.55;
color: var(--text-muted);
}
.invata-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 0.85rem;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent-color);
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 800;
}
.invata-empty {
padding: 3rem 2rem;
text-align: center;
background: var(--bg-main);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
color: var(--text-muted);
}
@media (max-width: 960px) {
.invata-hero::after {
display: none;
}
}
@media (max-width: 768px) {
.invata-hero {
padding: 2rem 1.35rem;
}
.invata-hero h1 {
font-size: 1.9rem;
}
.invata-hero p {
font-size: 1rem;
}
.invata-stats {
gap: 1.5rem;
}
.invata-stats strong {
font-size: 1.4rem;
}
.invata-features {
grid-template-columns: minmax(0, 1fr);
}
} .invata-language,
.invata-command {
min-width: 0;
padding: 2.5rem 2.75rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
} .invata-language-header {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.invata-language-header h1 {
margin: 0 0 0.4rem;
font-size: 2.1rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
}
.invata-language-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.invata-language .entry-content {
padding: 1.25rem 1.4rem;
background: var(--lang-soft);
border-radius: var(--radius);
font-size: 1rem;
}
.invata-language .entry-content p:last-child {
margin-bottom: 0;
}
.invata-jump {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 1.25rem 0 0.5rem;
}
.invata-jump a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
font-size: 0.86rem;
font-weight: 600;
color: var(--text-body);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.invata-jump a span {
padding: 0 0.4rem;
font-size: 0.75rem;
color: var(--text-muted);
background: var(--bg-sunken);
border-radius: 999px;
}
.invata-jump a:hover {
color: var(--lang-ink);
border-color: var(--lang);
background: var(--lang-soft);
}
.invata-group {
scroll-margin-top: calc(var(--header-height) + 1rem);
}
.invata-group-title {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin: 2.5rem 0 1rem;
padding-bottom: 0.6rem;
font-size: 1.3rem;
font-weight: 800;
border-bottom: 1px solid var(--border-color);
}
.invata-group-title span {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-faint);
}
.invata-cmd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
}
.invata-cmd-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
height: 100%;
padding: 1.05rem 1.15rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: transform 0.2s var(--ease), border-color 0.2s ease, box-shadow 0.2s ease;
}
.invata-cmd-card:hover {
transform: translateY(-2px);
border-color: var(--lang);
box-shadow: 0 0 0 3px var(--lang-soft), var(--shadow-sm);
}
.invata-cmd-name {
font-size: 1.02rem;
font-weight: 700;
color: var(--lang-ink);
}
.invata-cmd-syntax {
display: block;
font-size: 0.78rem;
line-height: 1.45;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.invata-cmd-desc {
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-body);
} .invata-search-bar {
position: sticky;
top: calc(var(--header-height) + 0.75rem);
z-index: 20;
margin: 1.75rem 0 0;
}
.invata-search {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0 0.6rem 0 1rem;
background: var(--bg-main);
border: 1.5px solid var(--border-strong);
border-radius: var(--radius);
box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.25);
cursor: text;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.invata-search:focus-within {
border-color: var(--lang);
box-shadow: 0 0 0 4px var(--lang-soft), 0 8px 24px -12px rgba(15, 23, 42, 0.25);
}
.invata-search-icon {
flex-shrink: 0;
color: var(--text-faint);
}
.invata-search:focus-within .invata-search-icon {
color: var(--lang-ink);
}
.invata-search input {
flex: 1;
min-width: 0;
height: 52px;
padding: 0;
font: inherit;
font-size: 1.02rem;
color: var(--text-primary);
background: transparent;
border: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.invata-search input::placeholder {
color: var(--text-faint);
}
.invata-search input::-webkit-search-cancel-button {
cursor: pointer;
}
.invata-search-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 0.4rem;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-bottom-width: 2px;
border-radius: 6px;
}
.invata-search:focus-within .invata-search-kbd {
display: none;
}
.invata-search-status {
min-height: 0;
margin: 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
}
.invata-search-bar.is-searching .invata-search-status {
display: inline-block;
margin-top: 0.5rem;
padding: 0.2rem 0.65rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.invata-search-bar.is-searching .invata-search-status:empty {
display: none;
}
.invata-cmd-name mark {
padding: 0 1px;
color: inherit;
background: var(--lang-soft);
box-shadow: inset 0 -2px 0 var(--lang);
border-radius: 2px;
}
.invata-jump[hidden],
.invata-group[hidden],
.invata-search-empty[hidden],
.invata-sidebar-section[hidden],
.invata-filter-empty[hidden],
[data-invata-item][hidden] {
display: none;
}
.invata-search-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
margin-top: 2rem;
padding: 2.5rem 1.5rem;
text-align: center;
background: var(--bg-secondary);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
}
.invata-search-empty strong {
font-size: 1.1rem;
color: var(--text-primary);
}
.invata-search-empty span {
max-width: 420px;
font-size: 0.93rem;
color: var(--text-muted);
}
.invata-search-clear {
margin-top: 0.6rem;
padding: 0.5rem 1rem;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--lang-ink);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
}
.invata-search-clear:hover {
border-color: var(--lang);
} .invata-hub-search {
position: relative;
z-index: 1;
max-width: 620px;
margin-top: 1.75rem;
}
.invata-hub-search .invata-search {
border-color: transparent;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}
.invata-hub-search .invata-search:focus-within {
border-color: #a5b4fc;
box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.35), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}
.invata-hub-search .invata-search:focus-within .invata-search-icon {
color: var(--accent-color);
}
.invata-hero.is-searching .invata-stats {
display: none;
}
.invata-hub-results {
margin-bottom: 1rem;
}
.invata-hub-results-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 1.25rem;
}
.invata-hub-results-head .invata-section-title {
margin: 0;
}
.invata-hub-results .invata-cmd-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.invata-cmd-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.invata-cmd-lang {
flex-shrink: 0;
padding: 0.1rem 0.45rem;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 800;
color: var(--lang-on);
background: var(--lang);
border-radius: 5px;
}
.invata-cmd-category {
margin-top: auto;
padding-top: 0.35rem;
font-size: 0.78rem;
color: var(--text-faint);
}
.invata-hub-results[hidden],
[data-invata-browse][hidden] {
display: none;
} .invata-filter {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.85rem;
padding: 0 0.7rem;
color: var(--text-faint);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: text;
}
.invata-filter:focus-within {
color: var(--lang-ink);
background: var(--bg-main);
border-color: var(--lang);
box-shadow: 0 0 0 3px var(--lang-soft);
}
.invata-filter svg {
flex-shrink: 0;
}
.invata-filter input {
flex: 1;
min-width: 0;
height: 38px;
padding: 0;
font: inherit;
font-size: 0.88rem;
color: var(--text-primary);
background: transparent;
border: 0;
outline: none;
}
.invata-filter-empty {
margin: 0.5rem 0.6rem;
font-size: 0.88rem;
color: var(--text-muted);
} .invata-copy {
position: absolute;
top: 0.45rem;
right: 0.55rem;
padding: 0.25rem 0.6rem;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
color: #cbd5e1;
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.invata-copy:hover {
color: #ffffff;
background: rgba(148, 163, 184, 0.25);
}
.invata-copy.is-copied {
color: #86efac;
border-color: rgba(134, 239, 172, 0.4);
}
.invata-command .entry-content pre.has-copy::after {
display: none;
}
.invata-syntax pre.has-copy {
position: relative;
padding-right: 5.5rem;
}
.invata-syntax .invata-copy {
top: -1.35rem;
color: var(--text-muted);
background: var(--bg-main);
border-color: var(--border-color);
}
.invata-syntax .invata-copy:hover {
color: var(--lang-ink);
border-color: var(--lang);
}
.invata-syntax .invata-copy.is-copied {
color: #15803d;
border-color: #86efac;
}
@media (max-width: 768px) {
.invata-search-bar {
top: calc(var(--header-height) + 0.5rem);
}
.invata-search input {
height: 48px;
font-size: 16px;
}
.invata-search-kbd,
.invata-search-hint {
display: none;
}
} .invata-command-eyebrow {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
}
.invata-command-eyebrow a:hover {
color: var(--lang-ink);
}
.invata-command .entry-header {
margin-bottom: 1.75rem;
}
.invata-command .entry-header h1 {
margin: 0 0 0.85rem;
font-size: 2.2rem;
}
.invata-command .entry-header h1 code {
padding: 0.05em 0.3em;
font-size: 0.92em;
font-weight: 700;
color: var(--lang-ink);
background: var(--lang-soft);
border-radius: 10px;
}
.invata-badges {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.invata-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.7rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-body);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.invata-badge--lang {
color: var(--lang-ink);
background: var(--lang-soft);
border-color: transparent;
}
.invata-lead {
margin: 1.1rem 0 0;
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-body);
}
.invata-syntax {
margin: 0 0 2.25rem;
overflow: hidden;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-left: 4px solid var(--lang);
border-radius: var(--radius);
}
.invata-syntax-label {
display: block;
padding: 0.55rem 1.1rem 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.invata-syntax pre {
margin: 0;
padding: 0.35rem 1.1rem 0.85rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 1rem;
line-height: 1.55;
color: var(--text-primary);
}
.invata-syntax pre code {
font-weight: 600;
}
.invata-command .entry-content h2 {
margin: 2.5rem 0 0.85rem;
font-size: 1.4rem;
}
.invata-command .entry-content h3 {
margin: 1.75rem 0 0.65rem;
font-size: 1.08rem;
}
.invata-command .entry-content h2 code,
.invata-command .entry-content h3 code {
font-size: 0.92em;
color: var(--lang-ink);
background: var(--lang-soft);
border: 0;
} .invata-command .entry-content pre,
.invata-language .entry-content pre {
position: relative;
padding: 2.1rem 1.25rem 1.1rem;
font-size: 0.9rem;
}
.invata-command .entry-content pre:not(.invata-output)::before {
content: var(--lang-label);
position: absolute;
top: 0.6rem;
left: 1.25rem;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--code-muted);
}
.invata-command .entry-content pre:not(.invata-output)::after {
content: '';
position: absolute;
top: 0.85rem;
right: 1.1rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: #475569;
box-shadow: -14px 0 0 #475569, -28px 0 0 #475569;
} .invata-command .entry-content pre:has(+ .invata-output-label) {
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.invata-output-label {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
padding: 0.5rem 1.25rem;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #15803d;
background: #e9f7ee;
border: 1px solid #c8ebd4;
border-bottom: 0;
}
.invata-output-label::before {
content: '';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 7px solid currentColor;
}
.invata-command .entry-content pre.invata-output {
margin-top: 0;
padding: 0.9rem 1.25rem;
color: var(--text-primary);
background: #f7fcf9;
border: 1px solid #c8ebd4;
border-top: 1px dashed #c8ebd4;
border-radius: 0 0 var(--radius) var(--radius);
} .invata-params code {
overflow-wrap: anywhere;
}
.invata-params td:first-child {
width: 1%;
white-space: nowrap;
}
.invata-params td:first-child code {
color: var(--lang-ink);
background: var(--lang-soft);
border-color: transparent;
}
.invata-note {
margin: 1.5rem 0;
padding: 0.9rem 1.15rem;
background: #fffaeb;
border: 1px solid #fde68a;
border-left: 4px solid #f59e0b;
border-radius: var(--radius-sm);
color: #713f12;
} .invata-pager {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem;
margin-top: 3rem;
}
.invata-pager a {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1rem 1.25rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.invata-pager a:hover {
border-color: var(--lang);
box-shadow: 0 0 0 3px var(--lang-soft);
}
.invata-pager span {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
}
.invata-pager code {
font-size: 1.05rem;
font-weight: 700;
color: var(--lang-ink);
overflow-wrap: anywhere;
}
.invata-pager-next {
grid-column: 2;
text-align: right;
} .invata-sidebar .widget-title a {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--text-primary);
font-size: 0.95rem;
letter-spacing: -0.01em;
text-transform: none;
}
.invata-sidebar .widget-title a:hover {
color: var(--lang-ink);
}
.invata-sidebar-commands {
max-height: calc(100vh - var(--header-height) - 16rem);
min-height: 240px;
overflow-y: auto;
margin: 0 -0.5rem;
padding: 0 0.5rem;
scrollbar-width: thin;
}
.invata-sidebar-group {
margin: 1.1rem 0 0.3rem;
padding: 0 0.6rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
.invata-sidebar-section:first-child .invata-sidebar-group {
margin-top: 0;
}
.invata-sidebar .widget li {
padding: 0;
border: 0;
font-size: 0.88rem;
}
.invata-sidebar .widget li a {
display: block;
padding: 0.3rem 0.6rem;
border-radius: 6px;
color: var(--text-body);
}
.invata-sidebar .widget li a:hover {
color: var(--lang-ink);
background: var(--bg-secondary);
}
.invata-sidebar .widget li.is-current a {
font-weight: 700;
color: var(--lang-ink);
background: var(--lang-soft);
box-shadow: inset 3px 0 0 var(--lang);
}
.invata-sidebar .invata-sidebar-languages li a {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.5rem;
font-size: 0.93rem;
font-weight: 600;
}
.invata-sidebar-categories li a {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.invata-sidebar-categories li a span {
font-size: 0.8rem;
color: var(--text-faint);
}
@media (max-width: 1024px) {
.invata-sidebar-commands {
max-height: none;
}
.invata-sidebar-categories {
display: none;
}
}
@media (max-width: 768px) {
.invata-language,
.invata-command {
padding: 1.5rem 1.25rem;
border-radius: var(--radius);
}
.invata-language-header {
align-items: flex-start;
gap: 1rem;
}
.invata-language-header h1 {
font-size: 1.6rem;
}
.invata-mark--lg {
min-width: 50px;
width: auto;
height: 50px;
padding: 0 0.72rem;
border-radius: 13px;
font-size: 0.85rem;
}
.invata-command .entry-header h1 {
font-size: 1.75rem;
}
.invata-lead {
font-size: 1.05rem;
}
.invata-cmd-grid {
grid-template-columns: minmax(0, 1fr);
}
.invata-command .entry-content pre,
.invata-language .entry-content pre {
font-size: 0.84rem;
}
.invata-pager {
grid-template-columns: minmax(0, 1fr);
}
.invata-pager-next {
grid-column: 1;
}
} .invata-lang-ai .invata-cmd-name,
.invata-lang-ai .invata-cmd-syntax,
.invata-lang-ai .invata-pager span + span,
.invata-lang-ai .invata-sidebar-commands a span,
.invata-lang-llm .invata-cmd-name,
.invata-lang-llm .invata-cmd-syntax,
.invata-lang-llm .invata-pager span + span,
.invata-lang-llm .invata-sidebar-commands a span,
.invata-lang-prompt-engineering .invata-cmd-name,
.invata-lang-prompt-engineering .invata-cmd-syntax,
.invata-lang-prompt-engineering .invata-pager span + span,
.invata-lang-prompt-engineering .invata-sidebar-commands a span,
.invata-lang-rag .invata-cmd-name,
.invata-lang-rag .invata-cmd-syntax,
.invata-lang-rag .invata-pager span + span,
.invata-lang-rag .invata-sidebar-commands a span,
.invata-lang-etica-ai .invata-cmd-name,
.invata-lang-etica-ai .invata-cmd-syntax,
.invata-lang-etica-ai .invata-pager span + span,
.invata-lang-etica-ai .invata-sidebar-commands a span {
font-family: inherit;
}
.invata-lang-ai .invata-cmd-syntax,
.invata-lang-llm .invata-cmd-syntax,
.invata-lang-prompt-engineering .invata-cmd-syntax,
.invata-lang-rag .invata-cmd-syntax,
.invata-lang-etica-ai .invata-cmd-syntax {
font-style: italic;
white-space: normal;
}
.invata-termen-complet {
margin: 0;
padding: 0.85rem 1.1rem;
border-radius: var(--radius);
background: var(--lang-soft, var(--bg-secondary));
font-size: 1.05rem;
font-weight: 600;
}  .invata-ai-callout {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem 2rem;
background: #0f172a;
background: linear-gradient(135deg, rgba(138, 63, 252, 0.16) 0%, rgba(15, 23, 42, 0.98) 100%), #0f172a;
border: 1px solid rgba(138, 63, 252, 0.35);
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px -10px rgba(138, 63, 252, 0.25);
color: #cbd5e1;
}
.invata-ai-callout-glow {
position: absolute;
top: -60px;
right: 5%;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(138, 63, 252, 0.35) 0%, transparent 70%);
pointer-events: none;
filter: blur(20px);
}
.invata-ai-callout-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.45rem;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #e9d5ff;
background: rgba(138, 63, 252, 0.2);
border: 1px solid rgba(192, 132, 252, 0.35);
border-radius: 999px;
}
.invata-ai-callout-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c084fc;
box-shadow: 0 0 8px #c084fc;
animation: invataPulse 2s infinite ease-in-out;
}
@keyframes invataPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.invata-ai-callout-title {
margin: 0 0 0.35rem;
font-size: 1.35rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.025em;
color: #ffffff;
}
.invata-ai-callout-desc {
max-width: 680px;
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: #cbd5e1;
}
.invata-ai-callout-action {
flex-shrink: 0;
}
.invata-ai-callout-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.85rem 1.45rem;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff !important;
text-decoration: none;
white-space: nowrap;
background: linear-gradient(135deg, #8a3ffc 0%, #6366f1 100%);
border-radius: var(--radius, 10px);
box-shadow: 0 4px 14px rgba(138, 63, 252, 0.4);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.invata-ai-callout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(138, 63, 252, 0.55);
color: #ffffff !important;
}
.invata-ai-callout-btn svg {
transition: transform 0.2s ease;
}
.invata-ai-callout-btn:hover svg {
transform: translateX(3px);
} .invata-sidebar-crosslink {
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px dashed var(--border-color);
}
.invata-sidebar-crosslink-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
font-weight: 700;
color: #8a3ffc;
background: rgba(138, 63, 252, 0.08);
border: 1px solid rgba(138, 63, 252, 0.2);
border-radius: var(--radius);
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.invata-sidebar-crosslink-btn:hover {
background: rgba(138, 63, 252, 0.15);
border-color: rgba(138, 63, 252, 0.4);
color: #722ed1;
} .invata-ai-hero {
background: #0b0f19;
background-image:
radial-gradient(circle at 80% 20%, rgba(138, 63, 252, 0.42) 0, transparent 45%),
radial-gradient(circle at 20% 90%, rgba(99, 102, 241, 0.35) 0, transparent 50%);
}
.invata-ai-hero::after {
content: 'const model = ai.load("gpt");\A const embedding = await vectorize(query);\A answer = agent.generate(context);';
white-space: pre;
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%) rotate(-4deg);
font-family: var(--font-mono);
font-size: 0.95rem;
line-height: 2;
color: rgba(216, 180, 254, 0.18);
pointer-events: none;
}
.invata-eyebrow--ai {
color: #e9d5ff;
background: rgba(138, 63, 252, 0.22);
border-color: rgba(192, 132, 252, 0.35);
}
.invata-ai-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 1.25rem;
}
.invata-card-top-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.invata-status-badge {
display: inline-block;
padding: 0.2rem 0.55rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--bg-secondary, #f1f5f9);
border-radius: 999px;
border: 1px solid var(--border-color);
}
.invata-status-badge--active {
color: #166534;
background: #dcfce7;
border-color: #86efac;
}
.invata-ai-card--featured {
border-color: rgba(138, 63, 252, 0.45);
box-shadow: 0 4px 18px rgba(138, 63, 252, 0.1);
}
.invata-ai-card--featured:hover {
border-color: #8a3ffc;
box-shadow: 0 8px 24px rgba(138, 63, 252, 0.22);
}
.invata-ai-card--upcoming {
cursor: default;
opacity: 0.92;
background: var(--bg-main);
border-style: dashed;
}
.invata-ai-card--upcoming:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
.invata-mark--mono {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.05em;
background: #f1f5f9;
color: #475569;
border: 1px solid #cbd5e1;
}
.invata-cta--muted {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
} .invata-ai-categories-section {
margin-top: 3.5rem;
padding: 2.25rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.invata-ai-categories-header {
margin-bottom: 1.5rem;
}
.invata-ai-categories-header .invata-section-title {
margin-bottom: 0.4rem;
}
.invata-section-subtitle {
margin: 0;
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.5;
}
.invata-ai-category-chips {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.invata-ai-chip {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 1rem;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border-color);
border-radius: 999px;
color: var(--text-primary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s var(--ease);
}
.invata-ai-chip:hover {
background: rgba(138, 63, 252, 0.08);
border-color: rgba(138, 63, 252, 0.4);
color: #722ed1;
transform: translateY(-1px);
}
.invata-ai-chip-count {
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.invata-ai-chip:hover .invata-ai-chip-count {
background: #8a3ffc;
color: #ffffff;
border-color: #8a3ffc;
} .invata-ai-crosslink-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-top: 3rem;
padding: 2rem 2.5rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.invata-ai-crosslink-content h3 {
margin: 0.5rem 0 0.35rem;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.invata-ai-crosslink-content p {
margin: 0;
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.55;
max-width: 620px;
}
.invata-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.85rem 1.45rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
white-space: nowrap;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border-color);
border-radius: var(--radius, 10px);
transition: all 0.25s var(--ease);
}
.invata-btn-secondary:hover {
background: var(--bg-main);
border-color: var(--border-strong);
color: var(--accent-color, #2563eb);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.invata-btn-secondary svg {
transition: transform 0.2s ease;
}
.invata-btn-secondary:hover svg {
transform: translateX(3px);
}
@media (max-width: 768px) {
.invata-ai-callout {
flex-direction: column;
align-items: stretch;
padding: 1.35rem;
gap: 1.25rem;
}
.invata-ai-callout-btn {
justify-content: center;
width: 100%;
}
.invata-ai-crosslink-box {
flex-direction: column;
align-items: stretch;
padding: 1.5rem;
gap: 1.25rem;
}
.invata-btn-secondary {
justify-content: center;
width: 100%;
}
.invata-ai-categories-section {
padding: 1.5rem;
}
}  .invata-ai-roadmaps-section {
margin: 2.25rem 0 3.5rem;
}
.invata-roadmaps-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.invata-roadmap-card {
display: flex;
flex-direction: column;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.invata-roadmap-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
}
.invata-roadmap-top {
margin-bottom: 1.15rem;
}
.invata-roadmap-badge {
display: inline-block;
padding: 0.25rem 0.65rem;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
margin-bottom: 0.5rem;
}
.invata-badge--starter {
background: #e0e7ff;
color: #4338ca;
border: 1px solid #c7d2fe;
}
.invata-badge--coding {
background: #fef3c7;
color: #b45309;
border: 1px solid #fde68a;
}
.invata-badge--agent {
background: #f3e8ff;
color: #7e22ce;
border: 1px solid #e9d5ff;
}
.invata-badge--infra {
background: #dcfce7;
color: #15803d;
border: 1px solid #bbf7d0;
}
.invata-roadmap-title {
margin: 0.35rem 0 0.25rem;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.invata-roadmap-desc {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}
.invata-roadmap-flow {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin: 1.25rem 0;
}
.invata-flow-node {
display: block;
padding: 0.85rem 1rem;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border-color);
border-radius: var(--radius, 10px);
text-decoration: none;
transition: all 0.2s ease;
}
.invata-flow-node:hover {
background: var(--bg-main);
border-color: var(--accent-color, #2563eb);
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
text-decoration: none;
}
.invata-flow-step {
display: inline-block;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-faint);
letter-spacing: 0.05em;
margin-bottom: 0.15rem;
}
.invata-flow-name {
display: block;
font-size: 0.96rem;
font-weight: 700;
color: var(--text-primary);
}
.invata-flow-detail {
display: block;
font-size: 0.82rem;
color: var(--text-muted);
margin-top: 0.2rem;
line-height: 1.4;
}
.invata-flow-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: var(--text-faint);
transform: rotate(90deg);
margin: -0.25rem 0;
}
.invata-roadmap-goal {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
font-size: 0.86rem;
color: var(--text-body);
line-height: 1.5;
} .invata-ai-comparison-section {
margin: 3.5rem 0;
}
.invata-table-responsive-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--bg-main);
box-shadow: var(--shadow-sm);
margin-top: 1.25rem;
}
.invata-comparison-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.9rem;
color: var(--text-body);
}
.invata-comparison-table th {
background: var(--bg-secondary, #f8fafc);
padding: 1rem 1.15rem;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
border-bottom: 2px solid var(--border-color);
white-space: nowrap;
}
.invata-comparison-table td {
padding: 1.1rem 1.15rem;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
line-height: 1.45;
}
.invata-comparison-table tr:last-child td {
border-bottom: none;
}
.invata-comparison-table tbody tr:hover td {
background: rgba(37, 99, 235, 0.025);
}
.invata-tool-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: var(--text-primary);
font-size: 0.98rem;
}
.invata-tool-link:hover {
color: var(--accent-color, #2563eb);
text-decoration: none;
}
.invata-tool-vendor {
display: block;
font-size: 0.76rem;
color: var(--text-muted);
margin-left: 2.45rem;
margin-top: 0.15rem;
}
.invata-tag {
display: inline-block;
padding: 0.2rem 0.55rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: 6px;
white-space: nowrap;
}
.invata-tag--cli {
background: #f1f5f9;
color: #334155;
border: 1px solid #cbd5e1;
font-family: var(--font-mono);
}
.invata-tag--ide {
background: #e0f2fe;
color: #0369a1;
border: 1px solid #bae6fd;
}
.invata-tag--hybrid {
background: #ede9fe;
color: #6d28d9;
border: 1px solid #ddd6fe;
}
.invata-check {
display: inline-flex;
align-items: center;
font-weight: 700;
color: #15803d;
background: #dcfce7;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.invata-neutral {
display: inline-flex;
align-items: center;
font-weight: 600;
color: #64748b;
background: #f1f5f9;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
} .invata-mark--claude { background: #d97757 !important; color: #ffffff !important; }
.invata-mark--codex { background: #10a37f !important; color: #ffffff !important; }
.invata-mark--antigravity { background: #4f46e5 !important; color: #ffffff !important; }
.invata-mark--hermes { background: #d97706 !important; color: #ffffff !important; }
.invata-mark--cursor { background: #0284c7 !important; color: #ffffff !important; }
.invata-mark--copilot { background: #1f2937 !important; color: #ffffff !important; }
.invata-mark--aider { background: #9333ea !important; color: #ffffff !important; } .invata-ai-faq-section {
margin: 3.5rem 0;
}
.invata-faq-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 1.5rem;
}
.invata-faq-item {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius, 12px);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.invata-faq-item[open] {
border-color: var(--accent-color, #2563eb);
box-shadow: var(--shadow-sm);
}
.invata-faq-summary {
padding: 1.25rem 1.5rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
list-style: none;
user-select: none;
}
.invata-faq-summary::-webkit-details-marker {
display: none;
}
.invata-faq-chevron {
color: var(--text-muted);
transition: transform 0.25s var(--ease);
flex-shrink: 0;
}
.invata-faq-item[open] .invata-faq-chevron {
transform: rotate(180deg);
color: var(--accent-color, #2563eb);
}
.invata-faq-answer {
padding: 0 1.5rem 1.35rem;
color: var(--text-body);
font-size: 0.95rem;
line-height: 1.65;
border-top: 1px solid transparent;
}
.invata-faq-item[open] .invata-faq-answer {
border-top-color: var(--border-color);
padding-top: 1.1rem;
}
.invata-faq-answer p {
margin: 0 0 0.85rem;
}
.invata-faq-answer p:last-child {
margin-bottom: 0;
}
.invata-faq-answer ul {
margin: 0.5rem 0 0.85rem 1.25rem;
padding: 0;
}
.invata-faq-answer li {
margin-bottom: 0.45rem;
}
.invata-faq-answer a {
color: var(--accent-color, #2563eb);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.invata-faq-answer a:hover {
color: var(--accent-hover, #1d4ed8);
}
@media (max-width: 880px) {
.invata-roadmaps-grid {
grid-template-columns: 1fr;
}
.invata-comparison-table td,
.invata-comparison-table th {
padding: 0.85rem 0.95rem;
}
}.wpel-icon.dashicons-before:before {
font-size: inherit;
line-height: inherit;
width: auto;
}
.wpel-icon-left i.wpel-icon.dashicons-before {
margin-right: 0.2em;
}
.wpel-icon-right i.wpel-icon.dashicons-before {
margin-left: 0.2em;
}
.wpel-icon-left i.wpel-icon {
margin-right: 0.3em;
}
.wpel-icon-right i.wpel-icon {
margin-left: 0.3em;
}
.wpel-icon.wpel-image {
display: inline-block;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-position: 100% 50%;
}
.wpel-icon-left .wpel-icon.wpel-image {
margin-right: 0.3em;
}
.wpel-icon-right .wpel-icon.wpel-image {
margin-left: 0.3em;
}
.wpel-icon-1 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-1.png);
}
.wpel-icon-2 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-2.png);
}
.wpel-icon-3 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-3.png);
}
.wpel-icon-4 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-4.png);
}
.wpel-icon-5 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-5.png);
}
.wpel-icon-6 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-6.png);
}
.wpel-icon-7 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-7.png);
}
.wpel-icon-8 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-8.png);
}
.wpel-icon-9 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-9.png);
}
.wpel-icon-10 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-10.png);
}
.wpel-icon-11 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-11.png);
}
.wpel-icon-12 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-12.png);
}
.wpel-icon-13 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-13.png);
}
.wpel-icon-14 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-14.png);
}
.wpel-icon-15 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-15.png);
}
.wpel-icon-16 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-16.png);
}
.wpel-icon-17 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-17.png);
}
.wpel-icon-18 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-18.png);
}
.wpel-icon-19 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-19.png);
}
.wpel-icon-20 {
background-image: url(//www.dexblog.ro/wp-content/plugins/wp-external-links/public/images/wpel-icons/icon-20.png);
}.ccb_single_video_player {
background-color: #000;
background-image: url(//www.dexblog.ro/wp-content/plugins/wpythub/assets/front-end/images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}