/* App Wrapper & Layout Structure */ .app-wrapper { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height)); position: relative; isolation: isolate; margin-bottom: var(--sp-16); font-family: var(--font-body); } /* Elegant Header Banner */ .app-banner { padding: var(--sp-12) 0 var(--sp-8); position: relative; overflow: hidden; text-align: center; background-size: 400% 400%; animation: gradientShift 15s ease infinite; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Create a linear gradient that uses the background color as a base */ background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.2), var(--app-bg) 50%, rgba(0, 0, 0, 0.1) ); /* Make sure the gradient is applied on top of the background color */ background-blend-mode: overlay; } .app-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 25%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 25%); z-index: 0; pointer-events: none; mix-blend-mode: overlay; } @media(prefers-color-scheme: dark) { .app-banner { background-image: linear-gradient( 135deg, rgba(85, 85, 85, 0.8), var(--app-bg) 5%, rgba(38, 38, 38, 0.6) ); mix-blend-mode: overlay; animation: gradientShift 15s ease infinite; background-size: 400% 400%; } .app-banner::before { background-image: radial-gradient(circle at 20% 20%, rgb(0 0 0 / 5%) 0%, #0000004f 25%), radial-gradient(circle at 80% 80%, rgb(0 0 0 / 5%) 0%, transparent 25%); } } .app-banner .container { position: relative; z-index: 1; } /* Premium Typography */ .app-title { font-size: clamp(2.25rem, 4vw, 3.5rem); margin-bottom: var(--sp-4); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, text-shadow 0.3s ease; position: relative; display: inline-block; } .app-title::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 40%; height: 3px; background: linear-gradient(var(--gradient-direction), var(--primary), var(--secondary)); border-radius: 2px; transition: width 0.3s ease; } .app-wrapper:hover .app-title::after { width: 60%; } .app-description { font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 800px; margin: 0 auto var(--sp-8); opacity: 0.9; line-height: 1.6; font-weight: 400; transition: opacity 0.3s ease; } /* Luxury Star Ratings */ .app-rating { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-6); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: var(--sp-3) var(--sp-6); border-radius: 100px; width: fit-content; margin-left: auto; margin-right: auto; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .app-rating:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .rating-stars { display: flex; gap: 2px; } .star { font-size: 1.5rem; color: rgba(0, 0, 0, 0.15); transition: transform 0.2s ease, color 0.2s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); } .star.filled { color: gold; text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); } .star.half-filled { position: relative; color: rgba(0, 0, 0, 0.15); } .star.half-filled::before { content: '★'; position: absolute; color: gold; width: 50%; overflow: hidden; text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); } .rating-value { font-size: 1.25rem; font-weight: 700; margin: 0 var(--sp-1); } .rating-count { font-size: 0.9rem; opacity: 0.8; font-style: italic; } /* Deluxe Language Toggle */ .app-banner .language-switch { position: absolute; top: var(--sp-6); right: var(--sp-6); background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: inherit; padding: 0.6rem 1.25rem; border-radius: var(--border-radius); font-weight: 600; font-size: 0.95rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); transition: all var(--transition-normal); z-index: 10; display: flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.5px; } .app-banner .language-switch:hover, .app-banner .language-switch:focus { transform: translateY(-3px) scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); background: linear-gradient(var(--gradient-secondary), var(--primary), var(--secondary)); color: white; border-color: transparent; } [dir="rtl"] .app-banner .language-switch { right: auto; left: var(--sp-6); } /* Premium Iframe Container */ .app-iframe-container { width: 100%; height: 80vh; min-height: 600px; position: relative; overflow: hidden; background: var(--surface); border-radius: var(--border-radius); margin: 0 auto; max-width: 1600px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); /* transition: box-shadow 0.5s ease, transform 0.5s ease; */ transform-origin: center center; z-index: 2; margin-top: var(--sp-12); transform: translateY(30px); transition: all 0.3s ease; border: 1px solid var(--border); max-width: min(100%, 1200px); } .app-iframe-container:hover { box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05); } .app-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /* transition: opacity 0.3s ease; */ } /* Luxury Loading Animation */ .iframe-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); z-index: 1; /* border-radius: var(--border-radius-lg); */ /* transition: opacity 0.5s ease; */ } .app-iframe-container.animate-in { transform: translateY(0); transition: all 0.5s ease; } .loader-spinner { width: 60px; height: 60px; display: inline-block; position: relative; margin-bottom: var(--sp-6); } .loader-spinner::before, .loader-spinner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; animation: pulse 2s linear infinite; } .loader-spinner::before { border: 3px solid rgba(0, 0, 0, 0.1); } .loader-spinner::after { border: 3px solid transparent; border-top-color: var(--primary); animation: spin 1s linear infinite; } .iframe-loader p { font-size: 1.1rem; font-weight: 500; background: linear-gradient(var(--gradient-direction), var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-top: var(--sp-2); } /* Premium Feature Cards Section */ .app-features { padding: var(--sp-24) 0 var(--sp-16); background: var(--surface-2); position: relative; margin-top: var(--sp-12); border-radius: var(--border-radius-lg); overflow: hidden; } .app-features::before { content: ''; position: absolute; top: -100px; left: 0; width: 100%; height: 180px; background: linear-gradient(to bottom, transparent, var(--surface-2)); z-index: 1; } .app-features h2 { text-align: center; margin-bottom: var(--sp-16); font-size: 2.5rem; font-weight: 700; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); } [dir="rtl"] .app-features h2 { left: auto; right: 50%; transform: translateX(50%); } [dir="rtl"] .app-features h2::after { left: auto; right: 30%; } .app-features h2::after { content: ''; position: absolute; bottom: -15px; left: 30%; width: 40%; height: 4px; background: linear-gradient(var(--gradient-direction), var(--primary), var(--secondary)); border-radius: 2px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-8); padding: 0 var(--sp-6); } .feature-card { background: var(--surface); border-radius: var(--border-radius); padding: var(--sp-8); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.3s ease; position: relative; overflow: hidden; z-index: 1; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, rgba(var(--primary-rgb), 0.05), rgba(var(--secondary-rgb), 0.05)); z-index: -1; opacity: 0; transition: opacity 0.5s ease; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); } .feature-card:hover::before { opacity: 1; } .feature-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--primary); border-radius: 20px; margin-bottom: var(--sp-6); transition: transform 0.5s ease, background 0.3s ease, color 0.3s ease; box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .feature-icon::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); opacity: 0; transition: opacity 0.5s ease; transform: scale(0.5); } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); background: linear-gradient(var(--gradient-secondary), var(--primary), var(--secondary)); color: white; } .feature-card:hover .feature-icon::after { opacity: 1; transform: scale(1); } .feature-icon svg { width: 32px; height: 32px; stroke-width: 2; } .feature-title { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--sp-4); position: relative; padding-bottom: var(--sp-2); } .feature-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(var(--gradient-direction), var(--primary), var(--secondary)); border-radius: 2px; transition: width 0.3s ease; } [dir="rtl"] .feature-title::after { left: auto; right: 0; } .feature-card:hover .feature-title::after { width: 60px; } .feature-description { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; } /* Deluxe CTA Section */ .app-cta-section { padding: var(--sp-20) 0; text-align: center; background: linear-gradient(var(--gradient-secondary), rgba(var(--primary-rgb), 0.1), rgba(var(--secondary-rgb), 0.1)); position: relative; overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .app-cta-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(var(--primary-rgb), 0.1) 0%, transparent 25%), radial-gradient(circle at 80% 80%, rgba(var(--secondary-rgb), 0.1) 0%, transparent 25%); z-index: 0; opacity: 0.8; } .app-cta-section .container { position: relative; z-index: 1; } .app-cta-section h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: var(--sp-6); background: linear-gradient(var(--gradient-direction), var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .app-cta-section p { max-width: 700px; margin: 0 auto var(--sp-8); font-size: 1.25rem; line-height: 1.6; color: var(--text-secondary); } .app-cta-section .btn-primary { padding: 0.9rem 2.5rem; font-size: 1.1rem; border-radius: var(--border-radius); background: linear-gradient(var(--gradient-secondary), var(--primary), var(--secondary)); color: white; font-weight: 600; box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3); transition: all 0.3s ease; display: inline-flex; align-items: center; gap: var(--sp-3); position: relative; overflow: hidden; } .app-cta-section .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .app-cta-section .btn-primary:hover { transform: translateY(-5px); box-shadow: 0 15px 25px rgba(var(--primary-rgb), 0.4); } .app-cta-section .btn-primary:hover::before { transform: translateX(100%); } .app-cta-section .btn-primary svg { width: 20px; height: 20px; transition: transform 0.3s ease; } .app-cta-section .btn-primary:hover svg { transform: translateX(4px); } [dir="rtl"] .app-cta-section .btn-primary:hover svg { transform: translateX(-4px) scaleX(-1); } .back-link { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: inherit; text-decoration: none; opacity: 0.85; transition: all 0.25s ease-in-out; position: relative; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); max-width: fit-content; position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 10; } [dir="rtl"] .back-link { left: auto; right: var(--sp-4); } .back-link:hover { opacity: 1; transform: translateX(-3px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .back-link:active { transform: translateX(-1px) scale(0.98); } .back-link svg { transition: transform 0.2s ease; } .back-link:hover svg { transform: translateX(-2px); } [dir="rtl"] .back-link svg { transform: rotate(180deg); } [dir="rtl"] .back-link:hover { transform: translateX(3px); } [dir="rtl"] .back-link:hover svg { transform: rotate(180deg) translateX(-2px); } /* Custom Animations */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(0.8); opacity: 0.3; } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Smooth Animation for Feature Cards */ .feature-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .feature-animate.animate-in { opacity: 1; transform: translateY(0); } /* Dark Mode Enhancements */ @media (prefers-color-scheme: dark) { .star { color: rgba(255, 255, 255, 0.15); } .star.half-filled { color: rgba(255, 255, 255, 0.15); } .star.filled { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .feature-icon { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } .iframe-loader { background: var(--surface); } .loader-spinner::before { border-color: rgba(255, 255, 255, 0.1); } .loader-spinner::after { border-top-color: var(--accent); } .app-cta-section { background: linear-gradient(var(--gradient-secondary), rgba(var(--primary-rgb), 0.05), rgba(var(--secondary-rgb), 0.05)); } .feature-card::before { background: linear-gradient(to bottom right, rgba(var(--primary-rgb), 0.02), rgba(var(--secondary-rgb), 0.02)); } } /* Responsive Refinements */ @media (max-width: 992px) { .app-iframe-container { height: 75vh; min-height: 500px; } .features-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); } .app-features h2 { font-size: 2.2rem; } .app-cta-section h2 { font-size: 2.2rem; } } @media (max-width: 768px) { .app-iframe-container { height: 70vh; min-height: 450px; border-radius: var(--border-radius); } .app-banner { padding: var(--sp-8) 0 var(--sp-6); } .app-features, .app-cta-section { padding: var(--sp-12) 0; } .app-banner .language-switch { top: var(--sp-4); right: var(--sp-4); } [dir="rtl"] .app-banner .language-switch { left: var(--sp-4); right: auto; } .feature-card { padding: var(--sp-6); } .feature-icon { width: 60px; height: 60px; } .app-title { font-size: clamp(2rem, 4vw, 2.5rem); } } @media (max-width: 576px) { .app-iframe-container { height: 60vh; min-height: 350px; } .features-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .app-cta-section { padding: var(--sp-12) var(--sp-4); } .app-features h2, .app-cta-section h2 { font-size: 1.8rem; } .app-cta-section p { font-size: 1.1rem; } .app-cta-section .btn-primary { justify-content: center; } .app-title::after { width: 60%; } } /* Modern Print Styles */ @media print { .app-banner .language-switch, .app-features, .app-cta-section { display: none !important; } .app-iframe-container { height: auto; min-height: 0; box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; } .app-iframe { position: static; height: 600px; } .iframe-loader { display: none; } }