design: DBX Corporation 명칭 수정, 폰트 확대, 브랜드 패널 애니메이션 도형 추가
- 모든 페이지 'DBX Corp' → 'DBX Corporation' 통일 - 브랜드 패널 좌측에 천천히 움직이는 도형 5개 추가 (CSS 애니메이션) - 전체 기본 폰트 15px → 16px, 제목/카드 크기 확대 - 'Google Workspace 계정...' 문장 한 줄 표시 처리
This commit is contained in:
+120
-13
@@ -24,7 +24,7 @@
|
||||
|
||||
body {
|
||||
font-family: "Pretendard", "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
@@ -88,7 +88,7 @@ a { color: inherit; text-decoration: none; }
|
||||
.brand-logo-mark svg { color: #fff; }
|
||||
|
||||
.brand-name {
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: -.3px;
|
||||
@@ -114,19 +114,25 @@ a { color: inherit; text-decoration: none; }
|
||||
}
|
||||
|
||||
.brand-headline {
|
||||
font-size: clamp(28px, 3.2vw, 42px);
|
||||
font-size: clamp(32px, 3.6vw, 48px);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1.25;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -.5px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.brand-desc {
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,.55);
|
||||
line-height: 1.7;
|
||||
max-width: 380px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.brand-desc-nowrap {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,.55);
|
||||
white-space: nowrap;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.brand-divider {
|
||||
@@ -166,16 +172,16 @@ a { color: inherit; text-decoration: none; }
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: clamp(22px, 2.8vw, 30px);
|
||||
font-size: clamp(24px, 3vw, 32px);
|
||||
font-weight: 700;
|
||||
color: var(--navy);
|
||||
letter-spacing: -.4px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 36px;
|
||||
@@ -541,16 +547,16 @@ a { color: inherit; text-decoration: none; }
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 17px;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: var(--navy);
|
||||
letter-spacing: -.3px;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
@@ -578,6 +584,107 @@ a { color: inherit; text-decoration: none; }
|
||||
.menu-card:hover .card-link { gap: 8px; }
|
||||
|
||||
|
||||
/* ════════════════════════════════════════════════════
|
||||
브랜드 패널 — 움직이는 도형
|
||||
════════════════════════════════════════════════════ */
|
||||
|
||||
.brand-shapes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 큰 원 테두리 — 우측 상단 */
|
||||
.shape-1 {
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
border: 1.5px solid rgba(30, 86, 160, .25);
|
||||
border-radius: 50%;
|
||||
top: -100px;
|
||||
right: -80px;
|
||||
animation: shapeFloat1 28s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 중간 다이아몬드 — 좌측 하단 */
|
||||
.shape-2 {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: rgba(30, 86, 160, .1);
|
||||
border-radius: 24px;
|
||||
bottom: 100px;
|
||||
left: -50px;
|
||||
animation: shapeFloat2 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 작은 원 — 중앙 우측 */
|
||||
.shape-3 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border: 1.5px solid rgba(255, 255, 255, .12);
|
||||
border-radius: 50%;
|
||||
top: 42%;
|
||||
right: 14%;
|
||||
animation: shapeFloat3 19s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 큰 둥근 사각형 테두리 — 하단 중앙 */
|
||||
.shape-4 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 1px solid rgba(30, 86, 160, .2);
|
||||
border-radius: 40px;
|
||||
bottom: -70px;
|
||||
right: 18%;
|
||||
animation: shapeFloat4 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 아주 작은 원 — 상단 좌측 */
|
||||
.shape-5 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(30, 86, 160, .18);
|
||||
border-radius: 50%;
|
||||
top: 22%;
|
||||
left: 18%;
|
||||
animation: shapeFloat5 16s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shapeFloat1 {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
25% { transform: translate(-18px, 28px); }
|
||||
50% { transform: translate(12px, 18px); }
|
||||
75% { transform: translate(-8px, -14px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat2 {
|
||||
0%, 100% { transform: rotate(45deg) translate(0, 0); }
|
||||
33% { transform: rotate(62deg) translate(18px, -22px); }
|
||||
66% { transform: rotate(32deg) translate(-14px, 18px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat3 {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(22px, -28px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat4 {
|
||||
0%, 100% { transform: rotate(12deg) translate(0, 0); }
|
||||
40% { transform: rotate(22deg) translate(-18px, -12px); }
|
||||
80% { transform: rotate(4deg) translate(14px, 8px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat5 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(14px, -18px) scale(1.15); }
|
||||
66% { transform: translate(-10px, 12px) scale(0.9); }
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════
|
||||
반응형
|
||||
════════════════════════════════════════════════════ */
|
||||
|
||||
Reference in New Issue
Block a user