kyeongmin
360cd8e44c
수정: - compare-2col-badge, compare-detail-gradient, hero-icon-cards 개선 신규 블록: - cards: category-strip-table, system-2col-center, hero-icon-cards_1 - emphasis: checklist-dark - visuals: cycle-orbit - new/: cards-3col-persona, compare-vs-rows, cycle-3way-intersect 등 8개 - redesign/: card_hero-icon-cards_1 - svg/: arc_left, arrow_conclusion, arrow_down, line_divider - BEPs: process-product-2col SVG + 테스트 catalog.yaml 전면 재정비 (슬롯 스키마, height_cost, 카테고리 정리) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
62 lines
1.8 KiB
HTML
62 lines
1.8 KiB
HTML
<!-- 선언문 pill 강조: CSS gradient 캡슐 배경 + 센터 텍스트 + 하이라이트 -->
|
||
<!--
|
||
📋 statement-pill-highlight
|
||
─────────────────
|
||
용도: 핵심 선언/결론 메시지를 캡슐형 배경 위에 한 줄로 강조
|
||
슬롯: text (HTML — <em>으로 하이라이트)
|
||
Figma 원본: Frame 1171281207 (node 51:170, 3547×163)
|
||
수학적 계산:
|
||
scale = 1280 / 3547 = 0.36087
|
||
pill height: 163 × S ≈ 59px → padding 기반 (텍스트 양 대응)
|
||
font: 80px × S ≈ 29px, line-height: 90/80 = 1.125
|
||
border-radius: 97px (Figma) → capsule (999px)
|
||
색상 (CSS — AI 조정 가능):
|
||
배경 gradient: 픽셀 분석 #3b3523(5%)→#263a2a(50%)→#113f31(95%)
|
||
텍스트: #ffffff, Bold 700
|
||
하이라이트(<em>): #ffee33
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5)
|
||
이미지 의존: 없음 (순수 CSS)
|
||
-->
|
||
<div class="block-sph">
|
||
<div class="sph-pill">
|
||
<div class="sph-text">{{ text|safe }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.block-sph {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
/*
|
||
캡슐: Figma 3547×163, border-radius 97 → 999px
|
||
배경: 픽셀 분석 기반 CSS gradient (원본에 미세 네트워크 텍스처 있었으나 생략)
|
||
*/
|
||
.sph-pill {
|
||
width: 100%;
|
||
min-height: 59px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 14px 48px;
|
||
}
|
||
|
||
/* 텍스트: Figma 80px/90px Bold white → scaled 29px */
|
||
.sph-text {
|
||
font-size: 29px;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 1.125;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
word-break: keep-all;
|
||
}
|
||
|
||
/* <em> 하이라이트: Figma #ffee33 */
|
||
.sph-text em {
|
||
color: #ffee33;
|
||
font-style: normal;
|
||
}
|
||
</style>
|