.hs-notice {
position:fixed;
z-index:2147483000;
right:18px;
bottom:18px;
left:18px;
display:flex;
justify-content:center;
pointer-events:none;
opacity:0;
transform:translateY(14px);
transition:
opacity .18s ease,
transform .18s ease;
}
.hs-notice.is-visible {
opacity:1;
transform:translateY(0);
}
.hs-notice__panel {
position:relative;
box-sizing:border-box;
width:min(660px,100%);
padding:21px 58px 20px 22px;
background:
radial-gradient(circle at 92% 4%,rgba(192,153,66,.10),transparent 30%),
linear-gradient(145deg,#fffdf8,#f6efe2);
border:1px solid rgba(154,119,46,.34);
border-radius:16px;
box-shadow:
0 22px 54px rgba(12,30,46,.24),
0 0 0 1px rgba(255,255,255,.72) inset;
pointer-events:auto;
}
.hs-notice__brand {
display:flex;
align-items:center;
gap:8px;
margin-bottom:10px;
color:#173b59;
font:800 10px/1 Arial,Helvetica,sans-serif;
letter-spacing:1.4px;
}
.hs-notice__brand-mark {
display:flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:50%;
background:#173b59;
border:1px solid rgba(185,150,67,.5);
color:#dabb69;
font-size:8px;
}
.hs-notice__eyebrow {
margin-bottom:5px;
color:#9a772e;
font:800 9px/1.2 Arial,Helvetica,sans-serif;
letter-spacing:1.25px;
}
.hs-notice__headline {
margin:0 0 9px;
color:#172b3d;
font:600 21px/1.22 Georgia,"Times New Roman",serif;
}
.hs-notice__copy,
.hs-notice__thanks {
color:#59636b;
font:400 12.5px/1.6 Arial,Helvetica,sans-serif;
}
.hs-notice__datebox {
display:grid;
grid-template-columns:auto max-content;
gap:5px 12px;
align-items:center;
margin:13px 0 10px;
padding:11px 13px;
border-left:3px solid #b6923e;
border-radius:8px;
background:#f1e8d6;
color:#3c4b55;
font:600 12px/1.45 Arial,Helvetica,sans-serif;
}
.hs-notice__datebox strong {
color:#855f16;
font-weight:800;
text-align:right;
}
.hs-notice__close {
position:absolute;
top:12px;
right:12px;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
padding:0;
border:1px solid rgba(23,59,89,.13);
border-radius:50%;
background:rgba(255,255,255,.9);
color:#455765;
font:400 22px/1 Arial,Helvetica,sans-serif;
cursor:pointer;
}
.hs-notice__close:hover {
background:#fff;
color:#173b59;
}
@media (max-width:600px) {
.hs-notice {
right:9px;
bottom:9px;
left:9px;
}
.hs-notice__panel {
padding:17px 44px 16px 16px;
border-radius:14px;
}
.hs-notice__brand {
margin-bottom:8px;
font-size:8.5px;
letter-spacing:1.15px;
}
.hs-notice__brand-mark {
width:23px;
height:23px;
}
.hs-notice__eyebrow {
font-size:8px;
}
.hs-notice__headline {
margin-bottom:7px;
font-size:17px;
}
.hs-notice__copy,
.hs-notice__thanks {
font-size:11.25px;
line-height:1.55;
}
.hs-notice__datebox {
grid-template-columns:1fr;
gap:2px;
margin:10px 0 8px;
padding:9px 10px;
font-size:11px;
}
.hs-notice__datebox strong {
margin-bottom:5px;
text-align:left;
}
.hs-notice__datebox strong:last-child {
margin-bottom:0;
}
.hs-notice__close {
top:9px;
right:9px;
width:29px;
height:29px;
font-size:20px;
}
}