참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
COASTLINE: BLACK ICE - Theme
Dense breathing halftone background v37
========================================= */
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;
}
/* fixed dense halftone plate */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background-color: #000;
background-image:
radial-gradient(circle at 0.95px 0.95px, rgba(226,226,226,0.94) 0.85px, transparent 1.15px);
background-size: 8px 8px;
background-position: 0 0;
opacity: 1;
}
/* main dark breathing 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 22% 16% at 16% 12%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.72) 66%, transparent 84%),
radial-gradient(ellipse 19% 15% at 41% 10%, rgba(0,0,0,0.88) 0 48%, rgba(0,0,0,0.56) 64%, transparent 82%),
radial-gradient(ellipse 23% 17% at 72% 15%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.74) 67%, transparent 84%),
radial-gradient(ellipse 17% 14% at 88% 26%, rgba(0,0,0,0.82) 0 46%, rgba(0,0,0,0.50) 63%, transparent 80%),
radial-gradient(ellipse 24% 18% at 24% 36%, rgba(0,0,0,0.94) 0 50%, rgba(0,0,0,0.70) 66%, transparent 84%),
radial-gradient(ellipse 18% 14% at 51% 34%, rgba(0,0,0,0.84) 0 46%, rgba(0,0,0,0.50) 62%, transparent 80%),
radial-gradient(ellipse 24% 18% at 79% 39%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.72) 67%, transparent 84%),
radial-gradient(ellipse 21% 16% at 12% 63%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.72) 66%, transparent 84%),
radial-gradient(ellipse 18% 14% at 38% 60%, rgba(0,0,0,0.84) 0 46%, rgba(0,0,0,0.50) 62%, transparent 80%),
radial-gradient(ellipse 22% 17% at 64% 70%, rgba(0,0,0,0.94) 0 49%, rgba(0,0,0,0.68) 65%, transparent 83%),
radial-gradient(ellipse 20% 16% at 86% 82%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.74) 67%, transparent 84%),
radial-gradient(ellipse 14% 12% at 8% 88%, rgba(0,0,0,0.82) 0 46%, rgba(0,0,0,0.48) 62%, transparent 80%),
radial-gradient(ellipse 18% 14% at 46% 87%, rgba(0,0,0,0.86) 0 47%, rgba(0,0,0,0.52) 63%, transparent 81%),
radial-gradient(ellipse 14% 12% at 72% 92%, rgba(0,0,0,0.78) 0 45%, rgba(0,0,0,0.42) 60%, transparent 78%);
animation: halftoneDenseBreathA 13.5s ease-in-out infinite;
filter: blur(8px);
opacity: 0.84;
}
/* secondary irregular breathing mask to break the clean ellipses */
html::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-repeat: no-repeat;
background-image:
radial-gradient(ellipse 12% 10% at 10% 10%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
radial-gradient(ellipse 15% 11% at 23% 18%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
radial-gradient(ellipse 12% 10% at 35% 9%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
radial-gradient(ellipse 14% 11% at 55% 14%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
radial-gradient(ellipse 11% 9% at 70% 10%, rgba(0,0,0,0.30) 0 38%, transparent 70%),
radial-gradient(ellipse 13% 10% at 86% 18%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
radial-gradient(ellipse 14% 11% at 18% 34%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
radial-gradient(ellipse 12% 10% at 43% 31%, rgba(0,0,0,0.28) 0 38%, transparent 70%),
radial-gradient(ellipse 15% 11% at 66% 36%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
radial-gradient(ellipse 13% 10% at 84% 46%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
radial-gradient(ellipse 15% 11% at 13% 58%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
radial-gradient(ellipse 12% 10% at 30% 56%, rgba(0,0,0,0.28) 0 38%, transparent 70%),
radial-gradient(ellipse 13% 10% at 49% 62%, rgba(0,0,0,0.30) 0 38%, transparent 70%),
radial-gradient(ellipse 15% 11% at 72% 68%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
radial-gradient(ellipse 13% 10% at 90% 74%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
radial-gradient(ellipse 12% 10% at 20% 82%, rgba(0,0,0,0.30) 0 38%, transparent 70%),
radial-gradient(ellipse 14% 11% at 41% 83%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
radial-gradient(ellipse 13% 10% at 60% 88%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
radial-gradient(ellipse 11% 9% at 82% 88%, rgba(0,0,0,0.34) 0 40%, transparent 72%);
animation: halftoneDenseBreathB 18s ease-in-out infinite;
filter: blur(14px);
opacity: 0.72;
}
@keyframes halftoneDenseBreathA {
0% {
opacity: 0.84;
filter: blur(8px) saturate(1);
}
12% {
opacity: 0.94;
filter: blur(9px) saturate(1.02);
}
25% {
opacity: 0.80;
filter: blur(7px) saturate(0.98);
}
38% {
opacity: 0.98;
filter: blur(10px) saturate(1.04);
}
52% {
opacity: 0.82;
filter: blur(7px) saturate(0.98);
}
67% {
opacity: 0.96;
filter: blur(10px) saturate(1.03);
}
82% {
opacity: 0.78;
filter: blur(7px) saturate(0.98);
}
100% {
opacity: 0.84;
filter: blur(8px) saturate(1);
}
}
@keyframes halftoneDenseBreathB {
0% {
opacity: 0.70;
filter: blur(14px);
}
18% {
opacity: 0.82;
filter: blur(16px);
}
35% {
opacity: 0.60;
filter: blur(12px);
}
54% {
opacity: 0.86;
filter: blur(17px);
}
72% {
opacity: 0.64;
filter: blur(13px);
}
88% {
opacity: 0.80;
filter: blur(16px);
}
100% {
opacity: 0.70;
filter: blur(14px);
}
}
@media (prefers-reduced-motion: reduce) {
html::before,
body::after {
animation: none !important;
}
}