/* clx-svc-ecom — ecommerce-only DELTAS on top of the shared clx-svc-ai.css base. Keep this file for genuine ecommerce differences ONLY (sections the AI page lacks, or accents that must differ). Everything the two pages share stays in the base stylesheet. NEVER copy base rules here. Scope deltas to body.page-ecommerce-development-services. Build state 2026-10-10: hero only, so the one rule below is the container un-cap, which every page in this family needs. Section deltas append. */ /* homepage.min.css ships body.elementor-page .elementor-top-section > .elementor-container{max-width:var(--hp-max-w)} with !important, and it leaks onto every page on the homepage-CSS allowlist. This page has to be on that allowlist for the cloned contact section and the PowerPack FAQ accordion to render, so it inherits the cap, which squeezes .svc-in to roughly 1044px instead of its designed 1140px. The override must also be !important to beat it. Same rule the low-code clone carries, and it is per-component because each component's stylesheet only loads on its own slugs. Remove this and the page renders ~96px narrower than the AI page. */ body.elementor-page .elementor-top-section:has(.clx-svc-page) > .elementor-container{max-width:none !important;} /* Marquee: cap logo WIDTH as well as height. The base sheet sets height:32px and width:auto, which is fine when every mark is a similar shape and wrong here: the eight commerce logos range from compact (Art Lewin, 75px) to long horizontal lockups (SE Electric Skateboards, 267px), a 3.6x spread that reads as two oversized logos in a row of normal ones rather than a considered set. Capping width brings the two long lockups down and leaves the other six untouched, since they are already under the cap. object-fit:contain in the base rule keeps aspect ratio, so nothing distorts. Measured before: 88 / 75 / 267 / 96 / 113 / 187 / 109 / 112. */ body.page-ecommerce-development-services .clx-svc-page .svc-mtrack img{max-width:150px;} @media (max-width:640px){ body.page-ecommerce-development-services .clx-svc-page .svc-mtrack img{max-width:120px;} } /* ── SECTION 2 (approach) ────────────────────────────────────────────────── Owner's layout: both paragraphs stacked in the LEFT column, the .ecsl ledger in the RIGHT. The base sheet sets .svc-appr-intro p{margin:0}, so the stacked paragraphs need their own gap. THE GRID IS THE AI PAGE'S, UNCHANGED — 1fr 1fr with a 44px gap, collapsing at 800px (clx-svc-ai.css:155 and :166). An earlier attempt at .85fr / 1.15fr here was rejected twice by the owner: the columns must stay equal and match the clone source ([[feedback_l4_template_layout_governs]]). Nothing in this file touches grid-template-columns. The ledger's height is managed inside the ledger instead, by dropping its container breakpoint so a ~548px column still gets the side-by-side row tier rather than the fully stacked one. See the tier comments below. */ body.page-ecommerce-development-services .clx-svc-page .svc-appr-intro .svc-appr-col--left p + p{margin-top:16px;} /* HEIGHT, 2026-10-10 on owner feedback ("left col is still smaller in height"). The copy runs 492px; the ledger carries three rows plus the anchor and cannot compress to that without shrinking its own type. Two things close the gap, neither touching the grid: - the ledger is trimmed below (compact anchor, tighter row and tile padding, slightly smaller shift type), which takes it from 701px to ~575px; - the copy is vertically CENTRED, so the remaining difference splits evenly above and below it instead of dangling as one block of whitespace under the last paragraph. /marketing-automation-services/ centres its copy column against the same kind of taller viz for this reason. */ body.page-ecommerce-development-services .clx-svc-page .svc-appr-intro{align-items:center;} /* ── .ecsl — "The 2026 Ecommerce Shift in Three Numbers" ─────────────────── Owner's concept 2026-10-10, replacing a 3-beat CSS loop that was rejected. Three BEFORE / NOW rows, each closing on a proof tile whose figure counts up as the row enters frame, then a closing anchor carrying the market size. SCOPED PORT of the .mav ledger on /marketing-automation-services/, which the owner named as the reference. That treatment is scoped to .page-marketing-automation-services, so none of it reaches this page and this is a copy rather than a shared-sheet edit — clx-svc-ma.css drives a shipped page ([[feedback_no_regression_on_shipped_pages]]). Tones, the ink figure with an orange unit, the 2px orange NOW rail and the row stagger are lifted from it so the two pages read as one family. CONTAINER QUERIES, not media queries: this sits in the right half of the approach grid (~548px at the page's 1140px .svc-in), so it has to respond to its COLUMN, not the viewport. At that width each row runs as one vertical read — head, shift, proof tile — which is also what the owner asked for on mobile ("BEFORE above NOW, one continuous read"). From 640px of container the proof tile moves alongside the shift block, so the same markup still works if this block is ever widened to full bleed. Reveal is driven by .is-in from clx-svc-ecom.js and REPLAYS on every entry. Nothing is left at opacity:0 if the script never runs: the JS paints the finished state on no-IntersectionObserver, on reduced motion, and from a 1600ms safety sweep ([[feedback_scroll_reveal_resilience]]). */ body.page-ecommerce-development-services .clx-svc-page .ecsl{ --o:#FA4900;--navy:#142533;--body:#55636E;--rule:#D5DBDF;--dim:#7A8B9A; container-type:inline-size; font-family:'Cabin',system-ui,sans-serif;color:var(--navy);background:#fff; border:1px solid var(--rule);border-radius:3px; } body.page-ecommerce-development-services .clx-svc-page .ecsl *{box-sizing:border-box;} body.page-ecommerce-development-services .clx-svc-page .ecsl__row{ display:grid;gap:clamp(9px,1.3cqw,14px); padding:clamp(10px,1.4cqw,16px) clamp(15px,1.9cqw,24px); opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease; } body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in{opacity:1;transform:none;} body.page-ecommerce-development-services .clx-svc-page .ecsl__row + .ecsl__row{border-top:1px solid var(--rule);} /* ---- row head: icon, number, title ------------------------------------ */ body.page-ecommerce-development-services .clx-svc-page .ecsl__head{ display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic n" "ic h"; column-gap:10px;row-gap:2px;align-items:start;min-width:0; } /* ICON TILE — single weight orange strokes in a plain bordered tile, same as the MA ledger. A duotone fill version in orange plus dimmed navy was tried and rejected (owner, "gray and orange is not OK"). THE GLYPHS COME FROM ./icons, NEVER HAND DRAWN. Three successive hand drawn sets were rejected — the last read as "drawn with a shaky hand", which is exactly what off grid coordinates look like at 21px, and one of them closed a baseline, two uprights and a top rule into an accidental rectangle instead of a bar chart. The 76 files in ./icons are Lucide and house icons on a consistent 24 grid, which is what this slot needs. They are inlined through clx_svc_ecom_icon(), which strips width/height and rewrites fills to currentColor so the tile's colour drives them. The tile lifts, fades and warms its border as the row enters, and each stroke draws itself via stroke-dasharray. */ body.page-ecommerce-development-services .clx-svc-page .ecsl__ic{ grid-area:ic;display:grid;place-items:center;width:34px;height:34px; border:1px solid var(--rule);border-radius:2px;color:var(--o);margin-top:1px; transform:translateY(3px);opacity:0; transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .45s ease,border-color .5s ease; } body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in .ecsl__ic{ transform:none;opacity:1;border-color:rgba(250,73,0,.45); } /* The set mixes Lucide's stroke-width 2 with the house icons' 1.7. Both files carry it on the root and inherit it down, so one CSS declaration here normalises the three to a single weight. */ body.page-ecommerce-development-services .clx-svc-page .ecsl__ic svg{ width:21px;height:21px;display:block;stroke-width:1.75; } /* Every stroked shape carries pathLength="1", so its length normalises to 1 and one dasharray:1 / dashoffset:1 pair draws any icon whatever its real geometry — no per-icon JS measurement, the same trick as the MA ledger. SELECT BY ELEMENT, NEVER BY [pathLength]. An attribute selector on a camelCase SVG attribute does not apply from a stylesheet in Blink: the attribute name in the selector is lowercased when the sheet is parsed in an HTML document, so [pathLength] never matches and every glyph stays invisible at dashoffset 1 (caught 2026-10-10 — all three icons blank inside their tiles, while Element.matches() with the same selector returned true, which is why it reads as impossible from the console). clx-svc-ma.css uses `path, rect` for exactly this reason. Add the element here if a future icon uses line or polyline. Nothing in these icons may carry a decorative stroke-dasharray attribute: the dasharray:1 below overrides it and the dash is lost. */ body.page-ecommerce-development-services .clx-svc-page .ecsl__ic path, body.page-ecommerce-development-services .clx-svc-page .ecsl__ic circle, body.page-ecommerce-development-services .clx-svc-page .ecsl__ic rect{ stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1) .12s; } body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in .ecsl__ic path, body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in .ecsl__ic circle, body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in .ecsl__ic rect{stroke-dashoffset:0;} /* later strokes trail the first so the glyph builds rather than appearing whole */ body.page-ecommerce-development-services .clx-svc-page .ecsl__ic svg > *:nth-child(2){transition-delay:.20s;} body.page-ecommerce-development-services .clx-svc-page .ecsl__ic svg > *:nth-child(3){transition-delay:.28s;} body.page-ecommerce-development-services .clx-svc-page .ecsl__ic svg > *:nth-child(4){transition-delay:.34s;} body.page-ecommerce-development-services .clx-svc-page .ecsl__ic svg > *:nth-child(5){transition-delay:.40s;} body.page-ecommerce-development-services .clx-svc-page .ecsl__ic svg > *:nth-child(6){transition-delay:.46s;} body.page-ecommerce-development-services .clx-svc-page .ecsl__n{ grid-area:n;font-family:'JetBrains Mono',ui-monospace,monospace; font-size:clamp(9.5px,.9cqw,11px);letter-spacing:.1em;color:var(--dim); } /* The theme ships h1..h6{word-break:break-word} and h3{line-height:46px}, both of which wreck a small card title. Reset all three here. */ body.page-ecommerce-development-services .clx-svc-page .ecsl__head h3{ grid-area:h;margin:0;font-size:clamp(15px,1.6cqw,20px);font-weight:500;letter-spacing:-.25px; line-height:1.25;word-break:normal;overflow-wrap:normal;hyphens:none;color:var(--navy); } /* ---- the shift ------------------------------------------------------- */ body.page-ecommerce-development-services .clx-svc-page .ecsl__shift{ display:flex;flex-direction:column;gap:clamp(7px,.9cqw,11px);min-width:0; } body.page-ecommerce-development-services .clx-svc-page .ecsl__state{ display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:10px; padding-left:11px;border-left:2px solid var(--rule);position:relative; } body.page-ecommerce-development-services .clx-svc-page .ecsl__lab{ font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(9px,.9cqw,10.5px); letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-top:2px; } body.page-ecommerce-development-services .clx-svc-page .ecsl__state p{ margin:0!important;font-family:'Cabin',sans-serif!important; font-size:clamp(12.5px,1.3cqw,15.5px)!important;line-height:1.42!important;text-wrap:pretty; } body.page-ecommerce-development-services .clx-svc-page .ecsl__state--was p{color:var(--body)!important;} body.page-ecommerce-development-services .clx-svc-page .ecsl__state--now p{color:var(--navy)!important;} body.page-ecommerce-development-services .clx-svc-page .ecsl__state--now .ecsl__lab{color:var(--o);} /* the NOW rail wipes down as the row enters */ body.page-ecommerce-development-services .clx-svc-page .ecsl__state--now::before{ content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--o); transform-origin:top;transform:scaleY(0);transition:transform .65s cubic-bezier(.4,0,.2,1) .12s; } body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in .ecsl__state--now::before{transform:scaleY(1);} body.page-ecommerce-development-services .clx-svc-page .ecsl__state--was{transition:opacity .55s ease .3s;} body.page-ecommerce-development-services .clx-svc-page .ecsl__row.is-in .ecsl__state--was{opacity:.9;} /* ---- proof tile ------------------------------------------------------ */ body.page-ecommerce-development-services .clx-svc-page .ecsl__proof{ margin:0!important;display:flex;flex-direction:column;gap:2px; padding:12px 14px;background:#FDFBFA;border:1px solid var(--rule);border-radius:3px; } body.page-ecommerce-development-services .clx-svc-page .ecsl__num{ font-family:'Cabin',sans-serif;font-size:clamp(30px,3.4cqw,40px);font-weight:700; color:var(--navy);letter-spacing:-.5px;line-height:1.05; /* tabular figures so a counting number cannot jitter its own line width */ font-variant-numeric:tabular-nums; } body.page-ecommerce-development-services .clx-svc-page .ecsl__num em{color:var(--o);font-style:normal;} body.page-ecommerce-development-services .clx-svc-page .ecsl__cmp{ font-size:clamp(13px,1.3cqw,15px);font-weight:500;color:var(--dim);letter-spacing:0;margin-left:8px; } body.page-ecommerce-development-services .clx-svc-page .ecsl__proof-d{ font-family:'Cabin',sans-serif;font-size:14px;color:var(--navy);line-height:1.5;font-weight:400; } body.page-ecommerce-development-services .clx-svc-page .ecsl__cite{ font-family:'JetBrains Mono',ui-monospace,monospace;font-style:normal; font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);opacity:.55; margin-top:3px; } /* ---- closing anchor -------------------------------------------------- */ body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor{ display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num copy" "num cite"; column-gap:18px;row-gap:3px;align-items:center; padding:clamp(15px,1.9cqw,22px) clamp(16px,2.1cqw,26px); background:#142533;border-top:1px solid var(--rule); opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease; } body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor.is-in{opacity:1;transform:none;} /* the figure sits beside the sentence rather than above it — the vertical stack cost ~60px of a block that is already the tallest in the column. */ body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor .ecsl__num{grid-area:num;color:#fff;align-self:center;} body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor p{ grid-area:copy;margin:0!important;font-family:'Cabin',sans-serif!important; font-size:13.5px!important;line-height:1.5!important;color:#C9D2D9!important; } body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor p strong{color:#fff;font-weight:600;} body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor .ecsl__cite{grid-area:cite;color:#fff;opacity:.45;margin-top:0;} /* ---- responsive: driven by the COLUMN, not the viewport -------------- */ /* tier 2 — head and shift stack on the left, proof tile alongside. Threshold is 370px, not the 640px this started at, because the ledger lives in HALF of .svc-in: ~500px at a 1440px viewport but only ~394px at 1024px, where the AI grid is still two columns (it collapses at 800px). At 480px that 1024px case fell back to the fully stacked tier and the ledger ran 888px against 660px of copy. Measured 2026-10-10 at 1440 / 1024 / 768 / 390. */ @container (min-width:370px){ body.page-ecommerce-development-services .clx-svc-page .ecsl__row{ grid-template-columns:minmax(0,1fr) minmax(132px,170px); grid-template-areas:"head proof" "shift proof"; column-gap:clamp(16px,2cqw,26px);align-items:start; } body.page-ecommerce-development-services .clx-svc-page .ecsl__head{grid-area:head;} body.page-ecommerce-development-services .clx-svc-page .ecsl__shift{grid-area:shift;} body.page-ecommerce-development-services .clx-svc-page .ecsl__proof{grid-area:proof;} } /* tier 3 — the MA ledger's own layout: id | shift | proof on one line. This is what the block gets at full .svc-in width, and it is the shortest of the three tiers, which is the point of moving it out of the half column. */ @container (min-width:860px){ body.page-ecommerce-development-services .clx-svc-page .ecsl__row{ grid-template-columns:minmax(150px,.5fr) minmax(0,1.6fr) minmax(220px,.8fr); grid-template-areas:"head shift proof"; } /* at full width the citation can sit on its own end column */ body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor{ grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num copy cite"; column-gap:clamp(18px,2.4cqw,32px); } body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor .ecsl__cite{max-width:190px;text-align:right;} } @container (max-width:380px){ body.page-ecommerce-development-services .clx-svc-page .ecsl__state{grid-template-columns:1fr;gap:3px;} body.page-ecommerce-development-services .clx-svc-page .ecsl__lab{padding-top:0;} } @media (prefers-reduced-motion:reduce){ body.page-ecommerce-development-services .clx-svc-page .ecsl__row, body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor, body.page-ecommerce-development-services .clx-svc-page .ecsl__ic, body.page-ecommerce-development-services .clx-svc-page .ecsl__state--was, body.page-ecommerce-development-services .clx-svc-page .ecsl__state--now::before, body.page-ecommerce-development-services .clx-svc-page .ecsl__row, body.page-ecommerce-development-services .clx-svc-page .ecsl__anchor, body.page-ecommerce-development-services .clx-svc-page .ecsl__ic{opacity:1;transform:none;} body.page-ecommerce-development-services .clx-svc-page .ecsl__state--was{opacity:.9;} body.page-ecommerce-development-services .clx-svc-page .ecsl__state--now::before{transform:scaleY(1);} } /* Emphasis in the approach copy. The base sheet only styles `strong` in .svc-appr-framework, so without this the bolds would stay body grey (#727272) and read as weight alone. .svc-appr-hl marks the single thesis clause in brand orange, echoing the hero subtitle's black/orange split. SCOPED TO THE LEFT COLUMN, not to .svc-appr-intro. The ledger lives in the intro's right column, and its closing anchor is white text on #142533. These rules matched that anchor's at equal specificity and, sitting later in the file, won — "17.1% of US retail" rendered navy on navy (owner, 2026-10-10). Keep any emphasis rule for this section inside --left. */ body.page-ecommerce-development-services .clx-svc-page .svc-appr-col--left p strong{color:#142533;font-weight:600;} body.page-ecommerce-development-services .clx-svc-page .svc-appr-col--left p em{color:#5A6166;font-style:italic;} body.page-ecommerce-development-services .clx-svc-page .svc-appr-col--left p strong.svc-appr-hl{color:#FA4900;font-weight:600;} /* ── Hook out of section 2 into section 3 ───────────────────────────────── A third paragraph in the copy column, nothing more. It carried a mono NEXT label, a large orange link and a rule above it; the owner cut all of that, then the link and anchor too (2026-10-10). It now takes the same type as the two paragraphs above it, and the only hairline in play is the section separator at the top of .svc-offer. */ body.page-ecommerce-development-services .clx-svc-page .svc-appr-col--left .svc-appr-hook{ margin-top:16px!important; } /* ── Section separators ─────────────────────────────────────────────────── The base sheet already draws one: .clx-svc-page .svc-sec::before is a 1px rule across the top of every section at --svc-line (#ececf0). On this page it reads as absent, because section 2 ends on the ledger card whose own border is #D5DBDF — next to that, #ececf0 disappears and sections 2 and 3 run together (owner, 2026-10-10). Darkened page wide rather than only on .svc-offer, so every boundary on the page matches and the approach-to-offerings rule does not look like a one off. Only the ::before background is overridden; --svc-line itself is left alone because card borders and dividers elsewhere in the family read from it. */ body.page-ecommerce-development-services .clx-svc-page .svc-sec::before{background:#DCDCE4;} /* ── Platform Specific cards: brand marks instead of glyphs ─────────────── The base .svc-offer-ic is a 44px SQUARE sized for a stroke glyph. These are wordmarks around 120x31, so the slot has to become a wide box that caps on HEIGHT and lets width run to the logo's natural aspect. Capping the longest side instead would shrink the tall marks (PrestaShop is 126x52) to nothing. The marks are their own brand colours, so the orange currentColor the glyphs inherit does not apply. 38px of height is the ceiling, not a target. The source marks are 320px wide at mixed aspect ratios, so capping HEIGHT keeps them optically even and keeps every one at 1.9x or better. An earlier 46px cap made Adobe Commerce render 175px wide and tower over the others. Files live in the theme's assets/homepage/ and are tracked in git, so they deploy with the theme. */ body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo{ width:auto;height:38px;max-width:170px;margin:0 auto 22px; } body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo img{ max-height:38px;max-width:170px;width:auto;height:auto;object-fit:contain;display:block; } /* the glyph cards carry their colour from the tile; a logo card must not tint */ body.page-ecommerce-development-services .clx-svc-page .svc-offer-card--logo .svc-offer-ic{color:inherit;} @media (max-width:620px){ body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo, body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo img{height:40px;max-height:40px;} } /* A stacked lockup cannot share the wordmarks' height cap. PrestaShop is 320x178 where the others are about 320x80, so 38px of height left it 68px wide next to WooCommerce at 164. The taller allowance brings it back to a comparable optical area. */ body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo--tall, body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo--tall img{ height:60px;max-height:60px; } @media (max-width:620px){ body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo--tall, body.page-ecommerce-development-services .clx-svc-page .svc-offer-logo--tall img{height:52px;max-height:52px;} } /* ── Partner badge: full bleed banner ───────────────────────────────────── The base .svc-why-badge img is `object-fit:contain` with 10px of padding, right for a logo sitting on a white field. The Shopify Partner asset is edge to edge artwork on a green gradient, so contain would float it inside white bars. `cover` fills the card instead. Cover crops, so this was checked against all three box aspects the card takes: 214x177 at 1440, 167x212 at 1024 and 310x137 at 390. The logo block occupies roughly the middle 57% of the 600x450 source both ways, and the tightest case (1024, which keeps the middle 59% horizontally) still clears it. Replacing the artwork means re-checking that. */ body.page-ecommerce-development-services .clx-svc-page .svc-why-badge--banner img{ object-fit:cover;padding:0; } /* One badge where the grid expects two would leave a hole beside it. */ body.page-ecommerce-development-services .clx-svc-page .svc-why-badge--solo{ grid-column:1 / -1; } /* Deliberately NOT reset at the tablet breakpoint. Left in one column there the badge box turns portrait, 167x212, and `cover` on 600x450 artwork then keeps only the middle 59% horizontally, which clips the wordmark. Spanning the full width keeps the box landscape at every size, closer to the source aspect. */ /* ── NEXT GEN FEATURES — list left, one native-size image right ─────────── Replaced a pinned horizontal card track on 2026-10-11. The track failed for a reason CSS could not fix: the artwork is dense product UI at 720x405, so its body type is ~8px in the file and a 440px card rendered it at 4.9px. Measured alternatives: 760px row = 8.4px, 1000px full bleed = 11.1px but upscaled 1.4x. Regenerating the files was ruled out, so the image is shown at its NATIVE 720 and everything is sized around that. 380 list + 40 gap + 720 image = 1140, the exact .svc-in width. The image is deliberately NOT fluid: widening it softens the artwork, narrowing it makes it unreadable. Page cost is one screen for all nine features, against ~4,500px for alternating rows or 2.1 screens for the pin it replaced. THE DARK BAND IS NOT OURS ANY MORE. Owner asked on 2026-10-11 for the treatment used by "The Marketing Automation Strategy Edge", which is the shipped .inv--v2 inv--bleed instrument panel from clx-aiagents-panel. That panel supplies the background, the full bleed, the heading with its orange last word, the rules and the footer, so everything below styles only what sits INSIDE it. Do not re-add a background or 100vw margins here; the panel already does both and doubling them reintroduces the white side bands. */ body.page-ecommerce-development-services{overflow-x:clip;overflow-y:visible;} body.page-ecommerce-development-services .clx-svc-page .ngx{padding:0;} body.page-ecommerce-development-services .clx-svc-page .ngx::before{display:none;} /* the panel's own rule already separates the intro from the content */ body.page-ecommerce-development-services .clx-svc-page .ngx-split{margin-top:30px;} /* ---- panel overrides, scoped to this page only ------------------------ The shipped panel caps .inv-content at 1044. This section needs 1140 to stand up: 380 list + 40 gap + 720 image is exactly 1140, and the image cannot shrink because 720 is the artwork's native size. Measured 2026-10-11: at 1044 the split overflowed the content box by ~94px. */ body.page-ecommerce-development-services #clx-inv-panel.inv--v2 .inv-content{ max-width:1140px !important; } /* Intro runs the full content width, not the panel's default measure (owner, 2026-10-11). */ body.page-ecommerce-development-services #clx-inv-panel.inv--v2 .inv-intro{ max-width:none !important; } body.page-ecommerce-development-services .clx-svc-page .ngx-split{ display:grid;grid-template-columns:380px 720px;gap:40px;align-items:start; } /* ---- the list ---------------------------------------------------------- */ body.page-ecommerce-development-services .clx-svc-page .ngx-list{ list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.10); } body.page-ecommerce-development-services .clx-svc-page .ngx-item{ position:relative;width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px; padding:14px 10px 14px 16px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.10); text-align:left;cursor:pointer;color:#8E99A4;transition:color .2s ease,background-color .2s ease; } body.page-ecommerce-development-services .clx-svc-page .ngx-item::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#FA4900; transform:scaleY(0);transform-origin:center;transition:transform .3s cubic-bezier(.4,0,.2,1); } body.page-ecommerce-development-services .clx-svc-page .ngx-item:hover{color:#D7DEE4;background:rgba(255,255,255,.03);} body.page-ecommerce-development-services .clx-svc-page .ngx-item.is-active{color:#fff;background:rgba(250,73,0,.07);} body.page-ecommerce-development-services .clx-svc-page .ngx-item.is-active::before{transform:scaleY(1);} body.page-ecommerce-development-services .clx-svc-page .ngx-n{ font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:#6E7A86; } body.page-ecommerce-development-services .clx-svc-page .ngx-item.is-active .ngx-n{color:#FA4900;} body.page-ecommerce-development-services .clx-svc-page .ngx-label{ font-family:'Cabin',sans-serif;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.1px; } /* ---- the panel --------------------------------------------------------- */ body.page-ecommerce-development-services .clx-svc-page .ngx-stage{position:relative;min-width:0;} body.page-ecommerce-development-services .clx-svc-page .ngx-panel{ margin:0;display:none; } body.page-ecommerce-development-services .clx-svc-page .ngx-panel.is-active{display:block;animation:ngxFade .32s ease both;} @keyframes ngxFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} /* 720 EXACTLY. Not max-width, not 100%: this is the artwork's native size and the only width at which its 8px type is as designed. */ body.page-ecommerce-development-services .clx-svc-page .ngx-shot{ width:720px;border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;background:#15161a; } body.page-ecommerce-development-services .clx-svc-page .ngx-shot img{ display:block;width:720px;height:405px; } body.page-ecommerce-development-services .clx-svc-page .ngx-cap{margin-top:20px;max-width:720px;} body.page-ecommerce-development-services .clx-svc-page .ngx-t{ margin:0 0 8px;font-family:'Cabin',sans-serif;font-size:21px;font-weight:700;line-height:1.26; letter-spacing:-.2px;color:#fff !important;word-break:normal; } body.page-ecommerce-development-services .clx-svc-page .ngx-d{ margin:0;font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;color:#B8C0C7; } /* ---- below 1240 the 1140 split cannot fit the viewport ------------------ Stacked, the image is still capped at 720: it is the artwork's native size and letting it stretch to the column width upscales it (measured 1042px at a 1180 viewport, 1.45x, visibly soft). It centres instead. */ @media (max-width:1240px){ body.page-ecommerce-development-services .clx-svc-page .ngx-split{grid-template-columns:1fr;gap:28px;} body.page-ecommerce-development-services .clx-svc-page .ngx-shot{width:min(100%,720px);margin-inline:auto;} body.page-ecommerce-development-services .clx-svc-page .ngx-shot img{width:100%;height:auto;} body.page-ecommerce-development-services .clx-svc-page .ngx-cap{max-width:720px;margin-inline:auto;} } /* ---- MOBILE: every panel open, image is a tap-to-zoom thumbnail --------- At 350px the artwork's type renders at 3.9px. Nothing makes a three column desktop checkout flow readable on a phone, so the image stops pretending to be readable and becomes an affordance: tapping opens clx-blog-figzoom, which shows it at native size with pinch and pan. The list collapses away because with every panel open it would only duplicate the headings. */ @media (max-width:860px){ body.page-ecommerce-development-services .clx-svc-page .ngx-list{display:none;} body.page-ecommerce-development-services .clx-svc-page .ngx-panel{display:block;} body.page-ecommerce-development-services .clx-svc-page .ngx-panel + .ngx-panel{margin-top:38px;} body.page-ecommerce-development-services .clx-svc-page .ngx-panel.is-active{animation:none;} body.page-ecommerce-development-services .clx-svc-page .ngx-shot{border-radius:12px;} body.page-ecommerce-development-services .clx-svc-page .ngx-t{font-size:19px;} } @media (prefers-reduced-motion:reduce){ body.page-ecommerce-development-services .clx-svc-page .ngx-panel.is-active{animation:none;} body.page-ecommerce-development-services .clx-svc-page .ngx-item, body.page-ecommerce-development-services .clx-svc-page .ngx-item::before{transition:none;} } /* ── ECOMMERCE BRANDS WE WORK WITH ──────────────────────────────────────── Owner asked for the "Problems We Solve" treatment from /marketing-automation-services/. Those rules are scoped to that page's body class, so this is a port under svc-brand-* rather than a cross page dependency — exactly how that block was itself ported from /industries/energy/, which its own docblock records. Values carried over verbatim from clx-svc-ma.css:391-399, except the title size. The MA original sets the h3 to 17px, SMALLER than the 18px body copy around it. The owner asked for a real h3 scale here for SEO, so the element stays an h3 and the type goes up to a clamped 21-24px, which still fits two columns without the titles wrapping to three lines. */ body.page-ecommerce-development-services .clx-svc-page .svc-brand-grid{ display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:38px; } body.page-ecommerce-development-services .clx-svc-page .svc-brand{ display:flex;gap:18px;align-items:flex-start; } body.page-ecommerce-development-services .clx-svc-page .svc-brand-n{ flex:none;font-family:'Cabin',system-ui,sans-serif;font-size:15px;font-weight:700; color:#FA4900;background:#fff2e3;width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; } body.page-ecommerce-development-services .clx-svc-page .svc-brand-t{ font-family:'Cabin',sans-serif;font-size:clamp(21px,1.9vw,24px);font-weight:700;color:#142533; margin:0 0 7px;letter-spacing:-.2px;line-height:1.26;word-break:normal; } body.page-ecommerce-development-services .clx-svc-page .svc-brand-d{ font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.62;color:#33475a;margin:0; } @media (max-width:860px){ body.page-ecommerce-development-services .clx-svc-page .svc-brand-grid{grid-template-columns:1fr;gap:22px;} } /* The capability card titles are h3 now, not div (owner 2026-10-11, for SEO: 44 keyword bearing phrases on this page were not headings). .svc-offer-t already sets family, size, weight, colour and margin, so the swap is visually identical — but the theme ships h1..h6{word-break:break-word} and an h3 line-height, which is what split "Nurture" into "Nurtu/re" on the MA ledger. Reset both here so the tag change cannot alter a single line break. */ body.page-ecommerce-development-services .clx-svc-page h3.svc-offer-t{ word-break:normal;overflow-wrap:normal;hyphens:none;line-height:1.3; } /* The hourly rate line under the investment table. Sized between the table and the body copy so it reads as a footnote to the numbers rather than a new claim, and the figure itself takes the ink weight. */ body.page-ecommerce-development-services .clx-svc-page .svc-eng-rate{ margin:14px 0 0;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.6;color:#55636E; } body.page-ecommerce-development-services .clx-svc-page .svc-eng-rate strong{color:#142533;font-weight:700;} /* FOOT ROWS: keep the CTA on the same line as the text, everywhere. The shared .svc-why-foottext is a fixed max-width:760px and .svc-why-cta is white-space:nowrap, so the row only fits while the CTA label is short. Measured 2026-10-11 at a 1044px container: #why 760 + 218 + 24 = 1002 fits #certs 760 + 315 + 24 = 1099 overflows by 55, wrapped #solutions 760 + 299 + 24 = 1083 overflows by 39, wrapped Applied to every .svc-why-foot on the page rather than section by section, because it recurs with any CTA label over ~260px and the next section to get one would hit it again. flex-basis must be 0, not auto. With `flex:1 1 auto` the text grows to the full container width and pushes the CTA onto its own line anyway; with basis 0 plus min-width:0 it shrinks into whatever the CTA leaves. The shared rule's flex-wrap and its sub-900px column stack are both left intact. */ body.page-ecommerce-development-services .clx-svc-page .svc-why-foot > .svc-why-foottext{ max-width:none;flex:1 1 0;min-width:0; }