/* * WIDGET ISOLATION SCOPE * All CSS rules are scoped under #carousel-widget-wrapper */ #carousel-widget-wrapper { /* Define variables locally within the widget scope */ --main-dark: #0A2814; --secondary-gold: #FFCC00; --light-bg: #ffffff; --card-dark: #ffffff; --text-dark: var(--main-dark); /* Resetting context and applying base styles locally */ box-sizing: border-box; display: block; width: 100%; font-family: 'Inter', sans-serif; background: var(--light-bg); color: var(--text-dark); padding: 0; margin: 0; } /* Ensure all child elements inherit box-sizing from the wrapper */ #carousel-widget-wrapper * { box-sizing: inherit; } /* Keyframe Animation for Border Glow (Uses Dark and Gold colors) */ @keyframes border-glow { 0% { border-color: var(--main-dark); /* Subtle shadow using main-dark color */ box-shadow: 0 0 8px rgba(10, 40, 20, 0.4); } 50% { /* Brighter, more central glow using Gold */ border-color: var(--secondary-gold); box-shadow: 0 0 35px rgba(255, 204, 0, 0.8), 0 0 10px var(--secondary-gold); } 100% { border-color: var(--main-dark); box-shadow: 0 0 8px rgba(10, 40, 20, 0.4); } } /* 2. Carousel Container and Scroll Behavior */ #carousel-widget-wrapper .app-main-container { width: 100%; /* REMOVED: max-width for edge-to-edge span */ margin: 0 auto; /* REMOVED: padding: 0 1rem; for edge-to-edge span */ margin-top: 0; margin-bottom: 0; } /* Wrapper to maintain 100% width behavior */ #carousel-widget-wrapper .app-content-wrapper { width: 100%; } #carousel-widget-wrapper .app-scroll-wrapper { position: relative; padding: 0; } #carousel-widget-wrapper .app-scroll-container { overflow-x: auto; /* Hiding Scrollbar (Fully Responsive requirement) */ -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ display: flex; flex-direction: row; margin: 0 -0.5rem; /* DECREASED: Reduced vertical padding from 1.5rem to 1rem */ padding: 1rem 0.5rem; cursor: grab; user-select: none; -webkit-user-select: none; -moz-user-select: none; touch-action: pan-y; } /* Hiding Scrollbar (Chrome/Safari) */ #carousel-widget-wrapper .app-scroll-container::-webkit-scrollbar { display: none; } #carousel-widget-wrapper .app-scroll-container.is-dragging { cursor: grabbing; } /* 3. Responsive Card Widths */ #carousel-widget-wrapper .app-scroll-item { height: auto; flex: 0 0 auto; padding: 0 0.5rem; /* Default: Show 3 items */ width: 33.333%; max-width: 33.333%; } @media (max-width: 992px) { #carousel-widget-wrapper .app-scroll-item { /* Tablet: Show 2 items */ width: 50%; max-width: 50%; } } @media (max-width: 576px) { #carousel-widget-wrapper .app-scroll-item { /* Mobile: Show 1 item */ width: 100%; max-width: 100%; } } /* 4. Image Card Styling: This is the main container for the image now */ #carousel-widget-wrapper .app-image-card { aspect-ratio: 16 / 9; width: 100%; position: relative; display: flex; flex-direction: column; border-radius: 1rem; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: var(--card-dark); padding: 0; perspective: 1000px; transform-style: preserve-3d; /* CRUCIAL: Clips the image to the card's border-radius */ overflow: hidden; /* Custom Animated Border and Inset Shadow for Depth */ border: 4px solid var(--main-dark); /* Using new dark color */ animation: border-glow 2.5s infinite alternate ease-in-out; /* UPDATED: Adjusted shadow to use transparent dark green instead of black */ box-shadow: inset 0 0 10px rgba(10, 40, 20, 0.1), 0 5px 15px rgba(10, 40, 20, 0.2); } #carousel-widget-wrapper .app-image-card:hover { transform: translateY(-10px) scale(1.02) rotateY(1deg); /* Stronger lift and scale */ /* UPDATED: Adjusted hover shadow to use transparent dark green instead of black */ box-shadow: 0 20px 40px rgba(10, 40, 20, 0.3), 0 0 30px rgba(255, 204, 0, 0.5); } /* 5. Image Fit Adjustment - SCALE IN/OUT HOVER EFFECT */ #carousel-widget-wrapper .app-full-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-in-out; pointer-events: none; } #carousel-widget-wrapper .app-image-card:hover .app-full-image { transform: scale(1.08); } /* 6. Engagement: Caption/Overlay Style */ #carousel-widget-wrapper .app-card-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; /* Using transparent version of --main-dark (#0A2814) to strictly comply with requested colors */ background: linear-gradient(to top, rgba(10, 40, 20, 0.95), rgba(10, 40, 20, 0)); color: white; /* Use white for text on dark overlay */ text-align: center; opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; font-size: 1.1rem; font-weight: 600; } #carousel-widget-wrapper .app-image-card:hover .app-card-caption { opacity: 1; transform: translateY(0); } /* 7. Navigation Button Styling - Circular Buttons */ #carousel-widget-wrapper .app-nav-controls { text-align: center; /* DECREASED: Reduced top margin from 0.5rem to 0.25rem */ margin-top: 0.25rem; /* Adjusted bottom margin to 0.25rem for minimal space */ margin-bottom: 0.25rem; } #carousel-widget-wrapper .app-custom-control { /* Button Default: Dark Green (#0A2814) */ background-color: var(--main-dark); color: white; border: none; width: 50px; height: 50px; margin: 0 10px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; display: inline-flex; align-items: center; justify-content: center; /* UPDATED: Adjusted shadow to use transparent dark green instead of black */ box-shadow: 0 4px 8px rgba(10, 40, 20, 0.2); /* Circular Shape */ border-radius: 50%; } #carousel-widget-wrapper .app-custom-control:hover { /* Button Hover: Gold (#FFCC00) */ background-color: var(--secondary-gold); color: var(--main-dark); /* Text switches to dark color on gold background */ transform: scale(1.1); box-shadow: 0 8px 16px rgba(255, 204, 0, 0.7); } #carousel-widget-wrapper .app-custom-control:active { transform: scale(0.9); } #carousel-widget-wrapper .app-custom-control i.bi { font-size: 1.5rem; line-height: 1; }