above and none of this applies.
*
* It must not LOOK like a button — it is the price, and turning the headline
* figure of the action bar into a second call to action competes with Add to
* cart. So: the same weight and size it had, plus a chevron, plus the ordinary
* affordances of something pressable.
* ---------------------------------------------------------------------- */
.stp-capture__price-value--button {
display: inline-flex;
align-items: center;
gap: var( --stp-gap-sm );
/*
* Self-start, or the button stretches to the footer column's full width and
* its 44px hit area becomes a 44px-tall band the customer taps by accident
* on the way to the quantity stepper.
*/
align-self: flex-start;
min-height: 44px;
margin: 0;
padding: 0;
font: inherit;
font-size: 1.0625em;
font-weight: 700;
/*
* Outside the `font` shorthand, so `font: inherit` does not reach them and
* an uppercasing theme would set the price in tracked-out capitals. It is
* the price: it has to look like the number, not like a call to action.
* Same reset as the warning strip and .stp-capture__link.
*/
text-transform: none;
letter-spacing: normal;
text-align: left;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
.stp-capture__price-value--button:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
border-radius: var( --stp-radius-sm );
}
.stp-capture__price-number {
min-width: 0;
}
/* Down when closed, up when open — the standing convention for a disclosure. */
.stp-capture__price-chevron {
transform: rotate( 45deg );
margin-top: -4px;
}
.stp-capture__price-value--button[aria-expanded="true"] .stp-capture__price-chevron {
transform: rotate( -135deg );
margin-top: 4px;
}
/*
* The setup fee is its own line and never folded into the per-unit figure: it
* is charged once per job across the whole cart and may be waived.
*/
.stp-capture__price-setup {
font-size: 0.875em;
}
.stp-capture__price-setup[hidden] {
display: none;
}
/*
* The price's scope line. A sibling of the price block since 0.9.0 (it is
* footnote text, and the action bar is for the number and the button), so it
* carries its own margin reset — it is a in someone else's theme now.
*/
.stp-capture__price-note {
margin: 0;
color: var( --stp-ink-muted );
font-size: 0.75em;
line-height: 1.4;
text-align: center;
}
/* -------------------------------------------------------------------------
* THE QUICK-CAPTURE FOOTER ORDER MAP — the studio row map's counterpart.
*
* Making the note a footer child was done for the STUDIO grid, which then
* places it deliberately. Quick capture got the same node with no instructions:
* this footer is a `flex-direction: column`, so "estimate only — taxes and
* shipping extra" was rendered in DOM position, i.e. AFTER Add to cart, the
* proof checkbox and the note field, with nothing but distance connecting it to
* the number it qualifies (9th review round, MINOR 7 — a customer-visible
* defect on the quick-capture surface, not a cosmetic one). The note goes back
* under the price, where a footnote on a price belongs.
*
* This is the ONE place in the card where visual order runs ahead of DOM order,
* and the trade is deliberate: the note is a footnote, so a screen reader
* meeting it in the epilogue with the rest of the fine print reads correctly
* either way, while an eye needs it next to the number to know what it is
* about. Everything else keeps its DOM position — `order: 4` on the rest is
* what makes that true, since equal `order` values fall back to DOM order.
*
* THE FACTS REGION TAKES THE SLOT BETWEEN THEM (0.10.0). It is the disclosure
* the price button opens, so it belongs under the number and above the
* footnote — which is also where it sits in the DOM, so this line only has to
* keep the default from throwing it to the back with everything else. It is
* `display: none` while closed and therefore costs nothing at rest.
*
* Studio is excluded rather than merely unaffected: its footer is a grid with
* every child explicitly placed, where `order` would be inert but misleading.
* ---------------------------------------------------------------------- */
.stp-capture:not( .is-studio ) .stp-capture__footer > * {
order: 4;
}
/*
* The warning strip leads, in both orders. It is already first in the DOM, so
* this only has to stop the `order: 4` above from sending it to the back with
* everything else — which it would, since the three rules below pull the price,
* its disclosure and its footnote in FRONT of the default.
*/
.stp-capture:not( .is-studio ) .stp-capture__footer > .stp-capture__warnstrip {
order: 0;
}
.stp-capture:not( .is-studio ) .stp-capture__footer > .stp-capture__price {
order: 1;
}
.stp-capture:not( .is-studio ) .stp-capture__footer > .stp-capture__facts-region {
order: 2;
}
.stp-capture:not( .is-studio ) .stp-capture__footer > .stp-capture__price-note {
order: 3;
}
/*
* The trust strip: the counterweight to the fidelity disclaimer, sitting with
* the primary action because that is the moment the reassurance is for.
*/
.stp-capture__trust {
margin: 6px 0 0;
color: var( --stp-ink-muted );
font-size: 0.75em;
line-height: 1.4;
text-align: center;
}
.stp-capture__trust[hidden] {
display: none;
}
/*
* The card's quantity stepper (inline presentation only — revealed by
* mountInline when it finds a native input to mirror).
*/
.stp-capture__field--qty {
display: flex;
align-items: center;
gap: var( --stp-gap-sm );
}
.stp-capture__field--qty[hidden] {
display: none;
}
.stp-capture__qty {
width: 5.5em;
text-align: center;
}
.stp-capture__submit {
width: 100%;
padding: 14px 20px;
font: inherit;
font-weight: 600;
color: var( --stp-accent-contrast );
background: var( --stp-accent );
border: 0;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__submit[disabled] {
opacity: 0.65;
cursor: default;
}
/*
* The way out of a resumed design. Deliberately a quiet text button in the
* muted ink and deliberately NOT next to the primary one on a phone: it throws
* work away, so it must not be what a thumb lands on by accident.
*/
.stp-capture__startover {
align-self: center;
/*
* ...but quiet is not the same as small. It measured 62x20 on a phone,
* under both the 24px floor in ARCHITECTURE.md and WCAG 2.5.8 AA, which is
* the worst of both worlds for a destructive control: hard to hit on
* purpose AND hard to hit accurately, so a miss lands on it exactly when
* the customer meant something else. The padding grows the target without
* raising the visual weight one bit — the ink, the size and the position
* are all unchanged, so the note above still holds.
*/
min-height: 24px;
padding: 6px 12px;
color: var( --stp-ink-muted );
}
.stp-capture__startover:hover {
color: var( --stp-danger );
}
/* -------------------------------------------------------------------------
* Studio layout — VISUAL MODE ONLY
*
* Canvas first: the garment across the top of the modal, an icon rail under it,
* and one panel at a time coming up over the lower half of the stage. Quick
* capture never sees any of this — every rule below is behind
* `.stp-capture.is-studio`, and the rail and the sheet carry `hidden` there.
*
* The body becomes a two-area grid rather than a column of boxes, and the sheet
* is a grid item placed in the STAGE area, aligned to its end. That is what
* makes the panel an overlay with no absolute positioning to maintain and no
* measurement of the rail's height: the rail keeps its own row and stays
* reachable, the sheet sits over the canvas, and the canvas box does not change
* size when a panel opens. It must not — a text item's font-size is fitted in
* PIXELS against the measured canvas (fitLine), so a canvas that reflowed under
* an opening panel would leave every fitted size describing a stage that is no
* longer there.
* ---------------------------------------------------------------------- */
.stp-capture.is-studio .stp-capture__body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"stage"
"rail";
gap: 0;
padding: 0;
min-height: 0;
/*
* STRETCH, explicitly. The 720px flex layout above sets align-items:
* flex-start for the two-column modal, and a grid inherits it — which left
* the tool bar sized to its own five buttons and a band of stage showing
* beneath it where the dark column should have run the full height. The
* chrome only reads as a frame if it reaches the edges.
*/
align-items: stretch;
/*
* The BODY does not scroll here; the stage inside it does. An overlay
* anchored to a scrolling box scrolls away from the rail it is supposed to
* sit on top of.
*
* `clip` rather than `hidden`, and the PAIR is load-bearing. `hidden` still
* makes this a SCROLL CONTAINER - it only refuses the user a scrollbar, so
* the browser remains free to scroll it programmatically. The sheet is a
* grid item that spends the first frames of its open at translateY( 100% ),
* a transform contributes to scrollable overflow, and so any focus() that
* lands inside the sheet gets "revealed" by scrolling this box: measured
* 317px on a rail open and 361px entering the zone editor, which is the
* blank panel Aramis photographed on 0.9.0 (iPhone, 2026-08-20). `clip`
* clips WITHOUT creating a scroll container, so there is nothing left to
* scroll and the whole class of bug is gone rather than patched one caller
* at a time.
*
* `hidden` stays as the first declaration for Safari below 16, which drops
* the `clip` line; those browsers are covered behaviorally instead, by the
* preventScroll + assertion in focusInCard().
*/
overflow: hidden;
overflow: clip;
}
.stp-capture.is-studio .stp-capture__stage {
grid-area: stage;
/* The 720px layout makes this sticky for the two-column view; a grid item
* in the studio is placed by the grid and nothing else. */
position: static;
/*
* LOAD-BEARING. Do not remove this line; it is not a leftover.
*
* The stage and the sheet are two items of the SAME grid. The sheet carries
* `z-index: 20` so a panel paints over the canvas it overlays. Inside the
* stage, the selected decoration is lifted with `z-index: 30`
* (.stp-capture__zone-items.is-lifted) so the thing being dragged is the
* thing you can see and grab. With no stacking context on the stage those
* two numbers are compared against each other in the body's context — 30
* beats 20 — and the lifted decoration paints straight THROUGH an open
* panel, on top of the very fields that are editing it.
*
* `z-index` applies to a grid item even at `position: static`, and any value
* other than `auto` makes it a stacking context. That is what makes one
* declaration enough: the lift still wins against its siblings inside the
* stage, and the stage as a whole now loses to the sheet, always. `0` is
* chosen because it changes nothing about where the stage itself paints.
*/
z-index: 0;
min-width: 0;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var( --stp-gap-sm ) var( --stp-gap-sm ) var( --stp-gap );
background: var( --stp-canvas-bg );
}
/*
* THE CANVAS BOX IS THE IMAGE BOX, and stays that way.
*
* Zone rects and every stored placement are percentages of the view image
* (SPEC-SCHEMA), and both the hotspot layer and the item layer are inset:0 of
* this element — so giving the canvas a height of its own and letterboxing the
* garment inside it would put dead bars inside the coordinate frame and move
* every zone. Instead the IMAGE is capped and the canvas shrink-wraps it, which
* is the only way to get a ~55vh stage without touching the geometry.
*/
.stp-capture.is-studio .stp-capture__canvas {
display: block;
width: -webkit-fit-content;
width: fit-content;
max-width: 100%;
margin: 0 auto;
background: none;
border: 0;
border-radius: 0;
}
.stp-capture.is-studio .stp-capture__image {
width: auto;
height: auto;
max-width: 100%;
max-height: var( --stp-stage-h, 55vh );
}
.stp-capture.is-studio .stp-capture__views {
justify-content: center;
}
/*
* The mode pills sit between the dark top bar and the canvas. Centered and
* tightened so they read as a small switch under the chrome rather than as a
* second row of navigation.
*/
.stp-capture.is-studio .stp-capture__capture-modes {
justify-content: center;
padding: var( --stp-gap-sm ) var( --stp-gap-sm ) 0;
}
.stp-capture.is-studio .stp-capture__disclaimer {
text-align: center;
}
/*
* The stage instruction goes SR-ONLY in the studio layout, and stays in the DOM.
*
* It is the target of every stage item's aria-describedby — the keyboard
* contract for moving a decoration is described by this string and nowhere else
* — so it cannot be removed or `hidden`. What it can stop being is a line of
* help text printed under the garment: the card's whole claim is that it looks
* like a product, and the same sentence is one press of Info away for anyone who
* wants it. Quick capture keeps it visible; it has no Info button and its zone
* outlines are its interface.
*/
.stp-capture.is-studio .stp-capture__hint {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
}
/*
* SHORT VIEWPORTS — a phone in landscape, a small laptop, a browser with three
* toolbars open.
*
* The stage was tuned against a portrait phone: 55vh is the garment before the
* modal's own header, the mode pills, the rail and the footer have taken
* anything. Under the height below that collapses — the garment is squeezed to
* a strip. The stage comes down, which leaves the fixed chrome the room it
* needs.
*
* WHERE 760 COMES FROM, and why it is not 620 any more. The inline card sizes
* its stage as `max( 260px, 100svh - --stp-chrome-h )`, so the FLOOR takes over
* — and the chrome starts being squeezed instead of the garment — as soon as
* the viewport drops under `chrome + 260`. The chrome measured at 430x932 was
* ~440 (top bar 52, mode pills 38, rail 66, action-bar footer ~282, borders),
* which put that crossover at ~700 and made 620 an under-estimate even before
* this wave. 0.10.0 then adds a row to the action bar: the warning strip is
* 44px of min-height plus one 8px row-gap, ~52px, call the chrome ~500. 500 +
* 260 = 760, and every viewport from there down is one where the floor is
* holding the garment up while the chrome overflows. 621–760px — the iPhone SE
* class, and a phone in landscape with a toolbar open — was the band that fell
* between the old number and the real one.
*
* The interior values are unchanged: 34vh was tuned against the layout, not
* against the breakpoint, and it stays the stage this block asks for.
*
* The SHEET is not in here any more: it is a percentage of the stage area and
* the customer sizes it themselves (--stp-sheet-size, written by the grip), so
* it follows the stage down without a second number to keep in step.
*
* A custom property rather than a new rule, so this is the same knob a shop
* already overrides, set to a different number at a different height.
*
* TWO SELECTORS, and that is not redundancy. A custom property is resolved by
* INHERITANCE — nearest declaration wins, and specificity only breaks ties
* between declarations on the SAME element. `.stp-capture` is the overlay/embed
* root; the inline card declares --stp-stage-h on `.stp-capture__dialog
* .is-inline`, which is its descendant, so from 0.9.0 until this line the whole
* media query was dead on the primary surface no matter how it was written
* (9th review round, MAJOR 1: measured at 430x600, the dialog was still
* resolving max(260px, 100svh - chrome) while the root said 34vh). The second
* rule is the same knob declared where the card can actually see it, at equal
* specificity and later in source than the block at the top of this file.
*/
@media ( max-height: 760px ) {
.stp-capture {
--stp-stage-h: 34vh;
}
.stp-capture__dialog.is-inline {
--stp-stage-h: 34vh;
}
}
/*
* The accordion column, the note field and the proof choice are LENT to their
* panels — the same nodes, re-parented, never a second copy. All three rules use
* a child combinator on purpose: once the node is inside the sheet its parent is
* different and the rule stops applying to it, with no class to add and remove
* in step with the move.
*/
.stp-capture.is-studio .stp-capture__body > .stp-capture__panel {
display: none;
}
.stp-capture.is-studio .stp-capture__footer > .stp-capture__field--note {
display: none;
}
/*
* ...AND THE PROOF CHOICE JOINS IT (Wave 1).
*
* The studio footer is an ACTION BAR: the price, the quantity, Add to cart, and
* the standing fine print under them. "Email me a proof before production" is
* not fine print and it is not an action — it is a DECISION, and a decision
* belongs with the other decisions, in the review step, next to the note field
* that has been there since the studio layout shipped (openStudioPanel lends
* both). Left in the footer it sat on row 3, below the fold, where a customer
* met it after they had already been offered the button.
*
* Same technique, same reason, same consequence: the child-combinator scopes
* this to the footer, so the field is fully visible the moment the review panel
* takes it, and — see the row map below — a hidden child needs no row.
*/
.stp-capture.is-studio .stp-capture__footer > .stp-capture__field--proof {
display: none;
}
/*
* The fidelity disclaimer, moved into the footer for the length of visual mode
* (studioDisclaimer in capture.js — the same node, re-parented, exactly as the
* note field is).
*
* It says the stage is an approximation drawn from the customer's own screen
* rather than the artwork the shop will run, and SPEC-SCHEMA calls it permanent
* while visual mode is on. On the stage it was not: the lower half of the stage
* is where a panel comes up, so the first sheet a customer opened covered the
* sentence and it stayed covered. The footer is outside .stp-capture__body,
* which is the one region a sheet can never reach.
*
* Its ROW is assigned with the rest of them in the row map below — this rule
* only carries what is true wherever it sits. The row lived here once and
* collided with the price when the price moved onto row 3 (0.8.1), because a
* child-combinator selector quietly outranked the map; one place owns the
* rows now.
*/
.stp-capture.is-studio .stp-capture__footer > .stp-capture__disclaimer {
grid-column: 1 / -1;
margin: 0;
}
/*
* A shorter footer, because the studio spends the modal's height on the garment.
* Higher specificity than the 720px grid below it, so it holds at every width.
*/
.stp-capture.is-studio .stp-capture__footer {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var( --stp-gap-sm ) var( --stp-gap );
padding: 10px var( --stp-gap );
}
/* -------------------------------------------------------------------------
* THE FOOTER ROW MAP — one place, every row, no exceptions.
*
* Rows 1–2 are the ACTION BAR: the estimate over the quantity on the left,
* Add to cart spanning both beside them. That is the whole of the footer that
* has to be on screen with the garment, and the card is sized so the fold
* falls under it (see --stp-stage-h on the inline card).
*
* Rows 3–6 are the epilogue, met by scrolling: the price's scope line, the
* fidelity caveat, the trust line, and — last, where a thumb reaching for the
* button cannot find it — Start over.
*
* THE PROOF CHOICE IS NOT IN THIS MAP ANY MORE (Wave 1) and every row below
* where it used to sit has moved up by one. It is `display: none` in this
* footer, on loan to the review step with the note field (see the rule above
* this block), and a hidden child needs no row — the same answer, for the same
* reason, that the note field has had since 0.9.1. Everything from the price's
* scope line down is one row earlier in BOTH blocks; if it is put back, it
* takes row 3 and they all move down again.
*
* THE WARNING STRIP (0.10.0) SITS ABOVE ALL OF IT, in a second copy of this
* map that takes effect only while the strip is on screen. It is a footer
* child like any other and it has its lines; they are in the `has-warn` block
* below, with the reason it could not simply be numbered row 1 here.
*
* THE FACTS REGION IS A FOOTER CHILD AND IT IS PARKED LAST. It used to be
* built inside `.stp-capture__price` precisely so this grid would never see
* it — it expands to several hundred pixels, and an action bar is the last
* place that should happen. That parenting was a bug: the price block is
* hidden whenever there is no estimate to show, and the warning strip stays up
* through that state, so the region the strip opened was `display: none` and
* `aria-expanded` lied about it. It is a sibling now, and it gets the LAST row
* in both blocks below.
*
* Last, for two reasons that hold together. On this surface the region is
* never open at all — syncFactsControls() closes it on the way into the studio
* and the sheet takes over — so the row is a guarantee rather than a layout.
* And a trailing row assigned to a `display: none` child creates nothing,
* which is what keeps the epilogue exactly the height it was; a row NUMBERED
* in the middle would have created the phantom row this map has already paid
* for once.
*
* The strip's live region (`.stp-capture__sr`) is the one footer child with no
* line, and it needs none: it is absolutely positioned, so it is not a grid
* item and cannot take a row.
*
* EVERY child gets a row here. Two rounds of bugs came out of leaving some to
* auto-placement while others were pinned (the trust strip landing beside the
* checkbox; the disclaimer sharing row 3 with the price and painting over it),
* and both times the selector that actually decided the row was somewhere
* else in this file. If a child is added to the footer, it gets a line here.
*
* THE ROW ORDER IS THE DOM ORDER. A grid can put a child anywhere, so the two
* only agree because they are kept in step deliberately: a screen reader reads
* the footer in DOM order and an eye reads it in row order, and a footer where
* those disagree tells two different stories about which sentence belongs to
* which control. If you add a row here, add the node in the same position in
* buildModal() (capture.js).
*
* THERE IS NO ROW FOR THE NOTE FIELD OR THE PROOF CHOICE, and that is the fix
* rather than an oversight. Both are `display: none` in the studio footer BY
* DESIGN (they are on loan to the review step), so the rows they used to own
* were permanently empty — and an empty grid row still costs its `row-gap`.
* With the price hidden, the trust line untranslated and Start over absent as
* well, that was up to ~32px of unexplained slack in a footer this wave exists
* to shorten (9th review round, MINOR 10). A hidden child needs no row.
* ---------------------------------------------------------------------- */
.stp-capture.is-studio .stp-capture__price {
grid-column: 1;
grid-row: 1;
}
.stp-capture.is-studio .stp-capture__field--qty {
grid-column: 1;
grid-row: 2;
}
.stp-capture.is-studio .stp-capture__submit {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
width: auto;
padding: 12px 20px;
}
.stp-capture.is-studio .stp-capture__footer > .stp-capture__price-note {
grid-column: 1 / -1;
grid-row: 3;
}
.stp-capture.is-studio .stp-capture__footer > .stp-capture__disclaimer {
grid-row: 4;
}
.stp-capture.is-studio .stp-capture__trust {
grid-column: 1 / -1;
grid-row: 5;
}
.stp-capture.is-studio .stp-capture__startover {
grid-column: 1 / -1;
grid-row: 6;
justify-self: center;
}
/* Never open on this surface — see the map's header for why it is last. */
.stp-capture.is-studio .stp-capture__footer > .stp-capture__facts-region {
grid-column: 1 / -1;
grid-row: 7;
}
/* -------------------------------------------------------------------------
* ...AND THE SAME MAP WITH THE WARNING STRIP IN IT.
*
* The strip is hidden whenever the design has nothing to check, which is most
* of the time, so it cannot simply be numbered row 1 with everything shifted
* to 2–8: `grid-row: 2` on the price CREATES row 1 whether or not anything is
* in it, and an empty grid row still costs its `row-gap`. That is precisely
* the defect 0.9.1 removed from this footer (9th review round, MINOR 10 — a
* permanently empty row eating ~8px of garment on a phone), and reintroducing
* it here in exchange for one line of CSS would be a poor trade.
*
* So the map has TWO STATES and capture.js says which: `has-warn` goes on the
* footer for exactly as long as the strip is visible (refreshFacts). The block
* above is the resting layout, byte-for-byte what 0.9.1 shipped; this block is
* the same rows shifted down by one with the strip on top.
*
* IF YOU ADD A FOOTER CHILD IT NEEDS A LINE IN BOTH BLOCKS. That is the price
* of the two states, it is written here so nobody has to discover it, and the
* alternative was a phantom row that this footer has already paid for once.
* ---------------------------------------------------------------------- */
.stp-capture.is-studio .stp-capture__footer.has-warn .stp-capture__warnstrip {
grid-column: 1 / -1;
grid-row: 1;
}
.stp-capture.is-studio .stp-capture__footer.has-warn .stp-capture__price {
grid-row: 2;
}
.stp-capture.is-studio .stp-capture__footer.has-warn .stp-capture__field--qty {
grid-row: 3;
}
.stp-capture.is-studio .stp-capture__footer.has-warn .stp-capture__submit {
grid-row: 2 / span 2;
}
.stp-capture.is-studio .stp-capture__footer.has-warn > .stp-capture__price-note {
grid-row: 4;
}
.stp-capture.is-studio .stp-capture__footer.has-warn > .stp-capture__disclaimer {
grid-row: 5;
}
.stp-capture.is-studio .stp-capture__footer.has-warn .stp-capture__trust {
grid-row: 6;
}
.stp-capture.is-studio .stp-capture__footer.has-warn .stp-capture__startover {
grid-row: 7;
}
.stp-capture.is-studio .stp-capture__footer.has-warn > .stp-capture__facts-region {
grid-row: 8;
}
/* -------------------------------------------------------------------------
* Studio: the icon rail
* ---------------------------------------------------------------------- */
/*
* The tool bar. Dark chrome, large icons, white labels — the frame around the
* garment, matching the top bar above it.
*
* SCROLLS RATHER THAN SHRINKS. The buttons used to divide the width between
* them (`flex: 1 1 0`), which meant a sixth tool, or a locale whose words are
* longer, silently squeezed every label past the point of being readable. At a
* fixed minimum they overflow instead, and the bar scrolls — the same answer
* the reference toolbar gives, and the only one that keeps a label a label.
*
* ...and once it can overflow, `justify-content` has to be `flex-start`.
* `space-around` distributes free space by putting half a share OUTSIDE the
* first and last items — which is fine while everything fits and is a bug the
* moment it does not: in an overflowing scroll container that leading half-share
* becomes negative offset, and the first tool is unreachable in the scroll
* direction. It cannot be scrolled to, because there is nothing before the
* origin to scroll back to. The rail is packed from the start instead, so the
* first tool is where a rail's first tool has always been and the overflow all
* happens at the end, where the scroll can reach it.
*/
.stp-capture__rail {
grid-area: rail;
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 2px;
padding: 4px var( --stp-gap-sm );
overflow-x: auto;
scrollbar-width: thin;
color: var( --stp-chrome-ink );
background: var( --stp-chrome-bg );
border-top: 1px solid var( --stp-light-12 );
}
/*
* THE SCROLL AFFORDANCE. A row of tools that stops flush at the card's edge
* looks like the whole set — nothing about it says a sixth one is a swipe away,
* and on a phone with no visible scrollbar (every phone) the tools past the edge
* were simply not discovered.
*
* A STICKY FLEX ITEM, which is what makes this self-hiding without a line of JS
* or a wrapper element. The pseudo-element is the last item in the flex row, so
* it takes part in the layout rather than covering it; `position: sticky` with
* `right: 0` pins it to the right edge of the SCROLLPORT while the buttons pass
* underneath. The gradient runs to the rail's own background color, so:
*
* nothing to scroll — it sits in flow at the end of the row, painting a fade
* from transparent to the background ON the background.
* Invisible, exactly as it should be.
* more to the right — it is pinned at the edge with buttons under it, and
* those buttons fade out into the card edge.
* scrolled to the end — its flow position IS the right edge, so it is back
* over empty rail and disappears again.
*
* No negative margin, deliberately: it adds its own width to the row instead of
* overlapping the last button, which is why the "nothing to scroll" case can be
* genuinely invisible rather than a permanent smudge on the last label.
*/
.stp-capture__rail::after {
content: "";
position: sticky;
right: 0;
flex: 0 0 28px;
align-self: stretch;
/*
* The transparent end is the chrome color AT ZERO ALPHA, not the
* `transparent` keyword and not a white — either of those drags the ramp
* through a color the bar does not contain (transparent is transparent
* BLACK, and white would gray the middle), which reads as a dirty smear
* rather than a fade.
*
* Written out because a custom property cannot be given an alpha in a
* browser this file still supports (no color-mix, no relative color
* syntax). --stp-chrome-fade is --stp-chrome-bg (#1b2c46) at zero alpha; a
* skin that moves the chrome moves the fade with it.
*/
background: linear-gradient( to right, var( --stp-chrome-fade ), var( --stp-chrome-bg ) );
pointer-events: none;
}
.stp-capture__rail[hidden] {
display: none;
}
.stp-capture__rail-button {
display: flex;
/*
* GROW to share a wide rail, SHRINK no further than the 50px floor. At
* the old fixed 68px the five-tool set plus the 28px fade item overflowed
* the ~315px the inline card actually gives the rail on a 375px phone —
* the fifth tool sat half-clipped under the fade on the most common
* viewport there is, looking cut off rather than scrollable. At the 50px
* floor all five fit that rail (5×50 + 4×2 gap + 24 padding + 28 fade =
* 310 ≤ 315) and still clear the 44px target; a sixth tool overflows and
* the fade affordance takes over, which is what it is for. The narrow
* floor needs the two-line label clamp below, widened to cover every
* phone this floor can occur on.
*/
flex: 1 1 56px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
/* Mobile ship gate: a 44px target, reachable one-handed at the bottom of
* the modal. Wider than that so the (possibly two-line) label fits. */
min-width: 50px;
min-height: 56px;
padding: 6px 6px;
font: inherit;
font-size: 11px;
line-height: 1.15;
text-align: center;
color: var( --stp-light-86 );
background: transparent;
border: 1px solid transparent;
border-radius: var( --stp-radius-lg );
cursor: pointer;
}
.stp-capture__rail-button[hidden] {
display: none;
}
.stp-capture__rail-button:hover {
color: var( --stp-chrome-ink );
background: var( --stp-light-08 );
}
/*
* The open tool. A white wash rather than the accent: the accent belongs to the
* customer's choices on the garment, and a rail button lit in the same color
* as a selected swatch reads as another one of them.
*/
.stp-capture__rail-button.is-on {
color: var( --stp-chrome-ink );
background: var( --stp-light-14 );
border-color: var( --stp-light-42 );
}
.stp-capture__rail-button :focus-visible,
.stp-capture__rail-button:focus-visible {
outline: 2px solid var( --stp-chrome-ink );
outline-offset: -2px;
box-shadow: none;
}
/* Large enough to be read as a picture rather than a mark. */
.stp-capture__rail-icon {
width: 26px;
height: 26px;
}
/*
* The label is visible AND is the accessible name. Five icons a customer meets
* once are five guesses without it, and unlike the seven-wide parity row this
* rail has the width for words.
*/
.stp-capture__rail-label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* PHONES (and any locale whose words are longer than English's).
*
* With the 50px shrink floor above, five rail buttons in a ~315px inline-card
* rail leave about 51px each, and one line of nowrap text in that space
* ellipsises "Add artwork" down to "Add…" — a visible label that has stopped
* being a label. On phone widths the label is allowed two lines instead,
* clamped so a three-word translation cannot grow the rail into the canvas.
* The ellipsis still lands, on the second line, where it costs a word rather
* than the meaning. 719px matches the studio desktop breakpoint, where the
* rail stands up into a column and the squeeze cannot happen.
*/
@media ( max-width: 719.98px ) {
.stp-capture__rail-label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
}
}
/* -------------------------------------------------------------------------
* Studio: the panel (bottom sheet on a phone, left drawer from 720px)
* ---------------------------------------------------------------------- */
.stp-capture__sheet {
/* The SAME grid area as the stage, aligned to its end — so it overlays the
* lower part of the canvas without taking the rail's row away from it. */
grid-area: stage;
align-self: end;
z-index: 20;
display: flex;
flex-direction: column;
width: 100%;
/*
* THE CUSTOMER SETS THIS. capture.js writes --stp-sheet-size from the grip
* (drag, tap to cycle, arrow keys) and remembers the choice for the page.
*
* A LENGTH, not a percentage, and that is load-bearing. The sheet is a grid
* item in the stage's area, and a percentage height against an area whose
* own height is indefinite (this card is a block in a page, not a
* viewport-capped modal) is treated as `auto` while the row is being sized
* — so the row grew to the sheet's CONTENT, which for a 141-swatch thread
* chart is thousands of pixels. Measured on staging: the stage area went to
* 1129px around a 354px garment. A definite length contributes itself and
* nothing else.
*
* `svh` is the viewport with the phone's browser toolbars showing, which is
* the state the customer is actually in; the `vh` line before each is the
* fallback for browsers that do not know `svh`.
*
* The old flat cap (half the stage) was the complaint on a real phone: with
* the stage at 55vh the editor got about a quarter of the screen, which is
* not enough to work a thread chart in.
*
* ABOVE THE GARMENT'S HEIGHT THE STAGE ROW GROWS, and as of 0.9.1 that is
* deliberate. This is a grid item in a `1fr` row of a container with an
* indefinite block size, so the row is sized from its items' max-content
* contributions and a definite length contributes itself: a sheet taller
* than the canvas makes the row — and the card — taller, and shrinks them
* again on close. That is the only way this layout can produce the
* full-screen panel Aramis asked for without going `position: fixed`, which
* lands behind the iOS keyboard (see the 3.7 rejection in
* docs/reviews/2026-08-20-ios-sheet-diagnosis.md). The canvas does NOT move
* while it happens — the row grows by adding empty space below a
* `fit-content` canvas — and capture.js scrolls the grown card back into
* view on open (revealSheet).
*/
height: var( --stp-sheet-size, 58vh );
height: var( --stp-sheet-size, 58svh );
overflow: hidden;
background: var( --stp-surface );
border-radius: var( --stp-radius-lg ) var( --stp-radius-lg ) 0 0;
box-shadow: 0 -6px 24px var( --stp-shade-16 );
/*
* Hidden by VISIBILITY as well as by the attribute: the panel is unhidden a
* frame before it is told to slide, so that the transition has a starting
* state to run from, and without this that frame would show the closed
* sheet sitting over the rail.
*/
visibility: hidden;
transform: translateY( 100% );
transition:
transform 0.24s ease-out,
height 0.18s ease-out;
}
/*
* A height being DRIVEN BY A FINGER is not animated: the panel has to sit under
* the grip, not chase it. capture.js adds this for the length of the drag only.
*/
.stp-capture__sheet.is-resizing {
transition: none;
}
.stp-capture__sheet[hidden] {
display: none;
}
.stp-capture__sheet.is-open {
visibility: visible;
transform: translateY( 0 );
}
.stp-capture__sheet:focus {
outline: none;
}
/* Affordance only — it says the panel came up from the bottom. The close button
* and Escape are the two ways out, and both are real controls. */
/*
* The grip: a real resize control, and sized like one.
*
* The BAR is 40×4; the TARGET is the full width of the sheet and 28px tall,
* because this is the first thing a thumb reaches for when the panel is too
* short and it used to be a 4px decal that did nothing. The bar itself is the
* pseudo-element, so the target can be finger-sized without drawing a
* finger-sized slab across the top of the editor.
*
* `touch-action: none` because the gesture IS the resize — without it the
* browser takes the vertical drag for a page scroll before the first
* pointermove arrives.
*/
.stp-capture__sheet-grip {
position: relative;
flex: 0 0 auto;
width: 100%;
height: 28px;
touch-action: none;
cursor: row-resize;
}
.stp-capture__sheet-grip::before {
content: "";
position: absolute;
top: 10px;
left: 50%;
width: 40px;
height: 4px;
margin-left: -20px;
background: var( --stp-border-strong );
border-radius: 999px;
}
/* Bigger and darker while it is being used, so the bar reads as the thing the
* finger has hold of. */
.stp-capture__sheet-grip:active::before,
.stp-capture__sheet-grip:focus-visible::before {
width: 56px;
margin-left: -28px;
background: var( --stp-ink-muted );
}
.stp-capture__sheet-grip:focus-visible {
outline: 2px solid var( --stp-accent );
outline-offset: -4px;
border-radius: var( --stp-radius-sm );
}
/*
* The desktop drawer is full height already — there is no vertical size to
* choose, and capture.js declines to write one there (isSheetResizable).
*/
@media ( min-width: 720px ) {
.stp-capture__sheet-grip {
display: none;
}
}
.stp-capture__sheet-head {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: var( --stp-gap-sm );
padding: 4px var( --stp-gap ) 8px;
border-bottom: 1px solid var( --stp-border );
}
.stp-capture__sheet-title {
margin: 0;
overflow: hidden;
font-size: 0.9375em;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__sheet-close {
flex: 0 0 auto;
width: 36px;
height: 36px;
padding: 0;
font-size: 22px;
line-height: 1;
color: var( --stp-ink-muted );
background: transparent;
border: 1px solid transparent;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__sheet-close:hover {
color: var( --stp-ink );
border-color: var( --stp-border );
}
/* The panel scrolls INSIDE itself; the stage behind it never moves. */
.stp-capture__sheet-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var( --stp-gap );
}
.stp-capture__sheet-body > .stp-capture__panel {
width: 100%;
}
/*
* A zone's editor body arrives without the section that framed it, so the
* padding and the rule that separated it from its own heading go with the
* frame. The node itself is untouched.
*/
.stp-capture__sheet-body > .stp-capture__editor-body {
padding: 0;
border-top: 0;
}
/* -------------------------------------------------------------------------
* Studio: list panels (Elements, and the "which area?" chooser)
* ---------------------------------------------------------------------- */
.stp-capture__stack {
display: flex;
flex-direction: column;
gap: var( --stp-gap-sm );
}
.stp-capture__empty {
margin: 0;
padding: var( --stp-gap ) 0;
color: var( --stp-ink-muted );
font-size: 0.875em;
text-align: center;
}
.stp-capture__row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 0;
background: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius-lg );
}
/* The row for the decoration the stage has selected — the same state the ring
* on the garment is showing, said twice so the two surfaces agree. */
.stp-capture__row.is-on {
border-color: var( --stp-accent );
}
.stp-capture__row-pick {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: var( --stp-gap-sm );
min-width: 0;
min-height: 44px;
padding: 6px 10px;
font: inherit;
text-align: left;
color: var( --stp-ink );
background: transparent;
border: 0;
border-radius: var( --stp-radius-lg );
cursor: pointer;
}
.stp-capture__row-pick--zone {
width: 100%;
background: var( --stp-surface );
border: 1px solid var( --stp-border );
}
/* At its cap and everything in it decorated. Still openable — editing what is
* there is a reasonable thing to want — but not offered as if it were empty. */
.stp-capture__row-pick--zone.is-full {
opacity: 0.72;
}
.stp-capture__row-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var( --stp-ink-muted );
}
/* The area picker's thumbnail: the garment, with THIS area lit on it.
*
* TWO boxes, and the split is load-bearing.
*
* The TILE is fixed, so four rows put their four labels at the same x. Sizing
* each tile to its own view's aspect (a cap front is 546x540, its back 926x716)
* left the column ragged, which is the opposite of the point.
*
* The FIT is the image's own box, sized by JS (`sizeRowThumb`) to a contain-fit
* inside the tile. The highlight lives in there and NOT in the tile, because
* the zone rect is a percentage OF THE IMAGE: measured against a padded tile it
* would land off the area, subtly and differently for every view.
*
* `object-fit: contain` cannot do this job — it fits the picture but leaves the
* letterbox inside the element, so percentages still resolve against the padded
* box. Nor can the CSS-only `height:100%; width:auto`: that is circular, and
* browsers resolve it by contributing the image's NATURAL width to the
* shrink-to-fit parent. Measured here before it was fixed: 546, 926 and 1000px
* wide tiles inside a 44px row, the overflow merely hidden.
*
* 44px is the row's own min-height, so the picture rides inside the row the
* customer already had rather than making the sheet taller. This list is the
* first thing on a phone and its height is the whole reason it works there.
*
* ⚠ 64 and 44 are `ROW_THUMB_W` and `ROW_THUMB_H` in capture.js. They must
* move together.
*/
.stp-capture__row-thumb {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 64px;
height: 44px;
overflow: hidden;
background: var( --stp-surface-alt );
border-radius: var( --stp-radius-sm );
}
/* Before the image resolves this has no size, and the tile's own background is
* what shows: a tidy blank chip rather than a collapsed sliver. */
.stp-capture__row-thumb-fit {
position: relative;
display: block;
}
.stp-capture__row-thumb-img {
display: block;
width: 100%;
height: 100%;
}
/* Lit, and ringed in the same white the stage rings its zones with.
*
* The stage draws a zone as `2px dashed var( --stp-zone-outline )`. At 44px a
* dashed 2px border is mush, so the patch is filled with the accent and keeps
* the WHITE EDGE — the part of that language that survives the size, and the
* same token, so a shop that recolors its zone outline recolors this too.
*
* box-shadow rather than a border: the ring must not grow the patch. A 1px
* border on each side is two pixels at a size where two pixels is a visible
* lie about where the area sits on the garment.
*/
.stp-capture__row-thumb-zone {
position: absolute;
background: var( --stp-accent );
box-shadow: 0 0 0 1px var( --stp-zone-outline );
opacity: 0.55;
}
@media ( forced-colors: active ) {
/* The wash is a color the mode drops. An outline is the one thing it keeps,
* and at that point the two-pixel growth is the lesser wrong. */
.stp-capture__row-thumb-zone {
background: transparent;
border: 1px solid CanvasText;
box-shadow: none;
opacity: 1;
}
}
.stp-capture__row-text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.stp-capture__row-zone {
overflow: hidden;
font-size: 0.875em;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__row-summary {
overflow: hidden;
color: var( --stp-ink-muted );
font-size: 0.8125em;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__row-summary:empty {
display: none;
}
/* Tabular figures so a column of layer numbers does not jitter at 9 to 10. */
.stp-capture__row-layer {
flex: 0 0 auto;
min-width: 2.5ch;
color: var( --stp-ink-muted );
font-size: 0.75em;
font-variant-numeric: tabular-nums;
text-align: right;
}
.stp-capture__row-acts {
display: flex;
flex: 0 0 auto;
gap: 4px;
}
/* -------------------------------------------------------------------------
* Tablet and up
* ---------------------------------------------------------------------- */
@media ( min-width: 720px ) {
.stp-capture__overlay {
align-items: center;
padding: 24px;
}
.stp-capture__dialog {
max-height: calc( 100vh - 48px );
border-radius: var( --stp-radius );
}
.stp-capture__body {
flex-direction: row;
align-items: flex-start;
}
.stp-capture__stage {
flex: 1 1 45%;
position: sticky;
top: 0;
min-width: 0;
}
.stp-capture__panel {
flex: 1 1 55%;
min-width: 0;
}
.stp-capture__footer {
display: grid;
grid-template-columns: 2fr 1fr;
align-items: end;
}
.stp-capture__field--note {
grid-column: 1 / -1;
}
/*
* The price's scope line, beside the price it qualifies.
*
* This footer is a two-column grid and the note was left to auto-placement
* when 0.9.0 made it a footer child, so it landed wherever the flow had a
* gap — the exact lottery the studio row map exists to prevent (9th review
* round, MINOR 7). Pinned, so it does not depend on which of the optional
* children happen to be present. Studio outranks this with its own row map
* (0-3-0 against 0-1-0), which is where the note belongs on that surface.
*/
.stp-capture__footer > .stp-capture__price-note {
grid-column: 2;
grid-row: 1;
}
.stp-capture__submit {
width: auto;
grid-column: 2;
justify-self: end;
}
/* Opposite corner from "Add to cart", which is the whole point of it. */
.stp-capture__startover {
grid-column: 1;
grid-row: 3;
justify-self: start;
}
/*
* THE FACTS REGION, FULL WIDTH AND LAST — the same placement the studio map
* gives it, for the same reason, but here it is a row that is genuinely
* used: quick capture at desktop width opens the disclosure inline.
*
* Last rather than under the price, because this footer places most of its
* children by auto-placement and only pins three. A row numbered into the
* middle would either collide with whatever the cursor had already put
* there or, when the region is closed and contributes no row of its own,
* leave the gap behind — and a row after the last pinned one costs nothing
* while `display: none` holds. Focus moves into the region when it opens
* (toggleFacts), so it is found whatever it is beside.
*/
.stp-capture__footer > .stp-capture__facts-region {
grid-column: 1 / -1;
grid-row: 4;
}
/*
* THE WARNING STRIP AT DESKTOP WIDTH — the two-state map again, and for
* the same reason: pinned rows here would create a permanently empty row 1
* on every design that has nothing to check.
*
* An explicitly-placed grid item is placed before any auto-placed one
* whatever its `order`, so the strip's pin is what keeps it from colliding
* with the price note, which owns row 1 column 2 in the resting layout.
* The price is pinned alongside it rather than left to auto-placement:
* with row 1 taken by the strip the cursor would otherwise hand the first
* free cell to whichever optional child came next.
*/
.stp-capture__footer.has-warn > .stp-capture__warnstrip {
grid-column: 1 / -1;
grid-row: 1;
}
.stp-capture__footer.has-warn > .stp-capture__price {
grid-column: 1;
grid-row: 2;
}
.stp-capture__footer.has-warn > .stp-capture__price-note {
grid-row: 2;
}
.stp-capture__footer.has-warn > .stp-capture__startover {
grid-row: 4;
}
.stp-capture__footer.has-warn > .stp-capture__facts-region {
grid-row: 5;
}
/* ---------------------------------------------------------------------
* Studio at desktop width: the rail stands up on the left and the panel
* becomes a drawer beside the canvas instead of a sheet under it.
* ------------------------------------------------------------------ */
.stp-capture.is-studio .stp-capture__body {
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
grid-template-areas: "rail stage";
}
/*
* The tool bar stands up into a left column and keeps the dark skin — the
* top bar still spans the card above it, so the two read as one frame around
* the garment rather than as a bar and a sidebar.
*/
.stp-capture.is-studio .stp-capture__rail {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 4px;
/* Wider than it was: 26px icons over a full label. */
width: 94px;
padding: var( --stp-gap-sm );
overflow-x: hidden;
overflow-y: auto;
border-top: 0;
border-right: 1px solid var( --stp-light-12 );
}
/*
* The horizontal scroll affordance goes with the horizontal scroll. The rail
* is a column here and overflows downwards, where the fade would be a 28px
* band across the middle of the last tool — an artefact, not an affordance.
*/
.stp-capture.is-studio .stp-capture__rail::after {
display: none;
}
.stp-capture.is-studio .stp-capture__rail-button {
flex: 0 0 auto;
min-width: 0;
min-height: 66px;
font-size: 11px;
}
/*
* STILL AN OVERLAY. "Beside the canvas" describes where it reads from, not
* a column the canvas gives up: the drawer shares the stage's grid area and
* slides in over it, so the canvas box is the same size open or closed. A
* drawer that took a column would resize the canvas, and every fitted text
* size on the stage is measured against that box.
*/
.stp-capture.is-studio .stp-capture__sheet {
align-self: stretch;
justify-self: start;
width: var( --stp-drawer-w, 320px );
max-width: 100%;
height: auto;
max-height: none;
border-right: 1px solid var( --stp-border );
border-radius: 0;
box-shadow: 6px 0 24px var( --stp-shade-14 );
transform: translateX( -100% );
}
.stp-capture.is-studio .stp-capture__sheet.is-open {
transform: translateX( 0 );
}
/* A drawer does not come up from anywhere, so it has nothing to grip. */
.stp-capture.is-studio .stp-capture__sheet-grip {
display: none;
}
/*
* ...and the grip was carrying the panel's top spacing. On a phone it
* contributes 14px (8px margin, a 4px bar, 2px more) above a head whose own
* top padding is 4px. Hiding it here left the heading 13px from the drawer's
* top edge — and that edge sits flush against the mode-pill row, both
* surfaces white, the drawer's shadow horizontal only, so "Which area?" read
* as tucked up under the pills rather than as the title of the panel below
* them. Measured, not guessed: the gap between the two boxes is 0.
*
* The head takes the spacing back, at the same 16px the drawer already uses
* horizontally, so the heading sits inside a consistent inset instead of
* against the join.
*/
.stp-capture.is-studio .stp-capture__sheet-head {
padding-top: var( --stp-gap );
}
.stp-capture.is-studio .stp-capture__stage {
padding: var( --stp-gap );
}
}
/* -------------------------------------------------------------------------
* Motion + contrast preferences
* ---------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
.stp-capture *,
.stp-capture *::before,
.stp-capture *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/*
* The panel does not slide. With the duration flattened above, a transform
* that still ran would be a jump from off-screen to in-place — the worst of
* both. Dropping the transform entirely leaves the visibility flip, which is
* the panel simply being there: no travel, no motion to sit through.
*/
.stp-capture__sheet {
transform: none !important;
}
/*
* The zone pulse does not run at all. capture.js already declines to add the
* class under this preference — a 1.2s introduction flattened to a
* one-frame flash is worse for the people the setting is for than no
* introduction — and this is the belt to that braces: a class arriving from
* anywhere else still animates nothing.
*
* The zones themselves are unaffected. They are still shown on hover, on
* focus, while a gesture runs and while the Areas panel is open; only the
* unprompted movement is gone.
*/
.stp-capture.is-visual.is-zones-pulse .stp-capture__zone::after {
display: none;
animation: none !important;
}
}
@media ( forced-colors: active ) {
.stp-capture__zone,
.stp-capture__swatch,
.stp-capture__pill,
.stp-capture__tool,
.stp-capture__rail-button,
.stp-capture__sheet,
.stp-capture__row,
.stp-capture__row-pick--zone,
.stp-capture__chrome-button,
.stp-capture__pager-button {
border: 1px solid CanvasText;
}
/*
* Forced colors drop --stp-chrome-bg and --stp-chrome-ink both: the bars
* become Canvas with CanvasText on them, which is right — the dark chrome
* was contrast, and this mode supplies its own. What they lose with it is the
* edge that separated them from the canvas, so it is drawn explicitly.
*/
.stp-capture__topbar,
.stp-capture__rail,
.stp-capture__pager,
.stp-capture__dialog.is-inline {
border: 1px solid CanvasText;
}
.stp-capture__chrome-button.is-on {
outline: 2px solid Highlight;
outline-offset: -1px;
}
/*
* ZONES ARE VISIBLE HERE, and deliberately so. Hiding them at rest is a
* decorative choice made against a photograph; forced colors is a
* declaration that decoration is not what this user is here for, so every
* outline and every label comes back. Nothing about where they are or what
* they do changes.
*
* THE SELECTOR HAS TO MATCH THE HIDING RULE'S, EXACTLY. The bare
* `.stp-capture__zone` in the border block above is one class; the rule that
* paints the outlines out at rest is a PAIR of selectors —
* `.stp-capture.is-visual .stp-capture__zone` (two classes) and
* `.stp-capture.is-visual .stp-capture__zone.is-filled` (three) — and
* specificity is not something a media query changes. So the restore silently
* lost, in the one mode where it mattered, and a forced-colors user in visual
* capture was looking at a garment with no visible targets on it at all:
* `border-color: transparent` is one of the few colors forced colors leaves
* alone.
*
* Both selectors are repeated here rather than just the shorter one, because
* dropping the `.is-filled` half would have left exactly the zones that
* already HAVE a decoration in them invisible — the worst half to lose.
* Matched at the same specificity and placed later in the file, this wins on
* source order, which is where a deliberate override belongs.
*
* Preview is still excepted — `.is-visual.is-preview` is three classes on the
* ancestor and still outranks both of these — because a proof with the
* apparatus drawn back over it is not a proof.
*/
.stp-capture.is-visual .stp-capture__zone,
.stp-capture.is-visual .stp-capture__zone.is-filled {
border: 1px solid CanvasText;
}
.stp-capture.is-visual .stp-capture__zone-label,
.stp-capture.is-visual .stp-capture__zone-count {
opacity: 1;
}
/*
* The rail's scroll fade is a gradient, and a gradient in forced colors is
* either ignored or painted as a flat system color over the tools it was
* meant to hint at. The overflow is still there and still scrollable; this
* mode has its own scrollbars to say so.
*/
.stp-capture__rail::after {
display: none;
}
/*
* Forced colors drop the accent, so the open tool and the selected row are
* told apart by the system highlight — the same substitution the pressed
* parity tool makes below.
*/
.stp-capture__rail-button.is-on,
.stp-capture__row.is-on {
outline: 2px solid Highlight;
outline-offset: -1px;
}
/*
* THE BAR IS THE DECAL; THE GRIP IS THE TARGET.
*
* This rule was written when the grip WAS the 40x4 bar. It is now a
* full-width, 28px-tall hit target with the bar as its ::before, so painting
* the container CanvasText drew a solid slab across the whole top of the
* sheet with the bar invisible inside it (9th review round, MINOR 11). The
* fill belongs on the pseudo-element that is meant to be seen; the target
* stays transparent, exactly as it is outside forced colors.
*/
.stp-capture__sheet-grip {
background: transparent;
}
.stp-capture__sheet-grip::before {
background: CanvasText;
forced-color-adjust: none;
}
/*
* Forced colors drop the accent, so a pressed tool is told apart by its
* border and its system highlight rather than by a fill nobody will see.
*/
.stp-capture__tool[aria-pressed="true"] {
outline: 2px solid Highlight;
outline-offset: 1px;
}
.stp-capture__zone-count {
color: CanvasText;
background: Canvas;
border-color: CanvasText;
forced-color-adjust: none;
}
.stp-capture__swatch.is-on {
outline: 3px solid Highlight;
outline-offset: 1px;
}
/*
* Forced colors drop the accent and the halo both, so the stage
* affordances are redrawn in system colors: the frame in CanvasText, the
* handles filled with Highlight so the two things you can grab are the two
* things that stand out.
*/
.stp-capture__item::before {
border-color: CanvasText;
box-shadow: none;
}
.stp-capture__item:focus-visible::before,
.stp-capture__item.is-selected::before,
.stp-capture__item.is-active::before {
border-color: Highlight;
box-shadow: none;
}
.stp-capture__handle::after {
background: Highlight;
border-color: CanvasText;
forced-color-adjust: none;
}
.stp-capture__handle--rotate::before {
background: CanvasText;
box-shadow: none;
forced-color-adjust: none;
}
}
/* Drawn size (wave 3): the read-only line that replaces the size menu when the
drag decides the size. Same box as a field value so the panel does not jump. */
.stp-capture .stp-capture__size-drawn {
display: block;
padding: 0.5em 0;
font-size: 16px;
line-height: 1.4;
}
.stp-capture .stp-capture__size-drawn[hidden] {
display: none;
}
/* ==========================================================================
* Free placement (template setting `placement: free`, 1.0.0-rc4)
*
* No zone boxes at rest. One transparent button covers the garment; the
* template's zones become soft areas that appear only while a decoration is
* being dragged (.is-free-dragging), the nearest one lit; a vertical centre
* guide shows while the drag is snapped to it; a quiet status line says when
* the selected decoration is outside every usual area. Tokens only.
* ======================================================================= */
.stp-capture__free {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
cursor: crosshair;
-webkit-tap-highlight-color: transparent;
}
.stp-capture__free:focus-visible {
outline: 2px solid var( --stp-focus );
outline-offset: -2px;
}
.stp-capture__area {
position: absolute;
z-index: 2;
pointer-events: none;
background: var( --stp-accent-tint-06 );
border: 1px solid transparent;
border-radius: var( --stp-radius-sm );
opacity: 0;
transition: opacity 0.15s ease;
}
.stp-capture.is-free-dragging .stp-capture__area {
opacity: 1;
}
.stp-capture.is-free-dragging .stp-capture__area.is-near {
background: var( --stp-accent-tint-14 );
border-color: var( --stp-accent );
}
.stp-capture__guide {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 3;
width: 0;
pointer-events: none;
border-left: 1px solid var( --stp-accent );
opacity: 0;
}
.stp-capture.is-free-snapped .stp-capture__guide {
opacity: 0.9;
}
.stp-capture__free-hint {
position: absolute;
top: 8px;
left: 50%;
z-index: 4;
max-width: calc( 100% - 24px );
margin: 0;
padding: 6px 10px;
font-family: var( --stp-font-ui );
font-size: 13px;
line-height: 1.35;
color: var( --stp-ink );
text-align: center;
pointer-events: none;
background: var( --stp-light-95 );
border: 1px solid var( --stp-notice-edge );
border-radius: var( --stp-radius );
box-shadow: var( --stp-shadow );
transform: translateX( -50% );
}
.stp-capture__free-hint[hidden] {
display: none;
}
.stp-capture.is-preview .stp-capture__free,
.stp-capture.is-preview .stp-capture__free-hint {
display: none;
}
@media ( prefers-reduced-motion: reduce ) {
.stp-capture__area {
transition: none;
}
}
/* ==========================================================================
* Gallery presentation (1.0.0-rc4): the designer in the product gallery's slot.
* The gallery element keeps its place in the layout; while it holds the
* designer its own size limits are lifted so the card is never clipped.
* ======================================================================= */
.stp-gallery-swapped {
/* A sticky media column (common in product themes) taller than the window
would pin the designer's top out of reach; the swapped gallery scrolls
with the page instead. */
position: relative !important;
top: auto !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
aspect-ratio: auto !important;
overflow: visible !important;
opacity: 1 !important;
}
.stp-gallery-swapped > :not( .stp-capture-gallery ) {
display: none !important;
}
.stp-capture-gallery {
position: relative;
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.stp-capture-gallery[hidden] {
display: none;
}
.stp-capture__gallery-back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin: 0 0 8px;
padding: 8px 14px;
font-family: var( --stp-font-ui );
font-size: 16px;
line-height: 1.2;
color: var( --stp-ink );
cursor: pointer;
background: var( --stp-surface );
border: 1px solid var( --stp-border-strong );
border-radius: var( --stp-radius );
}
.stp-capture__gallery-back::before {
content: "\2039";
font-size: 20px;
line-height: 1;
}
.stp-capture__gallery-back:focus-visible {
outline: 2px solid var( --stp-focus );
outline-offset: 2px;
}
.stp-capture__thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.stp-capture__thumb {
width: 64px;
height: 64px;
padding: 2px;
cursor: pointer;
background: var( --stp-surface );
border: 2px solid var( --stp-border );
border-radius: var( --stp-radius-sm );
}
.stp-capture__thumb[aria-pressed="true"] {
border-color: var( --stp-accent );
}
.stp-capture__thumb:focus-visible {
outline: 2px solid var( --stp-focus );
outline-offset: 2px;
}
.stp-capture__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.stp-capture-gallery.has-thumbs .stp-capture__pager {
display: none;
}