/* --------------------------------------------------- 1. Common Styles 2. Lenis Smooth Scroll 3. Banner Widget --------------------------------------------------- */ /* 1. Common Styles */ @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap'); /* Oxanium Font */ :root { --mt-e-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); --mt-e-title-font: "Oxanium", sans-serif; } body { overflow-x: hidden; overflow-y: visible; } /** 2. Lenis Smooth Scroll */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /** 3. Banner Widget */ .mt-addon-morden-banner-wrapper { height: 100vh; display: flex; } .mt-addon-morden-banner-wrapper .mt-banner-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mt-addon-morden-banner-wrapper .mt-banner-media .intro-video-web { width: 100%; height: 100%; object-fit: cover; } .mt-addon-morden-banner-wrapper .mt-banner-content { position: relative; height: 100%; align-self: flex-end; justify-content: flex-end; padding: clamp(3.125rem, 2.1154rem + 4.4872vw, 7.5rem) 0px; max-width: 90%; width: 100%; margin: 0 auto; } .mt-banner-content .mt-morden-banner-title { font-size: clamp(1.875rem, 0.8654rem + 4.4872vw, 6.25rem); text-transform: uppercase; } .mt-banner-content .mt-morden-sub-title { font-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem); } .mt-addon-morden-brand-item { flex: 1; text-align: start; } .mt-addon-morden-brand-item .mt-morden-box-media img { height: clamp(3.75rem, 3.4615rem + 1.2821vw, 5rem); object-fit: contain; width: 100%; max-width: 90%; } .mt-morden-banner-title, .mt-morden-banner-desc, .mt-morden-sub-title { opacity: 0; transition: var(--mt-e-transition); } .mt-morden-banner-title.is-active, .mt-morden-banner-desc.is-active, .mt-morden-sub-title.is-active { opacity: 1; } .mt-brand-list .mt-addon-morden-brand-item { transform: translateY(50px); opacity: 0; } .mt-brand-list.is-active .mt-addon-morden-brand-item { transform: translateY(0px); opacity: 1; } .mt-words__item:last-child { background-image: linear-gradient(to right, #11aaf5, #0fff75); background-clip: text; -webkit-text-fill-color: transparent; } .mt-banner-content .course-buttons-web { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem) 0px 50px; pointer-events: auto; opacity: 0; transform: translateY(30px); animation: slideUpFade-web 1.2s ease-out 0.5s forwards; } .mt-banner-content .course-buttons-web .course-btn-web { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 35px; border-radius: 50px; border: 2px solid; background: transparent; font-family: 'Oxanium', sans-serif; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .mt-banner-content .course-buttons-web .course-btn-web::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; z-index: -1; } .mt-banner-content .course-buttons-web .course-btn-web:hover::before { width: 500px; height: 500px; } .mt-banner-content .course-buttons-web .course-btn-web .icon-web { font-size: 1.3rem; display: flex; align-items: center; justify-content: center; } /* Override default button styles */ .mt-banner-content .course-buttons-web .course-btn-web:focus, .mt-banner-content .course-buttons-web .course-btn-web:hover { background-color: transparent !important; color: inherit !important; text-decoration: none !important; } /* Foundation Button - Cyan */ .mt-banner-content .course-buttons-web .foundation-btn-web { border-color: #00D4FF; color: #00D4FF; } .mt-banner-content .course-buttons-web .foundation-btn-web::before { background: #00D4FF; } .mt-banner-content .course-buttons-web .foundation-btn-web:hover { color: #000 !important; border-color: #00D4FF; transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5); } /* Master Button - Yellow/Lime */ .mt-banner-content .course-buttons-web .master-btn-web { border-color: #9AFF00 !important; color: #9AFF00; } .mt-banner-content .course-buttons-web .master-btn-web::before { background: #9AFF00; } .mt-banner-content .course-buttons-web .master-btn-web:hover { color: #000 !important; border-color: #9AFF00; transform: translateY(-5px); box-shadow: 0 8px 25px rgba(154, 255, 0, 0.5); } /* Animations */ @keyframes slideUpFade-web { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 1024px) { .mt-banner-content .course-buttons-web .course-btn-web { padding: 11px 32px; font-size: 1.05rem; } .mt-addon-morden-banner-wrapper .mt-banner-content { justify-content: space-between; } } @media (max-width: 768px) { .mt-banner-content .course-buttons-web { gap: 15px; } .mt-banner-content .course-buttons-web .course-btn-web { padding: 10px 28px; font-size: 1rem; } .mt-banner-content .mt-brand-list { flex-wrap: wrap; gap: 30px 0px !important; } .mt-brand-list .mt-addon-morden-brand-item { flex: 1 1 25%; } } @media (max-width: 480px) { .mt-banner-content .course-buttons-web { flex-direction: column; gap: 12px; width: 100%; max-width: 250px; } .mt-banner-content .course-buttons-web .course-btn-web { padding: 10px 25px; font-size: 0.95rem; width: 100%; } .mt-banner-content .course-buttons-web .course-btn-web .icon-web { font-size: 1.2rem; } }