. Nothing about that is specific to * pricing, and it is shared with About Us, STARS and Contact. */ /* --------------------------------------------------------------------------- The accent fallback ------------------------------------------------------------------------ */ /* * On :root, never on the body class. The journey engine publishes * --srk-accent-live inline on ; a declaration on a BODY class wins for * the whole subtree and silently kills the journey. That cost a build on About * Us - the engine ran, computed a new accent every frame, and nothing on screen * changed. This file is enqueued only for templates/company-pricing.php, so * :root reaches no other page. * * Its real job is the no-JS case, where the engine never runs and every kit * component would otherwise fall back to --srh-accent green. */ :root { --srk-accent-live: #4D8AFF; } /* --------------------------------------------------------------------------- The ground behind the ground ------------------------------------------------------------------------ */ /* * THE DARK IS A FIXED LAYER, AND THE PAGE UNDER IT IS WHITE. * * `.srh-ground` is `position: fixed; inset: 0`, so it is exactly one viewport * tall and no more. Every pixel it does not cover falls through to , * which Elementor's kit paints rgb(255, 255, 255). A reader never sees that, * because the fixed layer always covers the viewport a reader is looking at. * * Anything that renders the page TALLER than the viewport does see it: a * full-page or element capture, a print stylesheet, a browser that mis-sizes * the fixed layer for a frame. It arrives as a white wash starting exactly at * y = viewport height and running to the foot of the render, which reads as a * gradient because `.srh-glow`'s lower lobe softens the boundary. Measured on * this page: panel 1160px tall, viewport 900px, wash from y=900 down, and the * pair captions sitting in it were washed to illegible. * * One line fixes it and changes nothing a reader sees: give the page the same * colour the fixed layer paints, so the fallback is the ground rather than * white. `--srk-bg` is the journey engine's live value and `--srh-ground` the * flat fallback, which is the same pair `.srh-ground` itself resolves. */ .srpr-page { background: var(--srk-bg, var(--srh-ground)); } /* --------------------------------------------------------------------------- Beat shapes ------------------------------------------------------------------------ */ .srpr-page .srpr-centre { text-align: center; } .srpr-page .srpr-centre p { margin-inline: auto; } .srpr-page .srpr-centre-actions { justify-content: center; } .srpr-page .srpr-centre .srpr-closer-lockup { margin-inline: auto; } /* Left-aligned, like the narrow beat on About Us: .srk-scene-inner carries margin-inline:auto, so a width cap alone centres the column and leaves the heading at neither the margin nor the centre. */ .srpr-page .srpr-narrow { max-width: 760px; margin-inline: 0; } /* --------------------------------------------------------------------------- The two beats that had nothing beside them --------------------------------------------------------------------------- c-custom and c-ready were paragraphs on a narrow measure with the right half of the scene empty, on a page where every other beat carries a table or a capture. Same split for both: copy left, the thing itself right. The copy keeps its measure inside its own column rather than through .srpr-narrow, which caps the whole inner and would leave the shot with nowhere to go. One column until 900, and the shot follows the copy there, because the words are the argument and the picture is the evidence. */ .srpr-page .srpr-split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { .srpr-page .srpr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } /* The QR is a fixed-size object, so its column takes only what it needs. */ .srpr-page .srpr-split:has(.srpr-qr) { grid-template-columns: minmax(0, 1fr) auto; } } /* * A PHOTOGRAPH IN A SPLIT, which until now this page only ever put a clip in. * sr_scene_video_frame() brings its own ground, hairline and shadow; a bare * brings none, so it gets the same three here and the two halves of the * page read as the same object. */ .srpr-page .srpr-split-shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(234, 240, 255, 0.14); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38); } /* --------------------------------------------------------------------------- The Solutions spec list ------------------------------------------------------------------------ */ /* * SIX FIGURES THAT WERE TWO PARAGRAPHS. * * They were prose: "A$12.95 per individual and A$34.95 per entity ... ongoing * sanctions monitoring is A$3 per client per month. DVS is an option you switch * on: A$2 for a single document check, A$4 for a 2+2 check, A$5 for both." Every * one of those is still on the page and none has changed. A definition list is * what that content already was, so it is marked up as one and a reader can find * a single figure without reading a sentence to its end. * * The rows are grid rather than the dl's own flow because a dt and its dd belong * on one line at reading widths and stacked on a phone, and that is a column * count rather than a float. */ .srpr-page .srpr-spec { margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; border-top: 1px solid rgba(234, 240, 255, 0.14); } .srpr-page .srpr-spec-row { display: grid; grid-template-columns: 1fr; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid rgba(234, 240, 255, 0.14); } @media (min-width: 560px) { .srpr-page .srpr-spec-row { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); align-items: baseline; } } .srpr-page .srpr-spec dt { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(234, 240, 255, 0.52); } .srpr-page .srpr-spec dd { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(234, 240, 255, 0.92); } .srpr-page .srpr-split-copy { max-width: 62ch; } /* --------------------------------------------------------------------------- The QR tile --------------------------------------------------------------------------- A white ground is not decoration here: a QR needs a light quiet zone around it to scan reliably, and these scenes are dark. The padding IS the quiet zone, so it does not shrink below what a camera needs. */ .srpr-page .srpr-qr { margin: 0; display: grid; justify-items: center; gap: clamp(12px, 1.4vw, 18px); } .srpr-page .srpr-qr-tile { background: #ffffff; border-radius: 18px; padding: clamp(14px, 1.6vw, 20px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); line-height: 0; } .srpr-page .srpr-qr-tile img { display: block; width: clamp(168px, 15vw, 232px); height: auto; } .srpr-page .srpr-qr-note { max-width: 34ch; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.5; color: var(--srh-ink-soft); text-align: center; } .srpr-page .srpr-hero h1 { /* * THE REFERENCE HERO SCALE. Rohan, 2026-09-02, item 1.4: "The KYC page hero * is the reference ... Bring every other page hero to that scale", and at * 2.10b and 2.11 he named the two pages that were visibly oversized. * * Measured at 1440 before this: KYC and every industry page 60px, every * product page 62px, and FOUR pages at 93.6px. --srk-display-l is * clamp(44px, 6.5vw, 96px), so at 1440 it lands 56 per cent above the * reference, which is what "too large" looked like. * * The product pages had already made this move (see the note beside * .srm-hero h1); these four were left behind. --srk-display-m is * clamp(32px, 4.6vw, 62px), which is 62px at 1440, within 3 per cent of the * KYC reference and an existing token rather than a new number. */ font-size: var(--srk-display-m); margin-inline: auto; } .srpr-page .srk-scene h2 { font-size: var(--srk-display-m); margin-bottom: 0.5em; } .srpr-page .srpr-closer-lockup { display: block; width: min(320px, 60%); height: auto; margin: 0 0 clamp(24px, 4vh, 44px); } /* --------------------------------------------------------------------------- The price table ------------------------------------------------------------------------ */ /* * It scrolls in its own box, and the page never does. * * Standing project rule, and the harness checks it at four widths: the body * must not scroll horizontally. A four-column price table at 390px cannot obey * that on its own, so the overflow is given to a container that owns it. The * table keeps a min-width so the columns stay legible inside that scroll rather * than collapsing into a word-per-line mess. */ .srpr-page .srpr-tablewrap { margin-top: clamp(24px, 4vh, 44px); overflow-x: auto; /* A scroll container needs to be focusable to be reachable by keyboard, and a focusable element needs a visible focus ring. Both are handled below. */ border: 1px solid var(--srh-hairline); border-radius: var(--srh-radius, 16px); background: var(--srh-surface); } /* * The currency line, Tim 119. It sits between the standfirst and the table and * it is deliberately quiet: the reader who already knows the currency should be * able to skip it, and the one who does not should find it without hunting. * Existing tokens only, no new design values. */ .srpr-page .srpr-currency { color: var(--srh-ink-soft); font-size: var(--srk-body); line-height: 1.55; margin: 0 0 1em; max-width: 62ch; } .srpr-page .srpr-tablewrap:focus-visible { outline: 2px solid var(--srk-accent-live, var(--srh-accent)); outline-offset: 2px; } .srpr-page .srpr-table { width: 100%; min-width: 520px; border-collapse: collapse; text-align: left; } /* * The standfirst sits above the scroll container now rather than inside it as a * . See the note in templates/company-pricing.php: inside, it inherited * the table's 460px min-width and ran off the right edge of a 390px screen. */ .srpr-page .srk-scene > .srk-scene-inner > .srk-lede { margin-top: 0.6em; } /* * 13px floor, not --srk-eyebrow, which bottoms out at 12 on a phone. A column * header is what tells a reader which number they are looking at; it is not * caption furniture. */ .srpr-page .srpr-table thead th { font-size: clamp(13px, 0.9vw, 14px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--srk-accent-live, var(--srh-accent)); padding: clamp(16px, 2.4vw, 24px) clamp(16px, 2.4vw, 26px) 12px; border-bottom: 1px solid var(--srh-hairline); white-space: nowrap; } .srpr-page .srpr-table tbody th, .srpr-page .srpr-table tbody td { padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px); border-bottom: 1px solid var(--srh-hairline); vertical-align: top; font-weight: 400; } .srpr-page .srpr-table tbody tr:last-child th, .srpr-page .srpr-table tbody tr:last-child td { border-bottom: 0; } .srpr-page .srpr-feature { display: block; color: var(--srh-pale); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; margin-bottom: 0.35em; } .srpr-page .srpr-desc { display: block; color: var(--srh-ink-soft); font-size: var(--srk-body); line-height: 1.55; max-width: 62ch; } /* * The price column is right-aligned so the numbers stack into a column a reader * can compare down, which is the entire reason a price list is a table. */ .srpr-page .srpr-col-price { text-align: right; white-space: nowrap; } .srpr-page .srpr-price { display: block; color: var(--srh-pale); font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.2; /* Tabular figures, so $0.65 and $0.85 line up digit for digit. Without this the proportional figures of Inter Tight make a right-aligned money column look ragged. */ font-variant-numeric: tabular-nums; } /* * 13px floor rather than --srk-eyebrow, which bottoms out at 12 on a phone. * The mobile pass counted eight sub-13px text nodes on this page and all eight * were these unit labels. "per check" is what makes a price mean anything, so * it is not decoration and should not be set at caption size. */ .srpr-page .srpr-unit { display: block; color: var(--srh-ink-soft); font-size: clamp(13px, 0.9vw, 14px); letter-spacing: 0.04em; margin-top: 0.3em; } /* --------------------------------------------------------------------------- Narrow ------------------------------------------------------------------------ */ @media (max-width: 700px) { /* * Below this the description is what has to give, not the price. A feature * name and its price are the row; the sentence explaining it is support, and * at 390px it was taking four lines per row and pushing the table to twice * the height of the screen. */ .srpr-page .srpr-desc { font-size: 0.9375rem; } /* * NO MIN-WIDTH ON A PHONE, and no sideways scroll. * * The 460px floor is right on a laptop and was actively harmful at 390: the * whole price column sat outside the scroll container, so the page showed a * price table with no prices in it unless the reader thought to swipe the * table sideways. Nobody does. Caught on the mobile pass. * * What makes it fit is releasing the nowrap on the price cell. "per extra * document" held that column at about 150px on its own; wrapping the unit * under the figure costs one line and gives the feature column back the * space it needs. The table keeps its markup and its semantics either way. */ .srpr-page .srpr-table { min-width: 0; } .srpr-page .srpr-col-price { white-space: normal; } .srpr-page .srpr-table thead th, .srpr-page .srpr-table tbody th, .srpr-page .srpr-table tbody td { padding-inline: 14px; } } /* --------------------------------------------------------------------------- The hero, now that it carries the workflow it prices ------------------------------------------------------------------------ */ /* * The hero was centred, which was right for a heading and a price and wrong the * moment it gained a device beside it: a centred column and a canvas cannot * share a row without one of them looking like an afterthought. * * Copy left, evidence right, which is what every other hero on the site does. */ .srpr-page .srpr-hero-split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; } @media (min-width: 980px) { .srpr-page .srpr-hero-split { /* * 640, not 480. * * This canvas is twelve nodes in a square 1180px capture. At 480 the node * labels were unreadable, which is the same defect Rohan called out on the * About Us Link slide: a screen too small to be evidence of anything is * just texture. At 640 the flow and its labels both read. */ grid-template-columns: 1fr minmax(0, clamp(300px, 42vw, 640px)); } /* The inner cap lifts so the width goes to the canvas rather than off the copy, the same trade the About Us hero makes. */ .srpr-page .srpr-hero .srk-scene-inner { max-width: 1420px; } } .srpr-page .srpr-hero-copy { text-align: left; } .srpr-page .srpr-hero-copy .srk-lede { margin-inline: 0; max-width: 52ch; } .srpr-page .srpr-hero-actions { justify-content: flex-start; } /* The centred treatment is still what the CLOSER wants. */ .srpr-page .srpr-hero h1 { margin-inline: 0; max-width: 16ch; } /* --------------------------------------------------------------------------- The question, and the eight answers ------------------------------------------------------------------------ */ /* * THE HERO IS ONE COLUMN. .srpr-hero-split was a two column grid whose second * column held a canvas clip. The clip is gone, and a two column grid with one * child leaves the copy in a 1fr beside an empty 640px: a slogan with a vacant * half next to it. */ .srpr-page .srpr-hero-ask { display: block; } .srpr-page .srpr-hero-ask .srk-lede { margin-inline: 0; max-width: 60ch; } .srpr-page .srpr-hero-ask .srpr-hero-sub { margin-inline: 0; } .srpr-page .srpr-hero-actions { justify-content: flex-start; } .srpr-hero-sub { margin: 14px 0 0; max-width: 56ch; color: rgba(234, 240, 255, 0.74); } /* --------------------------------------------------------------------------- The choices, as tiles ------------------------------------------------------------------------ */ /* * THEY WERE EIGHT GREY PILLS AND THAT IS WHAT WAS WRONG WITH THEM. * * A row of same-sized text pills with a chevron on each is the shape of a * settings menu, and this is the page's whole proposition. A tile carries a * picture of the thing, its name and what it costs, which is the three questions * a reader arrives with, and it previews the panel it opens. * * LINKS, NOT TABS, unchanged and still the point. Each is an anchor to a scene, * so picking one turns the page to it, the kit's chevron walks the same stops, * the back button returns, and none of it needs script. */ .srpr-choices { list-style: none; margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0; display: grid; gap: clamp(10px, 1.1vw, 16px); grid-template-columns: 1fr; } @media (min-width: 600px) { .srpr-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .srpr-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* * SCOPED TO .srpr-root, AND THE SCOPE IS LOAD BEARING. A bare class loses to a * global rule for links and labels elsewhere in the cascade. Measured: unscoped, * these came out rgb(10,5,87) at 12px on a near black ground. */ .srpr-root .srpr-tile { position: relative; display: grid; grid-template-rows: auto auto auto; gap: 0; height: 100%; padding: 14px 14px 16px; overflow: hidden; isolation: isolate; border-radius: 16px; border: 1px solid rgba(234, 240, 255, 0.18); background: rgba(234, 240, 255, 0.05); color: rgba(234, 240, 255, 0.92); text-decoration: none; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; } /* --------------------------------------------------------------------------- The industry silhouette behind the still ------------------------------------------------------------------------ */ /* * THE INDUSTRY'S OWN MARK, AND IT IS THE GROUND RATHER THAN AN OBJECT. * * Same mechanism as .srd-hub-art on the demo hub, deliberately: a MASK, not an * image, so the SVG supplies the shape and this rule supplies the colour. The * files say so themselves. One file serves any palette and the mark cannot * clash with the tile it sits in. * * Anchored bottom right, bled off both edges and clipped by the tile's radius, * so it reads as texture at arm's length and as a picture up close. It is * behind the still on the z axis and out of the labels' way on the x. * * `isolation: isolate` on the tile is what keeps z-index: -1 inside the tile * rather than punching through to the scene behind it, which is what happens to * a negative z-index in the root stacking context. */ /* * IT WAS INVISIBLE, AND THE GEOMETRY IS WHY RATHER THAN THE OPACITY ALONE. * * At min(64%, 210px) anchored bottom right, the mark was 210px square in the * bottom corner of a 316 by 306 tile. The still is opaque white and covers the * top 70 percent, so the only part of the mark that could ever be seen was a * sliver beside the price, and that sliver was at 0.14. It read as nothing. * * It is the GROUND now: 128 percent of the tile's width, bled off the right and * the bottom, so the shape crosses the whole card behind the device instead of * hiding in a corner. Two edges, not four, so it still reads as a mark that has * been cropped rather than as a texture tile. * * 0.18 HERE AND 0.34 BELOW, and the difference is whether the mark can be kept * off the labels. See the @supports block: where it can, it runs at 0.34, which * is the first value where the cocktail glass and the bank columns read as * objects rather than as a smudge. Where it cannot, it runs at 0.18, which is * the most the price can carry behind it and still clear 4.5 to 1. */ .srpr-tile-art { position: absolute; right: -22%; bottom: -16%; z-index: -1; inline-size: 128%; aspect-ratio: 1; background: var(--srpr-tile-accent, #4D8AFF); opacity: 0.18; -webkit-mask-image: var(--srpr-art); mask-image: var(--srpr-art); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; transition: opacity 320ms ease, transform 420ms ease; } /* * THE MARK STOPS BEFORE THE LABELS, WHICH IS WHAT BUYS THE OPACITY. * * At 0.34 across the whole tile the price read 3.68 to 1 at rest and 2.99 on * hover, against a 4.5 floor. Measured, not assumed. The choice was to dim the * mark back to nothing, brighten the price and lose its secondary weight, or * take the mark off the text. This takes it off the text. * * A second mask layer, a vertical gradient, intersected with the shape. The * label band begins at 0.754 of this element's height and the device's lower * edge is at 0.72, both measured, so the fade runs 66 to 75 percent: the mark * is at full strength behind and around the device and is gone by the time the * category name starts. * * INTERSECT IS THE WHOLE TRICK AND IT IS ALSO THE RISK. Without it the two * layers ADD, and the gradient would mask IN a solid accent rectangle over most * of the tile, which is the same failure the @supports guard above the base * rule exists to prevent. So the second layer and the higher opacity are both * inside this query, and a browser that cannot composite keeps the plain shape * at the opacity the labels can carry. */ @supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) { .srpr-tile-art { opacity: 0.34; -webkit-mask-image: var(--srpr-art), linear-gradient(to bottom, #000 0 73%, rgba(0, 0, 0, 0) 76.5%); mask-image: var(--srpr-art), linear-gradient(to bottom, #000 0 73%, rgba(0, 0, 0, 0) 76.5%); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-position: center, center; mask-position: center, center; -webkit-mask-size: contain, 100% 100%; mask-size: contain, 100% 100%; -webkit-mask-composite: source-in; mask-composite: intersect; } } .srpr-root .srpr-tile:hover .srpr-tile-art, .srpr-root .srpr-tile:focus-visible .srpr-tile-art { opacity: 0.44; transform: translate(-3px, -4px) scale(1.03); } /* * If a browser cannot mask it would paint a solid accent block across the * corner of the tile, which is far worse than no silhouette. Hide it unless * masking is actually supported. Same guard, same reason, as demo-hub.css. */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .srpr-tile-art { display: none; } } /* * THE PICTURE IS A WINDOW ON THE TOP OF A PHONE SCREEN, not the whole screen. * The stills are 400x866, which is 1:2.2, and eight of those across a hero is a * wall of columns. A fixed 4:3 window with the image pinned to the top shows the * status bar and the first rows, which is the part that differs between one * category and the next, and it keeps every tile the same height whatever the * clip's own shape is. * * INSET AND DEVICE SHAPED now that there is a ground behind it. Full bleed to * the tile edge, the still WAS the tile and there was nowhere for a silhouette * to be. Pulled in by the tile's padding with its own radius and a hairline, it * reads as a device sitting on the industry rather than as a banner. * * NARROWER THAN THE TILE, and that is the second half of making the mark * visible. At full column width the device covered every pixel the mark could * have used, so the only ground left was the label band, which is the one place * the mark cannot be. * * 68 PERCENT, ARRIVED AT BY LOOKING RATHER THAN BY TASTE. At 82 the side * margins were 28px and the mark read as a hairline down each edge. At 68 they * are 50px, and because the shot keeps its 4:3 ratio the height falls with the * width, which opens the band between the device and the labels as well. That * band is where the mark does most of its work. */ .srpr-tile-shot { position: relative; z-index: 1; display: block; width: 68%; margin-inline: auto; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-radius: 10px; border: 1px solid rgba(234, 240, 255, 0.16); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.44); } .srpr-tile-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* * THE LABELS GET THEIR OWN STACKING LEVEL, not because they overlap the * silhouette by design but because they overlap it by geometry: the mark is * anchored bottom right and the price sits bottom left. Measured contrast with * the mark behind the text is reported in the pass notes. */ .srpr-root .srpr-tile-who { position: relative; z-index: 1; margin: 14px 2px 0; font-size: 16px; font-weight: var(--weight-semibold, 600); line-height: 1.25; color: #eaf0ff; } .srpr-root .srpr-tile-price { position: relative; z-index: 1; margin: 4px 2px 0; font-size: 13px; line-height: 1.3; color: rgba(234, 240, 255, 0.62); } .srpr-root .srpr-tile:hover, .srpr-root .srpr-tile:focus-visible { background: rgba(234, 240, 255, 0.11); border-color: var(--srk-accent-live, #4D8AFF); transform: translateY(-2px); } .srpr-root .srpr-tile:hover .srpr-tile-price, .srpr-root .srpr-tile:focus-visible .srpr-tile-price { color: rgba(234, 240, 255, 0.86); } /* The focus ring is on the tile and not on the picture inside it, because the tile is the target. outline-offset pulls it clear of the 16px radius. */ .srpr-root .srpr-tile:focus-visible { outline: 2px solid var(--srk-accent-live, #4D8AFF); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .srpr-root .srpr-tile { transition: background 140ms ease, border-color 140ms ease; } .srpr-root .srpr-tile:hover, .srpr-root .srpr-tile:focus-visible { transform: none; } /* The silhouette still brightens on approach, it just stops moving. A colour change is not vestibular motion; a mark lurching on eight tiles is. */ .srpr-tile-art { transition: opacity 320ms ease; } .srpr-root .srpr-tile:hover .srpr-tile-art, .srpr-root .srpr-tile:focus-visible .srpr-tile-art { transform: none; } } /* --------------------------------------------------------------------------- The panel ------------------------------------------------------------------------ */ /* * ONE SCREEN IS A FLOOR, NOT A CEILING, AND THE PAIR IS WHY. * * A fixed height with overflow hidden made the screen absolute and the content * lost every argument with it. The pair needs room, so the panel grows to fit * it and the page scrolls a little further. Nothing is ever clipped. */ @media (min-width: 1024px) { .srk-page.srk-flow .srpr-panel { min-height: calc(100svh - var(--srk-header-h, 0px)); height: auto; box-sizing: border-box; overflow: visible; padding-block: var(--srpr-panel-pad, 16px); display: flex; align-items: center; scroll-margin-top: var(--srk-header-h, 0px); } } @media (max-width: 1023px) { .srk-page.srk-flow .srpr-panel { height: auto; min-height: 0; overflow: visible; padding-block: clamp(28px, 6vw, 48px); scroll-margin-top: var(--srk-header-h, 0px); } } /* * THE CONTENT BOX. 1280 with the site gutters, which is the measure the rest of * this page uses and, more to the point, the width the canvas needs: at 1280 of * content the pair gives the canvas about 900, and 1146 of artwork drawn at 900 * puts the smallest node label above the 8px floor without clamping or panning. */ .srpr-panel-inner { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); } /* --------------------------------------------------------------------------- Row 1: the words and the price ------------------------------------------------------------------------ */ /* * THE PRICE BLOCK ENDS WITH THE DESCRIPTION, AND NEVER STARTS ABOVE THE EYEBROW. * * Three settings have stood here and each one fixed the one before it. * * align-items: start aligned nothing at the foot, so on six of the eight * panels the price block finished 59 to 84px above the * description and left a band of empty ground below it. * align-items: end closed that band and broke the other two panels. A * grid row is as tall as its tallest item, so where the * price block was the taller one it BECAME the row and * the left column dropped to meet it: punters' eyebrow * measured 45px below the top of the price block, * clients' 124px. * * What was wrong with `end` is that it sat on the container, so it moved both * columns. The left column has no business moving: the eyebrow is the top of * the panel and everything else in the row is placed against it. So the * container starts both columns and the price block alone is bottom aligned, * which is one behaviour with two outcomes rather than two rules: * * block fits beside the left column its bottom lands on the bottom of * the description exactly, and its top * sits below the eyebrow by whatever * the difference in height is. * block taller than the left column it defines the row, so its top lands * ON the eyebrow and it runs below the * description rather than lifting it. * * The second outcome is the clamp, and it needs no max-height, no per panel * exception and no JavaScript: an item aligned to the end of a row it is itself * defining is already at the start of that row. qa/pblock-align.mjs in the * rebuild repo measures both deltas on all eight panels at 1440, 1366 and 1280, * and asserts the top delta is never negative. */ .srpr-say { display: grid; gap: clamp(20px, 2.6vw, 40px); align-items: start; } /* * TWO COLUMNS, AND THE RIGHT ONE IS AUTO RATHER THAN A FIXED TRACK. * * minmax(0, 480px) made the price column 480px on every panel whether it needed * it or not, so a single short figure sat at the left of an empty 480px band. * `auto` sizes the track to the block, and the block is width: max-content, so * the column is exactly as wide as the longest line of type in it. * * Alignment is no longer set here at all. It moved onto .srpr-money, because * anything on the container moves the left column too. See the note on * .srpr-say above. The row's earlier misalignment, the one the card caused, was * a different fault: 15px of padding inside the price card, and the card is * gone. */ @media (min-width: 1024px) { .srpr-say { grid-template-columns: minmax(0, 1fr) auto; } } .srpr-frame-eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(234, 240, 255, 0.52); } .srpr-frame-who { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; } /* * 55 CHARACTERS, so the description cannot run under the price column. ch is the * width of a "0" in the current face, which is the closest CSS gets to counting * characters, and it is what the rest of this file measures copy in. */ .srpr-frame-said { margin: 0; max-width: 55ch; color: rgba(234, 240, 255, 0.84); } /* * THE PRICE IS TYPE, NOT A CARD. * * It was a bordered, filled, rounded box with 14px of padding, and the padding * was not only decoration: it pushed the first line inside the box 15px below * the eyebrow in the left column, so the two sides of the header row never * shared a baseline. Measured, not guessed: left eyebrow at 1816, right at 1831, * and the difference was the box's 1px border plus its 14px top padding exactly. * Removing the box aligned the row. Nothing was padded to compensate. * * FOUR LINES PER PRICE: the source in the left column's own eyebrow type, the * currency small beneath it, the figure large with its unit inline and small, * and the note. One block per price, stacked, hairline between. */ .srpr-money { display: flex; flex-direction: column; gap: 16px; /* Only as wide as the type needs. Stretched to the grid column it was 480px of mostly nothing, with the figure floating at the left of an empty band. */ width: max-content; max-width: 100%; /* BOTTOM ALIGNED ON ITS OWN, not by the container. align-items: end on .srpr-say aligned the left column as well, so a price block taller than the description pushed the eyebrow down instead of overflowing past it. This moves one item and clamps itself: where the block is the tallest thing in the row, end and start are the same place. */ align-self: end; } .srpr-pblock + .srpr-pblock { padding-top: 16px; /* The hairline is the whole separation now that the boxes are gone. Without it two figures in the same column read as one sum, which is the fault this page has been guarding against since the two currencies arrived. */ border-top: 1px solid rgba(234, 240, 255, 0.14); } /* Line 1. Same type as .srpr-frame-eyebrow in the left column, deliberately, so the two columns open on the same note. * * NO line-height HERE, and that is the point rather than an omission. It carried * 1.35 while the left eyebrow inherits the body's 1.6, so the two boxes started * at the same y and the two BASELINES did not: 19.2px against 16.2px, 1.5px * apart. Equal tops are not a shared baseline. Letting this inherit makes every * one of the six properties match the left eyebrow, which is what "same type" * has to mean for the row to read as one line. */ .srpr-pblock-src { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(234, 240, 255, 0.52); } /* Line 2. */ .srpr-pblock-cur { margin: 3px 0 0; font-size: 11px; line-height: 1.3; color: rgba(234, 240, 255, 0.5); } /* Line 3. */ .srpr-money .srpr-price { margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .srpr-fig { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.05; color: #eaf0ff; } .srpr-money .srpr-unit { font-size: 13px; color: rgba(234, 240, 255, 0.6); } /* Line 4. */ .srpr-pblock-note { margin: 6px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.4; color: rgba(234, 240, 255, 0.7); } /* * The unit, when it has dropped off the figure's line because the price is a * word rather than a number. It is the same size as a note and reads as one. */ .srpr-pblock-note--unit { margin-top: 4px; color: rgba(234, 240, 255, 0.6); } /* --------------------------------------------------------------------------- Row 2: the pair ------------------------------------------------------------------------ */ /* * THE PAIR IS THE INDUSTRY COMPONENT AND IT BRINGS ITS OWN RULES. industry.css * is enqueued for this template, so .srin-hero-pair, the phone bezel and the two * clip resets all arrive with it. Nothing here redraws any of that: this block * only gives the pair the width of the panel and gets out of the way. * * THE BEZEL IS NEVER STRETCHED. It was, briefly, when the device was pinned top * and bottom to force the two columns level: the frame resized to the row while * the screen artwork inside kept its own size, leaving about 335px of white void * under the content on the clients panel at 1440x900. The pair matches its two * halves by computing the card's width from the device's own height, which is * the component's whole point, so the correct fix was to stop overriding it. */ .srpr-pair { width: 100%; } .srpr-pair .srin-hero-pair { margin-block: 0; } /* * ONE ROW AT THE FOOT OF EVERY PANEL. The quoted panel carries a second link * beside the first rather than a button of its own: same weight, same treatment, * so the row reads as a row and not as one panel shouting. */ .srpr-flow { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 24px; } .srpr-root .srpr-flow-link { color: var(--srk-accent-live, #4D8AFF); } /* --------------------------------------------------------------------------- Below 1024: no device chrome ------------------------------------------------------------------------ */ /* * THE BEZEL COMES OFF ON A PHONE. A device frame drawn on a device is a phone * inside a phone, and at 390 wide the frame costs width the screen needs. The * clip becomes a plain full width card and the canvas stacks under it with its * own caption. * * Order: eyebrow, h2, description, price cards, phone card, canvas, link. The * grid and the pair both collapse to one column, and the pair's own halves stack * in source order, which is phone then canvas. */ @media (max-width: 1023px) { .srpr-say { grid-template-columns: minmax(0, 1fr); } } /* * THE DEVICE CHROME COMES OFF AT 959, NOT AT 1023, AND THE NUMBER IS THE * COMPONENT'S RATHER THAN THIS PAGE'S. * * industry.css switches the pair out of its matched two column mode below 960. * Stripping the bezel at 1023 meant that between 960 and 1023 the component * still believed it was matching heights while this file had already taken the * frame away: at exactly 960 the phone measured 1743px against a 22px card. * check-pair-canvas caught it, which is the whole reason that harness now runs * against this page. * * The header row still collapses at 1023, because that is about the words and * the price and has nothing to do with the pair. */ @media (max-width: 959px) { .srpr-pair .srin-hero-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 5vw, 34px); } /* The frame, the bezel padding, the dark ground and the shadow all go. What is left is the screen itself as a card. */ .srpr-pair .srin-hero-phone { width: 100%; max-width: none; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; } .srpr-pair .srin-app-clip { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(234, 240, 255, 0.14); } .srpr-pair .srin-pair-frame, .srpr-pair .srin-pair-body { min-height: 0; } /* ------------------------------------------------------------------------- THE CANVAS STOPS SHRINKING AND THE COLUMN STARTS SCROLLING. ------------------------------------------------------------------------- Fitting a 1146px or 1188px diagram into a 350px column put its smallest labels near 3px, and no amount of further scaling fixes that: the labels are baked into the clip, so legibility is width, and width is the one thing a 390px screen has none of. So the canvas renders at the width its labels need and the reader pans, which is what every map and every wide table on a phone already does. 1360px, AND IT IS MEASURED, NOT INHERITED. The figure carried into this work was 873px. It does not hold: at 873 the smallest label lands between 5.1px and 6.9px depending on the clip. Measuring the smallest text line in each of the six vendor clips at a settled frame and solving for an 8px rendered height gives 1019, 1146, 1310, 1358, 1146 and 1019. The binding one is crypto-exchange-vendor at 1358, which is both the densest chain and the only clip authored at 1188 rather than 1146. 1360 is that number rounded up to an even value. One width for all six rather than a width each: the component carries no per clip measurement and inventing one here would put a number in CSS that nothing checks. The cost is that the four roomier clips are wider than they strictly need, which costs a little more panning and no legibility. 959 AND NOT 1023, DELIBERATELY, AND IT IS NOT WHAT WAS ASKED FOR. The pair component matches the canvas to the phone's height from `min-width: 960px` up, and scripts/check-pair-canvas.mjs asserts exactly that at 960. Opening the scroller at 1023 would strip that geometry in the 960 to 1023 band and fail the harness on all seventeen industry pages. The band keeps the desktop treatment and its labels stay small there; that is reported rather than hidden. ---------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- THE FRAME IS THE INK, NOT THE FILE BOX. ------------------------------------------------------------------------- Widening the canvas fixed the labels and left a second fault behind it: the window is a narrow vertical slot through a wide, sparse diagram, and at scrollLeft 0 it lands on the empty left margin. Measured on the shipped clips at 390, the opening view carried 0.0 to 1.5 percent ink. A reader saw one node in a tall white card, which is exactly what the screenshot showed. The frame is now the ink bounding box plus 24px of margin, in the clip's own pixels, converted once in srpr_canvas_crop_style(). The canvas is absolutely positioned and pulled up and left by the crop origin, so the box starts on the diagram; ::after carries the cropped width and is what the scroller actually scrolls, so the dead margin on the right is gone too. THE VERTICAL SAVING IS SMALL AND THAT IS A FINDING, NOT A FAILURE. The clips are already tight: ink is 85 to 90 percent of the file box, so cropping returns 19 to 53 CSS pixels. The horizontal saving is the useful one, up to 285 source pixels of empty left margin on age-verification. Height on a phone is still the open question and it is reported rather than papered over. ---------------------------------------------------------------------- */ .srpr-pair .srin-pair--link .srin-pair-frame { position: relative; height: var(--srpr-cv-crop-h, auto); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: 14px; /* The affordance, half of it. A soft right edge says the picture continues past it. It is a mask rather than an overlay because a scroller has no spare child to pin one to, and a mask is measured from the border box so it stays at the edge instead of scrolling away with the content. */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); } /* ------------------------------------------------------------------------- IN FLOW WITH NEGATIVE MARGINS, NOT ABSOLUTELY POSITIONED. ------------------------------------------------------------------------- Absolute positioning was the first build and it crops only one side. An out of flow box still contributes scrollable overflow to the inline END, so the clip's right hand dead margin stayed scrollable: aml-screening reported a 965px scroll extent against an 843px crop, and the focus landed 45px past where it was measured. In flow, the inline start margin does the half that matters. It pulls the crop origin to the frame's edge, and overflow to the inline start is not scrollable, so the empty left margin is simply gone: up to 285 source pixels on age-verification. THE INLINE END IS HONEST ABOUT WHAT IT CANNOT DO. `crop-l + crop-w - cv-w` is negative by exactly the right hand overhang and it shrinks the canvas's LAYOUT width to the crop, which is what keeps the pair's own sizing right. It does NOT shrink the box the canvas paints, and scrollable overflow is measured from the painted border box, so the scroller still runs 4 to 195px past the diagram depending on the clip. clip-path was tried and changes nothing: measured, scrollWidth stayed 766 against a 571 crop. Removing that slack needs either a wrapper element in the shared component or `object-view-box`, which Firefox does not have. The slack is white space under the edge fade at the far end of a scroll, so it is left, and pricing.js measures the focus against the crop rather than the extent so nothing downstream depends on the two being equal. ---------------------------------------------------------------------- */ .srpr-pair .srin-pair--link .srin-pair-canvas { position: static; inset: auto; display: block; width: var(--srpr-cv-w, 1360px); max-width: none; height: auto; aspect-ratio: auto; border-radius: 0; margin-top: calc(-1 * var(--srpr-cv-crop-t, 0px)); margin-left: calc(-1 * var(--srpr-cv-crop-l, 0px)); margin-right: calc(var(--srpr-cv-crop-l, 0px) + var(--srpr-cv-crop-w, 0px) - var(--srpr-cv-w, 1360px)); margin-bottom: 0; } /* The other half of the affordance, and the half that a screen reader gets. The span is real markup appended in templates/company-pricing.php. */ .srpr-scrollhint { display: block; margin-top: 4px; color: rgba(234, 240, 255, 0.5); font-size: 12px; letter-spacing: 0.02em; } .srpr-scrollhint::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 1px solid currentColor; } /* The phone half never scrolls, so it never carries the frame's mask. */ .srpr-pair .srin-pair--me .srin-pair-canvas { position: static; inset: auto; width: 100%; height: auto; border-radius: 14px; } /* ------------------------------------------------------------------------- THE DOWN CHEVRON LEAVES THE CENTRE COLUMN. ------------------------------------------------------------------------- It is `position: fixed; left: 50%` with a translate, so it sits dead centre at the foot of the viewport. That is the right place on every page whose centre is prose on a dark ground. It is the wrong place here: below the breakpoint the phone mock is a white card filling the centre of the column, the chevron is a light glyph drawn for a dark ground, and it lands on the device about two thirds of the way down. WITHDRAWN HERE RATHER THAN MOVED, AND THE GEOMETRY IS WHY. Moving it to a rail was the first answer and it does not fit. Measured at 390: the client width is 375, the content column is 291 and centred, so it runs 42 to 333 and each gutter is 42px. The control is 48px wide and 44px is the smallest touch target worth shipping, so there is no edge it can sit at without landing on the column: hard right still overlapped it by 18px, hard left by 22px. A scrim was the other answer and it fails the same instruction for a different reason, since a backdrop is still something sitting on top of the picture. What is lost is small. These panels are one per screen and scroll snapped, so on a phone the swipe IS the affordance and the chevron is restating it. The up chevron and the back to top control are untouched, so a reader who wants to jump still can. Above the breakpoint there is room and it stays exactly where it was. Scoped to this page. The seventeen industry pages put prose in the centre column, not a white device mock, and their chevron is fine where it is. */ .srpr-page .srk-chrome.srk-nav--down { display: none; } } /* Above the breakpoint the canvas is matched to the phone and nothing scrolls, so the hint has nothing to describe. */ @media (min-width: 960px) { .srpr-scrollhint { display: none; } } @media (max-width: 767px) { .srpr-money { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- Scroll snap, so the panels read as pages ------------------------------------------------------------------------ */ /* * PROXIMITY, NEVER MANDATORY. A panel can be taller than the viewport, and * mandatory snapping on a snap area taller than the scrollport is how a reader * gets trapped. Proximity only engages when a scroll comes to rest near a point. * * THE ALIGNMENT IS ON THE PANELS ALONE, so the hero, the Solutions block, the * four priced tables and the closer scroll the way a long document should. * * THE HEADER IS ABSOLUTE, NOT STICKY. Measured: position absolute, 73px, z-index * 100, and --srk-header-h resolves to 0. It scrolls away with the top of the * document, so a panel aligned to start does not land underneath it and no * scroll-padding is needed. */ html:has(.srpr-page) { scroll-snap-type: y proximity; } .srpr-panel { scroll-snap-align: start; } /* --------------------------------------------------------------------------- Reduced motion ------------------------------------------------------------------------ */ /* * Snap stays: it changes where a scroll comes to rest, not how it travels. */ @media (prefers-reduced-motion: reduce) { html:has(.srpr-page), .srpr-page { scroll-behavior: auto; } .srpr-root .srpr-tile { transition: none; } }