/* ── Sintagi promotional website — custom styles ── */ /* Smooth scroll is handled by Tailwind's scroll-smooth class on */ nav ul, footer ul { list-style: none; margin: 0; padding: 0; } footer a, nav a { text-decoration: none; } /* ─── Floating pill nav ─── */ .floating-nav { pointer-events: none; } .floating-nav-shell { pointer-events: auto; position: relative; width: min(calc(100vw - 2rem), 68rem); border: 1px solid rgba(229, 231, 235, 0.9); background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-radius: 999px; transition: width 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .floating-nav.is-scrolled .floating-nav-shell { background: rgba(255, 255, 255, 0.95); border-color: rgba(5, 150, 105, 0.15); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 0 32px -20px rgba(5, 150, 105, 0.35); width: min(calc(100vw - 2rem), 72rem); } .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, opacity 0.25s ease; opacity: 0; } .mobile-menu.is-open { max-height: 22rem; opacity: 1; } .nav-link.is-active { color: #059669; font-weight: 600; } @media (max-width: 767px) { .floating-nav { padding-left: 0.5rem; padding-right: 0.5rem; } .floating-nav-shell { width: 100%; border-radius: 1.25rem; } .floating-nav.is-scrolled .floating-nav-shell { width: 100%; } } @media (min-width: 767px) { .floating-nav.is-scrolled { top: 24px !important; } } /* ─── Scroll progress bar ─── */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 0%; background: linear-gradient(90deg, #059669, #34d399); box-shadow: 0 0 18px rgba(5, 150, 105, 0.4); transition: width 0.1s linear; } /* ─── Scroll reveal ─── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal.delay-1 { transition-delay: 0.1s; } .reveal.delay-2 { transition-delay: 0.2s; } .reveal.delay-3 { transition-delay: 0.3s; } /* ─── Feature card hover ─── */ .feature-card { transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .feature-card:hover { transform: translateY(-5px); border-color: rgba(5, 150, 105, 0.25); box-shadow: 0 20px 56px -32px rgba(5, 150, 105, 0.5); } /* ─── Screenshot 3D tilt ─── */ .screenshot-wrap { perspective: 1200px; } .screenshot-card { border-radius: 12px; transition: transform 0.4s ease, box-shadow 0.4s ease; transform: rotateX(3deg) scale(0.98); transform-origin: center top; box-shadow: 0 24px 72px -12px rgba(15, 23, 42, 0.15); } .screenshot-card:hover { transform: rotateX(0deg) scale(1); box-shadow: 0 32px 80px -12px rgba(15, 23, 42, 0.2); } /* ─── Legal pages ─── */ .legal-layout { display: grid; gap: 2rem; } @media (min-width: 1024px) { .legal-layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } } .legal-toc { position: sticky; top: 5rem; display: none; border: 1px solid rgba(229, 231, 235, 0.9); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); padding: 1rem; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } @media (min-width: 1024px) { .legal-toc { display: block; } } .legal-toc a { display: block; border-radius: 0.5rem; padding: 0.4rem 0.6rem; color: #6b7280; font-size: 0.8125rem; line-height: 1.4; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .legal-toc a:hover, .legal-toc a.is-active { background: #ecfdf5; color: #059669; } .legal-orbit { position: fixed; border-radius: 999px; border: 1px solid rgba(5, 150, 105, 0.08); pointer-events: none; z-index: 0; opacity: 0.5; } .legal-orbit::after { position: absolute; content: ''; border-radius: inherit; width: 0.42rem; height: 0.42rem; top: 50%; left: 50%; background: #059669; box-shadow: 0 0 18px rgba(5, 150, 105, 0.45); transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbit-r)); animation: orbitDot var(--orbit-dur, 18s) linear infinite, orbitPulse 2s ease-in-out infinite; } main, footer { position: relative; z-index: 1; } @keyframes menuDrop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Simple fade-in for section headings when they scroll into view */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease both; } /* Hero browser frame — perspective tilt with hover ease-back */ .hero-frame { transform: rotateX(-6deg) scale(0.97); transform-origin: center center; transition: transform 0.4s ease, box-shadow 0.4s ease; } .hero-frame:hover { transform: rotateX(-2deg) scale(0.99); } /* ── Scroll-triggered animation initial state ── */ [data-animate]:not(.animate__animated) { opacity: 0; } /* Slightly snappier than Animate.css default 1s */ .animate__animated { --animate-duration: 0.65s; } /* ── Step connector line (single line, desktop only) ── */ .step-connector { background: linear-gradient(to right, #10b981, #34d399, #a7f3d0); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; } .step-connector.line-drawn { transform: scaleX(1); } .plan-card { animation: planCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; transition: transform 0.25s ease, box-shadow 0.25s ease; } .plan-card:nth-child(2) { animation-delay: 0.08s; } .plan-card.featured { animation-name: planFeaturedCardIn; } .plan-card:hover { transform: translateY(-4px); box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12); } .plan-card.featured:hover { transform: translateY(-4px) scale(1.05); } .price-pop { animation: pricePop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes planCardIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes planFeaturedCardIn { from { opacity: 0; transform: translateY(18px) scale(1.02); } to { opacity: 1; transform: translateY(0) scale(1.05); } } @keyframes pricePop { 0% { transform: translateY(6px) scale(0.96); opacity: 0.65; } 70% { transform: translateY(-2px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .floating-mobile-menu.is-open, .plan-card, .price-pop { animation: none; } .plan-card, .floating-nav-shell, .mobile-nav-link { transition: none; } }