[feat] landing: 무대 위 2차 CTA 에 유리 재질 — 데모 요청·상담 신청

두 버튼 모두 무대에서 stageGhost 를 쓰므로 변형 하나로 해결된다.

구성은 넷 — 옅은 흰 채움, 뒤를 흐리는 backdrop-blur(12px), 위쪽 1px 안쪽 하이라이트
(유리 모서리에 빛이 걸리는 부분), 아래로 깔리는 부드러운 그림자. 채도를 살짝 올리면
뒤가 흐려지며 빠지는 색기가 돌아온다(saturate 1.5).

테두리는 white/40 에서 더 내리지 않았다. /30 이면 무대 광원부(#16205A) 대비가
2.60:1 로 떨어져 WCAG 1.4.11(UI 경계 3:1)에 미달한다 — 유리 느낌 때문에 버튼이
안 보이던 원래 문제(대비 1.09:1)로 되돌아간다. 투명감은 채움과 blur 로 내고 테두리는 지킨다.

hover 는 흰색 반전이 아니라 채움을 밝힌다. 유리는 뒤가 비치는 게 정체성이라
불투명하게 뒤집으면 그 순간 유리가 아니게 된다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-08-06 11:00:46 +09:00
parent d2f1a8f6f4
commit ea1249429a

View File

@ -24,7 +24,21 @@ const buttonVariants = cva(
. nav .
.
"누를 수 있는 것" . */
stageGhost: "bg-white/10 hover:bg-white text-white hover:text-stage border border-white/40 hover:border-white",
/* (glassmorphism). .
, backdrop-blur, 1px
( ), ( ).
(saturate) .
white/40 . /30 (#16205A)
2.60:1 WCAG 1.4.11(UI 3:1)
. blur .
hover .
. */
stageGhost:
"bg-white/12 hover:bg-white/25 text-white border border-white/40 hover:border-white/60 " +
"backdrop-blur-md backdrop-saturate-150 " +
"shadow-[inset_0_1px_0_0_rgba(255,255,255,0.30),0_8px_24px_-10px_rgba(3,6,15,0.7)]",
},
/* 레퍼런스(statworx) 실측: 10.4px / 600 / (radius 39px) / 12·24 / 33px.
.