/* Blog mockups - real HTML and CSS, never an image.
*
* A model can read text. It cannot read a picture of a price, so anything
* carrying a number, a fee or a feature claim is built out of markup here.
* These also reflow on a phone, weigh nothing, and cause no layout shift.
*
* Three components, that is the whole set. Resist adding a fourth unless a
* post genuinely cannot be made clear with these.
*
* .skm-checkout a checkout screen, used to show an order bump
* .skm-flow who pays who, left to right
* .skm-stat one number that matters
*
* Load it in the post head, after stakk-tokens.css:
*
*
* Written 12 Sep 2026.
*/
/* Shared -------------------------------------------------------------- */
.skm {
/* Generous above and below: a mockup is a beat in the reading, not a
paragraph. 40px is roughly one blank line more than the paragraph gap. */
margin: 40px 0 44px;
font-family: var(--sk-font);
}
/* Centre the mockup itself, but keep its caption left-aligned under it so it
reads as prose rather than a title. */
.skm > .skm-checkout,
.skm > .skm-flow,
.skm > .skm-stat {
margin-left: auto;
margin-right: auto;
}
/* The caption under every mockup. Not decoration - it is the alt text,
except it is real text that everyone can read. */
.skm-cap {
margin-top: 14px;
font-size: 15px;
line-height: 1.45;
color: var(--sk-muted, #5E635E);
}
/* Checkout ------------------------------------------------------------ */
.skm-checkout {
max-width: 420px;
padding: 22px;
border: 1px solid var(--sk-border, #E4E6E4);
border-radius: var(--sk-radius-card, 10px);
background: var(--sk-white, #fff);
}
.skm-checkout-head {
margin-bottom: 18px;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sk-muted, #5E635E);
}
/* One line item: name on the left, price on the right. */
.skm-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
font-size: 16px;
line-height: 1.4;
}
.skm-line + .skm-line {
border-top: 1px solid var(--sk-hairline, #ECECEC);
}
.skm-price {
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
/* The bump itself. Green so the eye lands on it, dashed so it reads as
the optional thing rather than part of the order. */
.skm-bump {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 14px 0;
padding: 14px;
border: 1px dashed var(--sk-green, #00E000);
border-radius: var(--sk-radius-card, 10px);
background: rgba(0, 224, 0, 0.08);
}
.skm-box {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 4px;
background: var(--sk-green, #00E000);
color: var(--sk-black, #000);
font-size: 14px;
line-height: 20px;
text-align: center;
}
.skm-bump-text {
flex: 1;
min-width: 0;
font-size: 15px;
line-height: 1.4;
}
/* block, not inline: this is a span inside a span, and without it the
sub-line runs on from the end of the label. */
.skm-bump-sub {
display: block;
margin-top: 3px;
font-size: 14px;
color: var(--sk-muted, #5E635E);
}
.skm-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid var(--sk-border, #E4E6E4);
font-size: 17px;
}
.skm-pay {
display: block;
width: 100%;
height: var(--sk-btn-h-sm, 44px);
margin-top: 16px;
border-radius: var(--sk-radius-btn, 10px);
background: var(--sk-black, #000);
color: var(--sk-white, #fff);
font-size: 15px;
line-height: var(--sk-btn-h-sm, 44px);
text-align: center;
}
/* A variant for the after-payment screen, so a post can show both halves
of a funnel side by side in sequence. */
.skm-checkout.is-after {
border-color: var(--sk-green, #00E000);
}
/* Flow ---------------------------------------------------------------- */
.skm-flow {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
}
.skm-step {
flex: 1 1 150px;
/* without this a flex item refuses to shrink below its content width and
the last step hangs off the right edge of the article. */
min-width: 0;
padding: 16px;
border: 1px solid var(--sk-border, #E4E6E4);
border-radius: var(--sk-radius-card, 10px);
background: var(--sk-off, #F9F9F9);
}
/* The step that is us, or the step the post is arguing about. */
.skm-step.is-us {
border-color: var(--sk-green, #00E000);
background: rgba(0, 224, 0, 0.08);
}
.skm-step-label {
font-size: 15px;
line-height: 1.3;
}
.skm-step-sub {
margin-top: 5px;
font-size: 14px;
line-height: 1.4;
color: var(--sk-muted, #5E635E);
}
.skm-arrow {
align-self: center;
flex: 0 0 auto;
color: var(--sk-muted, #5E635E);
font-size: 18px;
}
/* On a phone the row becomes a column, so the arrow has to turn with it. */
@media (max-width: 560px) {
.skm-flow { flex-direction: column; }
.skm-arrow { align-self: flex-start; padding-left: 18px; transform: rotate(90deg); }
}
/* Stat ---------------------------------------------------------------- */
.skm-stat {
padding: 26px;
border-radius: var(--sk-radius-card, 10px);
background: var(--sk-green, #00E000);
color: var(--sk-black, #000);
}
.skm-stat-num {
font-size: 46px;
line-height: 1.05;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.skm-stat-text {
margin-top: 10px;
font-size: 16px;
line-height: 1.45;
max-width: 34em;
}
/* Two checkouts side by side, for showing the bump and the upsell as the
sequence they actually are. Stacks on a phone. */
.skm-pair {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
justify-content: center;
}
.skm-pair > .skm-checkout {
flex: 1 1 300px;
min-width: 0;
max-width: 380px;
}
/* A bump the seller's plan does not include. Same row, no colour, so it
reads as switched off rather than as an error. */
.skm-bump.is-locked {
border-color: var(--sk-input-line, #D4D4D0);
background: var(--sk-off, #F9F9F9);
color: var(--sk-muted, #5E635E);
}
.skm-bump.is-locked .skm-box {
background: var(--sk-input-line, #D4D4D0);
color: var(--sk-white, #fff);
}