style: run Operations under the infrastructure route as a base rail

This commit is contained in:
2026-10-11 01:21:35 +03:00
parent 38f680f16a
commit 077106274c

View File

@@ -173,3 +173,37 @@
clip-path: inset(-40px -40px -40px -40px);
}
}
/* ---------- Infrastructure diagram: Operations is the base rail ----------
Operations sustains the whole route, so on wide screens it runs under all
four stages as one slim rail instead of a fifth card hanging below the
last, which left three empty cells beside it. Its connector still drops
from Containerized services: the centre of the fourth column is
87.5% of the row plus three-eighths of one column gap. */
@media (min-width: 768px) {
.infrastructure-flow {
--route-gap: clamp(1.9rem, 3vw, 3rem);
padding-block-end: 1.25rem;
}
.infrastructure-flow__route {
column-gap: var(--route-gap);
row-gap: 2rem;
}
.infrastructure-node.infrastructure-node--operations {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 1.1rem;
min-block-size: 0;
padding-block: 0.9rem;
}
.infrastructure-node--operations .infrastructure-node__connector--vertical {
inset-inline-start: calc(87.5% + 0.375 * var(--route-gap));
inline-size: 1px;
block-size: 2rem;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.infrastructure-flow { --route-gap: 20px; }
}