* {
box-sizing: border-box;
}
html,
body {
user-select: none;
-webkit-user-select: none;
}
body {
margin: 0;
min-height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
font-family:
Georgia,
"Times New Roman",
serif;
color: #ffe63f;
background-color: #080808;
background-image:
linear-gradient(
45deg,
#8f0808 25%,
transparent 25%
),
linear-gradient(
-45deg,
#8f0808 25%,
transparent 25%
),
linear-gradient(
45deg,
transparent 75%,
#8f0808 75%
),
linear-gradient(
-45deg,
transparent 75%,
#8f0808 75%
);
background-size:
28px 28px;
background-position:
0 0,
0 14px,
14px -14px,
-14px 0;
background-attachment:
fixed;
}
/* ========================================
MAIN PAGE
======================================== */
.statement-shell {
width:
100%;
min-width:
0;
padding:
72px
96px
90px;
display:
flex;
justify-content:
center;
}
.statement-card {
width:
min(
1050px,
calc(100vw - 48px)
);
max-width:
1050px;
min-width:
0;
margin:
0 auto;
padding:
62px
70px
52px;
background:
rgba(
70,
70,
70,
0.90
);
border:
1px solid
rgba(
220,
220,
220,
0.42
);
box-shadow:
0 20px 70px
rgba(
0,
0,
0,
0.7
);
overflow-wrap:
anywhere;
}
/* ========================================
HEADER
======================================== */
.statement-header {
text-align:
center;
margin-bottom:
50px;
}
.retired-label {
display:
inline-block;
margin-bottom:
18px;
padding:
7px 14px;
border:
1px solid
rgba(
255,
230,
63,
0.7
);
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.22em;
color:
#ffe63f;
}
.statement-header h1 {
margin:
0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(
42px,
7vw,
78px
);
line-height:
0.98;
font-weight:
700;
letter-spacing:
-0.03em;
color:
#ffe63f;
-webkit-text-stroke:
0.55px
#777777;
text-shadow:
1px 1px 0
rgba(
0,
0,
0,
0.8
);
}
.header-rule {
width:
140px;
height:
3px;
margin:
34px auto 0;
background:
#ffe63f;
}
/* ========================================
STATEMENT TEXT
======================================== */
.statement-copy {
font-size:
22px;
line-height:
1.68;
letter-spacing:
0.008em;
color:
#ffff33;
-webkit-text-stroke:
0.25px
#808080;
text-shadow:
1px 1px 0
rgba(
0,
0,
0,
0.78
);
}
.statement-copy p {
margin:
0 0 30px;
}
.statement-copy a {
color: #ffff33;
text-decoration: underline;
}
.statement-copy .store-button {
text-decoration: none;
}
.statement-copy .store-button:visited {
text-decoration: none;
}
.statement-copy .store-button:hover {
text-decoration: none;
}
.statement-copy a:visited {
color: #ffff33;
}
.statement-copy a:hover {
color: #ffff33;
}
.big-announcement {
margin:
55px 0;
padding:
28px 20px;
text-align:
center;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
clamp(
28px,
5vw,
47px
);
line-height:
1.08;
letter-spacing:
0.03em;
color:
#ffe63f;
border-top:
3px solid
#ffe63f;
border-bottom:
3px solid
#ffe63f;
}
.store-heading {
margin:
58px 0 22px;
text-align:
center;
font-size:
21px;
font-weight:
400;
}
/* ========================================
STORE BUTTON
======================================== */
.store-button {
display:
block;
width:
min(
720px,
100%
);
margin:
0 auto 55px;
padding:
30px 28px;
text-align:
center;
text-decoration:
none;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
clamp(
22px,
4vw,
38px
);
font-weight:
900;
letter-spacing:
0.035em;
color:
#ffe63f;
background:
#528d21;
border:
4px solid
#74b734;
border-radius:
9px;
box-shadow:
0 8px 0
#284b0c,
0 18px 35px
rgba(
0,
0,
0,
0.4
);
transition:
transform
130ms ease,
box-shadow
130ms ease,
background
130ms ease;
overflow-wrap:
anywhere;
word-break:
break-word;
}
.store-label-mobile {
display: none;
}
.store-button:hover {
background:
#609f27;
transform:
translateY(
-3px
);
box-shadow:
0 11px 0
#284b0c,
0 22px 40px
rgba(
0,
0,
0,
0.48
);
}
.store-button:active {
transform:
translateY(
4px
);
box-shadow:
0 4px 0
#284b0c;
}
/* ========================================
DISCLAIMER
======================================== */
.statement-footer {
margin-top:
60px;
padding-top:
28px;
border-top:
1px solid
rgba(
255,
255,
255,
0.25
);
text-align:
center;
}
.disclaimer-button {
appearance:
none;
border:
1px solid
#ffe63f;
background:
transparent;
color:
#ffe63f;
padding:
11px 25px;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
13px;
font-weight:
700;
letter-spacing:
0.12em;
text-transform:
uppercase;
cursor:
pointer;
}
.disclaimer-button:hover {
color:
#111111;
background:
#ffe63f;
}
/* ========================================
MODAL
======================================== */
.modal-overlay {
position:
fixed;
inset:
0;
z-index:
1000;
display:
none;
align-items:
center;
justify-content:
center;
padding:
30px;
background:
rgba(
0,
0,
0,
0.82
);
}
.modal-overlay.visible {
display:
flex;
}
.modal-box {
position:
relative;
width:
min(
650px,
calc(100vw - 40px)
);
max-height:
calc(100vh - 40px);
overflow-y:
auto;
padding:
45px;
background:
#393939;
border:
2px solid
#ffff33;
color:
#ffff33;
box-shadow:
0 25px 80px
rgba(
0,
0,
0,
0.75
);
}
.modal-box h2 {
margin:
0 0 25px;
font-size:
32px;
}
.modal-box p {
margin:
0 0 18px;
font-size:
17px;
line-height:
1.55;
}
.modal-box a {
color: #ffff33;
text-decoration: underline;
}
.modal-box a:visited {
color: #ffff33;
}
.modal-box a:hover {
color: #ffff33;
}
.modal-close {
position:
absolute;
top:
12px;
right:
18px;
padding:
0;
border:
0;
background:
transparent;
color:
#ffe63f;
font-size:
34px;
cursor:
pointer;
}
img,
svg,
video,
iframe {
max-width:
100%;
}
/* ========================================
MOBILE
======================================== */
@media (
max-width: 700px
) {
.statement-shell {
width:
100%;
padding:
30px
16px
50px;
display:
flex;
justify-content:
center;
}
.store-label-desktop {
display: none;
}
.store-label-mobile {
display: block;
}
.statement-card {
width:
100%;
max-width:
100%;
min-width:
0;
margin:
0 auto;
padding:
38px
22px
35px;
}
.statement-copy {
font-size:
19px;
line-height:
1.62;
}
.statement-copy p {
margin-bottom:
24px;
}
.store-button {
padding:
23px
15px;
}
.store-button {
font-size: clamp(10px, 3.25vw, 13px);
white-space: nowrap;
padding-left: 6px;
padding-right: 6px;
}
.store-label-mobile {
display: inline;
white-space: nowrap;
letter-spacing: 0;
}
.modal-overlay {
padding:
14px;
}
.modal-box {
width:
100%;
max-width:
100%;
max-height:
calc(100vh - 28px);
padding:
36px
22px
26px;
}
}