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>
455 lines
34 KiB
CSS
455 lines
34 KiB
CSS
/* Layer order inside the isolated hero: grid 0 → light 1 → visual 2 → copy/cards 4 → panels 10. */
|
|
html:has(.landing-overlay:not([hidden])), body:has(.landing-overlay:not([hidden])) { overflow: hidden; }
|
|
.landing-overlay {
|
|
--landing-bg: #070e19;
|
|
--landing-panel: rgba(13, 26, 43, .78);
|
|
--landing-primary: #68ddf3;
|
|
--landing-line: rgba(152, 203, 231, .18);
|
|
--landing-text: #eef6fc;
|
|
--landing-muted: #9bafc2;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
overscroll-behavior: contain;
|
|
background: var(--landing-bg);
|
|
color: var(--landing-text);
|
|
font-family: Inter, "Pretendard", "Malgun Gothic", sans-serif;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.landing-overlay *, .landing-overlay *::before, .landing-overlay *::after { box-sizing: border-box; }
|
|
.landing-overlay[hidden] { display: none; }
|
|
.landing-shell { width: 100%; height: 100%; overflow: hidden; }
|
|
.landing-hero {
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto minmax(0, 1fr) auto auto;
|
|
justify-items: center;
|
|
gap: clamp(8px, 1.2dvh, 16px);
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
padding: clamp(12px, 2.5dvh, 28px) clamp(16px, 2vw, 40px) clamp(12px, 2dvh, 24px);
|
|
background: radial-gradient(ellipse at 50% 44%, #102c43 0, #0b1929 36%, #070e19 73%);
|
|
}
|
|
.landing-engineering-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
opacity: .18;
|
|
background-image: linear-gradient(rgba(128, 195, 225, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 195, 225, .2) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
mask-image: radial-gradient(ellipse at 50% 53%, #000 0%, transparent 72%);
|
|
pointer-events: none;
|
|
}
|
|
.landing-hero-copy {
|
|
grid-area: 1 / 1;
|
|
position: relative;
|
|
z-index: 4;
|
|
width: 100%;
|
|
text-align: center;
|
|
animation: landing-enter .85s both;
|
|
}
|
|
.landing-kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
color: #a4bdd0;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: .23em;
|
|
}
|
|
.landing-kicker-divider { color: #456074; padding-inline: 4px; }
|
|
.landing-status-light { width: 5px; height: 5px; border-radius: 50%; background: #79def1; box-shadow: 0 0 13px #79def1; }
|
|
.landing-title-group { width: fit-content; margin-inline: auto; }
|
|
.landing-brand-meta { position: absolute; top: 0; right: 0; width: min(420px, 31vw); text-align: right; }
|
|
.landing-brand-meta .landing-kicker { font-size: 8px; letter-spacing: .1em; gap: 7px; }
|
|
.landing-brand-meta .landing-subtitle { margin-top: 9px; font-size: 10px; color: #7894aa; }
|
|
.landing-title {
|
|
margin: 0;
|
|
color: #f3f8fc;
|
|
font-size: clamp(34px, min(3.2vw, 5.8dvh), 58px);
|
|
font-weight: 650;
|
|
line-height: 1;
|
|
letter-spacing: -.045em;
|
|
}
|
|
.landing-title > span { color: #69cde0; font-weight: 300; }
|
|
.landing-headline { margin: 9px 0 0; color: #dcebf5; font-size: clamp(18px, 1.6vw, 28px); font-weight: 500; letter-spacing: -.035em; }
|
|
.landing-subtitle { margin: 0; max-width: 640px; font-size: 12px; line-height: 1.65; color: #8fa8bc; word-break: keep-all; }
|
|
|
|
/* Slowly moving illumination remains behind the existing promotional visual. */
|
|
.landing-light-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
|
|
.landing-glow {
|
|
position: absolute;
|
|
left: 50%; top: 51%;
|
|
width: min(1020px, 88vw); height: 600px;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(ellipse, rgba(44, 172, 219, .16), rgba(22, 99, 179, .09) 43%, transparent 70%);
|
|
filter: blur(24px);
|
|
}
|
|
.landing-light-ring {
|
|
position: absolute;
|
|
left: 50%; top: 51%;
|
|
width: min(670px, 60vw); aspect-ratio: 1;
|
|
border: 1px solid rgba(95, 206, 243, .14);
|
|
border-radius: 50%;
|
|
background: conic-gradient(from 0deg, transparent 12%, rgba(48, 143, 205, .06) 25%, transparent 35%, rgba(101, 219, 245, .17) 50%, transparent 65%, rgba(41, 127, 181, .03) 78%, transparent);
|
|
box-shadow: 0 0 70px rgba(55, 173, 225, .12), inset 0 0 48px rgba(47, 157, 212, .07);
|
|
animation: landing-ring-turn 52s linear infinite;
|
|
}
|
|
.landing-light-ring::after { content: ''; position: absolute; inset: 14px; border: 1px dashed rgba(111, 205, 239, .14); border-radius: inherit; }
|
|
.landing-orbit { position: absolute; left: 50%; top: 51%; border: 1px solid rgba(100, 207, 240, .23); border-radius: 50%; }
|
|
.landing-orbit::before { content: ''; position: absolute; top: 15%; left: 15%; width: 5px; height: 5px; border-radius: 50%; background: #b9f1ff; box-shadow: 0 0 14px 3px #61cbe5; }
|
|
.landing-orbit-one { width: min(1050px, 84vw); height: 330px; animation: landing-orbit-one 42s linear infinite; }
|
|
.landing-orbit-two { width: min(790px, 70vw); height: 470px; border-color: rgba(78, 156, 214, .16); animation: landing-orbit-two 64s linear infinite reverse; }
|
|
.landing-orbit-three { width: min(960px, 80vw); height: 250px; opacity: .5; animation: landing-orbit-three 58s linear infinite; }
|
|
.landing-particles { position: absolute; inset: 22% 15% 18%; }
|
|
.landing-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #b3eaff; box-shadow: 0 0 11px 2px rgba(91, 207, 245, .6); animation: landing-twinkle 4s ease-in-out infinite alternate; }
|
|
.landing-particles i:nth-child(1) { left: 10%; top: 30%; }
|
|
.landing-particles i:nth-child(2) { left: 23%; top: 12%; animation-delay: -2s; }
|
|
.landing-particles i:nth-child(3) { left: 30%; top: 69%; animation-delay: -1s; }
|
|
.landing-particles i:nth-child(4) { left: 47%; top: 21%; animation-delay: -3s; }
|
|
.landing-particles i:nth-child(5) { left: 58%; top: 73%; animation-delay: -.6s; }
|
|
.landing-particles i:nth-child(6) { left: 71%; top: 15%; animation-delay: -1.7s; }
|
|
.landing-particles i:nth-child(7) { left: 90%; top: 41%; animation-delay: -2.8s; }
|
|
.landing-particles i:nth-child(8) { left: 82%; top: 70%; animation-delay: -1.2s; }
|
|
.landing-particles i:nth-child(9) { left: 7%; top: 81%; animation-delay: -3.3s; }
|
|
.landing-particles i:nth-child(10) { left: 64%; top: 40%; animation-delay: -.8s; }
|
|
.landing-particles i:nth-child(11) { left: 38%; top: 89%; animation-delay: -2.3s; }
|
|
.landing-particles i:nth-child(12) { left: 94%; top: 6%; animation-delay: -1.9s; }
|
|
|
|
.landing-hero-visual {
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
pointer-events: none;
|
|
animation: landing-enter 1.2s .2s both;
|
|
/* Dim only the region under the cards; preserve the main form above them. */
|
|
mask-image: linear-gradient(#000 0%, #000 60%, rgba(0, 0, 0, .65) 84%, transparent 100%);
|
|
}
|
|
.landing-visual {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: min(1800px, calc(100vw - 24px));
|
|
height: 100%;
|
|
left: 50%;
|
|
translate: -50% 0;
|
|
filter: drop-shadow(0 34px 38px rgba(0, 0, 0, .5));
|
|
animation: landing-float 8s ease-in-out infinite;
|
|
}
|
|
.landing-promo-image { position: absolute; left: 0; top: 40%; width: 100%; height: auto; transform: translateY(-50%); user-select: none; }
|
|
|
|
/* The three actions share one centered foreground plane inside the hero. */
|
|
.landing-cards { grid-area: 3 / 1; position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(1160px, 100%); margin: 0; padding: 0; translate: 0 clamp(-72px, -6dvh, -24px); }
|
|
.landing-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; padding: clamp(16px, 2.1dvh, 23px) 24px; border: 1px solid var(--landing-line); border-radius: 16px; background: linear-gradient(135deg, rgba(25, 43, 61, .82), rgba(10, 22, 38, .9)); backdrop-filter: blur(18px); box-shadow: inset 0 1px rgba(231, 250, 255, .05), 0 18px 45px rgba(0, 0, 0, .2); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; animation: landing-enter .8s .45s both; }
|
|
.landing-card:nth-child(2) { animation-delay: .57s; }
|
|
.landing-card:nth-child(3) { animation-delay: .69s; }
|
|
.landing-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(var(--landing-edge-angle, 0deg), transparent 15%, rgba(93, 220, 246, .9) 45%, transparent 70%); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity .3s; }
|
|
.landing-card:hover, .landing-card:focus-within { transform: translateY(-8px); border-color: rgba(111, 221, 247, .48); box-shadow: 0 0 35px rgba(55, 169, 212, .12), 0 24px 50px rgba(0, 0, 0, .34); }
|
|
.landing-card:hover::before, .landing-card:focus-within::before { opacity: 1; animation: landing-edge-flow 3s linear infinite; }
|
|
.landing-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
.landing-card-icon { display: grid; place-items: center; width: 40px; height: 40px; color: #8fe0ed; background: rgba(110, 207, 235, .06); border: 1px solid rgba(119, 212, 237, .17); border-radius: 10px; transition: transform .3s, background .3s; }
|
|
.landing-card-icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
|
|
.landing-card:hover .landing-card-icon { transform: rotate(-6deg) translateY(-2px); background: rgba(110, 207, 235, .14); }
|
|
.landing-card-number { color: #658498; font-size: 9px; letter-spacing: .14em; }
|
|
.landing-card-eyebrow { color: #70b6ce; font-size: 10px; letter-spacing: .12em; }
|
|
.landing-card h3 { margin: 4px 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -.04em; color: #f1f8fc; }
|
|
.landing-card p { margin: 0; max-width: 300px; color: #9cb0c1; line-height: 1.7; font-size: 12px; word-break: keep-all; }
|
|
.landing-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
|
|
.landing-card-note { font-size: 10px; color: #6e8a9f; white-space: nowrap; }
|
|
.landing-overlay button { font: inherit; cursor: pointer; }
|
|
.landing-primary, .landing-ghost, .landing-close-button, .landing-sample { min-height: 40px; padding: 9px 14px; border: 1px solid var(--landing-line); border-radius: 8px; font-size: 12px; font-weight: 500; color: #e5f2fa; background: #182d42; transition: border-color .2s, background .2s; }
|
|
.landing-primary { background: #2b697e; border-color: #398397; }
|
|
.landing-card .landing-primary { background: transparent; border: 0; padding: 8px 0; min-height: 36px; color: #b4e8f3; font-size: 11px; white-space: nowrap; }
|
|
.landing-card .landing-primary::after { content: '↗'; display: inline-block; margin-left: 12px; transition: transform .25s; }
|
|
.landing-card:hover .landing-primary::after { transform: translate(2px, -2px); }
|
|
.landing-overlay button:hover:not(:disabled) { border-color: #74cce0; }
|
|
.landing-overlay button:focus-visible { outline: 2px solid #a1eeff; outline-offset: 5px; }
|
|
.landing-overlay button:disabled { cursor: not-allowed; opacity: .4; }
|
|
.landing-footer { grid-area: 4 / 1; position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 20px; width: min(1160px, 100%); color: #4c687c; font-size: 8px; letter-spacing: .18em; }
|
|
|
|
/* Existing input panels retain their IDs, inputs and click bindings. */
|
|
.landing-panel { display: none; position: fixed; z-index: 10; left: 50%; top: 8vh; transform: translateX(-50%); width: min(1100px, calc(100vw - 32px)); max-height: 84dvh; overflow: auto; padding: 24px; border: 1px solid #3b596e; border-radius: 18px; background: rgba(12, 25, 42, .98); color: #eef6fc; box-shadow: 0 0 0 100vmax rgba(2, 8, 17, .72), 0 30px 100px #0009; }
|
|
.landing-panel.visible { display: block; }
|
|
.landing-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
|
|
.landing-panel-head h3 { margin: 0; font-size: 20px; }
|
|
.landing-panel-body { display: grid; gap: 16px; }
|
|
.landing-file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border: 1px dashed #385369; border-radius: 10px; color: #a4bacb; }
|
|
.landing-sheet-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
|
.landing-sheet { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px; border: 1px solid #2b455a; border-radius: 12px; background: #112237; }
|
|
.landing-sheet h4 { margin: 0 0 8px; }
|
|
.landing-sheet p { color: #9bafc2; line-height: 1.6; font-size: 12px; margin: 0; }
|
|
.landing-file-name { word-break: break-all; color: #82d6e7; font-size: 12px; }
|
|
.landing-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 10px; }
|
|
.landing-sample-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
|
|
.landing-sample { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; text-align: left; }
|
|
.landing-sample strong { font-size: 15px; }
|
|
.landing-sample span { color: #9bafc2; font-size: 11px; }
|
|
.landing-sample .landing-sample-badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #9ee8f4; background: #24465d; }
|
|
.landing-sample.primary { border-color: #78d5ea; }
|
|
|
|
@property --landing-edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
|
|
@keyframes landing-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
|
|
@keyframes landing-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(0); } }
|
|
@keyframes landing-ring-turn { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
|
|
@keyframes landing-orbit-one { from { transform: translate(-50%, -50%) rotate(-20deg); } to { transform: translate(-50%, -50%) rotate(340deg); } }
|
|
@keyframes landing-orbit-two { from { transform: translate(-50%, -50%) rotate(40deg); } to { transform: translate(-50%, -50%) rotate(400deg); } }
|
|
@keyframes landing-orbit-three { from { transform: translate(-50%, -50%) rotate(15deg); } to { transform: translate(-50%, -50%) rotate(375deg); } }
|
|
@keyframes landing-twinkle { 0% { opacity: .15; transform: scale(.6) translateY(0); } 100% { opacity: .9; transform: scale(1.2) translateY(-8px); } }
|
|
@keyframes landing-edge-flow { to { --landing-edge-angle: 360deg; } }
|
|
|
|
@media (max-height: 850px) and (min-width: 761px) {
|
|
.landing-title { font-size: clamp(32px, 5.5dvh, 48px); }
|
|
.landing-card { padding: 17px 21px; }
|
|
.landing-card-icon { width: 34px; height: 34px; }
|
|
.landing-card p { font-size: 11px; }
|
|
}
|
|
@media (max-width: 1000px) {
|
|
.landing-cards { gap: 12px; }
|
|
.landing-card { padding-inline: 16px; }
|
|
.landing-card-actions { gap: 6px; }
|
|
.landing-card-note { display: none; }
|
|
.landing-card h3 { font-size: 19px; }
|
|
.landing-kicker { letter-spacing: .14em; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.landing-hero { padding: clamp(14px, 3dvh, 28px) 16px 12px; gap: 10px; }
|
|
.landing-title { font-size: clamp(28px, 7.6vw, 45px); margin: 0; }
|
|
.landing-hero-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; text-align: left; }
|
|
.landing-title-group { margin: 0; width: auto; }
|
|
.landing-title { font-size: clamp(23px, 6vw, 40px); white-space: nowrap; }
|
|
.landing-brand-meta { position: static; width: auto; }
|
|
.landing-brand-meta .landing-kicker { justify-content: flex-end; flex-wrap: wrap; gap: 4px; font-size: 6px; }
|
|
.landing-brand-meta .landing-subtitle { font-size: 8px; line-height: 1.5; margin-top: 6px; }
|
|
.landing-kicker { font-size: 8px; gap: 7px; letter-spacing: .1em; }
|
|
.landing-headline { font-size: clamp(12px, 3.2vw, 18px); margin: 8px 0 0; }
|
|
.landing-subtitle { max-width: 390px; font-size: 10px; line-height: 1.6; }
|
|
.landing-cards { grid-template-columns: 1fr; width: min(480px, 100%); gap: 8px; }
|
|
.landing-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: clamp(68px, 10dvh, 90px); padding: 10px 14px; border-radius: 12px; }
|
|
.landing-card:hover, .landing-card:focus-within { transform: none; }
|
|
.landing-card > div:first-child { padding-left: 46px; }
|
|
.landing-card-top { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0; }
|
|
.landing-card-icon { width: 34px; height: 34px; }
|
|
.landing-card-number, .landing-card p { display: none; }
|
|
.landing-card-eyebrow { position: static; font-size: 8px; letter-spacing: .04em; }
|
|
.landing-card h3 { margin: 4px 0 0; font-size: 16px; white-space: nowrap; }
|
|
.landing-card-actions { margin: 0; }
|
|
.landing-card .landing-primary { font-size: 10px; min-height: 44px; }
|
|
.landing-card .landing-primary::after { margin-left: 6px; }
|
|
.landing-visual { width: calc(100vw - 12px); }
|
|
.landing-glow { height: 400px; }
|
|
.landing-light-ring { width: min(400px, 85vw); }
|
|
.landing-orbit-one, .landing-orbit-three { width: 90vw; height: 150px; }
|
|
.landing-orbit-two { width: 70vw; height: 290px; }
|
|
.landing-footer { font-size: 6px; letter-spacing: .02em; gap: 8px; }
|
|
.landing-sheet-list { grid-template-columns: 1fr; }
|
|
.landing-sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.landing-panel { top: 20px; max-height: calc(100dvh - 40px); padding: 18px; }
|
|
}
|
|
@media (max-width: 760px) and (max-height: 720px) {
|
|
.landing-subtitle { font-size: 9px; }
|
|
}
|
|
@media (max-height: 560px) {
|
|
.landing-hero { padding: 10px 18px; gap: 7px; }
|
|
.landing-kicker { font-size: 8px; }
|
|
.landing-title { font-size: 30px; margin: 0; }
|
|
.landing-headline { font-size: 16px; margin-bottom: 0; }
|
|
.landing-subtitle, .landing-footer { display: none; }
|
|
.landing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(1160px, 100%); gap: 10px; }
|
|
.landing-card { display: flex; height: auto; padding: 10px 13px; }
|
|
.landing-card > div:first-child { padding: 0; }
|
|
.landing-card-top { position: static; transform: none; margin-bottom: 4px; }
|
|
.landing-card-icon { width: 25px; height: 25px; }
|
|
.landing-card-icon svg { width: 18px; height: 18px; }
|
|
.landing-card-number, .landing-card p, .landing-card-note { display: none; }
|
|
.landing-card-eyebrow { font-size: 8px; }
|
|
.landing-card h3 { font-size: 15px; margin: 3px 0; }
|
|
.landing-card-actions { margin-top: 3px; }
|
|
.landing-card .landing-primary { font-size: 10px; min-height: 36px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.landing-overlay *, .landing-overlay *::before, .landing-overlay *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
|
|
.landing-light-ring, .landing-orbit { transform: translate(-50%, -50%); }
|
|
}
|
|
|
|
/* Illuminated Engineering Digital Twin — all motion is presentation-only. */
|
|
.landing-overlay {
|
|
--landing-bg: #0b1c32;
|
|
--landing-line: rgba(137, 212, 255, .28);
|
|
--landing-muted: #b4cee2;
|
|
background: #0b1c32;
|
|
}
|
|
.landing-hero { background: radial-gradient(ellipse at 49% 43%, #1a5277 0, #123657 38%, #0b1b31 79%); }
|
|
.landing-hero::before { content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 25% 35%, #176ed638, transparent 42%), radial-gradient(ellipse at 76% 54%, #36e5f329, transparent 42%); animation: landing-atmosphere 26s ease-in-out infinite alternate, landing-enter 1.4s both; }
|
|
.landing-engineering-grid { opacity: .24; }
|
|
.landing-light-stage { inset: -16px; transform: translate3d(var(--landing-parallax-x, 0px),var(--landing-parallax-y, 0px),0); animation: landing-enter 1.2s .1s both; }
|
|
.landing-glow { background: radial-gradient(ellipse, #51daff36, #3189f51a 48%, transparent 73%); animation: landing-glow-breathe 13s ease-in-out infinite alternate; }
|
|
.landing-light-ring { border-color: #8bdcff3b; box-shadow: 0 0 95px #3fbaff2a, inset 0 0 62px #47ccff17; background: conic-gradient(transparent 10%,#4faaff17 25%,transparent 36%,#82ecff32 51%,transparent 67%,#386ff815 80%,transparent); }
|
|
.landing-orbit { border-color: #81dcff45; }
|
|
.landing-orbit-two { border-color: #70abff30; }
|
|
.landing-orbit::after { content: ''; position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: #97edffab; border-radius: inherit; mask-image: linear-gradient(90deg, transparent 10%, #000 42%, transparent 85%); }
|
|
.landing-orbit::before { width: 4px; height: 4px; box-shadow: 0 0 14px 4px #6bdfff82; }
|
|
.landing-particles i { opacity: .5; }
|
|
.landing-particles i:nth-child(3n) { width: 2px; height: 2px; animation-duration: 6.3s; }
|
|
.landing-particles i:nth-child(4n) { width: 4px; height: 4px; animation-duration: 8.7s; filter: blur(.6px); }
|
|
.landing-hero-copy { animation-delay: .25s; }
|
|
.landing-title { color: #f2fbff; background: linear-gradient(110deg,#f5fbff 20%,#f5fbff 39%,#a7dfff 48%,#fff 53%,#f5fbff 62%); background-size: 240% 100%; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 42px #68bdf51c; animation: landing-title-shimmer 12s ease-in-out 2s infinite; }
|
|
.landing-title > span { color: #7ff1ff; -webkit-text-fill-color: #7ff1ff; }
|
|
.landing-title-group::after { content: ''; display: block; width: 64px; height: 1px; margin: 16px auto 0; background: linear-gradient(90deg,transparent,#72eaff,transparent); box-shadow: 0 0 12px #58daff75; }
|
|
.landing-headline { color: #edf8ff; font-weight: 400; }
|
|
.landing-brand-meta .landing-kicker { color: #bfdeed; }
|
|
.landing-brand-meta .landing-subtitle { color: #aac8dd; font-size: 11px; }
|
|
.landing-hero-visual { animation: landing-enter 1.4s .45s both; }
|
|
.landing-visual { animation: landing-premium-float 10s ease-in-out infinite; }
|
|
.landing-artwork { position: absolute; left: 0; top: 40%; width: 100%; aspect-ratio: 2172 / 724; transform: translateY(-50%); }
|
|
.landing-artwork .landing-promo-image { display: block; position: static; width: 100%; height: auto; transform: none; filter: brightness(1.12) contrast(1.04) saturate(1.04); }
|
|
.landing-model-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
|
.landing-energy-track { fill: none; stroke: #70dfff; stroke-width: 1.4; opacity: .18; }
|
|
.landing-energy-flow, .landing-energy-haze { fill: none; stroke: url(#landing-flow-fade); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 90 910; animation: landing-energy-run 8.3s linear 1.5s infinite; opacity: .8; }
|
|
.landing-energy-haze { stroke-width: 8; opacity: .48; }
|
|
.landing-pier-beacon { color: #95f6ff; }
|
|
.landing-pier-beacon line { stroke: currentColor; stroke-width: 1; opacity: .42; stroke-dasharray: 3 4; }
|
|
.landing-pier-point { fill: #d3fdff; filter: drop-shadow(0 0 5px #62ddff); animation: landing-beacon-point 7.9s ease-in-out var(--beacon-delay) infinite; }
|
|
.landing-pier-pulse { fill: none; stroke: #8decff; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: landing-beacon-pulse 7.9s ease-out var(--beacon-delay) infinite; }
|
|
.landing-hud-bracket { fill: none; stroke: #8dcfff; stroke-width: 1; opacity: .28; }
|
|
.landing-showcase-label { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); color: #84c4dd; font-size: 9px; letter-spacing: .23em; white-space: nowrap; }
|
|
.landing-showcase-label > span { display: block; margin-top: 8px; font-size: 8px; letter-spacing: .06em; color: #729db8; text-align: center; }
|
|
.landing-card { border-color: #72c7ef4d; background: linear-gradient(140deg,#244f72c9,#102c4bea); box-shadow: inset 0 1px #dcf8ff1a, 0 20px 45px #020d2045; animation-delay: .85s; }
|
|
.landing-card:nth-child(2) { animation-delay: .98s; }
|
|
.landing-card:nth-child(3) { animation-delay: 1.11s; }
|
|
.landing-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 0,#73dcff19,transparent 65%); opacity: 0; pointer-events: none; transition: opacity .25s; }
|
|
.landing-card:hover, .landing-card:focus-within { transform: translateY(-6px); border-color: #9ceaffb3; box-shadow: 0 0 30px #61d0ff26, 0 26px 55px #020b2359; }
|
|
.landing-card:hover::after, .landing-card:focus-within::after, .landing-card.is-guided::after { opacity: 1; }
|
|
.landing-card:active { transform: translateY(-2px) scale(.99); transition-duration: .1s; }
|
|
.landing-card h3 { color: #f3fbff; }
|
|
.landing-card p { color: #bfd3e3; }
|
|
.landing-card-eyebrow { color: #91d7ed; }
|
|
.landing-card-number, .landing-card-note { color: #8bacc3; }
|
|
.landing-card-icon { background: #6edaff14; border-color: #83e5ff52; color: #abf1ff; }
|
|
.landing-card .landing-primary { min-height: 38px; padding: 8px 13px; border: 1px solid #79d7f14d; background: #458cc022; border-radius: 8px; color: #d7faff; font-size: 11px; transition: background .25s,border-color .25s,box-shadow .25s,transform .1s; }
|
|
.landing-card:hover .landing-primary, .landing-card .landing-primary:focus-visible { background: #64cbef2e; border-color: #8deaff99; box-shadow: 0 0 18px #5bd5ff1f; }
|
|
.landing-card .landing-primary:active { transform: scale(.97); }
|
|
.landing-card.is-guided { border-color: #a2f3ff; box-shadow: 0 0 0 2px #88ebff32,0 0 46px #5ed7ff36; }
|
|
.landing-footer { color: #7ca0bb; }
|
|
|
|
/* Guide stays in the same hero; native dialog owns focus until dismissed. */
|
|
.landing-guide-trigger { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin-top: 13px; padding: 7px 12px; border: 1px solid #8ddfff4d; border-radius: 999px; background: #29628b54; color: #d7f7ff; font-size: 11px !important; transition: box-shadow .25s,background .25s; animation: landing-enter .7s 1.35s both; }
|
|
.landing-guide-trigger > span:first-child { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #c0f4ff8c; border-radius: 50%; font-size: 10px; }
|
|
.landing-guide-trigger:hover { background: #438bb75c; box-shadow: 0 0 25px #7bdbff26; }
|
|
.landing-guide-trigger-arrow { margin-left: 6px; color: #82e5ff; }
|
|
.landing-guide-hint { position: absolute; z-index: 5; top: max(146px,16dvh); left: clamp(16px,2vw,40px); display: flex; gap: 12px; width: 292px; padding: 14px 34px 14px 15px; background: #143a58e8; border: 1px solid #7edfff4d; border-radius: 12px; box-shadow: 0 12px 40px #020e232b; backdrop-filter: blur(18px); animation: landing-enter .7s 1.8s both; }
|
|
.landing-guide-hint[hidden] { display: none; }
|
|
.landing-hint-icon { color: #86edff; font-size: 20px; }
|
|
.landing-guide-hint strong { color: #e5f8ff; font-size: 12px; font-weight: 500; }
|
|
.landing-guide-hint p { margin: 5px 0 8px; color: #b7d3e4; font-size: 11px; }
|
|
.landing-hint-open { border: 0; padding: 2px 0; background: none; color: #8cecff; font-size: 11px !important; }
|
|
.landing-hint-close { position: absolute; right: 8px; top: 7px; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #b5d9e9; font-size: 20px !important; }
|
|
.landing-guide { position: fixed; inset: clamp(20px,10dvh,110px) auto auto 50%; transform: translateX(-50%); margin: 0; width: min(660px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; padding: 26px 30px 22px; border: 1px solid #88dfff66; border-radius: 20px; color: #eaf8ff; background: linear-gradient(145deg,#204867fa,#102a45fc); box-shadow: 0 30px 110px #020c24a6,inset 0 1px #d3f7ff1a; color-scheme: dark; }
|
|
.landing-guide::backdrop { background: #0412248f; backdrop-filter: blur(3px); }
|
|
.landing-guide[open] { animation: landing-guide-enter .25s ease-out both; }
|
|
.landing-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.landing-guide-kicker { color: #95ddec; font-size: 9px; letter-spacing: .15em; }
|
|
.landing-guide-close { width: 32px; height: 32px; border: 1px solid #91d9fa40; border-radius: 50%; color: #c9f2ff; background: #8acbff0f; font-size: 22px !important; }
|
|
.landing-guide h2 { margin: 14px 0 10px; font-size: 25px; font-weight: 500; letter-spacing: -.04em; }
|
|
.landing-guide-intro { color: #b5cede; font-size: 12px; line-height: 1.7; margin: 0; }
|
|
.landing-guide-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 18px 0 22px; }
|
|
.landing-guide-modes button { min-height: 36px; padding: 7px; border: 1px solid #709dbb52; border-radius: 8px; color: #b8d0e0; background: #12314b; font-size: 11px; }
|
|
.landing-guide-modes button[aria-pressed=true] { color: #d9fbff; border-color: #8ae7ff; background: #4899ba33; }
|
|
.landing-guide-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
|
|
.landing-guide-progress button { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; border: 0; border-bottom: 2px solid #4a6e8959; border-radius: 0; color: #91b1c9; background: none; font-size: 11px; }
|
|
.landing-guide-progress button span { font-size: 10px; }
|
|
.landing-guide-progress button[aria-current=step] { color: #a7f1ff; border-bottom-color: #81e9ff; }
|
|
.landing-guide-content { margin-top: 15px; }
|
|
.landing-guide-illustration { display: flex; align-items: center; gap: 9px; height: 70px; padding: 10px 15px; margin-bottom: 16px; border: 1px solid #619bb92b; border-radius: 10px; background: linear-gradient(90deg,#5bc4ed0d,#3b81b91a); overflow: hidden; }
|
|
.landing-guide-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #83e9ff5c; border-radius: 10px; color: #b1f3ff; background: #68dbff14; animation: landing-guide-icon-float 3s ease-in-out infinite; }
|
|
.landing-guide-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
|
|
.landing-guide-illustration i { width: 5px; height: 5px; border-radius: 50%; background: #a2eeff; animation: landing-guide-dot 1.8s ease-in-out infinite; }
|
|
.landing-guide-illustration i:nth-of-type(2) { animation-delay: .25s; }
|
|
.landing-guide-illustration i:nth-of-type(3) { animation-delay: .5s; }
|
|
.landing-guide-illustration-label { margin-left: auto; color: #8db6cf; font-size: 8px; letter-spacing: .14em; }
|
|
.landing-guide-step-label { color: #80dcef; font-size: 10px; letter-spacing: .08em; }
|
|
.landing-guide-step-title { margin: 7px 0 10px; font-size: 20px; font-weight: 500; }
|
|
.landing-guide-step-description { min-height: 62px; margin: 0; color: #d0e0eb; font-size: 12px; line-height: 1.85; word-break: keep-all; }
|
|
.landing-guide-fact { margin-top: 13px; padding: 11px 13px; border-radius: 8px; background: #04172a45; color: #a2c7dc; font-size: 10px; line-height: 1.7; }
|
|
.landing-guide-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
|
|
.landing-guide-navigation button { min-height: 38px; padding: 9px 16px; border: 1px solid #82d8f161; border-radius: 8px; background: #448da635; color: #d4f9ff; font-size: 11px; }
|
|
.landing-guide-navigation .landing-guide-prev { background: transparent; color: #a7c8da; }
|
|
.landing-guide-page { color: #86b3cd; font-size: 10px; }
|
|
.landing-paused .landing-light-stage *, .landing-inactive .landing-light-stage *,
|
|
.landing-paused .landing-visual, .landing-inactive .landing-visual,
|
|
.landing-paused .landing-model-motion *, .landing-inactive .landing-model-motion *,
|
|
.landing-paused .landing-hero::before, .landing-inactive .landing-hero::before { animation-play-state: paused !important; }
|
|
|
|
@keyframes landing-atmosphere { from { transform: translate3d(-1%,-1%,0) scale(1); opacity: .6; } to { transform: translate3d(2%,1%,0) scale(1.06); opacity: 1; } }
|
|
@keyframes landing-glow-breathe { from { opacity: .65; scale: .96; } to { opacity: 1; scale: 1.08; } }
|
|
@keyframes landing-title-shimmer { 0%,55% { background-position: 110% 50%; } 85%,100% { background-position: -90% 50%; } }
|
|
@keyframes landing-premium-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
|
|
@keyframes landing-energy-run { 0% { stroke-dashoffset: 1000; opacity: 0; } 12% { opacity: .8; } 88% { opacity: .8; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
|
|
@keyframes landing-beacon-point { 0%,55%,100% { opacity: .35; } 12%,27% { opacity: 1; } }
|
|
@keyframes landing-beacon-pulse { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: .85; } 42%,100% { opacity: 0; transform: scale(2.3); } }
|
|
@keyframes landing-guide-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
|
|
@keyframes landing-guide-icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
|
|
@keyframes landing-guide-dot { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
|
|
|
|
@media (max-width: 1100px) and (min-width: 761px) {
|
|
.landing-card .landing-primary { padding-inline: 10px; font-size: 10px; }
|
|
.landing-guide-trigger { margin-top: 8px; }
|
|
.landing-brand-meta .landing-subtitle { font-size: 10px; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.landing-title-group::after { margin: 11px 0 0; width: 44px; }
|
|
.landing-brand-meta .landing-subtitle { font-size: 8px; }
|
|
.landing-guide-trigger { min-height: 30px; font-size: 9px !important; margin-top: 8px; padding: 5px 9px; }
|
|
.landing-card .landing-primary { min-height: 44px; padding: 7px 9px; font-size: 9px; }
|
|
.landing-card:hover, .landing-card:focus-within, .landing-card:active { transform: none; }
|
|
.landing-guide-hint { width: min(292px,calc(100vw - 32px)); top: 146px; padding-block: 11px; }
|
|
.landing-showcase-label { font-size: 7px; letter-spacing: .12em; top: 48%; }
|
|
.landing-showcase-label > span { font-size: 6px; }
|
|
.landing-guide { inset: 16px auto auto 50%; max-height: calc(100dvh - 32px); padding: 20px; }
|
|
.landing-guide h2 { font-size: 22px; }
|
|
.landing-guide-modes { gap: 6px; }
|
|
.landing-guide-modes button { font-size: 10px; }
|
|
.landing-guide-progress { gap: 7px; }
|
|
.landing-guide-progress button { gap: 4px; }
|
|
.landing-guide-progress button span { font-size: 8px; }
|
|
.landing-guide-illustration-label { font-size: 6px; letter-spacing: .05em; }
|
|
}
|
|
@media (max-height: 560px) {
|
|
.landing-title-group::after { display: none; }
|
|
.landing-brand-meta .landing-guide-trigger { margin-top: 6px; }
|
|
.landing-guide-hint { top: 92px; padding: 10px 32px 10px 12px; width: 270px; }
|
|
.landing-guide-hint p { margin-block: 3px; }
|
|
.landing-card .landing-primary { min-height: 34px; padding: 5px 9px; font-size: 10px; }
|
|
.landing-showcase-label { display: none; }
|
|
.landing-guide { top: 12px; max-height: calc(100dvh - 24px); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.landing-hero::before, .landing-title, .landing-guide-trigger, .landing-guide-hint,
|
|
.landing-artwork *, .landing-guide *, .landing-guide[open] { animation: none !important; transition: none !important; }
|
|
.landing-title { background: none; color: #f2fbff; -webkit-text-fill-color: #f2fbff; }
|
|
.landing-title > span { -webkit-text-fill-color: #7ff1ff; }
|
|
.landing-pier-pulse, .landing-energy-haze { opacity: 0; }
|
|
.landing-energy-flow { stroke-dasharray: none; opacity: .35; }
|
|
.landing-light-stage { transform: none; }
|
|
}
|
|
|
|
/* Original company CI is displayed unchanged on a neutral footer strip. */
|
|
.landing-footer { display: grid; gap: 10px; width: min(1600px, 100%); min-width: 0; }
|
|
.landing-footer-note { display: flex; justify-content: space-between; gap: 12px; }
|
|
.landing-company-logos { padding: 10px 14px; border: 1px solid #ffffff40; border-radius: 8px; background: #fff; }
|
|
.landing-company-logos img { display: block; width: 100%; height: auto; max-width: 100%; }
|
|
@media (max-width: 760px) {
|
|
.landing-footer { gap: 6px; }
|
|
.landing-company-logos { padding: 7px 8px; border-radius: 5px; }
|
|
}
|
|
@media (max-height: 560px) {
|
|
.landing-footer { gap: 0; }
|
|
.landing-footer-note { display: none; }
|
|
.landing-company-logos { padding: 5px 10px; }
|
|
}
|