106 lines
2.3 KiB
CSS
106 lines
2.3 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* 색상 변수 정의 */
|
||
:root {
|
||
--disable-light: #F8F8F8;
|
||
--disable-normal: #B8B9B4;
|
||
--disable-dark: #8A8B87;
|
||
--disable-darker: #40413F;
|
||
|
||
--point-light: #F9FBFF;
|
||
--point-normal: #C2D6FA;
|
||
--point-dark: #92A1BC;
|
||
--point-darker: #444B58;
|
||
|
||
--text-title: #1D1D1D;
|
||
--text-detail: #545454;
|
||
--text-disabled: #8E8E8E;
|
||
--text-white: #FFFFFF;
|
||
--text-black: #000000;
|
||
--text-border: #C6C6C6;
|
||
}
|
||
|
||
/* 클리핑 애니메이션 (왼쪽부터 점점 보임) */
|
||
@keyframes clipReveal {
|
||
from {
|
||
clip-path: inset(0 100% 0 0); /* 왼쪽만 남기고 나머지 잘라냄 */
|
||
}
|
||
to {
|
||
clip-path: inset(0 0 0 0); /* 전체 다 보임 */
|
||
}
|
||
}
|
||
|
||
.clip-reveal {
|
||
animation: clipReveal 2500ms ease forwards;
|
||
}
|
||
/* 텍스트 블링크 */
|
||
@keyframes blink {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.animate-blink {
|
||
animation: blink 1.2s infinite;
|
||
}
|
||
|
||
/* 로고 마스크 설정 */
|
||
.mask-logo {
|
||
-webkit-mask-image: url('/logo.png');
|
||
-webkit-mask-size: cover;
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-image: url('/logo.png');
|
||
mask-size: cover;
|
||
mask-repeat: no-repeat;
|
||
mask-position: center;
|
||
}
|
||
|
||
:root {
|
||
/* Disable */
|
||
--disable-light: #F8F8F8;
|
||
--disable-normal: #B8B9B4;
|
||
--disable-dark: #8A8B87;
|
||
--disable-darker: #40413F;
|
||
|
||
/* Information */
|
||
--information-light: #F7FBF8;
|
||
--information-normal: #B2DBBB;
|
||
--information-dark: #86A48C;
|
||
--information-darker: #3E4D41;
|
||
|
||
/* Point */
|
||
--point-light: #F9FBFF;
|
||
--point-normal: #C2D6FA;
|
||
--point-dark: #92A1BC;
|
||
--point-darker: #444B58;
|
||
|
||
/* Second */
|
||
--second-light: #F2F0ED;
|
||
--second-normal: #79654E;
|
||
--second-dark: #5D4C3B;
|
||
--second-darker: #2A231B;
|
||
|
||
/* Normal */
|
||
--normal-light: #FDFCFB;
|
||
--normal-normal: #EBDFD2;
|
||
--normal-dark: #B0A79E;
|
||
--normal-darker: #524E4A;
|
||
|
||
/* Danger */
|
||
--danger-light: #FFF9F9;
|
||
--danger-normal: #FDC6C3;
|
||
--danger-dark: #BE9592;
|
||
--danger-darker: #594544;
|
||
|
||
/* 湲고<E6B9B2> <20>띿뒪<EB9DBF><EB92AA> 諛<> <20>곹깭 */
|
||
--text-title: #1D1D1D;
|
||
--text-detail: #545454;
|
||
--text-disabled: #8E8E8E;
|
||
--text-white: #FFFFFF;
|
||
--text-black: #000000;
|
||
--text-border: #C6C6C6;
|
||
} |