Skip to content

[WIP DEMO] feat(case-study): Anysphere Cursor success story [FABLE 5 ULTRACODE] #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
oycyc wants to merge 3 commits into from
Closed

[WIP DEMO] feat(case-study): Anysphere Cursor success story [FABLE 5 ULTRACODE] #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e4c8a2e
feat(case-study): add Anysphere Cursor immersive success story
oycyc Jul 10, 2026
7cd2892
refactor(case-study): consolidate Cursor page into 7 bands
oycyc Jul 10, 2026
66eeb33
fix(case-study): centre the consolidated bands' content column
oycyc Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 145 additions & 3 deletions assets/css/case-studies.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1534,6 +1534,13 @@ html:has(.cs-sticky-nav) {
strong {
color: #fff;
}
h3,
h4 {
color: #fff;
}
h3 {
border-top-color: rgba(255, 255, 255, 0.14);
}
ul > li::before {
@include csi-grad-solid;
}
Expand Down Expand Up @@ -1580,12 +1587,28 @@ html:has(.cs-sticky-nav) {
}
}

// ---- Default LEFT alignment — the content renders as a CENTERED article
// column (text stays left-aligned, the column centres in the band) so
// wide viewports don't leave a dead right half. Only csi-section
// emits --left (csi-split carries its own grid and no align class),
// and every MarketSpark / Power Digital section is --center, so this
// only shapes the consolidated narrative bands (Cursor).
&--left {
.csi-section__head,
.csi-prose {
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
}

// ---- COMPACT band — applied automatically to any section containing a
// csi-list or csi-questions (no opt-in arg): same content, less
// vertical real estate. Tighter padding, smaller head, denser prose
// and pull quote.
&:has(.csi-list),
&:has(.csi-questions) {
// and pull quote. `roomy="true"` (csi-section--roomy) opts a long
// consolidated band back out — its bulk is narrative, not the list.
&:has(.csi-list):not(.csi-section--roomy),
&:has(.csi-questions):not(.csi-section--roomy) {
padding: 2.5rem 0;
@media (max-width: 991px) {
padding: 2.1rem 0;
Expand Down Expand Up @@ -1821,6 +1844,46 @@ html:has(.cs-sticky-nav) {
}
}

// In-card subsection heads + inline media — consolidated bands (Cursor)
// carry several source sections inside ONE band: markdown ### become the
// in-card chapter heads (hairline divider between chapters), markdown
// images the inline charts, and csi-figure drops a CSS-drawn figure into
// the prose flow. Pine faces recolour the heads inside the --pine block.
.csi-prose h3,
.csi-prose h4 {
color: $csi-ink;
font-weight: 800;
line-height: 1.3;
}
.csi-prose h3 {
font-size: clamp(1.35rem, 2.2vw, 1.7rem);
margin: 2.8rem 0 1rem;
padding-top: 2.4rem;
border-top: 1px solid $csi-line;
}
.csi-prose > h3:first-child {
margin-top: 0.4rem;
padding-top: 0;
border-top: 0;
}
.csi-prose h4 {
font-size: 1.18rem;
margin: 2.2rem 0 0.8rem;
}
.csi-prose img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
margin: 1.7rem auto;
box-shadow: 0 18px 44px -28px rgba(8, 30, 30, 0.45);
}
.csi-figure {
display: flex;
justify-content: center;
margin: 2.2rem auto;
}

// ---------------------------------------------------------------------------
// SPLIT — text + visual side by side, alternating with --flip
// ---------------------------------------------------------------------------
Expand Down Expand Up @@ -2294,6 +2357,81 @@ html:has(.cs-sticky-nav) {
// NOTE: the ledger stays a WHITE card on dark faces too (no pine override)
// — the hard numbers read best on white, and the card pops off the band.

// ---------------------------------------------------------------------------
// TABLE — csi-table: a compact metric table for numbers that outgrow the
// two-column csi-compare ledger (an extra "Change"/"Improvement" delta
// column). Same rule as the ledger: it stays a WHITE card on dark faces.
// The delta column (`accent="true"`) carries the brand gradient — its
// classes are registered in the print gradient-fallback list.
// ---------------------------------------------------------------------------
.csi-table {
max-width: 980px;
margin: 2.2rem auto 0;
text-align: left;

&__card {
background: #fff;
border: 1px solid $csi-line;
border-radius: 16px;
box-shadow: 0 16px 36px -26px rgba(8, 30, 30, 0.32);
overflow: hidden;
}
&__title {
padding: 1rem 1.4rem 0.9rem;
font-size: 1.02rem;
font-weight: 800;
color: $csi-ink;
border-bottom: 1px solid $csi-line;
}
&__scroll {
overflow-x: auto;
}
table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
margin: 0;
font-size: 0.95rem;
}
thead {
// strip tint lives on the row, NOT the th — a bg on the th would
// out-specify the gradient mixin on th.csi-table__delta-head and leave
// its clipped text invisible (flat bg + transparent fill)
background: rgba(20, 48, 47, 0.03);
}
th {
padding: 0.8rem 1.4rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: left;
color: #8aa09f;
border-bottom: 1px solid $csi-line;
white-space: nowrap;
}
td {
padding: 0.95rem 1.4rem;
color: #7d9291;
line-height: 1.45;
vertical-align: top;
}
td:first-child {
font-weight: 700;
color: $csi-ink;
}
tbody tr + tr td {
border-top: 1px solid $csi-line;
}
&__delta-head {
@include csi-grad-light;
}
&__delta {
font-weight: 800;
@include csi-grad-light;
}
}

// ---------------------------------------------------------------------------
// FIGURE — TERRALITH (csi-split figure="terralith"). CSS-drawn monolith →
// isolated stacks: no image asset, inherits page fonts, recolours per face,
Expand Down Expand Up @@ -3075,6 +3213,8 @@ html:has(.cs-sticky-nav) {
.csi-questions__outro-main strong,
.csi-compare__col--after,
.csi-compare__after,
.csi-table__delta-head,
.csi-table__delta,
.cs-hero__title .text-gradient {
background: none !important;
-webkit-background-clip: border-box !important;
Expand Down Expand Up @@ -3117,6 +3257,8 @@ html:has(.cs-sticky-nav) {
.csi-testimonial,
.csi-impact__card,
.csi-compare__row,
.csi-table__card,
.csi-prose img,
.csi-fig-terralith__mono,
.csi-fig-terralith__stack,
.csi-timeline,
Expand Down
Loading
Loading