/* ============================================ AR — 3D / Augmented Reality Button & Modal ============================================ */ /* ── 3D Button on card ── Sits bottom-left of .item-img-wrap (inside the image container). Hidden on desktop — shown only on touch/mobile devices. */ .ar-btn { /* position inside the image wrap */ position: absolute; bottom: 8px; left: 8px; /* LTR bottom-left; RTL dir is on but left still = left */ /* layout */ display: none; /* hidden by default — shown only on mobile (see below) */ align-items: center; gap: 4px; /* appearance */ background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 100px; padding: 5px 10px 5px 8px; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 5; /* transitions */ transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.15s ease; transform-origin: bottom left; -webkit-user-select: none; user-select: none; } /* Show only on touch/mobile */ @media (hover: none) and (pointer: coarse) { .ar-btn { display: flex; } } /* Also show on narrow screens (catch desktop emulation & small tablets) */ @media (max-width: 767px) { .ar-btn { display: flex; } } .ar-btn:active { transform: scale(0.88); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); } /* Icon — the box/cube SVG */ .ar-btn-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #7FA99B; /* --sage-dark */ flex-shrink: 0; } .ar-btn-icon svg { width: 16px; height: 16px; } /* Label */ .ar-btn-label { font-family: 'Comfortaa', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: #1A1A1A; line-height: 1; } /* Ripple on tap */ .ar-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(136,181,168,0.35) 0%, transparent 70%); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .ar-btn:active::after { opacity: 1; transform: scale(1.4); } /* ════════════════════════════════════════════ AR MODAL (model-viewer fallback + WebXR) ════════════════════════════════════════════ */ #ar-modal { display: none; position: fixed; inset: 0; z-index: 300; align-items: flex-end; justify-content: center; } #ar-modal.ar-modal-open { display: flex; } /* Backdrop */ .ar-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: arBackdropIn 0.3s ease both; } @keyframes arBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes arBackdropOut { to { opacity: 0; } } /* Sheet */ .ar-modal-sheet { position: relative; z-index: 1; width: 100%; max-width: 540px; height: 86dvh; min-height: 420px; background: #0f0f0f; border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column; animation: arSheetUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.4); } /* Gradient top strip */ .ar-modal-sheet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to left, #88B5A8, #F5DDD8, #88B5A8); background-size: 200% 100%; animation: arGradientSlide 3s linear infinite; z-index: 10; pointer-events: none; } @keyframes arGradientSlide { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } @keyframes arSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes arSheetDown { to { transform: translateY(110%); } } #ar-modal.ar-closing .ar-modal-sheet { animation: arSheetDown 0.28s cubic-bezier(0.4,0,1,1) both; } #ar-modal.ar-closing .ar-modal-backdrop { animation: arBackdropOut 0.28s ease both; } /* Handle */ .ar-modal-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; } /* Header */ .ar-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; flex-shrink: 0; } .ar-modal-title { font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.02em; } .ar-modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; transition: background 0.15s, transform 0.15s; } .ar-modal-close:active { background: rgba(255,255,255,0.2); transform: scale(0.88); } /* model-viewer container */ .ar-modal-viewer-wrap { flex: 1; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #1a2a28 0%, #0a0f0e 100%); } /* Progress bar */ .ar-mv-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); transition: opacity 0.4s; z-index: 5; } .ar-mv-progress-bar { height: 100%; width: 0%; background: linear-gradient(to right, #88B5A8, #B8D4CD); transition: width 0.2s ease; border-radius: 0 2px 2px 0; } /* AR launch button inside model-viewer */ .ar-mv-launch-btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #88B5A8, #7FA99B); color: #fff; border: none; border-radius: 100px; padding: 13px 26px; font-size: 0.92rem; font-weight: 700; font-family: var(--font-fa, sans-serif); cursor: pointer; box-shadow: 0 4px 20px rgba(136,181,168,0.5), 0 1px 0 rgba(255,255,255,0.15) inset; transition: transform 0.18s cubic-bezier(0.34,1.56,.64,1), box-shadow 0.18s; white-space: nowrap; z-index: 5; letter-spacing: 0.02em; } .ar-mv-launch-btn:active { transform: translateX(-50%) scale(0.94); box-shadow: 0 2px 10px rgba(136,181,168,0.4); } .ar-mv-launch-btn svg { stroke: #fff; flex-shrink: 0; } /* ── Order bar — bottom of AR modal ── */ .ar-order-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 20px; gap: 12px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); animation: arOrderBarIn 0.4s 0.15s cubic-bezier(0.22,1,0.36,1) both; } @keyframes arOrderBarIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* قیمت */ .ar-order-price { display: flex; flex-direction: column; gap: 3px; flex: 1; } .ar-order-price-old { font-size: 0.7rem; color: rgba(255,255,255,0.3); text-decoration: line-through; font-family: var(--font-fa, sans-serif); } .ar-order-price-new { font-size: 1.05rem; font-weight: 900; color: #fff; font-family: var(--font-fa, sans-serif); letter-spacing: -0.01em; } /* دکمه جزئیات */ .ar-order-btn { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #88B5A8, #7FA99B); color: #fff; border: none; border-radius: 100px; padding: 13px 22px; font-size: 0.88rem; font-weight: 800; font-family: var(--font-fa, sans-serif); cursor: pointer; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 18px rgba(136,181,168,0.45), 0 1px 0 rgba(255,255,255,0.15) inset; transition: transform 0.18s cubic-bezier(0.34,1.56,.64,1), box-shadow 0.18s ease; position: relative; overflow: hidden; } /* shimmer روی دکمه */ .ar-order-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60% ); background-size: 200% 100%; animation: arBtnShimmer 2.4s ease-in-out infinite; pointer-events: none; } @keyframes arBtnShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ar-order-btn:active { transform: scale(0.94); box-shadow: 0 2px 8px rgba(136,181,168,0.35); } .ar-modal-hint { padding: 6px 16px 10px; text-align: center; font-size: 0.6rem; color: rgba(255,255,255,0.22); letter-spacing: 0.03em; flex-shrink: 0; } /* ── model-viewer internal poster & slot styles ── */ /* Poster image shown while GLB loads — blurred thumbnail */ model-viewer::part(default-poster) { background-size: cover; background-position: center; filter: blur(8px) brightness(0.6); transform: scale(1.05); } /* Hide the default AR button — we use our custom one */ model-viewer::part(default-ar-button) { display: none; } /* Smooth reveal when model finishes loading */ model-viewer { --poster-color: transparent; transition: opacity 0.4s ease; } /* Loading spinner overlay (shown via ar-status attribute) */ .ar-mv-loading-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; opacity: 1; transition: opacity 0.5s ease; } .ar-mv-loading-overlay.hidden { opacity: 0; } .ar-mv-spinner { width: 36px; height: 36px; border: 3px solid rgba(136,181,168,0.2); border-top-color: #88B5A8; border-radius: 50%; animation: arSpinnerRot 0.8s linear infinite; } @keyframes arSpinnerRot { to { transform: rotate(360deg); } } .ar-mv-loading-text { font-size: 0.7rem; color: rgba(255,255,255,0.45); letter-spacing: 0.05em; }