/* Theme Name: CarribbeSoul Theme URI: http://example.com/carribbesoul Author: Your Name Author URI: http://example.com Description: Custom theme for CarribbeSoul Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: carribbesoul */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Anime Ace Italic'; /* Give it a friendly name */ src: url('/animeace2_ital.otf') format('opentype'); font-weight: 700; /* Assuming you want to keep it bold (700 is typically bold) */ font-style: italic; /* Mark this file as the italic style */ } /* Custom styles moved from index.html */ /* Additional styles moved from */ /* Performance optimizations */ * { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } html { scroll-behavior: smooth; } body { will-change: scroll-position; } /* Optimize images for better performance */ img { will-change: transform; } /* GPU acceleration for transitions */ .transition, .transition-all { will-change: transform, opacity; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .swiper-button-next, .swiper-button-prev { display: none !important; } /* ... @tailwind base, components, utilities, etc. ... */ .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .masonry-grid { column-count: 3; column-gap: 1rem; } @media (max-width: 768px) { .masonry-grid { column-count: 2; } } @media (max-width: 640px) { .masonry-grid { column-count: 1; } } .masonry-item { break-inside: avoid; margin-bottom: 1rem; } .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; } .lightbox-content { max-width: 90%; max-height: 90%; } .lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; } .animate-text-shimmer { background-size: 300% 100%; animation: shimmer 3s ease infinite; } @keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .perspective-1000 { perspective: 1000px; } .preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .animate-tilt { animation: tilt 6s infinite linear; } @keyframes tilt { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(0.5deg); } 75% { transform: rotate(-0.5deg); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .service-card:hover { box-shadow: 0 0 20px rgba(255, 105, 0, 0.3); } /* Custom animations */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes pulse-slow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } @keyframes ping-slow { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes ping-slower { 75%, 100% { transform: scale(1.8); opacity: 0; } } @keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-float-slow { animation: float 8s ease-in-out infinite; } .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; } .animate-ping-slow { animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite; } .animate-ping-slower { animation: ping-slower 4s cubic-bezier(0, 0, 0.2, 1) infinite; } .animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; } /* Performance optimizations for sections */ section { contain: layout style; } /* Optimize fixed navbar */ #navbar { contain: layout style; transform: translateZ(0); will-change: background-color, box-shadow; display: flex; justify-content: center; align-items: center; } .logo-top { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-top: 1rem; margin-bottom: 0.5rem; } /* Optimize hero section */ .hero-image { contain: layout; transform: translateZ(0); } /* Optimize gallery and animations */ .gallery-item, .menu-item, .testimonial { contain: layout style; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; will-change: transform, opacity; } /* Smooth filtering transitions */ .menu-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Custom checkbox styling */ .menu-option input:checked+div { border-color: #3B82F6; background-color: rgba(59, 130, 246, 0.1); } .menu-option input:checked+div svg { display: block; } /* Tab transitions */ .tab-content { transition: opacity 0.3s ease, transform 0.3s ease; } .tab-content:not(.active) { display: none; } /* Modern Testimonials Animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes float-slow { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-15px) rotate(1deg); } 66% { transform: translateY(-10px) rotate(-1deg); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-float-slow { animation: float-slow 8s ease-in-out infinite; } /* Enhanced hover effects for testimonial cards */ .group:hover .group-hover\:text-primary\/30 { color: rgba(255, 107, 53, 0.3); } /* Modern backdrop blur support */ .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Improved shadow transitions */ .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Smooth transform transitions */ .transform { transform: translateZ(0); } .hover\:-translate-y-2:hover { transform: translateY(-8px) translateZ(0); } /* Testimonials Slider Styles */ .testimonials-swiper { overflow: visible !important; padding: 20px 0; width: 100%; height: auto; } .testimonials-swiper .swiper-wrapper { align-items: stretch; } .testimonials-swiper .swiper-slide { opacity: 0.7; transform: scale(0.95); transition: all 0.4s ease; height: auto; display: flex; align-items: stretch; } .testimonials-swiper .swiper-slide-active { opacity: 1; transform: scale(1); } .testimonials-swiper .swiper-slide > div { height: 100%; width: 100%; } /* Custom Pagination Styles */ .testimonials-pagination { position: static !important; margin-top: 0 !important; } .testimonials-pagination .swiper-pagination-bullet { background: #d1d5db !important; opacity: 1 !important; margin: 0 6px !important; transition: all 0.3s ease !important; width: 12px !important; height: 12px !important; } .testimonials-pagination .swiper-pagination-bullet-active { background: #FF6B35 !important; transform: scale(1.2); } .testimonials-pagination .swiper-pagination-bullet:hover { background: #FF6B35 !important; transform: scale(1.1); } /* Navigation Button Hover Effects */ .testimonials-prev, .testimonials-next { position: static !important; margin: 0 !important; } .testimonials-prev:hover, .testimonials-next:hover { transform: scale(1.05); } .testimonials-prev:active, .testimonials-next:active { transform: scale(0.95); } /* Ensure proper display */ .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }