forked from AcaMate/AcaMate_Web
60 lines
1.2 KiB
CSS
60 lines
1.2 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;
|
|
} |