/* ============================================================ Athlazon brand overrides — events subsite (events.athlazon.com) Light-only, brand emerald (#00c853 base / #00a040 hover). Loaded LAST in (after vendor.scss + theme.scss + theme.css) so these rules win. See resources/views/vendor/eventmie/layouts/include_css.blade.php ============================================================ */ /* --- Dark-mode toggles removed (site is light-only) --- */ #themeToggle, #mobileThemeToggle, li:has(> a#themeToggle), li:has(> a#mobileThemeToggle), ul.navbar-nav:has(a#themeToggle) { display: none !important; } /* --- Brand green hover/active for primary buttons (base #00c853 comes from the swapped theme) --- */ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: #00a040 !important; border-color: #00a040 !important; } /* --- Home hero banner: show the FULL banner image, not cropped --- The banner PNG (currently 2236x1000, aspect 2.236) has the headline "The all-in-one platform for sports events & tournaments." + the "REGISTRATION · TICKETING · BRACKETS · CHECK-IN" tag baked into its TOP. The old rule capped the box height and used object-position:bottom, which sliced ~188px off the top on desktop and hid the headline. Instead we make the box height equal the image's aspect ratio for a full-bleed banner: height = 100vw / (2236/1000) = 44.72vw. Now the whole image shows at every width (matching what mobile already displayed) with no crop. ⚠️ If the banner image is replaced with a DIFFERENT aspect ratio, update the 44.72vw below to 100 / (imageWidth / imageHeight). --- */ section.bg-dark.mt-8 .slick-list, section.bg-dark.mt-8 .slick-track, section.bg-dark.mt-8 .slick-slide, section.bg-dark.mt-8 .slick-slide > div, section.bg-dark.mt-8 .lgx-item-common, section.bg-dark.mt-8 .lgx-item-common > section, section.bg-dark.mt-8 .container-fluid.p-0, section.bg-dark.mt-8 .cover-img-bg { height: 44.72vw !important; max-height: 44.72vw !important; min-height: 0 !important; } section.bg-dark.mt-8 .cover-img-bg { background-size: cover; background-position: center; } section.bg-dark.mt-8 .cover-img-bg > a { display: block; height: 100%; } section.bg-dark.mt-8 .cover-img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center !important; }