/* * The home page "Our Services" band: brand geometry in place of a stock pattern. * * --------------------------------------------------------------------------- * WHAT THIS REPLACES, AND WHY * --------------------------------------------------------------------------- * The band opens the services section on the front page (post 146): a dark navy * field carrying the white heading "Simplifying Verification in a Complex World" * and the "OUR SERVICES" eyebrow, above the four service tiles. Its background * was a flat navy plus uploads/2023/03/shape-dots.svg, a dotted pyramid parked * on the right. The client read that as "a block of blue with a random pattern" * and signed off on one specific replacement: concentric rings that echo the * ShareRing logo mark, over a restrained brand-blue to deep-indigo gradient. * * This is CSS only. No Elementor data, no DB, no page markup changes: the band * is unedited in the editor, body-diff stays clean, and deleting the enqueue * line in inc/enqueue.php reverts the site exactly. Same contract as * elementor-tokens.css and elementor-layout.css. * * --------------------------------------------------------------------------- * WHICH ELEMENT PAINTS, AND HOW THE DOTS ARE REACHED IN BOTH STATES * --------------------------------------------------------------------------- * The section is the inner-section element a9d85b8. But the dots the visitor * actually sees are not painted by the section: they are painted by its single * full-width inner COLUMN, cdbe00b, whose original settings carry both the navy * fill and shape-dots.svg. That column has a scrolling motion effect, and that * is what splits the target in two: * * Desktop, motion effect live. Elementor clones the column's background onto a * generated parallax layer, * cdbe00b > .elementor-widget-wrap * > .elementor-motion-effects-container * > .elementor-motion-effects-layer * and that layer, sitting above the column, is the visible surface. * * Mobile, motion effect not initialised. No layer is generated and the column * is not tagged .elementor-motion-effects-element-type-background, so the * background paints on the column's own wrap, * cdbe00b:not(.elementor-motion-effects-element-type-background) * > .elementor-widget-wrap * which is the visible surface there. * * Both are listed together below, so the treatment is identical whether or not * the parallax is running. This is the same two-pronged selector pair that * elementor-tokens.css already uses to rebind this column's background COLOUR; * we reuse it here to own the background IMAGE as well. The section a9d85b8 and * its own overlay are cleared too (further down), so no stray dots survive in * any state or any fallback. * * --------------------------------------------------------------------------- * SPECIFICITY, NOT SOURCE ORDER * --------------------------------------------------------------------------- * The dots come from Elementor's generated post-146.css, which prints AFTER the * theme's stylesheets, so source order cannot win. The selector prefix below is * the tokens file's own: four repetitions of the kit class plus body, the main * region, the document and the element class. It clears post-146.css's roughly * five-class selectors with room to spare, so no !important is needed anywhere. * * --------------------------------------------------------------------------- * COLOUR AND CONTRAST * --------------------------------------------------------------------------- * Every colour is a token. The rings and glow are mixed to a transparency with * color-mix(), so the brand hues stay named rather than being baked into an * opaque hex; nothing here introduces a literal colour. * * The gradient is deliberately darkest on the left, where the heading and the * eyebrow live, and only lifts toward deep indigo and a faint brand-blue glow on * the right, where the rings arc in and no text sits. Measured against the real * rendered pixels, the lightest ground anywhere behind the white heading * (#F5F6F8) is about rgb(25, 28, 93): a contrast of ~14:1, comfortably past the * 7:1 AAA bar the brief asked to clear. The eyebrow clears ~17:1. * * The heading stays the hero. The rings are a faint texture, not a focal point: * brand-lift at low alpha, thinning and fading as they grow outward from the * top-right corner. No custom animation is added. On desktop the column's * existing Elementor parallax already drifts the ring layer gently on scroll, * which is life enough; on mobile the band is static, which is correct. Because * this file starts no animation of its own, there is nothing here for a * prefers-reduced-motion guard to switch off (the base.css convention is * honoured by having no motion to gate). */ body.page-id-146.elementor-kit-5.elementor-kit-5.elementor-kit-5:not(.sr-cinema) .sr-main .elementor-146 .elementor-element.elementor-element-cdbe00b:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, body.page-id-146.elementor-kit-5.elementor-kit-5.elementor-kit-5:not(.sr-cinema) .sr-main .elementor-146 .elementor-element.elementor-element-cdbe00b > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: var(--sr-dark); background-image: /* Concentric rings, echoing the ShareRing mark. One radial-gradient per ring: a hard-edged 1.5px band at a fixed radius, transparent either side, all sharing the top-right centre so they read as true concentric arcs. Alpha thins outward so the texture dissolves before it reaches the text. */ radial-gradient(circle at 100% 6%, transparent 82px, color-mix(in srgb, var(--sr-brand-lift) 36%, transparent) 82px 83.5px, transparent 83.5px), radial-gradient(circle at 100% 6%, transparent 158px, color-mix(in srgb, var(--sr-brand-lift) 30%, transparent) 158px 159.5px, transparent 159.5px), radial-gradient(circle at 100% 6%, transparent 240px, color-mix(in srgb, var(--sr-brand-lift) 24%, transparent) 240px 241.5px, transparent 241.5px), radial-gradient(circle at 100% 6%, transparent 328px, color-mix(in srgb, var(--sr-brand-lift) 18%, transparent) 328px 329.5px, transparent 329.5px), radial-gradient(circle at 100% 6%, transparent 422px, color-mix(in srgb, var(--sr-brand-lift) 13%, transparent) 422px 423.5px, transparent 423.5px), radial-gradient(circle at 100% 6%, transparent 522px, color-mix(in srgb, var(--sr-brand-lift) 9%, transparent) 522px 523.5px, transparent 523.5px), /* A soft brand-blue glow bleeding in from the top-right corner, giving the rings something to sit in and lifting the flat navy without touching the text zone on the left. */ radial-gradient(70% 90% at 103% 0%, color-mix(in srgb, var(--sr-brand) 34%, transparent) 0%, color-mix(in srgb, var(--sr-brand-deep) 26%, transparent) 40%, transparent 74%), /* The base field: dark on the left two-fifths behind the heading, easing to deep indigo on the right. The one opaque layer, so it defines the ground and nothing behind this surface can show through. */ linear-gradient(105deg, var(--sr-dark) 0%, var(--sr-dark) 38%, var(--sr-brand-deep) 100%); background-repeat: no-repeat; } /* * Clear the section a9d85b8's own copy of the dots and its overlay. On the live * surface above these never show, but zeroing them means no state, fallback or * future reflow can bring the pyramid back through a gap. The section keeps a * plain --sr-dark fill as its floor. */ body.page-id-146.elementor-kit-5.elementor-kit-5.elementor-kit-5:not(.sr-cinema) .sr-main .elementor-146 .elementor-element.elementor-element-a9d85b8:not(.elementor-motion-effects-element-type-background), body.page-id-146.elementor-kit-5.elementor-kit-5.elementor-kit-5:not(.sr-cinema) .sr-main .elementor-146 .elementor-element.elementor-element-a9d85b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: var(--sr-dark); background-image: none; } body.page-id-146.elementor-kit-5.elementor-kit-5.elementor-kit-5:not(.sr-cinema) .sr-main .elementor-146 .elementor-element.elementor-element-a9d85b8 > .elementor-background-overlay { background-color: transparent; background-image: none; }