holding an ("Table call") and an
("Table call") and an
. Under the replication brief the lockup is now a DECORATIVE with
`aria-hidden="true"`, and the heading is a separate visually hidden
duplicate beside it — the original's own shape (home.html:514-530). Not one
visual property changed: the knockout slabs, the ragged widths, the 6px line
gap and the 28px trailing space all come from the rules below, which match on
the class, not the tag. */
.oc-hero-lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-block: 0 28px;
font-size: inherit;
font-weight: inherit;
}
.oc-hero-lockup .oc-hero-line,
.oc-404 .oc-hero-line {
margin: 0;
font-family: var(--oc-font-system);
font-size: clamp(40px, 2rem + 7.2vw, 104px);
font-weight: 800;
line-height: 0.96;
letter-spacing: -0.03em;
text-transform: uppercase;
text-wrap: balance;
}
/* The white card-cutout treatment: each line sits in its own flat white slab,
knocking the type out to the scene background. Sharp corners, no shadow. */
.oc-hero-line--cut {
display: inline-block;
padding: 0.06em 0.16em 0.1em;
border-radius: var(--oc-card-radius);
background-color: var(--oc-ink);
color: var(--oc-bg);
}
.oc-hero-line--open { color: var(--oc-ink); padding-inline: 0.02em; }
/* ==========================================================================
THE HERO SLABS BLEED LEFT INTO THE WHITE FRAME. Added 1.8.5.
Client, verbatim: "the white box should slide in from the left and the white
box touches the white frames."
HOW THE ORIGINAL COMPOSES IT, measured, not inferred. Its headline is an SVG
knockout: a white `` masked by the type (home.html:520-537), and the
rect is placed at `x="0"` of a `0 0 1440 480` viewBox (js:589). The wrap that
carries the SVG is then pulled OUT of the content column:
ordercube_styles.css:396 .headline-wrap { position: relative; left: -3.5rem; }
ordercube_styles.css:397 .headline-cutout{ width: calc(100% - 1.5rem); }
ordercube_styles.css:389 .hero-content { padding: var(--frame); } = 24px
ordercube_styles.css:393 .container { margin-left: 1.5rem; } = 24px
So its slab's left edge lands at 24 + 24 - 56 = -8px: EIGHT PIXELS PAST the
viewport's left edge, running underneath the 24px white frame border
(`.frame { border: var(--frame) solid #fff; z-index: 5 }`, css:32-38). The
frame sits ON TOP of the slab and both are #fff, so the two whites are
continuous and there is no dark seam. That is what "touches the white frames"
means — it underlaps, it does not merely abut. Its knockout text still starts
at viewBox x=20, i.e. ~11px in, so the LETTERS never reach the frame.
WHAT THIS THEME HAD. The slab is a padded inline-block, not an SVG rect, and
it sat at the content edge of `.oc-scene > .oc-hero__inner`, which is
`max-inline-size: var(--oc-grid-max)` (1280px) centred with
`padding-inline: var(--oc-gutter)`. MEASURED at 1440: (1440-1280)/2 + 24 =
104px, against a frame inner edge at 24px — an 80px dark gap, exactly as
reported.
THE FIX reproduces the RELATIONSHIP rather than the -3.5rem, because -3.5rem
is only correct for the original's own container chain. `--oc-hero-bleed` is
the distance from the slab's left edge back to 8px past the viewport edge,
written in terms of the chain that actually places it:
centring gutter max(0px, (100vw - grid-max) / 2)
column padding var(--oc-gutter)
overshoot 8px <- the original's own measured -8px landing
The lockup takes that as a negative inline-start margin so the slab moves
left, and the slab takes the SAME amount back as inline-start padding so the
TYPE does not move with it. Only the white extends. That resolves to a left
edge of -8px at every breakpoint — 1440, 1024 and 390 alike — which is the
original's number at all three.
`100vw` is safe here: `body` is `overflow: hidden` on the one-pager
(.oc-onepage-shell), so there is no scrollbar for 100vw to disagree with.
The slab's RIGHT edge does not move: it gains `bleed` of left padding while
its box starts `bleed` further left, so its width grows and its right edge
stays put. That is why this cannot introduce right-side overflow.
========================================================================== */
.oc-hero .oc-hero-lockup {
--oc-hero-bleed: calc(
max(0px, (100vw - var(--oc-grid-max)) / 2) + var(--oc-gutter) + 8px
);
margin-inline-start: calc(-1 * var(--oc-hero-bleed));
}
.oc-hero .oc-hero-lockup .oc-hero-line--cut {
/* The bleed, plus the 0.16em the shorthand above already set. */
padding-inline-start: calc(var(--oc-hero-bleed) + 0.16em);
}
/* --- and they slide in from the left on lock-in -------------------------
MEASURED on the original, which drives this from JS on its hero entry:
ordercube_script.js:2604 // "Slide white SVG rectangles from left to
// right (no fade)"
ordercube_script.js:2615 r1 -> 'slideInFromLeftSVG 0.8s ease forwards'
ordercube_script.js:2621 r2 -> 'slideInFromLeftSVG 0.8s ease 0.1s forwards'
ordercube_styles.css:3796 @keyframes slideInFromLeftSVG
from { translateX(-110%) } to { translateX(0) }
ordercube_styles.css:3815 #r1,#r2 { transform: translateX(-110%) }
So: 800ms, `ease`, no fade, and the second slab is 0.1s behind the first.
NOTE the stagger is the original's 0.1s, NOT the 0.2s + 0.08s/item of the
generic reveal — js:2621 states it outright for these two elements, and the
generic figure (js:3526) belongs to the impact cards.
The trigger is the reveal layer already wired and verified: motion.js adds
`.is-revealed` on `oc:section-enter`, which scroll.js dispatches
SETTLE_DELAY_MS (100ms) after the hero settles. So this fires on lock-in,
never on a scroll threshold.
The lockup itself opts OUT of the generic reveal. That reveal fades from
`opacity: 0` and slides from `translateX(20px)` — the wrong direction and a
fade the original explicitly does not do ("no fade", js:2604). Taking the
wrapper out of it also stops the two transforms from composing. */
html.oc-js [data-oc-reveal] > .oc-hero-lockup,
html.oc-js [data-oc-reveal].is-revealed > .oc-hero-lockup {
opacity: 1;
transform: none;
transition: none;
}
html.oc-js .oc-hero .oc-hero-lockup .oc-hero-line--cut {
transform: translateX(-110%); /* ordercube_styles.css:3815 */
}
html.oc-js [data-oc-reveal].is-revealed .oc-hero-lockup .oc-hero-line--cut {
animation: ocHeroSlabIn var(--oc-dur-hero-slab) ease forwards;
}
/* js:2621 — the second slab trails the first by 0.1s. */
html.oc-js [data-oc-reveal].is-revealed .oc-hero-lockup .oc-hero-line--cut:nth-child(2) {
animation-delay: 0.1s;
}
@keyframes ocHeroSlabIn {
from { transform: translateX(-110%); }
to { transform: translateX(0); }
}
/* REDUCED MOTION: end state, never the start state.
Scoped to these two slabs on purpose. assets/js/motion.js pins its
`reduced` flag to FALSE as a deliberate replication decision (the original
has zero `prefers-reduced-motion` anywhere), and that standing call is not
mine to reverse from inside a hero fix. What IS mine is the animation added
here: a reader who asked for less motion gets the slab at rest, in place and
opaque, with no slide and no chance of being left off-frame at -110%. */
/* REDUCED MOTION, background video. CSS cannot stop `autoplay`, so
assets/js/motion.js does the actual gating; this is the visual half, and it
is what guarantees a still even if the script never runs. `object-fit` keeps
the poster framed exactly as the video was. Scoped to these two elements:
motion.js pins its own `reduced` flag to false as a standing replication
decision and that is not reversed here. */
@media (prefers-reduced-motion: reduce) {
.oc-scene__media-video {
/* Chrome paints `poster` only until the first frame is decoded; with
playback never started that is the whole time. */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
}
@media (prefers-reduced-motion: reduce) {
html.oc-js .oc-hero .oc-hero-lockup .oc-hero-line--cut,
html.oc-js [data-oc-reveal].is-revealed .oc-hero-lockup .oc-hero-line--cut {
transform: none;
animation: none;
opacity: 1;
}
}
.oc-hero__cues {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
margin-block-start: 32px;
}
.oc-hero__scroll-cue {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--oc-ink-muted);
font-family: var(--oc-font-arial);
font-size: var(--oc-fs-button);
font-weight: 300;
letter-spacing: 0.56px;
text-transform: uppercase;
text-decoration: none;
}
.oc-hero__trust {
display: flex;
flex-direction: column;
gap: 12px;
}
.oc-hero__trust .oc-marks {
flex-direction: column;
}
/* Mobile: the 5 trust marks become a horizontal 3-up scroll strip under the
headline instead of a right-hand column (spec, scene 1 "Mobile"). */
@media (max-width: 1023px) {
.oc-hero__trust .oc-marks {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-block-end: 8px;
}
.oc-hero__trust .oc-marks__item {
flex: 0 0 auto;
inline-size: calc((100% - 32px) / 3);
min-inline-size: 104px;
scroll-snap-align: start;
}
}
/* ==========================================================================
7. Scene 2 — SCENARIOS (5-slide problem storytelling)
Full-bleed media panel + bottom-left dark scrim + white caption card +
right-aligned vertical list of 5 selector chips.
========================================================================== */
/* [DEFECT 1 FIX] .oc-scene is `display:flex; flex-direction:row`, so a scene with
TWO element children splits the row between them. Every other scene avoids this
by giving the section exactly ONE child — a 1-column grid that gains columns at
>=1024px (.oc-hero__inner, .oc-features__inner). Scenarios emitted the stage and
the cues row as two siblings, so at 390px they sat side by side (188px / 190px).
This wrapper applies the same established mechanism: one grid child, one column
below 1024px, so the scene stacks instead of splitting. */
.oc-scenarios__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
inline-size: 100%;
}
/* [DEFECT 1 FIX] Scenarios no longer borrows the hero's .oc-hero__cues. It owns its
own class so the two scenes cannot drift into each other; the margin the hero
needs (it sits in flow) is dropped here because the grid `gap` already spaces it. */
.oc-scenarios__cues {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
.oc-scenarios__stage {
position: relative;
inline-size: 100%;
min-block-size: min(72vh, 620px);
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
overflow: hidden;
}
.oc-scenarios__stage::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to top right, rgba(14, 15, 19, 0.92) 0%, rgba(14, 15, 19, 0.45) 42%, rgba(14, 15, 19, 0) 72%);
pointer-events: none;
}
.oc-scenarios__stage > .oc-media {
position: absolute;
inset: 0;
aspect-ratio: auto;
z-index: -1;
}
.oc-scenarios__layer {
/* [DEFECT 1 FIX] content-box + `inline-size:100%` + 24px padding each side made
this 48px WIDER than its grid area (measured 236px inside a 188px parent), which
is what the stage's overflow:hidden was clipping. border-box makes the declared
100% include the padding. */
box-sizing: border-box;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 24px;
inline-size: 100%;
}
@media (min-width: 1024px) {
.oc-scenarios__layer {
grid-template-columns: minmax(0, 420px) minmax(0, 1fr) minmax(0, 260px);
align-items: end;
}
.oc-scenarios__spacer { display: block; }
}
.oc-scenarios__caption {
/* [DEFECT 1 FIX] Same defect class as .oc-scenarios__layer: the <=1023px rule
below sets `inline-size:100%`, and under content-box the 24px padding was
added ON TOP of that 100%, pushing the card 48px past its grid area (measured
362px inside a 314px column, 24px of it clipped to the right by the stage's
overflow:hidden). border-box makes the 100% inclusive. */
box-sizing: border-box;
background-color: var(--oc-ink);
color: var(--oc-black);
border-radius: var(--oc-card-radius);
box-shadow: none;
padding: 24px;
}
.oc-scenarios__caption p { color: var(--oc-black); max-inline-size: 42ch; }
.oc-chips {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.oc-chips a {
display: inline-flex;
align-items: center;
gap: 10px;
min-block-size: 44px; /* [DEFECT 6 FIX] WCAG 2.5.8 target size */
padding: 12px 14px;
border-radius: var(--oc-pill);
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
color: var(--oc-ink);
text-decoration: none;
font-family: var(--oc-font-arial);
font-size: var(--oc-fs-button);
font-weight: 300;
letter-spacing: 0.56px;
text-transform: uppercase;
white-space: nowrap;
}
.oc-chips .is-active a {
background-image: var(--oc-accent-aa);
/* [A11Y-2026-10-03] tracks --oc-accent-aa-end for the same reason as the CTA. */
background-color: var(--oc-accent-aa-end);
}
.oc-chips__swatch {
inline-size: 22px;
block-size: 22px;
border-radius: var(--oc-pill);
background-image: var(--oc-accent);
flex: 0 0 auto;
}
/* Mobile: the 5-tab vertical list collapses to an "n / 5" counter + one active
chip, placed top-right of the media panel (spec, scene 2 "Mobile"). */
.oc-scenarios__counter {
position: absolute;
inset-block-start: 16px;
inset-inline-end: 16px;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
}
@media (min-width: 1024px) {
.oc-scenarios__counter { display: none; }
}
@media (max-width: 1023px) {
.oc-chips { display: none; }
.oc-scenarios__caption { inline-size: 100%; }
}
/* ==========================================================================
8. Scene 3 — FEATURES (6 features, studio render centre)
3-part row: left feature list / centre render / right quote + paragraph.
Background: neutral gray radial gradient, no photography.
========================================================================== */
.oc-features {
background-color: #3c3c42;
/* [A11Y-2026-10-03] INVENTED DECORATION REMOVED, and it was also the cause of two
P0 contrast failures. ORIGINAL'S CORRESPONDING COUNT: ZERO — the original's
features section is a FLAT fill, `#features { background: #dddddd }`
(harvest/ordercube_styles.css:242-245). The word "radial" in the original's own
comment there refers to the JS-injected scrim, which this theme already
reproduces faithfully at `.oc-features .oc-scene__scrim` (see
harvest/ordercube_script.js:2391) — not to any section background.
WHY IT WAS ALSO A CONTRAST BUG: the radial's 0% stop is #6e6e76 (L=0.157750),
a LIGHT centre under light text, which is the surface the detector resolved:
.oc-quote #B89B83 on #6e6e76 1.962:1 FAIL (28px large, bar 3.0)
.oc-features__copy ink-dim on #6e6e76 4.2:1 FAIL (18px normal, bar 4.5)
On the flat #3c3c42 that the removal exposes:
.oc-quote #B89B83 on #3c3c42 4.201:1 PASS
.oc-features__copy rgba(255,255,255,0.85) composites to #E2E2E3 8.461:1 PASS
NOTE the direction: the original is LIGHTER than this theme here, not darker.
Restoring #dddddd is a full re-valuing of the scene (every text colour in it
inverts) and is NOT done in this pass — logged as an open replication gap. */
}
.oc-features__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
inline-size: 100%;
}
/* [DEFECT 4 FIX] The measured track set was 260 / 624 / 300 with a 48px gap. At
22px/400 the 300px copy column held ~29 characters per line — roughly half the
45-75 cpl readability band, so the paragraph read as a ragged ribbon. The copy
column is widened to 424px and the render column gives up the difference
(1280 - 240 - 424 - 96 = 520). Combined with the 18px/1.6 body below this is
~48 cpl. The list column loses 20px, which it has: its longest label
("Pay at table", 14px uppercase) measures well under 240px minus its chrome. */
@media (min-width: 1024px) {
.oc-features__inner {
grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 424px);
align-items: center;
gap: 48px;
}
}
.oc-features__list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.oc-features__list a {
display: flex;
align-items: center;
gap: 12px;
min-block-size: 44px; /* [DEFECT 6 FIX] WCAG 2.5.8 target size */
padding: 12px 14px;
border-radius: var(--oc-pill);
color: var(--oc-ink);
text-decoration: none;
font-family: var(--oc-font-arial);
font-size: var(--oc-fs-button);
font-weight: 300;
letter-spacing: 0.56px;
text-transform: uppercase;
}
.oc-features__list .is-active a {
background-color: rgba(0, 0, 0, 0.5);
}
.oc-features__icon {
inline-size: 22px;
block-size: 22px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
/* Mobile: the left list becomes a horizontal icon strip above the render. */
@media (max-width: 1023px) {
.oc-features__list {
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
padding-block-end: 8px;
}
.oc-features__list li { flex: 0 0 auto; }
}
/* [DEFECT 4 FIX] 22px body in a narrow column is what produced the 29 cpl. The
body drops to 18px/1.6 — the `card` step of the measured scale, not an
invented size — which is what takes the widened 424px column to ~48 cpl. */
.oc-features__copy p {
margin: 0;
color: var(--oc-ink-dim);
font-size: var(--oc-fs-card);
line-height: 1.6;
}
/* [DEFECT 3 FIX] 22px/400 is NORMAL text => 4.5:1. The measured accent-start
#B89B83 over this scene's radial gradient ran 3.16:1 (worst, the quote box's
top-left) to 4.73:1 (bottom-right) — failing across most of its extent. The
`accent-tint` token is the same bronze hue (27deg) and saturation, lightened to
relative luminance 0.5899, which puts the WORST point at 5.02:1. Scoped to this
scene only; the contact-scene .oc-quote sits on flat #0E0F13 and already passes. */
/* [DEFECT 4 FIX] With the body at 18px the pull-quote at 22px no longer read as
a separate register — the two blocks merged. 28px/1.25 italic restores the
contrast (1.56x the body size) without touching the measured colour decision
in deviation 22: `accent-tint` was computed for LARGE text here only after it
was computed to pass at 22px NORMAL text, so raising the size only loosens the
bar it already clears (5.02:1 at the worst point vs the 3.0:1 large-text
floor). */
.oc-features__copy .oc-quote {
display: block;
margin-block-end: 16px;
font-size: 28px;
line-height: 1.25;
font-style: italic;
color: var(--oc-accent-tint);
}
/* ==========================================================================
9. Scene 4 — REFERENCES (black band over white 3-col band)
========================================================================== */
.oc-references { display: block; padding-block: 0; }
.oc-references__top {
background-color: var(--oc-bg);
min-block-size: 45vh;
display: flex;
align-items: center;
padding-block: calc(var(--oc-header-h) + 24px) 32px;
}
.oc-references__top-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
inline-size: 100%;
}
.oc-dots {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
/* [DEFECT 6 FIX] The dot STAYS 10px visually; the target grows to 24x24 by
painting the dot with a background-image on a transparent 24px box, so the
measured indicator size is unchanged and the hit area clears WCAG 2.5.8. */
.oc-dots button {
inline-size: 24px;
block-size: 24px;
padding: 0;
border: 0;
border-radius: var(--oc-pill);
background-color: transparent;
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35) 0 5px, transparent 5px);
cursor: pointer;
}
.oc-dots .is-active button {
background-color: transparent;
background-image: radial-gradient(circle at 50% 50%, var(--oc-ink) 0 5px, transparent 5px);
}
.oc-references__band {
background-color: var(--oc-ink);
color: var(--oc-black);
min-block-size: 55vh;
display: flex;
align-items: stretch;
}
.oc-references__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
inline-size: 100%;
align-items: stretch;
}
@media (min-width: 1024px) {
.oc-references__grid {
grid-template-columns: 40% 20% 40%;
}
}
.oc-references__photo { position: relative; }
.oc-references__photo .oc-media { block-size: 100%; aspect-ratio: 4 / 3; }
.oc-references__photo .oc-icon-btn {
position: absolute;
inset-block-end: 12px;
inset-inline-end: 12px;
}
.oc-references__logo {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background-color: #ece7e1;
}
.oc-references__quote {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 32px 24px;
margin: 0;
}
.oc-references__quote blockquote {
margin: 0;
border: 0;
padding: 0;
font-style: italic;
font-size: var(--oc-fs-body);
color: var(--oc-black);
}
.oc-references__attrib {
margin: 0;
font-size: var(--oc-fs-link);
line-height: 1.5;
color: var(--oc-gray-600);
}
.oc-references__arrows { display: flex; gap: 8px; }
/* ==========================================================================
10. Scene 5 — IMPACT (ROI calculator)
near-black + warm bronze radial glow from right-of-centre.
========================================================================== */
.oc-impact {
background-color: var(--oc-bg);
/* [A11Y-2026-10-03] INVENTED DECORATION REMOVED — this was the detector's 5th
`radial-spotlight-glow` ("impact", #b89b83 a0.28 -> transparent) and the cause of
FOUR P0 contrast failures. ORIGINAL'S CORRESPONDING COUNT: ZERO. The original's
impact section background is a real PHOTOGRAPH,
`
` (harvest/home.html:1179-1182); the
section itself gets only `overflow-x: visible`
(harvest/ordercube_styles.css:5428-5430) and no background declaration at all.
The `scene-glow` preset is removed from theme.json in the same change — the
var() here is the FALLBACK, so deleting only the fallback would have changed
nothing.
WHAT IT COST IN CONTRAST (the glow resolves to a light accent haze under light
text; after removal the surface is the flat --oc-bg #0E0F13, L=0.004821):
.oc-impact__title #FFFFFF 2.6:1 -> 19.153:1 PASS
.oc-calc__title #FFFFFF 2.6:1 -> 19.153:1 PASS
.oc-calc__disclaimer ink-muted 0.6 1.8:1 -> 7.24:1 PASS (measured composited)
.oc-impact__note ink-muted 0.6 1.8:1 -> 7.24:1 PASS (measured composited) */
}
.oc-calc {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
inline-size: 100%;
}
@media (min-width: 1024px) {
.oc-calc { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
}
.oc-calc__title { margin: 0 0 24px; max-inline-size: 22ch; }
.oc-calc__controls {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
border: 0;
}
/* [A11Y-2026-10-03] The 1.0:1 finding — INVISIBLE TEXT, the same colour as its
background. The
with
`aria-hidden="true"`, and the heading is a separate visually hidden
duplicate beside it — the original's own shape (home.html:514-530). Not one
visual property changed: the knockout slabs, the ragged widths, the 6px line
gap and the 28px trailing space all come from the rules below, which match on
the class, not the tag. */
.oc-hero-lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-block: 0 28px;
font-size: inherit;
font-weight: inherit;
}
.oc-hero-lockup .oc-hero-line,
.oc-404 .oc-hero-line {
margin: 0;
font-family: var(--oc-font-system);
font-size: clamp(40px, 2rem + 7.2vw, 104px);
font-weight: 800;
line-height: 0.96;
letter-spacing: -0.03em;
text-transform: uppercase;
text-wrap: balance;
}
/* The white card-cutout treatment: each line sits in its own flat white slab,
knocking the type out to the scene background. Sharp corners, no shadow. */
.oc-hero-line--cut {
display: inline-block;
padding: 0.06em 0.16em 0.1em;
border-radius: var(--oc-card-radius);
background-color: var(--oc-ink);
color: var(--oc-bg);
}
.oc-hero-line--open { color: var(--oc-ink); padding-inline: 0.02em; }
/* ==========================================================================
THE HERO SLABS BLEED LEFT INTO THE WHITE FRAME. Added 1.8.5.
Client, verbatim: "the white box should slide in from the left and the white
box touches the white frames."
HOW THE ORIGINAL COMPOSES IT, measured, not inferred. Its headline is an SVG
knockout: a white `
duplicate beside it — the original's own shape (home.html:514-530). Not one
visual property changed: the knockout slabs, the ragged widths, the 6px line
gap and the 28px trailing space all come from the rules below, which match on
the class, not the tag. */
.oc-hero-lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-block: 0 28px;
font-size: inherit;
font-weight: inherit;
}
.oc-hero-lockup .oc-hero-line,
.oc-404 .oc-hero-line {
margin: 0;
font-family: var(--oc-font-system);
font-size: clamp(40px, 2rem + 7.2vw, 104px);
font-weight: 800;
line-height: 0.96;
letter-spacing: -0.03em;
text-transform: uppercase;
text-wrap: balance;
}
/* The white card-cutout treatment: each line sits in its own flat white slab,
knocking the type out to the scene background. Sharp corners, no shadow. */
.oc-hero-line--cut {
display: inline-block;
padding: 0.06em 0.16em 0.1em;
border-radius: var(--oc-card-radius);
background-color: var(--oc-ink);
color: var(--oc-bg);
}
.oc-hero-line--open { color: var(--oc-ink); padding-inline: 0.02em; }
/* ==========================================================================
THE HERO SLABS BLEED LEFT INTO THE WHITE FRAME. Added 1.8.5.
Client, verbatim: "the white box should slide in from the left and the white
box touches the white frames."
HOW THE ORIGINAL COMPOSES IT, measured, not inferred. Its headline is an SVG
knockout: a white `` masked by the type (home.html:520-537), and the
rect is placed at `x="0"` of a `0 0 1440 480` viewBox (js:589). The wrap that
carries the SVG is then pulled OUT of the content column:
ordercube_styles.css:396 .headline-wrap { position: relative; left: -3.5rem; }
ordercube_styles.css:397 .headline-cutout{ width: calc(100% - 1.5rem); }
ordercube_styles.css:389 .hero-content { padding: var(--frame); } = 24px
ordercube_styles.css:393 .container { margin-left: 1.5rem; } = 24px
So its slab's left edge lands at 24 + 24 - 56 = -8px: EIGHT PIXELS PAST the
viewport's left edge, running underneath the 24px white frame border
(`.frame { border: var(--frame) solid #fff; z-index: 5 }`, css:32-38). The
frame sits ON TOP of the slab and both are #fff, so the two whites are
continuous and there is no dark seam. That is what "touches the white frames"
means — it underlaps, it does not merely abut. Its knockout text still starts
at viewBox x=20, i.e. ~11px in, so the LETTERS never reach the frame.
WHAT THIS THEME HAD. The slab is a padded inline-block, not an SVG rect, and
it sat at the content edge of `.oc-scene > .oc-hero__inner`, which is
`max-inline-size: var(--oc-grid-max)` (1280px) centred with
`padding-inline: var(--oc-gutter)`. MEASURED at 1440: (1440-1280)/2 + 24 =
104px, against a frame inner edge at 24px — an 80px dark gap, exactly as
reported.
THE FIX reproduces the RELATIONSHIP rather than the -3.5rem, because -3.5rem
is only correct for the original's own container chain. `--oc-hero-bleed` is
the distance from the slab's left edge back to 8px past the viewport edge,
written in terms of the chain that actually places it:
centring gutter max(0px, (100vw - grid-max) / 2)
column padding var(--oc-gutter)
overshoot 8px <- the original's own measured -8px landing
The lockup takes that as a negative inline-start margin so the slab moves
left, and the slab takes the SAME amount back as inline-start padding so the
TYPE does not move with it. Only the white extends. That resolves to a left
edge of -8px at every breakpoint — 1440, 1024 and 390 alike — which is the
original's number at all three.
`100vw` is safe here: `body` is `overflow: hidden` on the one-pager
(.oc-onepage-shell), so there is no scrollbar for 100vw to disagree with.
The slab's RIGHT edge does not move: it gains `bleed` of left padding while
its box starts `bleed` further left, so its width grows and its right edge
stays put. That is why this cannot introduce right-side overflow.
========================================================================== */
.oc-hero .oc-hero-lockup {
--oc-hero-bleed: calc(
max(0px, (100vw - var(--oc-grid-max)) / 2) + var(--oc-gutter) + 8px
);
margin-inline-start: calc(-1 * var(--oc-hero-bleed));
}
.oc-hero .oc-hero-lockup .oc-hero-line--cut {
/* The bleed, plus the 0.16em the shorthand above already set. */
padding-inline-start: calc(var(--oc-hero-bleed) + 0.16em);
}
/* --- and they slide in from the left on lock-in -------------------------
MEASURED on the original, which drives this from JS on its hero entry:
ordercube_script.js:2604 // "Slide white SVG rectangles from left to
// right (no fade)"
ordercube_script.js:2615 r1 -> 'slideInFromLeftSVG 0.8s ease forwards'
ordercube_script.js:2621 r2 -> 'slideInFromLeftSVG 0.8s ease 0.1s forwards'
ordercube_styles.css:3796 @keyframes slideInFromLeftSVG
from { translateX(-110%) } to { translateX(0) }
ordercube_styles.css:3815 #r1,#r2 { transform: translateX(-110%) }
So: 800ms, `ease`, no fade, and the second slab is 0.1s behind the first.
NOTE the stagger is the original's 0.1s, NOT the 0.2s + 0.08s/item of the
generic reveal — js:2621 states it outright for these two elements, and the
generic figure (js:3526) belongs to the impact cards.
The trigger is the reveal layer already wired and verified: motion.js adds
`.is-revealed` on `oc:section-enter`, which scroll.js dispatches
SETTLE_DELAY_MS (100ms) after the hero settles. So this fires on lock-in,
never on a scroll threshold.
The lockup itself opts OUT of the generic reveal. That reveal fades from
`opacity: 0` and slides from `translateX(20px)` — the wrong direction and a
fade the original explicitly does not do ("no fade", js:2604). Taking the
wrapper out of it also stops the two transforms from composing. */
html.oc-js [data-oc-reveal] > .oc-hero-lockup,
html.oc-js [data-oc-reveal].is-revealed > .oc-hero-lockup {
opacity: 1;
transform: none;
transition: none;
}
html.oc-js .oc-hero .oc-hero-lockup .oc-hero-line--cut {
transform: translateX(-110%); /* ordercube_styles.css:3815 */
}
html.oc-js [data-oc-reveal].is-revealed .oc-hero-lockup .oc-hero-line--cut {
animation: ocHeroSlabIn var(--oc-dur-hero-slab) ease forwards;
}
/* js:2621 — the second slab trails the first by 0.1s. */
html.oc-js [data-oc-reveal].is-revealed .oc-hero-lockup .oc-hero-line--cut:nth-child(2) {
animation-delay: 0.1s;
}
@keyframes ocHeroSlabIn {
from { transform: translateX(-110%); }
to { transform: translateX(0); }
}
/* REDUCED MOTION: end state, never the start state.
Scoped to these two slabs on purpose. assets/js/motion.js pins its
`reduced` flag to FALSE as a deliberate replication decision (the original
has zero `prefers-reduced-motion` anywhere), and that standing call is not
mine to reverse from inside a hero fix. What IS mine is the animation added
here: a reader who asked for less motion gets the slab at rest, in place and
opaque, with no slide and no chance of being left off-frame at -110%. */
/* REDUCED MOTION, background video. CSS cannot stop `autoplay`, so
assets/js/motion.js does the actual gating; this is the visual half, and it
is what guarantees a still even if the script never runs. `object-fit` keeps
the poster framed exactly as the video was. Scoped to these two elements:
motion.js pins its own `reduced` flag to false as a standing replication
decision and that is not reversed here. */
@media (prefers-reduced-motion: reduce) {
.oc-scene__media-video {
/* Chrome paints `poster` only until the first frame is decoded; with
playback never started that is the whole time. */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
}
@media (prefers-reduced-motion: reduce) {
html.oc-js .oc-hero .oc-hero-lockup .oc-hero-line--cut,
html.oc-js [data-oc-reveal].is-revealed .oc-hero-lockup .oc-hero-line--cut {
transform: none;
animation: none;
opacity: 1;
}
}
.oc-hero__cues {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
margin-block-start: 32px;
}
.oc-hero__scroll-cue {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--oc-ink-muted);
font-family: var(--oc-font-arial);
font-size: var(--oc-fs-button);
font-weight: 300;
letter-spacing: 0.56px;
text-transform: uppercase;
text-decoration: none;
}
.oc-hero__trust {
display: flex;
flex-direction: column;
gap: 12px;
}
.oc-hero__trust .oc-marks {
flex-direction: column;
}
/* Mobile: the 5 trust marks become a horizontal 3-up scroll strip under the
headline instead of a right-hand column (spec, scene 1 "Mobile"). */
@media (max-width: 1023px) {
.oc-hero__trust .oc-marks {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-block-end: 8px;
}
.oc-hero__trust .oc-marks__item {
flex: 0 0 auto;
inline-size: calc((100% - 32px) / 3);
min-inline-size: 104px;
scroll-snap-align: start;
}
}
/* ==========================================================================
7. Scene 2 — SCENARIOS (5-slide problem storytelling)
Full-bleed media panel + bottom-left dark scrim + white caption card +
right-aligned vertical list of 5 selector chips.
========================================================================== */
/* [DEFECT 1 FIX] .oc-scene is `display:flex; flex-direction:row`, so a scene with
TWO element children splits the row between them. Every other scene avoids this
by giving the section exactly ONE child — a 1-column grid that gains columns at
>=1024px (.oc-hero__inner, .oc-features__inner). Scenarios emitted the stage and
the cues row as two siblings, so at 390px they sat side by side (188px / 190px).
This wrapper applies the same established mechanism: one grid child, one column
below 1024px, so the scene stacks instead of splitting. */
.oc-scenarios__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
inline-size: 100%;
}
/* [DEFECT 1 FIX] Scenarios no longer borrows the hero's .oc-hero__cues. It owns its
own class so the two scenes cannot drift into each other; the margin the hero
needs (it sits in flow) is dropped here because the grid `gap` already spaces it. */
.oc-scenarios__cues {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
.oc-scenarios__stage {
position: relative;
inline-size: 100%;
min-block-size: min(72vh, 620px);
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
overflow: hidden;
}
.oc-scenarios__stage::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to top right, rgba(14, 15, 19, 0.92) 0%, rgba(14, 15, 19, 0.45) 42%, rgba(14, 15, 19, 0) 72%);
pointer-events: none;
}
.oc-scenarios__stage > .oc-media {
position: absolute;
inset: 0;
aspect-ratio: auto;
z-index: -1;
}
.oc-scenarios__layer {
/* [DEFECT 1 FIX] content-box + `inline-size:100%` + 24px padding each side made
this 48px WIDER than its grid area (measured 236px inside a 188px parent), which
is what the stage's overflow:hidden was clipping. border-box makes the declared
100% include the padding. */
box-sizing: border-box;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 24px;
inline-size: 100%;
}
@media (min-width: 1024px) {
.oc-scenarios__layer {
grid-template-columns: minmax(0, 420px) minmax(0, 1fr) minmax(0, 260px);
align-items: end;
}
.oc-scenarios__spacer { display: block; }
}
.oc-scenarios__caption {
/* [DEFECT 1 FIX] Same defect class as .oc-scenarios__layer: the <=1023px rule
below sets `inline-size:100%`, and under content-box the 24px padding was
added ON TOP of that 100%, pushing the card 48px past its grid area (measured
362px inside a 314px column, 24px of it clipped to the right by the stage's
overflow:hidden). border-box makes the 100% inclusive. */
box-sizing: border-box;
background-color: var(--oc-ink);
color: var(--oc-black);
border-radius: var(--oc-card-radius);
box-shadow: none;
padding: 24px;
}
.oc-scenarios__caption p { color: var(--oc-black); max-inline-size: 42ch; }
.oc-chips {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.oc-chips a {
display: inline-flex;
align-items: center;
gap: 10px;
min-block-size: 44px; /* [DEFECT 6 FIX] WCAG 2.5.8 target size */
padding: 12px 14px;
border-radius: var(--oc-pill);
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
color: var(--oc-ink);
text-decoration: none;
font-family: var(--oc-font-arial);
font-size: var(--oc-fs-button);
font-weight: 300;
letter-spacing: 0.56px;
text-transform: uppercase;
white-space: nowrap;
}
.oc-chips .is-active a {
background-image: var(--oc-accent-aa);
/* [A11Y-2026-10-03] tracks --oc-accent-aa-end for the same reason as the CTA. */
background-color: var(--oc-accent-aa-end);
}
.oc-chips__swatch {
inline-size: 22px;
block-size: 22px;
border-radius: var(--oc-pill);
background-image: var(--oc-accent);
flex: 0 0 auto;
}
/* Mobile: the 5-tab vertical list collapses to an "n / 5" counter + one active
chip, placed top-right of the media panel (spec, scene 2 "Mobile"). */
.oc-scenarios__counter {
position: absolute;
inset-block-start: 16px;
inset-inline-end: 16px;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
}
@media (min-width: 1024px) {
.oc-scenarios__counter { display: none; }
}
@media (max-width: 1023px) {
.oc-chips { display: none; }
.oc-scenarios__caption { inline-size: 100%; }
}
/* ==========================================================================
8. Scene 3 — FEATURES (6 features, studio render centre)
3-part row: left feature list / centre render / right quote + paragraph.
Background: neutral gray radial gradient, no photography.
========================================================================== */
.oc-features {
background-color: #3c3c42;
/* [A11Y-2026-10-03] INVENTED DECORATION REMOVED, and it was also the cause of two
P0 contrast failures. ORIGINAL'S CORRESPONDING COUNT: ZERO — the original's
features section is a FLAT fill, `#features { background: #dddddd }`
(harvest/ordercube_styles.css:242-245). The word "radial" in the original's own
comment there refers to the JS-injected scrim, which this theme already
reproduces faithfully at `.oc-features .oc-scene__scrim` (see
harvest/ordercube_script.js:2391) — not to any section background.
WHY IT WAS ALSO A CONTRAST BUG: the radial's 0% stop is #6e6e76 (L=0.157750),
a LIGHT centre under light text, which is the surface the detector resolved:
.oc-quote #B89B83 on #6e6e76 1.962:1 FAIL (28px large, bar 3.0)
.oc-features__copy ink-dim on #6e6e76 4.2:1 FAIL (18px normal, bar 4.5)
On the flat #3c3c42 that the removal exposes:
.oc-quote #B89B83 on #3c3c42 4.201:1 PASS
.oc-features__copy rgba(255,255,255,0.85) composites to #E2E2E3 8.461:1 PASS
NOTE the direction: the original is LIGHTER than this theme here, not darker.
Restoring #dddddd is a full re-valuing of the scene (every text colour in it
inverts) and is NOT done in this pass — logged as an open replication gap. */
}
.oc-features__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
inline-size: 100%;
}
/* [DEFECT 4 FIX] The measured track set was 260 / 624 / 300 with a 48px gap. At
22px/400 the 300px copy column held ~29 characters per line — roughly half the
45-75 cpl readability band, so the paragraph read as a ragged ribbon. The copy
column is widened to 424px and the render column gives up the difference
(1280 - 240 - 424 - 96 = 520). Combined with the 18px/1.6 body below this is
~48 cpl. The list column loses 20px, which it has: its longest label
("Pay at table", 14px uppercase) measures well under 240px minus its chrome. */
@media (min-width: 1024px) {
.oc-features__inner {
grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 424px);
align-items: center;
gap: 48px;
}
}
.oc-features__list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.oc-features__list a {
display: flex;
align-items: center;
gap: 12px;
min-block-size: 44px; /* [DEFECT 6 FIX] WCAG 2.5.8 target size */
padding: 12px 14px;
border-radius: var(--oc-pill);
color: var(--oc-ink);
text-decoration: none;
font-family: var(--oc-font-arial);
font-size: var(--oc-fs-button);
font-weight: 300;
letter-spacing: 0.56px;
text-transform: uppercase;
}
.oc-features__list .is-active a {
background-color: rgba(0, 0, 0, 0.5);
}
.oc-features__icon {
inline-size: 22px;
block-size: 22px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
/* Mobile: the left list becomes a horizontal icon strip above the render. */
@media (max-width: 1023px) {
.oc-features__list {
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
padding-block-end: 8px;
}
.oc-features__list li { flex: 0 0 auto; }
}
/* [DEFECT 4 FIX] 22px body in a narrow column is what produced the 29 cpl. The
body drops to 18px/1.6 — the `card` step of the measured scale, not an
invented size — which is what takes the widened 424px column to ~48 cpl. */
.oc-features__copy p {
margin: 0;
color: var(--oc-ink-dim);
font-size: var(--oc-fs-card);
line-height: 1.6;
}
/* [DEFECT 3 FIX] 22px/400 is NORMAL text => 4.5:1. The measured accent-start
#B89B83 over this scene's radial gradient ran 3.16:1 (worst, the quote box's
top-left) to 4.73:1 (bottom-right) — failing across most of its extent. The
`accent-tint` token is the same bronze hue (27deg) and saturation, lightened to
relative luminance 0.5899, which puts the WORST point at 5.02:1. Scoped to this
scene only; the contact-scene .oc-quote sits on flat #0E0F13 and already passes. */
/* [DEFECT 4 FIX] With the body at 18px the pull-quote at 22px no longer read as
a separate register — the two blocks merged. 28px/1.25 italic restores the
contrast (1.56x the body size) without touching the measured colour decision
in deviation 22: `accent-tint` was computed for LARGE text here only after it
was computed to pass at 22px NORMAL text, so raising the size only loosens the
bar it already clears (5.02:1 at the worst point vs the 3.0:1 large-text
floor). */
.oc-features__copy .oc-quote {
display: block;
margin-block-end: 16px;
font-size: 28px;
line-height: 1.25;
font-style: italic;
color: var(--oc-accent-tint);
}
/* ==========================================================================
9. Scene 4 — REFERENCES (black band over white 3-col band)
========================================================================== */
.oc-references { display: block; padding-block: 0; }
.oc-references__top {
background-color: var(--oc-bg);
min-block-size: 45vh;
display: flex;
align-items: center;
padding-block: calc(var(--oc-header-h) + 24px) 32px;
}
.oc-references__top-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
inline-size: 100%;
}
.oc-dots {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
/* [DEFECT 6 FIX] The dot STAYS 10px visually; the target grows to 24x24 by
painting the dot with a background-image on a transparent 24px box, so the
measured indicator size is unchanged and the hit area clears WCAG 2.5.8. */
.oc-dots button {
inline-size: 24px;
block-size: 24px;
padding: 0;
border: 0;
border-radius: var(--oc-pill);
background-color: transparent;
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35) 0 5px, transparent 5px);
cursor: pointer;
}
.oc-dots .is-active button {
background-color: transparent;
background-image: radial-gradient(circle at 50% 50%, var(--oc-ink) 0 5px, transparent 5px);
}
.oc-references__band {
background-color: var(--oc-ink);
color: var(--oc-black);
min-block-size: 55vh;
display: flex;
align-items: stretch;
}
.oc-references__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
inline-size: 100%;
align-items: stretch;
}
@media (min-width: 1024px) {
.oc-references__grid {
grid-template-columns: 40% 20% 40%;
}
}
.oc-references__photo { position: relative; }
.oc-references__photo .oc-media { block-size: 100%; aspect-ratio: 4 / 3; }
.oc-references__photo .oc-icon-btn {
position: absolute;
inset-block-end: 12px;
inset-inline-end: 12px;
}
.oc-references__logo {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background-color: #ece7e1;
}
.oc-references__quote {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 32px 24px;
margin: 0;
}
.oc-references__quote blockquote {
margin: 0;
border: 0;
padding: 0;
font-style: italic;
font-size: var(--oc-fs-body);
color: var(--oc-black);
}
.oc-references__attrib {
margin: 0;
font-size: var(--oc-fs-link);
line-height: 1.5;
color: var(--oc-gray-600);
}
.oc-references__arrows { display: flex; gap: 8px; }
/* ==========================================================================
10. Scene 5 — IMPACT (ROI calculator)
near-black + warm bronze radial glow from right-of-centre.
========================================================================== */
.oc-impact {
background-color: var(--oc-bg);
/* [A11Y-2026-10-03] INVENTED DECORATION REMOVED — this was the detector's 5th
`radial-spotlight-glow` ("impact", #b89b83 a0.28 -> transparent) and the cause of
FOUR P0 contrast failures. ORIGINAL'S CORRESPONDING COUNT: ZERO. The original's
impact section background is a real PHOTOGRAPH,
`` (harvest/home.html:1179-1182); the
section itself gets only `overflow-x: visible`
(harvest/ordercube_styles.css:5428-5430) and no background declaration at all.
The `scene-glow` preset is removed from theme.json in the same change — the
var() here is the FALLBACK, so deleting only the fallback would have changed
nothing.
WHAT IT COST IN CONTRAST (the glow resolves to a light accent haze under light
text; after removal the surface is the flat --oc-bg #0E0F13, L=0.004821):
.oc-impact__title #FFFFFF 2.6:1 -> 19.153:1 PASS
.oc-calc__title #FFFFFF 2.6:1 -> 19.153:1 PASS
.oc-calc__disclaimer ink-muted 0.6 1.8:1 -> 7.24:1 PASS (measured composited)
.oc-impact__note ink-muted 0.6 1.8:1 -> 7.24:1 PASS (measured composited) */
}
.oc-calc {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
inline-size: 100%;
}
@media (min-width: 1024px) {
.oc-calc { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
}
.oc-calc__title { margin: 0 0 24px; max-inline-size: 22ch; }
.oc-calc__controls {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
border: 0;
}
/* [A11Y-2026-10-03] The 1.0:1 finding — INVISIBLE TEXT, the same colour as its
background. The
` (harvest/home.html:1179-1182); the
section itself gets only `overflow-x: visible`
(harvest/ordercube_styles.css:5428-5430) and no background declaration at all.
The `scene-glow` preset is removed from theme.json in the same change — the
var() here is the FALLBACK, so deleting only the fallback would have changed
nothing.
WHAT IT COST IN CONTRAST (the glow resolves to a light accent haze under light
text; after removal the surface is the flat --oc-bg #0E0F13, L=0.004821):
.oc-impact__title #FFFFFF 2.6:1 -> 19.153:1 PASS
.oc-calc__title #FFFFFF 2.6:1 -> 19.153:1 PASS
.oc-calc__disclaimer ink-muted 0.6 1.8:1 -> 7.24:1 PASS (measured composited)
.oc-impact__note ink-muted 0.6 1.8:1 -> 7.24:1 PASS (measured composited) */
}
.oc-calc {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
inline-size: 100%;
}
@media (min-width: 1024px) {
.oc-calc { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
}
.oc-calc__title { margin: 0 0 24px; max-inline-size: 22ch; }
.oc-calc__controls {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
border: 0;
}
/* [A11Y-2026-10-03] The 1.0:1 finding — INVISIBLE TEXT, the same colour as its
background. The