/* ===================================================== ShailShare App Promotion Modal — Standalone CSS Works with Bootstrap 3, 4, and 5 Drop this file in public/css/shailshare-modal.css and link it in the layout ===================================================== */ /* ── Bootstrap 3 vertical centering (no modal-dialog-centered) ── */ .shailshare-modal-dialog { margin: 30px auto; } @media (min-width: 768px) { .shailshare-modal-dialog { margin: 5% auto; } } /* Force above all other modals and overlays */ #shailshare-app-modal { z-index: 99999 !important; } #shailshare-app-modal + .modal-backdrop, .modal-backdrop.shailshare-backdrop { z-index: 99998 !important; } /* ── Bootstrap-version-safe modal shell ────────────── */ /* Ensures the modal-content has relative positioning for the absolute close button, regardless of BS version */ .shailshare-app-modal.modal-content { border-radius: 24px; overflow: visible; border: none; box-shadow: 0 20px 60px rgba(20, 184, 166, 0.2); -webkit-clip-path: inset(0 0 0 0 round 24px); clip-path: inset(0 0 0 0 round 24px); position: relative; } /* ── Close button ───────────────────────────────────── */ .btn-close-shailshare { position: absolute; top: 15px; right: 15px; z-index: 10; background: rgba(255, 255, 255, 0.9); border: none; width: 40px; height: 40px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); line-height: 1; padding: 0; } .btn-close-shailshare i { font-size: 24px; color: #14b8a6; } .btn-close-shailshare:hover { background: #14b8a6; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .btn-close-shailshare:hover i { color: #ffffff; } /* ── Row/columns reset for BS3/4/5 ─────────────────── */ .shailshare-app-modal .row { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; } /* ── Right panel — image slider ─────────────────────── */ .shailshare-modal-right { height: 100%; min-height: 500px; background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; position: relative; overflow: visible; border-radius: 0 24px 24px 0; margin-left: -40px; z-index: 1; } /* Left-edge fade */ .shailshare-modal-right::before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 100%; background: linear-gradient(to right, #ffffff 0%, transparent 100%); z-index: 3; pointer-events: none; } /* Image slider */ .shailshare-screen-slider { position: relative; -webkit-flex: 1; flex: 1; overflow: hidden; border-radius: 0 24px 24px 0; } .shailshare-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 1.2s ease; } .shailshare-slide.active { opacity: 1; } .shailshare-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Dots */ .shailshare-slider-dots { display: -webkit-flex; display: flex; gap: 8px; -webkit-justify-content: center; justify-content: center; position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2; } .shailshare-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.3s, transform 0.3s; display: inline-block; } .shailshare-dot.active { background: #ffffff; -webkit-transform: scale(1.3); transform: scale(1.3); } /* ── Content panel ──────────────────────────────────── */ .shailshare-app-content { padding: 50px 40px; text-align: center; } /* Pulse keyframe for icon */ @-webkit-keyframes shailshare-pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 8px 20px rgba(20, 184, 166, 0.3); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0 12px 30px rgba(20, 184, 166, 0.45); } } @keyframes shailshare-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(20, 184, 166, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 12px 30px rgba(20, 184, 166, 0.45); } } .shailshare-app-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #14b8a6, #06b6d4); border-radius: 20px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 0 auto 22px; box-shadow: 0 8px 20px rgba(20, 184, 166, 0.3); -webkit-animation: shailshare-pulse 2s infinite; animation: shailshare-pulse 2s infinite; padding: 10px; } .shailshare-app-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .shailshare-app-content h2 { font-size: 30px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; } .shailshare-app-subtitle { font-size: 17px; font-weight: 600; color: #14b8a6; margin-bottom: 20px; } .shailshare-app-description { background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(6, 182, 212, 0.05)); padding: 18px 22px; border-radius: 16px; border: 1px solid rgba(20, 184, 166, 0.1); margin-bottom: 22px; text-align: left; } .shailshare-app-description p { font-size: 14px; color: #444; margin: 0; line-height: 1.6; } /* ── Feature list ───────────────────────────────────── */ .shailshare-features-list { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; } .shailshare-features-list li { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #333; padding: 7px 0; border-bottom: 1px solid rgba(20, 184, 166, 0.08); } .shailshare-features-list li:last-child { border-bottom: none; } .shailshare-features-list li i { font-size: 18px; color: #14b8a6; -webkit-flex-shrink: 0; flex-shrink: 0; } /* ── Store buttons ──────────────────────────────────── */ .shailshare-store-btns { display: -webkit-flex; display: flex; gap: 12px; margin-bottom: 18px; } .shailshare-store-btn { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 50px; text-decoration: none !important; transition: all 0.35s ease; color: white !important; } .shailshare-store-btn:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); color: white !important; text-decoration: none !important; } .shailshare-apple { background: #000000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .shailshare-google { background: linear-gradient(135deg, #14b8a6, #06b6d4); box-shadow: 0 6px 18px rgba(20, 184, 166, 0.3); } .store-svg { width: 24px; height: 24px; -webkit-flex-shrink: 0; flex-shrink: 0; } .store-btn-text { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; line-height: 1.2; } .store-label { font-size: 10px; opacity: 0.85; font-weight: 400; } .store-name { font-size: 14px; font-weight: 700; } /* ── Maybe Later ────────────────────────────────────── */ .shailshare-maybe-later { background: none; border: none; color: #888; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 8px; text-decoration: underline; transition: color 0.2s; display: inline-block; } .shailshare-maybe-later:hover { color: #14b8a6; } /* ── Responsive ─────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 992px) { #shailshare-app-modal .modal-dialog { max-width: 520px; width: 90%; } .shailshare-modal-right { display: none; } .shailshare-app-modal .col-md-7 { width: 100%; max-width: 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; } } @media (max-width: 767px) { .shailshare-modal-right { display: none; } .shailshare-app-modal .col-md-7 { width: 100%; max-width: 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; } .shailshare-app-content { padding: 30px 22px; } .shailshare-app-content h2 { font-size: 24px; } .shailshare-store-btns { -webkit-flex-direction: column; flex-direction: column; } .shailshare-store-btn { -webkit-justify-content: center; justify-content: center; } }