/* * The mobile gutter for Elementor page content. * * Layout only. This is the one file in the system that is allowed to touch * Elementor section spacing, and it is allowed to touch exactly one property: * horizontal padding, below the mobile breakpoint. Typography and colour live in * elementor-tokens.css, whose header promises it changes no spacing; this file * exists so that promise stays true. * * --------------------------------------------------------------------------- * THE BUG * --------------------------------------------------------------------------- * A large share of the legacy Elementor sections on this site carry no * horizontal padding at all: the section is 0, its container is 0, and its * top-level column is 0 because the column gap is set to "no". Their text * therefore starts at x=0 and ends at the far edge, with nothing between the * glyphs and the bezel. * * This was survivable while the page CSS pinned headings at around 30px on * mobile. It is not survivable now that they resolve to --type-display and set * at ~44px: the home hero heading ran the full 375px of readable width, hard * against both edges, while the logo directly above it sat on --gutter. The * page had no spine. * * The zero is general, not a home page quirk. At 390px it appears on the home * hero and four more home sections, on six of the seven text sections of /kyc/, * on five of /sharering-me/, and on the /blog/ archive title. Every instance is * a legacy `.elementor-top-section`. The pages built with flexbox containers * (/banking/, /prove/, /sharering-link/) have no instance of it, which is why * nothing here selects `.e-con`. * * The gutter is --gutter, the same token the logo, the footer, the fallback * article and the post grid already sit on. Page content joins the spine the * chrome already stands on rather than inventing a second one. * * --------------------------------------------------------------------------- * WHY THE PADDING GOES ON THE CONTAINER * --------------------------------------------------------------------------- * The gutter is applied to `.elementor-container`, the box INSIDE the section, * and the section's own horizontal padding is zeroed so the two cannot stack. * That placement is what protects the full-bleed sections: * * - The section keeps its full viewport width, so a background image or a * dark band still paints edge to edge. Backgrounds paint under padding; * they do not care that the content inside has been inset. * - The inset lands once, on the row of columns as a whole, so it never * opens a gap BETWEEN side-by-side columns. Every top section that stays * multi-column at mobile on this site sets its column gap to "no", and the * 2-up and 4-up grids that result keep touching exactly as they did. * * The top-level column's own horizontal padding is zeroed for the same * anti-stacking reason: a handful of sections take their inset from the column * (10px from Elementor's default column gap, 20px where the page author set it * by hand) rather than from the section. Zeroing it and letting the container * supply --gutter means every top section lands on exactly one gutter, from one * token, whatever it happened to inherit before. Vertical padding is untouched. * * --------------------------------------------------------------------------- * THE GUARDS: ONLY A PLAIN LEAF SECTION IS TOUCHED * --------------------------------------------------------------------------- * Padding a container insets everything inside it, so a section only qualifies * if nothing inside it is entitled to the edges. * * :not(:has(.elementor-top-section)) * :not(:has(.e-con.e-parent)) * :not(:has(.elementor-widget-theme-post-content)) * An Elementor document can be embedded inside another one. A Theme Builder * single template does it through a theme-post-content widget, and nineteen * pages here render that way. The result is a top section that is not a * section of content at all, but a wrapper around a whole second document * with top sections of its own. * * Gutter a wrapper and two things go wrong. The gutter doubles, because the * real section inside gets one too. And, far worse, the wrapper's inset drags * every full-bleed background inside it off the viewport edges: on * /app-development/ the three tinted bands are top sections nested this way, * and padding the wrapper lifted them to x=16 with 343px of width, which is * precisely the damage this change is not allowed to do. So a wrapper is * skipped, and the real sections inside it are gutter'd instead, keeping * their full width and their backgrounds. * * :not(:has(.elementor-inner-section.elementor-section-full_width)) * A section can also hold a band WITHOUT nesting a document: an inner section * the author set to stretch, which Elementor marks `section-full_width`. The * navy band on the home page and four panels on /app-development/ are built * that way, and they are flush on purpose. Insetting their parent's container * would lift them off the edges just the same, and pulling them back out with * a negative margin only re-flushes the text inside them, which is the bug * this file exists to fix. So a section holding a band is left exactly as it * is. It costs nothing: all four such sections sitewide already carry a 20px * inset of their own, none of them was ever part of the zero-gutter set, and * none of them changes by a pixel. * * :not(:has(.sr-posts)) * The blog card grid brings its own --gutter (see posts.css). It is already * correctly inset and must not be given a second one. * * `.elementor-inner-section` on its own is NOT excluded. An inner section that * is not stretched is ordinary nested content, a card or a row, and it should * travel with the gutter like everything else in the section. * * Scope. `.sr-main` is the theme's own
. The header and the footer are * outside it, so they cannot be reached from here. DigitalMe renders no * `.sr-main` at all, so it cannot be reached either, and stays pixel-identical. * * 767px is Elementor's own mobile breakpoint, the width at which its columns * stack. A media query cannot read a custom property, so this one number cannot * be a token; it is not a design value, it is the breakpoint the page content * was authored against, and it is stated once. */ @media (max-width: 767px) { /* The guard chain is repeated verbatim on all three rules. CSS has no way to name a condition once, and every rule below has to answer the same question: is this section a plain leaf that owns nothing entitled to the edges? */ .sr-main .elementor-top-section:not(:has(.elementor-top-section)):not(:has(.e-con.e-parent)):not(:has(.elementor-widget-theme-post-content)):not(:has(.elementor-inner-section.elementor-section-full_width)):not(:has(.sr-posts)) { padding-inline: 0; } .sr-main .elementor-top-section:not(:has(.elementor-top-section)):not(:has(.e-con.e-parent)):not(:has(.elementor-widget-theme-post-content)):not(:has(.elementor-inner-section.elementor-section-full_width)):not(:has(.sr-posts)) > .elementor-container { padding-inline: var(--gutter); } .sr-main .elementor-top-section:not(:has(.elementor-top-section)):not(:has(.e-con.e-parent)):not(:has(.elementor-widget-theme-post-content)):not(:has(.elementor-inner-section.elementor-section-full_width)):not(:has(.sr-posts)) > .elementor-container > .elementor-top-column > .elementor-widget-wrap { padding-inline: 0; } } /* --------------------------------------------------------------------------- * THE DUPLICATE "OUR PRODUCTS" EYEBROW * --------------------------------------------------------------------------- * The home page's product suite section opens with a small uppercase eyebrow * reading "OUR PRODUCTS" directly above the big "Our Product Suite" heading. The * two say the same thing, so the eyebrow is redundant, and the client asked for * it to go. * * This is Elementor page content, so it is removed the only way this project * removes page content: from the theme, in CSS, leaving the Elementor data and * the DB untouched. The markup is therefore identical before and after (bin/ * body-diff.sh still passes), and the change is one line to reverse. * * display:none, not a visually-hidden clip: the intent is to remove the eyebrow, * not to keep it for screen readers. The real heading "Our Product Suite" stays, * visible and in the accessibility tree, so nothing that names this section is * lost; a duplicate decorative eyebrow that only repeats the visible heading * carries no information a reader or a crawler needs. * * Scoped to this ONE Elementor element id (element 6d26402), so it cannot touch * the other eyebrows on the page: OUR SERVICES (6092203), LATEST NEWS (73b5bce) * and the "Our Product Suite" heading itself (cae3941) are all different ids and * are all left exactly as they are. .sr-main keeps it inside the theme's own * content region and out of any other document. The id is the Elementor element's * own, stable in the DB; if the section is ever rebuilt and the id changes, this * rule simply stops matching and the eyebrow returns, which is a visible, * self-announcing failure rather than a silent one. */ .sr-main .elementor-element-6d26402 { display: none; }