and the sizes on its spans, so the
has no height of its own and the cards above ran into it. */ .stage > .x-abs { padding: 14px 20px 22px; line-height: 22px !important; } .sx-after > .b-abs.b-h2, .sx-after > .b-abs.b-sub, .stage-clip > .lm-foot-note { background: #002209; } /* .b-bleed, the Lumos band */ /* The button sits on that band but keeps its own white fill; only the strip around it needs the band's colour, which a wrapper would add — a box-shadow does it without one. */ .sx-after > .b-btn { box-shadow: 0 0 0 100vmax #002209; clip-path: inset(0 -100vmax); } .sx-after > .d-a.d-cta { background: #e53d00; } /* the orange CTA band */ .sx-after > h2.d-a, .sx-after > .d-a.d-faq, .sx-after > .d-a:not(.d-cta):not(.d-faq) { background: #002209; } /* FAQ + footer bands */ /* ── Header ───────────────────────────────────────────────────────────────────────────── The desktop header is a 1440px fixed bar with hover menus. On a phone it becomes a 64px bar with the logo and a disclosure button; the existing .x-menu panels stack under it. */ .x-hdr { left: 0; margin-left: 0; width: 100%; height: 64px; } .x-hdr > .x-bleed { height: 64px; } .x-hdr > .x-abs[aria-label='Discounty'] { left: 20px; top: 16px; } .x-nav { position: fixed; left: 0; top: 64px; width: 100%; max-height: calc(100vh - 64px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 24px; background: #fff; /* the header bar's own ground (.x-hdr > .x-bleed) */ border-bottom: 1px solid rgba(0, 34, 9, .1); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .x-hdr.m-open .x-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; } .x-nav > a, .x-nav > .x-item { justify-content: space-between; min-height: 48px; /* WCAG 2.2 target size */ padding: 0 20px; } /* The hover menus become inline accordions. */ .x-menu { position: static; width: auto !important; height: auto !important; border: 0; opacity: 1; visibility: visible; transform: none; display: none; padding: 0 0 8px; } .x-menu.on { display: block; } .x-menu { background: #f5f6ee; } /* the design's own pale ground, so the open panel reads */ .x-bar { display: none; } .x-mc { position: static; width: auto; height: auto; } .x-mi { position: static; width: auto !important; min-height: 48px; justify-content: center; padding: 6px 20px 6px 36px; } /* The design's two-column menu grid becomes one column of links. */ .x-menu .x-mc { display: block; } /* The two header CTAs move into the open panel rather than crowding a 375px bar. */ .x-hdr > .x-btn { display: none; } .x-hdr.m-open > .x-btn { position: static; display: flex; order: 99; margin: 8px 20px 0; min-height: 48px; } .m-burger { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; background: none; border: 0; padding: 0; cursor: pointer; } .m-burger i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .x-hdr.m-open .m-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .x-hdr.m-open .m-burger i:nth-child(2) { opacity: 0; } .x-hdr.m-open .m-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Hero ─────────────────────────────────────────────────────────────────────────────── Same elements, same order, sized for a phone line. 65px → 34px is the smallest step that keeps "Discount with a goal," on one line at 360px. */ .x3-hero { position: relative; left: auto; top: auto; width: auto; padding: 24px 20px 40px; gap: 18px; } .x3-hero h1 { width: 100% !important; font-size: 34px !important; letter-spacing: -1px !important; } .x3-hero > p { font-size: 17px !important; } .x3-row { flex-wrap: wrap; justify-content: center; gap: 10px 16px; } /* The design puts both buttons in ONE grid cell (grid-area:1/1) and separates them with a left margin — a deliberate overlap at 1440px. On a phone they stack full width, which needs the grid to become rows rather than a single cell. */ .x3-hero > div:last-child { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; width: 100%; gap: 12px; } .x3-hero > div:last-child > .x3-btn:nth-child(1) { grid-area: 1 / 1 !important; } .x3-hero > div:last-child > .x3-btn:nth-child(2) { grid-area: 2 / 1 !important; } .x3-btn { margin-left: 0 !important; width: 100%; min-height: 48px; } /* ── Scaled blocks ────────────────────────────────────────────────────────────────────── Some components are drawings whose internals are a fixed-width composition: the product-card cluster, the pinned "six kinds" frames, the Lumos panel, the before/after store shot. Re-laying out their insides would be redesigning them. Instead each is scaled as a whole by --m-k, so every proportion, gap and colour stays exactly as drawn. The floating product cards are a 1440-wide scatter of six cards spanning design y 550–860. Scaling the whole cluster to 375px would render each card about 64px wide — the prices and labels inside them become unreadable, which fails the point of the section. Instead the cluster keeps the design's own scale (0.62 is the largest that fits a card comfortably on a phone) and the strip scrolls sideways, so a merchant reads the cards at a legible size and swipes through them. The scatter's vertical offsets are preserved, so it still reads as the drawing rather than a row of tiles. height 860px — the local box reaches the cards and clips anything past them margin-top — −550·s slides the empty part above the cards out of the column margin-bottom — leaves the column exactly 310·s, what the cards occupy once scaled */ .m-scroller > .e-row { --m-s: .62; width: 1440px !important; height: 860px; transform-origin: 0 0; transform: scale(var(--m-s)); margin-top: calc(-550px * var(--m-s)); margin-bottom: calc(860px * var(--m-s) - 860px); overflow: visible; } /* The strip that scrolls. The export has no wrapper for this, so src/lib/home.ts adds one. Its height is set here rather than taken from the child: the child is scaled by a transform, which does not change layout height, and its negative margins would otherwise collapse the wrapper to nothing. 310·s is what the scaled cards occupy, plus a little breathing room. */ .stage > .m-scroller { display: block; height: calc(310px * .62 + 32px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .m-scroller::-webkit-scrollbar { display: none; } .m-scroller:focus-visible { outline: 2px solid #002209; outline-offset: -2px; } /* ── "Six kinds of sale. One app." ────────────────────────────────────────────────────── At 1440px this is a pinned viewport with the heading and the six-item list on the left (x 64, w 377) and an 864×563 visual on the right (x 512). Side by side does not survive a phone, so the three parts stack in the same reading order: heading, list, visual. The scroll mechanic is untouched — the JS still advances the active item and slides the track; only the arrangement of the three blocks changes. The inner stage stops being a 1440px canvas with a scale transform (the JS sets --ss/--sy for that) and becomes a plain column; the visual alone keeps a scale, since its insides are a fixed composition. */ /* .sx is a flex item of the column, so .sx-pin's `position:sticky` has no block container to stick inside — a flex item is not one. Making .sx a block restores it. */ .stage > .sx { margin-left: 0 !important; display: block; } /* The design's script keeps --ss/--sy on :root to centre a 700px-tall composition in the viewport. Here the column fills the pin itself, so both are neutralised for this element only; the script still writes them and the desktop rule above 1024px still reads them. */ .sx-in { position: absolute; left: 0; margin-left: 0; top: 0; width: 100%; height: 100%; transform: none !important; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 20px; box-sizing: border-box; overflow: hidden; } .sx-head, .sx-list { position: relative; left: auto; top: auto; width: auto; flex: none; } /* The heading, the six items and the visual all have to share one screen height. The design's 50px heading and 22px gap are sized for a 1024px-tall stage. */ .sx-head { gap: 10px; } .sx-head .g-h { font-size: 30px; } .sx-head .g-sub { font-size: 15px; } .sx-lb { padding: 11px 0 10px; } .sx-t { font-size: 18px; line-height: 22px; } .sx-d { font-size: 14px; } .sx-li.on .sx-d { padding-bottom: 12px; } /* The visual: an 864×563 composition drawn at whatever fraction of the phone's width fits. The track inside it slides between frames, so the box clips; `flex:none` and an explicit height are needed because a transform does not change layout size. */ .sx-car { --m-c: calc((100vw - 40px) / 864px); position: relative; left: auto !important; top: auto !important; flex: none; width: 864px; /* The clip box is in the design's own units (the scale shrinks it with the content); the negative margin returns the space the transform does not, so the next block follows. */ height: 563px; margin-bottom: calc(563px * (var(--m-c) - 1)); transform-origin: 0 0; transform: scale(var(--m-c)); overflow: hidden; } /* The slide distance is in the design's own units, which the scale takes care of. */ .sx-trk { width: 864px; } /* ── Stats band ───────────────────────────────────────────────────────────────────────── Three columns separated by hairlines become three stacked rows. */ .sx-after > .g-a[style*='width:345px'] { width: calc(100% - 40px) !important; margin: 0 20px; align-items: flex-start; } .sx-after > .g-a[style*='width:1px'] { display: none; } /* the vertical hairlines */ /* Each label is drawn on one line at a fixed width (365px for the stores line), which ran past a 375px screen and lost its last letters to the clip. */ .sx-after > .g-a .g-sd { width: auto !important; white-space: normal !important; } .g-bleed { padding: 28px 0; height: auto !important; } /* ── "Three steps, and none of them is code" ──────────────────────────────────────────── Three cards side by side at x 65 / 519 / 972, each made of three siblings inside a `display:contents` wrapper: a plain background div, the .b-cardtext, and the .b-ill drawing. On a phone the wrapper becomes the column that stacks them, and each trio is grouped by a shared `order` so the text stays with its own illustration. */ .sx-after > div[style*='display:contents'] { display: flex !important; flex-direction: column; gap: 14px; padding: 0 20px; } /* Source order inside the wrapper is: text1, bg1, ill1, bg2, text2, ill2, bg3, text3, ill3. The background divs are the cards' grounds; each is paired with the drawing that sits on it. */ .sx-after > div[style*='display:contents'] > * { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; } .b-cardtext { display: flex; flex-direction: column; gap: 6px; } /* The drawings are 402×236 compositions; they scale with the column like the other fixed drawings, each sitting on the pale card ground that precedes it. */ /* The wrapper's `> *` rule above outranks a bare .b-ill, so until 2026-10-22 the drawing took the column's width and was then scaled again: on a phone it filled about 80% of the column, and on a tablet it came out nearly twice the screen wide and ran over the next step (found by the width sweep at 768, 820 and 1024). Its own width needs the longer selector; the height stays the drawing's and the scaled difference is taken back with the margin, as for the other drawings. */ .sx-after > div[style*='display:contents'] > .b-ill, .b-ill { --m-b: calc((100vw - 40px) / 402.444px); width: 402.444px !important; height: 236.124px; flex-shrink: 0; margin-bottom: calc(236.124px * (var(--m-b) - 1)); transform-origin: 0 0; transform: scale(var(--m-b)); background: #f5f6ee; border-radius: 10px; } /* The separate background div for each card is then redundant. */ .sx-after > div[style*='display:contents'] > div[style*='background:#f5f6ee'] { display: none; } .b-h2 { font-size: 30px !important; } .b-sub { font-size: 16px !important; } .sx-after > .b-abs, .sx-after > .b-btn { padding: 0 20px; height: auto !important; } .sx-after > .b-abs[style*='553px'] { display: none; } /* the 553px decorative orb */ .b-btn { margin: 0 20px; width: calc(100% - 40px) !important; } /* ── Own-store demo: "See yourstore.com on sale" ─────────────────────────────────────── At 1440px a headline row (x 268–1180) sits over a browser frame (x 176–1264, y 2481–3026) holding the store shot, the discount slider and the before/after slider, all positioned against .a-t. Until 2026-10-18 there was no rule here, so on a phone every piece joined the column on its own. src/lib/home.ts (step 13b) now groups them: the headline is re-set as a line of text at the column's heading size, and the picture is scaled as a whole, like the other drawings, cropped to the frame. --m-o is the frame's width as a share of the column. */ .a-t > .m-own-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; padding: 48px 20px 0; width: 100% !important; box-sizing: border-box; } .m-own-head > * { position: relative !important; left: auto !important; top: auto !important; transform: none !important; } .m-own-head > .a-pp { font-size: 30px !important; line-height: 1.15 !important; } .m-own-head > .a-typed { min-width: 6.2em; } /* holds "yourstore.com" while it types, so "on sale" does not jump */ .m-own-head .a-own-in { width: 100%; } /* the field is the typewriter's box, not the 590px desktop field */ .m-own-head > .a-own-msg { font-size: 14px; margin-top: 6px; } .m-own-head > .a-own-msg:empty { display: none; } /* the caret follows the text (at 1440px it sits at the box's right edge, which is the text's) */ .m-own-head .a-caret { position: relative; left: auto; top: auto; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.12em; } .m-own-head > .a-arr { flex: none; } /* the rule under the headline and the sentence below it take full rows */ .m-own-head > .a-abs[style*='width:634px'] { width: 100% !important; flex-basis: 100%; margin-top: 8px; } .m-own-head > .a-in { flex-basis: 100%; white-space: normal; font-size: 16px; margin-top: 8px; } .a-t > .m-own { --m-o: min(1, (100vw - 24px) / 1088px); display: block; width: calc(100% - 24px) !important; max-width: none; height: calc(545.245px * var(--m-o)); margin: 24px 12px 48px; transform-origin: 0 0; transform: scale(var(--m-o)) translate(-176px, -2481.49px); } /* ── Orange revenue band ──────────────────────────────────────────────────────────────── The band is one clipped 1440-wide box: copy and CTA on the left at x 64, two app screenshots on the right at x 804 and 1093 — entirely off a phone screen, and the box clips them, so they would simply be missing. The box becomes a column instead: the copy keeps its place and the two screenshots stack beneath it, each scaled to the width like the other fixed drawings. */ .a-t > .a-abs[style*='calc(720px'] { width: 100% !important; height: auto !important; overflow: visible !important; display: flex; flex-direction: column; gap: 18px; padding: 36px 20px; box-sizing: border-box; background: #e53d00; /* .a-bleed, the orange band this copy is written on */ } .a-t > .a-abs[style*='calc(720px'] > * { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; } .a-t > .a-abs[style*='calc(720px'] > .a-c { --m-a: calc((100vw - 40px) / 433px); width: 433px !important; transform-origin: 0 0 !important; transform: scale(var(--m-a)) !important; margin-bottom: calc(342px * var(--m-a) - 342px); } /* The back report card is 128px since its chart was removed (src/lib/home.ts, transform 14b). */ .a-t > .a-abs[style*='calc(720px'] > .a-c[style*='height:128px'] { margin-bottom: calc(128px * var(--m-a) - 128px); } /* The empty spacer divs that fill the band's right half at desktop. */ .a-t > .a-abs[style*='calc(720px'] > .a-abs:empty, .a-t > .a-abs[style*='left:720px'] { display: none; } .a-t > .a-abs[style*='calc(720px'] > a.a-in { width: auto !important; align-self: flex-start; min-height: 48px; } .a-t > .a-abs[style*='calc(720px'] > .a-pp { font-size: 30px !important; line-height: 1.15 !important; } .a-t > .a-abs[style*='calc(720px'] > .a-in { font-size: 16px !important; } /* ── Review ticker and quote field ────────────────────────────────────────────────────── Both are marquees anchored to the 1440px stage: .c-rv is `left:50%; margin-left:-720px` with a mask that fades the first 470–600px (the space the heading occupies at desktop), and .c-fw is a full-bleed 100vw strip whose inner track is centred on 1440px. On a phone they start at the left edge, span the viewport, and drop the mask — there is no heading beside them to fade behind. The animation, the cards and their contents are untouched. */ .sx-after > .c-rv { left: 0 !important; margin-left: 0 !important; width: 100% !important; -webkit-mask-image: none; mask-image: none; } /* The first row is inset by 495px to clear the heading at desktop; on a phone the heading is above it, so the row starts at the edge like the second. */ .c-rv-t { margin-left: 0 !important; } /* The quote field is a 1440×763 scatter of twelve short support quotes, drifting sideways on a 84s marquee. Scaling it to fit the phone would render 15px type at 4px. It keeps the design's own size and is cropped to a band instead: the marquee already moves the quotes through the viewport, so a phone sees the same quotes, a few at a time, at a readable size. */ .sx-after > .c-fw { left: 0 !important; margin-left: 0 !important; width: 100% !important; height: 300px !important; } .c-fw-inner { left: 0; margin-left: 0; } /* The "4.9 ★ 1,250+ reviews" row is a 460×120 composition of absolutely positioned pieces, so it scales as a unit rather than reflowing — the same treatment as the other fixed drawings. */ .stage-clip > .c-a:not(.lm-card) > div[style*='width:460px'] { --m-r: calc((100vw - 40px) / 460px); transform-origin: 0 0; transform: scale(var(--m-r)); margin-bottom: calc(120px * var(--m-r) - 120px); } .stage-clip > .c-a:not(.lm-card) > div:not([style*='width:460px']) { flex-wrap: wrap; } /* ── CTA band and FAQ ─────────────────────────────────────────────────────────────────── Both are 780/640px-wide blocks centred on the 1440px stage with 50/40px headings. */ /* Full width with the inset as padding: as a 20px margin the band's own orange left white strips down both sides. */ .sx-after > .d-a.d-cta { width: 100% !important; margin: 0; padding: 36px 20px; box-sizing: border-box; gap: 28px; } .d-h2 { font-size: 30px !important; } .d-sub { width: 100% !important; font-size: 16px !important; } /* The design overlaps these two buttons in one grid cell, like the hero's. */ .d-btns { display: flex !important; flex-direction: column; width: 100%; gap: 12px; } .d-btn { grid-area: auto !important; margin-left: 0 !important; margin-top: 0 !important; width: 100%; box-sizing: border-box; /* content-box + 100% ran 30px past the screen */ } .sx-after > h2.d-a { width: calc(100% - 40px) !important; padding: 28px 20px 0; font-size: 28px !important; white-space: normal !important; height: auto !important; } .sx-after > .d-a.d-faq { width: 100% !important; margin: 0; padding: 0 20px 28px; box-sizing: border-box; } .d-fq { width: 100% !important; min-height: 48px; font-size: 17px !important; } .d-fq span { padding-right: 36px; } /* left: auto, or the stage's left:622.5px wins and the plus sits off the screen: on phones and tablets the FAQ showed no sign that a question opens (found 2026-10-22 by the width sweep). */ .d-fp { left: auto; right: 0; top: calc(50% - 8.75px); } /* centred on the question, which grows here */ .d-faq .d-line img { width: 100%; } .d-fi { margin-bottom: 18px; } .d-line { margin-top: 18px; } /* ── Footer ───────────────────────────────────────────────────────────────────────────── Four columns at x=64/400/736/1072 become one column. */ .d-a.d-hd, .d-a.d-ft, .d-a.d-sm { width: auto !important; padding: 0 20px; white-space: normal; } /* In the file each heading comes AFTER its own link list (the export writes the lists first), so every footer column has to be ordered explicitly. The x the design gives each block identifies it: 64 = brand, 400 = Discounts, 736 = Learn, 1072 = Company. */ .sx-after > .d-a[style*='left:400px'].d-hd { order: 71; } .sx-after > .d-a[style*='left:400px'].d-ft { order: 72; } .sx-after > .d-a[style*='left:735.57px'].d-hd { order: 73; } .sx-after > .d-a[style*='left:735.57px'].d-ft { order: 74; } .sx-after > .d-a[style*='left:1072px'].d-hd { order: 75; } .sx-after > .d-a[style*='left:1072px'].d-ft { order: 76; } /* `:not(h2)` because the FAQ heading is also at left:64px and belongs with the FAQ, not here. */ .sx-after > .d-a[style*='left:64px']:not(h2) { order: 80; } .sx-after > .d-a[style*='left:60.32px'] { order: 81; } /* App Store badge */ .sx-after > .d-a[style*='left:89.15px'] { order: 80; } /* the star beside 4.9 */ .sx-after > .d-a[style*='left:47px'] { order: 82; } /* the wordmark */ .sx-after > .d-a.d-so { order: 83; } .sx-after > .d-a[style*='left:993px'] { order: 84; } /* copyright line */ .d-a.d-hd { padding-top: 18px; } /* The social links are 36px icons; on a phone they sit in a row rather than each taking a full-width line. A flex row needs a wrapper the export does not have, so each is inline. */ /* Inline-block does nothing in a flex column, so each icon took a row of its own with white beside it. The first icon carries the band (a box-shadow clipped to its own height, as on .b-btn), and each later one is pulled up beside it. */ .sx-after > .d-a.d-so { width: 44px !important; height: 44px !important; padding: 4px; margin: 12px 0 0 16px; box-sizing: border-box; box-shadow: 0 0 0 100vmax #002209; clip-path: inset(-12px -100vmax -1px); } .sx-after > .d-a.d-so + .d-so { margin: -44px 0 0 64px; box-shadow: none; clip-path: none; } .sx-after > .d-a.d-so + .d-so + .d-so { margin-left: 112px; } /* the third icon (X added 21 Oct) */ .sx-after > .d-a.d-so img { width: 36px; height: 36px; } /* The small logo above "For every big sale" and the star in "4.9 ★ (1,273)" lost their sizes to the column's width:auto and were stretched across the screen. */ .sx-after > img.d-a[src*='d-flogo'] { width: 20.468px !important; height: 25.043px; padding: 32px 20px 14px; box-sizing: content-box; align-self: flex-start; box-shadow: 0 0 0 100vmax #002209; clip-path: inset(0 -100vmax -1px); /* 1px over the next row: no hairline seam at a fractional edge */ } .sx-after > .d-a.d-sm + .d-a.d-sm { padding-top: 12px; } /* The App Store badge is a 166x44 drawing; the column's width:auto stretched it edge to edge. */ .sx-after > .d-a[style*='left:60.32px'] { width: 166px !important; margin: 16px 0 0 20px; align-self: flex-start; box-shadow: 0 0 0 100vmax #002209; clip-path: inset(-16px -100vmax -1px); } /* The star sits in the gap the line leaves for it: 25px after the start of the text, same top. */ .sx-after > .d-a[style*='left:89.15px'] { width: 16px !important; height: 16px !important; margin: -17px 0 0 45.15px; align-self: flex-start; } /* The tag and the wordmark: the wordmark keeps its proportions in what is left beside the tag and lines up with the tag's foot, as at 1440px. */ .sx-after > .d-a[style*='left:47px'] { height: 97.236px !important; padding: 28px 0 24px; box-sizing: content-box; } .sx-after > .d-a[style*='left:47px'] img:first-of-type { left: 20px !important; top: 28px !important; } .sx-after > .d-a[style*='left:47px'] img + img { left: 125.35px !important; top: auto !important; bottom: 24px; width: calc(100% - 145.35px) !important; max-width: 345.707px; height: auto !important; } /* Copyright | Privacy | Terms: the line is set `white-space:pre` inline, and the links were blocks, so each piece and each bar took its own row. */ /* bottom padding keeps the last line clear of the fixed chat button at the end of the page */ .sx-after > .d-a[style*='left:993px'] { white-space: normal !important; padding: 8px 20px 96px; } .sx-after > .d-a[style*='left:993px'] a { display: inline-flex; } /* ── Touch targets (WCAG 2.2 AA, 2.5.8) ─────────────────────────────────────────────── */ .d-ft a, .x-mi, .d-btn, .b-btn, .c-btn { min-height: 44px; display: flex; align-items: center; } .d-btn, .b-btn, .c-btn { justify-content: center; min-height: 48px; } /* Nothing may scroll sideways. `overflow-x:hidden` on
would make the body itself the scroll container, and `position:sticky` on the pinned section would then stick to the body box instead of the viewport — the section would scroll away. `overflow-x:clip` clips without creating a scroll container, so the pin keeps working. */ html, body { overflow-x: clip; } } /* ── Laptop widths, 1024–1439px ───────────────────────────────────────────────────────── The desktop design is a fixed 1440px stage. On a narrower laptop window that stage was wider than the screen, so the page could be dragged sideways and white showed beside the bands (Fateme, 2026-10-07). src/lib/home.ts sets `html.dz` with --dz = window width / 1440 in this range, and the whole page is drawn at that scale: the design is unchanged, only smaller. Under zoom, 100vw is still the real window, so the full-bleed bands (sized `100vw` around the centre) would come out --dz too narrow; inside the scaled page the window is exactly the 1440px stage, so they take the stage. The pinned section's 100vh is divided by --dz for the same reason, so it still fills the window height, and --sxd (the page height it adds) follows. */ html.dz { zoom: var(--dz); --sxd: calc(var(--sxL) + 100vh / var(--dz) - 1024px); } html.dz .x-bleed, html.dz .g-bleed, html.dz .sx, html.dz .b-bleed, html.dz .c-bleed, html.dz .c-fw { margin-left: -720px; width: 1440px; } html.dz .c-rv { width: 1440px; } /* The same full-bleed sizing also sits in inline styles the rules above never reached: the orange "Your first campaign costs nothing" band with its cream half and clipping frame (.a-bleed, .a-abs), and the orange free-plan band, the FAQ band and the footer band (.d-bleed). Under the scale they came out --dz too narrow and shifted, so from 1024 to 1439px the bands ended short of the window and the headline was cut on the left (found 2026-10-22 by a sweep at eleven widths; 1280 and 1366 laptops showed it too). Inline styles need !important; the values are the stage's own, so the page at this scale is the 1440 design exactly. */ html.dz .a-bleed, html.dz .d-bleed { margin-left: -720px !important; width: 1440px !important; } html.dz .a-abs[style*="width:50vw"] { width: 720px !important; } html.dz .a-abs[style*="width:calc(720px + 50vw)"] { width: 1440px !important; } /* The menu's links are 18px tall in the stage, so at this scale about 13px: too small to tap on an iPad held sideways, which gets exactly this view (found 2026-10-23 by the width sweep). Padding taken back by an equal negative margin gives each a 34px (24px on screen) tap area and moves nothing. */ html.dz .x-nav > a { padding: 9px 0; margin: -9px 0; } html.dz .x-dots { background-position: -11.78px 0; } html.dz .sx { height: calc(var(--sxL) + 100vh / var(--dz)); } html.dz .sx-pin { height: calc(100vh / var(--dz)); } /* ── "Six kinds of sale", all widths ──────────────────────────────────────────────────── The design pinned this section for 4.5 extra screen heights and stepped through the six types on scroll, which left visitors stuck in it (Fateme, 2026-10-07). It is now one screen tall and plays itself (script in src/lib/home.ts, transform 12). --sxL is the extra scroll length; at 0 the section is exactly the window and --sxd keeps the page height in step on its own. The active name gets a soft wash that grows left to right with the time it has left (--sxp, 0–1, written by the script), above the design's own green progress line. The wash is the brand green at low opacity, so no new colour enters the page. */ :root { --sxL: 0px; } .sx-li { --sxp: 0; } .sx-li::before { content: ''; position: absolute; left: -12px; top: 4px; bottom: 4px; width: calc(var(--sxp) * (100% + 12px)); border-radius: 6px; background: rgba(115, 224, 49, .12); opacity: 0; pointer-events: none; } .sx-li.on::before { opacity: 1; } @media (max-width: 1023.98px) { .sx-li::before { left: -8px; width: calc(var(--sxp) * (100% + 16px)); } } /* Frames move one by one (each its own transform); the track no longer slides. The green progress line under the active name is gone at her request: the wash is the only timer. */ .sx-trk { transform: none !important; } .sx-fr { transition: transform .85s cubic-bezier(.65,0,.25,1), opacity .6s; } .sx-bar { display: none; } @media (prefers-reduced-motion: reduce) { .sx-fr { transition: none; } } /* The pointer and the press feedback for the preview scenes (src/home/six-kinds.js). The pointer is white with an ink outline so it reads on the dark cards and on the photos. */ .sx-cur { position: absolute; left: -3px; top: -2px; z-index: 5; pointer-events: none; opacity: 0; transform: translate(700px, 520px); transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .3s; } .sx-cur.on { opacity: 1; } .sx-cur svg { display: block; transition: transform .15s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); } .sx-cur.down svg { transform: scale(.82); } .sx-press { transform: scale(.95); filter: brightness(1.12); transition: transform .15s, filter .15s; } @media (prefers-reduced-motion: reduce) { .sx-cur { display: none; } } /* ── Orange band: the label above the report (src/lib/home.ts, transform 14) ───────────────── Small caps-free label in the band's own ink on the cream half, with a brand-green dot, so it reads as a caption for the screenshots rather than a second headline. */ .a-report-label { font-size: 14px; font-weight: 500; letter-spacing: -0.1px; color: #002209; display: flex; align-items: center; gap: 8px; } .a-report-label i { width: 8px; height: 8px; border-radius: 50%; background: #73e031; flex: none; } @media (max-width: 1023.98px) { .a-t > .a-abs[style*='calc(720px'] > .a-report-label { color: #fff; font-size: 15px !important; margin-top: 12px; } } /* "%" in PP Telegraf carries a bar over the top; set it in Inter (src/lib/home.ts, transform 15). */ .pct { font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: 0; } /* Press feedback for the "Three steps" illustrations (src/home/three-steps.js). */ .bi-press { transform: scale(.94); filter: brightness(1.25); transition: transform .15s, filter .15s; } /* Lumos list: the progress line runs down the active card's left edge (src/lib/home.ts, transform 17). On the top edge it sat on the boundary with the card above and read as theirs. */ .lm-bar { top: 0; left: 0; width: 4px !important; height: 0; } .lm-card:not(.on) .lm-bar { height: 0 !important; } /* ── Support team photos (src/lib/home.ts, transforms 18–19) ───────────────────────────────── Each drifting review quote is a small chat message: photo and name, the quote in a bubble under them. The wrapper takes the quote's place (the design's left/top and centring); the bubble keeps .c-q for the letter-hover script but flows inside the wrapper. Colours are the palette's. */ .c-qw { position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: flex-start; gap: 7px; pointer-events: auto; } .c-qh { display: flex; align-items: center; gap: 8px; font: 500 13px/1 'Inter', sans-serif; color: #002209; } .c-qa { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,34,9,.14); } .c-qw .c-qb { position: static; transform: none; margin: 0 0 0 38px; padding: 9px 13px; background: #fff; border: 1px solid rgba(0,34,9,.1); border-radius: 4px 14px 14px 14px; box-shadow: 0 2px 8px rgba(0,34,9,.06); text-align: left; max-width: 100%; box-sizing: border-box; } /* The messages would run under the heading and paragraph. At desktop each message fades as a whole as it nears the centre column and returns on the far side (opacity from --qf, written per message by the script in src/lib/home.ts), so no message is ever shown half cut. */ @media (min-width: 1024px) { .c-qw { opacity: var(--qf, 1); } } @media (max-width: 1023.98px) { /* The quotes are 75–93px tall as messages and sit at y 100–590 in the design's field. A phone shows the field as a band; it now spans those rows (shifted up 80px) instead of the old 300px crop, which cut most messages in half. */ .sx-after > .c-fw { height: 620px !important; } .c-fw-inner { top: -80px; } } /* ── Mobile design pass, 2026-10-23 ───────────────────────────────────────────────────── Fateme: on a phone the page "is full of text that runs into each other and is not beautiful"; redesign every page for mobile, and the approved desktop must not change at all. Everything here is inside the same max-width query as the rest of this file, so 1024px and up is untouched (checked with scripts/desktop-guard.mjs against the build before this pass). What the column lacked was rhythm: sections followed each other with no space, headings sat on the text under them, and labels were as close to the next figure as to their own. The spacing below is one scale (8 / 12 / 20 / 28 / 48px), the same steps the rules above already use. No colour is added: every ground is one the design already paints at desktop. No copy changes. */ @media (max-width: 1023.98px) { /* Stats: each figure and its label read as one item, separated from the next by a hairline (the design's own rgba(0,34,9,.1) rule colour). Before, the label sat 17px under its figure and 0px over the next, so it read as the next figure's caption. */ .sx-after > .g-a[style*='width:345px'] { padding: 20px 0; gap: 6px !important; } .sx-after > .g-a[style*='width:345px'] + .g-a[style*='width:345px'] { border-top: 1px solid rgba(0, 34, 9, .1); } .sx-after > .g-a[style*='width:345px'] .g-sn { font-size: 44px !important; line-height: 1 !important; } .sx-after > .g-a[style*='width:345px'] .g-sd { font-size: 17px; line-height: 1.3; } .sx-after > .g-a[style*='width:345px']:first-of-type { padding-top: 40px; } /* "See yourstore.com on sale": the typewriter box grew and shrank as it typed, so "on sale" and the arrow jumped between one line and two. Now the box takes the rest of the first line and "on sale" opens the second, with the arrow at its right end like a field's submit button. */ .m-own-head { padding-top: 56px !important; } .m-own-head > .a-pp { font-size: 28px !important; } .m-own-head > .a-typed { flex: 1 0 calc(100% - 70px); min-width: 0; overflow: hidden; } .m-own-head > .a-arr { margin-left: auto; } /* "Three steps": space above the heading, between it and the first step, and between steps. */ .sx-after > .b-abs:not(.b-h2):not(.b-sub) { padding: 56px 20px 28px !important; } .sx-after > .b-abs:not(.b-h2):not(.b-sub) > :last-child { margin-top: 12px; } .b-cardtext { gap: 8px; } .sx-after > div[style*='display:contents'] > .b-ill, .b-ill { margin-bottom: calc(236.124px * (var(--m-b) - 1) + 28px); } .sx-after > div[style*='display:contents'] { padding-bottom: 28px; gap: 12px; } /* "Say it once. Lumos does the rest.": the heading touched the top of its band. */ .sx-after > .b-abs.b-h2 { padding-top: 48px !important; } .sx-after > .b-abs.b-sub { padding-top: 12px !important; padding-bottom: 24px !important; line-height: 1.45 !important; } .sx-after > .b-btn { margin-bottom: 40px; } /* Lumos features: three cards. At desktop each is a card, its text and an invisible button laid over each other; in the column they were three blocks whose text ran past a 92px card. A grid with one column lets all three share a cell, so the card grows with its text and the button covers exactly the card. */ .stage > .sx-after > .stage-clip, .sx-after > .stage-clip { display: grid; grid-template-columns: minmax(0, 1fr); } .stage-clip > .lm { grid-row: 1; margin: 0 0 0; } .stage-clip > .lm-foot-note { grid-row: 2; padding: 8px 20px 28px; line-height: 1.4; } .stage-clip > :nth-child(1 of .lm-card), .stage-clip > :nth-child(1 of .c-feat), .stage-clip > :nth-child(1 of .lm-hit) { grid-row: 3; } .stage-clip > :nth-child(2 of .lm-card), .stage-clip > :nth-child(2 of .c-feat), .stage-clip > :nth-child(2 of .lm-hit) { grid-row: 4; } .stage-clip > :nth-child(3 of .lm-card), .stage-clip > :nth-child(3 of .c-feat), .stage-clip > :nth-child(3 of .lm-hit) { grid-row: 5; } .stage-clip > .c-a.lm-card, .stage-clip > .lm-hit { width: auto !important; height: auto !important; min-height: 0; margin: 0 20px 12px !important; grid-column: 1; } .stage-clip > .c-a.lm-card { border-radius: 12px; border: 1px solid rgba(0, 34, 9, .1); } .stage-clip > .c-feat { grid-column: 1; width: auto !important; margin: 0 20px 12px !important; padding: 18px 18px 20px; position: relative !important; z-index: 1; background: none !important; } .stage-clip > .lm-hit { z-index: 2; } .stage-clip > :nth-child(3 of .lm-card), .stage-clip > :nth-child(3 of .c-feat), .stage-clip > :nth-child(3 of .lm-hit) { margin-bottom: 48px !important; } /* "Someone who knows your store" and "What merchants say": one pale ground from the support heading to the rating, with the column's inset as padding. As separate boxes with margins between them, white stripes cut the ground into four pieces. A 20px centred paragraph is hard to read on a phone, so the block reads from the left like the rest of the column. */ .stage-clip > .c-a:not(.lm-card) { width: 100% !important; margin: 0 !important; padding: 0 20px !important; box-sizing: border-box; text-align: left !important; align-items: flex-start !important; } .stage-clip > .c-a:not(.lm-card) :is(h2, p) { text-align: left !important; } .stage-clip > .c-a:not(.lm-card):has(> h2 + p) { padding-top: 48px !important; gap: 12px; } .stage-clip > .c-a:not(.lm-card) > p { font-size: 17px !important; line-height: 1.45 !important; } .stage-clip > .c-a[style*='translateX'] { justify-content: flex-start !important; gap: 12px; padding-top: 24px !important; } .stage-clip > .c-a:not(.lm-card):has(> h2 + div) { padding-top: 48px !important; padding-bottom: 40px !important; gap: 16px; } /* Reviews: white cards on the band's pale ground, which the desktop band paints behind them (.c-bleed, #f5f6ee). Without it the cards were white on white, so each review read as loose text cut off at both screen edges. */ .sx-after > .c-rv { background: #f5f6ee; box-shadow: 0 -24px 0 #f5f6ee, 0 24px 0 #f5f6ee; margin: 24px 0; } /* 13px review text is the design's size for a 1440px card row; on a phone it read as small print. The longest review (123 characters) still ends above the stars at 15px. */ .c-rc .c-ct { font-size: 15px; line-height: 1.4; } /* the step drawings sit on the pale ground; in the dark theme pale grounds are #0B2C14 (dark.css) */ :root[data-theme="dark"] .b-ill { background: #0B2C14; } :root[data-theme="dark"] .sx-after > .c-rv { background: #0B2C14; box-shadow: 0 -24px 0 #0B2C14, 0 24px 0 #0B2C14; } :root[data-theme="dark"] .sx-after > .g-a[style*='width:345px'] + .g-a[style*='width:345px'], :root[data-theme="dark"] .stage-clip > .c-a.lm-card { border-color: rgba(255, 255, 255, .1); } /* Closing band: the sentence was set at 1.2 like the 20px desktop line, so its three lines ran into each other. Same values as components/ClosingBand.astro on every other page. */ .sx-after > .d-a.d-cta { padding: 48px 20px; gap: 24px; } .d-sub { font-size: 17px !important; line-height: 1.45 !important; } .d-h2 { line-height: 1.15 !important; } /* Running text kept the design's 1.2 (drawn for single desktop lines): on a phone each of these wraps to three to seven lines that touch. One reading measure for all of them. */ .x3-hero > p, .sx-head .g-sub, .sx-d, .m-own-head > .a-in, .a-in p, .b-abs > p.b-sub, .b-cardbody, .c-feat .c-p, .d-ans { line-height: 1.45 !important; } .d-fq span { line-height: 1.3 !important; } /* The step texts keep the desktop's fixed 102.57px box. At 1.45 a step that wraps to one more line overflowed it and its last line sat on the drawing below (found by the review at 320–390px, "Pick products and publish"). On a phone the box takes its text's height. */ .sx-after > div[style*='display:contents'] > .b-cardtext { height: auto !important; } /* FAQ: the heading sat on the first question. */ .sx-after > h2.d-a { padding: 48px 20px 20px !important; line-height: 1.15 !important; } } /* On a tablet the whole sentence fits one line, so the field goes back to its own width there. */ @media (min-width: 600px) and (max-width: 1023.98px) { .m-own-head > .a-typed { flex: 0 1 auto; min-width: 6.2em; } } /* ── Compact phone layout, 2026-10-24 ────────────────────────────────────────────────────── Fateme, 24 Oct: on a phone the site is responsive but "not chic, not mobile friendly"; she asked for a more compact phone design with less text, the desktop unchanged. The page was 13 phone screens. Below 641px only (tablets keep the column above): - "Three steps" is a row the thumb swipes, one step per card, the next one peeking, with position dots (src/lib/rails.js, injected by src/lib/home.ts transform 33); - the three figures are one compact list, figure left and label right; - the second report card in the orange band, a mock-up, is not shown (the revenue tile above it already shows what you see after a campaign); it stays in the page. The floating quote field stays: several of its quotes appear nowhere else on the page (review, 2026-10-24); - the footer's three link lists fold into rows that open on a tap (transform 33), and its small tag mark goes, as on every other page (the wordmark below is the same logo). No colour is added: every ground is one the design already paints. No copy changes. */ @media (max-width: 640px) { /* Three steps: one grid, a column per step, text over its drawing, scrolled sideways. --col is a card's width: 86% of the column, so the next card shows at the edge. */ .sx-after > div[style*='display:contents'] { --rail: 1; --col: calc((100vw - 40px) * .86); display: grid !important; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: var(--col); gap: 0 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 0 20px 4px !important; scrollbar-width: none; } .sx-after > div[style*='display:contents']::-webkit-scrollbar { display: none; } .sx-after > div[style*='display:contents'] > :nth-child(1 of .b-cardtext) { grid-area: 1 / 1; } .sx-after > div[style*='display:contents'] > :nth-child(2 of .b-cardtext) { grid-area: 1 / 2; } .sx-after > div[style*='display:contents'] > :nth-child(3 of .b-cardtext) { grid-area: 1 / 3; } .sx-after > div[style*='display:contents'] > :nth-child(1 of .b-ill) { grid-area: 2 / 1; } .sx-after > div[style*='display:contents'] > :nth-child(2 of .b-ill) { grid-area: 2 / 2; } .sx-after > div[style*='display:contents'] > :nth-child(3 of .b-ill) { grid-area: 2 / 3; } .sx-after > div[style*='display:contents'] > .b-cardtext { width: auto !important; scroll-snap-align: start; padding: 18px 18px 14px; background: #f5f6ee; border-radius: 10px 10px 0 0; } .sx-after > div[style*='display:contents'] > .b-ill, .b-ill { --m-b: calc(var(--col) / 402.444px); margin-bottom: calc(236.124px * (var(--m-b) - 1)); border-radius: 0 0 10px 10px; } :root[data-theme="dark"] .sx-after > div[style*='display:contents'] > .b-cardtext { background: #0B2C14; } .sx-after > .b-abs:not(.b-h2):not(.b-sub) { padding: 44px 20px 20px !important; } /* the dots the script adds after the row join the column right under it */ .sx-after > .m-dots { order: 32; margin: 14px 0 44px; } .m-dots { display: flex; justify-content: center; gap: 6px; padding: 0; height: 6px; color: #002209; } :root[data-theme="dark"] .m-dots { color: #fff; } .m-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: .22; transition: width .2s ease, opacity .2s ease; } .m-dots i.on { width: 18px; opacity: .85; } /* The three figures: figure left, label right, one hairline between rows. */ .sx-after > .g-a[style*='width:345px'] { flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 16px !important; padding: 14px 0 !important; } .sx-after > .g-a[style*='width:345px']:first-of-type { padding-top: 32px !important; } .sx-after > .g-a[style*='width:345px'] .g-sn { flex: none; font-size: clamp(24px, 7.7vw, 30px) !important; } .sx-after > .g-a[style*='width:345px'] .g-sd { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 1.35; text-align: right; } .g-bleed { padding: 12px 0 20px; } /* Orange band: the revenue tile stays, the per-campaign report card under it is not shown. */ .a-t > .a-abs > .a-c[style*='width:403.803px'] { display: none !important; } /* "Say it once. Lumos does the rest." and the support block: a little less air. */ .sx-after > .b-abs.b-h2 { padding-top: 40px !important; } .sx-after > .b-btn { margin-bottom: 32px; } .stage-clip > .c-a:not(.lm-card):has(> h2 + p) { padding-top: 40px !important; } .stage-clip > .c-a:not(.lm-card):has(> h2 + div) { padding-top: 40px !important; padding-bottom: 28px !important; } .stage-clip > :nth-child(3 of .lm-card), .stage-clip > :nth-child(3 of .c-feat), .stage-clip > :nth-child(3 of .lm-hit) { margin-bottom: 36px !important; } .sx-after > h2.d-a { padding: 40px 20px 16px !important; } /* Footer: the small tag mark goes (the wordmark is the same logo); folded link lists. */ .sx-after > img.d-a { display: none !important; } .m-facc .d-a.d-hd { padding-top: 0; border-top: 1px solid rgba(255, 255, 255, .16); } .d-hd > .fAcc { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: left; } .d-hd > .fAcc::after { content: '+'; font-size: 22px; line-height: 1; letter-spacing: 0; transition: transform .2s ease; } .d-hd > .fAcc[aria-expanded='true']::after { transform: rotate(45deg); } .d-hd > .fAcc:focus-visible { outline: 2px solid #73e031; outline-offset: 2px; } .m-facc .d-a.d-ft.m-shut { display: none !important; } .m-facc .d-a.d-ft { padding-bottom: 12px; } .m-facc .sx-after > .d-a[style*='left:1072px'].d-ft, .m-facc .sx-after > .d-a.d-hd[style*='left:1072px']:has(> .fAcc[aria-expanded='false']) { border-bottom: 1px solid rgba(255, 255, 255, .16); } .m-facc .sx-after > div.d-a.d-sm { padding-top: 28px; } } /* ── Centred openings and lighter step cards, 2026-10-24 (second round) ─────────────────────── Asked on 24 Oct after the compact pass: on a phone the hero is centred but every section after it starts at the left, so the page reads as two designs; the buttons in the orange band sit off to the left; there is an empty strip above the first section; and the step cards are mostly text. - The strip was the homepage's skip link: transform 6 adds it unstyled, so it took 20px of the column above the hero (at desktop width the fixed header covers it). Below 1024px it is now the usual hidden-until-focused link. - Each section's opening (heading, a short intro, its button) is centred on a phone, as the hero is. Running text inside cards, lists, the FAQ and the footer stays left-aligned: long centred lines are hard to follow. - The step cards show the step's name over its drawing; the sentence under the name, and the Lumos paragraph that the three Lumos cards repeat, stay in the page but are not shown on a phone. Desktop untouched: every rule is below 1024px (skip link) or below 641px (the rest). */ @media (max-width: 1023.98px) { a.skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 10px 14px; border-radius: 4px; background: #002209; color: #fff; font: 500 15px/1.2 'Inter', sans-serif; text-decoration: none; } a.skip:focus { left: 8px; } } @media (max-width: 640px) { .stage > .x-abs { text-align: center; } .sx-head { align-items: center; text-align: center; } .a-t > .a-abs > :is(p.a-pp, div.a-in, p.a-report-label) { text-align: center; } .a-t > .a-abs > p.a-report-label { align-self: center; justify-content: center; } .a-t > .a-abs[style*='calc(720px'] > a.a-in { align-self: center; } /* the 4.9 row is scaled to the column; centred, it scales about its middle */ .stage-clip > .c-a:not(.lm-card):has(> h2 + div) > div:last-child { transform-origin: 50% 0 !important; } .sx-after > .b-abs:not(.b-h2):not(.b-sub) { align-items: center; text-align: center; } .sx-after > .b-abs.b-h2 { text-align: center; } .sx-after > .b-abs.b-sub { display: none !important; } .sx-after > .b-abs.b-h2 { padding-bottom: 24px !important; } .stage-clip > .c-a:not(.lm-card) { text-align: center !important; align-items: center !important; } .stage-clip > .c-a:not(.lm-card) :is(h2, p) { text-align: center !important; } .stage-clip > .c-a[style*='translateX'] { justify-content: center !important; } .sx-after > h2.d-a { text-align: center; } /* step cards: the name, centred, over the drawing */ .sx-after > div[style*='display:contents'] > .b-cardtext { align-items: center; text-align: center; padding: 16px 14px 4px; } .sx-after > div[style*='display:contents'] > .b-cardtext > .b-cardbody { display: none; } }