/* ========================================================================== SYSTEM INTELLIGENCE · page-scoped styles ========================================================================== Created 2026-08-12 for the solution-pages feedback rework (docs/superpowers/specs/2026-08-12-solution-pages-rework-design.md §5). Page-scoped on purpose. Everything shared lives in css/sp-primitives.css, which this page links but never edits — all three Solutions pages read from it, so a change there is a change to two pages nobody asked about. Anything only Root-Cause Analysis needs belongs here instead. ========================================================================== */ /* ========================================================================== § THE ROLE LABEL ON A VALUE CARD ========================================================================== .sp-vcard gives us icon, headline, body. Spec §5.3 makes the headline the question the reader walks in with, which leaves nowhere for the role name — and this section is "Who benefits", so the role is the point of it. Without it the reader gets five good questions and no idea who is asking them, and the deliberate overlap with the Agents page's seven roles disappears. It is a label, not a heading: mono, micro, dim, sitting above the question the way an eyebrow sits above a headline. It must never compete with the question, which is the line that has to land. Kept here rather than added to sp-primitives.css because only this page has role-labelled cards. If the Twin page ever wants one too, that is the moment to raise it as a shared primitive — not now. -------------------------------------------------------------------------- */ .si-vcard__role { /* Cancels the icon's own gap contribution so the label reads as attached to the question below it, not floating between the two. */ margin: var(--sp-2) 0 calc(var(--sp-3) * -1 + 2px); font-family: var(--mono); /* Was --sp-micro (10.6px) in --dim, which is 2.88:1 on white: the role label names who the card is for, and it was the smallest, faintest thing on it. Up a step, and onto --muted at 5.69:1. Uppercase mono still reads as a label at this size — it does not need to be tiny to be quiet. */ /* MATCHED TO .eyebrow, the site's own label style: 0.74rem, weight 600, 0.14em tracking, uppercase. This was 0.72rem at weight 400 with 0.08em — close enough to look like a mistake rather than a variant, and it made the five role labels read lighter than every other label on the site. Colour stays --muted rather than .eyebrow's --dim: --dim is 2.88:1 on white and fails AA, which is a site-wide problem this label should not inherit. */ font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* A PORTRAIT ON THE ROLE LINE. The card already carries a concept icon at the top — a chain, a trace, a gate — which says what the card is ABOUT. None of them says the card is about a PERSON, so the five roles read as five more features. A head-and-shoulders mark inline with the label fixes that in one glyph, and stays inline rather than becoming a second stacked icon: two icons in a column would compete, one icon on a line reads as a bullet. */ .si-vcard__role { display: flex; align-items: center; gap: 0.45em; } .si-vcard__who { flex: none; display: inline-flex; width: 1.05em; height: 1.05em; color: var(--teal-ink); } .si-vcard__who svg { width: 100%; height: 100%; display: block; } /* With the label present the question no longer needs its own top gap. */ .si-vcard__role + .sp-vcard__head { margin-top: 0; } /* ========================================================================== § FIVE CARDS IN A THREE-COLUMN GRID ========================================================================== "Who benefits" has five roles, and .sp-vcard__grid is three columns, so the last row holds two cards and a hole. A hole at the end of a grid reads as a card that failed to load. Centring the last two turns it into a deliberate 3 + 2, which is what it is. The fifth card is the one that starts the row, so it is the one that gets pushed. Written with column-start rather than a --4 style variant because the count is a fact about this section's content and not a new layout the other pages need — the shared primitive keeps its three columns. Only while the grid actually has three columns. Below 1080px it becomes two columns (5 = 2 + 2 + 1) and below 640px one, and in both cases nudging the fifth card would open a hole rather than close one. SCOPED TO .sp-vcard__grid--5, AND THAT MATTERS. These rules first targeted every .sp-vcard__grid on the page. Adding a second value-card grid would then have silently deformed it — worst case the .sp-vcard__grid--4 variant, which is four columns above 1080px, where forcing card 4 to grid-column-start: 1 drops it onto a second row and shoves it 50% sideways. The modifier makes the requirement legible: this offset belongs to a grid of exactly five cards. Change the card count and this class comes off with it. -------------------------------------------------------------------------- */ @media (min-width: 1081px) { .sp-vcard__grid--5 > .sp-vcard:nth-child(4) { grid-column-start: 1; transform: translateX(calc(50% + var(--sp-4) / 2)); } .sp-vcard__grid--5 > .sp-vcard:nth-child(5) { transform: translateX(calc(50% + var(--sp-4) / 2)); } /* The primitive's own hover lift must still win, so it is restated with the offset folded in rather than left to fight this rule. */ .sp-vcard__grid--5 > .sp-vcard:nth-child(4):hover, .sp-vcard__grid--5 > .sp-vcard:nth-child(4):focus-within, .sp-vcard__grid--5 > .sp-vcard:nth-child(5):hover, .sp-vcard__grid--5 > .sp-vcard:nth-child(5):focus-within { transform: translateX(calc(50% + var(--sp-4) / 2)) translateY(-3px); } } @media (min-width: 1081px) and (prefers-reduced-motion: reduce) { .sp-vcard__grid--5 > .sp-vcard:nth-child(4):hover, .sp-vcard__grid--5 > .sp-vcard:nth-child(4):focus-within, .sp-vcard__grid--5 > .sp-vcard:nth-child(5):hover, .sp-vcard__grid--5 > .sp-vcard:nth-child(5):focus-within { transform: translateX(calc(50% + var(--sp-4) / 2)); } }