Spaces:
Running
Running
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px) perspective(1000px) rotateX(5deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) perspective(1000px) rotateX(0); | |
| } | |
| } | |
| @keyframes professionalFadeIn { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(20px) scale(0.98) perspective(1000px) rotateX(5deg); | |
| filter: blur(2px); | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| transform: translateY(10px) scale(0.99) perspective(1000px) rotateX(2deg); | |
| filter: blur(1px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0) scale(1) perspective(1000px) rotateX(0); | |
| filter: blur(0); | |
| } | |
| } | |
| @keyframes subtleFloat { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| @keyframes professionalPulse { | |
| 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } | |
| 50% { transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } | |
| 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } | |
| } | |
| @keyframes professionalGradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes professionalSlideIn { | |
| from { opacity: 0; transform: translateY(40px) perspective(1000px) rotateX(10deg); } | |
| to { opacity: 1; transform: translateY(0) perspective(1000px) rotateX(0); } | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-30px); } | |
| 60% { transform: translateY(-15px); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes slideInLeft { | |
| from { opacity: 0; transform: translateX(-50px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(50px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .animate-fadeIn { | |
| animation: professionalFadeIn 1.2s cubic-bezier(0.16, 0.77, 0.47, 0.99) forwards; | |
| } | |
| .animate-professionalSlide { | |
| animation: professionalSlideIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards; | |
| transform-origin: center bottom; | |
| } | |
| .animate-subtleFloat { | |
| animation: subtleFloat 6s ease-in-out infinite; | |
| } | |
| .animate-professionalPulse { | |
| animation: professionalPulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; | |
| } | |
| .animate-professionalGradient { | |
| background: linear-gradient(135deg, #0ea5e9, #7c3aed, #0ea5e9); | |
| background-size: 200% 200%; | |
| animation: professionalGradient 8s ease infinite; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .animate-pulse { | |
| animation: pulse 3s ease infinite; | |
| } | |
| .animate-gradientBG { | |
| background: linear-gradient(270deg, #0ea5e9, #7c3aed, #0ea5e9); | |
| background-size: 400% 400%; | |
| animation: gradientBG 12s ease infinite; | |
| } | |
| .animate-slideInLeft { | |
| animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .animate-slideInRight { | |
| animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .animate-rotate { | |
| animation: rotate 20s linear infinite; | |
| } | |
| .delay-100 { animation-delay: 100ms; } | |
| .delay-200 { animation-delay: 200ms; } | |
| .delay-300 { animation-delay: 300ms; } | |
| .delay-400 { animation-delay: 400ms; } | |
| .delay-500 { animation-delay: 500ms; } | |
| .animate-bounce { | |
| animation: bounce 2.5s infinite; | |
| } | |
| /* 3D Perspective */ | |
| .transform-style-preserve-3d { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| /* Glowing Effects */ | |
| .glow-effect { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .glow-effect::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: inherit; | |
| filter: blur(20px); | |
| z-index: -1; | |
| opacity: 0.7; | |
| transform: scale(0.9); | |
| border-radius: inherit; | |
| } | |
| .glow-effect:hover::before { | |
| opacity: 1; | |
| } | |
| /* Liquid Distortion Effect */ | |
| .liquid-distortion { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .liquid-distortion img { | |
| transition: transform 0.5s ease, filter 0.5s ease; | |
| } | |
| .liquid-distortion:hover img { | |
| transform: scale(1.05); | |
| filter: url('#liquid'); | |
| } | |
| /* Ultra Premium Glass Morphism */ | |
| .glass-morphism { | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.12) 0%, | |
| rgba(255, 255, 255, 0.05) 100% | |
| ); | |
| backdrop-filter: blur(24px) saturate(200%) contrast(120%); | |
| -webkit-backdrop-filter: blur(24px) saturate(200%) contrast(120%); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| box-shadow: | |
| 0 12px 32px -12px rgba(31, 38, 135, 0.2), | |
| inset 0 -8px 32px -8px rgba(0, 0, 0, 0.05), | |
| inset 0 8px 32px -8px rgba(255, 255, 255, 0.08); | |
| transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1); | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .glass-morphism::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.15) 0%, | |
| rgba(255, 255, 255, 0) 60% | |
| ); | |
| z-index: -1; | |
| pointer-events: none; | |
| transform: translateY(-100%); | |
| transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); | |
| } | |
| .glass-morphism:hover { | |
| transform: translateY(-4px); | |
| box-shadow: | |
| 0 24px 48px -12px rgba(31, 38, 135, 0.3), | |
| inset 0 -8px 32px -8px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 32px -8px rgba(255, 255, 255, 0.12); | |
| } | |
| .glass-morphism:hover::before { | |
| transform: translateY(0); | |
| } | |
| .glass-morphism:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25); | |
| } | |
| /* Neon Text Effect */ | |
| .neon-text { | |
| text-shadow: | |
| 0 0 5px #fff, | |
| 0 0 10px #fff, | |
| 0 0 20px currentColor, | |
| 0 0 40px currentColor; | |
| animation: neon-pulse 1.5s infinite alternate; | |
| } | |
| @keyframes neon-pulse { | |
| from { opacity: 0.8; } | |
| to { opacity: 1; text-shadow: | |
| 0 0 10px #fff, | |
| 0 0 20px #fff, | |
| 0 0 30px currentColor, | |
| 0 0 40px currentColor, | |
| 0 0 50px currentColor, | |
| 0 0 60px currentColor, | |
| 0 0 70px currentColor; | |
| } | |
| } | |
| /* Floating Particles */ | |
| .particle-float { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.8); | |
| animation: float-up 15s linear infinite; | |
| } | |
| @keyframes float-up { | |
| 0% { transform: translateY(100vh) scale(0); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(-20vh) scale(1.5); opacity: 0; } | |
| } | |
| /* Holographic Effect */ | |
| .holographic { | |
| background: linear-gradient( | |
| 45deg, | |
| rgba(255, 0, 0, 0.5), | |
| rgba(255, 165, 0, 0.5), | |
| rgba(255, 255, 0, 0.5), | |
| rgba(0, 255, 0, 0.5), | |
| rgba(0, 0, 255, 0.5), | |
| rgba(75, 0, 130, 0.5), | |
| rgba(238, 130, 238, 0.5) | |
| ); | |
| background-size: 400% 400%; | |
| animation: holographic 15s ease infinite; | |
| } | |
| @keyframes holographic { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* Text Reveal Effect */ | |
| .text-reveal { | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| .text-reveal-char { | |
| display: inline-block; | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| /* Professional Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0,0,0,0.03); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, #0ea5e9, #7c3aed); | |
| border-radius: 10px; | |
| border: 2px solid rgba(255,255,255,0.2); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(135deg, #0284c7, #6d28d9); | |
| } | |
| /* Professional Typography System */ | |
| :root { | |
| --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-secondary: 'Space Grotesk', 'Inter', sans-serif; | |
| --font-mono: 'IBM Plex Mono', monospace; | |
| --font-serif: 'Lora', serif; | |
| --font-display: 'Clash Display', sans-serif; | |
| --font-sans: 'Satoshi', 'Inter', sans-serif; | |
| --font-decorative: 'Cabinet Grotesk', 'Space Grotesk', sans-serif; | |
| /* Enhanced color system */ | |
| --color-primary: 14, 165, 233; | |
| --color-secondary: 124, 58, 237; | |
| --color-accent: 236, 72, 153; | |
| --color-dark: 15, 23, 42; | |
| --color-light: 248, 250, 252; | |
| /* Typography refinement */ | |
| --text-base: 1rem; | |
| --text-scale-ratio: 1.333; /* Perfect fourth scale */ | |
| --text-base: 1rem; | |
| --text-scale-ratio: 1.25; | |
| --text-xs: calc(var(--text-base) / var(--text-scale-ratio)); | |
| --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); | |
| --text-md: calc(var(--text-sm) * var(--text-scale-ratio)); | |
| --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); | |
| --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); | |
| --text-2xl: calc(var(--text-xl) * var(--text-scale-ratio)); | |
| --text-3xl: calc(var(--text-2xl) * var(--text-scale-ratio)); | |
| --text-4xl: calc(var(--text-3xl) * var(--text-scale-ratio)); | |
| --text-5xl: calc(var(--text-4xl) * var(--text-scale-ratio)); | |
| --text-6xl: calc(var(--text-5xl) * var(--text-scale-ratio)); | |
| --leading-none: 1; | |
| --leading-tight: 1.25; | |
| --leading-normal: 1.5; | |
| --leading-relaxed: 1.75; | |
| } | |
| body { | |
| font-family: var(--font-primary); | |
| font-size: var(--text-base); | |
| line-height: var(--leading-relaxed); | |
| font-weight: 400; | |
| font-optical-sizing: auto; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--font-secondary); | |
| font-weight: 700; | |
| line-height: var(--leading-tight); | |
| letter-spacing: -0.025em; | |
| } | |
| h1 { font-size: var(--text-5xl); } | |
| h2 { font-size: var(--text-4xl); } | |
| h3 { font-size: var(--text-3xl); } | |
| h4 { font-size: var(--text-2xl); } | |
| h5 { font-size: var(--text-xl); } | |
| h6 { font-size: var(--text-lg); } | |
| /* Premium Underline Animation */ | |
| .professional-underline { | |
| position: relative; | |
| display: inline-block; | |
| padding-bottom: 0.25em; | |
| } | |
| .professional-underline::before, | |
| .professional-underline::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: currentColor; | |
| transform-origin: right center; | |
| transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); | |
| } | |
| .professional-underline::before { | |
| transform: scaleX(0); | |
| z-index: 2; | |
| height: 1px; | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .professional-underline::after { | |
| transform: scaleX(0); | |
| transform-origin: left center; | |
| } | |
| .professional-underline:hover::before, | |
| .professional-underline:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: left center; | |
| } | |
| .professional-underline:hover::after { | |
| transition-delay: 0.1s; | |
| } | |
| /* Typography Enhancements */ | |
| .professional-headline { | |
| font-family: var(--font-decorative); | |
| font-size: var(--text-6xl); | |
| line-height: 0.95; | |
| letter-spacing: -0.03em; | |
| font-weight: 900; | |
| text-transform: none; | |
| background: linear-gradient(91.83deg, | |
| rgba(var(--color-primary), 0.95) 0%, | |
| rgba(var(--color-secondary), 0.95) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: | |
| 0 1px 1px rgba(0,0,0,0.03), | |
| 0 2px 2px rgba(0,0,0,0.03), | |
| 0 4px 4px rgba(0,0,0,0.03), | |
| 0 8px 8px rgba(0,0,0,0.03); | |
| position: relative; | |
| display: inline-block; | |
| padding-bottom: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .professional-headline::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, | |
| rgba(var(--color-primary), 0.5), | |
| rgba(var(--color-secondary), 0.5)); | |
| transform: scaleX(0); | |
| transform-origin: right; | |
| transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1); | |
| } | |
| .professional-headline:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: left; | |
| } | |
| .professional-subhead { | |
| font-size: var(--text-xl); | |
| line-height: var(--leading-normal); | |
| letter-spacing: 0.01em; | |
| font-weight: 400; | |
| opacity: 0.9; | |
| } | |
| .professional-body { | |
| font-size: var(--text-md); | |
| line-height: var(--leading-relaxed); | |
| letter-spacing: 0.01em; | |
| } | |
| .professional-caption { | |
| font-size: var(--text-sm); | |
| line-height: var(--leading-tight); | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| opacity: 0.75; | |
| } | |
| .professional-mono { | |
| font-family: var(--font-mono); | |
| font-size: var(--text-sm); | |
| letter-spacing: -0.01em; | |
| } | |
| /* Baseline Grid Alignment */ | |
| .baseline-grid { | |
| background-image: linear-gradient(to bottom, | |
| rgba(0, 0, 255, 0.1) 1px, | |
| transparent 1px); | |
| background-size: 100% calc(var(--leading-relaxed) * 1rem); | |
| background-position: 0 0.5rem; | |
| } | |
| /* Optical Alignment Adjustments */ | |
| .optical-adjust { | |
| margin-top: -0.1em; | |
| margin-bottom: -0.1em; | |
| } | |
| /* Professional Text Shadows */ | |
| .text-shadow-sm { | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .text-shadow-md { | |
| text-shadow: 0 4px 8px rgba(0,0,0,0.12); | |
| } | |
| .text-shadow-lg { | |
| text-shadow: 0 8px 16px rgba(0,0,0,0.16); | |
| } | |
| /* Paragraph Spacing */ | |
| .professional-paragraph + .professional-paragraph { | |
| margin-top: calc(var(--leading-relaxed) * 1rem); | |
| } | |
| /* List Typography */ | |
| .professional-list { | |
| padding-left: 1.5em; | |
| } | |
| .professional-list li + li { | |
| margin-top: 0.5em; | |
| } | |
| .professional-list-disc { | |
| list-style-type: disc; | |
| } | |
| .professional-list-circle { | |
| list-style-type: circle; | |
| } | |
| .professional-list-square { | |
| list-style-type: square; | |
| } | |
| /* Blockquote Styling */ | |
| .professional-blockquote { | |
| border-left: 4px solid currentColor; | |
| padding-left: 1.5em; | |
| font-style: italic; | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| /* Code Block Styling */ | |
| .professional-code { | |
| font-family: var(--font-mono); | |
| background: rgba(0,0,0,0.05); | |
| padding: 0.2em 0.4em; | |
| border-radius: 0.25em; | |
| font-size: 0.9em; | |
| } | |
| /* Text Balance */ | |
| .text-balance { | |
| text-wrap: balance; | |
| } | |
| /* Executive Card Design */ | |
| .professional-card { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| transform: translateZ(0); | |
| will-change: transform; | |
| border-radius: 32px; | |
| background: linear-gradient( | |
| 145deg, | |
| rgba(255, 255, 255, 0.95) 0%, | |
| rgba(255, 255, 255, 0.98) 100% | |
| ); | |
| box-shadow: | |
| 0 1.6px 3.6px rgba(0, 0, 0, 0.012), | |
| 0 4.4px 10px rgba(0, 0, 0, 0.018), | |
| 0 10.5px 24.1px rgba(0, 0, 0, 0.022), | |
| 0 35px 80px rgba(0, 0, 0, 0.03); | |
| border: 1px solid rgba(var(--color-dark), 0.04); | |
| backdrop-filter: blur(16px) saturate(180%) brightness(105%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(105%); | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .professional-card::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.4) 0%, | |
| rgba(255, 255, 255, 0.1) 100% | |
| ); | |
| z-index: 1; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1); | |
| } | |
| .professional-card:hover { | |
| transform: translateY(-8px) scale(1.02) rotateX(1deg) rotateY(1deg); | |
| box-shadow: | |
| 0 25px 50px -12px rgba(0, 0, 0, 0.25), | |
| 0 8px 24px -8px rgba(14, 165, 233, 0.15); | |
| } | |
| .professional-card:hover::after { | |
| opacity: 1; | |
| } | |
| .professional-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(var(--color-primary), 0.03) 0%, | |
| rgba(var(--color-secondary), 0.03) 100% | |
| ); | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| .professional-card::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border: 1px solid rgba(var(--color-dark), 0.05); | |
| border-radius: inherit; | |
| z-index: 1; | |
| pointer-events: none; | |
| transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .professional-card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15); | |
| } | |
| .professional-card:hover::after { | |
| border-color: rgba(var(--color-primary), 0.2); | |
| transform: scale(0.98); | |
| } | |
| .professional-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(124,58,237,0.1)); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| z-index: 1; | |
| } | |
| .professional-card:hover { | |
| transform: translateY(-5px) scale(1.01); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.12); | |
| } | |
| .professional-card:hover::before { | |
| opacity: 1; | |
| } | |
| /* Luxury Button Effect */ | |
| .professional-btn { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1); | |
| transform: translateZ(0); | |
| will-change: transform; | |
| perspective: 1000px; | |
| transform-style: preserve-3d; | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| text-transform: uppercase; | |
| font-size: 0.875rem; | |
| } | |
| .professional-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.2) 0%, | |
| rgba(255, 255, 255, 0.05) 50%, | |
| rgba(255, 255, 255, 0.2) 100% | |
| ); | |
| transform: translateX(-100%) skewX(-15deg); | |
| transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1); | |
| z-index: 1; | |
| } | |
| .professional-btn::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.15) 0%, | |
| rgba(255, 255, 255, 0) 60% | |
| ); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| } | |
| .professional-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); | |
| transform: translateX(-100%); | |
| transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .professional-btn:hover { | |
| transform: translateY(-4px) scale(1.02); | |
| box-shadow: | |
| 0 12px 24px rgba(14, 165, 233, 0.25), | |
| 0 4px 12px rgba(124, 58, 237, 0.2); | |
| } | |
| .professional-btn:hover::before { | |
| transform: translateX(150%) skewX(-15deg); | |
| } | |
| .professional-btn:hover::after { | |
| opacity: 1; | |
| } | |
| .professional-btn:active { | |
| transform: translateY(-1px) scale(0.98); | |
| transition: transform 0.2s ease; | |
| } | |
| .professional-btn:hover::after { | |
| transform: translateX(0); | |
| } | |
| /* Hover effects */ | |
| .group:hover .group-hover\:opacity-100 { | |
| opacity: 1; | |
| } | |
| /* Smooth transitions */ | |
| .transition-all { | |
| transition-property: all; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| transition-duration: 300ms; | |
| } | |
| /* Artwork hover effect */ | |
| .group:hover img { | |
| transform: scale(1.1); | |
| } | |
| /* Custom shadow */ | |
| .shadow-lg { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .shadow-xl { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .shadow-2xl { | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| /* Button hover effect */ | |
| button:hover, a:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* Gradient text */ | |
| .text-gradient { | |
| background: linear-gradient(to right, #0ea5e9, #7c3aed); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } |