/* ===================================================================== Burj AlLuqLuq — Modern polish overlay (v2 — bolder) --------------------------------------------------------------------- A presentation-only layer on top of the original Elementor design. It refines depth, motion, shape and focus; it does NOT change any content, text, images, or page structure. Palette from the original site: blue #4892da · navy #002866 · yellow #ffee00 · cream #fdfdfa Fully reversible: delete the in the page to restore the original look. ===================================================================== */ :root{ --bl-blue:#4892da; --bl-blue-dark:#2f6fb0; --bl-navy:#002866; --bl-yellow:#ffee00; --bl-ring:rgba(72,146,218,.40); --bl-shadow-sm:0 2px 10px rgba(0,40,102,.07); --bl-shadow:0 10px 30px rgba(0,40,102,.12); --bl-shadow-lg:0 22px 55px rgba(0,40,102,.20); --bl-radius:18px; --bl-ease:cubic-bezier(.22,.68,.28,1); } /* --------------------------------------------------------------------- 1. Base rendering & niceties ------------------------------------------------------------------- */ html{ scroll-behavior:smooth; } [id]{ scroll-margin-top:90px; } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } ::selection{ background:var(--bl-blue); color:#fff; } html{ scrollbar-width:thin; scrollbar-color:var(--bl-blue) transparent; } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--bl-blue),var(--bl-blue-dark)); border-radius:10px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--bl-navy); } a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible,.elementor-button:focus-visible{ outline:3px solid var(--bl-blue); outline-offset:3px; border-radius:10px; } /* --------------------------------------------------------------------- 2. Typography ------------------------------------------------------------------- */ h1,h2,h3,h4,h5,.elementor-heading-title{ letter-spacing:-.015em; } p,li,.elementor-widget-text-editor{ text-wrap:pretty; } /* Animated underline for in-copy text links */ .elementor-widget-text-editor a:not(.elementor-button){ background-image:linear-gradient(var(--bl-blue),var(--bl-blue)); background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s var(--bl-ease), color .2s var(--bl-ease); padding-bottom:1px; } .elementor-widget-text-editor a:not(.elementor-button):hover{ background-size:100% 2px; } /* --------------------------------------------------------------------- 3. Buttons — modern pill with depth, sheen & lift ------------------------------------------------------------------- */ .elementor-button, .elementor-widget-button a, .wp-block-button__link, button[type=submit], input[type=submit], .wpcf7-submit, .elementor-form .elementor-button{ border-radius:999px !important; box-shadow:var(--bl-shadow-sm), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.08) !important; transition:transform .24s var(--bl-ease), box-shadow .24s var(--bl-ease), filter .24s var(--bl-ease), letter-spacing .24s var(--bl-ease) !important; will-change:transform; } .elementor-button:hover, .elementor-widget-button a:hover, .wp-block-button__link:hover, button[type=submit]:hover, input[type=submit]:hover, .wpcf7-submit:hover, .elementor-form .elementor-button:hover{ transform:translateY(-4px); box-shadow:var(--bl-shadow-lg), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.10) !important; filter:saturate(1.08) brightness(1.03); letter-spacing:.02em; } .elementor-button:active, .elementor-widget-button a:active, .wp-block-button__link:active{ transform:translateY(-1px); } /* --------------------------------------------------------------------- 4. Hero "Slides" CTA cards — rounded, deep, lively hover ------------------------------------------------------------------- */ .elementor-widget-slides .swiper-slide{ border-radius:var(--bl-radius); overflow:hidden; transition:transform .4s var(--bl-ease), box-shadow .4s var(--bl-ease); } .elementor-widget-slides .swiper-slide:hover{ transform:translateY(-6px); box-shadow:var(--bl-shadow-lg); z-index:2; } .elementor-widget-slides .swiper-slide .swiper-slide-bg{ transition:transform .7s var(--bl-ease), filter .4s var(--bl-ease); } .elementor-widget-slides .swiper-slide:hover .swiper-slide-bg{ transform:scale(1.08); filter:brightness(1.05); } .elementor-widget-slides .elementor-icon, .elementor-widget-slides .elementor-slide-heading{ transition:transform .4s var(--bl-ease); } .elementor-widget-slides .swiper-slide:hover .elementor-icon{ transform:scale(1.12); } /* --------------------------------------------------------------------- 5. Photo galleries (EAE filterable) — soft cards + zoom ------------------------------------------------------------------- */ .elementor-widget-eae-filterable .eae-item, .elementor-widget-eae-filterable figure, .elementor-widget-eae-filterable .eae-card{ border-radius:var(--bl-radius); overflow:hidden; box-shadow:var(--bl-shadow); transition:transform .35s var(--bl-ease), box-shadow .35s var(--bl-ease); } .elementor-widget-eae-filterable .eae-item:hover, .elementor-widget-eae-filterable .eae-card:hover{ transform:translateY(-6px); box-shadow:var(--bl-shadow-lg); } .elementor-widget-eae-filterable img{ transition:transform .7s var(--bl-ease); display:block; width:100%; } .elementor-widget-eae-filterable .eae-item:hover img, .elementor-widget-eae-filterable figure:hover img, .elementor-widget-eae-filterable .eae-card:hover img{ transform:scale(1.07); } /* --------------------------------------------------------------------- 6. Partner / funder logo carousel — clean uniform "logo cards" ------------------------------------------------------------------- */ .elementor-widget-image-carousel .swiper-slide img{ background:#fff; padding:18px 22px; border-radius:16px; box-shadow:var(--bl-shadow-sm); transition:transform .32s var(--bl-ease), box-shadow .32s var(--bl-ease); } .elementor-widget-image-carousel .swiper-slide:hover img{ transform:translateY(-5px) scale(1.03); box-shadow:var(--bl-shadow); } /* --------------------------------------------------------------------- 7. Forms — rounded fields with a soft focus ring ------------------------------------------------------------------- */ .elementor-field-group input:not([type=submit]), .elementor-field-group textarea, .elementor-field-group select, .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7 textarea,.wpcf7 select{ border-radius:14px !important; transition:border-color .2s var(--bl-ease), box-shadow .2s var(--bl-ease), background-color .2s var(--bl-ease) !important; } .elementor-field-group input:not([type=submit]):focus, .elementor-field-group textarea:focus,.elementor-field-group select:focus, .wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{ border-color:var(--bl-blue) !important; box-shadow:0 0 0 4px var(--bl-ring) !important; outline:none !important; } /* --------------------------------------------------------------------- 8. Content images inside links / lightbox thumbs ------------------------------------------------------------------- */ .elementor-widget-text-editor a img, a[data-elementor-open-lightbox] img{ border-radius:14px; transition:transform .45s var(--bl-ease), box-shadow .35s var(--bl-ease); } a[data-elementor-open-lightbox]:hover img{ transform:scale(1.03); box-shadow:var(--bl-shadow); } /* --------------------------------------------------------------------- 9. Sleeker top WordPress bar — subtle glass ------------------------------------------------------------------- */ #wpadminbar{ background:rgba(20,28,44,.82) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.18); } #wpadminbar .ab-item{ transition:color .2s var(--bl-ease), background-color .2s var(--bl-ease); } /* --------------------------------------------------------------------- 10. Floating WonderPush bell — gentle hover ------------------------------------------------------------------- */ [class*="wonderpush"] [class*="bell"], .wonderpush-subscription-widget{ transition:transform .25s var(--bl-ease) !important; } [class*="wonderpush"] [class*="bell"]:hover{ transform:scale(1.08); } /* --------------------------------------------------------------------- 11. Reduced-motion users ------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; } .elementor-button:hover, .elementor-widget-slides .swiper-slide:hover, .elementor-widget-eae-filterable .eae-item:hover, .elementor-widget-image-carousel .swiper-slide:hover img{ transform:none; } } /* --- Static-export fix: Elementor entrance-animation elements --- Elementor's frontend JS (which reveals .elementor-invisible elements on scroll) does not initialize in this static HTML export, so animated headings/buttons/sections stayed permanently hidden (empty white bands). Force them visible; the fade-in animation is skipped, content shows. */ .elementor-invisible { visibility: visible !important; }