ypshimandClaude Haiku 5.5
fc520ec03d
공용 파일(main.ts·index.html·style.css)에서 서로 얽혀 있어 한 커밋으로 묶음. - 지반: ① 형상 프로젝트 지반모델 관리창(생성·JSON 불러오기·교각별 비교·선택 적용), 프로젝트 JSON 내장 groundModel 추출, 교대 8행 통합 적용·공통지형 중복격자 제외 - 재료표·수량: 상단 ⑤ 메뉴·배근 바로가기, 결과 교각/탭 기억, 수량 워크북·정합 보정 - 랜딩: 옥성교 6교각 히어로 이미지·투영 강조점·좌→우 광선·지형 라운드/도로 연결 - 검증 스크립트(verify-project-ground/ground-abutments/okseong-user-files/quantity-*/landing-hero 등) 정본: DOC/04_실행/실행_*_2026-11-09_v0.1.00.md Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
240 lines
12 KiB
CSS
240 lines
12 KiB
CSS
/* Premium White UI. Theme selectors never reach the application outside this overlay. */
|
|
@media (min-width: 761px) and (max-width: 1400px) {
|
|
.landing-white .landing-guide-hint { top: 20px; }
|
|
}
|
|
@media (max-width: 760px) and (min-height: 760px) {
|
|
.landing-white .landing-guide-hint { position: fixed; top: auto; bottom: 16px; }
|
|
}
|
|
.landing-overlay.landing-white {
|
|
--landing-bg: #f8fafc;
|
|
--landing-panel: rgba(255, 255, 255, .84);
|
|
--landing-primary: #087fcb;
|
|
--landing-line: #dce6f0;
|
|
--landing-text: #14263d;
|
|
--landing-muted: #64748b;
|
|
--landing-ink: #14263d;
|
|
--landing-blue: #087fcb;
|
|
--landing-blue-strong: #076eaf;
|
|
--landing-soft-blue: #eff6ff;
|
|
color-scheme: light;
|
|
background: var(--landing-bg);
|
|
color: var(--landing-ink);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* White atmosphere and a soft, slow-moving CAD grid. */
|
|
.landing-white .landing-hero {
|
|
background: radial-gradient(ellipse at 50% 39%, #ffffff 0%, #f1f7fc 38%, #f8fafc 77%);
|
|
}
|
|
.landing-white .landing-hero::before {
|
|
background: radial-gradient(ellipse at 24% 35%, #bedcf541, transparent 46%), radial-gradient(ellipse at 77% 50%, #c5edfa45, transparent 42%);
|
|
}
|
|
.landing-white .landing-engineering-grid {
|
|
opacity: .55;
|
|
background-image: linear-gradient(#286c9f0c 1px, transparent 1px), linear-gradient(90deg, #286c9f0c 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
animation: landing-white-blueprint 42s linear infinite alternate;
|
|
}
|
|
.landing-white .landing-glow {
|
|
background: radial-gradient(ellipse, #b6e6fa69, #d7e9f63b 47%, transparent 75%);
|
|
filter: blur(32px);
|
|
}
|
|
.landing-white .landing-light-ring {
|
|
border-color: #96b9d735;
|
|
background: conic-gradient(transparent 10%, #b9d6eb1f 25%, transparent 36%, #b4d9ed47 51%, transparent 67%, #ccdeeb25 80%, transparent);
|
|
box-shadow: 0 0 80px #96cced12, inset 0 0 60px #a4d2ec0c;
|
|
}
|
|
.landing-white .landing-light-ring::after { border-color: #689ec332; }
|
|
.landing-white .landing-orbit { border-color: #7eaccc59; }
|
|
.landing-white .landing-orbit-two { border-color: #9bb9d14d; }
|
|
.landing-white .landing-orbit::before {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #168bca;
|
|
box-shadow: 0 0 9px 2px #369ed02b;
|
|
}
|
|
.landing-white .landing-orbit::after { border-top-color: #1689c982; }
|
|
.landing-white .landing-particles i { background: #1689c9; box-shadow: 0 0 8px 1px #38bdf82e; }
|
|
.landing-white .landing-particles i:nth-child(3n) { background: #38a9d7; }
|
|
.landing-white .landing-particles i:nth-child(4n) { background: #3c73a9; filter: blur(.25px); }
|
|
|
|
/* Typography: a dark, quiet shimmer instead of luminous white lettering. */
|
|
.landing-white .landing-title {
|
|
color: #14263d;
|
|
background-image: linear-gradient(110deg, #14263d 20%, #14263d 39%, #3f6f94 48%, #1b3853 53%, #14263d 62%);
|
|
text-shadow: none;
|
|
font-weight: 650;
|
|
}
|
|
.landing-white .landing-title > span { color: #087fcb; -webkit-text-fill-color: #087fcb; font-weight: 400; }
|
|
.landing-white .landing-title-group::after { background: linear-gradient(90deg, transparent, #3a9cce, transparent); box-shadow: none; }
|
|
.landing-white .landing-headline { color: #41576e; }
|
|
.landing-white .landing-kicker, .landing-white .landing-brand-meta .landing-kicker { color: #4e6881; }
|
|
.landing-white .landing-kicker-divider { color: #a3b2c2; }
|
|
.landing-white .landing-status-light { background: #1598cf; box-shadow: 0 0 6px #27a9da2e; }
|
|
.landing-white .landing-subtitle, .landing-white .landing-brand-meta .landing-subtitle { color: #64748b; }
|
|
.landing-white .landing-showcase-label { color: #4a789b; }
|
|
.landing-white .landing-showcase-label > span { color: #6c7f93; }
|
|
|
|
/* Image pixels, alpha, proportion and SVG registration are unchanged. */
|
|
.landing-white .landing-visual {
|
|
filter: drop-shadow(0 21px 22px #234b6f1c) drop-shadow(0 4px 5px #244b7012);
|
|
}
|
|
.landing-white .landing-artwork { isolation: isolate; }
|
|
.landing-white .landing-artwork::before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 0;
|
|
left: 9%; right: 9%; top: 66%; height: 4%;
|
|
background: #557f9d16;
|
|
border-radius: 50%;
|
|
filter: blur(14px);
|
|
pointer-events: none;
|
|
}
|
|
.landing-white .landing-artwork .landing-promo-image { position: relative; inset: auto; z-index: 1; filter: brightness(1.02) contrast(1.02); }
|
|
.landing-white .landing-model-motion { z-index: 2; }
|
|
.landing-white .landing-energy-track { stroke: #ffffff; stroke-width: 1.2; opacity: .16; }
|
|
.landing-white .landing-energy-flow { stroke-width: 2; }
|
|
.landing-white .landing-energy-haze { stroke-width: 5; opacity: .4; }
|
|
.landing-white .landing-pier-beacon { color: #087fcb; }
|
|
.landing-white .landing-pier-beacon line { stroke: #167ead; opacity: .58; }
|
|
.landing-white .landing-pier-point { fill: #087fcb; stroke: #f6fcff; stroke-width: 1.5; filter: drop-shadow(0 1px 2px #087fcb33); }
|
|
.landing-white .landing-pier-pulse { stroke: #087fcb; stroke-width: 1.5; }
|
|
.landing-white .landing-hud-bracket { stroke: #538bb0; opacity: .35; }
|
|
|
|
/* White glass surfaces with consistent cobalt actions. */
|
|
.landing-white .landing-card {
|
|
background: linear-gradient(140deg, #fffffff2, #f7fbffde);
|
|
border-color: #dce6f0;
|
|
box-shadow: inset 0 1px #fff, 0 8px 22px #204a7010, 0 24px 55px #31587907;
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
.landing-white .landing-card::before {
|
|
background: linear-gradient(var(--landing-edge-angle, 0deg), transparent 15%, #299bd4b3 45%, transparent 70%);
|
|
}
|
|
.landing-white .landing-card::after { background: radial-gradient(ellipse at 50% 0, #72bce613, transparent 66%); }
|
|
.landing-white .landing-card:hover, .landing-white .landing-card:focus-within {
|
|
border-color: #82b6db;
|
|
box-shadow: 0 12px 25px #24567714, 0 26px 55px #2a66851a;
|
|
}
|
|
.landing-white .landing-card h3 { color: #14263d; font-weight: 600; }
|
|
.landing-white .landing-card p { color: #5d6f83; }
|
|
.landing-white .landing-card-eyebrow { color: #096da8; }
|
|
.landing-white .landing-card-number, .landing-white .landing-card-note { color: #64748b; }
|
|
.landing-white .landing-card-icon { background: #eff6ff; border-color: #d3e7f7; color: #087fcb; }
|
|
.landing-white .landing-card:hover .landing-card-icon { background: #e4f2fc; transform: rotate(-4deg) translateY(-2px); }
|
|
.landing-white .landing-card .landing-primary {
|
|
color: #086fab;
|
|
background: #edf6ff;
|
|
border-color: #cce1f1;
|
|
box-shadow: inset 0 1px #ffffffb3;
|
|
font-weight: 600;
|
|
}
|
|
.landing-white .landing-card:hover .landing-primary, .landing-white .landing-card .landing-primary:focus-visible {
|
|
color: #fff;
|
|
background: #076eaf;
|
|
border-color: #076eaf;
|
|
box-shadow: 0 5px 14px #087fcb26;
|
|
}
|
|
.landing-white .landing-card.is-guided { border-color: #087fcb; box-shadow: 0 0 0 2px #087fcb21, 0 14px 40px #087fcb1f; }
|
|
.landing-white button:focus-visible { outline-color: #1686c4; }
|
|
.landing-white button:hover:not(:disabled) { border-color: #85b7d6; }
|
|
.landing-white button:disabled { opacity: .5; }
|
|
.landing-white .landing-primary { background: #076eaf; color: #fff; border-color: #076eaf; }
|
|
.landing-white .landing-ghost, .landing-white .landing-close-button, .landing-white .landing-sample {
|
|
background: #fff; color: #203b54; border-color: #d7e4ee;
|
|
}
|
|
.landing-white .landing-ghost:hover, .landing-white .landing-close-button:hover, .landing-white .landing-sample:hover { background: #f0f7fd; }
|
|
|
|
/* The original colored CI is transparent, so no separate white box is needed. */
|
|
.landing-white .landing-footer { color: #64748b; }
|
|
.landing-white .landing-company-logos {
|
|
padding: 14px 18px 4px;
|
|
border: 0;
|
|
border-top: 1px solid #dce6f0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.landing-white .landing-company-logos img { filter: none; opacity: 1; transform: none; animation: none; }
|
|
|
|
/* All landing-owned input surfaces use the same light palette. */
|
|
.landing-white .landing-panel {
|
|
color-scheme: light;
|
|
color: #14263d;
|
|
background: #fffffffa;
|
|
border-color: #d4e2ed;
|
|
box-shadow: 0 0 0 100vmax #20395126, 0 24px 70px #1b425d26;
|
|
}
|
|
.landing-white .landing-file-meta { color: #526b81; border-color: #c5d8e7; background: #f8fbfe; }
|
|
.landing-white .landing-sheet { background: #f5f9fd; border-color: #d9e5ef; }
|
|
.landing-white .landing-sheet p, .landing-white .landing-sample span { color: #64748b; }
|
|
.landing-white .landing-file-name { color: #096da8; }
|
|
.landing-white .landing-sample .landing-sample-badge { background: #e9f4fc; color: #087fcb; }
|
|
.landing-white .landing-sample.primary { background: #eff7ff; border-color: #087fcb; }
|
|
|
|
/* Help remains a native modal, preserving focus, navigation and route handoff. */
|
|
.landing-white .landing-guide-trigger {
|
|
color: #203b54;
|
|
background: #ffffffeb;
|
|
border-color: #d6e3ed;
|
|
box-shadow: 0 3px 10px #27496207;
|
|
}
|
|
.landing-white .landing-guide-trigger > span:first-child { color: #087fcb; border-color: #9fcbe8; }
|
|
.landing-white .landing-guide-trigger-arrow { color: #087fcb; }
|
|
.landing-white .landing-guide-trigger:hover { background: #eff6ff; border-color: #9dc6e2; box-shadow: 0 4px 16px #267daa10; }
|
|
.landing-white .landing-guide-hint { background: #ffffffed; border-color: #d5e6f1; box-shadow: 0 8px 30px #294d6d12; }
|
|
.landing-white .landing-hint-icon { color: #1388c0; }
|
|
.landing-white .landing-guide-hint strong { color: #203b54; }
|
|
.landing-white .landing-guide-hint p { color: #64748b; }
|
|
.landing-white .landing-hint-open { color: #076eaf; }
|
|
.landing-white .landing-hint-close { color: #627c90; }
|
|
.landing-white .landing-guide {
|
|
color-scheme: light;
|
|
color: #14263d;
|
|
background: linear-gradient(145deg, #fff, #f8fbfe);
|
|
border-color: #d1e2ee;
|
|
box-shadow: 0 24px 90px #2247652b, inset 0 1px #fff;
|
|
}
|
|
.landing-white .landing-guide::backdrop { background: #253f592e; backdrop-filter: blur(5px); }
|
|
.landing-white .landing-guide-kicker { color: #36779d; }
|
|
.landing-white .landing-guide-close { color: #456478; border-color: #d5e5ef; background: #f5f9fc; }
|
|
.landing-white .landing-guide h2, .landing-white .landing-guide-step-title { color: #14263d; }
|
|
.landing-white .landing-guide-intro { color: #64748b; }
|
|
.landing-white .landing-guide-modes button { color: #526b81; border-color: #d9e5ee; background: #f8fbfd; }
|
|
.landing-white .landing-guide-modes button[aria-pressed=true] { color: #076eaf; border-color: #087fcb; background: #edf6ff; }
|
|
.landing-white .landing-guide-progress button { color: #64748b; border-bottom-color: #e1eaf2; }
|
|
.landing-white .landing-guide-progress button[aria-current=step] { color: #076eaf; border-bottom-color: #087fcb; }
|
|
.landing-white .landing-guide-illustration { border-color: #dceaf4; background: linear-gradient(100deg, #f2f8fd, #edf6fc); }
|
|
.landing-white .landing-guide-icon { color: #087fcb; border-color: #c1def0; background: #fff; box-shadow: 0 4px 12px #2a6a9010; }
|
|
.landing-white .landing-guide-illustration i { background: #1687c1; }
|
|
.landing-white .landing-guide-illustration-label { color: #52768e; }
|
|
.landing-white .landing-guide-step-label { color: #096da8; }
|
|
.landing-white .landing-guide-step-description { color: #40586e; }
|
|
.landing-white .landing-guide-fact { color: #4f687e; background: #edf4fa; }
|
|
.landing-white .landing-guide-navigation button { background: #076eaf; color: #fff; border-color: #076eaf; }
|
|
.landing-white .landing-guide-navigation .landing-guide-prev { background: #fff; color: #526b81; border-color: #d6e3ed; }
|
|
.landing-white .landing-guide-page { color: #64748b; }
|
|
.landing-white.landing-paused .landing-engineering-grid, .landing-white.landing-inactive .landing-engineering-grid { animation-play-state: paused !important; }
|
|
|
|
@keyframes landing-white-blueprint { from { transform: translate3d(-12px, -8px, 0); } to { transform: translate3d(12px, 8px, 0); } }
|
|
@media (max-width: 760px) {
|
|
.landing-white .landing-company-logos { padding: 9px 6px 2px; }
|
|
.landing-white .landing-visual { filter: drop-shadow(0 9px 10px #234b6f17); }
|
|
}
|
|
@media (max-height: 560px) {
|
|
.landing-white .landing-company-logos { padding: 6px 10px 2px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.landing-white .landing-engineering-grid { animation: none; transform: none; }
|
|
.landing-white .landing-title { background: none; color: #14263d; -webkit-text-fill-color: #14263d; }
|
|
.landing-white .landing-title > span { color: #087fcb; -webkit-text-fill-color: #087fcb; }
|
|
}
|
|
|
|
.landing-white .landing-sample-intro, .landing-white .landing-sample-caption { margin: 0; color: #64748b; font-size: 12px; line-height: 1.6; }
|
|
.landing-white .landing-sample-status { margin: 0; color: #076eaf; font-size: 13px; line-height: 1.5; }
|
|
.landing-white .landing-sample-status:empty { display: none; }
|
|
.landing-white .landing-sample { gap: 8px; min-width: 0; }
|
|
.landing-white .landing-sample .landing-sample-open { color: #087fcb; font-weight: 600; margin-top: 3px; }
|
|
.landing-white .landing-sample:disabled { opacity: .6; cursor: progress; }
|
|
.landing-white .landing-sample:focus-visible { outline: 2px solid #087fcb; outline-offset: 3px; }
|