.ejnpc-home-popup {
--ejnpc-blue: #004FA3;
--ejnpc-night: #1A334E;
--ejnpc-matcha: #8FA300;
--ejnpc-olive: #30331A;
--ejnpc-red: #A30C00;
--ejnpc-soft: #FFF3F3;
--ejnpc-popup-panel-bg: #ffffff;
--ejnpc-popup-title: var(--ejnpc-night);
--ejnpc-popup-text: #27384a;
--ejnpc-popup-top: var(--ejnpc-blue);
--ejnpc-popup-bottom: var(--ejnpc-olive);
--ejnpc-popup-button-bg: var(--ejnpc-matcha);
--ejnpc-popup-button-hover: #a5bb09;
--ejnpc-popup-button-text: var(--ejnpc-night);
--ejnpc-popup-secondary: var(--ejnpc-blue);
--ejnpc-popup-focus: var(--ejnpc-blue);
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
font-family: inherit;
}
.ejnpc-home-popup--color-soft {
--ejnpc-popup-panel-bg: var(--ejnpc-soft);
--ejnpc-popup-title: var(--ejnpc-night);
--ejnpc-popup-text: #27384a;
--ejnpc-popup-top: var(--ejnpc-blue);
--ejnpc-popup-bottom: var(--ejnpc-olive);
--ejnpc-popup-button-bg: var(--ejnpc-blue);
--ejnpc-popup-button-hover: #1268c5;
--ejnpc-popup-button-text: #ffffff;
--ejnpc-popup-secondary: var(--ejnpc-blue);
--ejnpc-popup-focus: var(--ejnpc-blue);
}
.ejnpc-home-popup--color-blue {
--ejnpc-popup-panel-bg: var(--ejnpc-blue);
--ejnpc-popup-title: #ffffff;
--ejnpc-popup-text: #ffffff;
--ejnpc-popup-top: var(--ejnpc-matcha);
--ejnpc-popup-bottom: var(--ejnpc-night);
--ejnpc-popup-button-bg: var(--ejnpc-matcha);
--ejnpc-popup-button-hover: #a5bb09;
--ejnpc-popup-button-text: var(--ejnpc-night);
--ejnpc-popup-secondary: #ffffff;
--ejnpc-popup-focus: var(--ejnpc-soft);
}
.ejnpc-home-popup--color-night {
--ejnpc-popup-panel-bg: var(--ejnpc-night);
--ejnpc-popup-title: #ffffff;
--ejnpc-popup-text: #eef4f8;
--ejnpc-popup-top: var(--ejnpc-blue);
--ejnpc-popup-bottom: var(--ejnpc-matcha);
--ejnpc-popup-button-bg: var(--ejnpc-matcha);
--ejnpc-popup-button-hover: #a5bb09;
--ejnpc-popup-button-text: var(--ejnpc-night);
--ejnpc-popup-secondary: #ffffff;
--ejnpc-popup-focus: var(--ejnpc-soft);
}
.ejnpc-home-popup--color-matcha {
--ejnpc-popup-panel-bg: var(--ejnpc-matcha);
--ejnpc-popup-title: var(--ejnpc-night);
--ejnpc-popup-text: var(--ejnpc-night);
--ejnpc-popup-top: var(--ejnpc-blue);
--ejnpc-popup-bottom: var(--ejnpc-olive);
--ejnpc-popup-button-bg: var(--ejnpc-blue);
--ejnpc-popup-button-hover: #1268c5;
--ejnpc-popup-button-text: #ffffff;
--ejnpc-popup-secondary: var(--ejnpc-night);
--ejnpc-popup-focus: var(--ejnpc-blue);
}
.ejnpc-home-popup--color-olive {
--ejnpc-popup-panel-bg: var(--ejnpc-olive);
--ejnpc-popup-title: #ffffff;
--ejnpc-popup-text: #f6f8ee;
--ejnpc-popup-top: var(--ejnpc-matcha);
--ejnpc-popup-bottom: var(--ejnpc-blue);
--ejnpc-popup-button-bg: var(--ejnpc-matcha);
--ejnpc-popup-button-hover: #a5bb09;
--ejnpc-popup-button-text: var(--ejnpc-night);
--ejnpc-popup-secondary: #ffffff;
--ejnpc-popup-focus: var(--ejnpc-soft);
}
.ejnpc-home-popup--color-red {
--ejnpc-popup-panel-bg: var(--ejnpc-red);
--ejnpc-popup-title: #ffffff;
--ejnpc-popup-text: #fff4f2;
--ejnpc-popup-top: var(--ejnpc-soft);
--ejnpc-popup-bottom: var(--ejnpc-night);
--ejnpc-popup-button-bg: var(--ejnpc-soft);
--ejnpc-popup-button-hover: #ffffff;
--ejnpc-popup-button-text: var(--ejnpc-night);
--ejnpc-popup-secondary: #ffffff;
--ejnpc-popup-focus: var(--ejnpc-soft);
}
.ejnpc-home-popup[hidden],
.ejnpc-home-popup.is-hidden {
display: none;
}
.ejnpc-home-popup,
.ejnpc-home-popup * {
box-sizing: border-box;
}
.ejnpc-home-popup__overlay {
position: absolute;
inset: 0;
background: rgba(26, 51, 78, 0.62);
}
.ejnpc-home-popup__panel {
position: relative;
width: min(560px, 100%);
max-height: min(720px, calc(100vh - 2rem));
overflow: auto;
padding: 2rem;
border-top: 5px solid var(--ejnpc-popup-top);
border-bottom: 4px solid var(--ejnpc-popup-bottom);
border-radius: 8px;
background: var(--ejnpc-popup-panel-bg);
color: var(--ejnpc-popup-title);
box-shadow: 0 24px 70px rgba(26, 51, 78, 0.32);
}
.ejnpc-home-popup__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
border: 1px solid rgba(26, 51, 78, 0.24);
border-radius: 50%;
background: var(--ejnpc-popup-panel-bg);
color: var(--ejnpc-popup-title);
font: inherit;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.ejnpc-home-popup__close:hover,
.ejnpc-home-popup__close:focus {
border-color: var(--ejnpc-popup-focus);
color: var(--ejnpc-popup-focus);
}
.ejnpc-home-popup__title {
margin: 0 2.4rem 0.75rem 0;
color: var(--ejnpc-popup-title);
font-size: 1.45rem;
line-height: 1.25;
}
.ejnpc-home-popup__text {
margin: 0;
color: var(--ejnpc-popup-text);
font-size: 1rem;
line-height: 1.65;
}
.ejnpc-home-popup__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
.ejnpc-home-popup__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.7rem 1.1rem;
border: 2px solid var(--ejnpc-popup-button-bg);
border-radius: 4px;
background: var(--ejnpc-popup-button-bg);
color: var(--ejnpc-popup-button-text);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.ejnpc-home-popup__button:hover,
.ejnpc-home-popup__button:focus {
background: var(--ejnpc-popup-button-hover);
border-color: var(--ejnpc-popup-button-hover);
color: var(--ejnpc-popup-button-text);
text-decoration: none;
}
.ejnpc-home-popup__secondary {
min-height: 40px;
padding: 0.55rem 0.2rem;
border: 0;
background: transparent;
color: var(--ejnpc-popup-secondary);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.ejnpc-home-popup__secondary:hover,
.ejnpc-home-popup__secondary:focus {
color: var(--ejnpc-red);
text-decoration: underline;
}
.ejnpc-home-popup__close:focus,
.ejnpc-home-popup__button:focus,
.ejnpc-home-popup__secondary:focus {
outline: 2px solid var(--ejnpc-popup-focus);
outline-offset: 3px;
}
body.ejnpc-home-popup-open {
overflow: hidden;
}
@media (max-width: 640px) {
.ejnpc-home-popup {
align-items: flex-end;
padding: 0.75rem;
}
.ejnpc-home-popup__panel {
padding: 1.4rem;
border-radius: 8px;
}
.ejnpc-home-popup__title {
font-size: 1.25rem;
}
.ejnpc-home-popup__button,
.ejnpc-home-popup__secondary {
width: 100%;
}
}
.ejnpc-home-popup__media {
margin: 1.5rem 0 1.25rem;
}
.ejnpc-home-popup .ejnpc-home-popup__image {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 40vh;
object-fit: contain;
margin: 0 auto;
border-radius: 4px;
}