:root {
--cap-cream: #fef5eb;
--cap-cream-deep: #f5e7d4;
--cap-brown: #604930;
--cap-burgundy: #72333f;
--cap-burgundy-dark: #57242e;
--cap-gold: #ddbf82;
--cap-gold-soft: rgba(221, 191, 130, 0.36);
}
.cap-popup[hidden] {
display: none !important;
}
.cap-popup {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
padding: 24px;
position: fixed;
z-index: 999999;
}
.cap-popup__backdrop {
animation: cap-fade-in 280ms ease both;
background: rgba(20, 16, 12, 0.72);
inset: 0;
position: absolute;
}
.cap-popup__dialog {
animation: cap-popup-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
background:
linear-gradient(135deg, rgba(221, 191, 130, 0.12), transparent 42%),
var(--cap-cream);
border: 1px solid var(--cap-gold);
box-shadow: 0 28px 80px rgba(20, 16, 12, 0.34);
color: var(--cap-brown);
font-family: Lato, Arial, sans-serif;
max-height: calc(100vh - 48px);
max-width: 620px;
overflow: auto;
padding: 58px 64px 62px;
position: relative;
text-align: center;
width: 100%;
}
.cap-popup__dialog::before,
.cap-popup__dialog::after {
border-color: var(--cap-gold-soft);
border-style: solid;
content: "";
height: 54px;
pointer-events: none;
position: absolute;
width: 54px;
}
.cap-popup__dialog::before {
border-width: 1px 0 0 1px;
left: 14px;
top: 14px;
}
.cap-popup__dialog::after {
border-width: 0 1px 1px 0;
bottom: 14px;
right: 14px;
}
.cap-popup__close {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
height: 44px;
padding: 0;
position: absolute;
right: 10px;
top: 10px;
width: 44px;
z-index: 2;
}
.cap-popup__close::before,
.cap-popup__close::after {
background: var(--cap-brown);
content: "";
height: 1px;
left: 12px;
position: absolute;
top: 21px;
transition: background-color 180ms ease, transform 180ms ease;
width: 20px;
}
.cap-popup__close::before {
transform: rotate(45deg);
}
.cap-popup__close::after {
transform: rotate(-45deg);
}
.cap-popup__close:hover::before,
.cap-popup__close:hover::after,
.cap-popup__close:focus-visible::before,
.cap-popup__close:focus-visible::after {
background: var(--cap-burgundy);
}
.cap-popup__close:hover::before {
transform: rotate(45deg) scaleX(1.15);
}
.cap-popup__close:hover::after {
transform: rotate(-45deg) scaleX(1.15);
}
.cap-popup__close:focus-visible,
.cap-popup__button:focus-visible {
outline: 2px solid var(--cap-burgundy);
outline-offset: 4px;
}
.cap-popup__logo {
margin: 0 auto 20px;
}
.cap-popup__logo-img {
display: block;
height: auto;
margin: 0 auto;
max-height: 68px;
max-width: 200px;
width: auto;
}
.cap-popup__ornament {
height: 34px;
margin: 0 auto 17px;
position: relative;
width: 82px;
}
.cap-popup__ornament::before,
.cap-popup__ornament::after,
.cap-popup__ornament span {
border: 1px solid var(--cap-gold);
content: "";
height: 18px;
position: absolute;
top: 5px;
transform: rotate(45deg);
width: 18px;
}
.cap-popup__ornament::before {
left: 17px;
}
.cap-popup__ornament span {
background: var(--cap-gold);
left: 31px;
}
.cap-popup__ornament::after {
left: 45px;
}
.cap-popup__kicker {
color: var(--cap-burgundy);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1.5;
margin: 0 0 12px;
text-transform: uppercase;
}
.cap-popup__title {
color: var(--cap-brown);
font-family: Lato, Arial, sans-serif;
font-size: clamp(28px, 5vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.18;
margin: 0 auto 18px;
max-width: 520px;
}
.cap-popup__message {
color: var(--cap-brown);
font-size: 17px;
font-weight: 400;
line-height: 1.65;
margin: 0 auto;
max-width: 490px;
}
.cap-popup__message p {
margin: 0 0 12px;
}
.cap-popup__message p:last-child {
margin-bottom: 0;
}
.cap-popup__button {
align-items: center;
background: var(--cap-burgundy);
border: 1px solid var(--cap-burgundy);
color: var(--cap-cream) !important;
display: inline-flex;
font-size: 15px;
font-weight: 700;
gap: 18px;
justify-content: center;
letter-spacing: 0.06em;
line-height: 1.2;
margin-top: 30px;
min-height: 52px;
padding: 14px 25px;
text-decoration: none !important;
text-transform: uppercase;
transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cap-popup__button:hover {
background: var(--cap-burgundy-dark);
border-color: var(--cap-burgundy-dark);
color: var(--cap-cream) !important;
transform: translateY(-2px);
}
.cap-popup__button span {
font-size: 21px;
font-weight: 400;
line-height: 1;
transition: transform 180ms ease;
}
.cap-popup__button:hover span {
transform: translateX(3px);
}
body.cap-popup-open {
overflow: hidden;
}
@keyframes cap-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cap-popup-in {
from {
opacity: 0;
transform: translateY(18px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 640px) {
.cap-popup {
padding: 16px;
}
.cap-popup__dialog {
max-height: calc(100vh - 32px);
padding: 46px 28px 43px;
}
.cap-popup__dialog::before,
.cap-popup__dialog::after {
height: 38px;
width: 38px;
}
.cap-popup__logo {
margin-bottom: 16px;
}
.cap-popup__logo-img {
max-height: 54px;
max-width: 160px;
}
.cap-popup__title {
font-size: 27px;
}
.cap-popup__message {
font-size: 16px;
line-height: 1.55;
}
.cap-popup__button {
font-size: 13px;
margin-top: 25px;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.cap-popup__backdrop,
.cap-popup__dialog {
animation: none;
}
.cap-popup__button,
.cap-popup__button span,
.cap-popup__close::before,
.cap-popup__close::after {
transition: none;
}
}