/* ========================================================= Tareeq Al Aamal Al Alamiya — Luxury Homepage Stylesheet ========================================================= */ :root{ --navy:#2c4266; --navy-dark:#1a273d; --navy-rgb:44,66,102; --gold:#f68b33; --gold-light:#ffb066; --gold-rgb:246,139,51; /* Darker gold for small text set directly on light backgrounds — the base --gold fails WCAG AA (~2.4:1) at that weight/size; this keeps the same hue at ~5.5:1 against white and ~4.8:1 even against the tinted gold pill backgrounds (e.g. .tap-eyebrow), so it holds AA with margin across every surface it's actually used on. */ --gold-deep:#9c5712; --bg:#faf8f4; --bg-alt:#f2ede3; --surface:#ffffff; --text:#1e2735; --text-muted:#5c6a7d; --border:rgba(44,66,102,.12); --radius-lg:22px; --radius-md:16px; --radius-sm:10px; --shadow-soft:0 20px 60px -20px rgba(26,39,61,.25); --shadow-lift:0 30px 70px -25px rgba(26,39,61,.4); --ease:cubic-bezier(.22,1,.36,1); --font-ar-body:'Air Arabia Body', Tahoma, Arial, sans-serif; --font-ar-head:'Air Arabia Heading', Tahoma, Arial, sans-serif; --font-en-body:'Gotham Rounded', Arial, sans-serif; --font-en-head:'Gotham Rounded', Arial, sans-serif; --font-body:var(--font-ar-body); --font-head:var(--font-ar-head); } html.tap-lang-en{ --font-body:var(--font-en-body); --font-head:var(--font-en-head); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} /* No overflow-x here on purpose: html/body are the true scrolling root, and the CSS spec forces the root's overflow-y to compute as auto whenever overflow-x is set explicitly (regardless of what overflow-y is authored to) — silently breaking position:sticky everywhere on the page. .tap-page-wrap{overflow-x:clip}, a normal (non-root) element right inside , already does the same horizontal-scroll-prevention job without that side effect. */ html,body{ max-width:100%; } body.tap-body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;} ul{list-style:none;margin:0;padding:0;} body.tap-body h1,body.tap-body h2,body.tap-body h3,body.tap-body h4,body.tap-body h5,body.tap-body h6{font-family:var(--font-head);font-weight:700;margin:0 0 .5em;color:var(--navy-dark);line-height:1.25;} p{margin:0 0 1em;color:var(--text-muted);} svg{fill:currentColor;width:1em;height:1em;} /* overflow-y must be set explicitly alongside overflow-x — per spec, setting only one axis forces the other to a non-visible computed value too, which silently breaks position:sticky for any descendant (e.g. the single-project sidebar) since sticky needs every ancestor up to the scroll container to stay overflow:visible on the Y axis. */ .tap-page-wrap{overflow-x:clip;overflow-y:visible;position:relative;} .tap-container{max-width:1240px;margin-inline:auto;padding-inline:24px;} main{padding-top:110px !important;} /* Language toggle direction helper */ [data-en]{transition:opacity .2s var(--ease);} /* ----------------------------------------------------------- Custom scrollbar ----------------------------------------------------------- */ ::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-track{background:var(--bg-alt);} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--gold),var(--navy)); border-radius:20px; border:2px solid var(--bg-alt); } html{scrollbar-width:thin;scrollbar-color:var(--gold) var(--bg-alt);} /* ----------------------------------------------------------- Buttons ----------------------------------------------------------- */ .tap-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 32px; border-radius:100px; font-weight:600; font-size:15px; overflow:hidden; isolation:isolate; transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease); white-space:nowrap; } .tap-btn span{position:relative;z-index:2;text-wrap:wrap;} .tap-btn-primary{ background:var(--navy); color:#fff; box-shadow:0 14px 30px -12px rgba(var(--navy-rgb),.65); } .tap-btn-primary::before{ content:""; position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transform:translateX(-101%); transition:transform .5s var(--ease); border-radius:inherit; } .tap-btn-primary:hover::before{transform:translateX(0);} .tap-btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(var(--gold-rgb),.55);} .tap-btn-ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--border); } .tap-btn-ghost:hover{ border-color:var(--gold); color:var(--navy-dark); box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12); transform:translateY(-3px); } .tap-btn-sm{padding:9px 18px;font-size:13px;background:#fff;color:var(--navy);} .tap-btn-sm:hover{background:var(--gold);color:#fff;} /* ----------------------------------------------------------- Hero ----------------------------------------------------------- */ .tap-hero{ position:relative; padding-top:270px; padding-bottom:110px; overflow:hidden; background:radial-gradient(circle at 85% 10%,rgba(var(--gold-rgb),.09),transparent 45%),var(--bg); } .tap-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;} .tap-hero-grid{position:absolute;inset:0;width:100%;height:100%;color:var(--navy);opacity:.05;} .tap-hero-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;} .tap-hero-glow-1{width:420px;height:420px;background:var(--gold);top:-120px;inset-inline-end:-100px;} .tap-hero-glow-2{width:360px;height:360px;background:var(--navy);bottom:-140px;inset-inline-start:-100px;opacity:.25;} .tap-hero-inner{ position:relative;z-index:1; display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center; } .tap-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:700;letter-spacing:.5px; color:var(--gold-deep); background:rgba(var(--gold-rgb),.1); padding:7px 16px;border-radius:100px; margin-bottom:18px; } .tap-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);} .tap-hero-copy h1{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.5px;} .tap-hero-sub{font-size:17px;max-width:520px;} .tap-hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-block:30px;} .tap-hero-stats{display:flex;gap:38px;} .tap-hero-stats li{display:flex;flex-direction:column;} .tap-hero-stats strong{font-family:var(--font-head);font-size:32px;color:var(--navy-dark);} .tap-hero-stats span{font-size:13px;color:var(--text-muted);font-weight:600;} .tap-hero-visual{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center;} /* ----------------------------------------------------------- Hero — 3D orbital "stars" carousel All services sit as stars on a ring in 3D space; the stage rotates around the Y axis so a different star faces forward (biggest, via perspective) instead of any flat sliding. ----------------------------------------------------------- */ .tap-hero-orbit{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;} .tap-hero-orbit-title{ font-size:21px;text-align:center;color:var(--navy-dark); min-height:1.3em;max-width:300px; transition:opacity .3s var(--ease); } .tap-hero-orbit-title.is-swapping{opacity:0;} .tap-hero-orbit-scene{ position:relative; width:min(700px,96vw);height:520px; perspective:1500px; } .tap-hero-orbit-stage{ --tap-radius:270px; position:absolute;inset:0; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.65,0,.35,1); } .tap-hero-star{ position:absolute;top:50%;left:50%; width:220px;height:220px;margin:-110px 0 0 -110px; transform:rotateY(var(--tap-angle)) translateZ(var(--tap-radius)); transition:opacity .5s var(--ease); } /* Independent layer for the idle bob, so it composes with the parent's fixed 3D ring position instead of fighting over `transform`. */ .tap-hero-star-float{ position:absolute;inset:0; animation:tapStarFloat 3.6s ease-in-out infinite; animation-delay:var(--tap-float-delay,0s); } @keyframes tapStarFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } .tap-hero-star-img{ position:absolute;inset:0;border-radius:50%;overflow:hidden; box-shadow:0 14px 30px -10px rgba(26,39,61,.4),0 0 0 4px rgba(255,255,255,.8); opacity:.72;transform:scale(.88); transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease); } .tap-hero-star-img img{width:100%;height:100%;object-fit:cover;display:block;} .tap-hero-star-glow{ position:absolute;inset:-18px;border-radius:50%;z-index:-1; background:radial-gradient(circle,rgba(var(--gold-rgb),.5),transparent 70%); opacity:0;filter:blur(18px); transition:opacity .6s var(--ease); } .tap-hero-star-icon{ position:absolute;bottom:-6px;inset-inline-end:-6px; width:48px;height:48px;border-radius:50%; background:#fff;color:var(--gold); display:flex;align-items:center;justify-content:center; box-shadow:0 6px 14px -6px rgba(0,0,0,.35); opacity:0;transform:scale(.5); transition:opacity .5s var(--ease),transform .5s var(--ease); } .tap-hero-star-icon svg{width:22px;height:22px;} .tap-hero-star.is-active .tap-hero-star-img{ opacity:1;transform:scale(1.5); box-shadow:0 30px 60px -14px rgba(26,39,61,.5),0 0 0 6px rgba(255,255,255,.9); } .tap-hero-star.is-active .tap-hero-star-glow{opacity:1;animation:tapBreathe 3s ease-in-out infinite;} .tap-hero-star.is-active .tap-hero-star-icon{opacity:1;transform:scale(1);} @keyframes tapBreathe{ 0%,100%{transform:scale(1);opacity:.8;} 50%{transform:scale(1.12);opacity:1;} } .tap-hero-orbit-ground{ position:absolute;bottom:14px;left:50%; width:64%;height:22px; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(var(--gold-rgb),.32),transparent 75%); filter:blur(12px); pointer-events:none; } @media (max-width:640px){ .tap-hero-orbit-stage{--tap-radius:185px;} .tap-hero-orbit-scene{height:390px;} .tap-hero-star{width:150px;height:150px;margin:-75px 0 0 -75px;} } /* ----------------------------------------------------------- Sections ----------------------------------------------------------- */ .tap-section{padding-block:100px;position:relative;} .tap-section-alt{background:var(--bg-alt);} .tap-section-head{max-width:640px;margin-inline:auto;text-align:center;margin-bottom:56px;} .tap-section-head h2{font-size:clamp(28px,3.2vw,42px);} .tap-grid{display:grid;gap:28px;} .tap-services-grid{grid-template-columns:repeat(3,1fr);} .tap-portfolio-grid{grid-template-columns:repeat(3,1fr);} .tap-testimonials-grid{grid-template-columns:repeat(3,1fr);} /* ----------------------------------------------------------- Reveal-on-scroll base state ----------------------------------------------------------- */ [data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease),transform .8s var(--ease); } [data-reveal].is-visible{opacity:1;transform:translateY(0);} /* Inside the Elementor editor's preview iframe, elements never receive the scroll-triggered .is-visible class the way a real page visit does, leaving every [data-reveal] section permanently invisible while editing. Force it visible there so editors can see and work with actual content instead of an empty canvas. */ body.elementor-editor-active [data-reveal]{opacity:1 !important;transform:none !important;} /* ----------------------------------------------------------- Cards / Tilt / Shimmer ----------------------------------------------------------- */ .tap-card{ background:var(--surface); border-radius:var(--radius-lg); padding:36px 30px; border:1px solid var(--border); position:relative; overflow:hidden; transition:box-shadow .4s var(--ease),transform .4s var(--ease),opacity .8s var(--ease); transform-style:preserve-3d; will-change:transform; } .tap-card::before{ content:""; position:absolute;inset:-2px; border-radius:inherit; padding:2px; background:conic-gradient(from 180deg,transparent,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.9),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .4s var(--ease); pointer-events:none; } .tap-card:hover{box-shadow:var(--shadow-lift);} .tap-card:hover::before{opacity:1;} .tap-service-icon{ width:64px;height:64px;border-radius:18px; background:linear-gradient(135deg,rgba(var(--navy-rgb),.08),rgba(var(--gold-rgb),.12)); color:var(--navy); display:flex;align-items:center;justify-content:center; margin-bottom:22px; transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease); } .tap-service-icon svg{width:30px;height:30px;} .tap-card:hover .tap-service-icon{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#fff; transform:rotate(-6deg) scale(1.08); } .tap-service-card h3{font-size:19px;margin-bottom:10px;} .tap-service-desc{font-size:14.5px;} .tap-card-link{ display:inline-flex;align-items:center;gap:6px; font-weight:700;font-size:13.5px;color:var(--gold-deep); margin-top:6px; } .tap-card-link::after{content:"←";transition:transform .3s var(--ease);} html.tap-lang-en .tap-card-link::after{content:"→";} .tap-card:hover .tap-card-link::after{transform:translateX(-4px);} html.tap-lang-en .tap-card:hover .tap-card-link::after{transform:translateX(4px);} /* ----------------------------------------------------------- Portfolio ----------------------------------------------------------- */ .tap-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:44px;} .tap-filter-btn{ background:none !important; padding:10px 22px !important;border-radius:100px !important; border:1.5px solid var(--border) !important; font-size:13.5px;font-weight:600;color:var(--navy) !important; transition:all .3s var(--ease); } .tap-filter-btn:hover,.tap-filter-btn:focus{border-color:var(--gold) !important;color:var(--navy) !important;background:none !important;text-decoration:none !important;} .tap-filter-btn.is-active{background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important;} .tap-portfolio-item{ border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-soft); transition:opacity .35s var(--ease),transform .35s var(--ease); } .tap-portfolio-item.is-hidden{display:none;} .tap-portfolio-media{position:relative;aspect-ratio:4/3;overflow:hidden;} .tap-portfolio-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);} .tap-portfolio-item:hover .tap-portfolio-media img{transform:scale(1.12);} .tap-portfolio-overlay{ position:absolute;inset:0; background:linear-gradient(0deg,rgba(26,39,61,.92),rgba(26,39,61,.15) 55%,transparent); display:flex;flex-direction:column;justify-content:flex-end; padding:26px; opacity:0;transform:translateY(10px); transition:opacity .4s var(--ease),transform .4s var(--ease); color:#fff; } .tap-portfolio-item:hover .tap-portfolio-overlay{opacity:1;transform:translateY(0);} .tap-badge{ align-self:flex-start; background:rgba(var(--gold-rgb),.9); font-size:11px;font-weight:700;letter-spacing:.4px; padding:5px 12px;border-radius:100px;margin-bottom:10px; } .tap-portfolio-overlay h3{color:#fff;font-size:19px;margin-bottom:14px;} /* ----------------------------------------------------------- Accreditations — floating luxury frames (hero-orbit language) Images keep their natural proportions (no crop/aspect-lock); each card idly floats and tilts in 3D, with a gold glow ring and a caption pill that drops open on hover. ----------------------------------------------------------- */ .tap-accreditations-section{position:relative;overflow:hidden;} .tap-accreditations-bg{position:absolute;inset:0;z-index:0;pointer-events:none;} .tap-accreditations-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.28;} .tap-accreditations-glow-1{width:420px;height:420px;background:var(--gold);top:-140px;inset-inline-start:-120px;} .tap-accreditations-glow-2{width:380px;height:380px;background:var(--navy);bottom:-160px;inset-inline-end:-120px;opacity:.18;} .tap-accreditation-grid{ position:relative;z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:44px 32px; width:100%; align-items:start; } .tap-accreditation-card{ position:relative; display:flex;flex-direction:column;align-items:center; cursor:pointer; transition:opacity .8s var(--ease); animation:tapAccFloat 4.6s ease-in-out infinite; animation-delay:calc(var(--tap-i,0) * .28s); } @keyframes tapAccFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} } .tap-accreditation-glow{ position:absolute;inset:-14%;z-index:0;border-radius:var(--radius-lg); background:radial-gradient(circle,rgba(var(--gold-rgb),.32),transparent 72%); opacity:0;filter:blur(20px); transition:opacity .5s var(--ease); pointer-events:none; } .tap-accreditation-card:hover .tap-accreditation-glow, .tap-accreditation-card:focus-visible .tap-accreditation-glow{opacity:1;} .tap-accreditation-frame{ position:relative;z-index:1;width:100%; background:#fff; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-soft); padding:16px; transition:box-shadow .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .tap-accreditation-card:hover .tap-accreditation-frame, .tap-accreditation-card:focus-visible .tap-accreditation-frame{ box-shadow:var(--shadow-lift); border-color:rgba(var(--gold-rgb),.5); transform:translateY(-6px); } .tap-accreditation-frame img{ display:block;width:100%;height:auto; border-radius:calc(var(--radius-lg) - 8px); } .tap-accreditation-zoom{ position:absolute;top:12px;inset-inline-end:12px;z-index:2; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.95);color:var(--navy); display:flex;align-items:center;justify-content:center; box-shadow:0 8px 18px -8px rgba(0,0,0,.4); opacity:0;transform:scale(.5) rotate(-20deg); transition:opacity .4s var(--ease),transform .45s cubic-bezier(.34,1.56,.64,1); } .tap-accreditation-card:hover .tap-accreditation-zoom, .tap-accreditation-card:focus-visible .tap-accreditation-zoom{opacity:1;transform:scale(1) rotate(0deg);} .tap-accreditation-zoom svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;} .tap-accreditation-caption{ position:relative;z-index:1; max-height:0;opacity:0;margin-top:0; overflow:hidden; transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .45s var(--ease); } .tap-accreditation-card:hover .tap-accreditation-caption, .tap-accreditation-card:focus-visible .tap-accreditation-caption{ max-height:90px;opacity:1;margin-top:14px; } .tap-accreditation-name{ display:inline-block;max-width:100%; font-family:var(--font-head);font-weight:700;font-size:13.5px;line-height:1.4; color:var(--navy-dark);text-align:center; padding:8px 18px;border-radius:18px; background:linear-gradient(135deg,rgba(var(--gold-rgb),.14),rgba(var(--navy-rgb),.06)); border:1px solid rgba(var(--gold-rgb),.35); } /* ----------------------------------------------------------- Partners marquee ----------------------------------------------------------- */ .tap-partners-track-wrap{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .tap-partners-track{display:flex;width:max-content;animation:tapMarquee 26s linear infinite;} /* Per-item trailing margin (not flex `gap`) so the duplicated set is exactly double-width — `gap` leaves a stray half-gap offset that makes the -50% loop visibly jump once per cycle. */ .tap-partners-track > a, .tap-partners-track > .tap-partner-logo{margin-inline-end:28px;} .tap-partners-track:hover{animation-play-state:paused;} @keyframes tapMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} html.tap-lang-en .tap-partners-track, html[dir="ltr"] .tap-partners-track{animation-direction:reverse;} .tap-partner-logo{ position:relative; width:210px;height:118px;background:#fff;border-radius:var(--radius-md); display:flex;align-items:center;justify-content:center; border:1px solid var(--border); box-shadow:0 10px 24px -18px rgba(26,39,61,.35); overflow:hidden; transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease); padding:16px; } .tap-partner-logo::before{ content:""; position:absolute;inset:0;z-index:1; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%); transform:translateX(-120%); transition:transform .7s var(--ease); pointer-events:none; } .tap-partner-logo img{position:relative;z-index:0;max-height:100%;object-fit:contain;transition:transform .4s var(--ease);} .tap-partner-logo:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 22px 38px -16px rgba(var(--gold-rgb),.55);border-color:var(--gold);} .tap-partner-logo:hover::before{transform:translateX(120%);} .tap-partner-logo:hover img{transform:scale(1.06);} /* ----------------------------------------------------------- Testimonials ----------------------------------------------------------- */ .tap-testimonial-card{ background:var(--surface); border-radius:var(--radius-lg); padding:18px; border:1px solid var(--border); transition:box-shadow .4s var(--ease),transform .4s var(--ease),opacity .8s var(--ease); } .tap-testimonial-card:hover{box-shadow:var(--shadow-lift);} .tap-testimonial-frame{position:relative;border-radius:var(--radius-md);overflow:hidden;} .tap-testimonial-frame img{width:100%;} .tap-source-badge{ position:absolute;top:14px;inset-inline-end:14px; width:38px;height:38px;border-radius:50%; background:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.35); display:flex;align-items:center;justify-content:center; } .tap-source-badge svg{width:19px;height:19px;} .tap-source-google svg{color:#4285f4;} .tap-source-facebook svg{color:#1877f2;} .tap-testimonial-meta{display:flex;align-items:center;justify-content:space-between;padding:16px 6px 6px;} .tap-stars{display:flex;gap:2px;} .tap-stars svg{width:14px;height:14px;color:var(--border);} .tap-stars svg.is-filled{color:var(--gold);} /* ----------------------------------------------------------- FAQ Accordion ----------------------------------------------------------- */ .tap-faq-container{max-width:820px;} .tap-accordion-item{ border-bottom:1px solid var(--border); } .tap-accordion-trigger{ background:none !important;border:none !important;border-radius:0 !important; width:100% !important; display:flex !important;align-items:center;justify-content:space-between; padding:22px 4px !important; font-family:var(--font-head); font-size:17px;font-weight:700;color:var(--navy-dark) !important; text-align:start; } .tap-accordion-trigger:hover,.tap-accordion-trigger:focus{ background:none !important;color:var(--navy-dark) !important;text-decoration:none !important; } button.tap-accordion-trigger span{ text-wrap:wrap; text-align:initial !important; } .tap-accordion-trigger svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;transition:transform .35s var(--ease);margin-inline-start:14px;} .tap-accordion-item.is-open .tap-accordion-trigger svg{transform:rotate(180deg);} .tap-accordion-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);} .tap-accordion-panel-inner{padding:0 4px 22px;font-size:15px;color:var(--text-muted);} /* ----------------------------------------------------------- Suppress the parent theme's default "

" page-title header on every Elementor-built page — our own Hero widgets already supply the real H1 (see the body_class filter in inc/theme-setup.php). display:none also removes it from the accessibility tree, not just visually. ----------------------------------------------------------- / .tap-elementor-built .page-header{display:none;} / ----------------------------------------------------------- Footer — luxury dark panel ----------------------------------------------------------- / .tap-footer{ position:relative;overflow:hidden; background:linear-gradient(180deg,var(--navy-dark) 0%,#0e1728 65%,#0a1120 100%); color:rgba(255,255,255,.72);padding-top:64px; } .tap-footer-shimmer{ position:absolute;inset-inline:0;top:0;height:2px;z-index:2;overflow:hidden; background:rgba(var(--gold-rgb),.25); } .tap-footer-shimmer::after{ content:'';position:absolute;inset-block:0;left:0;width:45%; background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.9),var(--gold-light),rgba(var(--gold-rgb),.9),transparent); animation:tapMetallicShift 6s linear infinite; will-change:transform; } .tap-footer-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;} .tap-footer-glow-1{width:460px;height:460px;top:-160px;inset-inline-start:-100px;background:radial-gradient(circle,rgba(var(--gold-rgb),.16),transparent 70%);} .tap-footer-glow-2{width:520px;height:520px;bottom:-220px;inset-inline-end:-140px;background:radial-gradient(circle,rgba(86,120,180,.22),transparent 70%);} .tap-footer-cta{ position:relative;z-index:1; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; background:linear-gradient(135deg,rgba(var(--gold-rgb),.12),rgba(255,255,255,.04)); border:1px solid rgba(var(--gold-rgb),.28);border-radius:var(--radius-lg); padding:28px 34px;margin-bottom:56px; box-shadow:0 24px 60px -30px rgba(0,0,0,.55); } .tap-footer-cta-text{display:flex;flex-direction:column;gap:6px;} .tap-footer-cta-text strong{color:#fff;font-family:var(--font-ar-head, var(--font-head));font-size:21px;font-weight:700;} .tap-footer-cta-text span{font-size:13.5px;color:rgba(255,255,255,.62);} .tap-footer-cta-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;} .tap-footer-cta-btn .tap-final-cta-arrow{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} html[dir="rtl"] .tap-footer-cta-btn .tap-final-cta-arrow{transform:scaleX(-1);} .tap-footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:46px;} .tap-footer .tap-footer-col h3{ position:relative;color:#fff;font-size:15.5px;font-weight:700;margin-bottom:20px; padding-inline-start:16px; } .tap-footer .tap-footer-col h3::before{ content:'';position:absolute;top:3px;inset-inline-start:0;bottom:3px;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--gold),var(--gold-light)); } .tap-footer-col ul{display:flex;flex-direction:column;gap:13px;font-size:13.5px;} .tap-footer-col li{color:rgba(255,255,255,.58);} .tap-footer-col a{ position:relative;display:inline-flex;align-items:center;color:rgba(255,255,255,.72); transition:color .3s var(--ease),padding-inline-start .3s var(--ease); } .tap-footer-col a::before{ content:'';width:0;height:1px;background:var(--gold-light);margin-inline-end:0; transition:width .3s var(--ease),margin-inline-end .3s var(--ease);flex-shrink:0; } .tap-footer-col a:hover{color:var(--gold-light);} .tap-footer-col a:hover::before{width:10px;margin-inline-end:6px;} .tap-brand-footer{margin-bottom:18px;display:inline-flex;} .tap-footer-brand p{font-size:13.5px;line-height:1.85;max-width:340px;color:rgba(255,255,255,.58);} / Footer social — outlined luxury badges: thin gold-tinted frame at rest, gold wash + one-shot diagonal sheen sweep on hover. Fully standalone (no shared .tap-halo-* classes) so nothing here depends on or affects any other icon treatment in the theme. / .tap-footer-social{display:flex !important;flex-direction:row !important;gap:12px !important;margin-top:22px !important;} .tap-social-badge{ position:relative !important;overflow:hidden !important; width:42px !important;height:42px !important;border-radius:12px !important; background:rgba(255,255,255,.03) !important; border:1.5px solid rgba(var(--gold-rgb),.32) !important; display:flex !important;align-items:center !important;justify-content:center !important; color:rgba(var(--gold-rgb),.85) !important; transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s var(--ease) !important; } .tap-social-badge svg{position:relative !important;z-index:2 !important;width:17px !important;height:17px !important;fill:currentColor !important;stroke:none !important;transition:transform .4s cubic-bezier(.34,1.56,.64,1) !important;} .tap-social-badge-sheen{ position:absolute !important;inset:0 !important;z-index:1 !important;pointer-events:none !important; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) !important; transform:translateX(-120%) !important; transition:none !important; } .tap-social-badge:hover{ border-color:var(--gold) !important; background:linear-gradient(155deg,rgba(var(--gold-rgb),.24),rgba(var(--gold-rgb),.04)) !important; color:#fff !important; transform:translateY(-4px) !important; box-shadow:0 14px 26px -12px rgba(var(--gold-rgb),.6) !important; } .tap-social-badge:hover svg{transform:scale(1.1) !important;} .tap-social-badge:hover .tap-social-badge-sheen{ transform:translateX(120%) !important; transition:transform .85s cubic-bezier(.22,1,.36,1) !important; } .tap-footer-divider{position:relative;z-index:1;display:flex;align-items:center;gap:16px;max-width:1240px;margin-inline:auto;padding-inline:24px;} .tap-footer-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);} .tap-footer-divider-mark{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(var(--gold-rgb),.3);padding:6px;} .tap-footer-divider-mark img{display:block;border-radius:50%;} .tap-footer-bottom{position:relative;z-index:1;} .tap-footer-bottom-inner{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-block:26px;font-size:12.5px;color:rgba(255,255,255,.45); } .tap-footer-totop{ display:inline-flex !important;align-items:center !important;gap:8px !important; background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:100px !important; padding:8px 16px !important;font-size:12px !important;font-weight:600 !important;color:rgba(255,255,255,.7) !important; font-family:inherit !important;cursor:pointer !important; transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease); } .tap-footer-totop svg{width:13px !important;height:13px !important;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} .tap-footer-totop:hover{background:rgba(var(--gold-rgb),.14) !important;border-color:rgba(var(--gold-rgb),.4) !important;color:var(--gold-light) !important;transform:translateY(-2px) !important;} / ----------------------------------------------------------- Floating action buttons ----------------------------------------------------------- / .tap-whatsapp-fab{ position:fixed !important;bottom:26px !important;inset-inline-end:26px !important;z-index:80 !important; width:60px !important;height:60px !important;border-radius:50% !important; background:linear-gradient(155deg,#2be27a,#1da851) !important;color:#fff !important; border:1px solid rgba(255,255,255,.22) !important; display:flex !important;align-items:center !important;justify-content:center !important; box-shadow:0 4px 10px -4px rgba(0,0,0,.35),0 18px 34px -12px rgba(29,168,81,.6),inset 0 1px 0 rgba(255,255,255,.28) !important; transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s var(--ease) !important; } .tap-whatsapp-fab svg{width:30px !important;height:30px !important;position:relative !important;z-index:2 !important;transition:transform .4s cubic-bezier(.34,1.56,.64,1) !important;} .tap-whatsapp-fab:hover{ transform:translateY(-5px) scale(1.08) !important; box-shadow:0 6px 14px -4px rgba(0,0,0,.4),0 24px 42px -12px rgba(29,168,81,.8),inset 0 1px 0 rgba(255,255,255,.32) !important; } .tap-whatsapp-fab:hover svg{transform:rotate(-8deg) scale(1.06) !important;} .tap-whatsapp-pulse{ position:absolute !important;inset:0 !important;border-radius:50% !important; background:#25D366 !important;pointer-events:none !important; animation:tapPulse 2.6s ease-out infinite !important; } .tap-whatsapp-pulse-2{animation-delay:1.3s !important;} @keyframes tapPulse{ 0%{transform:scale(1);opacity:.55;} 100%{transform:scale(1.9);opacity:0;} } .tap-scrolltop{ position:fixed !important;bottom:26px !important;inset-inline-start:26px !important;z-index:80 !important; width:48px !important;height:48px !important;padding:0 !important;border-radius:50% !important; background:linear-gradient(155deg,var(--navy),var(--navy-dark)) !important;border:1px solid rgba(255,255,255,.14) !important;color:#fff !important; display:flex !important;align-items:center !important;justify-content:center !important; box-shadow:0 4px 10px -4px rgba(0,0,0,.35),0 14px 26px -12px rgba(var(--navy-rgb),.55) !important; opacity:0;transform:translateY(16px) scale(.8); pointer-events:none; transition:opacity .35s var(--ease),transform .45s cubic-bezier(.34,1.56,.64,1),background .35s var(--ease),box-shadow .35s var(--ease) !important; } / Gold ring tracks page-scroll progress (--tap-scroll-pct, 0-100, set in header.js from the same value that drives the top progress bar) via a conic-gradient a few px larger than the button, sitting behind it so only the rim shows — no extra markup/JS beyond one CSS var per tick. / .tap-scrolltop-ring{ position:absolute !important;inset:-4px !important;border-radius:50% !important;z-index:-1 !important; background:conic-gradient(from -90deg,var(--gold) calc(var(--tap-scroll-pct,0)1%),rgba(255,255,255,.16) 0) !important; } .tap-scrolltop svg{width:18px !important;height:18px !important;position:relative !important;z-index:1 !important;transition:transform .35s cubic-bezier(.34,1.56,.64,1) !important;} .tap-scrolltop.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} .tap-scrolltop:hover{ background:linear-gradient(135deg,var(--gold),var(--gold-light)) !important; transform:translateY(-4px) scale(1.06) !important; box-shadow:0 8px 18px -6px rgba(var(--gold-rgb),.55) !important; } .tap-scrolltop:hover svg{transform:translateY(-2px) !important;} /* ----------------------------------------------------------- Lightbox (accreditation images) ----------------------------------------------------------- / .tap-lightbox{ position:fixed;inset:0;z-index:300; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none; transition:opacity .35s var(--ease); } .tap-lightbox.is-open{opacity:1;pointer-events:auto;} .tap-lightbox-backdrop{ position:absolute;inset:0; background:rgba(10,15,25,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .tap-lightbox-close{ position:absolute;top:24px;inset-inline-end:24px;z-index:2; width:46px;height:46px;border-radius:50% !important; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.25) !important; color:#fff !important; display:flex;align-items:center;justify-content:center; transition:background .3s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1); } .tap-lightbox-close:hover{background:rgba(var(--gold-rgb),.4) !important;transform:rotate(90deg);} .tap-lightbox-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;} .tap-lightbox-inner{ position:relative;z-index:1; max-width:min(600px,88vw); display:flex;flex-direction:column;align-items:center;gap:16px; transform:scale(.92); transition:transform .4s cubic-bezier(.34,1.56,.64,1); } .tap-lightbox.is-open .tap-lightbox-inner{transform:scale(1);} .tap-lightbox-inner img{ max-width:100%;max-height:70vh;object-fit:contain; border-radius:var(--radius-md); box-shadow:0 40px 90px -20px rgba(0,0,0,.6); background:#fff; } .tap-lightbox-caption{color:#fff;font-family:var(--font-head);font-size:16px;text-align:center;margin:0;} / ----------------------------------------------------------- Responsive ----------------------------------------------------------- / @media (max-width:1080px){ .tap-services-grid,.tap-portfolio-grid,.tap-testimonials-grid{grid-template-columns:repeat(2,1fr);} .tap-hero-inner{grid-template-columns:1fr;} .tap-hero-visual{min-height:0;order:-1;margin-bottom:20px;} .tap-footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .tap-hero{padding-top:190px;} .tap-services-grid,.tap-portfolio-grid,.tap-testimonials-grid{grid-template-columns:1fr;} .tap-hero-stats{flex-wrap:wrap;gap:22px;} .tap-footer-grid{grid-template-columns:1fr;} .tap-footer-cta{flex-direction:column;align-items:flex-start;padding:24px 22px;} .tap-footer-cta-btn{width:100%;justify-content:center;} .tap-footer-bottom-inner{flex-direction:column;text-align:center;} .tap-scrolltop{inset-inline-start:16px !important;bottom:16px !important;} .tap-whatsapp-fab{inset-inline-end:16px !important;bottom:16px !important;} } / Reduced motion / @media (prefers-reduced-motion:reduce){ {animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} }