/* ═══════════════════════════════════════════════════════════════════ DOUBLE DOWN AI — MOBILE / iPAD / iPHONE OVERHAUL v1 Loads on every page. Additive — never overrides brand identity. Solves: notch safe areas, iOS form-zoom, viewport-height bugs, horizontal overflow, tap-target sizing, iPad break gaps, table responsiveness, reduced-motion support, momentum scroll. ═══════════════════════════════════════════════════════════════════ */ :root{ --dd-vh:100vh; --dd-safe-bot:env(safe-area-inset-bottom,0px); --dd-safe-top:env(safe-area-inset-top,0px); --dd-safe-l:env(safe-area-inset-left,0px); --dd-safe-r:env(safe-area-inset-right,0px); } /* ─── Universal mobile sanity ────────────────────────────────────── */ /* iOS Safari scroll fix: NEVER set overflow-x on . When both html+body have overflow-x:hidden, iOS loses the scroll container and the page locks. Use overflow:clip on body only (modern browsers), with a width:100% fallback for older WebKit. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; /* No overflow rules here — let the document scroll naturally. */ } body{ max-width:100%; width:100%; position:relative; overscroll-behavior-x:none; /* only X; let Y bounce naturally */ -webkit-overflow-scrolling:touch; } @supports (overflow:clip){ body{overflow-x:clip} } @supports not (overflow:clip){ body{overflow-x:hidden} } /* Hard override: any inline rule trying to lock html overflow gets neutralized. */ html{overflow-x:visible!important;overflow-y:auto!important} *{-webkit-tap-highlight-color:transparent;} img,video,svg{max-width:100%;height:auto} img{image-rendering:auto} /* Smooth + buttery momentum scroll on iOS */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; } } /* Selection color — on-brand green */ ::selection{background:rgba(16,185,129,.32);color:#fff} ::-moz-selection{background:rgba(16,185,129,.32);color:#fff} /* Subtle scrollbar */ @media (min-width:640px){ *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:rgba(16,185,129,.22);border-radius:4px} *::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,.45)} } /* Focus ring — keyboard-only */ :focus{outline:none} :focus-visible{outline:2px solid #10b981;outline-offset:3px;border-radius:6px} /* ─── iOS form-zoom prevention (inputs must be ≥16px on mobile) ─── */ @media (max-width:768px){ input,select,textarea{ font-size:max(16px,1em)!important; } } /* ─── Touch behavior — fast taps, no callouts on chrome ─── */ button,a,[role="button"],summary, .btn-p,.btn-s,.btn-xl,.btn-glow,.btn-oline,.nav-btn, .scard,.pricing-card,.pricing-card-3d,.faq-i,.faq-item, .tarr,.tdot,.ddscb,.ddpbtn,.ddsnd, .ps,.si,.why-i,.fst,.process-step,.solution-card{ touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; } /* …but allow text selection inside content */ p,h1,h2,h3,h4,h5,li,article,blockquote,.faq-a,.tq,.hero-sub,.sec-p, .sc-p,.ddbub,.ddm,.dd-answer,.dd-speakable,.compare-cell{ -webkit-user-select:auto;user-select:auto; } /* ─── Tap-target minimums on touch devices ─── */ @media (max-width:768px) and (pointer:coarse){ .nav-side a,.nav-ddm a,.f-leg a,.f-links a,.dropdown-content a, .ddscb,.tdot,.fsoc,.fst, button:not(.ddhx):not(.px):not(.ddpx):not(#mob-x){ min-height:44px; } /* dot indicators stay small visually but get touch padding */ .tdot{padding:8px;background-clip:content-box;box-sizing:content-box;margin:-8px} } /* ─── Safe-area inset for ALL fixed bottom/edge elements ─── */ #ddW,#wa,#stt{ bottom:calc(22px + var(--dd-safe-bot))!important; } #stt{bottom:calc(82px + var(--dd-safe-bot))!important;} #wa{left:calc(18px + var(--dd-safe-l))!important;} #ddW{right:calc(18px + var(--dd-safe-r))!important;} @media (max-width:520px){ #ddW{right:calc(12px + var(--dd-safe-r))!important;bottom:calc(14px + var(--dd-safe-bot))!important} #wa{left:calc(12px + var(--dd-safe-l))!important;bottom:calc(14px + var(--dd-safe-bot))!important} #stt{bottom:calc(74px + var(--dd-safe-bot))!important} } /* Mobile chatbot panel position */ @media (max-width:520px){ #ddWin{bottom:calc(72px + var(--dd-safe-bot))!important;max-height:calc(var(--dd-vh) - 110px)!important} #ddPop{bottom:calc(72px + var(--dd-safe-bot))!important} } /* Body breathing room for notch / home indicator */ @supports (padding:env(safe-area-inset-bottom)){ body{padding-left:var(--dd-safe-l);padding-right:var(--dd-safe-r)} } /* ─── 100vh fix — uses JS-set --dd-vh on iOS ─── */ .full-viewport,#hero{min-height:var(--dd-vh,100vh)} @media (max-width:540px){ #hero{min-height:auto!important;padding-top:88px!important} } /* ─── NAV — mobile compaction ─── */ @media (max-width:960px){ nav{height:64px!important;padding:0 14px!important} .nav-logo{font-size:18px!important} } /* Hover dropdowns useless on touch — kill them */ @media (hover:none) and (pointer:coarse){ .nav-dd:hover .nav-ddm,.dropdown:hover .dropdown-content{ opacity:0!important;visibility:hidden!important;pointer-events:none!important; } } /* Mobile menu — full-bleed and notch-aware */ #mob-nav{ padding-top:calc(40px + var(--dd-safe-top))!important; padding-bottom:calc(40px + var(--dd-safe-bot))!important; overflow-y:auto!important; } @media (max-width:420px){ #mob-nav a{font-size:22px!important} } /* ─── HERO MOBILE TIGHTEN ─── */ @media (max-width:540px){ .hero-in{padding:24px 16px!important;gap:24px!important} .hero-badge{margin-bottom:14px;padding:6px 12px;font-size:10px} .hero-h1{font-size:clamp(30px,8.5vw,42px)!important;line-height:1.05;letter-spacing:-1.2px} .hero-sub{font-size:14px!important;line-height:1.7!important;margin-bottom:22px} .hero-btns{gap:10px} .hstats{gap:14px!important;margin-top:22px!important} .hs-n{font-size:24px!important} .hs-l{font-size:9.5px!important;letter-spacing:1px} .hcw{width:clamp(220px,82vw,340px)!important;height:clamp(260px,80vw,380px)!important;margin:0 auto} } /* ─── iPad portrait/landscape sweet spot ─── */ @media (min-width:768px) and (max-width:1024px){ .max-w,.container{padding-left:28px!important;padding-right:28px!important} nav{padding:0 24px!important} #hero .hero-in{gap:36px!important} .hero-h1{font-size:clamp(38px,5.6vw,56px)!important} .hcw{width:clamp(260px,38vw,420px)!important;height:clamp(300px,42vw,460px)!important} /* Force a 3-up rhythm for service cards on iPad to avoid lonely card */ .srv-grid{grid-template-columns:repeat(2,1fr)!important} } /* ─── PROCESS GRID — fill the gap between 4-col and 1-col ─── */ @media (min-width:540px) and (max-width:760px){ .proc-g{grid-template-columns:repeat(2,1fr)!important} .proc-g::before{display:none} } @media (max-width:540px){ .proc-g::before{display:none} } /* ─── STATS GRID — better mobile rhythm ─── */ @media (max-width:600px){ .stats-g{grid-template-columns:repeat(2,1fr)!important} } @media (max-width:380px){ .si-n{font-size:clamp(28px,9vw,40px)!important} .si-l{font-size:10px!important} } /* ─── COMPARISON TABLES — wrap + horizontal scroll cue ─── */ .comparison-table-wrap, [class*="comparison-table"]{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } @media (max-width:720px){ .compare-label{padding:11px 14px!important;font-size:12px!important;white-space:normal!important} .compare-cell{padding:10px 8px!important;font-size:11.5px!important} .comparison-table-wrap table,[class*="comparison-table"] table{min-width:560px!important} } /* Subtle right-edge fade hint that table scrolls */ @media (max-width:720px){ .comparison-table-wrap::after{ content:'→ scroll';position:absolute;right:8px;top:8px; font-size:9px;color:rgba(16,185,129,.55);font-family:'Space Mono',monospace; letter-spacing:1px;pointer-events:none; } .comparison-table-wrap{position:relative} } /* ─── PRICING CARDS — tighten on small screens, 3D off mobile ─── */ @media (max-width:680px){ .pricing-card-inner,.pricing-card{padding:24px 20px!important} .pricing-card-3d:hover .pricing-card-inner{transform:none!important} } @media (hover:none) and (pointer:coarse){ .pricing-card-3d:hover .pricing-card-inner, .scard:hover{transform:none!important} } /* ─── BUTTONS — keep readable below 380px ─── */ @media (max-width:380px){ .btn-p,.btn-s,.btn-xl,.btn-glow,.btn-oline{ padding:13px 20px!important;font-size:13.5px!important; } .hero-btns{flex-direction:column;width:100%} .hero-btns>*{width:100%;justify-content:center} } /* ─── FAQ — better tap zones + wrap fixes ─── */ @media (max-width:560px){ .faq-i summary,.faq-item .faq-q{ font-size:14.5px!important;line-height:1.45!important;gap:8px!important; } details.faq-i,.faq-item{padding:14px 16px!important} } /* ─── FOOTER — clean stack on mobile ─── */ @media (max-width:500px){ .f-ctas{flex-direction:column!important;text-align:center!important;padding:20px!important} .f-bot{flex-direction:column!important;align-items:flex-start!important;gap:10px!important;text-align:left!important} .f-leg{flex-wrap:wrap;gap:12px!important} } /* ─── TICKER — slow on small for readability ─── */ @media (max-width:520px){ .tki{animation-duration:42s!important} .tit{font-size:10.5px!important;padding:0 18px!important} } /* ─── HEADINGS — let big titles breathe on tiny screens ─── */ @media (max-width:540px){ .sec-h,.ctab-h{ letter-spacing:-1px!important;line-height:1.08!important; } .sec-tag{font-size:10px!important;padding:6px 14px!important;margin-bottom:12px!important} .sec-p{font-size:14px!important;line-height:1.7!important} } /* ─── SECTION padding mobile compaction ─── */ @media (max-width:540px){ section[id]{padding-left:16px!important;padding-right:16px!important} #services,#process,#testimonials,#timelines,#why-dd,#faq-home,#ctab{ padding-top:48px!important;padding-bottom:48px!important; } } /* ─── MOBILE CARDS depth shadow tone-down (kill GPU jank) ─── */ @media (max-width:540px){ .scard,.pricing-card,.pricing-card-inner,.solution-card, .why-i,.process-step,.tslide{ box-shadow:0 12px 28px rgba(0,0,0,.32)!important; transform:none!important; will-change:auto!important; } .scard:hover,.pricing-card:hover{transform:none!important} } /* ─── 3D HERO CARDS — stop animating on small screens (battery) ─── */ @media (max-width:540px){ .hc1,.hc2,.hc3{animation:none!important;transform:none!important;position:relative!important;width:100%!important;margin-bottom:12px} .hcw{height:auto!important;display:flex;flex-direction:column;gap:10px;perspective:none!important} .hc2,.hc3{top:auto!important;left:auto!important;right:auto!important;bottom:auto!important} } /* ─── CARDS reveal stagger — disable on mobile (slow + janky) ─── */ @media (max-width:540px){ .reveal{opacity:1!important;transform:none!important;transition:none!important} .reveal-scale{opacity:1!important;transform:none!important} } /* ─── KILL EXPENSIVE filters on weak GPUs ─── */ @media (max-width:540px){ .dd-aurora-bg{filter:blur(40px) saturate(1.1)!important;animation:none!important} .dd-grain::before,.dd-spotlight::after{display:none!important} *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .sec-glass,.sec-glass2{background:rgba(8,8,8,.86)!important} /* Kill conic gradients & ring animations — kills jank on cheap Android */ .dd-ring::before{display:none!important} /* Pause infinite animations on offscreen sections */ .dd-orb,.dd-kinetic,.dd-marquee-track{animation-play-state:running} } /* On mid-range phones, dial down (don't kill) heavy effects */ @media (max-width:768px){ /* Slow rAF-fed grain to a near-stop — keeps texture, kills GPU heat */ .dd-grain::before{animation-duration:8s!important} /* Aurora animation runs slower on mid devices */ .dd-aurora-bg{animation-duration:40s!important} } /* Render-perf: skip painting offscreen sections. Saves 40-70% paint time on long pages; auto re-paints when scrolled near. */ @media (prefers-reduced-motion:no-preference){ section[id]{ content-visibility:auto; contain-intrinsic-size:auto 800px; } /* Critical above-the-fold: never lazy */ #hero,nav,header,#loader,#dd-loader,#bg-canvas,#scroll-progress{ content-visibility:visible; } } /* ─── Cull the heavy fixed bg canvas particle system on mobile/touch. The page already shows aurora + grain — particles are visual noise and a major rAF/canvas cost on cheap phones. ─── */ @media (max-width:768px){ #bg-canvas,#lc{display:none!important} } @media (hover:none) and (pointer:coarse) and (max-width:1024px){ #bg-canvas{display:none!important} } /* ─── TAB iPad: keep glass blur on actual glass elements only, NOT on every element (universal selector caused jank on iPad). ─── */ @media (min-width:541px) and (max-width:1024px){ .sec-glass,.sec-glass2,.dd-glass,.dd-glass-gold,nav,header{ backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); } } /* ─── ORIENTATION lock helper for hero ─── */ @media (max-width:900px) and (orientation:landscape){ #hero{min-height:auto!important;padding-top:72px!important;padding-bottom:32px!important} .hero-h1{font-size:34px!important} .hcw{display:none!important} .hero-in{grid-template-columns:1fr!important;text-align:center} } /* ─── PREVENT DOUBLE TAP ZOOM ON BUTTONS ─── */ button,a,[role="button"],input[type=submit],input[type=button]{ touch-action:manipulation; } /* ─── LINKS underline on hover for accessibility ─── */ @media (hover:hover){ a:not(.btn-p):not(.btn-s):not(.btn-xl):not(.nav-btn):not(.fsoc):not(.f-ctas-btn):not([class^="btn-"]):hover{ text-decoration-color:currentColor; } } /* ─── PRINT — strip dark mode for print ─── */ @media print{ body{background:#fff!important;color:#000!important} nav,#ddW,#wa,#stt,#mob-nav,#loader,#bg-canvas{display:none!important} } /* ═══════════════════════════════════════════════════════════════════ PREMIUM POLISH — additive only, no functional override ═══════════════════════════════════════════════════════════════════ */ /* Scroll progress bar (modern browsers; degrades gracefully) */ @supports (animation-timeline:scroll()){ body::before{ content:'';position:fixed;top:0;left:0;right:0;height:2px;z-index:99999; background:linear-gradient(90deg,#10b981,#34d399,#d4af37,#f6d77a); transform-origin:0 50%;transform:scaleX(0); animation:dd-scroll-prog linear; animation-timeline:scroll(root); pointer-events:none; } @keyframes dd-scroll-prog{to{transform:scaleX(1)}} @media print{body::before{display:none}} } /* Magnetic-feel button hover (desktop only) — uses CSS hover scale, not JS */ @media (hover:hover) and (pointer:fine){ .btn-p,.btn-glow,.nav-btn,.f-ctas-btn{ transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s; } .btn-p:hover,.btn-glow:hover,.f-ctas-btn:hover{ transform:translateY(-3px) scale(1.02); } } /* Card hover — subtle perspective tilt without JS, desktop only */ @media (hover:hover) and (pointer:fine) and (min-width:1025px){ .why-i,.fst,.process-step,.ddtl-row{ transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s; } .why-i:hover{ transform:translateY(-4px); border-color:rgba(16,185,129,.42)!important; box-shadow:0 18px 42px rgba(0,0,0,.4),0 0 32px rgba(16,185,129,.08)!important; } } /* Subtle hairline glow under section headings on desktop */ @media (min-width:1025px){ .sec-h::after,.ctab-h::after{ content:'';display:block;width:42px;height:2px;margin-top:18px; background:linear-gradient(90deg,#10b981,#d4af37);border-radius:2px; opacity:.8; } [style*="text-align:center"] .sec-h::after, .ctab-in .ctab-h::after{margin-left:auto;margin-right:auto} } /* Fluid section dividers gently */ .gline{height:1px;opacity:.55} /* Image / video poster — soft load-in */ img[loading="lazy"]{ transition:opacity .42s ease,filter .42s ease; } img[loading="lazy"]:not([src]),img[loading="lazy"][data-loading]{ opacity:.4;filter:blur(8px); } /* Loader fail-safe: force fade after 4s no matter what JS does. The page-specific loader script handles the normal exit; this is the parachute if window.load never fires (slow CDN, blocked font, JS error). */ #loader,#dd-loader{animation:dd-loader-kill 4s linear forwards;animation-delay:.4s} @keyframes dd-loader-kill{ 0%{opacity:1} 85%{opacity:1} 100%{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.04)} } /* Once the JS adds .exit, honour the JS timing (don't re-run the kill animation) */ #loader.exit,#dd-loader.exit{animation:none;opacity:0;visibility:hidden;pointer-events:none} /* Global escape hatch — if something locks body overflow, this class (set by dd-mobile.js after a stuck-detection check) restores scroll. */ html.dd-scroll-unlock,html.dd-scroll-unlock body{ overflow:visible!important; overflow-x:clip!important; overflow-y:auto!important; position:static!important; height:auto!important; }