| |
|
|
| |
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes scrollBounce { |
| 0%, 100% { |
| transform: translateY(0); |
| opacity: 0.6; |
| } |
| 50% { |
| transform: translateY(12px); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes answerReveal { |
| from { |
| opacity: 0; |
| transform: scale(0.95) translateY(-10px); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1) translateY(0); |
| } |
| } |
|
|
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0) rotate(0deg); |
| opacity: 0.3; |
| } |
| 25% { |
| transform: translateY(-20px) rotate(5deg); |
| opacity: 0.6; |
| } |
| 50% { |
| transform: translateY(-35px) rotate(-3deg); |
| opacity: 0.4; |
| } |
| 75% { |
| transform: translateY(-15px) rotate(2deg); |
| opacity: 0.7; |
| } |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { |
| box-shadow: 0 0 0 0 rgba(129, 212, 250, 0.4); |
| } |
| 50% { |
| box-shadow: 0 0 0 15px rgba(129, 212, 250, 0); |
| } |
| } |
|
|
| .animate-fadeInUp { |
| animation: fadeInUp 1s ease forwards; |
| } |
|
|
| .animate-scrollBounce { |
| animation: scrollBounce 2s ease-in-out infinite; |
| } |
|
|
| .animate-answerReveal { |
| animation: answerReveal 0.5s ease forwards; |
| } |
|
|
| |
| .polaroid-frame { |
| background: white; |
| padding: 8px 8px 16px; |
| border-radius: 4px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2); |
| } |
|
|
| .polaroid-frame:hover { |
| box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .polaroid-frame-sm { |
| background: white; |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2); |
| } |
|
|
| .polaroid-frame-sm:hover { |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.08); |
| } |
|
|
| |
| .timeline-item.visible .absolute.left-4, |
| .timeline-item.visible .absolute.md\\:left-1\\/2 { |
| animation: pulse 2s ease-in-out 1; |
| } |
|
|
| |
| .fade-in-on-scroll { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: opacity 0.8s ease, transform 0.8s ease; |
| } |
|
|
| .fade-in-on-scroll.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| |
| #navbar.scrolled { |
| background: rgba(13, 27, 62, 0.85); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); |
| } |
|
|
| #navbar.scrolled #navLogo { |
| opacity: 1; |
| } |
|
|
| |
| .nav-link { |
| position: relative; |
| } |
|
|
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 0; |
| width: 0; |
| height: 1.5px; |
| background: #81d4fa; |
| transition: width 0.3s ease; |
| border-radius: 1px; |
| } |
|
|
| .nav-link:hover::after { |
| width: 100%; |
| } |
|
|
| |
| .particle { |
| position: absolute; |
| pointer-events: none; |
| animation: float 6s ease-in-out infinite; |
| opacity: 0; |
| } |
|
|
| .particle:nth-child(odd) { |
| animation-duration: 8s; |
| animation-delay: 1s; |
| } |
|
|
| .particle:nth-child(3n) { |
| animation-duration: 7s; |
| animation-delay: 2s; |
| } |
|
|
| .particle:nth-child(5n) { |
| animation-duration: 9s; |
| animation-delay: 0.5s; |
| } |
|
|
| |
| .scrapbook-item { |
| transition: transform 0.3s ease; |
| } |
|
|
| .scrapbook-item:hover { |
| transform: translateY(-4px); |
| } |
|
|
| |
| #mobileMenu { |
| animation: slideDown 0.3s ease forwards; |
| } |
|
|
| @keyframes slideDown { |
| from { |
| opacity: 0; |
| transform: translateY(-10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .polaroid-frame img, |
| .polaroid-frame-sm img { |
| height: 140px; |
| } |
| .timeline-item .polaroid-frame { |
| max-width: 85%; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .polaroid-frame-sm img { |
| height: 120px; |
| } |
| #countdownDays, #countdownHours, #countdownMinutes, #countdownSeconds { |
| font-size: 2rem; |
| } |
| } |
|
|
| |
| iframe[src*="spotify"] { |
| border-radius: 12px !important; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #fdf6e3; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #b3e5fc; |
| border-radius: 3px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #81d4fa; |
| } |
|
|
| |
| .prose p { |
| margin-bottom: 1.2em; |
| } |
|
|
| |
| #revealAnswer:active { |
| transform: scale(0.95); |
| } |
|
|
| |
| a, button, .polaroid-frame, .polaroid-frame-sm, .scrapbook-item { |
| -webkit-tap-highlight-color: transparent; |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| html { |
| scroll-behavior: auto; |
| } |
| .animate-fadeInUp, |
| .animate-scrollBounce, |
| .animate-answerReveal, |
| .particle { |
| animation: none !important; |
| } |
| .fade-in-on-scroll { |
| opacity: 1; |
| transform: none; |
| transition: none; |
| } |
| } |
