.theme-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; text-align: center; background-color: rgba(0, 0, 0, 0.8); z-index: calc( var(--z-index-menu) + 1 ); padding: var(--y-gap) var(--x-gap); animation: fadeIn 0.3s ease-in-out; color: var(--color-body-bg); } .theme-popup--show { display: flex; } .theme-popup__header { margin: 0; display: flex; justify-content: center; align-items: center; width: 100%; } .theme-popup__inner { position: relative; color: #fff; overflow: auto; width: 100%; height: auto; max-height:100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-sizing: border-box; } .theme-popup__inner__wrapper { height: 100%; padding: 4.5rem 1rem 3rem; box-sizing: border-box; } .theme-popup__image-wrapper { display: none; } .theme-popup__content { display: flex; align-items: center; flex-direction: column; text-align: center; text-transform: uppercase; } .theme-popup__body { display: grid; gap: 2rem; width:100%; } .theme-popup__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 5px; min-width: unset; cursor: pointer; z-index: 1; } .theme-popup__close svg { fill: var(--color-body-bg); } .theme-popup__footer { margin-top: auto; } .theme-popup__title { display: inline-block; padding: 1rem; color: var(--color-body-bg); border: 2px solid var(--color-body-bg); font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: 1; margin: 0 0 1rem; text-transform: uppercase; font-size: clamp(calc(var(--h2) * 0.75 / 10 * 10px), calc(var(--h2) / 1200 * 100vw), calc(var(--h2) / 10 * 10px)); width: 100%; } .theme-popup__content .theme-popup__subtitle { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: 1; margin: 0 0 1rem; color: var(--color-body-bg); text-transform: uppercase; --h3:40; font-size: clamp(calc(var(--h3) * 0.75 / 10 * 10px), calc(var(--h3) / 1200 * 100vw), calc(var(--h3) / 10 * 10px)); --shadow: var(--color-secondary); --shadow-thickness:2px; --neg-shadow-thickness:-2px; text-shadow: var(--shadow-thickness) var(--shadow-thickness) 0 var(--shadow), var(--neg-shadow-thickness) var(--shadow-thickness) 0 var(--shadow), var(--shadow-thickness) var(--neg-shadow-thickness) 0 var(--shadow), var(--neg-shadow-thickness) var(--neg-shadow-thickness) 0 var(--shadow), 0 var(--shadow-thickness) 0 var(--shadow), 0 var(--neg-shadow-thickness) 0 var(--shadow), var(--shadow-thickness) 0 0 var(--shadow), var(--neg-shadow-thickness) 0 0 var(--shadow); } .theme-popup__image { border: 2px solid #fff; } .theme-popup__btn { font-size: 1.5rem; text-transform: uppercase; padding: 1rem; color: var(--color-body-bg); border: 2px solid var(--color-body-bg); font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); transition: background-color var(--base-timing), color var(--base-timing); } .theme-popup__btn:hover, .theme-popup__btn:focus { background-color:transparent; text-decoration:none; } /* Keyframe fade animation for popup */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media(min-width: 992px) { .theme-popup__inner { max-width: 59.875rem; } .theme-popup__inner__wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; } .theme-popup__image-wrapper { display: flex; height: auto; width: 100%; overflow: hidden; position: relative; } .theme-popup__image { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; object-fit: cover; } .theme-popup__body { grid-template-columns: 42.6% 1fr; }}