/* ========================================================================== About Us page - /about-us/ ========================================================================== Loaded only on that page (see mm-about.php). Presentation only: the copy, the campaign image and the three perk image-boxes are untouched. NO ELEMENT IDs, ANYWHERE. Every block below is found from the page's own structure instead: hero = the top-level container whose inner child holds the

directly (the tagline's h1 is nested deeper) tagline = the top-level container with an h1, nested e-cons, and no h2 story = the top-level container holding an

perks = the top-level container holding image-box widgets `.elementor-element-` is generated per site, so a rule keyed on one matches nothing on dev - that is the Point F incident. SPECIFICITY. Elementor emits a container's own settings as custom properties at `.elementor-223 .elementor-element.elementor-element-`, which is (0,3,0). Every rule here that overrides one is written `.mm-about-page .e-con.e-flex.e-parent:has(...)` - four classes plus the :has() argument - so it wins outright rather than tying and being decided by enqueue order. AND IT SETS ELEMENTOR'S VARIABLES, not the properties they feed. Never the `flex` shorthand and never a bare `padding`: Elementor ships `.e-con.e-flex{flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}` at (0,2,0), and feeding the variables means the values still read correctly in the editor and stay adjustable there. TYPOGRAPHY: no font-family anywhere, on purpose - Astra sets Lato site-wide. Weights 400 and 700 only; this site loads Lato in 100/400/700 and asking for 300 snaps to Thin. THE BUG THIS FIXES. Each of the three perk columns carried `--padding-left/right: 139px` on a 33%-wide column (~392px). 278px of that was padding, leaving ~113px for the copy - which is why "Big Discounts" / "Free Shipping" / "Secure Payments" rendered as tall, one-word-wide ribbons on desktop. Tablet and phone already overrode those paddings; desktop did not. ========================================================================== */ body.mm-about-page { --mm-a-ink: #000000; --mm-a-body: rgba( 0, 0, 0, 0.64 ); --mm-a-muted: rgba( 0, 0, 0, 0.45 ); --mm-a-rule: #e2ded6; /* Same measure as Contact and the models grid — one inset, not three. */ --mm-a-measure: 1140px; /* * Side breathing room inside every content band. Elementor often leaves * only 20px on small screens, which reads as flush with the viewport; * on desktop the boxed inner is 1140px wide with no inner horizontal pad, * so headlines sit on the column edge. */ --mm-a-side: clamp( 24px, 5vw, 48px ); } /* -------------------------------------------------------------------------- The hero band -------------------------------------------------------------------------- */ /* * THE HEIGHT IS THE PAGE'S OWN SETTING - deliberately not overridden. * * Same contract as Contact / the twin photographic title band: Elementor's * min_height (60vh / 40vh / 30vh) stays. What IS overridden is the inner * padding: 150px top and bottom on top of 60vh add rather than overlap, so on * any window shorter than ~800px the padding rather than the band was setting * the height. * * The selector keys on "inner child holds the h1 directly" so the tagline * section (whose h1 is nested two containers deeper) is not hit. */ .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .elementor-widget-heading h1 ) { --content-width: var( --mm-a-measure ); } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .elementor-widget-heading h1 ) > .e-con-inner > .e-con { --padding-top: 40px; --padding-bottom: 40px; } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .elementor-widget-heading h1 ) h1.elementor-heading-title { letter-spacing: -0.02em; line-height: 1.05; } /* -------------------------------------------------------------------------- Tagline - "Minimal. Intelligent. Effortless." -------------------------------------------------------------------------- */ /* * Nested e-cons + an h1 + no h2 + no image-box distinguishes this from the * hero (no nested e-con under the first inner child) and from the story * section (has an h2). */ .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ) { --content-width: var( --mm-a-measure ); --padding-top: 40px; --padding-bottom: 32px; --padding-left: var( --mm-a-side ); --padding-right: var( --mm-a-side ); } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ) > .e-con-inner { --padding-top: 40px; --padding-bottom: 32px; } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ) h1.elementor-heading-title { letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; font-size: clamp( 36px, 5.5vw, 72px ); } /* -------------------------------------------------------------------------- Story - "Technology, refined." + body copy -------------------------------------------------------------------------- */ .mm-about-page .e-con.e-flex.e-parent:has( h2 ) { --padding-top: 48px; --padding-bottom: 48px; --content-width: var( --mm-a-measure ); --padding-left: var( --mm-a-side ); --padding-right: var( --mm-a-side ); } .mm-about-page .e-con.e-flex.e-parent:has( h2 ) > .e-con-inner { --padding-top: 48px; --padding-bottom: 48px; } /* * The two story columns. Nested `:has(> .e-con:has(...))` is rejected by the * CSS parser in the Chromium this site is verified against, so each half is * found from what it contains. `:not(:has(.e-con))` keeps the rule on the * LEAF columns only - without it the same selector matched the wrapping * containers too and set `--width: 50%` on them, which collapsed the row to * two ~108px strips. */ /* Left: heading + campaign image. */ .mm-about-page .e-con.e-flex.e-parent:has( h2 ) .e-con.e-child:has( h2 ):not( :has( .e-con ) ) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 32px; --width: 50%; --flex-grow: 0; --flex-shrink: 1; --flex-basis: 50%; } /* Right: body copy. Was --padding-left: 100px on a 50% column, which stole a fifth of the measure for no reason. */ .mm-about-page .e-con.e-flex.e-parent:has( h2 ) .e-con.e-child:has( .elementor-widget-text-editor ):not( :has( .e-con ) ) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 40px; --padding-right: 0px; --width: 50%; --flex-grow: 0; --flex-shrink: 1; --flex-basis: 50%; } .mm-about-page .e-con:has( h2 ) .elementor-widget-heading h2.elementor-heading-title { margin: 0 0 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var( --mm-a-ink ); } .mm-about-page .e-con:has( .elementor-widget-text-editor ) .elementor-widget-heading .elementor-heading-title { margin: 0 0 16px; font-weight: 700; line-height: 1.35; color: var( --mm-a-ink ); } .mm-about-page .e-con:has( .elementor-widget-text-editor ) .elementor-widget-text-editor { font-size: 17px; line-height: 1.7; color: var( --mm-a-body ); } .mm-about-page .e-con:has( .elementor-widget-text-editor ) .elementor-widget-text-editor p { margin: 0 0 1em; } .mm-about-page .e-con:has( .elementor-widget-text-editor ) .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* The campaign photograph must never overflow its column. Elementor authors a negative top margin on this widget (-50px desktop / -30px tablet) so it overlaps the heading; replace that with a small positive gap. The margin is on `.elementor-widget-container`, so that is what has to be reset - setting it on the widget alone left the overlap in place. */ .mm-about-page .e-con.e-child:has( h2 ):not( :has( .e-con ) ) .elementor-widget-image { margin-top: 0; } .mm-about-page .e-con.e-child:has( h2 ):not( :has( .e-con ) ) .elementor-widget-image > .elementor-widget-container { margin-top: 20px !important; } .mm-about-page .e-con:has( h2 ) .elementor-widget-image img { display: block; width: 100%; height: auto; max-width: 100%; } /* -------------------------------------------------------------------------- Perks - Big Discounts / Free Shipping / Secure Payments -------------------------------------------------------------------------- */ .mm-about-page .e-con.e-flex.e-parent:has( .elementor-widget-image-box ) { --flex-direction: row; --flex-wrap: nowrap; --align-items: stretch; --gap: 0px; /* * Full-bleed container — inset with 100%, not 100vw, so the grid shares * the same left edge as the boxed story/tagline bands above (100vw was * ~7px wider and made the perks look misaligned). */ --padding-left: max( var( --mm-a-side ), calc( ( 100% - min( 100%, var( --mm-a-measure ) ) ) / 2 ) ); --padding-right: max( var( --mm-a-side ), calc( ( 100% - min( 100%, var( --mm-a-measure ) ) ) / 2 ) ); } /* * THE FIX. 139px of side padding on a 33% column left ~113px for the copy. * 40px leaves a real measure (~310px at 1440) and still keeps the three * columns visibly separated by their existing borders. */ .mm-about-page .e-con.e-flex.e-parent:has( .elementor-widget-image-box ) > .e-con { --padding-top: 36px; --padding-bottom: 36px; --padding-left: 28px; --padding-right: 28px; --width: 33.333%; --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0%; --justify-content: flex-start; } .mm-about-page .elementor-widget-image-box .elementor-image-box-wrapper { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } /* * Elementor authors `.elementor-image-box-wrapper .elementor-image-box-img * { width: 35% }` even for position-top, which makes the icon a third of the * (already padded) column and looks accidental next to a full-width title. * A fixed size keeps the three icons aligned regardless of column width. */ /* * (0,6,0). Elementor's per-widget rule is * `.elementor-223 .elementor-element- .elementor-image-box-wrapper * .elementor-image-box-img { width: 35% }` at (0,5,0), so five classes only * ties and enqueue order then decides - which is how the first version of * this rule lost and left every icon at ~138px. */ .mm-about-page .elementor-element.elementor-widget.elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img { width: 64px; margin: 0 auto 16px; align-self: center; } .mm-about-page .elementor-widget-image-box .elementor-image-box-img img { display: block; width: 100%; height: auto; } .mm-about-page .elementor-widget-image-box .elementor-image-box-content { width: 100%; max-width: none; } .mm-about-page .elementor-widget-image-box .elementor-image-box-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var( --mm-a-ink ); } .mm-about-page .elementor-widget-image-box .elementor-image-box-description { margin: 0; font-size: 15px; line-height: 1.65; color: var( --mm-a-body ); } /* -------------------------------------------------------------------------- Breakpoints - 1024 / 767, the two the rest of this site uses -------------------------------------------------------------------------- */ @media ( max-width: 1024px ) { .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .elementor-widget-heading h1 ) > .e-con-inner > .e-con { --padding-top: 40px; --padding-bottom: 40px; } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ), .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ) > .e-con-inner, .mm-about-page .e-con.e-flex.e-parent:has( h2 ), .mm-about-page .e-con.e-flex.e-parent:has( h2 ) > .e-con-inner { --padding-top: 40px; --padding-bottom: 40px; } /* * Stack the story columns. Elementor kept them side-by-side at tablet with * a 35/65 split and 70px of left padding on the copy, which left the * campaign image as a thin strip and the body as a narrow column beside it. */ /* * Stack the story columns. Elementor kept them side-by-side at tablet with * a 35/65 split and 70px of left padding on the copy, which left the * campaign image as a thin strip and the body as a narrow column beside it. * * flex-wrap MUST be nowrap: Elementor authors --flex-wrap-mobile:wrap on * this row, and column+wrap with any height constraint lays the two * halves into adjacent columns instead of stacking them - measured at * 390px as left at x:20 and right at x:370, both 350px wide. */ .mm-about-page .e-con.e-flex.e-parent:has( h2 ) .e-con.e-flex:has( .elementor-widget-text-editor ):has( h2 ):not( :has( .e-con .e-con .e-con ) ) { --flex-direction: column; --flex-wrap: nowrap; } .mm-about-page .e-con.e-flex.e-parent:has( h2 ) .e-con.e-child:has( h2 ):not( :has( .e-con ) ), .mm-about-page .e-con.e-flex.e-parent:has( h2 ) .e-con.e-child:has( .elementor-widget-text-editor ):not( :has( .e-con ) ) { --width: 100%; --flex-basis: 100%; --flex-grow: 0; --padding-left: 0px; --padding-right: 0px; } .mm-about-page .e-con.e-flex.e-parent:has( h2 ) .e-con.e-child:has( h2 ):not( :has( .e-con ) ) { --padding-bottom: 32px; } /* Three perk columns: stack from tablet down. At 768 they were still in a row with ~200px of measure each, which is the same shape of bug as the 113px desktop ribbons - readable only by accident. */ .mm-about-page .e-con.e-flex.e-parent:has( .elementor-widget-image-box ) { --flex-direction: column; --flex-wrap: nowrap; } .mm-about-page .e-con.e-flex.e-parent:has( .elementor-widget-image-box ) > .e-con { --width: 100%; --flex-basis: 100%; --flex-grow: 0; --padding-top: 36px; --padding-bottom: 36px; --padding-left: 32px; --padding-right: 32px; } .mm-about-page .e-con:has( .elementor-widget-text-editor ) .elementor-widget-text-editor { font-size: 16px; } } @media ( max-width: 767px ) { body.mm-about-page { --mm-a-side: clamp( 24px, 6vw, 32px ); } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .elementor-widget-heading h1 ) > .e-con-inner > .e-con { --padding-top: 28px; --padding-bottom: 28px; } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ), .mm-about-page .e-con.e-flex.e-parent:has( h2 ) { --padding-top: 40px; --padding-bottom: 40px; } .mm-about-page .e-con.e-flex.e-parent:has( > .e-con-inner > .e-con > .e-con ):not( :has( h2 ) ):not( :has( .elementor-widget-image-box ) ) h1.elementor-heading-title { max-width: none; font-size: clamp( 32px, 10vw, 48px ); } /* Stack the three perks full-width. Elementor already wraps them below 767 via --flex-wrap-mobile, but without an explicit column direction and 100% basis a leftover row rule can leave them sharing a line. */ .mm-about-page .e-con.e-flex.e-parent:has( .elementor-widget-image-box ) { --flex-direction: column; --flex-wrap: nowrap; } .mm-about-page .e-con.e-flex.e-parent:has( .elementor-widget-image-box ) > .e-con { --width: 100%; --flex-basis: 100%; --flex-grow: 0; --padding-top: 28px; --padding-bottom: 28px; --padding-left: 20px; --padding-right: 20px; } .mm-about-page .elementor-element.elementor-widget.elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img { width: 56px; } .mm-about-page .elementor-widget-image-box .elementor-image-box-title { font-size: 18px; } .mm-about-page .elementor-widget-image-box .elementor-image-box-description { font-size: 15px; } .mm-about-page .e-con:has( .elementor-widget-text-editor ) .elementor-widget-text-editor { font-size: 15px; } }