Accessibility: This site contains motion and all moving elements can be disabled.

Cookies

We use cookies to give you a great user experience on the Fat Tuesday website. To learn more, read our Cookie Policy or manage your settings at 'Cookie preferences'.

Cookies Preferences

Our website is built using Craft CMS. Craft's default cookies don’t collect any personal or sensitive information or IP addresses. The information they store is not sent to any third parties. They are used only to communicate with Craft installation for the purposes of user authentication, form validation/security and basic web application operations.

-

Hero Slider Codepen File

/* navigation arrows */ .slider-arrow position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(20, 20, 30, 0.7); backdrop-filter: blur(8px); border-radius: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: all 0.2s; border: 1px solid rgba(255,255,255,0.25); color: white; font-size: 1.5rem;

/* hero slider wrapper */ .hero-slider position: relative; width: 100%; overflow: hidden; border-radius: 1.8rem;

.btn-outline background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); color: white; border: 1px solid rgba(255,255,255,0.5); hero slider codepen

.btn-outline:hover background: rgba(255,255,255,0.25); transform: translateY(-3px); border-color: white;

.btn-group display: flex; flex-wrap: wrap; gap: 1rem; /* navigation arrows */

/* main slider container */ .slider-container max-width: 1300px; width: 100%; margin: 0 auto; border-radius: 2rem; overflow: hidden; box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); background: #000; transition: all 0.2s ease;

<!-- dots container --> <div class="slider-dots" id="dotsContainer"></div> transition: all 0.2s

/* Responsive touches */ @media (max-width: 780px) .hero-content padding: 1.5rem 1.8rem; margin-left: 4%; margin-right: 1rem; backdrop-filter: blur(6px); .hero-content p max-width: 100%; font-size: 0.95rem; .slider-arrow width: 40px; height: 40px; font-size: 1.2rem; .arrow-left left: 0.8rem; .arrow-right right: 0.8rem; .slide min-height: 500px; height: 60vh; .btn-primary, .btn-outline padding: 0.7rem 1.4rem; font-size: 0.85rem;

/* content container */ .hero-content position: relative; z-index: 2; max-width: 620px; padding: 2rem 3rem; margin-left: 5%; margin-right: 2rem; backdrop-filter: blur(2px); border-radius: 2rem; animation: fadeUp 0.7s ease-out;