.elementor-9 .elementor-element.elementor-element-1c94715f{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.4;}.elementor-9 .elementor-element.elementor-element-1c94715f:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-1c94715f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}.elementor-9 .elementor-element.elementor-element-1c94715f::before, .elementor-9 .elementor-element.elementor-element-1c94715f > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-1c94715f > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-1c94715f > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-1c94715f > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-1c94715f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://mdroofing.lk/wp-content/uploads/2026/03/Trowel-Features-to-Consider-When-Buying-a-Trowel-Sky-Roofing-Construction-Remodeling.jpg");--background-overlay:'';background-repeat:no-repeat;background-size:cover;}.elementor-9 .elementor-element.elementor-element-746f2321{--spacer-size:10px;}.elementor-9 .elementor-element.elementor-element-3e854fd4{--display:flex;--min-height:320px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-3646030c{padding:0px 0px 0px 5px;text-align:center;}.elementor-9 .elementor-element.elementor-element-3646030c .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-weight:500;letter-spacing:1.1px;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-e91ad5a{margin:-11px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-e91ad5a .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:90px;font-weight:700;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-a5e45a1{margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 10px;text-align:center;}.elementor-9 .elementor-element.elementor-element-a5e45a1 .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-weight:400;line-height:21px;letter-spacing:1.1px;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-1bc7db81{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9 .elementor-element.elementor-element-1ff07f54 .elementor-button{background-color:transparent;font-family:"Inter Tight", Sans-serif;font-weight:500;letter-spacing:1.2px;background-image:linear-gradient(180deg, #61CE7000 0%, #F2295B00 100%);border-style:solid;border-width:2px 2px 2px 2px;border-radius:10px 10px 10px 10px;}.elementor-9 .elementor-element.elementor-element-1ff07f54 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-1ff07f54 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(180deg, #FF7A1C 0%, #FF7A1C 100%);}.elementor-9 .elementor-element.elementor-element-5709f88 .elementor-button{background-color:transparent;font-family:"Inter Tight", Sans-serif;font-weight:500;letter-spacing:1.2px;background-image:linear-gradient(180deg, #61CE7000 0%, #F2295B00 100%);border-style:solid;border-width:2px 2px 2px 2px;border-radius:10px 10px 10px 10px;}.elementor-9 .elementor-element.elementor-element-5709f88 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-5709f88 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(180deg, #FF7A1C 0%, #FF7A1C 100%);}.elementor-9 .elementor-element.elementor-element-17b8662{--display:flex;}.elementor-9 .elementor-element.elementor-element-ca5edad{--spacer-size:40px;}.elementor-9 .elementor-element.elementor-element-5139902b{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:020px;--padding-right:020px;}.elementor-9 .elementor-element.elementor-element-7a3cf7e0{--display:flex;--min-height:300px;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-e144ed9{text-align:center;}.elementor-9 .elementor-element.elementor-element-e144ed9 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:30px;font-weight:800;color:#000000;}.elementor-9 .elementor-element.elementor-element-d6ff80e{--display:flex;}.elementor-9 .elementor-element.elementor-element-2d3520f{--spacer-size:20px;}.elementor-9 .elementor-element.elementor-element-2a539f6a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-2a539f6a:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-2a539f6a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0B1120 0%, #0B1120 100%);}.elementor-9 .elementor-element.elementor-element-3a9b11ad{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-9 .elementor-element.elementor-element-3a9b11ad.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-746f2321{--spacer-size:30px;}.elementor-9 .elementor-element.elementor-element-3646030c{padding:0px 0px 0px 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-e91ad5a{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-9 .elementor-element.elementor-element-e91ad5a .elementor-heading-title{font-size:48px;line-height:1.1em;}.elementor-9 .elementor-element.elementor-element-a5e45a1{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 10px 10px 10px;text-align:center;}.elementor-9 .elementor-element.elementor-element-1bc7db81{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-9 .elementor-element.elementor-element-1bc7db81.e-con{--align-self:center;}.elementor-9 .elementor-element.elementor-element-5139902b{--padding-top:0px;--padding-bottom:0px;--padding-left:05px;--padding-right:05px;}}/* Start custom CSS *//* ============================================================ PREMIUM PRODUCT CARD — Elementor Custom CSS Target: .e-prod-card (add this class to your container) Tested: Elementor Pro 3.x, WordPress 6.x, no WooCommerce ============================================================ */ /* ───────────────────────────────────────────────────────────── 1. CONTAINER FOUNDATION Sets up the card shell: layered shadow for depth, smooth border, and the overflow:hidden that lets image effects work. ───────────────────────────────────────────────────────────── */ .e-prod-card { /* Off-white surface — avoids the harshness of pure white */ background: #FFFFFF; border-radius: 16px; /* Three-layer shadow: proximity ambient + mid throw + broad haze */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.04); /* Hairline border — just enough to define the card edge */ border: 1px solid rgba(0, 0, 0, 0.06); /* Critical: clips the image zoom and rounded corners */ overflow: hidden; /* GPU hint — promotes to its own compositor layer for smooth animation */ will-change: transform, box-shadow; /* Smooth all transitions from a single declaration */ transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease; /* Relative positioning anchors any badge overlays you add */ position: relative; } /* ───────────────────────────────────────────────────────────── 2. CONTAINER HOVER — The Lift A spring-eased upward float + expanded shadow creates a physical "picking it up" sensation. The accent ring communicates focus without needing a focus outline. ───────────────────────────────────────────────────────────── */ .e-prod-card:hover { /* 5px lift + 1.2% scale feels physical without being theatrical */ transform: translateY(-5px) scale(1.012); /* Shadow deepens and the ambient haze expands on hover */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 36px rgba(0, 0, 0, 0.11), 0 0 0 1.5px rgba(110, 95, 190, 0.2); /* Border shifts toward the brand accent colour */ border-color: rgba(110, 95, 190, 0.22); } /* ───────────────────────────────────────────────────────────── 3. IMAGE REFINEMENTS The :first-child body.elementor-page-9 targets the Elementor image widget at the top of your container without needing extra classes. The zoom-on-hover gives the card visual "life." ───────────────────────────────────────────────────────────── */ /* The Elementor image wrapper */ .e-prod-card .elementor-widget-image { overflow: hidden; /* Optional: force 4:3 ratio for consistent grid layouts */ aspect-ratio: 4 / 3; display: block; } /* The actual element */ .e-prod-card .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; /* Smooth zoom — slightly longer duration than container transition */ transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1); /* Ensures sharp rendering at all scales */ image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; } /* Zoom triggers when the container (not the image) is hovered */ .e-prod-card:hover .elementor-widget-image img { transform: scale(1.065); } /* ───────────────────────────────────────────────────────────── 4. TYPOGRAPHY SYSTEM Targets Elementor's heading and text widget wrappers. Establishes a tight hierarchy: heading > body text, with micro-details (letter-spacing, font smoothing) that separate amateur from professional at close reading. ───────────────────────────────────────────────────────────── */ /* All text inside the card */ .e-prod-card .elementor-widget-text-editor, .e-prod-card .elementor-widget-heading { /* Sub-pixel rendering — smoother on high-DPI displays */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Heading / product title */ .e-prod-card .elementor-widget-heading .elementor-heading-title { font-size: clamp(15px, 1.5vw, 18px); font-weight: 650; /* Semibold — heavier than 600 where supported */ line-height: 1.3; letter-spacing: -0.02em; /* Tight tracking reads as editorial quality */ color: #1A1825; } /* Body / description text */ .e-prod-card .elementor-widget-text-editor p { font-size: 13.5px; line-height: 1.6; color: #6E6C7A; letter-spacing: 0.005em; margin-bottom: 0; } /* ───────────────────────────────────────────────────────────── 5. INTERNAL SPACING & LAYOUT RHYTHM Elementor containers carry their own padding — these rules fine-tune the inner widget gaps for a composed, editorial feel. ───────────────────────────────────────────────────────────── */ /* Gap between widgets inside the card body (image excluded) */ .e-prod-card > .e-con-inner > .elementor-widget:not(.elementor-widget-image) { margin-bottom: 8px; } /* Remove bottom margin from the last element — padding handles it */ .e-prod-card > .e-con-inner > .elementor-widget:last-child { margin-bottom: 0; } /* Content area below the image gets breathing room */ .e-prod-card > .e-con-inner { padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } /* ───────────────────────────────────────────────────────────── 6. LINKED TEXT / CTA ELEMENT Targets Elementor's Button widget AND any text widget containing an tag. The pill-style treatment signals interactivity. The fill-on-hover feels decisive. ───────────────────────────────────────────────────────────── */ /* ── Elementor Button Widget ── */ .e-prod-card .elementor-widget-button .elementor-button { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #5A4FB0; background: transparent; border: 1.5px solid rgba(90, 79, 176, 0.3); border-radius: 30px; padding: 9px 18px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease; } .e-prod-card .elementor-widget-button .elementor-button:hover { background: #5A4FB0; color: #FFFFFF; border-color: #5A4FB0; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(90, 79, 176, 0.38); } .e-prod-card .elementor-widget-button .elementor-button:active { transform: translateY(0px); box-shadow: 0 2px 8px rgba(90, 79, 176, 0.28); } /* ── Plain tags inside any text widget ── */ .e-prod-card .elementor-widget-text-editor a { color: #5A4FB0; text-decoration: none; font-weight: 600; border-bottom: 1.5px solid rgba(90, 79, 176, 0.25); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; } .e-prod-card .elementor-widget-text-editor a:hover { color: #3D3490; border-color: rgba(90, 79, 176, 0.7); } /* ───────────────────────────────────────────────────────────── 7. OPTIONAL SHIMMER HIGHLIGHT ON HOVER A pseudo-element casts a soft specular gloss across the card face on hover — like light catching a physical surface. Remove this block if you prefer a flatter aesthetic. ───────────────────────────────────────────────────────────── */ .e-prod-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.0) 55% ); pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.35s ease; } .e-prod-card:hover::before { opacity: 1; } /* ───────────────────────────────────────────────────────────── 8. ACCESSIBILITY & REDUCED MOTION Respects the OS "reduce motion" preference — all animations collapse to instant transitions. Zero extra effort for users; good practice for WCAG 2.1 AA compliance. ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .e-prod-card, .e-prod-card *, .e-prod-card::before, .e-prod-card::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────── 9. RESPONSIVE GUARD On very small screens, disable the lift to prevent cards feeling jittery on touch devices where hover lingers. ───────────────────────────────────────────────────────────── */ @media (hover: none) and (pointer: coarse) { .e-prod-card:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.06); } .e-prod-card:hover::before { opacity: 0; } .e-prod-card:hover .elementor-widget-image img { transform: none; } }/* End custom CSS */