참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
COASTLINE: BLACK ICE - Theme
Halftone blotch mask background v36
========================================= */
html {
min-height: 100%;
background-color: #000 !important;
}
body {
min-height: 100%;
margin: 0 !important;
background: transparent !important;
position: relative;
}
/* legacy JS background off */
.WW-bg {
display: none !important;
}
/* static halftone plate */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background-color: #000;
background-image:
radial-gradient(circle at 1px 1px, rgba(226,226,226,0.86) 1.05px, transparent 1.45px);
background-size: 10px 10px;
background-position: 0 0;
opacity: 1;
}
/* breathing dark blotch mask over the fixed halftone */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-repeat: no-repeat;
background-image:
radial-gradient(ellipse 24% 18% at 18% 14%, rgba(0,0,0,0.90) 0 52%, rgba(0,0,0,0.58) 68%, transparent 84%),
radial-gradient(ellipse 22% 16% at 48% 12%, rgba(0,0,0,0.84) 0 50%, rgba(0,0,0,0.46) 67%, transparent 84%),
radial-gradient(ellipse 28% 20% at 74% 18%, rgba(0,0,0,0.92) 0 52%, rgba(0,0,0,0.56) 68%, transparent 84%),
radial-gradient(ellipse 26% 19% at 28% 39%, rgba(0,0,0,0.90) 0 52%, rgba(0,0,0,0.54) 69%, transparent 84%),
radial-gradient(ellipse 23% 17% at 58% 35%, rgba(0,0,0,0.88) 0 50%, rgba(0,0,0,0.48) 67%, transparent 83%),
radial-gradient(ellipse 30% 22% at 82% 42%, rgba(0,0,0,0.92) 0 52%, rgba(0,0,0,0.56) 69%, transparent 86%),
radial-gradient(ellipse 28% 20% at 14% 68%, rgba(0,0,0,0.92) 0 54%, rgba(0,0,0,0.58) 71%, transparent 87%),
radial-gradient(ellipse 23% 17% at 42% 62%, rgba(0,0,0,0.88) 0 50%, rgba(0,0,0,0.50) 66%, transparent 82%),
radial-gradient(ellipse 25% 18% at 66% 72%, rgba(0,0,0,0.90) 0 52%, rgba(0,0,0,0.54) 69%, transparent 84%),
radial-gradient(ellipse 28% 22% at 86% 82%, rgba(0,0,0,0.94) 0 54%, rgba(0,0,0,0.60) 71%, transparent 86%),
radial-gradient(ellipse 18% 14% at 6% 90%, rgba(0,0,0,0.88) 0 52%, rgba(0,0,0,0.48) 68%, transparent 84%),
radial-gradient(ellipse 18% 14% at 51% 88%, rgba(0,0,0,0.86) 0 50%, rgba(0,0,0,0.46) 66%, transparent 82%);
animation: halftoneBreathA 16s ease-in-out infinite;
}
/* second soft mask layer to avoid clean radial circles and make the surface feel more organic */
html::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.78;
background-repeat: no-repeat;
background-image:
radial-gradient(ellipse 16% 12% at 12% 10%, rgba(0,0,0,0.42) 0 44%, transparent 76%),
radial-gradient(ellipse 20% 15% at 39% 18%, rgba(0,0,0,0.36) 0 42%, transparent 76%),
radial-gradient(ellipse 15% 12% at 67% 12%, rgba(0,0,0,0.34) 0 40%, transparent 74%),
radial-gradient(ellipse 17% 12% at 86% 24%, rgba(0,0,0,0.40) 0 44%, transparent 76%),
radial-gradient(ellipse 18% 14% at 20% 47%, rgba(0,0,0,0.40) 0 44%, transparent 76%),
radial-gradient(ellipse 16% 12% at 50% 44%, rgba(0,0,0,0.30) 0 40%, transparent 72%),
radial-gradient(ellipse 20% 15% at 76% 55%, rgba(0,0,0,0.34) 0 42%, transparent 74%),
radial-gradient(ellipse 18% 14% at 10% 78%, rgba(0,0,0,0.40) 0 44%, transparent 76%),
radial-gradient(ellipse 15% 12% at 34% 72%, rgba(0,0,0,0.30) 0 40%, transparent 72%),
radial-gradient(ellipse 18% 14% at 62% 84%, rgba(0,0,0,0.34) 0 42%, transparent 74%),
radial-gradient(ellipse 18% 14% at 88% 74%, rgba(0,0,0,0.40) 0 44%, transparent 76%);
animation: halftoneBreathB 21s ease-in-out infinite reverse;
}
@keyframes halftoneBreathA {
0% {
opacity: 0.76;
filter: blur(9px);
}
20% {
opacity: 0.90;
filter: blur(10px);
}
38% {
opacity: 0.82;
filter: blur(8px);
}
55% {
opacity: 0.96;
filter: blur(11px);
}
74% {
opacity: 0.84;
filter: blur(8px);
}
100% {
opacity: 0.76;
filter: blur(9px);
}
}
@keyframes halftoneBreathB {
0% {
opacity: 0.58;
filter: blur(16px);
}
24% {
opacity: 0.72;
filter: blur(18px);
}
47% {
opacity: 0.50;
filter: blur(15px);
}
71% {
opacity: 0.74;
filter: blur(19px);
}
100% {
opacity: 0.58;
filter: blur(16px);
}
}
@media (prefers-reduced-motion: reduce) {
html::before,
body::after {
animation: none !important;
}
}