susovan.sarkar/Skiply.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor connected systems styles for improved layout and responsiveness; adjust route card alignment and visibility for better mobile experience.

Browse Source
This commit is contained in:
susovan sarkar 2026-08-19 20:24:19 +05:30
parent 5a8f0f2df9
commit da0586804a
1 changed files with 111 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
skiply/skiply-connected-systems.css
View File

@ -37,6 +37,7 @@ body {
.connected {
background: var(--navy-deep);
padding: 96px 32px 80px;
overflow-x: hidden;
}
.connected__inner {
@ -193,6 +194,11 @@ body {
drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(110, 165, 255, 0.8)) drop-shadow(0 0 30px rgba(70, 120, 255, 0.5));
overflow: visible;
@media (max-width: 1024px) {
left: 0;
right: 0;
}
}
/* Moving wave */
@ -486,12 +492,53 @@ body {
font-size: 2.1rem;
}
.connected__routes {
flex-wrap: wrap;
/* The tree SVG's rendered height scales down with its container, so
the pull-up that tucks it under the shoe must scale down with it too. */
.connected__tree {
margin-top: -160px;
}
/* Keep all 5 cards on one row and let them shrink together, rather
than wrapping to 3+2 — the tree SVG's branch endpoints are laid
out assuming a single row of 5, so wrapping breaks the alignment
between each branch and the card underneath it (they'd only line
up for the first 3 cards). Shrinking in place keeps them synced
at any width down to the mobile breakpoint below. */
.route {
flex: 1 1 calc(33.333% - 10px);
min-height: 130px;
padding: 24px 14px;
gap: 16px;
}
.route__badge {
width: 44px;
height: 44px;
}
.route__label {
font-size: 0.95rem;
}
}
@media (max-width: 860px) {
.route {
min-height: 110px;
padding: 18px 10px;
gap: 12px;
}
.route__badge {
width: 36px;
height: 36px;
}
.route__badge img {
width: 18px;
height: 18px;
}
.route__label {
font-size: 0.8rem;
}
}
@ -508,10 +555,18 @@ body {
font-size: 0.8rem;
}
.connected__branches {
.connected__branches,
.connected__flow {
display: none;
}
/* Branches are hidden below this width, so the tree wrapper only
holds the route cards now — give them normal breathing room
instead of the desktop pull-up meant for the SVG above them. */
.connected__tree {
margin-top: 24px;
}
.scan-label {
font-size: 0.7rem;
gap: 8px;
@ -531,12 +586,44 @@ body {
font-size: 0.8rem;
}
/* Pull the chips that sit at a negative offset back within the
stage bounds so they don't clip against the section's edge. */
.scan-label--condition {
left: 0%;
}
.scan-label--value {
right: 0%;
}
/* The branch-fan SVG only makes sense as a wide horizontal spread —
it has no sensible equivalent once the cards stack into a single
column, so instead of hiding the "connected" idea entirely, a
simple vertical timeline rail takes over: one dot per card, lit
via the same .is-lit toggle the desktop tree already drives. */
.connected__routes {
position: relative;
flex-direction: column;
gap: 12px;
padding-left: 26px;
}
.connected__routes::before {
content: "";
position: absolute;
left: 3px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(to bottom,
transparent,
rgba(150, 195, 255, 0.5) 10%,
rgba(150, 195, 255, 0.5) 90%,
transparent);
}
.route {
position: relative;
flex: 1 1 auto;
width: 100%;
flex-direction: row;
@ -547,6 +634,26 @@ body {
padding: 14px 20px;
}
.route::before {
content: "";
position: absolute;
left: -26px;
top: 50%;
width: 8px;
height: 8px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--navy-deep);
border: 2px solid rgba(150, 195, 255, 0.6);
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.route.is-lit::before {
background: #eaf2ff;
border-color: #6ba8ff;
box-shadow: 0 0 8px 2px #6ba8ff, 0 0 14px 5px rgba(63, 123, 255, 0.6);
}
.route__label {
font-size: 1rem;
}