/* === Mac App Wrapper === */ .mac-app-wrapper { color: var(--text); background-color: var(--background); } /* === Mac App Banner === */ .mac-app-banner { padding: calc(var(--header-height) + var(--sp-6)) 0 var(--sp-8); position: relative; overflow: hidden; } .mac-app-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); z-index: 1; pointer-events: none; } .mac-app-banner .back-link { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; opacity: 0.9; font-weight: 500; margin-bottom: var(--sp-6); transition: all var(--transition-fast); } .mac-app-banner .back-link:hover { opacity: 1; transform: translateX(-5px); } [dir="rtl"] .mac-app-banner .back-link:hover { transform: translateX(5px); } .mac-app-header { display: flex; align-items: center; gap: var(--sp-8); position: relative; z-index: 2; justify-content: center; } .mac-app-icon { flex-shrink: 0; width: 128px; height: 128px; border-radius: 22%; overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); padding: 2px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .mac-app-icon:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } .mac-app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; } .mac-app-info { /* flex: 1; */ max-width: min(100%, 800px); } .mac-app-title { font-size: 2.5rem; font-weight: 700; margin-bottom: var(--sp-3); color: inherit; } .mac-app-description { font-size: 1.2rem; margin-bottom: var(--sp-6); opacity: 0.9; max-width: 650px; } .mac-app-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; z-index: 2; } .app-store-btn { display: block; transition: transform 0.3s ease; } .app-store-btn:hover { transform: translateY(-3px); } .app-store-btn img { height: 60px; width: auto; } /* === Mac App Preview === */ .mac-app-preview { padding: var(--sp-12) 0; background: linear-gradient(to bottom, var(--surface-2), var(--background)); position: relative; overflow: hidden; } .mac-preview-container { max-width: 900px; margin: 0 auto; position: relative; border-radius: 8px 8px 0 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); background: var(--surface); transform: perspective(1000px) rotateX(2deg); transition: transform 0.5s ease; overflow: hidden; } .mac-preview-container:hover { transform: perspective(1000px) rotateX(0); } .mac-window-chrome { height: 28px; background: linear-gradient(to bottom, #e8e8e8, #d8d8d8); border-radius: 8px 8px 0 0; display: flex; align-items: center; padding: 0 12px; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { .mac-window-chrome { background: linear-gradient(to bottom, #383838, #2a2a2a); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } .window-controls { display: flex; align-items: center; gap: 8px; } .control { width: 12px; height: 12px; border-radius: 50%; transition: transform 0.2s ease; } .control.close { background-color: #ff5f57; } .control.minimize { background-color: #ffbd2e; } .control.maximize { background-color: #28c940; } .control:hover { transform: scale(1.1); } .window-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; color: #3c3c3c; font-weight: 500; } @media (prefers-color-scheme: dark) { .window-title { color: #e0e0e0; } } .mac-app-preview-iframe { width: 100%; height: 550px; border: none; display: block; background: var(--surface); } .mac-reflection { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0.05)); pointer-events: none; z-index: 2; } /* === Mac App Features === */ .mac-app-features { padding: var(--sp-16) 0; background: var(--background); } .mac-app-features h2 { text-align: center; margin-bottom: var(--sp-12); font-size: 2.5rem; } .mac-feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 12px; background: var(--surface); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); border: 1px solid var(--border); overflow: hidden; } .mac-feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .mac-feature-card .feature-icon { font-size: 2.5rem; margin-bottom: var(--sp-4); background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .mac-feature-card .feature-title { font-size: 1.5rem; margin-bottom: var(--sp-3); } .mac-feature-card .feature-description { color: var(--text-secondary); } /* === Mac App Specs === */ .mac-app-specs { padding: var(--sp-16) 0; background: var(--surface-2); } .mac-app-specs h2 { text-align: center; margin-bottom: var(--sp-12); font-size: 2.5rem; } .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-6); } .spec-item { background: var(--surface); border-radius: 12px; padding: var(--sp-6); box-shadow: var(--shadow); display: flex; align-items: center; gap: var(--sp-4); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border); } .spec-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .spec-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--primary); border-radius: 12px; flex-shrink: 0; } @media (prefers-color-scheme: dark) { .spec-icon { color: var(--accent); } } .spec-info { flex: 1; } .spec-info h3 { font-size: 1.1rem; margin-bottom: var(--sp-1); color: var(--text); } .spec-info p { color: var(--text-secondary); font-size: 0.95rem; } /* === Mac App CTA Section === */ .mac-app-cta-section { text-align: center; padding: var(--sp-16) 0; background: linear-gradient(135deg, var(--accent-soft), rgba(121, 40, 202, 0.2)); } .mac-app-cta-section h2 { font-size: 2.5rem; margin-bottom: var(--sp-4); } .mac-app-cta-section p { font-size: 1.2rem; margin-bottom: var(--sp-8); color: var(--text-secondary); } .mac-download-btn { font-size: 1.2rem; padding: 1rem 2.5rem; border-radius: var(--border-radius); box-shadow: 0 10px 20px rgba(0, 118, 255, 0.3); position: relative; overflow: hidden; } .mac-download-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0), rgba( 255, 255, 255, 0.2 )); opacity: 0; transition: opacity 0.3s ease; } /* Animation ready states */ .mac-app-header, .mac-feature-card, .spec-item, .mac-app-cta-section { will-change: opacity, transform; } /* Enhanced hover effects for app pages */ .mac-app-icon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease; } .mac-app-icon:hover { transform: scale(1.05) translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .feature-icon { transition: transform 0.3s ease; } .mac-feature-card:hover .feature-icon { transform: scale(1.2) rotate(5deg) !important; } .mac-download-btn { position: relative; overflow: hidden; } .mac-download-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0)); transform: translateX(-100%); transition: transform 1s ease; } .mac-download-btn:hover::after { transform: translateX(100%); } @media (max-width: 768px) { .mac-app-banner { padding: calc(var(--header-height) + var(--sp-4)) 0 var(--sp-6); padding-inline: var(--sp-6); } .mac-app-icon { width: 100px; height: 100px; } .mac-app-title { font-size: 2rem; } .mac-app-description { font-size: 1.1rem; } .mac-app-preview { padding: var(--sp-10) 0; } .mac-preview-container { max-width: 800px; } .mac-app-preview-iframe { height: 450px; } .mac-app-features h2 { font-size: 2.2rem; } .mac-feature-card .feature-icon { width: 50px; height: 50px; } .mac-feature-card .feature-title { font-size: 1.3rem; } .mac-feature-card .feature-description { font-size: 1rem; } .mac-app-specs h2 { font-size: 2.2rem; } .mac-app-specs .spec-item { padding: var(--sp-4); } .mac-app-specs .spec-icon { width: 40px; height: 40px; } .mac-app-specs .spec-info h3 { font-size: 1rem; } .mac-app-specs .spec-info p { font-size: 0.9rem; } .mac-app-cta-section h2 { font-size: 2.2rem; } .mac-app-cta-section p { font-size: 1.1rem; } .mac-download-btn { font-size: 1.1rem; padding: 0.8rem 2.2rem; } .mac-app-header { flex-direction: column; gap: var(--sp-6); } .mac-app-card-actions { flex-direction: column !important; gap: var(--sp-4); } .mac-app-actions { justify-content: center; } } /* Modern Apple-inspired Heading Design */ .mac-app-features h2 { /* Base styles */ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 3rem; position: relative; /* Modern gradient text */ background: linear-gradient(135deg, #000000 0%, #434343 50%, #000000 100%); background-clip: text; -webkit-background-clip: text; color: transparent; /* Subtle animation on hover */ transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; } /* Pseudo-element for subtle underline accent */ .mac-app-features h2::after { content: ''; position: absolute; left: 50%; bottom: -0.75rem; width: 3rem; height: 0.25rem; background: linear-gradient(90deg, #0071e3, #2dd4bf); border-radius: 4px; transform: translateX(-50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Hover effect */ .mac-app-features h2:hover { transform: translateY(-2px); } .mac-app-features h2:hover::after { width: 5rem; } /* Dark mode support */ @media (prefers-color-scheme: dark) { .mac-app-features h2 { background: linear-gradient(135deg, #f5f5f7 0%, #a1a1a6 50%, #f5f5f7 100%); background-clip: text; -webkit-background-clip: text; } .mac-app-features h2::after { background: linear-gradient(90deg, #2997ff, #5ac8fa); } } /* RTL Support */ [dir="rtl"] .mac-app-features h2 { direction: rtl; } [dir="rtl"] .mac-app-features h2::after { right: 50%; left: auto; transform: translateX(50%); } /* Responsive adjustments */ @media (max-width: 768px) { .mac-app-features h2 { margin-bottom: 2.5rem; } .mac-app-features h2::after { width: 2.5rem; height: 0.2rem; } .mac-app-features h2:hover::after { width: 4rem; } } /* Alternative approach with text features - add class "alt-style" to use */ .mac-app-features h2.alt-style { background: none; color: var(--text-color, #1d1d1f); font-weight: 600; position: relative; padding-bottom: 1.5rem; overflow: visible; } .mac-app-features h2.alt-style::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,113,227,0.1), rgba(45,212,191,0.1)); filter: blur(40px); z-index: -1; opacity: 0.7; border-radius: 50%; transform: translateY(20%) scale(0.5); transition: transform 0.4s ease, opacity 0.4s ease; } .mac-app-features h2.alt-style:hover::before { transform: translateY(20%) scale(0.6); opacity: 0.9; } /* Updated section styles to complement the new heading */ .mac-app-features { padding: 6rem 0; position: relative; } .mac-app-features::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(0,113,227,0.05), transparent 60%), radial-gradient(circle at bottom left, rgba(45,212,191,0.05), transparent 60%); z-index: -1; } @media (prefers-color-scheme: dark) { .mac-app-features h2.alt-style { color: var(--text-color, #f5f5f7); } .mac-app-features h2.alt-style::before { background: linear-gradient(90deg, rgba(41,151,255,0.2), rgba(90,200,250,0.2)); } .mac-app-features::before { background: radial-gradient(circle at top right, rgba(41,151,255,0.1), transparent 60%), radial-gradient(circle at bottom left, rgba(90,200,250,0.1), transparent 60%); } } /* Apple official device bezel */ .preview-container { position: relative; width: 100%; max-width: min(600px, 90vw); height: auto; filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18)); transition: all var(--duration-slow) var(--ease-out); margin: 0 auto; } .preview-container:hover { transform: translateY(-6px); filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.3)) drop-shadow(0 12px 32px rgba(0, 0, 0, 0.22)); } @media (prefers-color-scheme: dark) { .preview-container { filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); } .preview-container:hover { filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.6)) drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5)); } } /* Device bezel image */ .device-bezel { width: 100%; height: auto; display: block; position: relative; z-index: 2; pointer-events: none; user-select: none; } /* Screen content area - adjust percentages based on your bezel (1350x2760px) */ .device-screen { position: absolute; left: 10%; right: 10%; bottom: 9.5%; overflow: hidden; background: #000; z-index: 1; top: 10.2%; }