/* ===================================================================== MWI — HARD EDGE Square corners + a chamfered "cut corner" treatment. SITE-WIDE since 2026-08-29 (was page 20 only on the first pass). Scope is the body class `mwi-hardedge`, added by the loader, so the whole surface is controlled from one PHP function rather than from a list of page ids in here. Undo the whole thing: novamira/disable-file wp-content/novamira-sandbox/mwi-hardedge-loader.php Nothing existing is modified to ship this — not mwi-motion.css, not the mu-plugin, not the _elementor_data of any page. ELEMENTOR CONTROLS MADE INERT BY THIS FILE (deliberate, client accepted 2026-08-29). While it is enabled, these panel controls no longer show on the front end: • Border Radius — every widget, every page (that is the whole point). • Background / Border / Box Shadow on the login pill .mwi-account-icon, BELOW 690px only — the client asked for the rings to stand alone with no frame on mobile. Desktop keeps all three live. Everything else stays editable in the panel. ===================================================================== */ body.mwi-hardedge{ --mwi-he-gold: #B9924E; --mwi-he-cut-line: rgba(185,146,78,.82); } /* --------------------------------------------------------------------- 1. EVERY CORNER GOES SQUARE The exclusions are all SHAPES, never corners: - .mwi-rings + subtree — the CSS-3D wedding rings in the login pill. Their bands are real 50% circles (i.f / i.k / i.s), so a blanket rule turns the rings into squares. Named by the client. - .mwi-wa / .mwi-wa-holder + subtrees — the floating WhatsApp button (mobile). Client asked for it back as a circle, 2026-08-29. - .mwi-fab / .mwi-fab-item + subtrees — the DESKTOP contact buttons. These are a different component from the mobile one: measured live at 1440, .mwi-fab-wa is 133x48 at (1270,707) and .mwi-fab-call is 183x48 at (1220,767), both visible, while the mobile .mwi-wa button has zero width up there. Squaring them was the client's "the WhatsApp/phone icon on desktop has not gone back to round" report, 2026-08-29. - .mwi-invite__petal — the falling rose petals, organic blobs. - .mwi-tc__gemring — the diamond's halo pulse: a light, not a box. The :not() list is Selectors-4. If a browser ever fails to parse it the whole rule is dropped, so the failure mode is "nothing changes", never a half-squared page. ------------------------------------------------------------------ */ body.mwi-hardedge *:not(.mwi-rings, .mwi-rings *, .mwi-wa, .mwi-wa *, .mwi-wa-holder, .mwi-wa-holder *, .mwi-fab, .mwi-fab *, .mwi-fab-item, .mwi-fab-item *, .mwi-invite__petal, .mwi-tc__gemring), body.mwi-hardedge *:not(.mwi-rings, .mwi-rings *, .mwi-wa, .mwi-wa *, .mwi-wa-holder, .mwi-wa-holder *, .mwi-fab, .mwi-fab *, .mwi-fab-item, .mwi-fab-item *, .mwi-invite__petal, .mwi-tc__gemring)::before, body.mwi-hardedge *:not(.mwi-rings, .mwi-rings *, .mwi-wa, .mwi-wa *, .mwi-wa-holder, .mwi-wa-holder *, .mwi-fab, .mwi-fab *, .mwi-fab-item, .mwi-fab-item *, .mwi-invite__petal, .mwi-tc__gemring)::after{ border-radius: 0 !important; } /* --------------------------------------------------------------------- 2. THE CUT Top-left + bottom-right, never all four: two opposite cuts read as a letterpress plate / stamped card, which is the register this brand already uses for its service tiles. Four cuts read as a sci-fi HUD. The hairline that closes each cut is drawn as two corner-sized background layers, NOT as a pseudo-element: ::before and ::after are already taken on most of these components (the button sheen, the card's gold head rule, the nav capsule's light sweep, the logo sheen, and the account pill's signed-in bead). The clip eats the outer half of the band, so --cw is authored at ~2.6px to land ~1.3px on screen. ------------------------------------------------------------------ */ body.mwi-hardedge a.elementor-button, body.mwi-hardedge button.wpforms-submit, body.mwi-hardedge .mwi-invite__btn, body.mwi-hardedge .mwi-lang-card, body.mwi-hardedge .mwi-account-icon, body.mwi-hardedge .mwi-card, body.mwi-hardedge .mwi-testi-card, body.mwi-hardedge .mwi-tc__panel, body.mwi-hardedge .mwi-invite__card{ --c: 12px; --cw: 2.6px; --cl: var(--mwi-he-cut-line); clip-path: polygon( var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c) ); } /* The diagonal hairline. TWO components are deliberately NOT in this list, for the same reason: their background IS a gradient, and `background-image` here would wipe it. • .mwi-testi-card — excluded from the start; it gets its diagonals from ::after in 3b. • .mwi-invite__card — REMOVED 2026-08-29 after the client reported the invitation card had gone "glassy, the text is not readable at all". That was this rule. mwi-invite.css declares .mwi-invite__card{background:linear-gradient(180deg,var(--inv-surface),var(--inv-bg))} — a gradient with NO background-color behind it, so overwriting background-image left the card fully transparent and the copy sitting straight on the page. .mwi-tc__panel is safe in this list because its background is a flat colour (#FBF8F3), which background-image cannot touch. Check which of the two a card uses before adding it here. The cut itself still applies to the invitation card; only the corner hairline is gone from it. */ body.mwi-hardedge a.elementor-button, body.mwi-hardedge button.wpforms-submit, body.mwi-hardedge .mwi-invite__btn, body.mwi-hardedge .mwi-lang-card, body.mwi-hardedge .mwi-account-icon, body.mwi-hardedge .mwi-card, body.mwi-hardedge .mwi-tc__panel{ background-image: linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)), linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)); background-repeat: no-repeat, no-repeat; background-position: top left, bottom right; background-size: var(--c) var(--c), var(--c) var(--c); /* border-box on both, so the diagonal lands on the same box the clip-path polygon is measured against — padding-box would offset it by the 1px border on the outlined buttons. */ background-origin: border-box; background-clip: border-box; } /* per-component cut sizes, taken from the measured boxes ------------- */ body.mwi-hardedge a.elementor-button{ --c: 12px; } /* 45-47px tall */ body.mwi-hardedge button.wpforms-submit, body.mwi-hardedge .mwi-invite__btn{ --c: 12px; } body.mwi-hardedge .mwi-lang-card{ --c: 10px; } /* 108.9 x 39 */ body.mwi-hardedge .mwi-account-icon{ --c: 9px; } /* 44.8 x 42 — a bigger cut would reach the rings */ body.mwi-hardedge .mwi-card{ --c: 16px; } /* 206x445..805x547 */ body.mwi-hardedge .mwi-testi-card{ --c: 14px; } /* ~300 x 201 */ body.mwi-hardedge .mwi-tc__panel, body.mwi-hardedge .mwi-invite__card{ --c: 14px; } /* --------------------------------------------------------------------- 3. THE MENU CAPSULE — DESKTOP ONLY, AND THAT IS NOT A STYLE CHOICE The Xpro off-canvas mobile panel AND its overlay are position:fixed DESCENDANTS of .mwi-nav-wrap (verified in the live DOM). clip-path makes an element a containing block, which would trap the panel and break the burger menu — the exact failure the motion layer already guards against on #mwi-header. >=1025px is the same gate the capsule's existing backdrop-filter:blur(10px) already sits behind (mwi-motion.css section 35 strips it below 1025 for this reason), so this adds no new class of risk. Below the gate the capsule is simply square. ------------------------------------------------------------------ */ @media (min-width: 1025px){ body.mwi-hardedge .mwi-nav-wrap{ --c: 14px; /* 554.6 x 53 */ --cw: 2.6px; --cl: var(--mwi-he-cut-line); clip-path: polygon( var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c) ); } } /* --------------------------------------------------------------------- 3b. CASCADE REPAIRS — measured, not guessed Three components did not take the diagonal from the rule above. Each was traced in the SERVED (LiteSpeed-combined) stylesheet, not assumed: a) .mwi-card — Elementor's background lazy-load hack: .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important } The services section is nth-of-type 6, and nothing on this site ever adds .e-lazyloaded, so the suppression is permanent, not temporary. That selector is (0,5,0)!important, so the fix is a legitimately higher-specificity (0,5,1)!important selector — not a repeated-class hack. It only ever sets the corner gradients; these cards carry no Elementor background image of their own. b) .mwi-nav-wrap — killed by a `background:` SHORTHAND, which resets background-image to none: #mwi-header#mwi-header .mwi-nav-wrap{background:...!important} That is (2,1,0)!important and cannot be beaten from a class selector. So the capsule's diagonals move to ::before, which is free here (::after is the nav shimmer). Elementor's `*` lazy rule and the header's `background` shorthand both target ELEMENTS — neither can ever reach a pseudo-element. c) .mwi-testi-card — carries its own linear-gradient background, so it was excluded from the shared rule on purpose. ::after is free here (::before is the card's light sweep). ------------------------------------------------------------------ */ /* (a) beat the lazy-load suppression on the service / portfolio cards */ body.mwi-hardedge .e-con.e-flex.elementor-element.mwi-card{ background-image: linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)), linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)) !important; } /* (b) + (c) the diagonals that have to live on a pseudo-element */ body.mwi-hardedge .mwi-testi-card::after{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)), linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)); background-repeat: no-repeat, no-repeat; background-position: top left, bottom right; background-size: var(--c) var(--c), var(--c) var(--c); } @media (min-width: 1025px){ body.mwi-hardedge .mwi-nav-wrap::before{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)), linear-gradient(135deg, transparent calc(50% - var(--cw)/2), var(--cl) calc(50% - var(--cw)/2), var(--cl) calc(50% + var(--cw)/2), transparent calc(50% + var(--cw)/2)); background-repeat: no-repeat, no-repeat; background-position: top left, bottom right; background-size: var(--c) var(--c), var(--c) var(--c); } } /* --------------------------------------------------------------------- 4. MOBILE: THE RINGS STAND ALONE — no frame under them Client, 2026-08-29: "زیر حلقه ها نیاز نیست دیگه چیزی کادری بذاری / در موبایل فقط". So the pill's ground, hairline, shadow, blur and cut all go — but the BOX STAYS THE SAME SIZE. Padding is untouched on purpose: the pill is only 36x36 here and the rings are 21px, so collapsing it to the artwork would leave a tap target well under the 44px minimum. The frame becomes invisible; the hit area does not move. 689px is this install's real breakpoint: elementor_viewport_md = 690, the same threshold the login pill and the hero carousel already switch on. It is not 767 and not 1024. ------------------------------------------------------------------ */ @media (max-width: 689px){ /* The header owns this pill from a TWO-ID selector (#mwi-header#mwi-header .mwi-account-icon{...border-color:...!important}), which is (2,1,0) and beats any class selector no matter how many !importants it carries. Measured: background, shadow, blur and the cut all cleared from a plain class rule, but the 1px rgba(36,26,18,.12) hairline survived. So the whole block is written at (2,3,1) — higher than the rule it has to outrank, and still no wider than it needs to be. Same family as the .mwi-nav-wrap finding in 3b. */ body.mwi-hardedge #mwi-header#mwi-header .mwi-account-icon, body.mwi-hardedge .mwi-account-icon{ background: transparent !important; background-image: none !important; /* transparent, NOT border:0 — zeroing the width would shrink the box and take 2px off a tap target that is already only 36x36. */ border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; clip-path: none !important; } } /* --------------------------------------------------------------------- 5. Never in the Elementor editor — the client always sees the real widget boxes while editing. (The loader also skips the editor, so this is the second of two guards.) ------------------------------------------------------------------ */ body.elementor-editor-active *{ clip-path: none !important; }