capabilities: proof-points fill the tall tiles; headers rebalanced to the flagship weight

The hero and full-row tiles stretched to their grid height with nothing
between blurb and chips - reading as missing body. Adds a points field
rendered as accent-dashed proof lines (flagship gets four, observability
three), each grounded in the running estate. Category titles step up to
23px/700 with the flagship at 30px so the hierarchy holds.
This commit is contained in:
2026-08-03 16:54:53 +10:00
parent 6c7e577633
commit f7e64cebe5
2 changed files with 57 additions and 3 deletions
+43 -3
View File
@@ -25,6 +25,13 @@ const spanClass =
{group.flag && <p class="tile__flag mono">{group.flag}</p>}
<h3 class="tile__title">{group.title}</h3>
<p class="tile__blurb">{group.blurb}</p>
{group.points && (
<ul class="tile__points" role="list">
{group.points.map((point) => (
<li>{point}</li>
))}
</ul>
)}
<ul class="tile__chips mono" role="list">
{group.items.map((item) => (
<li class:list={["chip", group.span === "hero" && "chip--lit"]}>{item}</li>
@@ -97,12 +104,12 @@ const spanClass =
position: relative;
margin: 0;
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
font-size: 23px;
font-weight: 700;
color: var(--text-strong);
}
.tile--hero .tile__title {
font-size: 26px;
font-size: 30px;
}
.tile__blurb {
position: relative;
@@ -118,6 +125,39 @@ const spanClass =
max-width: 420px;
}
.tile__points {
position: relative;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin: 6px 0 0;
padding: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-dim);
}
.tile__points li {
padding-left: 18px;
position: relative;
text-wrap: pretty;
}
.tile__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 1px;
}
.tile--hero .tile__points {
font-size: 14.5px;
gap: 12px;
max-width: 460px;
}
.tile__chips {
position: relative;
list-style: none;