/* Theme Name: ShadePro-Child Theme URI: http://findestdevs.com/demos/wp/shadepro Description: A premium WordPress App Landing Theme Author: FinestDevs Author URI: http://findestdevs.com/ Template: shadepro Version: 2.0.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html /* == Add your own styles below this line == --------------------------------------------*/ /* * dhuda.com — professional multi-layer restyle v2 * Scope: homepage only (body.home). Content, structure and plugins untouched. */ /* ====================== Design tokens ====================== */ :root { --dh-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --dh-ink: #0f172a; --dh-body: #475569; --dh-muted: #64748b; --dh-hairline: rgba(15, 23, 42, 0.08); --dh-accent: #6366f1; --dh-accent-2: #8b5cf6; --dh-accent-3: #ec4899; --dh-cyan: #06b6d4; --dh-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --dh-grad-warm: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); --dh-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(79, 70, 229, 0.16); --dh-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(79, 70, 229, 0.22); --dh-radius: 14px; --dh-ease: 220ms cubic-bezier(0.2, 0.7, 0.3, 1); } /* Theme palette variables (theme core.css + inline customizer both define these; !important needed to win the source-order tie against the inline block) */ :root { --heading-color: #0f172a !important; --text-color: #475569 !important; --accent-color: #6366f1 !important; } /* ====================== Critical fix: reveal stuck content ====================== Elementor entrance animations never fire on this site, leaving 13 widgets permanently visibility:hidden. Base state: always visible (works with JS disabled). When our reveal script runs it tags with .dh-anim and plays a staggered one-by-one fade-up instead. */ body.home .elementor-invisible { visibility: visible !important; opacity: 1; } html.dh-anim body.home .elementor-invisible { opacity: 0; transform: translateY(26px); transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1); } html.dh-anim body.home .elementor-invisible.dh-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.dh-anim body.home .elementor-invisible { opacity: 1; transform: none; transition: none; } } /* ====================== Base & typography ====================== */ body.home { color: var(--dh-body); background-color: #ffffff; background-image: radial-gradient(900px 620px at 88% -140px, rgba(139, 92, 246, 0.10), transparent 62%), radial-gradient(760px 520px at -8% 34%, rgba(6, 182, 212, 0.07), transparent 60%), radial-gradient(900px 620px at 55% 108%, rgba(236, 72, 153, 0.06), transparent 62%); -webkit-font-smoothing: antialiased; font-family: var(--dh-font) !important; } /* Professional type pairing. font-family only — sizes stay theme-controlled, !important needed to beat Elementor per-widget font rules. */ body.home h1, body.home h2, body.home h3, body.home h4, body.home .elementor-heading-title { font-family: var(--dh-font) !important; letter-spacing: -0.5px; } body.home p, body.home .elementor-widget-text-editor, body.home .main-navigation ul.navbar-nav > li a, body.home .elementor-button { font-family: var(--dh-font) !important; } /* Hero headline: stronger presence (hash class stable on this page since 2021) */ body.home .elementor-element-272c18a .elementor-heading-title { font-size: clamp(38px, 4.2vw, 56px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1.5px !important; color: #0f172a !important; } /* booking widget container: elevated card so the plugin sits in a professional frame (wrapper only — plugin internals untouched) */ body.home .bookly-css-root { display: block; background: #ffffff; border: 1px solid var(--dh-hairline); border-radius: 20px; padding: 28px 28px 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 50px rgba(79, 70, 229, 0.10); } body.home ::selection { background: rgba(99, 102, 241, 0.2); } body.home a:focus-visible, body.home button:focus-visible, body.home input:focus-visible, body.home select:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.35); outline-offset: 2px; } /* ====================== Header ====================== */ body.home .shadepro-header-area { position: sticky; top: 0; z-index: 1090; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid var(--dh-hairline); box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05); } body.home .shadepro-header-area .site-branding img { max-height: 52px; width: auto; } body.home .main-navigation ul.navbar-nav > li a { color: #0f172a; font-weight: 600; font-size: 15px; transition: color var(--dh-ease); } body.home .main-navigation ul.navbar-nav li a:hover, body.home .main-navigation ul.navbar-nav li.current-menu-item > a { color: var(--dh-accent); } /* subtle underline indicator for the active page */ body.home .main-navigation ul.navbar-nav li.current-menu-item > a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 3px; border-radius: 2px; background: var(--dh-grad); } /* ====================== Buttons ====================== */ /* Per-widget Elementor CSS carries higher specificity — !important on the visual skin only; layout properties untouched. */ body.home .elementor-button { background: var(--dh-grad) !important; color: #ffffff !important; border: 0 !important; border-radius: var(--dh-radius) !important; box-shadow: var(--dh-shadow) !important; transition: transform var(--dh-ease), box-shadow var(--dh-ease), filter var(--dh-ease); } body.home .elementor-button:hover, body.home .elementor-button:focus { color: #ffffff !important; filter: brightness(1.06); box-shadow: var(--dh-shadow-lift) !important; transform: translateY(-2px); } body.home .elementor-button:active { transform: translateY(0); } /* ====================== Eyebrow labels ====================== The two small uppercase label headings ship hardcoded red/purple in per-widget CSS (hash classes are stable on this page since 2021 — colour-only override, nothing structural). */ body.home .elementor-element-eb6ae40 .elementor-heading-title, body.home .elementor-element-89e215e .elementor-heading-title { color: var(--dh-accent) !important; -webkit-text-stroke: 0 !important; letter-spacing: 3px !important; } /* ====================== Bookly booking widget (colors only) ====================== Everything below is a colour skin. No typography, spacing or layout overrides — the widget's own JS/layout stays fully functional. Verified markup: .bookly-progress-tracker > div(.active) > .step ; weekday toggles are styled checkbox inputs next to .bookly-col-label. */ body.home .bookly-form .bookly-progress-tracker > div.active { color: var(--dh-accent) !important; } body.home .bookly-form .bookly-progress-tracker > div.active .step { background: var(--dh-grad) !important; } body.home .bookly-form .bookly-label, body.home .bookly-form .bookly-col-label, body.home .bookly-form label { color: #0f172a !important; } /* weekday toggle circles: Bookly styles the checkbox input itself */ body.home .bookly-form .bookly-week-days input[type="checkbox"], body.home .bookly-form .bookly-week-days input[type="checkbox"]:checked { background-color: var(--dh-accent) !important; border-color: var(--dh-accent) !important; accent-color: var(--dh-accent); } body.home .bookly-btn, body.home .bookly-form .bookly-btn, body.home .bookly-css-root .bookly-btn { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; border-color: transparent !important; color: #ffffff !important; border-radius: 12px !important; box-shadow: var(--dh-shadow) !important; transition: box-shadow var(--dh-ease), filter var(--dh-ease); } body.home .bookly-btn:hover { filter: brightness(1.07); box-shadow: var(--dh-shadow-lift) !important; } body.home .bookly-form input[type="text"]:focus, body.home .bookly-form select:focus { border-color: var(--dh-accent) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; } /* ====================== Layout repair: absolute-image collage ============== The theme's stock design positioned a collage of decorative images with `elementor-absolute` at coordinates tuned to the original demo artwork. Measured on the live page, this leaves the document 2733px wide against a 1440px viewport (≈1300px of dead space on the right), and stacks three identical copies of one image at the same coordinates. Fix: stop the horizontal overflow, retire the redundant decorations, and let each section keep ONE meaningful image in normal flow. */ body.home { overflow-x: hidden; } /* 1. Hero image: was absolute at left:625px / width:1024px → the overflow source. Anchor it inside the hero instead. */ body.home .elementor-element-4167b03 { position: absolute !important; left: auto !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: min(52%, 620px) !important; max-width: 52% !important; } body.home .elementor-element-4167b03 img { width: 100% !important; height: auto !important; } /* 2. Decorative gradient orbs: KEEP for multi-layer depth. One rendered past the right viewport edge — pin it inside; one is 0-width broken markup. */ body.home .elementor-element-3f71a75 { left: auto !important; right: 28px !important; } body.home .elementor-element-c8c1cb3 { display: none !important; /* renders 0×23px — broken in the source layout */ } body.home .elementor-element-fdff9a2 img, body.home .elementor-element-597d294 img, body.home .elementor-element-3f71a75 img { opacity: 0.85; } /* 3. The old collage stacked several artworks in the first content block — one image per block: keep the email-composer artwork, retire the rest. */ body.home .elementor-element-5f4d54c, body.home .elementor-element-97d80f3, body.home .elementor-element-1dac8d5, body.home .elementor-element-ef54786 { display: none !important; } /* 4. Remaining floating widgets return to normal flow, centred and capped, so nothing overlaps text or escapes the container. */ body.home .elementor-element-7670344 { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: 460px !important; margin: 0 auto !important; transform: none !important; } /* 5. All content artwork: contained, centred, never overflowing. */ body.home .elementor-widget-image img { max-width: 100% !important; height: auto !important; } body.home .elementor-widget-image img[src*="dhuda-art"] { filter: drop-shadow(0 18px 40px rgba(49, 46, 129, 0.10)); } /* 6. The "Grow Your Business" artwork was being squashed to 206px tall in a full-width column — give it a sane, centred presentation. */ body.home .elementor-element-a630535 { max-width: 620px !important; margin-inline: auto !important; } /* 7. Comfortable breathing room between the stacked content sections. */ body.home .elementor > .elementor-section { padding-block: clamp(48px, 6vw, 88px); } /* 8. Hero: fill the first viewport like a proper commercial landing — flex-centred, tall, and no dead band before the next section. */ body.home .elementor > .elementor-section.elementor-element-ddad1a1 { display: flex; align-items: center; min-height: min(760px, calc(100svh - 84px)); padding-block: 24px; } body.home .elementor > .elementor-section.elementor-element-2f3fc10 { padding-top: 0; } /* ====================== Readability: larger body copy ====================== */ body.home .elementor-widget-text-editor, body.home .elementor-widget-text-editor p { font-size: 17px; line-height: 1.75; } body.home .elementor-widget-text-editor h5 { font-size: 19px; line-height: 1.5; } /* ====================== Footer — dh-ft (new multi-layer markup) ============ Markup is ours (widget 9a31091 replaced) — no !important battles needed. Neutralise the h6 heading wrapper it renders inside, then full-bleed. */ body.home h6.elementor-heading-title:has(> .dh-ft), body.home .elementor-heading-title:has(> .dh-ft) { font-size: initial !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: normal !important; text-align: left !important; margin: 0 !important; } body.home .dh-ft { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #0e1130; color: #a3aed0; font-family: var(--dh-font); font-size: 14.5px; line-height: 1.75; } /* layered ambient glows */ .dh-ft-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; } .dh-ft-glow-a { width: 560px; height: 380px; left: -120px; top: -140px; background: rgba(99, 102, 241, 0.22); } .dh-ft-glow-b { width: 560px; height: 380px; right: -140px; bottom: -160px; background: rgba(139, 92, 246, 0.16); } body.home .dh-ft-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 72px 24px 0; } body.home .dh-ft-grid { display: grid; grid-template-columns: 1.25fr 0.75fr 1.3fr; gap: 26px; align-items: stretch; } /* wpautop injects stray empty

/
into the widget HTML — they must not occupy grid cells or add phantom spacing */ body.home .dh-ft-grid > :not(.dh-ft-card), body.home .dh-ft p:empty, body.home .dh-ft > br, body.home .dh-ft-grid > br { display: none !important; } body.home .dh-ft-card { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; padding: 30px 28px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* brand card: compact & special — gradient-edged, self-sized, not stretched */ body.home .dh-ft-card.dh-ft-brand { align-self: start; padding: 24px 24px 22px; background: linear-gradient(rgba(23, 26, 51, 0.92), rgba(14, 17, 48, 0.94)) padding-box, linear-gradient(135deg, rgba(99, 102, 241, 0.65), rgba(236, 72, 153, 0.4)) border-box; border: 1px solid transparent; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } body.home .dh-ft-brand p { font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; } body.home .dh-ft-logo { display: inline-block; background: #ffffff; border-radius: 12px; padding: 9px 12px; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } body.home .dh-ft-logo img { display: block; width: 96px; height: auto; } body.home .dh-ft p { color: #a3aed0; font-size: 14.5px; line-height: 1.8; margin: 0 0 14px; } body.home .dh-ft-hl { color: #a5b4fc; font-weight: 600; } body.home .dh-ft-more { color: #a5b4fc; font-weight: 600; text-decoration: none; transition: color var(--dh-ease); } body.home .dh-ft-more:hover { color: #ffffff; } body.home .dh-ft-social { display: flex; gap: 10px; margin-top: 20px; } body.home .dh-ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #cbd5e1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); transition: color var(--dh-ease), background-color var(--dh-ease), transform var(--dh-ease), border-color var(--dh-ease); } body.home .dh-ft-social a:hover { color: #ffffff; background: var(--dh-accent); border-color: var(--dh-accent); transform: translateY(-3px); } /* WordPress strips inline from widget HTML — draw the icons with CSS masks instead, keyed off each link's aria-label */ body.home .dh-ft-social a::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } body.home .dh-ft-social a[aria-label="Facebook"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.home .dh-ft-social a[aria-label="LinkedIn"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.home .dh-ft-social a[aria-label="WhatsApp"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.home .dh-ft h3 { position: relative; color: #ffffff !important; font-family: var(--dh-font) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 22px; padding-bottom: 10px; } body.home .dh-ft h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--dh-grad); } body.home .dh-ft ul { list-style: none; margin: 0; padding: 0; } body.home .dh-ft-links li { padding: 7px 0; } body.home .dh-ft-links a { color: #cbd5e1; text-decoration: none; transition: color var(--dh-ease), padding-left var(--dh-ease); } body.home .dh-ft-links a:hover { color: #a5b4fc; padding-left: 6px; } body.home .dh-ft-contact li { padding: 8px 0; font-size: 14px; } body.home .dh-ft-k { display: block; color: #e2e8f0; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; margin-bottom: 1px; } body.home .dh-ft-contact a { color: #a5b4fc; text-decoration: none; } body.home .dh-ft-contact a:hover { color: #ffffff; } body.home .dh-ft-bottom { margin-top: 48px; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.09); text-align: center; color: #6c7699; font-size: 13px; } body.home .dh-ft-bottom strong { color: #a3aed0; font-weight: 600; } /* theme's own copyright bar duplicates ours — remove it */ body.home footer.footer-section .shadepro-copyright, body.home .shadepro-copyright { display: none !important; } body.home footer.footer-section { padding: 0 !important; background: transparent !important; border: 0 !important; } @media (max-width: 991px) { body.home .dh-ft-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { body.home .dh-ft-grid { grid-template-columns: 1fr; } body.home .dh-ft-inner { padding-top: 48px; } } /* ====================== Reduced motion ====================== */ @media (prefers-reduced-motion: reduce) { body.home .elementor-button, body.home .bookly-btn, body.home .main-navigation ul.navbar-nav > li a { transition: none; } body.home .elementor-button:hover { transform: none; } } /* ====================== Mobile polish ====================== */ @media (max-width: 991px) { body.home .shadepro-header-area { position: sticky; } body.home .shadepro-header-area .site-branding img { max-height: 42px; } } @media (max-width: 767px) { /* theme sets fixed pixel widths on some text widgets — cap them on phones */ body.home .elementor-widget__width-initial, body.home .elementor-widget__width-initial .elementor-widget-container { max-width: 100% !important; } }