: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);
} @media (min-width: 1101px) { .header-container {
position: relative;
--mega-width: min(1360px, calc(100vw - 2rem));
}
.main-navigation li.mega-menu {
position: static;
}
.main-navigation > ul > li.mega-menu > ul.sub-menu,
.main-navigation > div > ul > li.mega-menu > ul.sub-menu {
top: calc(100% - 6px);
left: 50%;
right: auto;
margin-left: calc(var(--mega-width) / -2);
}
.main-navigation li.mega-menu > ul.sub-menu::before {
top: -24px;
height: 24px;
} .main-navigation li.mega-menu > ul.sub-menu {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: start;
gap: 1.1rem 1.75rem;
width: var(--mega-width);
max-height: calc(100vh - var(--header-height) - 1.5rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.4rem 1.6rem 1.3rem;
}
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(2) { grid-column: 3; grid-row: 1; }
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(3) { grid-column: 3; grid-row: 2; }
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(4) { grid-column: 4; grid-row: 1 / span 2; }
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(5) { grid-column: 5; grid-row: 1; }
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(6) { grid-column: 5; grid-row: 2; }
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(7) { grid-column: 1 / span 2; grid-row: 2; } .main-navigation li.mega-menu > ul.sub-menu > li > a,
.main-navigation li.mega-menu > ul.sub-menu > li.current-menu-item > a,
.main-navigation li.mega-menu > ul.sub-menu > li.current-menu-parent > a,
.main-navigation li.mega-menu > ul.sub-menu > li.current-menu-ancestor > a {
justify-content: flex-start;
gap: 0.5rem;
padding: 0 0.6rem 0.6rem;
margin-bottom: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.3;
text-transform: uppercase;
color: var(--text-primary);
background: transparent;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
} .main-navigation li.mega-menu > ul.sub-menu > li:is(:nth-child(1), :nth-child(2), :nth-child(4), :nth-child(5)) > a {
min-height: calc(2.6em + 0.6rem);
align-items: flex-end;
}
.main-navigation li.mega-menu > ul.sub-menu > li > a::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
margin-bottom: 0.3em;
border-radius: 2px;
background: var(--accent-color);
}
.main-navigation li.mega-menu > ul.sub-menu > li > a:hover {
color: var(--accent-ink);
background: transparent;
transform: none;
}
.main-navigation li.mega-menu > ul.sub-menu > li > a::after {
display: none;
}
.main-navigation li.mega-menu ul.sub-menu ul.sub-menu {
display: grid;
gap: 1px;
margin: 0;
padding: 0;
border-left: 0;
}
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(1) > ul.sub-menu,
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(7) > ul.sub-menu {
grid-template-columns: 1fr 1fr;
column-gap: 1.75rem;
}
.main-navigation li.mega-menu ul.sub-menu ul.sub-menu a {
display: block;
padding: 0.32rem 0.6rem;
font-size: 0.86rem;
font-weight: 500;
line-height: 1.35;
color: var(--text-body);
background: transparent;
}
.main-navigation li.mega-menu ul.sub-menu ul.sub-menu a:hover,
.main-navigation li.mega-menu ul.sub-menu ul.sub-menu li.current-menu-item > a {
color: var(--accent-ink);
background-color: var(--accent-soft);
transform: none;
}
} @media (min-width: 1101px) and (max-width: 1399px) {
.main-navigation li.mega-menu > ul.sub-menu {
gap: 0.9rem 1rem;
padding: 1.1rem 1.1rem 1rem;
}
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(1) > ul.sub-menu,
.main-navigation li.mega-menu > ul.sub-menu > li:nth-child(7) > ul.sub-menu {
column-gap: 1rem;
}
.main-navigation li.mega-menu ul.sub-menu ul.sub-menu a {
padding: 0.28rem 0.45rem;
font-size: 0.82rem;
}
} @media (max-width: 1100px) {
.main-navigation li.mega-menu > ul.sub-menu > li > a,
.main-navigation li.mega-menu > ul.sub-menu > li.current-menu-item > a,
.main-navigation li.mega-menu > ul.sub-menu > li.current-menu-parent > a,
.main-navigation li.mega-menu > ul.sub-menu > li.current-menu-ancestor > a {
margin-top: 0.5rem;
padding: 0.4rem 0.75rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-primary);
background: transparent;
}
} @media (min-width: 560px) and (max-width: 1100px) {
.main-navigation li.mega-menu ul.sub-menu ul.sub-menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 0.5rem;
}
} .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 (min-width: 1101px) and (max-width: 1319px) {
.main-navigation > ul,
.main-navigation div > ul {
gap: 0;
}
.main-navigation > ul > li > a,
.main-navigation > div > ul > li > a {
padding: 0.5rem 0.55rem;
font-size: 0.86rem;
}
.header-search-toggle-label {
display: none;
}
} @media (max-width: 1100px) {
: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-nodejs {
--lang: #3c873a;
--lang-ink: #2b6129;
--lang-soft: #edf6ec;
--lang-on: #ffffff;
--lang-label: "Node.js";
}
.invata-lang-wordpress {
--lang: #21759b;
--lang-ink: #185674;
--lang-soft: #e9f3f8;
--lang-on: #ffffff;
--lang-label: "WordPress";
}
.invata-lang-pandas {
--lang: #150458;
--lang-ink: #150458;
--lang-soft: #ecebf4;
--lang-on: #ffffff;
--lang-label: "pandas";
}
.invata-lang-numpy {
--lang: #4dabcf;
--lang-ink: #1f6f8f;
--lang-soft: #eaf6fa;
--lang-on: #ffffff;
--lang-label: "NumPy";
}
.invata-lang-sqlite {
--lang: #0f80cc;
--lang-ink: #0b5f98;
--lang-soft: #e8f3fb;
--lang-on: #ffffff;
--lang-label: "SQLite";
}
.invata-lang-c {
--lang: #5c6bc0;
--lang-ink: #3f4b99;
--lang-soft: #eef0f9;
--lang-on: #ffffff;
--lang-label: "C";
}
.invata-lang-powershell {
--lang: #2671be;
--lang-ink: #1b5590;
--lang-soft: #e9f1fa;
--lang-on: #ffffff;
--lang-label: "PowerShell";
}
.invata-lang-openlitespeed {
--lang: #0077b6;
--lang-ink: #023e8a;
--lang-soft: #e0f2fe;
--lang-on: #ffffff;
--lang-label: "OpenLiteSpeed";
}
.invata-lang-ffmpeg {
--lang: #007808;
--lang-ink: #005005;
--lang-soft: #e6f4ea;
--lang-on: #ffffff;
--lang-label: "FFmpeg";
}
.invata-lang-windows {
--lang: #0078d7;
--lang-ink: #005a9e;
--lang-soft: #e5f1fb;
--lang-on: #ffffff;
--lang-label: "Windows CMD";
}
.invata-lang-curl {
--lang: #0496ff;
--lang-ink: #0066aa;
--lang-soft: #e5f4ff;
--lang-on: #ffffff;
--lang-label: "cURL";
}
.invata-lang-apache {
--lang: #c41724;
--lang-ink: #920f1a;
--lang-soft: #fde8e9;
--lang-on: #ffffff;
--lang-label: "Apache";
}
.invata-lang-nextjs {
--lang: #111111;
--lang-ink: #000000;
--lang-soft: #f0f0f2;
--lang-on: #ffffff;
--lang-label: "Next.js";
}
.invata-lang-gh {
--lang: #6e40c9;
--lang-ink: #5527a0;
--lang-soft: #f1edfa;
--lang-on: #ffffff;
--lang-label: "GitHub CLI";
}
.invata-lang-redis {
--lang: #dc382d;
--lang-ink: #a7231a;
--lang-soft: #fdeeed;
--lang-on: #ffffff;
--lang-label: "Redis";
}
.invata-lang-react {
--lang: #61dafb;
--lang-ink: #0088cc;
--lang-soft: #f0faff;
--lang-on: #0f172a;
--lang-label: "React & Next.js";
}
.invata-lang-tailwind {
--lang: #38bdf8;
--lang-ink: #0284c7;
--lang-soft: #f0f9ff;
--lang-on: #0f172a;
--lang-label: "Tailwind CSS";
}
.invata-lang-mongodb {
--lang: #00ed64;
--lang-ink: #00684a;
--lang-soft: #f0fdf4;
--lang-on: #022c22;
--lang-label: "MongoDB";
}
.invata-lang-terraform {
--lang: #844fba;
--lang-ink: #5c4ee5;
--lang-soft: #faf5ff;
--lang-on: #ffffff;
--lang-label: "Terraform";
}
.invata-lang-flutter {
--lang: #02569b;
--lang-ink: #0175c2;
--lang-soft: #f0f7ff;
--lang-on: #ffffff;
--lang-label: "Flutter";
}
.invata-lang-vue {
--lang: #42b883;
--lang-ink: #35495e;
--lang-soft: #f0fdf4;
--lang-on: #ffffff;
--lang-label: "Vue.js";
}
.invata-lang-svelte {
--lang: #ff3e00;
--lang-ink: #b32b00;
--lang-soft: #fff5f2;
--lang-on: #ffffff;
--lang-label: "Svelte";
}
.invata-lang-graphql {
--lang: #e10098;
--lang-ink: #b8007a;
--lang-soft: #fdf2f8;
--lang-on: #ffffff;
--lang-label: "GraphQL";
}
.invata-lang-kafka {
--lang: #231f20;
--lang-ink: #000000;
--lang-soft: #f3f4f6;
--lang-on: #ffffff;
--lang-label: "Apache Kafka";
}
.invata-lang-rabbitmq {
--lang: #ff6600;
--lang-ink: #cc5200;
--lang-soft: #fff7ed;
--lang-on: #ffffff;
--lang-label: "RabbitMQ";
}
.invata-lang-elasticsearch {
--lang: #005571;
--lang-ink: #003649;
--lang-soft: #f0f9ff;
--lang-on: #ffffff;
--lang-label: "Elasticsearch";
}
.invata-lang-aws {
--lang: #ff9900;
--lang-ink: #232f3e;
--lang-soft: #fffbeb;
--lang-on: #111827;
--lang-label: "AWS";
}
.invata-lang-github-actions {
--lang: #2088ff;
--lang-ink: #161b22;
--lang-soft: #eff6ff;
--lang-on: #ffffff;
--lang-label: "GitHub Actions";
}
.invata-lang-ansible {
--lang: #ee0000;
--lang-ink: #000000;
--lang-soft: #fef2f2;
--lang-on: #ffffff;
--lang-label: "Ansible";
}
.invata-lang-securitate {
--lang: #10b981;
--lang-ink: #065f46;
--lang-soft: #ecfdf5;
--lang-on: #ffffff;
--lang-label: "Securitate";
}
.invata-lang-spring-boot {
--lang: #6db33f;
--lang-ink: #34302d;
--lang-soft: #f2f9ed;
--lang-on: #ffffff;
--lang-label: "Spring Boot";
}
.invata-lang-fastapi {
--lang: #009688;
--lang-ink: #004d40;
--lang-soft: #f0fdfa;
--lang-on: #ffffff;
--lang-label: "FastAPI";
}
.invata-lang-nestjs {
--lang: #ea2845;
--lang-ink: #df2340;
--lang-soft: #fef2f2;
--lang-on: #ffffff;
--lang-label: "NestJS";
}
.invata-lang-laravel {
--lang: #ff2d20;
--lang-ink: #b81e14;
--lang-soft: #fff1f2;
--lang-on: #ffffff;
--lang-label: "Laravel";
}
.invata-lang-spark {
--lang: #e25a1c;
--lang-ink: #1b3c59;
--lang-soft: #fff7ed;
--lang-on: #ffffff;
--lang-label: "Apache Spark";
}
.invata-lang-dbt {
--lang: #ff694b;
--lang-ink: #041c2c;
--lang-soft: #fff5f2;
--lang-on: #ffffff;
--lang-label: "Snowflake & dbt";
}
.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-lang-unsloth {
--lang: #f59e0b;
--lang-ink: #b45309;
--lang-soft: #fffbeb;
--lang-on: #ffffff;
--lang-label: "Unsloth";
}
.invata-lang-llama-cpp {
--lang: #06b6d4;
--lang-ink: #0e7490;
--lang-soft: #ecfeff;
--lang-on: #ffffff;
--lang-label: "llama.cpp";
}
.invata-lang-browser-use {
--lang: #2563eb;
--lang-ink: #1d4ed8;
--lang-soft: #eff6ff;
--lang-on: #ffffff;
--lang-label: "Browser Use";
}
.invata-lang-autogen {
--lang: #0078d4;
--lang-ink: #005a9e;
--lang-soft: #f0f7ff;
--lang-on: #ffffff;
--lang-label: "AutoGen";
}
.invata-lang-guardrails-ai {
--lang: #e11d48;
--lang-ink: #be123c;
--lang-soft: #fff1f2;
--lang-on: #ffffff;
--lang-label: "Guardrails";
}
.invata-lang-voice-ai {
--lang: #8b5cf6;
--lang-ink: #7c3aed;
--lang-soft: #f5f3ff;
--lang-on: #ffffff;
--lang-label: "Voice AI";
}
.invata-lang-continue-dev {
--lang: #0f766e;
--lang-ink: #115e59;
--lang-soft: #f0fdfa;
--lang-on: #ffffff;
--lang-label: "Continue";
}
.invata-lang-vision-ai {
--lang: #f59e0b;
--lang-ink: #d97706;
--lang-soft: #fffbeb;
--lang-on: #ffffff;
--lang-label: "Vision AI";
} .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 {
display: inline-block;
vertical-align: baseline;
padding: 0.05em 0.35em;
font-size: 0.92em;
font-weight: 700;
line-height: 1.25;
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: 3rem 0;
}
.invata-table-mobile-hint {
display: none;
font-size: 0.74rem;
color: var(--text-muted);
text-align: right;
margin-bottom: 0.45rem;
font-weight: 500;
}
@media (max-width: 900px) {
.invata-table-mobile-hint {
display: block;
}
}
.invata-table-responsive-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg, 12px);
background: var(--bg-main);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin-top: 0.85rem;
}
.invata-comparison-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.84rem;
color: var(--text-body);
}
.invata-comparison-table th {
background: var(--bg-secondary, #f8fafc);
padding: 0.75rem 0.95rem;
font-size: 0.73rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 2px solid var(--border-color);
white-space: nowrap;
}
.invata-comparison-table td {
padding: 0.85rem 0.95rem;
border-bottom: 1px solid var(--border-color);
vertical-align: top;
line-height: 1.4;
}
.invata-comparison-table tr:last-child td {
border-bottom: none;
}
.invata-comparison-table tbody tr:hover td {
background: rgba(37, 99, 235, 0.02);
} .invata-tool-cell {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.invata-tool-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--text-primary);
font-size: 0.9rem;
font-weight: 700;
}
.invata-tool-link:hover {
color: var(--accent-color, #2563eb);
text-decoration: none;
}
.invata-tool-vendor {
display: inline-block;
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
margin-left: 2.25rem;
} .invata-ui-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.invata-ui-sub {
font-size: 0.72rem;
color: var(--text-muted);
}
.invata-tag {
display: inline-block;
padding: 0.18rem 0.5rem;
font-size: 0.73rem;
font-weight: 700;
border-radius: 6px;
white-space: nowrap;
width: fit-content;
}
.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-cap-cell {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.invata-cap-row {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
line-height: 1.25;
}
.invata-cap-detail {
font-size: 0.74rem;
color: var(--text-muted);
font-family: var(--font-mono);
}
.invata-cap-sub {
font-size: 0.71rem;
color: var(--text-faint);
margin-top: 0.05rem;
}
.invata-badge-status {
display: inline-block;
padding: 0.1rem 0.38rem;
font-size: 0.71rem;
font-weight: 700;
border-radius: 4px;
line-height: 1.2;
}
.invata-badge-status--yes {
background: #dcfce7;
color: #15803d;
}
.invata-badge-status--mcp {
background: #e0e7ff;
color: #3730a3;
}
.invata-badge-status--mid {
background: #f1f5f9;
color: #475569;
} .invata-context-cell {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.invata-token-pill {
display: inline-block;
font-weight: 700;
font-size: 0.81rem;
color: var(--text-primary);
}
.invata-token-pill--huge {
color: #4338ca;
background: #e0e7ff;
padding: 0.1rem 0.4rem;
border-radius: 4px;
width: fit-content;
}
.invata-models-text {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.35;
} .invata-recom-cell {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.invata-recom-text {
margin: 0;
font-size: 0.81rem;
line-height: 1.45;
color: var(--text-body);
}
.invata-recom-link {
font-size: 0.75rem;
font-weight: 700;
color: var(--accent-color, #2563eb);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.invata-recom-link:hover {
text-decoration: underline;
color: var(--accent-hover, #1d4ed8);
} .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: 900px) {
.invata-roadmaps-grid {
grid-template-columns: 1fr;
}
.invata-comparison-table {
min-width: 760px;
}
.invata-comparison-table th,
.invata-comparison-table td {
padding: 0.75rem 0.85rem;
}
.invata-comparison-table th:first-child,
.invata-comparison-table td:first-child {
position: sticky;
left: 0;
background: var(--bg-main);
z-index: 2;
box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.08);
}
.invata-comparison-table th:first-child {
background: var(--bg-secondary, #f8fafc);
}
}  .invata-badge--community {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--accent-color, #2563eb);
background: var(--accent-soft, #eef4ff);
border: 1px solid var(--accent-border, #bfdbfe);
font-weight: 600;
text-decoration: none;
transition: all 0.15s ease;
}
.invata-badge--community:hover {
background: var(--accent-color, #2563eb);
color: #ffffff;
border-color: var(--accent-color, #2563eb);
transform: translateY(-1px);
}
.invata-badge--community svg {
flex-shrink: 0;
} .invata-comments-area {
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 2px solid var(--border-color, #e2e8f0);
}
.invata-comments-header {
margin-bottom: 2rem;
}
.invata-comments-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.85rem;
margin-bottom: 0.75rem;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--accent-color, #2563eb);
background: var(--accent-soft, #eef4ff);
border: 1px solid var(--accent-border, #bfdbfe);
border-radius: 999px;
}
.invata-comments-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
animation: invata-pulse-anim 2s infinite;
}
@keyframes invata-pulse-anim {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.invata-comments-title {
margin: 0 0 0.65rem;
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text-primary, #0f172a);
}
.invata-comments-title code {
color: var(--accent-color, #2563eb);
background: var(--accent-soft, #eef4ff);
padding: 0.15rem 0.45rem;
border-radius: var(--radius-sm, 6px);
font-size: 0.95em;
}
.invata-comments-lead {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: var(--text-muted, #64748b);
max-width: 780px;
} .invata-comments-meta-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.invata-comments-count-title {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
}
.invata-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.invata-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.85rem;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-body, #334155);
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
}
.invata-pill:hover {
background: #ffffff;
border-color: var(--border-strong, #cbd5e1);
color: var(--text-primary, #0f172a);
}
.invata-pill.is-active {
background: var(--accent-color, #2563eb);
color: #ffffff;
border-color: var(--accent-color, #2563eb);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.invata-filter-empty-comments {
padding: 1.5rem;
text-align: center;
font-size: 0.95rem;
color: var(--text-muted, #64748b);
background: var(--bg-secondary, #f8fafc);
border: 1px dashed var(--border-color, #e2e8f0);
border-radius: var(--radius, 12px);
margin: 1.5rem 0;
} .invata-comment-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 0 0 2.5rem;
padding: 0;
list-style: none;
}
.invata-comment-item {
list-style: none;
}
.invata-comment-card {
padding: 1.35rem 1.5rem;
background: var(--bg-main, #ffffff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius, 12px);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.invata-comment-card:hover {
border-color: var(--border-strong, #cbd5e1);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.invata-comment-card.is-pending {
border-left: 4px solid #f59e0b;
background: #fffdfa;
}
.invata-comment-card-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.invata-comment-author-box {
display: flex;
align-items: center;
gap: 0.75rem;
}
.invata-comment-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-color, #e2e8f0);
}
.invata-comment-author-info {
display: flex;
flex-direction: column;
}
.invata-comment-author-name {
font-weight: 700;
font-size: 0.98rem;
color: var(--text-primary, #0f172a);
}
.invata-comment-author-name a {
color: inherit;
text-decoration: none;
}
.invata-comment-author-name a:hover {
color: var(--accent-color, #2563eb);
}
.invata-comment-date-link {
font-size: 0.8rem;
color: var(--text-muted, #64748b);
text-decoration: none;
}
.invata-comment-date-link:hover {
color: var(--accent-color, #2563eb);
} .invata-comment-badges {
display: flex;
align-items: center;
gap: 0.4rem;
}
.invata-badge--question {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
font-weight: 700;
color: #1e40af;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 999px;
}
.invata-badge--code {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
font-weight: 700;
color: #065f46;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 999px;
}
.invata-badge--comment {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 999px;
} .invata-comment-awaiting-moderation {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 1rem;
margin-bottom: 0.85rem;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: var(--radius-sm, 8px);
color: #92400e;
font-size: 0.88rem;
line-height: 1.5;
}
.invata-mod-icon {
font-size: 1.15rem;
flex-shrink: 0;
line-height: 1;
}
.invata-comment-awaiting-moderation strong {
display: block;
font-weight: 700;
margin-bottom: 0.15rem;
}
.invata-comment-awaiting-moderation p {
margin: 0;
font-size: 0.84rem;
} .invata-comment-snippet-title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
}
.invata-comment-text {
font-size: 0.97rem;
line-height: 1.65;
color: var(--text-body, #334155);
}
.invata-comment-text p:last-child {
margin-bottom: 0;
} .invata-comment-codeblock {
margin: 0.85rem 0;
background: var(--code-bg, #0f172a);
border-radius: var(--radius-sm, 8px);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.invata-comment-codeblock-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.invata-code-lang-label {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #94a3b8;
text-transform: uppercase;
}
.invata-comment-codeblock .invata-copy {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.65rem;
font-size: 0.76rem;
font-weight: 600;
color: #e2e8f0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.invata-comment-codeblock .invata-copy:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.invata-comment-codeblock .invata-copy.is-copied {
background: #10b981;
color: #ffffff;
border-color: #10b981;
}
.invata-comment-codeblock pre {
margin: 0;
padding: 0.95rem 1.15rem;
overflow-x: auto;
background: transparent;
border: 0;
}
.invata-comment-codeblock pre code {
font-family: var(--font-mono, monospace);
font-size: 0.88rem;
line-height: 1.6;
color: var(--code-text, #e2e8f0);
background: transparent;
padding: 0;
border: 0;
white-space: pre;
}
.invata-comment-actions {
margin-top: 0.75rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--border-color, #e2e8f0);
}
.invata-comment-actions .comment-reply-link {
font-size: 0.84rem;
font-weight: 700;
color: var(--accent-color, #2563eb);
text-decoration: none;
transition: color 0.15s ease;
}
.invata-comment-actions .comment-reply-link:hover {
color: var(--accent-hover, #1d4ed8);
text-decoration: underline;
} .invata-no-comments {
padding: 2.25rem 1.5rem;
margin-bottom: 2rem;
text-align: center;
background: var(--bg-secondary, #f8fafc);
border: 1px dashed var(--border-color, #e2e8f0);
border-radius: var(--radius, 12px);
}
.invata-no-comments-icon {
font-size: 2.2rem;
margin-bottom: 0.65rem;
}
.invata-no-comments h3 {
margin: 0 0 0.4rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
}
.invata-no-comments p {
margin: 0 auto;
max-width: 580px;
font-size: 0.93rem;
line-height: 1.55;
color: var(--text-muted, #64748b);
} .invata-comment-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 2rem;
padding: 2rem;
background: var(--bg-main, #ffffff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-lg, 16px);
box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}
.invata-reply-title {
margin: 0 0 0.5rem;
font-size: 1.35rem;
font-weight: 800;
color: var(--text-primary, #0f172a);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.invata-form-title-badge {
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
font-weight: 700;
text-transform: uppercase;
color: var(--accent-color, #2563eb);
background: var(--accent-soft, #eef4ff);
border-radius: 999px;
}
.invata-cancel-reply a {
font-size: 0.82rem;
font-weight: 600;
color: #dc2626;
text-decoration: underline;
margin-left: 0.5rem;
} .invata-mode-selector-wrap {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.invata-mode-label {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
}
.invata-mode-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.65rem;
}
.invata-mode-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 0.9rem;
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
color: var(--text-body, #334155);
background: var(--bg-secondary, #f8fafc);
border: 2px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-sm, 8px);
cursor: pointer;
transition: all 0.15s ease;
}
.invata-mode-btn:hover {
background: #ffffff;
border-color: var(--border-strong, #cbd5e1);
color: var(--text-primary, #0f172a);
}
.invata-mode-btn.is-active {
background: #ffffff;
color: var(--accent-color, #2563eb);
border-color: var(--accent-color, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.invata-mode-btn svg {
flex-shrink: 0;
} .invata-form-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
}
.invata-form-field label {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
}
.invata-optional {
font-weight: 400;
font-size: 0.82rem;
color: var(--text-muted, #64748b);
}
.invata-form-field input[type="text"],
.invata-form-field input[type="email"],
.invata-form-field textarea {
width: 100%;
padding: 0.75rem 0.95rem;
font-family: inherit;
font-size: 0.96rem;
line-height: 1.5;
color: var(--text-primary, #0f172a);
background: var(--bg-main, #ffffff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-sm, 8px);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.invata-form-field input[type="text"]:focus,
.invata-form-field input[type="email"]:focus,
.invata-form-field textarea:focus {
outline: none;
border-color: var(--accent-color, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.invata-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.invata-form-checkbox {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
font-size: 0.85rem;
color: var(--text-muted, #64748b);
}
.invata-form-checkbox input {
margin-top: 0.2rem;
} .invata-code-input-wrap {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1.25rem;
background: #0f172a;
border-radius: var(--radius, 12px);
border: 1px solid #1e293b;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.invata-code-input-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.invata-code-input-head label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.86rem;
font-weight: 700;
color: #f1f5f9;
}
.invata-code-lang-picker select {
padding: 0.35rem 0.75rem;
font-family: inherit;
font-size: 0.84rem;
font-weight: 600;
color: #e2e8f0;
background: #1e293b;
border: 1px solid #334155;
border-radius: var(--radius-sm, 6px);
cursor: pointer;
outline: none;
}
.invata-code-lang-picker select:focus {
border-color: #60a5fa;
}
.invata-code-input-wrap textarea {
width: 100%;
padding: 0.85rem 1rem;
font-family: var(--font-mono, monospace);
font-size: 0.9rem;
line-height: 1.6;
color: #f8fafc;
background: #020617;
border: 1px solid #1e293b;
border-radius: var(--radius-sm, 8px);
resize: vertical;
min-height: 160px;
}
.invata-code-input-wrap textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.invata-code-hint {
font-size: 0.78rem;
color: #94a3b8;
} .invata-code-toggle-bar {
margin: -0.25rem 0 0.25rem;
}
.invata-toggle-code-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-color, #2563eb);
background: var(--accent-soft, #eef4ff);
border: 1px solid var(--accent-border, #bfdbfe);
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
}
.invata-toggle-code-btn:hover {
background: #dbeafe;
color: var(--accent-hover, #1d4ed8);
} .invata-moderation-card {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.15rem;
background: #f8fafc;
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-sm, 8px);
}
.invata-moderation-card-icon {
color: #059669;
flex-shrink: 0;
margin-top: 0.1rem;
}
.invata-moderation-card-content strong {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin-bottom: 0.2rem;
}
.invata-moderation-card-content p {
margin: 0;
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-muted, #64748b);
} .invata-form-submit {
margin: 0.5rem 0 0;
}
.invata-submit-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.85rem;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: #ffffff;
background-color: var(--accent-color, #2563eb);
border: 0;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
transition: all 0.15s ease;
}
.invata-submit-btn:hover {
background-color: var(--accent-hover, #1d4ed8);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}
.invata-submit-icon {
display: inline-flex;
transform: rotate(-10deg);
} @media (max-width: 768px) {
.invata-comments-header {
margin-bottom: 1.5rem;
}
.invata-comments-title {
font-size: 1.35rem;
}
.invata-mode-selector {
grid-template-columns: 1fr;
}
.invata-form-grid {
grid-template-columns: 1fr;
}
.invata-comment-form {
padding: 1.25rem;
}
.invata-comment-card {
padding: 1.15rem;
}
.invata-submit-btn {
width: 100%;
justify-content: center;
}
} .invata-badge--community.invata-badge--ai {
color: var(--accent-ai-ink, #5b21b6);
background: var(--accent-ai-soft, #f3e8ff);
border-color: #ddd6fe;
}
.invata-badge--community.invata-badge--ai:hover {
background: var(--accent-ai, #7c3aed);
color: #ffffff;
border-color: var(--accent-ai, #7c3aed);
}
.invata-comments-badge--ai {
color: var(--accent-ai-ink, #5b21b6);
background: var(--accent-ai-soft, #f3e8ff);
border-color: #ddd6fe;
}
.invata-comments-badge--ai .invata-comments-pulse {
background: #8b5cf6;
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
}
.invata-form-title-badge--ai {
color: var(--accent-ai-ink, #5b21b6);
background: var(--accent-ai-soft, #f3e8ff);
}
.invata-submit-btn--ai {
background-color: var(--accent-ai, #7c3aed);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}
.invata-submit-btn--ai:hover {
background-color: var(--accent-ai-ink, #5b21b6);
box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}
.invata-badge--prompt {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
font-weight: 700;
color: #6b21a8;
background: #f3e8ff;
border: 1px solid #d8b4fe;
border-radius: 999px;
}
.invata-badge--config {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
font-weight: 700;
color: #0369a1;
background: #e0f2fe;
border: 1px solid #bae6fd;
border-radius: 999px;
}.gen-hero {
position: relative;
overflow: hidden;
margin-bottom: 2rem;
padding: 2.5rem 3rem;
background: #0f172a;
background-image:
radial-gradient(circle at 88% 15%, rgba(236, 72, 153, 0.4) 0, transparent 42%),
radial-gradient(circle at 70% 110%, rgba(37, 99, 235, 0.5) 0, transparent 50%);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
color: #cbd5e1;
}
.gen-hero h1 {
max-width: 720px;
margin: 0 0 0.75rem;
font-size: 2.3rem;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.03em;
color: #ffffff;
}
.gen-hero p {
max-width: 640px;
margin: 0;
font-size: 1.05rem;
line-height: 1.65;
}
.gen-eyebrow {
display: inline-flex;
margin-bottom: 0.9rem;
padding: 0.3rem 0.75rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fbcfe8;
background: rgba(236, 72, 153, 0.16);
border: 1px solid rgba(249, 168, 212, 0.28);
border-radius: 999px;
} .gen-app {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
margin-bottom: 3rem;
}
.gen-app:not(.gen-app--ready) {
display: block;
padding: 2rem;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
color: var(--text-muted);
}
.gen-panel,
.gen-output {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.gen-panel {
padding: 1.25rem;
}
.gen-main {
position: sticky;
top: calc(var(--header-height) + 1rem);
display: grid;
gap: 1rem;
min-width: 0;
} .gen-main > * {
min-width: 0;
}
.gen-label,
.gen-row-head label,
.gen-heading {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
}
.gen-heading {
margin: 1.25rem 0 0.25rem;
padding-top: 1rem;
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
border-top: 1px solid var(--border-color);
}
.gen-fields > .gen-heading:first-child,
.gen-layers .gen-heading {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.gen-group + .gen-group {
margin-top: 1.25rem;
}
.gen-presets {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border-color);
}
.gen-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.6rem;
}
.gen-chip {
padding: 0.35rem 0.7rem;
font: inherit;
font-size: 0.8rem;
color: var(--text-body);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gen-chip:hover {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-border);
} .gen-row {
padding: 0.55rem 0;
}
.gen-row[hidden] {
display: none;
}
.gen-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.4rem;
}
.gen-num-wrap {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.gen-num {
width: 4.6rem;
padding: 0.25rem 0.4rem;
font: inherit;
font-family: var(--font-mono);
font-size: 0.8rem;
text-align: right;
color: var(--text-primary);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
}
.gen-unit,
.gen-alpha-label,
.gen-alpha-out {
font-size: 0.75rem;
color: var(--text-muted);
}
.gen-alpha-out {
min-width: 2.6rem;
font-family: var(--font-mono);
text-align: right;
}
.gen-row input[type="range"] {
width: 100%;
margin: 0;
accent-color: var(--accent-color);
}
.gen-row select,
.gen-row input[type="text"],
.gen-row input[type="url"],
.gen-row input[type="email"],
.gen-row input[type="tel"],
.gen-row input[type="datetime-local"],
.gen-row textarea {
width: 100%;
padding: 0.5rem 0.6rem;
font: inherit;
font-size: 0.88rem;
color: var(--text-primary);
background: var(--bg-main);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
}
.gen-color {
display: flex;
align-items: center;
gap: 0.75rem;
}
.gen-color input[type="color"] {
flex: none;
width: 2.6rem;
height: 2.2rem;
padding: 2px;
background: var(--bg-main);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
cursor: pointer;
}
.gen-alpha {
display: flex;
flex: 1;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.gen-check {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.88rem;
color: var(--text-body);
cursor: pointer;
}
.gen-check input {
width: 1.05rem;
height: 1.05rem;
margin: 0;
accent-color: var(--accent-color);
}
.gen-seg {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 3px;
background: var(--bg-sunken);
border-radius: var(--radius-sm);
}
.gen-seg button {
flex: 1;
padding: 0.4rem 0.5rem;
font: inherit;
font-size: 0.82rem;
color: var(--text-muted);
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.gen-seg button[aria-pressed="true"] {
font-weight: 600;
color: var(--text-primary);
background: var(--bg-main);
box-shadow: var(--shadow-sm);
} .gen-layers-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.gen-layers-actions {
display: flex;
gap: 0.35rem;
}
.gen-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.75rem 0 0.25rem;
}
.gen-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.6rem;
font: inherit;
font-size: 0.8rem;
color: var(--text-body);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
}
.gen-tab[aria-selected="true"] {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-color);
}
.gen-swatch {
width: 0.85rem;
height: 0.85rem;
border: 1px solid rgba(15, 23, 42, 0.2);
border-radius: 3px;
} .gen-btn {
padding: 0.5rem 0.9rem;
font: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
background: var(--bg-main);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.gen-btn:hover {
background: var(--bg-secondary);
}
.gen-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.gen-btn--primary {
color: #ffffff;
background: var(--accent-color);
border-color: var(--accent-color);
}
.gen-btn--primary:hover {
background: var(--accent-hover);
}
.gen-btn--primary.is-copied {
background: #16a34a;
border-color: #16a34a;
}
.gen-btn--small {
padding: 0.3rem 0.6rem;
font-size: 0.78rem;
}
.gen-btn--danger:not(:disabled):hover {
color: #b91c1c;
border-color: #fca5a5;
background: #fef2f2;
} .gen-stage {
position: relative;
display: grid;
place-items: center;
min-height: 360px;
padding: 2.5rem;
overflow: hidden;
background-color: #ffffff;
background-image:
linear-gradient(45deg, #eef2f8 25%, transparent 25%),
linear-gradient(-45deg, #eef2f8 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #eef2f8 75%),
linear-gradient(-45deg, transparent 75%, #eef2f8 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.gen-note {
margin: 0.5rem 0 0;
font-size: 0.82rem;
color: var(--text-muted);
}
.gen-box {
display: grid;
place-items: center;
width: min(100%, 260px);
height: 170px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-muted);
}
.gen-text {
max-width: 100%;
line-height: 1.1;
text-align: center;
overflow-wrap: anywhere;
} .gen-stage--scene {
min-height: 380px;
background: linear-gradient(135deg, #312e81, #0f766e);
}
.gen-stage--scene[data-scene="apus"] {
background: linear-gradient(135deg, #f97316, #db2777);
}
.gen-stage--scene[data-scene="noapte"] {
background: linear-gradient(135deg, #020617, #1e1b4b);
}
.gen-blob {
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
animation: gen-float 12s ease-in-out infinite alternate;
}
.gen-blob--1 { top: 12%; left: 14%; background: #22d3ee; }
.gen-blob--2 { right: 12%; bottom: 8%; width: 230px; height: 230px; background: #f472b6; animation-delay: -4s; }
.gen-blob--3 { top: 8%; right: 30%; width: 120px; height: 120px; background: #facc15; animation-delay: -8s; }
[data-scene="noapte"] .gen-blob--1 { background: #6366f1; }
[data-scene="noapte"] .gen-blob--3 { background: #a855f7; }
[data-scene="apus"] .gen-blob--1 { background: #fde047; }
@keyframes gen-float {
to { transform: translate(40px, 30px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.gen-blob { animation: none; }
}
.gen-glass {
position: relative;
display: grid;
gap: 0.4rem;
width: min(100%, 320px);
padding: 2rem 1.75rem;
}
.gen-glass strong {
font-size: 1.25rem;
}
.gen-glass span {
font-size: 0.9rem;
opacity: 0.85;
} .gen-stage--layout {
display: block;
padding: 1rem; overflow: auto;
background: var(--bg-secondary);
}
.gen-flex,
.gen-grid {
min-height: 330px;
padding: 0.75rem;
background: var(--bg-main);
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
}
.gen-item {
display: grid;
place-items: center;
min-height: 56px;
padding: 0.5rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: var(--radius-sm);
} .gen-clip {
position: relative;
width: min(100%, 300px);
aspect-ratio: 1;
touch-action: none;
}
.gen-clip-ghost,
.gen-clip-shape {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #f97316, #ec4899 50%, #7c3aed);
}
.gen-clip-ghost {
opacity: 0.12;
}
.gen-clip-handles {
position: absolute;
inset: 0;
}
.gen-handle {
position: absolute;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
background: #ffffff;
border: 3px solid #0f172a;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
cursor: grab;
}
.gen-handle:active {
cursor: grabbing;
} .gen-stage--bezier {
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: 2rem;
background: var(--bg-main);
}
.gen-bezier {
width: 100%;
touch-action: none;
}
.gen-bezier-box {
fill: var(--bg-secondary);
stroke: var(--border-strong);
}
.gen-bezier-diag {
stroke: var(--border-strong);
stroke-dasharray: 4 4;
}
.gen-bezier-arm {
stroke: var(--text-faint);
stroke-width: 2;
}
.gen-bezier-curve {
fill: none;
stroke: var(--accent-color);
stroke-width: 4;
stroke-linecap: round;
}
.gen-bezier-handle {
stroke: #ffffff;
stroke-width: 3;
cursor: grab;
}
.gen-bezier-handle--1 { fill: #ec4899; }
.gen-bezier-handle--2 { fill: #0ea5e9; }
.gen-bezier-side {
display: grid;
gap: 1rem;
align-self: center;
width: 100%;
}
.gen-track {
position: relative;
height: 2.75rem;
padding-top: 1.1rem;
}
.gen-track::after {
content: '';
position: absolute;
right: 0;
bottom: 0.8rem;
left: 0;
height: 2px;
background: var(--border-color);
}
.gen-track-label {
position: absolute;
top: 0;
left: 0;
font-size: 0.75rem;
color: var(--text-muted);
}
.gen-ball {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: 1.75rem;
height: 1.75rem;
background: var(--accent-color);
border-radius: 50%;
}
.gen-ball--ref {
background: var(--text-faint);
} .gen-stage--colors {
display: grid;
place-items: stretch;
gap: 1.5rem;
padding: 1.5rem;
background: var(--bg-main);
}
.gen-swatches {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.gen-swatches figure {
margin: 0;
}
.gen-swatches figcaption {
margin-top: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.gen-swatch-big {
height: 120px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
} .gen-swatch-big--alpha {
background:
linear-gradient(var(--fill), var(--fill)),
repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 20px 20px;
}
.gen-formats {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.gen-formats th,
.gen-formats td {
padding: 0.35rem 0.5rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.gen-formats thead th {
font-size: 0.74rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.gen-formats tbody th {
font-weight: 600;
white-space: nowrap;
color: var(--text-primary);
}
.gen-copy-cell {
width: 100%;
padding: 0.35rem 0.5rem;
font-family: var(--font-mono);
font-size: 0.82rem;
text-align: left;
color: var(--text-primary);
background: var(--bg-secondary);
border: 1px solid transparent;
border-radius: 6px;
cursor: copy;
overflow-wrap: anywhere;
}
.gen-copy-cell:hover {
border-color: var(--accent-border);
background: var(--accent-soft);
}
.gen-copy-cell.is-copied {
color: #15803d;
background: #f0fdf4;
border-color: #86efac;
}
.gen-shades {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 4px;
margin-top: 0.5rem;
}
.gen-shade {
height: 36px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 6px;
cursor: pointer;
}
.gen-shade.is-current {
outline: 3px solid var(--text-primary);
outline-offset: 2px;
}
@media (max-width: 640px) {
.gen-formats thead {
display: none;
}
.gen-formats tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
}
.gen-formats tbody th {
grid-column: 1 / -1;
}
.gen-formats th,
.gen-formats td {
padding: 0;
border: 0;
}
} .gen-anim-box,
.gen-tf-box {
display: grid;
place-items: center;
width: 120px;
height: 120px;
font-family: var(--font-mono);
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: var(--radius);
}
.gen-replay {
position: absolute;
right: 1rem;
bottom: 1rem;
}
.gen-palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
gap: 6px;
margin-top: 0.5rem;
}
.gen-palette--harmony {
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
.gen-chip-color {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 2px;
min-height: 72px;
padding: 0.45rem;
font: inherit;
text-align: left;
color: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 8px;
cursor: copy;
}
.gen-palette--harmony .gen-chip-color {
min-height: 96px;
}
.gen-chip-color.is-light {
color: #0f172a;
}
.gen-chip-step {
font-size: 0.72rem;
font-weight: 700;
}
.gen-chip-hex {
font-family: var(--font-mono);
font-size: 0.7rem;
}
.gen-stage--contrast {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: stretch;
background: var(--bg-main);
}
.gen-contrast-preview {
display: grid;
place-items: center;
padding: 1.5rem;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.gen-contrast-sample {
margin: 0;
line-height: 1.4;
}
.gen-ratio-wrap {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1rem;
}
.gen-ratio {
font-size: 2.4rem;
line-height: 1;
color: var(--text-primary);
}
.gen-checks {
display: grid;
gap: 0.35rem;
margin: 1rem 0 0;
padding: 0;
font-size: 0.85rem;
color: var(--text-body);
list-style: none;
}
.gen-checks li.is-current {
font-weight: 600;
}
.gen-badge {
display: inline-block;
min-width: 4.9rem;
margin-right: 0.5rem;
padding: 0.1rem 0.45rem;
font-size: 0.74rem;
font-weight: 700;
text-align: center;
border-radius: 999px;
}
.is-ok .gen-badge {
color: #166534;
background: #dcfce7;
}
.is-fail .gen-badge {
color: #991b1b;
background: #fee2e2;
}
.gen-suggest {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-top: 0.9rem;
font-size: 0.85rem;
}
.gen-suggest:empty {
display: none;
}
.gen-prev-btn {
font-family: inherit;
}
.gen-stage--compare {
grid-template-columns: 1fr 1fr;
gap: 1rem;
background: var(--bg-main);
}
.gen-stage--compare figure {
margin: 0;
width: 100%;
}
.gen-stage--compare figcaption {
margin-top: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
text-align: center;
} .gen-scene {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(#38bdf8, #bae6fd 65%);
border-radius: var(--radius);
}
.gen-scene i {
position: absolute;
display: block;
}
.gen-scene-sun {
top: 14%;
right: 18%;
width: 22%;
aspect-ratio: 1;
background: radial-gradient(#fde047, #f97316);
border-radius: 50%;
}
.gen-scene-hill--1 {
left: -10%;
bottom: 18%;
width: 75%;
height: 45%;
background: #16a34a;
border-radius: 50% 50% 0 0;
}
.gen-scene-hill--2 {
right: -15%;
bottom: 18%;
width: 80%;
height: 35%;
background: #15803d;
border-radius: 50% 50% 0 0;
}
.gen-scene-lake {
right: 0;
bottom: 0;
left: 0;
height: 20%;
background: linear-gradient(#2563eb, #1e3a8a);
}
.gen-stage--transform {
background-color: #ffffff;
}
.gen-tf-ghost {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
}
.gen-tf-box {
position: relative;
opacity: 0.92;
}
.gen-origin {
position: absolute;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
background: #f97316;
border: 2px solid #ffffff;
border-radius: 50%;
}
.gen-loader-holder {
display: grid;
place-items: center;
}
.gen-stage--clamp {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: center;
background: var(--bg-main);
}
.gen-clamp-frame {
max-width: 100%;
padding: 1rem;
overflow: hidden;
background: var(--bg-secondary);
border: 2px solid var(--border-strong);
border-radius: var(--radius-sm);
transition: width 0.2s;
}
.gen-clamp-sample {
font-weight: 800;
line-height: 1.1;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.gen-clamp-sample--box {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: 6px;
}
.gen-clamp-info {
margin: 0 0 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.gen-clamp-chart {
width: 100%;
background: var(--bg-secondary);
border-radius: 8px;
}
.gen-clamp-line {
fill: none;
stroke: var(--accent-color);
stroke-width: 3;
}
.gen-clamp-dot {
fill: #f97316;
}
@media (max-width: 640px) {
.gen-stage--contrast,
.gen-stage--compare,
.gen-stage--clamp {
grid-template-columns: minmax(0, 1fr);
}
} .gen-row textarea {
min-height: 4.5rem;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.5;
resize: vertical;
} .gen-stage--tool,
.gen-stage--meta {
display: grid;
place-items: stretch;
align-content: start;
gap: 1.25rem;
padding: 1.5rem;
background: var(--bg-main);
}
.gen-tool-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
.gen-tool-actions .gen-note {
margin: 0;
}
.gen-error {
margin: 0.4rem 0 0;
font-size: 0.85rem;
font-weight: 600;
color: #b91c1c;
}
.gen-error:empty {
display: none;
}
.gen-counters {
display: grid;
gap: 0.35rem;
margin: 0.5rem 0 0;
padding: 0;
font-size: 0.85rem;
color: var(--text-body);
list-style: none;
}
.gen-file-label {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--text-body);
}
.gen-file {
max-width: 100%;
font-size: 0.8rem;
} .gen-serp {
display: grid;
gap: 0.25rem;
max-width: 600px;
margin-top: 0.5rem;
padding: 1rem 1.1rem;
font-family: Arial, sans-serif;
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.gen-serp-head {
display: flex;
align-items: center;
gap: 0.6rem;
}
.gen-serp-icon {
width: 26px;
height: 26px;
flex: none;
background: var(--bg-sunken);
border-radius: 50%;
}
.gen-serp-site {
display: block;
font-size: 14px;
color: #202124;
}
.gen-serp-url {
display: block;
font-size: 12px;
color: #4d5156;
overflow-wrap: anywhere;
}
.gen-serp-title {
font-size: 20px;
line-height: 1.3;
color: #1a0dab;
}
.gen-serp-desc {
font-size: 14px;
line-height: 1.58;
color: #4d5156;
}
.gen-social {
max-width: 520px;
margin-top: 0.5rem;
overflow: hidden;
background: #f0f2f5;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.gen-social-img {
display: grid;
place-items: center;
aspect-ratio: 1.91 / 1;
padding: 1rem;
font-size: 0.8rem;
text-align: center;
color: var(--text-muted);
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}
.gen-social-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gen-social-img:has(img) {
padding: 0;
}
.gen-social-img.is-small {
aspect-ratio: 1;
max-width: 140px;
}
.gen-social-body {
display: grid;
gap: 0.2rem;
padding: 0.7rem 0.9rem;
}
.gen-social-host {
font-size: 0.72rem;
color: #65676b;
}
.gen-social-title {
font-size: 1rem;
line-height: 1.3;
color: #050505;
}
.gen-social-desc {
display: -webkit-box;
overflow: hidden;
font-size: 0.85rem;
color: #65676b;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.gen-robots-test {
margin: 0.5rem 0 0;
padding: 0.6rem 0.8rem;
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--radius-sm);
}
.gen-robots-test.is-ok {
color: #166534;
background: #dcfce7;
}
.gen-robots-test.is-fail {
color: #991b1b;
background: #fee2e2;
} .gen-fav-tab {
display: flex;
align-items: center;
gap: 0.6rem;
max-width: 320px;
padding: 0.55rem 0.8rem;
font-size: 0.85rem;
color: var(--text-body);
background: var(--bg-sunken);
border-radius: 10px 10px 0 0;
}
.gen-fav-tab i {
margin-left: auto;
font-style: normal;
color: var(--text-muted);
}
.gen-fav-tab-icon canvas {
display: block;
width: 16px;
height: 16px;
}
.gen-fav-previews {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.25rem;
}
.gen-fav-previews figure {
margin: 0;
text-align: center;
}
.gen-fav-previews figcaption {
margin-top: 0.3rem;
font-size: 0.75rem;
color: var(--text-muted);
}
.gen-fav-16 { width: 16px; height: 16px; }
.gen-fav-32 { width: 32px; height: 32px; }
.gen-fav-180 { width: 90px; height: 90px; }
.gen-fav-512 { width: 128px; height: 128px; } .gen-stage--qr {
grid-template-columns: auto minmax(0, 1fr);
gap: 1.5rem;
background: var(--bg-main);
}
.gen-qr {
width: min(100%, 260px);
height: auto;
image-rendering: pixelated;
border: 1px solid var(--border-color);
}
.gen-qr-side {
display: grid;
gap: 0.75rem;
align-self: center;
}
.gen-qr-side .gen-note {
margin: 0;
} .gen-lorem {
max-height: 320px;
overflow: auto;
padding: 1rem 1.25rem;
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-body);
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.gen-lorem p {
margin: 0 0 0.9rem;
}
.gen-lorem p:last-child {
margin-bottom: 0;
}
.gen-results {
display: grid;
gap: 0.35rem;
max-height: 360px;
margin: 0.5rem 0 0;
padding: 0;
overflow: auto;
list-style: none;
}
.gen-results .gen-copy-cell {
font-size: 0.95rem;
}
.gen-results--mono .gen-copy-cell {
font-size: 0.85rem;
}
.gen-meter {
height: 8px;
overflow: hidden;
background: var(--bg-sunken);
border-radius: 999px;
}
.gen-meter span {
display: block;
height: 100%;
background: #dc2626;
border-radius: inherit;
transition: width 0.2s;
}
.gen-meter.is-fair span { background: #f59e0b; }
.gen-meter.is-good span { background: #16a34a; }
.gen-meter.is-strong span { background: #15803d; }
.gen-meter-label {
margin: 0.4rem 0 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
} .gen-cron-expr {
display: inline-block;
padding: 0.4rem 0.8rem;
font-family: var(--font-mono);
font-size: 1.4rem;
font-weight: 700;
color: var(--code-text);
background: var(--code-bg);
border-radius: var(--radius-sm);
}
.gen-cron-desc {
margin: 0.75rem 0 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-primary);
}
.gen-cron-next {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
font-size: 0.88rem;
line-height: 1.7;
color: var(--text-body);
} .gen-table-preview {
overflow-x: auto;
}
.gen-table-preview table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.gen-table-preview caption {
margin-bottom: 0.4rem;
font-weight: 700;
text-align: left;
}
.gen-table-preview th,
.gen-table-preview td {
padding: 0.45rem 0.7rem;
text-align: left;
border: 1px solid var(--border-color);
}
.gen-table-preview th {
background: var(--bg-secondary);
}
.gen-now {
font-size: 1.6rem;
font-weight: 700;
}
.gen-now-wrap .gen-tool-actions {
margin-top: 0.4rem;
}
.gen-now-wrap .gen-copy-cell {
width: auto;
}
@media (max-width: 640px) {
.gen-stage--qr {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
}  .gen-ro-result {
margin: 0.25rem 0 0;
font-size: 1.25rem;
line-height: 1.45;
font-weight: 600;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.gen-ro-mixed {
margin: 0.25rem 0 0;
color: var(--text-body);
overflow-wrap: anywhere;
}
.gen-ro-warn:empty {
display: none;
}
.gen-ro-verdict {
margin: 0;
padding: 0.75rem 1rem;
border-radius: var(--radius);
border: 1px solid var(--border-color);
background: var(--bg-secondary);
font-weight: 600;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.gen-ro-verdict.is-ok {
border-color: #16a34a;
background: rgba(22, 163, 74, 0.1);
}
.gen-ro-verdict.is-fail {
border-color: #dc2626;
background: rgba(220, 38, 38, 0.1);
}
.gen-ro-snippet {
margin: 0.25rem 0 0;
padding: 0.75rem;
border-radius: var(--radius-sm);
background: var(--code-bg);
color: var(--code-text);
font-family: var(--font-mono);
font-size: 0.85rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.gen-ro-qr-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.gen-ro-qr {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: #fff;
}   .gen-web-yt {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0 auto;
background: #0f172a;
border: 0;
border-radius: var(--radius);
} .gen-web-sig {
margin-top: 0.5rem;
padding: 1.1rem 1.2rem;
overflow-x: auto;
color: #333333;
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.gen-web-sig table {
margin: 0;
border: 0;
}
.gen-web-sig td {
padding: 0;
border: 0;
} .gen-web-drop {
display: grid;
justify-items: center;
gap: 0.5rem;
padding: 1.1rem 1rem;
text-align: center;
color: var(--text-body);
background: var(--bg-secondary);
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
}
.gen-stage--tool.is-over .gen-web-drop {
background: var(--accent-soft);
border-color: var(--accent-color);
}
.gen-stage--tool.is-over {
outline: 2px solid var(--accent-color);
outline-offset: -2px;
} .gen-stage--tool .gen-formats th[scope="row"],
.gen-stage--tool .gen-formats a {
overflow-wrap: anywhere;
white-space: normal;
} .gen-web-canvas {
display: grid;
place-items: center;
padding: 0.75rem;
background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 20px 20px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.gen-web-canvas canvas {
display: block;
max-width: 100%;
max-height: 420px;
width: auto;
height: auto;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}
.gen-web-pick {
display: block;
max-width: 100%;
max-height: 380px;
width: auto;
height: auto;
margin-top: 0.5rem;
border-radius: var(--radius-sm);
cursor: crosshair;
} .gen-web-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.6rem;
margin-top: 0.5rem;
}
.gen-web-swatch {
display: grid;
gap: 0.3rem;
min-width: 0;
}
.gen-web-chip {
display: grid;
place-items: center;
height: 64px;
font-size: 0.85rem;
font-weight: 700;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: var(--radius-sm);
}
.gen-web-picked .gen-web-swatch {
width: 160px;
}  .gen-c2-wave-demo {
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.gen-c2-wave-section {
position: relative;
display: grid;
gap: 0.25rem;
min-height: 150px;
align-content: center;
text-align: center;
}
.gen-c2-wave-section strong {
font-size: 1.15rem;
}
.gen-c2-wave-section span {
font-size: 0.85rem;
opacity: 0.85;
}
.gen-c2-wave-art {
position: absolute;
left: 0;
width: 100%;
pointer-events: none;
}
.gen-c2-wave-art svg {
display: block;
width: 100%;
height: 100%;
}
.gen-c2-wave-next {
padding: 1.25rem;
font-size: 0.85rem;
font-weight: 600;
text-align: center;
} .gen-c2-stage-col {
grid-template-rows: 1fr auto;
gap: 1rem;
}
.gen-c2-blob-wrap {
display: grid;
place-items: center;
width: 100%;
}
.gen-c2-blob svg {
display: block;
max-width: 100%;
}
.gen-c2-blob-css {
margin: 0 auto;
}
.gen-c2-blob-actions {
justify-content: center;
} .gen-c2-controls {
display: grid;
gap: 1rem;
padding: 1.25rem 1.5rem;
font-size: 0.95rem;
color: #0f172a;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--radius);
} .gen-c2-tip {
margin: 3rem 0;
} .gen-c2-sb {
height: 240px;
padding: 1rem 1.25rem;
overflow: auto;
font-size: 0.9rem;
line-height: 1.6;
color: #334155;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--radius);
}
.gen-c2-sb p {
margin: 0 0 0.9rem;
}
.gen-c2-sb-wide {
width: 160%;
margin-bottom: 0.9rem;
font-weight: 600;
white-space: nowrap;
} .gen-c2-tx {
max-width: 100%;
text-align: center;
overflow-wrap: anywhere;
} .gen-c2-big {
margin: 0.25rem 0 0;
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.gen-c2-pxlist {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.35rem 0.75rem;
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
}
.gen-c2-pxlist li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.2rem 0;
font-family: var(--font-mono);
font-size: 0.85rem;
border-bottom: 1px solid var(--border-color);
}
.gen-c2-pxlist span {
color: var(--text-muted);
} .gen-c2-palette {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.gen-c2-brush {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-mono);
}
.gen-c2-brush[aria-pressed="true"] {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-color);
box-shadow: 0 0 0 1px var(--accent-color);
}
.gen-c2-grid {
display: grid;
min-height: 300px;
padding: 0.5rem;
background: var(--bg-secondary);
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
touch-action: none;
user-select: none;
-webkit-user-select: none;
overflow-x: auto;
}
.gen-c2-cell {
display: grid;
place-items: center;
min-width: 0;
min-height: 52px;
padding: 0.25rem;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
overflow-wrap: anywhere;
border-radius: var(--radius-sm);
cursor: crosshair;
}
.gen-c2-cell.is-empty {
background: var(--bg-main);
border: 1px dashed var(--border-strong);
}
.gen-c2-cell.is-bad {
background-image: repeating-linear-gradient(45deg, rgba(185, 28, 28, 0.55) 0 6px, transparent 6px 12px);
outline: 2px solid #b91c1c;
outline-offset: -2px;
}
.gen-c2-cell:focus-visible {
outline: 3px solid var(--accent-color);
outline-offset: 2px;
}  .gen-d2-stage {
min-width: 0;
}
.gen-d2-stage > * {
min-width: 0;
} .gen-d2-stage .gen-counters li:not(.is-ok):not(.is-fail) .gen-badge {
color: var(--text-primary);
background: var(--bg-sunken);
}
.gen-d2-scroll {
max-height: 420px;
overflow: auto;
}
.gen-d2-gap {
display: block;
margin-top: 0.9rem;
}
.gen-d2-scroll table td,
.gen-d2-scroll table th {
vertical-align: top;
}
.gen-d2-stage .gen-table-preview td {
font-family: var(--font-mono);
font-size: 0.82rem;
overflow-wrap: anywhere;
}
.gen-d2-warn,
.gen-d2-list {
display: grid;
gap: 0.35rem;
margin: 0.5rem 0 0;
padding-left: 1.1rem;
font-size: 0.85rem;
color: var(--text-body);
}
.gen-d2-warn:empty,
.gen-d2-list:empty {
display: none;
}
.gen-d2-warn li {
color: #b45309;
}
.gen-d2-input {
width: 100%;
margin-top: 0.35rem;
padding: 0.5rem 0.6rem;
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--text-primary);
background: var(--bg-main);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
} .gen-d2-snippet,
.gen-d2-out {
margin: 0.5rem 0 0;
padding: 0.75rem 0.9rem;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.5;
color: var(--code-text);
background: var(--code-bg);
border-radius: var(--radius-sm);
}
.gen-d2-out {
max-height: 260px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.gen-d2-tree {
max-height: 420px;
margin-top: 0.4rem;
padding: 0.6rem 0.75rem;
overflow: auto;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.6;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.gen-d2-tree-node > :not(summary) {
margin-left: 1.1rem;
}
.gen-d2-tree-node > summary {
cursor: pointer;
}
.gen-d2-tree-leaf {
overflow-wrap: anywhere;
}
.gen-d2-tree-key {
font-weight: 600;
color: var(--text-primary);
}
.gen-d2-tree-type {
color: var(--text-muted);
}
.gen-d2-tree-s { color: #15803d; }
.gen-d2-tree-n { color: #1d4ed8; }
.gen-d2-tree-b { color: #a21caf; }
.gen-d2-tree-z { color: var(--text-muted); } .gen-d2-hl {
max-height: 320px;
margin-top: 0.4rem;
padding: 0.75rem 0.9rem;
overflow: auto;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.7;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--text-body);
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.gen-d2-mark {
padding: 0.05rem 0;
color: inherit;
background: rgba(250, 204, 21, 0.45);
border-radius: 3px;
box-shadow: inset 0 -2px 0 rgba(202, 138, 4, 0.8);
}
.gen-d2-mark--alt {
background: rgba(56, 189, 248, 0.35);
box-shadow: inset 0 -2px 0 rgba(2, 132, 199, 0.8);
}
.gen-d2-zero {
display: inline-block;
width: 2px;
height: 1.1em;
margin: 0 1px;
vertical-align: text-bottom;
background: #dc2626;
}
.gen-d2-explain {
display: grid;
gap: 0.3rem;
margin: 0.4rem 0 0;
padding: 0;
font-size: 0.85rem;
list-style: none;
}
.gen-d2-explain li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 0.6rem;
color: var(--text-body);
}
.gen-d2-explain code {
padding: 0.05rem 0.35rem;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text-primary);
background: var(--bg-sunken);
border-radius: 4px;
overflow-wrap: anywhere;
} .gen-d2-jwt {
padding: 0.75rem 0.9rem;
font-family: var(--font-mono);
font-size: 0.8rem;
line-height: 1.5;
overflow-wrap: anywhere;
word-break: break-all;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.gen-d2-jwt:empty {
display: none;
}
.gen-d2-jwt-h { color: #dc2626; }
.gen-d2-jwt-p { color: #7c3aed; }
.gen-d2-jwt-s { color: #0891b2; }
.gen-d2-verify {
margin: 0.4rem 0 0;
font-size: 0.88rem;
color: var(--text-body);
}
.gen-d2-badge-warn {
color: #92400e;
background: #fef3c7;
}
.gen-d2-good { color: #15803d; }
.gen-d2-bad { color: #b91c1c; } .gen-d2-diff table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.5;
}
.gen-d2-diff td {
padding: 0.1rem 0.5rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
vertical-align: top;
}
.gen-d2-diff .gen-d2-num,
.gen-d2-diff .gen-d2-sign {
width: 1%;
color: var(--text-muted);
text-align: right;
white-space: nowrap;
user-select: none;
}
.gen-d2-diff tr.gen-d2-add,
.gen-d2-diff td.gen-d2-add,
.gen-d2-words ins {
background: rgba(34, 197, 94, 0.18);
}
.gen-d2-diff tr.gen-d2-del,
.gen-d2-diff td.gen-d2-del,
.gen-d2-words del {
background: rgba(239, 68, 68, 0.18);
}
.gen-d2-diff td.gen-d2-empty {
background: var(--bg-secondary);
}
.gen-d2-words {
margin: 0;
padding: 0.75rem 0.9rem;
font-size: 0.92rem;
line-height: 1.8;
white-space: pre-wrap;
overflow-wrap: anywhere;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.gen-d2-words ins {
text-decoration: none;
border-bottom: 2px solid rgba(22, 163, 74, 0.7);
}
.gen-d2-words del {
border-bottom: 2px solid rgba(220, 38, 38, 0.7);
}
.gen-d2-stage .gen-badge.gen-d2-plus {
color: #166534;
background: #dcfce7;
}
.gen-d2-stage .gen-badge.gen-d2-minus {
color: #991b1b;
background: #fee2e2;
} .gen-d2-chmod {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.gen-d2-chmod th,
.gen-d2-chmod td {
padding: 0.45rem 0.5rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.gen-d2-chmod th[scope="row"] {
text-align: left;
white-space: nowrap;
}
.gen-d2-chmod thead th,
.gen-d2-chmod tr:first-child th {
font-size: 0.78rem;
color: var(--text-muted);
}
.gen-d2-chmod input {
width: 1.15rem;
height: 1.15rem;
margin: 0;
accent-color: var(--accent-color);
cursor: pointer;
} .gen-d2-bits {
margin-top: 0.4rem;
font-family: var(--font-mono);
font-size: 0.88rem;
letter-spacing: 0.02em;
overflow-wrap: anywhere;
}
.gen-d2-net {
font-weight: 700;
color: var(--accent-ink);
background: var(--accent-soft);
}
.gen-d2-host {
color: var(--text-muted);
}   .gen-t-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.5rem;
}
.gen-t-stat {
display: grid;
gap: 0.15rem;
padding: 0.65rem 0.75rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.gen-t-stat strong {
font-size: 1.35rem;
line-height: 1.2;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.gen-t-stat span {
font-size: 0.78rem;
color: var(--text-muted);
} .gen-t-current th {
color: var(--accent-ink);
}
.gen-t-current .gen-copy-cell {
background: var(--accent-soft);
border-color: var(--accent-color);
} .gen-t-big {
margin: 0 0 0.75rem;
font-size: clamp(1.4rem, 5vw, 2rem);
font-weight: 700;
line-height: 1.25;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.gen-t-big:empty {
display: none;
}
.gen-t-roman {
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
.gen-t-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
} .gen-t-draw {
display: grid;
gap: 0.6rem;
}
.gen-t-balls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.gen-t-ball {
display: inline-grid;
place-items: center;
min-width: 3.5rem;
min-height: 3.5rem;
padding: 0.35rem 0.8rem;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
color: var(--accent-ink);
background: var(--accent-soft);
border: 2px solid var(--accent-color);
border-radius: 999px;
font-variant-numeric: tabular-nums;
animation: gen-t-pop 0.35s ease-out both;
animation-delay: calc(var(--i, 0) * 0.08s);
}
.gen-t-die {
border-radius: var(--radius);
}
.gen-t-die span {
font-size: 2.4rem;
line-height: 1;
}
.gen-t-die small {
font-size: 0.75rem;
color: var(--text-muted);
}
.gen-t-winners {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
counter-reset: gen-t-win;
}
.gen-t-name {
display: flex;
justify-content: flex-start;
gap: 0.6rem;
border-radius: var(--radius);
font-size: 1.4rem;
overflow-wrap: anywhere;
}
.gen-t-name::before {
counter-increment: gen-t-win;
content: counter(gen-t-win) ".";
color: var(--text-muted);
}
.gen-t-reserves .gen-t-name {
font-size: 1.05rem;
min-height: 2.6rem;
color: var(--text-primary);
background: var(--bg-secondary);
border-color: var(--border-color);
}
.gen-t-teams {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
}
.gen-t-team {
padding: 0.75rem 0.9rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-top: 3px solid var(--accent-color);
border-radius: var(--radius-sm);
animation: gen-t-pop 0.35s ease-out both;
animation-delay: calc(var(--i, 0) * 0.08s);
}
.gen-t-team ol {
margin: 0.4rem 0 0;
padding-left: 1.3rem;
color: var(--text-body);
}
.gen-t-sum {
margin: 0;
font-weight: 600;
color: var(--text-primary);
}
@keyframes gen-t-pop {
from {
opacity: 0;
transform: translateY(6px) scale(0.92);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.gen-t-ball,
.gen-t-team {
animation: none;
}
}  .gen-pdf-drop {
display: grid;
justify-items: center;
gap: 0.5rem;
padding: 1.1rem 1rem;
text-align: center;
color: var(--text-body);
background: var(--bg-secondary);
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
}
.gen-stage--tool.is-over .gen-pdf-drop {
background: var(--accent-soft);
border-color: var(--accent-color);
}
.gen-pdf-drop .gen-file-label {
max-width: 100%;
overflow-wrap: anywhere;
} .gen-pdf-pass {
display: grid;
gap: 0.4rem;
padding: 0.8rem 0.9rem;
background: var(--accent-soft);
border: 1px solid var(--accent-color);
border-radius: var(--radius);
}
.gen-pdf-pass[hidden],
.gen-pdf-progress[hidden] {
display: none;
}
.gen-pdf-pass p {
margin: 0;
}
.gen-pdf-pass-input {
flex: 1 1 12rem;
min-width: 0;
padding: 0.45rem 0.6rem;
font: inherit;
color: var(--text-primary);
background: var(--bg-main);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
}
.gen-pdf-warn:empty {
display: none;
}
.gen-pdf-warn {
color: var(--accent-ink);
}
.gen-pdf-progress {
display: block;
width: 100%;
height: 0.5rem;
accent-color: var(--accent-color);
} .gen-pdf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.gen-pdf-grid--small {
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 0.5rem;
}
.gen-pdf-grid:empty {
display: none;
}
.gen-pdf-card {
display: grid;
gap: 0.35rem;
align-content: start;
justify-items: center;
padding: 0.5rem;
text-align: center;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.gen-pdf-card .gen-note,
.gen-pdf-card .gen-error {
margin: 0;
overflow-wrap: anywhere;
} .gen-pdf-thumb-img {
display: block;
max-width: 100%;
height: auto;
background-color: #fff;
background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
background-position: 0 0, 6px 6px;
background-size: 12px 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
} .gen-pdf-pick {
display: grid;
gap: 0.25rem;
justify-items: center;
width: 100%;
padding: 0.35rem;
font: inherit;
font-size: 0.85rem;
color: var(--text-body);
cursor: pointer;
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: var(--radius-sm);
}
.gen-pdf-pick:hover,
.gen-pdf-pick:focus-visible {
border-color: var(--accent-color);
}
.gen-pdf-pick[aria-pressed="true"] {
color: var(--accent-ink);
background: var(--accent-soft);
border-color: var(--accent-color);
}
.gen-pdf-pick[aria-pressed="true"] span::before {
content: "✓ ";
} .gen-pdf-list {
display: grid;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.gen-pdf-list:empty {
display: none;
}
.gen-pdf-item {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
align-items: center;
padding: 0.45rem 0.6rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.gen-pdf-item.is-bad {
border-color: #dc2626;
}
.gen-pdf-item-img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: var(--radius-sm);
background: var(--bg-sunken);
}
.gen-pdf-item-name {
flex: 1 1 10rem;
min-width: 0;
overflow-wrap: anywhere;
}
.gen-pdf-item-name .gen-error {
display: block;
margin-top: 0.2rem;
}
.gen-pdf-item-btns {
display: flex;
gap: 0.3rem;
margin-left: auto;
}
.gen-pdf-item-btns .gen-btn[disabled] {
opacity: 0.4;
cursor: default;
}
.gen-stage--tool .gen-results a {
overflow-wrap: anywhere;
}
.gen-pdf-stats:empty {
display: none;
}
.gen-pdf-stats {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.2rem;
}   .gen-med-drop {
display: grid;
justify-items: center;
gap: 0.5rem;
padding: 1.1rem 1rem;
text-align: center;
color: var(--text-body);
background: var(--bg-secondary);
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
}
.gen-stage--tool.is-over .gen-med-drop {
background: var(--accent-soft);
border-color: var(--accent-color);
}
.gen-med-warn:empty {
display: none;
} .gen-med-scroll {
max-width: 100%;
overflow-x: auto;
}
.gen-med-table {
min-width: 560px;
}
.gen-med-table th[scope="row"] {
max-width: 14rem;
overflow-wrap: anywhere;
white-space: normal;
}
.gen-med-res {
min-width: 15rem;
}
.gen-med-res,
.gen-med-result {
display: grid;
gap: 0.4rem;
justify-items: start;
}
.gen-med-res audio,
.gen-med-result audio {
width: 100%;
max-width: 22rem;
height: 40px;
}
.gen-med-res a,
.gen-med-result a {
max-width: 100%;
overflow-wrap: anywhere;
white-space: normal;
}
.gen-med-progress {
width: 100%;
max-width: 22rem;
height: 0.6rem;
accent-color: var(--accent-color);
} .gen-med-wave {
position: relative;
height: 140px;
margin: 0.25rem 0.6rem;
background: var(--bg-sunken);
border-radius: var(--radius-sm);
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.gen-med-canvas {
display: block;
width: 100%;
height: 100%;
}
.gen-med-dim {
position: absolute;
top: 0;
bottom: 0;
background: var(--bg-main);
opacity: 0.7;
pointer-events: none;
}
.gen-med-dim--left {
left: 0;
}
.gen-med-dim--right {
right: 0;
}
.gen-med-head {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--text-primary);
pointer-events: none;
}
.gen-med-handle {
position: absolute;
top: -4px;
bottom: -4px;
width: 20px;
margin-left: -10px;
cursor: ew-resize;
touch-action: none;
}
.gen-med-handle::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 9px;
width: 3px;
background: var(--accent-color);
border-radius: 2px;
}
.gen-med-handle::after {
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 15px;
height: 26px;
margin-top: -13px;
background: var(--accent-color);
border: 2px solid var(--bg-main);
border-radius: 6px;
}
.gen-med-handle:focus-visible {
outline: none;
}
.gen-med-handle:focus-visible::after {
box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent-color);
}
.gen-med-times {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
font-size: 0.9rem;
}
.gen-med-times label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
}
.gen-med-time {
width: 6.5rem;
font-family: var(--font-mono);
}
.gen-med-len {
font-family: var(--font-mono);
font-weight: 600;
} .gen-med-preview {
display: grid;
place-items: center;
min-height: 120px;
padding: 0.75rem;
background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 20px 20px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.gen-med-preview:empty {
display: none;
}
.gen-med-preview img {
display: block;
max-width: 100%;
max-height: 420px;
width: auto;
height: auto;
object-fit: contain;
} .gen-stage--tool .gen-tool-actions[hidden],
.gen-stage--tool .gen-btn[hidden],
.gen-med-times[hidden],
.gen-med-wave[hidden],
.gen-med-head[hidden],
.gen-med-progress[hidden],
.gen-med-scroll table[hidden] {
display: none;
} .gen-output-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
}
.gen-output-actions {
display: flex;
gap: 0.5rem;
}
.gen-code {
margin: 0;
padding: 1.1rem 1.25rem;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.88rem;
line-height: 1.7;
color: var(--code-text);
background: var(--code-bg);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.gen-code code {
font: inherit;
color: inherit;
background: none;
padding: 0;
}
.gen-tok-sel { color: #f9a8d4; }
.gen-tok-prop { color: #93c5fd; }
.gen-tok-val { color: #fde68a; }
.gen-tok-com { color: var(--code-muted); font-style: italic; } .gen-related {
margin-bottom: 3rem;
}
.gen-related h2,
.gen-hub-title {
margin: 0 0 1rem;
font-size: 1.3rem;
color: var(--text-primary);
}
.gen-related-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.gen-related-list a {
display: inline-block;
padding: 0.45rem 0.85rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-body);
text-decoration: none;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 999px;
}
.gen-related-list a:hover {
color: var(--accent-ink);
border-color: var(--accent-border);
background: var(--accent-soft);
}
.gen-content {
max-width: var(--max-width-content);
margin: 0 auto 3rem;
} .gen-content .gen-examples {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1rem;
margin: 1.25rem 0 2.5rem;
} @media (min-width: 1000px) {
.gen-content .gen-examples {
width: min(1100px, calc(100vw - 3rem));
margin-left: 50%;
transform: translateX(-50%);
}
}
.gen-content .gen-example {
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
overflow: hidden;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
} .gen-content .gen-example figcaption {
margin: 0;
padding: 0.85rem 1rem 0.5rem;
text-align: left;
font-size: 0.86rem;
line-height: 1.5;
color: var(--text-muted);
}
.gen-example-name {
display: block;
margin-bottom: 0.2rem;
font-size: 0.95rem;
color: var(--text-primary);
}
.gen-example-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 1rem 0.75rem;
}
.gen-content .gen-example-code {
flex: 1;
margin: 0;
padding: 0.8rem 1rem;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.76rem;
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--code-text);
background: var(--code-bg);
border-radius: 0;
}
.gen-content .gen-example-code code {
padding: 0;
font: inherit;
color: inherit;
background: none;
} .gen-ex-stage {
position: relative;
display: grid;
place-items: center;
height: 150px;
padding: 1rem;
overflow: hidden;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.gen-ex-box {
width: 120px;
height: 80px;
}
.gen-ex-text {
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
}
.gen-ex-stage--sticla {
background: linear-gradient(135deg, #312e81, #0f766e);
}
.gen-ex-stage--apus {
background: linear-gradient(135deg, #f97316, #db2777);
}
.gen-ex-stage--noapte {
background: linear-gradient(135deg, #020617, #1e1b4b);
}
.gen-ex-stage .gen-blob {
width: 90px;
height: 90px;
animation: none;
}
.gen-ex-stage .gen-blob--1 { top: 12px; left: 22%; }
.gen-ex-stage .gen-blob--2 { right: 18%; bottom: 8px; width: 100px; height: 100px; }
.gen-ex-stage--noapte .gen-blob--1 { background: #6366f1; }
.gen-ex-stage--apus .gen-blob--1 { background: #fde047; }
.gen-ex-glass {
position: relative;
display: grid;
place-items: center;
width: 150px;
height: 90px;
font-weight: 700;
}
.gen-ex-stage--flex,
.gen-ex-stage--grid {
display: block;
padding: 0.6rem;
}
.gen-ex-flex,
.gen-ex-grid {
width: 100%;
height: 100%;
padding: 6px;
overflow: hidden;
border: 2px dashed var(--border-strong);
border-radius: 8px;
}
.gen-ex-flex i,
.gen-ex-grid i {
display: grid;
place-items: center;
min-width: 32px;
min-height: 24px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-style: normal;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: 5px;
} .gen-ex-flex i:nth-child(3n+1) { min-width: 40px; min-height: 30px; }
.gen-ex-flex i:nth-child(3n+2) { min-width: 28px; min-height: 46px; }
.gen-ex-flex i:nth-child(3n) { min-width: 52px; min-height: 22px; }
.gen-ex-grid i {
min-width: 0;
min-height: 16px;
}
.gen-ex-clip {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #f97316, #ec4899 50%, #7c3aed);
}
.gen-ex-track {
position: relative;
width: 100%;
height: 32px;
border-bottom: 2px solid var(--border-color);
}
.gen-ex-ball {
position: absolute;
bottom: 4px;
left: 0;
width: 24px;
height: 24px;
background: var(--accent-color);
border-radius: 50%;
animation: gen-ex-move 1.6s infinite alternate;
}
@keyframes gen-ex-move {
to { left: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
.gen-ex-ball { animation-play-state: paused; }
}
.gen-ex-stage--culoare {
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
background: var(--bg-main);
}
.gen-ex-swatch {
width: 100%;
height: 100%;
border: 1px solid var(--border-color);
border-radius: 10px;
}
.gen-ex-swatch--alpha {
background:
linear-gradient(var(--fill), var(--fill)),
repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 16px 16px;
} .gen-ex-anim {
display: grid;
place-items: center;
width: 64px;
height: 64px;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: 12px;
}
.gen-ex-palette {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 10px;
}
.gen-ex-palette span {
flex: 1;
}
.gen-ex-contrast {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-size: 1.05rem;
border: 1px solid var(--border-color);
border-radius: 10px;
}
.gen-ex-contrast b {
font-size: 2.2rem;
line-height: 1;
}
.gen-ex-btn {
font-family: var(--font-sans);
white-space: nowrap;
}
.gen-ex-scene {
width: 160px;
}
.gen-ex-tf-ghost,
.gen-ex-tf {
grid-area: 1 / 1;
width: 70px;
height: 70px;
border-radius: 10px;
}
.gen-ex-tf-ghost {
border: 2px dashed var(--border-strong);
}
.gen-ex-tf {
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
opacity: 0.92;
}
.gen-ex-tooltip {
position: relative;
padding: 8px 12px;
font-size: 0.9rem;
color: #ffffff;
background: #0f172a;
border-radius: 6px;
}
.gen-ex-tooltip i {
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-top: 6px solid #0f172a;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.gen-ex-clamp {
display: grid;
justify-items: center;
gap: 0.4rem;
}
.gen-ex-clamp span {
font-weight: 800;
line-height: 1;
color: var(--text-primary);
}
.gen-ex-clamp small {
font-size: 0.75rem;
color: var(--text-muted);
}
.gen-ex-clamp-box {
display: block;
max-width: 200px;
background: linear-gradient(135deg, #3b82f6, #7c3aed) content-box, #dbeafe;
border-radius: 8px;
}
.gen-ex-clamp-box::before {
content: '';
display: block;
width: 40px;
height: 16px;
} .gen-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
margin: 0 0 3rem;
padding: 0;
list-style: none;
}
.gen-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
color: inherit;
text-decoration: none;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
}
.gen-card:hover {
transform: translateY(-3px);
border-color: var(--accent-border);
box-shadow: var(--shadow-md);
}
.gen-card-body {
padding: 1.1rem 1.25rem 1.3rem;
}
.gen-card h2,
.gen-card h3 {
margin: 0 0 0.4rem;
font-size: 1.08rem;
color: var(--text-primary);
}
.gen-card p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-muted);
} .gen-demo {
position: relative;
display: grid;
place-items: center;
height: 150px;
overflow: hidden;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.gen-demo i {
display: block;
}
.gen-demo--border i {
width: 110px;
height: 70px;
border: 4px dashed #2563eb;
border-radius: 40px 8px 40px 8px;
background: #eef4ff;
}
.gen-demo--gradient {
background: conic-gradient(from 200deg at 30% 60%, #f97316, #ec4899, #7c3aed, #2563eb, #f97316);
}
.gen-demo--box-shadow i {
width: 110px;
height: 70px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 18px 30px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.gen-demo--text-shadow {
background: #0b1020;
}
.gen-demo--text-shadow i {
font-size: 3rem;
font-style: normal;
font-weight: 800;
color: #ffffff;
text-shadow: 0 0 6px #fff, 0 0 16px #22d3ee, 0 0 34px #0891b2;
}
.gen-demo--glassmorphism {
background: linear-gradient(135deg, #f97316, #db2777);
}
.gen-demo--glassmorphism::before,
.gen-demo--glassmorphism::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fde047;
top: 20px;
left: 30%;
}
.gen-demo--glassmorphism::after {
background: #22d3ee;
top: 60px;
left: 55%;
}
.gen-demo--glassmorphism i {
position: relative;
z-index: 1;
width: 130px;
height: 80px;
background: rgba(255, 255, 255, 0.22);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 14px;
}
.gen-demo--flexbox i,
.gen-demo--grid i {
display: flex;
gap: 6px;
align-items: center;
justify-content: space-between;
width: 160px;
height: 80px;
padding: 6px;
border: 2px dashed var(--border-strong);
border-radius: 8px;
}
.gen-demo--grid i {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.gen-demo--flexbox b,
.gen-demo--grid b {
display: block;
min-width: 26px;
height: 100%;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: 4px;
}
.gen-demo--flexbox b:nth-child(2) { height: 60%; }
.gen-demo--flexbox b:nth-child(3) { height: 35%; }
.gen-demo--clip-path i {
width: 110px;
height: 110px;
background: linear-gradient(135deg, #f97316, #ec4899 50%, #7c3aed);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.gen-demo--cubic-bezier svg {
width: 120px;
height: 120px;
}
.gen-demo--cod-culoare {
grid-template-columns: repeat(3, 44px);
gap: 8px;
place-content: center;
}
.gen-demo--cod-culoare b {
width: 44px;
height: 44px;
border-radius: 10px;
background: #2563eb;
}
.gen-demo--cod-culoare b:nth-child(2) {
background:
linear-gradient(rgba(37, 99, 235, 0.5), rgba(37, 99, 235, 0.5)),
repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 12px 12px;
}
.gen-demo--cod-culoare b:nth-child(3) {
background: #7c3aed;
}
.gen-demo--animatie-css i {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: 12px;
animation: gen-demo-bounce 1.4s infinite;
}
@keyframes gen-demo-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-24px); }
60% { transform: translateY(-12px); }
}
.gen-demo--paleta-culori {
grid-template-columns: repeat(5, 36px);
place-content: center;
gap: 0;
}
.gen-demo--paleta-culori b {
width: 36px;
height: 80px;
}
.gen-demo--paleta-culori b:nth-child(1) { background: #bfdbfe; border-radius: 10px 0 0 10px; }
.gen-demo--paleta-culori b:nth-child(2) { background: #60a5fa; }
.gen-demo--paleta-culori b:nth-child(3) { background: #2563eb; }
.gen-demo--paleta-culori b:nth-child(4) { background: #1d4ed8; }
.gen-demo--paleta-culori b:nth-child(5) { background: #1e3a8a; border-radius: 0 10px 10px 0; }
.gen-demo--contrast-culori,
.gen-demo--clamp-font {
grid-auto-flow: column;
place-content: center;
gap: 10px;
}
.gen-demo--contrast-culori i {
padding: 18px 20px;
font-size: 1.8rem;
font-style: normal;
font-weight: 800;
color: #0f172a;
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 10px;
}
.gen-demo--contrast-culori i + i {
color: #94a3b8;
}
.gen-demo--buton-css i {
padding: 12px 24px;
font-style: normal;
font-weight: 600;
color: #ffffff;
background: #2563eb;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.gen-demo--filter-css {
grid-auto-flow: column;
place-content: center;
gap: 8px;
}
.gen-demo--filter-css i {
width: 80px;
height: 80px;
background: radial-gradient(circle at 70% 30%, #fde047 0 14px, transparent 15px), linear-gradient(#38bdf8 55%, #16a34a 55%);
border-radius: 10px;
}
.gen-demo--filter-css i + i {
filter: grayscale(100%);
}
.gen-demo--transform-css {
perspective: 400px;
}
.gen-demo--transform-css i {
width: 90px;
height: 70px;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
border-radius: 10px;
transform: rotateY(28deg) rotateX(10deg) rotate(-6deg);
}
.gen-demo--triunghi-css i {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 80px solid #2563eb;
border-left: 50px solid transparent;
}
.gen-demo--loader-css i {
width: 52px;
height: 52px;
border: 6px solid #e2e8f0;
border-top-color: #2563eb;
border-radius: 50%;
animation: gen-demo-spin 1s linear infinite;
}
@keyframes gen-demo-spin {
to { transform: rotate(360deg); }
}
.gen-demo--pattern-fundal {
background-color: #eff6ff;
background-image: radial-gradient(#2563eb 4px, transparent 5px);
background-size: 24px 24px;
}
.gen-demo--clamp-font {
align-items: end;
}
.gen-demo--clamp-font i {
font-style: normal;
font-weight: 800;
line-height: 1;
color: #2563eb;
}
.gen-demo--clamp-font i:nth-child(1) { font-size: 1.2rem; }
.gen-demo--clamp-font i:nth-child(2) { font-size: 2rem; }
.gen-demo--clamp-font i:nth-child(3) { font-size: 3rem; }
@media (prefers-reduced-motion: reduce) {
.gen-demo--animatie-css i,
.gen-demo--loader-css i {
animation: none;
}
}
.gen-hub-group {
margin-bottom: 1rem;
}
.gen-hub-title span {
margin-left: 0.35rem;
padding: 0.1rem 0.55rem;
font-size: 0.8rem;
font-weight: 700;
vertical-align: middle;
color: var(--accent-ink);
background: var(--accent-soft);
border-radius: 999px;
}
.gen-demo code {
max-width: 90%;
padding: 0.6rem 0.8rem;
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.6;
color: var(--code-text);
background: var(--code-bg);
border-radius: 8px;
overflow-wrap: anywhere;
}
.gen-demo--favicon {
grid-auto-flow: column;
place-content: center;
align-items: end;
gap: 12px;
}
.gen-demo--favicon i {
display: grid;
place-items: center;
width: 64px;
height: 64px;
font-size: 2.2rem;
font-style: normal;
font-weight: 800;
color: #ffffff;
background: #2563eb;
border-radius: 14px;
}
.gen-demo--favicon i + i {
width: 32px;
height: 32px;
font-size: 1.1rem;
border-radius: 7px;
}
.gen-demo--tabel-html-markdown i {
display: grid;
grid-template-columns: repeat(3, 44px);
gap: 2px;
}
.gen-demo--tabel-html-markdown b {
height: 22px;
background: #ffffff;
border: 1px solid var(--border-strong);
}
.gen-demo--tabel-html-markdown b:nth-child(-n+3) {
background: #dbeafe;
} @media (max-width: 900px) {
.gen-app {
grid-template-columns: minmax(0, 1fr);
} .gen-main {
position: static;
order: -1;
}
.gen-stage {
min-height: 280px;
padding: 1.5rem;
}
.gen-stage--bezier {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
.gen-bezier {
max-width: 220px;
}
}
@media (max-width: 640px) {
.gen-hero {
padding: 1.75rem 1.25rem;
}
.gen-hero h1 {
font-size: 1.7rem;
}
.gen-output-head {
flex-wrap: wrap;
} .site-main .gen-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.site-main .gen-app textarea,
.site-main .gen-app select {
font-size: 16px;
}
} .gen-stage--fill {
background-size: auto;
background-position: 0 0;
}.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);
}