/** * "NEW PROJECTS" section — home page (post 53), container 71787404. * ----------------------------------------------------------------------------- * The six tiles are Essential Addons "flip box" widgets. A flip box hides the * front face on hover and shows a coloured back face, so the image vanished the * moment the cursor touched it and the caption was only ever visible mid-hover. * * This turns them into plain image cards: the caption sits permanently on the * image over a dark scrim, and hovering zooms the image and lights the caption * up in the brand orange. * * Nothing here touches the widget data, so the links, captions and "open in new * tab" settings are still what Elementor stores in the database. Only the * presentation is overridden, and only inside container 71787404 — the same * widget is used elsewhere on the page (the "Our Clients" logos) and must keep * flipping. * * ----------------------------------------------------------------------------- * WHY THE SELECTORS LOOK OVERBUILT * ----------------------------------------------------------------------------- * Elementor compiles per-widget styles into uploads/elementor/css/post-53.css * using selectors of the form * * .elementor-53 .elementor-element.elementor-element-312e7413 .eael-... * * which is FOUR classes. Anything here that has to beat those has to carry at * least five, hence the `.elementor-element.elementor-widget-eael-flip-box` * link in the middle of every chain — it contributes two classes on a single * element and keeps the rules independent of stylesheet load order. * * Getting this wrong is not obvious from the source: an under-specific rule * still wins on hover (`:hover` silently adds a class's worth of weight) while * losing at rest, which shows up as "the image only appears when I mouse over * it" rather than as a stylesheet that plainly does nothing. * * ----------------------------------------------------------------------------- * CHANGING A TILE IMAGE * ----------------------------------------------------------------------------- * The tile background images are NOT in this file. They are generated in the * child theme's functions.php — usssite_project_tile_styles() — which scans * ../images/projects/ and matches each tile by base name, whatever the * extension. See that function for the procedure and the tile/name map. * * Everything else about the tiles — layout, scrim, hover — is here. */ /* ----------------------------------------------------------------------------- * 1. Layout — stop the flip, stack both faces * -------------------------------------------------------------------------- */ /* The plugin relies on `perspective` to establish the containing block for the * absolutely positioned faces. Declare `position: relative` explicitly so that * still holds, and clip the zoomed image to the rounded corners. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container { position: relative; overflow: hidden; border-radius: 15px; transition: box-shadow 450ms ease, transform 450ms ease; } /* Front face: the image. Scaled on hover, so give it an origin and a * transform-only transition (the plugin's `transition-property: all` would also * animate opacity and visibility, which reads as a flicker). */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container .eael-elements-flip-box-front-container { transform: scale(1); transform-origin: center center; transition: transform 450ms ease; backface-visibility: visible; } /* Back face: no longer a "back". It becomes the caption layer sitting on top of * the image, so the plugin's opaque background is replaced with a scrim that * only darkens the lower half. * * `background-image` here is what has to outrank Elementor's per-widget * gradient — see the note at the top of the file. `background-color` is reset * alongside it because a gradient with transparent stops would otherwise let * the widget's own colour show through underneath. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container .eael-elements-flip-box-rear-container { z-index: 3; opacity: 1; visibility: visible; transform: none; backface-visibility: visible; align-items: flex-end; background-color: transparent; background-image: linear-gradient( 180deg, rgba(4, 12, 20, 0) 35%, rgba(4, 12, 20, 0.55) 68%, rgba(4, 12, 20, 0.88) 100% ); transition: background-image 450ms ease; pointer-events: none; /* clicks fall through to the wrapping both faces */ } /* Caption spacing. The plugin's default padding is symmetrical; the text reads * better pinned to the bottom-left corner. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-rear-container .eael-elements-flip-box-padding { padding: 0 22px 20px 22px; text-align: left; } .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-rear-container .eael-elements-flip-box-content { color: #ffffff; font-size: 15px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); transition: color 300ms ease, text-shadow 300ms ease; } .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-rear-container .eael-elements-flip-box-content p { margin: 0; } /* The front face carries an empty because the widget is set to * "image" mode with no image chosen. A src-less img can render as a broken-image * placeholder; there is nothing to show, so hide it. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-flipbox-image-as-icon { display: none; } /* ----------------------------------------------------------------------------- * 2. Hover — zoom the image, light up the caption * -------------------------------------------------------------------------- */ /* Cancel the "zoom out" animation, which hid the front face entirely. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-animate-zoom-out.eael-elements-flip-box-container:hover .eael-elements-flip-box-front-container { opacity: 1; visibility: visible; transform: scale(1.08); } /* Deepen the scrim so the brighter image does not wash out the caption. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container:hover .eael-elements-flip-box-rear-container { background-image: linear-gradient( 180deg, rgba(4, 12, 20, 0.05) 30%, rgba(4, 12, 20, 0.65) 62%, rgba(4, 12, 20, 0.94) 100% ); } /* The glow. #F94307 is the brand orange — the same value as Elementor's global * colour 813e44e, hardcoded on purpose: that CSS variable is only defined in * the generated kit stylesheet (post-13.css), and where that file is missing * the whole declaration is dropped and the colour silently disappears. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container:hover .eael-elements-flip-box-rear-container .eael-elements-flip-box-content { color: #ff7a45; text-shadow: 0 0 10px rgba(249, 67, 7, 0.85), 0 0 26px rgba(249, 67, 7, 0.45), 0 1px 3px rgba(0, 0, 0, 0.7); } /* Lift the whole tile slightly. */ .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(4, 12, 20, 0.28); } /* ----------------------------------------------------------------------------- * 3. Small screens * -------------------------------------------------------------------------- */ /* Elementor already drops the caption to 12px on mobile. Ease the padding to * match and soften the zoom, which is disorienting on a touch screen where * "hover" is really a tap. */ @media (max-width: 767px) { .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-rear-container .eael-elements-flip-box-content { font-size: 13px; } .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-rear-container .eael-elements-flip-box-padding { padding: 0 16px 14px 16px; } .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-animate-zoom-out.eael-elements-flip-box-container:hover .eael-elements-flip-box-front-container { transform: scale(1.03); } } /* Respect a reduced-motion preference: keep the colour change, drop the movement. */ @media (prefers-reduced-motion: reduce) { .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-animate-zoom-out.eael-elements-flip-box-container:hover .eael-elements-flip-box-front-container { transform: none; } .elementor-element-71787404 .elementor-element.elementor-widget-eael-flip-box .eael-elements-flip-box-container:hover { transform: none; } }