.lftm-parent { position: relative; } .lftm-parent > a { position: relative; z-index: 2; } .lftm-mega { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(6px); width: min(1180px, 94vw); background: #fcf5ea; border: 1px solid rgba(17,49,74,0.08); border-radius: 10px; box-shadow: 0 20px 48px rgba(17,49,74,0.18); padding: 28px 32px; opacity: 0; pointer-events: none; transition: opacity 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1); z-index: 9999; text-align: left; } .lftm-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .lftm-parent:hover .lftm-mega, .lftm-parent:focus-within .lftm-mega, .lftm-parent.is-open .lftm-mega { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .lftm-mega__top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(17,49,74,0.12); padding-bottom: 12px; margin-bottom: 18px; gap: 16px; } .lftm-mega__overview { color: #11314a; font-weight: 700; text-decoration: none; font-size: 15px; } .lftm-mega__overview:hover { color: #f48791; } .lftm-mega__star { color: #ffc25f; margin-right: 4px; } .lftm-mega__cta { color: #11314a; font-weight: 700; text-decoration: none; font-family: "Big Shoulders Display", "Manrope", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; } .lftm-mega__cta:hover { color: #f48791; } .lftm-mega__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .lftm-col { display: flex; flex-direction: column; min-width: 0; } .lftm-col__head { font-family: "Big Shoulders Display", "Manrope", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #11314a; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid rgba(17,49,74,0.18); margin-bottom: 10px; transition: color 120ms; } .lftm-col__head:hover { color: #f48791; } .lftm-col__item { color: #11314a; text-decoration: none; font-size: 15px; padding: 5px 0; transition: color 120ms; line-height: 1.35; font-family: "Manrope", sans-serif; } .lftm-col__item:hover { color: #f48791; } .lftm-mega__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(17,49,74,0.12); gap: 16px; flex-wrap: wrap; } .lftm-mega__pitch { font-family: "Big Shoulders Display", "Manrope", sans-serif; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: #11314a; font-weight: 700; } .lftm-btn--pink { background: #f48791; color: #11314a; padding: 10px 22px; border-radius: 9999px; text-decoration: none; font-weight: 700; font-family: "Manrope", sans-serif; font-size: 14px; transition: transform 120ms, background-color 120ms; display: inline-block; } .lftm-btn--pink:hover { background: #ffc25f; transform: translateY(-1px); } @media (max-width: 900px) { .lftm-mega { position: fixed; left: 0; top: auto; right: 0; transform: none; width: 100vw; max-height: 80vh; overflow-y: auto; border-radius: 0; padding: 20px 18px; } .lftm-parent:hover .lftm-mega, .lftm-parent:focus-within .lftm-mega { opacity: 0; pointer-events: none; transform: none; } .lftm-parent.is-open .lftm-mega { opacity: 1; pointer-events: auto; transform: none; } .lftm-mega__grid { grid-template-columns: 1fr; gap: 14px; } .lftm-col { border-top: 1px solid rgba(17,49,74,0.12); padding-top: 10px; } .lftm-col:first-child { border-top: 0; padding-top: 0; } .lftm-mega__bottom { flex-direction: column; align-items: flex-start; } }