/* ========================================================================== SUDAIR PHARMA — BLUE FADE CARDS A photo card whose lower half fades into a frosted blue panel, with the copy over the blue. Used in two places, both named by the client: • Corporate Social Responsibility → "Scientific & Medical Partnerships" (Our People / Our Environment / Our Responsibility) — 3 cards • Manufacture → "Manufacturing Technologies" — 5 cards Scoped entirely under .sud-bluefade, a class that exists on those two containers and nowhere else. Nothing here can reach the header, the footer, the six-logo partner grid that shares the CSR section's heading, or any other section on either page. NO CONTENT CHANGES. Every word, image, number and heading is exactly as it was; this file only changes how the existing cards are painted. THE TWO SECTIONS ARE BUILT DIFFERENTLY, and the rules below are written to cover both without either needing a special case: - CSR wraps its heading and paragraph in one container; Manufacture holds its number, title and text as separate sibling widgets. - CSR cards clip their overflow; Manufacture cards do not. - CSR cards are already this blue; Manufacture cards are brand green. Each of those is handled once, at the rule that cares, and commented there. WHAT WAS THERE BEFORE A photo widget occupying the top of the card, and a flat colour below it. Where the photo ends, the flat colour begins — and that edge is the hard horizontal line the brief asks to remove. ========================================================================== */ .sud-bluefade { /* * Read off the card's existing colour, rgb(133,211,230), rather than picked * fresh — the section keeps the blue it already had and only stops being * flat. The deep end is the same hue carried down in luminance, so the * result reads as one colour in shadow rather than as two colours. */ --bf-blue: 133, 211, 230; --bf-deep: 78, 163, 200; --bf-ease: cubic-bezier(.22, 1, .36, 1); } /* -------------------------------------------------------------------------- THE CARD -------------------------------------------------------------------------- */ /* * Doubled selector — .sud-bluefade .sud-bluefade__card — deliberately. * * Elementor writes each card's own rules at * .elementor-121 .elementor-element.elementor-element-f9ba28a — three classes — * and its page CSS loads after the theme's. A single-class selector here would * lose. Two classes settle it without !important and without touching any of * Elementor's own settings. */ .sud-bluefade .sud-bluefade__card { position: relative; border-radius: 18px; /* * overflow:hidden, stated rather than assumed. * * The CSR cards already clip; the Manufacturing cards are overflow:visible, * which would let the overlay and the pattern spill past the rounded * corners into the gap between cards. */ overflow: hidden; /* * The card's ground colour. * * This is the colour the fade lands on, and the two must match EXACTLY or * the join reappears as a colour step. The CSR cards are already this * value, so nothing changes there. The Manufacturing cards are brand green * rgb(67,182,73) — applying a blue fade over a green card is what the brief * asks for, and it means the card's own colour has to come with it. * * !important because Elementor sets background-color per element at * .elementor-NNN .elementor-element-xxxx — three classes — which outranks * anything reasonable this file could say. */ background-color: rgb(var(--bf-blue)) !important; /* Soft shadow, as asked: wide and low-contrast rather than dark and tight, which is what separates a premium card from a floating one. */ box-shadow: 0 2px 6px rgba(14, 60, 82, .06), 0 14px 34px rgba(14, 60, 82, .12); transition: transform .38s var(--bf-ease), box-shadow .38s var(--bf-ease); } /* ========================================================================== THE FADE — anchored to the PHOTO, not to the card This is the heart of the whole file, and the reason it is built this way is worth stating plainly. The obvious approach is one overlay across the card, faded in with a mask at some percentage of the CARD's height. That works on desktop and breaks everywhere else, which is exactly what happened here: the photo widget is a fixed ~310px tall at every breakpoint, while the card grows as the text rewraps. Measured, the photo's bottom edge sat at 55.5% of the card on desktop but 39.2% on a 375px phone — so a mask tuned to reach full opacity at 54% was solid just above the join on desktop and still only ~43% opaque at the join on mobile, putting the hard line straight back. Anchoring the fade to the photo's own box removes the variable. The overlay below is a child of the image widget, so its percentages are percentages of the PHOTO, and it reaches full opacity at the photo's bottom edge at every card height there will ever be. The colour it lands on is the card's own rgb(133,211,230). So at the join, the pixel above is opaque rgb(133,211,230) and the pixel below is the card's rgb(133,211,230). There is no edge, because there is no colour difference — not a hidden edge, an absent one. ========================================================================== */ .sud-bluefade .sud-bluefade__card .elementor-widget-image { /* The overlay is a child of this box; nothing must clip it. */ overflow: visible; } .sud-bluefade .sud-bluefade__card .elementor-widget-image::after { content: ''; position: absolute; inset: 0; z-index: 2; /* over the photo, under the copy */ pointer-events: none; /* Ends on exactly the card's own colour — see the note above. */ background: linear-gradient( 180deg, rgba(var(--bf-blue), .97) 0%, rgba(var(--bf-blue), 1) 100% ); /* * The frosted glass. * * backdrop-filter blurs what is BEHIND the element — here, the lower part * of the photograph. That is exactly the "image remains subtly visible * behind the overlay" the brief describes: the photo is not hidden, it is * diffused. saturate lifts it slightly so the blur does not read as grey. */ -webkit-backdrop-filter: blur(9px) saturate(118%); backdrop-filter: blur(9px) saturate(118%); /* * The mask does the fade, not alpha stops in the gradient — because the * mask takes the backdrop blur with it. With alpha alone the blur would * apply at full strength right up to the top of the photo, frosting the * part that is meant to be perfectly sharp. * * Fully opaque at 97% rather than 100%: a hair of margin against sub-pixel * rounding at the photo's bottom edge, invisible at any size. */ -webkit-mask-image: linear-gradient( 180deg, transparent 40%, rgba(0, 0, 0, .32) 60%, rgba(0, 0, 0, .78) 81%, #000 97% ); mask-image: linear-gradient( 180deg, transparent 40%, rgba(0, 0, 0, .32) 60%, rgba(0, 0, 0, .78) 81%, #000 97% ); transition: filter .38s var(--bf-ease); } /* * Without mask support the overlay would be a hard-edged slab hiding the photo * completely — worse than the flat colour it replaces. There, it is dropped and * the card renders as it does today. Every browser Sudair supports has masks; * this is a floor, not a plan. */ @supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) { .sud-bluefade .sud-bluefade__card .elementor-widget-image::after { display: none; } } /* -------------------------------------------------------------------------- THE LOWER GRADIENT "The lower portion should have a soft blue gradient rather than a flat bright blue colour." This one CAN safely span the whole card, because by the time it is reached both sides of the photo's bottom edge are already the same flat cyan — so a wash applied across that edge cannot reveal it. It only deepens the blue towards the bottom of the card. On a pseudo-element rather than the card's background for two reasons. Elementor lazy-loads container backgrounds with a rule forcing `background-image: none !important` on every descendant of the 4th and later top-level containers until its observer fires — this section is the 7th, so a background-image gradient here would simply be blanked, the same trap that blanked the map icons and the product-card marks. And painting over the card leaves its background-color untouched, so nothing set in the editor is overridden. -------------------------------------------------------------------------- */ .sud-bluefade .sud-bluefade__card::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--bf-deep), 0) 44%, rgba(var(--bf-deep), .16) 64%, rgba(var(--bf-deep), .34) 82%, rgba(var(--bf-deep), .52) 100% ); transition: filter .38s var(--bf-ease); } /* -------------------------------------------------------------------------- THE DECORATIVE PATTERN Flowing lines and particles across the bottom of each card, as in the reference. Low opacity — it must read as texture, never as content. -------------------------------------------------------------------------- */ .sud-bluefade .sud-bluefade__card::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 46%; z-index: 4; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 190' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='.9'%3E%3Cpath d='M-10 150C60 120 120 168 200 146s150-58 220-88'/%3E%3Cpath d='M-10 166C70 138 130 182 210 160s140-52 210-82'/%3E%3Cpath d='M-10 182C80 156 140 196 220 174s130-46 200-76'/%3E%3Cpath d='M-10 134C50 104 130 150 200 130s160-64 220-94'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.75'%3E%3Ccircle cx='58' cy='138' r='1.9'/%3E%3Ccircle cx='126' cy='158' r='1.4'/%3E%3Ccircle cx='196' cy='141' r='2.1'/%3E%3Ccircle cx='258' cy='160' r='1.4'/%3E%3Ccircle cx='320' cy='132' r='1.8'/%3E%3Ccircle cx='362' cy='152' r='1.3'/%3E%3Ccircle cx='92' cy='172' r='1.3'/%3E%3Ccircle cx='288' cy='176' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%; opacity: .30; /* Faded out towards the top so the texture has no edge of its own. */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); transition: opacity .38s var(--bf-ease); } /* -------------------------------------------------------------------------- THE COPY Lifted above every overlay. Without this they would paint over the words — the one outcome the brief rules out. -------------------------------------------------------------------------- */ /* * Every child EXCEPT the photo is lifted. * * The two sections are built differently: the CSR card wraps its heading and * paragraph in one container, while each Manufacturing card holds its number, * title and text as three separate sibling widgets. Selecting "everything that * is not the image" covers both without either needing its own rule, and keeps * working if a widget is added or removed in the editor. */ .sud-bluefade .sud-bluefade__card > *:not(.elementor-widget-image), .sud-bluefade .sud-bluefade__body { position: relative; z-index: 5; } /* The title, made more prominent: heavier, a little wider, and lifted off the blue with a soft shadow so it stays crisp where the photo shows through. */ .sud-bluefade .sud-bluefade__card .elementor-heading-title { font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 10px rgba(8, 52, 74, .28); } /* * The short rule under the title, as in the reference. * * A pseudo-element on the heading rather than a divider widget, because adding * a widget would change the page's content; this is decoration and belongs in * the stylesheet. */ .sud-bluefade .sud-bluefade__card .elementor-heading-title::after { content: ''; display: block; inline-size: 46px; block-size: 2px; margin: .7rem auto 0; border-radius: 2px; background: rgba(255, 255, 255, .75); } /* The paragraph keeps its existing size and colour; only its legibility over a photograph is improved. */ .sud-bluefade .sud-bluefade__card p { text-shadow: 0 1px 8px rgba(8, 52, 74, .22); } /* -------------------------------------------------------------------------- ICONS The reference shows a frosted circular icon above each title. These cards carry NO icon, and the brief says not to introduce icons that do not already exist — so none are added. This rule exists so that if one is ever added in the editor it inherits the reference's treatment rather than arriving unstyled. -------------------------------------------------------------------------- */ .sud-bluefade .sud-bluefade__card .elementor-icon { color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; padding: .85rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* -------------------------------------------------------------------------- HOVER A lift, a deeper shadow, and a very slight lightening. The blue is never driven brighter or more saturated — the brief is explicit — so the change is carried by the shadow and the movement, with the colour barely moving. -------------------------------------------------------------------------- */ @media (hover: hover) { .sud-bluefade .sud-bluefade__card:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(14, 60, 82, .08), 0 22px 48px rgba(14, 60, 82, .18); } /* 1.03 — perceptible beside a resting card, invisible on its own, which is the definition of subtle the brief asks for. */ .sud-bluefade .sud-bluefade__card:hover .elementor-widget-image::after { filter: brightness(1.03); } .sud-bluefade .sud-bluefade__card:hover::after { opacity: .40; } } /* -------------------------------------------------------------------------- RESPONSIVE The row is flex, nowrap, three cards at 33.33%. That is the desktop layout and it is left exactly as it is. Below the tablet breakpoint the cards wrap, so three cards cannot force a horizontal scrollbar. Note that the fade needs NO breakpoint of its own — being anchored to the photo, it is already correct at every card height. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .sud-bluefade .sud-bluefade__card { border-radius: 16px; } } @media (max-width: 880px) { /* * flex-wrap, not a column: Elementor sets the row's direction per * breakpoint, and overriding the direction here would fight it. Allowing * wrap leaves the direction alone and simply lets a card that no longer * fits move to the next line. */ .sud-bluefade .e-con-inner > .e-con:last-child, .sud-bluefade .elementor-element-eab84cc { flex-wrap: wrap; } /* * inline-size:auto releases Elementor's own width. * * It writes `width: var(--width)` = 33.33% onto .e-con, and a definite * width beats flex-basis for the used size — so with wrap alone the cards * stayed squashed three-across instead of stacking. Handing the sizing back * to flex-basis is what lets them go one per line. */ .sud-bluefade .sud-bluefade__card { inline-size: auto; flex: 1 1 300px; min-inline-size: 0; } } @media (max-width: 600px) { .sud-bluefade .sud-bluefade__card .elementor-heading-title::after { inline-size: 38px; margin-block-start: .55rem; } } /* -------------------------------------------------------------------------- REDUCED MOTION The lift is removed outright rather than slowed — the requirement is no movement, not gentler movement. The shadow still deepens, so the hover remains legible. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sud-bluefade .sud-bluefade__card, .sud-bluefade .sud-bluefade__card::before, .sud-bluefade .sud-bluefade__card::after, .sud-bluefade .sud-bluefade__card .elementor-widget-image::after { transition: none !important; } .sud-bluefade .sud-bluefade__card:hover { transform: none; } } @media print { .sud-bluefade .sud-bluefade__card { box-shadow: none; } .sud-bluefade .sud-bluefade__card::after { display: none; } }