/* ========================================================================== Al-Masa Sanitary Tools & Water Pump Repair — Design System & Stylesheet شركة الماسة للأدوات الصحية وتمديداتها وتصليح مضخات المياه Structure: 1) Tokens 2) Reset 3) Base 4) Layout 5) Components 6) Sections 7) Utilities 8) Responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1) DESIGN TOKENS -------------------------------------------------------------------------- */ :root{ /* Fonts */ --font-ar:'Tajawal','Segoe UI',Tahoma,sans-serif; --font-en:'Poppins','Segoe UI',Tahoma,sans-serif; --font: var(--font-ar); /* Brand palette — Light mode */ --c-bg:#faf7f2; --c-bg-soft:#f2ecdf; --c-surface:#fffdf9; --c-surface-2:#f0e9da; --c-text:#101c28; --c-text-muted:#54697c; --c-text-faint:#8598a8; --c-border:#e6ddc9; --c-border-strong:#d4c7a8; --c-primary:#0284c7; --c-primary-600:#0369a1; --c-primary-700:#075985; --c-primary-50:#f0f9ff; --c-primary-100:#e0f2fe; --c-accent:#fb923c; --c-accent-600:#f97316; --c-accent-50:#fff7ed; --c-success:#22c55e; --c-whatsapp:#25d366; --c-danger:#ef4444; --c-star:#c8860f; --shadow-sm:0 1px 2px rgba(16,28,40,.06), 0 1px 1px rgba(16,28,40,.04); --shadow-md:0 6px 16px rgba(16,28,40,.08), 0 2px 6px rgba(16,28,40,.05); --shadow-lg:0 20px 45px rgba(16,28,40,.14), 0 6px 14px rgba(16,28,40,.06); --shadow-glow:0 10px 30px rgba(2,132,199,.25); --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px; --container:1240px; --header-h:82px; --ease:cubic-bezier(.4,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:.18s; --dur:.32s; --dur-slow:.55s; } :root[data-theme="dark"]{ --c-bg:#0a141d; --c-bg-soft:#0e1b26; --c-surface:#122130; --c-surface-2:#17293a; --c-text:#eef4f9; --c-text-muted:#a6b8c8; --c-text-faint:#7890a3; --c-border:#20374a; --c-border-strong:#2c4a63; --c-primary:#38bdf8; --c-primary-600:#7dd3fc; --c-primary-700:#bae6fd; --c-primary-50:#0c2635; --c-primary-100:#123247; --c-accent:#fdba74; --c-accent-600:#fed7aa; --c-accent-50:#2b1d10; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 24px 50px rgba(0,0,0,.5); --shadow-glow:0 10px 34px rgba(56,189,248,.28); } /* Auto dark-mode when user has no explicit preference stored is handled via JS setting data-theme, so no media-query duplication needed. */ /* -------------------------------------------------------------------------- 2) RESET -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;height:100%} body{max-width:100%} /* body must NOT also get height:100%: combined with overflow-x:hidden below, the CSS spec forces overflow-y to compute as "auto" on any box whose overflow-x is non-visible — so a height-constrained body becomes its OWN internal scrollbox, stealing all scrollable overflow away from . That leaves (and therefore window.scrollTo/document.scrollingElement, which every JS smooth-scroll in main.js targets) with nothing to scroll — so scripted scrolling silently does nothing while normal mouse/touch scrolling (which happens to hit body directly) still works. This is the confirmed root cause of the toolbox/house-panel/back-to-top scroll buttons not moving the page. Do not reintroduce height:100% here. */ body{ background:var(--c-bg); color:var(--c-text); font-family:var(--font); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none} button{cursor:pointer} h1,h2,h3,h4{line-height:1.25;font-weight:800} :focus-visible{outline:2.5px solid var(--c-primary);outline-offset:3px;border-radius:4px} html[dir="rtl"] body{font-family:var(--font-ar)} html[dir="ltr"] body{font-family:var(--font-en)} /* language-scoped visibility (dual-markup i18n) */ html[data-lang="ar"] [class*="lang-en"]{display:none !important} html[data-lang="en"] [class*="lang-ar"]{display:none !important} /* -------------------------------------------------------------------------- 3) BASE / TYPE -------------------------------------------------------------------------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px} section{position:relative} main section[id]{scroll-margin-top:calc(var(--header-h) + 20px)} .section-pad{padding-block:68px} @media (max-width:768px){.section-pad{padding-block:48px}} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:700;letter-spacing:.02em; color:var(--c-primary);background:var(--c-primary-50); padding:7px 16px;border-radius:var(--radius-pill); margin-bottom:16px; } html[dir="ltr"] .eyebrow{text-transform:uppercase;letter-spacing:.08em} .section-title{ font-size:clamp(28px,4vw,42px); font-weight:800; margin-bottom:14px; letter-spacing:-.01em; } .section-desc{ color:var(--c-text-muted); font-size:clamp(15px,1.6vw,17.5px); max-width:640px; } .section-head{margin-bottom:36px} .section-head.center{text-align:center;margin-inline:auto} .section-head.center .section-desc{margin-inline:auto} .text-gradient{ background:linear-gradient(90deg,var(--c-primary),var(--c-accent)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* -------------------------------------------------------------------------- 4) BUTTONS -------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 28px;border-radius:var(--radius-pill); font-weight:700;font-size:15px;white-space:nowrap; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); border:2px solid transparent; } .btn svg{width:19px;height:19px;flex-shrink:0} .btn:active{transform:scale(.97)} .btn-primary{background:var(--c-primary);color:#fff;box-shadow:var(--shadow-glow)} .btn-primary:hover{background:var(--c-primary-600);transform:translateY(-2px)} .btn-accent{background:var(--c-accent);color:#241100} .btn-accent:hover{background:var(--c-accent-600);transform:translateY(-2px)} .btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff} .btn-outline:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)} .btn-ghost{background:var(--c-surface-2);color:var(--c-text)} .btn-ghost:hover{background:var(--c-border)} .btn-whatsapp{background:var(--c-whatsapp);color:#07260f} .btn-whatsapp:hover{background:#1fb959;transform:translateY(-2px)} .btn-white{background:#fff;color:var(--c-primary-700)} .btn-white:hover{background:#eaf1f7;transform:translateY(-2px)} .btn-sm{padding:10px 20px;font-size:13.5px} .btn-block{width:100%} .icon-btn{ width:44px;height:44px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--c-surface-2);color:var(--c-text); transition:all var(--dur-fast) var(--ease); } .icon-btn:hover{background:var(--c-border);transform:translateY(-2px)} .icon-btn svg{width:20px;height:20px} /* -------------------------------------------------------------------------- 5) HEADER -------------------------------------------------------------------------- */ .site-header{ position:fixed;inset-inline:0;top:0;z-index:900; height:var(--header-h); display:flex;align-items:center; background:color-mix(in srgb, var(--c-surface) 82%, transparent); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid transparent; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), height var(--dur) var(--ease); } .site-header.scrolled{ border-bottom-color:var(--c-border); box-shadow:var(--shadow-sm); height:70px; } .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px} .brand-mark{ width:46px;height:46px;border-radius:14px;flex-shrink:0; background:linear-gradient(145deg,var(--c-primary),var(--c-primary-700)); display:flex;align-items:center;justify-content:center;color:#fff; box-shadow:var(--shadow-md); } .brand-mark svg{width:26px;height:26px} .brand-text{display:flex;flex-direction:column;line-height:1.25} .brand-text small{font-size:11.5px;font-weight:600;color:var(--c-text-muted)} .nav-desktop{display:flex;align-items:center;gap:4px} .nav-desktop a{ padding:10px 16px;border-radius:var(--radius-pill); font-size:14.5px;font-weight:700;color:var(--c-text-muted); transition:all var(--dur-fast) var(--ease); position:relative; } .nav-desktop a:hover,.nav-desktop a.active{color:var(--c-primary);background:var(--c-primary-50)} .header-actions{display:flex;align-items:center;gap:8px} .lang-toggle{ display:flex;align-items:center;gap:6px; padding:9px 14px;border-radius:var(--radius-pill); background:var(--c-surface-2);font-weight:800;font-size:13px; transition:all var(--dur-fast) var(--ease); } .lang-toggle:hover{background:var(--c-border)} .header-actions .divider{width:1px;height:26px;background:var(--c-border);margin-inline:4px} .btn-cta-header{display:none} @media (min-width:1080px){.btn-cta-header{display:inline-flex}} .nav-toggle{display:flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:var(--c-surface-2)} .nav-toggle svg{width:22px;height:22px} @media (min-width:1080px){.nav-toggle{display:none}} @media (max-width:1079px){.nav-desktop{display:none}} /* Mobile drawer */ .mobile-nav{ position:fixed;inset:0;z-index:950; visibility:hidden;pointer-events:none; } .mobile-nav.open{visibility:visible;pointer-events:auto} .mobile-nav-backdrop{ position:absolute;inset:0;background:rgba(6,14,22,.55); opacity:0;transition:opacity var(--dur) var(--ease);backdrop-filter:blur(2px); touch-action:none; } .mobile-nav.open .mobile-nav-backdrop{opacity:1} .mobile-nav-panel{ position:absolute;top:0;inset-inline-end:0;width:min(340px,86vw); height:100%;height:100dvh; background:var(--c-surface);box-shadow:var(--shadow-lg); padding:22px;display:flex;flex-direction:column;gap:6px; transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-spring); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } html[dir="rtl"] .mobile-nav-panel{transform:translateX(-100%)} .mobile-nav.open .mobile-nav-panel{transform:translateX(0)} .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--c-border)} .mobile-nav-panel a.mobile-link{ padding:15px 16px;border-radius:var(--radius-md);font-weight:700;font-size:16px; display:flex;align-items:center;justify-content:space-between;color:var(--c-text); } .mobile-nav-panel a.mobile-link:hover{background:var(--c-surface-2);color:var(--c-primary)} .mobile-nav-panel a.mobile-link svg{width:18px;height:18px;opacity:.5} .mobile-nav-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--c-border);display:flex;flex-direction:column;gap:10px} /* -------------------------------------------------------------------------- 6) FLOATING ACTION BUTTONS + BACK TO TOP -------------------------------------------------------------------------- */ .fab-stack{ position:fixed;bottom:26px;inset-inline-start:22px;z-index:800; display:flex;flex-direction:column;gap:14px; } .fab{ width:58px;height:58px;border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-lg);color:#fff;position:relative; transition:transform var(--dur-fast) var(--ease-spring); animation:fab-in .6s var(--ease-spring) backwards; } .fab svg{width:27px;height:27px} .fab:hover{transform:scale(1.08) translateY(-2px)} .fab-whatsapp{background:var(--c-whatsapp)} .fab-call{background:var(--c-primary)} .fab-whatsapp::after{ content:'';position:absolute;inset:0;border-radius:50%; border:2.5px solid var(--c-whatsapp);opacity:.55; animation:pulse-ring 2.4s ease-out infinite; } @keyframes pulse-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.6);opacity:0}} @keyframes fab-in{from{opacity:0;transform:translateY(20px) scale(.7)}to{opacity:1;transform:none}} .fab-label{ position:absolute;inset-inline-end:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px); background:var(--c-text);color:var(--c-bg); padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:700;white-space:nowrap; opacity:0;pointer-events:none;transition:all var(--dur-fast) var(--ease); } html[dir="rtl"] .fab-label{inset-inline-end:auto;inset-inline-start:calc(100% + 12px);transform:translateY(-50%) translateX(-6px)} .fab:hover .fab-label{opacity:1;transform:translateY(-50%) translateX(0)} .back-to-top{ position:fixed;bottom:26px;inset-inline-end:22px;z-index:800; width:52px;height:52px;border-radius:50%; background:var(--c-surface);color:var(--c-primary);border:1px solid var(--c-border); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md); opacity:0;visibility:hidden;transform:translateY(14px); transition:all var(--dur) var(--ease); } .back-to-top.show{opacity:1;visibility:visible;transform:none} .back-to-top:hover{background:var(--c-primary);color:#fff;transform:translateY(-3px)} .back-to-top svg{width:22px;height:22px} html[dir="rtl"] .back-to-top svg{transform:scaleX(1)} /* -------------------------------------------------------------------------- 7) HERO -------------------------------------------------------------------------- */ .hero{ /* No fixed min-height (was 92vh) — now that the hero-visual image column moved out (see section-hero-image.php), the section's natural content height is much shorter on its own; letting it size to that content is what brings "أعمالنا" into view sooner, without touching any of the text/buttons/stats content itself. */ display:flex;align-items:center; padding-top:var(--header-h);position:relative;overflow:hidden; isolation:isolate; } .hero-bg{ position:absolute;inset:0;z-index:-2; background: radial-gradient(ellipse 900px 500px at 15% 8%, rgba(2,132,199,.16), transparent 60%), radial-gradient(ellipse 700px 500px at 90% 90%, rgba(251,146,60,.17), transparent 60%), linear-gradient(160deg,#b9d2e3 0%,#93bfdb 50%,#5f9bcf 100%); } :root[data-theme="dark"] .hero-bg{ background: radial-gradient(ellipse 900px 500px at 15% 8%, rgba(56,189,248,.22), transparent 60%), radial-gradient(ellipse 700px 500px at 90% 90%, rgba(253,186,116,.14), transparent 60%), linear-gradient(160deg,#02060a 0%,#050f1c 50%,#081a29 100%); } .hero-bg::after{ content:'';position:absolute;inset:0;z-index:-1;opacity:.5; background-image:radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); } :root[data-theme="dark"] .hero-bg::after{opacity:.5} /* Single column now — the hero-visual (image) column moved out into its own block after "أعمالنا" (see section-hero-image.php), so the text is the only thing left in the hero's own container. */ .hero .container{display:grid;grid-template-columns:1fr;gap:40px;padding-block:32px} .hero-badge{ display:inline-flex;align-items:center;gap:8px;color:var(--c-primary-700); background:var(--c-primary-50);border:1px solid var(--c-primary-100); padding:8px 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:700; margin-bottom:22px;backdrop-filter:blur(6px); } :root[data-theme="dark"] .hero-badge{color:#cfe6f7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)} .hero-badge svg{width:16px;height:16px;color:var(--c-accent)} .hero h1{ color:#1c2f42;font-size:clamp(38px,6.2vw,64px);line-height:1.14;letter-spacing:-.02em;margin-bottom:14px; } :root[data-theme="dark"] .hero h1{color:var(--c-text)} .hero h1 span{color:#c8860f} :root[data-theme="dark"] .hero h1 span{color:#e8b64f} .hero .hero-sub{color:var(--c-text);font-size:clamp(18px,2.3vw,24px);line-height:1.4;font-weight:700;margin-bottom:18px} .hero .hero-desc{color:#fff;font-size:clamp(15.5px,1.7vw,18px);line-height:1.65;max-width:560px;margin-bottom:26px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px} .hero-stats{display:flex;flex-wrap:wrap;gap:34px} .hero-stats .stat b{display:block;font-size:26px;color:var(--c-text);font-weight:800} .hero-stats .stat span{font-size:13px;color:var(--c-text-muted);font-weight:600} .hero .btn-outline{border-color:var(--c-primary);color:var(--c-primary)} .hero .btn-outline:hover{background:var(--c-primary-50)} :root[data-theme="dark"] .hero .btn-outline{border-color:rgba(255,255,255,.55);color:#fff} :root[data-theme="dark"] .hero .btn-outline:hover{background:rgba(255,255,255,.14)} .hero-visual{position:relative;display:flex;align-items:center;justify-content:center} .hero-card{ position:relative;width:100%;max-width:420px;aspect-ratio:1/1.05; background:rgba(2,132,199,.05);border:1px solid rgba(2,132,199,.14); border-radius:var(--radius-xl);backdrop-filter:blur(10px); overflow:hidden; box-shadow:var(--shadow-lg); animation:float-y 6s ease-in-out infinite; } :root[data-theme="dark"] .hero-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} @keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hero-card svg{width:100%;height:100%} .hero-card img{display:block;width:100%;height:100%;object-fit:cover} .hero-chip{ position:absolute;background:var(--c-surface);color:var(--c-text); padding:12px 16px;border-radius:16px;box-shadow:var(--shadow-lg); display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px; animation:float-y 5s ease-in-out infinite; z-index:2; } .hero-chip svg{width:20px;height:20px;color:var(--c-success)} .hero-chip.chip-1{top:6%;inset-inline-start:-4%;animation-delay:.4s} .hero-chip.chip-2{bottom:8%;inset-inline-end:-6%;animation-delay:1s} @media (max-width:520px){ .hero-chip{font-size:11px;padding:8px 12px;gap:6px} .hero-chip svg{width:15px;height:15px} .hero-chip.chip-1{top:4%;inset-inline-start:2%} /* pushed higher than on desktop (14% vs 8%) so it clears the "scroll down" cue, which sits fixed near the bottom of the whole hero section and would otherwise overlap once the chip is shown on mobile too */ .hero-chip.chip-2{bottom:16%;inset-inline-end:2%} } /* -------------------------------------------------------------------------- 8) EMERGENCY CTA BAND -------------------------------------------------------------------------- */ :root{ --emergency-grad:linear-gradient(120deg,#062338 0%,#0a3a5c 45%,#0f5a8c 100%); } :root[data-theme="dark"]{ --emergency-grad:linear-gradient(120deg,#040d15 0%,#071c2a 50%,#0a2c40 100%); } .emergency{ background:var(--emergency-grad); color:#fff;position:relative;overflow:hidden;isolation:isolate; } .emergency::before{ content:'';position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse 480px 300px at 88% 0%, rgba(251,146,60,.16), transparent 60%), radial-gradient(ellipse 480px 380px at 8% 100%, rgba(56,189,248,.20), transparent 60%); } .emergency-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07} .emergency-decor svg{position:absolute;stroke:#fff;fill:none} .emergency-decor .d1{width:120px;height:120px;top:-24px;inset-inline-start:8%;rotate:-12deg} .emergency-decor .d2{width:90px;height:90px;bottom:-14px;inset-inline-end:14%;rotate:14deg} .emergency-decor .d3{width:70px;height:70px;top:20%;inset-inline-end:34%} .emergency .container{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px; padding-block:44px;flex-wrap:wrap; } .emergency-text{display:flex;align-items:center;gap:18px;flex:1 1 360px} .emergency-eyebrow{ display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 14px; border-radius:var(--radius-pill);font-size:12px;font-weight:700;margin-bottom:10px; } .emergency-icon{ width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);color:var(--c-accent); display:flex;align-items:center;justify-content:center;flex-shrink:0; animation:ring-shake 2.6s ease-in-out infinite; } .emergency-icon svg{width:32px;height:32px} @keyframes ring-shake{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}94%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}98%{transform:rotate(0)}} .emergency-text h2{font-size:clamp(19px,2.6vw,26px);margin-bottom:4px;color:#fff} .emergency-text p{font-weight:600;opacity:.88;font-size:14.5px;color:#dbe9f4} .emergency-actions{display:flex;gap:12px;flex-wrap:wrap} .emergency-figure{display:none;flex:0 0 130px;animation:float-y 6s ease-in-out infinite} .emergency-figure svg{width:100%;height:auto} @media (min-width:980px){.emergency-figure{display:block}} /* -------------------------------------------------------------------------- 9) SERVICES — Toolbox interactive -------------------------------------------------------------------------- */ .services-intro{ display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center; margin-bottom:20px; } @media (max-width:900px){.services-intro{grid-template-columns:1fr}} .toolbox-stage{ position:relative;background:var(--c-surface);border:1px solid var(--c-border); border-radius:var(--radius-xl);padding:40px 32px;text-align:center;box-shadow:var(--shadow-md); overflow:hidden; } .toolbox-stage::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 50% 0%, var(--c-primary-50), transparent 65%); } .toolbox-trigger-btn{ position:relative;width:100%;background:none;border:none;cursor:pointer; display:flex;flex-direction:column;align-items:center;padding:0; border-radius:var(--radius-lg); } .toolbox-trigger-btn:focus-visible{outline:2.5px solid var(--c-primary);outline-offset:6px} .toolbox-figure{position:relative;width:min(260px,78%);margin-inline:auto} .toolbox-figure svg{ width:100%;height:auto; filter:drop-shadow(0 18px 26px rgba(58,31,92,.28)); transition:transform var(--dur-slow) var(--ease-spring); animation:toolbox-wiggle 5s ease-in-out infinite; } .toolbox-stage.open .toolbox-figure svg{animation:none} .toolbox-trigger-btn:hover .toolbox-figure svg, .toolbox-trigger-btn:focus-visible .toolbox-figure svg{transform:translateY(-6px) scale(1.035)} @keyframes toolbox-wiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-3.5deg)}94%{transform:rotate(3deg)}97%{transform:rotate(-1.5deg)}} .toolbox-figure .box-lid{transform-origin:20% 62%;transition:transform var(--dur-slow) var(--ease-spring)} .toolbox-stage.open .box-lid{transform:rotate(-38deg) translate(-6px,-10px)} .tool-peek{opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease) .12s, transform .4s var(--ease-spring) .12s} .toolbox-stage.open .tool-peek{opacity:1;transform:translateY(0)} .toolbox-stage.open .tool-peek-2{transition-delay:.2s} .toolbox-stage.open .tool-peek-3{transition-delay:.32s} .toolbox-badge{ position:absolute;top:-4px;inset-inline-end:6%;z-index:2; background:var(--c-accent);color:#241100;border-radius:var(--radius-pill); padding:8px 14px;display:flex;flex-direction:column;align-items:center;line-height:1.15; box-shadow:var(--shadow-md);font-weight:800;font-size:10.5px; animation:badge-pulse 2.6s ease-in-out infinite; background:#c8860f; } .toolbox-badge b{font-size:17px} @keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .toolbox-cta{ position:relative;margin-top:24px;display:inline-flex;align-items:center;gap:9px; background:var(--c-primary-50);color:var(--c-primary);font-weight:800;font-size:14.5px; padding:13px 24px;border-radius:var(--radius-pill);transition:all var(--dur-fast) var(--ease); } .toolbox-trigger-btn:hover .toolbox-cta, .toolbox-trigger-btn:focus-visible .toolbox-cta{background:var(--c-primary);color:#fff} .toolbox-cta svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease)} html[dir="rtl"] .toolbox-cta svg{transform:scaleX(-1)} .toolbox-trigger-btn:hover .toolbox-cta svg{transform:translateX(-4px)} html[dir="rtl"] .toolbox-trigger-btn:hover .toolbox-cta svg{transform:scaleX(-1) translateX(-4px)} .toolbox-cta .state-open{display:none} .toolbox-stage.open .toolbox-cta .state-closed{display:none} .toolbox-stage.open .toolbox-cta .state-open{display:inline} .services-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; max-height:0;opacity:0;overflow:hidden;padding-bottom:2px; transition:max-height .7s var(--ease), opacity .5s var(--ease); } /* max-height is set inline by JS (measured from actual scrollHeight, then released to "none" once the open transition finishes) so the grid can never clip its last row at any breakpoint or content length — see initToolbox() in main.js */ .services-grid.open{opacity:1;margin-bottom:8px} @media (max-width:1080px){.services-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.services-grid{grid-template-columns:1fr}} .service-card{ min-width:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg); padding:24px;display:flex;flex-direction:column;gap:12px; transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); opacity:0;transform:translateY(16px); } .services-grid.open .service-card{animation:card-pop .6s var(--ease-spring) forwards} .services-grid.open .service-card:nth-child(1){animation-delay:.03s} .services-grid.open .service-card:nth-child(2){animation-delay:.08s} .services-grid.open .service-card:nth-child(3){animation-delay:.13s} .services-grid.open .service-card:nth-child(4){animation-delay:.18s} .services-grid.open .service-card:nth-child(5){animation-delay:.23s} .services-grid.open .service-card:nth-child(6){animation-delay:.28s} .services-grid.open .service-card:nth-child(7){animation-delay:.33s} .services-grid.open .service-card:nth-child(8){animation-delay:.38s} .services-grid.open .service-card:nth-child(9){animation-delay:.43s} .services-grid.open .service-card:nth-child(10){animation-delay:.48s} .services-grid.open .service-card:nth-child(11){animation-delay:.53s} .services-grid.open .service-card:nth-child(12){animation-delay:.58s} @keyframes card-pop{to{opacity:1;transform:translateY(0)}} .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--c-primary)} .service-icon{ width:54px;height:54px;border-radius:16px; background:var(--c-primary-50);color:var(--c-primary); display:flex;align-items:center;justify-content:center; transition:all var(--dur) var(--ease); } .service-icon svg{width:27px;height:27px} .service-card:hover .service-icon{background:var(--c-primary);color:#fff;transform:rotate(-8deg) scale(1.05)} .service-card h3{font-size:16.5px} .service-card p{color:var(--c-text-muted);font-size:13.8px;flex-grow:1} .service-card .btn{align-self:flex-start;margin-top:4px} /* -------------------------------------------------------------------------- 10) WHY CHOOSE US -------------------------------------------------------------------------- */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:860px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:420px){.why-grid{grid-template-columns:1fr}} .why-card{ min-width:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg); padding:26px 20px;text-align:center; transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease); } .why-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .why-icon{ width:62px;height:62px;border-radius:50%;margin-inline:auto 12px;margin-bottom:16px; background:linear-gradient(145deg,var(--c-primary-50),var(--c-primary-100)); color:var(--c-primary);display:flex;align-items:center;justify-content:center; } .why-icon svg{width:29px;height:29px} .why-card h3{font-size:15.5px;margin-bottom:8px} .why-card p{font-size:13.3px;color:var(--c-text-muted)} /* -------------------------------------------------------------------------- 11) HOUSE COMPLAINS — interactive hotspots -------------------------------------------------------------------------- */ .house-section{background:var(--c-bg-soft)} .house-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} @media (max-width:900px){.house-wrap{grid-template-columns:1fr}} .house-stage{position:relative;overflow-x:hidden;max-width:100%;min-width:0} .house-illustration{position:relative;width:100%} .house-illustration svg{ width:100%;height:auto; --house-roof:#b5533c;--house-roof-dark:#7a3223;--house-wall-fill:#fdf6ec;--house-door:#c8860f;--house-shadow:rgba(120,60,35,.10); } :root[data-theme="dark"] .house-illustration svg{ --house-roof:#d97a5c;--house-roof-dark:#a8462c;--house-wall-fill:#2a1810;--house-door:#e8b64f;--house-shadow:rgba(120,60,35,.18); } .house-bubble{ position:absolute;width:56px;height:56px;border-radius:50%; background:var(--c-surface);border:2px solid var(--c-border);box-shadow:var(--shadow-md); display:flex;align-items:center;justify-content:center;font-size:24px; transition:all var(--dur) var(--ease-spring);animation:bubble-pulse 3s ease-in-out infinite; } .house-bubble svg{width:26px;height:26px;color:var(--c-primary)} .house-bubble:hover,.house-bubble.active{ background:var(--c-primary);border-color:var(--c-primary);transform:scale(1.14); } .house-bubble.active svg,.house-bubble:hover svg{color:#fff} @keyframes bubble-pulse{0%,100%{box-shadow:var(--shadow-md),0 0 0 0 rgba(2,132,199,.28)}50%{box-shadow:var(--shadow-md),0 0 0 10px rgba(2,132,199,0)}} .house-bubble.b1{top:14%;inset-inline-start:18%} .house-bubble.b2{top:66%;inset-inline-start:8%} .house-bubble.b3{top:8%;inset-inline-end:12%} .house-bubble.b4{top:44%;inset-inline-end:6%} .house-bubble.b5{bottom:6%;inset-inline-end:28%} .house-bubble.b6{bottom:6%;inset-inline-start:20%} .house-bubble-tip{ position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px); background:var(--c-text);color:var(--c-bg);padding:6px 13px;border-radius:8px; font-size:12px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); z-index:5; } .house-bubble-tip::after{ content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%); border:5px solid transparent;border-top-color:var(--c-text); } .house-bubble:hover .house-bubble-tip, .house-bubble:focus-visible .house-bubble-tip, .house-bubble.active .house-bubble-tip{ opacity:1;transform:translateX(-50%) translateY(0); } .house-panel{ min-width:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-xl); padding:32px;box-shadow:var(--shadow-md);min-height:300px;display:flex;flex-direction:column; } .house-panel-problem{display:flex;align-items:center;gap:14px;margin-bottom:18px} .house-panel-problem .emoji{font-size:34px} .house-panel-problem h3{font-size:19px;color:var(--c-danger);min-width:0} .house-panel .divider-label{ display:flex;align-items:center;gap:10px;color:var(--c-text-faint);font-size:12px;font-weight:800;margin:18px 0 12px; } .house-panel .divider-label::before,.house-panel .divider-label::after{content:'';flex:1;height:1px;background:var(--c-border)} .house-panel-solution{display:flex;align-items:flex-start;gap:14px;color:var(--c-text-muted);font-size:14.5px;margin-bottom:22px} .house-panel-solution svg{width:22px;height:22px;color:var(--c-success);flex-shrink:0;margin-top:2px} /* Flex items default to min-width:auto, which lets a long enough run of text refuse to wrap and instead overflow its box — a plain browser default, not something set anywhere in this file, and it only shows up once the text is long enough to hit it (which is exactly why some problems' solution text could look fine while a longer one doesn't). min-width:0 is the standard fix: it lets this text wrap normally like any non-flex paragraph, with no effect on cases that already fit. */ .house-panel-solution p{min-width:0} .house-panel .btn{margin-top:auto;align-self:flex-start} .house-dots{display:flex;gap:8px;margin-top:22px;justify-content:center} .house-dots span{width:8px;height:8px;border-radius:50%;background:var(--c-border);transition:all var(--dur) var(--ease)} .house-dots span.active{background:var(--c-primary);width:22px;border-radius:5px} /* -------------------------------------------------------------------------- 11b) QUICK-FIX PROBLEM FINDER — "مشكلتك عندنا لها حل" -------------------------------------------------------------------------- */ .qf-section{position:relative;overflow:hidden;isolation:isolate} .qf-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05} :root[data-theme="dark"] .qf-decor{opacity:.08} .qf-decor svg{position:absolute;stroke:var(--c-primary);fill:none} .qf-decor .q1{width:150px;height:150px;top:-30px;inset-inline-end:6%;rotate:-8deg} .qf-decor .q2{width:110px;height:110px;bottom:-10px;inset-inline-start:10%;rotate:10deg} .qf-decor .q3{width:80px;height:80px;top:40%;inset-inline-start:2%} .qf-journey{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:6px;margin:0 auto 32px;max-width:820px; } .qf-journey-step{ display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--radius-pill); background:var(--c-surface);border:1px solid var(--c-border);font-size:12.5px;font-weight:700; color:var(--c-text-muted);white-space:nowrap; } .qf-journey-step b{ width:22px;height:22px;border-radius:50%;background:var(--c-primary-50);color:var(--c-primary); display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0; } .qf-journey-step.is-last{color:var(--c-accent-600);background:var(--c-accent-50);border-color:transparent} .qf-journey-step.is-last b{background:var(--c-accent);color:#241100} .qf-journey-arrow{color:var(--c-border-strong);flex-shrink:0} .qf-journey-arrow svg{width:16px;height:16px} html[dir="rtl"] .qf-journey-arrow svg{transform:scaleX(-1)} .qf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px} @media (max-width:980px){.qf-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){.qf-grid{grid-template-columns:repeat(2,1fr)}} .qf-card{ min-width:0;background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--radius-lg); padding:22px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px; transition:transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .qf-card-emoji{font-size:30px;line-height:1;transition:transform var(--dur) var(--ease-spring)} .qf-card span{font-size:13px;font-weight:700;color:var(--c-text)} .qf-card:hover{transform:translateY(-4px);border-color:var(--c-primary);box-shadow:var(--shadow-md)} .qf-card:hover .qf-card-emoji{transform:scale(1.15) rotate(-6deg)} .qf-card.active{background:var(--c-primary);border-color:var(--c-primary);box-shadow:var(--shadow-glow)} .qf-card.active span{color:#fff} .qf-result{ position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-xl); padding:34px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:26px;flex-wrap:wrap; overflow:hidden; } .qf-result::before{ content:'';position:absolute;inset:0;z-index:-1; background:radial-gradient(ellipse 420px 260px at 100% 0%, var(--c-primary-50), transparent 65%); } .qf-result-icon{ width:76px;height:76px;border-radius:var(--radius-lg);flex-shrink:0; background:linear-gradient(145deg,var(--c-primary),var(--c-primary-700));color:#fff; display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow); transition:transform var(--dur) var(--ease-spring); } .qf-result-icon svg{width:36px;height:36px} .qf-result-body{flex:1 1 320px;min-width:0} .qf-result-headline{font-size:19px;font-weight:800;margin-bottom:6px} .qf-result-desc{color:var(--c-text-muted);font-size:14.5px;margin-bottom:14px} .qf-result-service{ display:inline-flex;align-items:center;gap:8px;background:var(--c-accent-50);color:var(--c-accent-600); padding:8px 16px;border-radius:var(--radius-pill);font-weight:800;font-size:13px; } .qf-result-service svg{width:16px;height:16px} .qf-result-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0} .qf-result.placeholder{justify-content:center;text-align:center;color:var(--c-text-faint)} .qf-result.placeholder .qf-result-icon{background:var(--c-surface-2);color:var(--c-text-faint);box-shadow:none} @media (max-width:640px){.qf-result{flex-direction:column;text-align:center;padding:26px}.qf-result-actions{width:100%}.qf-result-actions .btn{width:100%}} /* -------------------------------------------------------------------------- 11c) MINI CTA BANNER — reinforces the ask right after Services -------------------------------------------------------------------------- */ .mini-cta-section{padding-block:20px} .mini-cta{ background:var(--c-surface); border:1px solid var(--c-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md); padding:36px 32px;text-align:center; } .mini-cta h3{font-size:clamp(20px,2.6vw,26px);margin-bottom:8px} .mini-cta p{color:var(--c-text-muted);margin-bottom:22px;font-size:14.5px} .mini-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} @media (max-width:480px){.mini-cta{padding:28px 20px}.mini-cta-actions{flex-direction:column}.mini-cta-actions .btn{width:100%}} /* -------------------------------------------------------------------------- 12) ABOUT -------------------------------------------------------------------------- */ .about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;overflow-x:hidden} @media (max-width:900px){.about-wrap{grid-template-columns:1fr;gap:36px}} .about-visual{position:relative;max-width:100%} .about-visual svg{width:100%;height:auto;border-radius:var(--radius-xl)} .about-badge-float{ position:absolute;bottom:-18px;inset-inline-start:-18px; background:var(--c-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:16px 20px;display:flex;align-items:center;gap:12px; } .about-badge-float b{display:block;font-size:22px;color:var(--c-primary)} .about-badge-float span{font-size:12px;color:var(--c-text-muted);font-weight:600} .about-list{display:grid;gap:14px;margin-top:26px} .about-list li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:14.5px} .about-list li svg{width:22px;height:22px;color:var(--c-success);flex-shrink:0} /* -------------------------------------------------------------------------- 13) STEPS -------------------------------------------------------------------------- */ .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative} @media (max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.steps-grid{grid-template-columns:1fr}} .step-card{position:relative;text-align:center;padding:12px;min-width:0} .step-num{ width:70px;height:70px;border-radius:50%;margin-inline:auto;margin-bottom:20px; background:var(--c-surface);border:2px dashed var(--c-border-strong); display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:var(--c-primary); position:relative; } .step-card:hover .step-num{border-color:var(--c-primary);background:var(--c-primary-50)} .step-num svg{width:30px;height:30px} .step-card h3{font-size:16px;margin-bottom:8px} .step-card p{color:var(--c-text-muted);font-size:13.5px} /* -------------------------------------------------------------------------- 14) ARTICLES -------------------------------------------------------------------------- */ .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media (max-width:980px){.articles-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.articles-grid{grid-template-columns:1fr}} .article-card{ min-width:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg); overflow:hidden;display:flex;flex-direction:column; transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease); } .article-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .article-thumb{aspect-ratio:16/10;position:relative;overflow:hidden} .article-thumb svg{width:100%;height:100%;transition:transform var(--dur-slow) var(--ease)} .article-card:hover .article-thumb svg{transform:scale(1.06)} .article-tag{ position:absolute;top:14px;inset-inline-start:14px;background:rgba(10,20,30,.55);color:#fff; backdrop-filter:blur(6px);padding:5px 12px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700; } .article-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex-grow:1} .article-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-text-faint);font-weight:600} .article-meta svg{width:14px;height:14px} .article-card h3{font-size:17.5px} .article-card p{color:var(--c-text-muted);font-size:14px;flex-grow:1} .article-card .btn{align-self:flex-start;margin-top:6px} .article-full{ border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-surface); margin-bottom:18px;overflow:hidden;scroll-margin-top:110px; } .article-full summary{ list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;gap:18px;justify-content:space-between; } .article-full summary::-webkit-details-marker{display:none} .article-full summary .a-title{display:flex;align-items:center;gap:16px} .article-full summary .a-title .num{ width:40px;height:40px;border-radius:50%;background:var(--c-primary-50);color:var(--c-primary); display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0; } .article-full summary h3{font-size:17px} .article-full summary .chev{width:20px;height:20px;color:var(--c-text-faint);transition:transform var(--dur) var(--ease);flex-shrink:0} .article-full[open] summary .chev{transform:rotate(180deg)} .article-full-content{padding:0 26px 30px;color:var(--c-text-muted);font-size:15px} .article-full-content p{margin-bottom:14px} .article-full-content ul{margin:14px 0;display:grid;gap:10px} .article-full-content ul li{display:flex;gap:10px;align-items:flex-start} .article-full-content ul li svg{width:18px;height:18px;color:var(--c-primary);flex-shrink:0;margin-top:3px} /* -------------------------------------------------------------------------- 15) TESTIMONIALS -------------------------------------------------------------------------- */ .testi-track-wrap{position:relative} .testi-track{ display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding-block:4px; } .testi-track::-webkit-scrollbar{display:none} .testi-card{ scroll-snap-align:start; flex:0 0 calc(33.333% - 14px);background:var(--c-surface);border:1px solid var(--c-border); border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:14px; } @media (max-width:980px){.testi-card{flex:0 0 calc(50% - 10px)}} @media (max-width:640px){.testi-card{flex:0 0 100%}} .testi-stars{display:flex;gap:3px;color:var(--c-star)} .testi-stars svg{width:17px;height:17px} .testi-card p{color:#a8760d;font-size:14.5px;flex-grow:1} :root[data-theme="dark"] .testi-card p{color:#e8b64f} .testi-person{display:flex;align-items:center;gap:12px;margin-top:6px} .testi-avatar{ width:46px;height:46px;border-radius:50%;flex-shrink:0; background:linear-gradient(145deg,#0d9488,#0f766e); color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800; } .testi-person b{display:block;font-size:14px;color:#a8760d} :root[data-theme="dark"] .testi-person b{color:#e8b64f} .testi-person span{font-size:12px;color:var(--c-text-faint)} .testi-controls{display:flex;justify-content:center;gap:12px;margin-top:28px} .testi-controls button{ width:44px;height:44px;border-radius:50%;background:var(--c-surface-2); display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease); } .testi-controls button:hover{background:var(--c-primary);color:#fff} .testi-controls svg{width:18px;height:18px} html[dir="rtl"] .testi-controls .icon-prev svg{transform:scaleX(-1)} html[dir="rtl"] .testi-controls .icon-next svg{transform:scaleX(-1)} /* -------------------------------------------------------------------------- 15b) OUR WORK ("أعمالنا") CAROUSEL -------------------------------------------------------------------------- */ .works-track-wrap{position:relative} .works-track{ display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding-block:4px; } .works-track::-webkit-scrollbar{display:none} .works-card{ /* Each image is a fully-designed marketing graphic (logo, headline, feature list, address, contact bar all baked into the picture itself), roughly square — not a plain cropped photo. aspect-ratio:1/1 + a background fill (instead of the old 4:3 + object-fit:cover) means the whole graphic always shows intact, with no risk of its own edge text getting cropped off. */ scroll-snap-align:start;position:relative;display:block;overflow:hidden; flex:0 0 calc(33.333% - 14px);aspect-ratio:1/1;border-radius:var(--radius-lg); background:var(--c-surface-2);box-shadow:var(--shadow-md); transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease); } .works-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .works-card img{width:100%;height:100%;object-fit:contain;display:block} @media (max-width:980px){.works-card{flex:0 0 calc(50% - 10px)}} @media (max-width:640px){.works-card{flex:0 0 84%}} .works-controls{display:flex;justify-content:center;gap:12px;margin-top:28px} .works-controls button{ width:44px;height:44px;border-radius:50%;background:var(--c-surface-2); display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease); } .works-controls button:hover{background:var(--c-primary);color:#fff} .works-controls svg{width:18px;height:18px} html[dir="rtl"] .works-controls .icon-prev svg{transform:scaleX(-1)} html[dir="rtl"] .works-controls .icon-next svg{transform:scaleX(-1)} .works-cta{text-align:center;margin-top:34px} /* -------------------------------------------------------------------------- 16) FAQ -------------------------------------------------------------------------- */ .faq-list{max-width:800px;margin-inline:auto;display:grid;gap:14px} .faq-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);overflow:hidden} .faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 24px;text-align:start;font-weight:700;font-size:15.5px; color:#a8760d; } :root[data-theme="dark"] .faq-q{color:#e8b64f} .faq-q .plus{ width:30px;height:30px;border-radius:50%;background:var(--c-surface-2);flex-shrink:0; display:flex;align-items:center;justify-content:center;position:relative;transition:all var(--dur) var(--ease); } .faq-q .plus svg{width:15px;height:15px;transition:transform var(--dur) var(--ease)} .faq-item.open .faq-q .plus{background:#c8860f;color:#fff} .faq-item.open .faq-q .plus svg{transform:rotate(135deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .faq-a-inner{padding:0 24px 22px;color:#a8760d;font-size:14.5px} :root[data-theme="dark"] .faq-a-inner{color:#e8b64f} /* -------------------------------------------------------------------------- 17) CONTACT -------------------------------------------------------------------------- */ .contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px} .contact-wrap > *{min-width:0} @media (max-width:900px){.contact-wrap{grid-template-columns:1fr}} .contact-cards{display:grid;gap:16px;align-content:start} .contact-card{ background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg); padding:22px;display:flex;align-items:center;gap:16px;transition:all var(--dur) var(--ease); } .contact-card:hover{border-color:var(--c-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)} .contact-card .ci{ width:52px;height:52px;border-radius:14px;background:var(--c-primary-50);color:var(--c-primary); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .contact-card .ci svg{width:24px;height:24px} .contact-card b{display:block;font-size:14.5px;margin-bottom:2px} .contact-card span{font-size:13px;color:var(--c-text-muted)} .contact-form{ background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-xl); padding:34px;box-shadow:var(--shadow-md); } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media (max-width:560px){.form-row{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .field label{font-size:13.5px;font-weight:700;color:var(--c-text-muted)} .field input,.field select,.field textarea{ padding:13px 16px;border:1.5px solid var(--c-border);border-radius:var(--radius-sm); background:var(--c-bg-soft);transition:all var(--dur-fast) var(--ease);font-size:14.5px; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-primary);background:var(--c-surface)} .field textarea{resize:vertical;min-height:110px} .form-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-text-faint);margin-top:14px} .form-note svg{width:15px;height:15px;flex-shrink:0} .form-success{ display:none;align-items:center;gap:12px;background:var(--c-primary-50);color:var(--c-primary-600); padding:16px 18px;border-radius:var(--radius-md);margin-bottom:18px;font-weight:700;font-size:14px; } .form-success.show{display:flex} .form-success svg{width:22px;height:22px;flex-shrink:0} /* -------------------------------------------------------------------------- 18) SOCIAL PAGE -------------------------------------------------------------------------- */ .social-hero{ padding-top:calc(var(--header-h) + 60px);padding-bottom:60px;text-align:center; background:linear-gradient(180deg,var(--c-primary-50),var(--c-bg) 90%); } .social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media (max-width:900px){.social-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.social-grid{grid-template-columns:1fr}} .social-card{ min-width:0;position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:34px 26px; background:var(--c-surface);border:1px solid var(--c-border);text-align:center; transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease); } .social-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--shadow-lg)} .social-card .sc-icon{ width:76px;height:76px;border-radius:50%;margin-inline:auto;margin-bottom:20px; display:flex;align-items:center;justify-content:center;color:#fff; box-shadow:var(--shadow-md);transition:transform var(--dur) var(--ease-spring); } .social-card:hover .sc-icon{transform:rotate(-8deg) scale(1.08)} .social-card .sc-icon svg{width:36px;height:36px} .social-card h3{font-size:18px;margin-bottom:6px} .social-card p{color:var(--c-text-muted);font-size:13.5px;margin-bottom:18px} .sc-instagram .sc-icon{background:linear-gradient(145deg,#f58529,#dd2a7b,#8134af,#515bd4)} .sc-tiktok .sc-icon{background:linear-gradient(145deg,#010101,#25f4ee)} .sc-x .sc-icon{background:#0a141d} .sc-youtube .sc-icon{background:#ff0000} .social-card.is-placeholder{opacity:.55;cursor:default} .social-card.is-placeholder .sc-icon{filter:grayscale(1)} .social-card.is-placeholder:hover{transform:none;box-shadow:none} /* -------------------------------------------------------------------------- 19) FOOTER -------------------------------------------------------------------------- */ .site-footer{background:var(--c-text);color:#c8d6e2;padding-top:70px;position:relative;overflow:hidden} :root[data-theme="dark"] .site-footer{background:#050c13} .site-footer::before{ content:'';position:absolute;top:0;inset-inline:0;height:4px; background:linear-gradient(90deg,var(--c-primary),var(--c-accent)); } .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px} .footer-grid > div{min-width:0} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:36px}} @media (max-width:560px){.footer-grid{grid-template-columns:1fr}} .footer-brand .brand{color:#fff;margin-bottom:14px} .footer-brand p{font-size:13.8px;line-height:1.8;color:#93a7b8;max-width:300px} .footer-social{display:flex;gap:10px;margin-top:20px} .footer-social a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease); } .footer-social a:hover{background:var(--c-primary);transform:translateY(-3px)} .footer-social a.is-placeholder{opacity:.4;border:1px dashed rgba(255,255,255,.35);background:transparent} .footer-social a.is-placeholder:hover{opacity:.7;background:transparent} .footer-social svg{width:17px;height:17px} .footer-col h3{color:#fff;font-size:15px;margin-bottom:18px} .footer-col ul{display:grid;gap:11px} .footer-col a{font-size:13.8px;color:#93a7b8;transition:color var(--dur-fast) var(--ease);display:flex;align-items:center;gap:8px} .footer-col a:hover{color:#fff} /* .footer-col a's own color:#93a7b8 above (a real but low-contrast muted gray, fine for plain text links) was unintentionally overriding .btn-whatsapp's own dark text color for the WhatsApp button that sits inside this same column, due to plain CSS specificity — leaving light gray text on bright green, which is what failed the contrast check. Restoring the button's own intended color here, scoped only to this button, without touching any other footer link's color. */ .footer-col .btn-whatsapp{color:#07260f} .footer-col a svg{width:14px;height:14px;opacity:.6} .footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:13.8px;color:#93a7b8;margin-bottom:14px} .footer-contact li svg{width:17px;height:17px;color:var(--c-accent);flex-shrink:0;margin-top:2px} .footer-contact li a{color:inherit;transition:color var(--dur-fast) var(--ease)} .footer-contact li a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.8px;color:#7f93a5} .footer-bottom a{color:#a9bccb} .footer-bottom a:hover{color:#fff} /* -------------------------------------------------------------------------- 20) SCROLL REVEAL -------------------------------------------------------------------------- */ /* Visible by default — this is the fix for content going permanently blank on some phones/browsers. The old rule hid [data-reveal] elements (opacity:0) unconditionally and relied on JS (an IntersectionObserver in main.js) to ever reveal them; if that JS is slow, throttled, or fails for any reason on a given device, those sections never appear again — exactly the empty-space bug reported. Now nothing hides unless `.js` is present on , which a tiny inline script in header.php sets synchronously before anything else can fail — and even then, a plain CSS animation (no JS involved) forces every one of these elements visible on its own a short moment after load, regardless of whether the IntersectionObserver ever fires. The scroll-triggered reveal still runs and still looks the same for everyone in the normal case — this only changes what happens when it doesn't. */ [data-reveal]{opacity:1;transform:none} html.js [data-reveal]{ opacity:0;transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); animation:reveal-fallback .01s 1.8s forwards; /* non-zero duration: a literal 0s duration doesn't reliably apply its end-state/fill-mode in every engine — verified by testing */ } @keyframes reveal-fallback{to{opacity:1;transform:none}} html.js [data-reveal].in{opacity:1;transform:none} html.js [data-reveal="right"]{transform:translateX(28px)} html[dir="rtl"].js [data-reveal="right"]{transform:translateX(-28px)} html.js [data-reveal="left"]{transform:translateX(-28px)} html[dir="rtl"].js [data-reveal="left"]{transform:translateX(28px)} html.js [data-reveal].in[data-reveal="right"],html.js [data-reveal].in[data-reveal="left"]{transform:none} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important} } /* -------------------------------------------------------------------------- 21) UTILITIES -------------------------------------------------------------------------- */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .flex{display:flex} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media (max-width:768px){.grid-2{grid-template-columns:1fr}} .mt-0{margin-top:0} .badge-count{ min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--c-accent);color:#241100; font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center; } /* Theme toggle sun/moon */ .theme-toggle svg{width:20px;height:20px} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} /* Page hero (inner pages) */ .page-hero{ padding-top:calc(var(--header-h) + 56px);padding-bottom:56px;text-align:center; background:linear-gradient(180deg,var(--c-primary-50),var(--c-bg) 92%); } .page-hero h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:12px} .page-hero p{color:var(--c-text-muted);max-width:560px;margin-inline:auto} .breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--c-text-faint);margin-bottom:18px} .breadcrumb a{color:var(--c-primary);font-weight:700} .breadcrumb svg{width:13px;height:13px} html[dir="rtl"] .breadcrumb svg{transform:scaleX(-1)}