Spaces:
Running
Running
| /* ONTIC 홈페이지(index) · 로그인(login) 배치 전용. 토큰 · 머리띠 · 버튼 · 표는 ontic-ui(ui/tokens.css · ui/components.css). | |
| 홈페이지는 앱보다 크게 쓴다(본문 16px · 제목 44px). 색 문법은 같다: 후보 = 연필(호박 점선) → 승인 = 잉크(초록 실선). */ | |
| body{line-height:1.6} | |
| .site-top{background:color-mix(in srgb,var(--desk) 86%,transparent)} | |
| .wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-6)} | |
| /* 첫 화면 */ | |
| .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-12);align-items:center;padding:96px 0 104px} | |
| .eyebrow{font:500 var(--t-12) var(--mono);letter-spacing:.06em;color:var(--pencil);margin:0 0 var(--s-5)} | |
| .hero h1{font-size:clamp(2rem,4.2vw,var(--t-48));line-height:1.22;letter-spacing:-.035em;font-weight:600} | |
| .hero h1 em{font-style:normal;color:var(--graphite)} | |
| .lede{font-size:var(--t-16);color:var(--graphite);margin:var(--s-6) 0 var(--s-8);max-width:520px} | |
| .actions{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center} | |
| .fine{font-size:var(--t-12);color:var(--faint);margin-top:var(--s-4)} | |
| /* 서명 장면: 후보 연결(연필)이 대화로 승인되어(잉크) 결정이 남는다 — ledger.js */ | |
| .ledger{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-4);padding:var(--s-4) var(--s-4) var(--s-3);box-shadow:var(--lift)} | |
| .ledger-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-12);color:var(--pencil);padding:0 var(--s-1) var(--s-3)} | |
| .ledger-head b{color:var(--ink);font-weight:600} | |
| .legend{display:flex;gap:var(--s-3)}.legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--graphite);vertical-align:middle;margin-right:5px} | |
| .legend .c i{border-top:2px dashed var(--draft)}.legend .a i{position:relative;border-top:2px solid var(--ink)}.legend .a i::after{content:"";position:absolute;left:6px;top:-5px;width:6px;height:6px;border:1.5px solid var(--seal);border-radius:1px;background:var(--paper)} | |
| .ledger svg{display:block;width:100%;height:auto} | |
| .ledger text{font-family:var(--mono)} | |
| .t-box{fill:var(--desk);stroke:var(--rule-2)}.t-rule{stroke:var(--rule-2)}.t-name{font-size:13px;font-weight:600;fill:var(--ink)}.t-col{font-size:11.5px;fill:var(--pencil)}.t-key{fill:var(--ink)} | |
| .t-note{font-size:10.5px;fill:var(--pencil)} | |
| .e-fk{stroke:var(--graphite);stroke-width:1.5;fill:none} | |
| .e-join{fill:none;stroke-width:1.75;stroke:var(--draft);stroke-dasharray:6 4;transition:stroke .5s var(--ease),stroke-width .5s var(--ease),stroke-dasharray .5s var(--ease)} | |
| .chip{transition:opacity .35s var(--ease)} | |
| .chip-c rect{fill:var(--draft-wash);stroke:var(--draft);stroke-dasharray:4 3}.chip-c text{font-size:11px;fill:var(--draft-ink)} | |
| .stamp{pointer-events:none}.stamp-in{opacity:0;transform:scale(1.8) rotate(-4deg);transition:opacity .18s var(--ease) .55s,transform .32s cubic-bezier(.3,1.6,.5,1) .55s} | |
| .stamp rect{fill:var(--paper);stroke:var(--seal);stroke-width:2.5}.stamp text{font:700 13px var(--sans);fill:var(--seal);text-anchor:middle} | |
| .ledger.done .stamp-in{opacity:1;transform:scale(1) rotate(-4deg)} | |
| .decision{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease) .15s,transform .45s var(--ease) .15s} | |
| .decision-card{margin-top:var(--s-3);border-top:1px solid var(--rule);padding:var(--s-3) var(--s-1) 2px;font-size:var(--t-13)} | |
| .decision-card .said{margin:0 0 4px;color:var(--ink)} | |
| .decision-card .by{margin:0;color:var(--pencil);font:400 var(--t-11) var(--mono)} | |
| .decision-card .by{display:flex;align-items:center;gap:6px}.decision-card .by b{color:var(--ink);font-weight:600} | |
| .ledger.done .e-join{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:none} | |
| .ledger.done .chip-c{opacity:0} | |
| .ledger.done .decision{opacity:1;transform:none} | |
| /* 띠 */ | |
| section.band{padding:96px 0;border-top:1px solid var(--rule);scroll-margin-top:56px} | |
| section.band.white{background:var(--paper)} | |
| .band h2{font-size:clamp(1.5rem,2.6vw,var(--t-32));letter-spacing:-.03em;line-height:1.3;margin:0 0 var(--s-3)} | |
| .band .sub{color:var(--pencil);max-width:640px;margin:0 0 var(--s-10);font-size:var(--t-16)} | |
| .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border-top:1px solid var(--ink);padding:0;margin:0} | |
| .steps li{list-style:none;padding:var(--s-5) var(--s-6) 0 0;counter-increment:s} | |
| .steps li::before{content:counter(s,decimal-leading-zero);font:500 var(--t-12) var(--mono);color:var(--pencil);display:block;margin-bottom:var(--s-3)} | |
| .steps h3{font-size:var(--t-16);margin:0 0 var(--s-2)}.steps p{color:var(--graphite);font-size:var(--t-14)} | |
| .layers{display:grid;grid-template-columns:1fr 96px 1fr 96px 1fr;align-items:stretch} | |
| .layer{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-3);padding:var(--s-5)} | |
| .layer small{font:500 var(--t-11) var(--mono);color:var(--pencil);letter-spacing:.04em} | |
| .layer h3{margin:6px 0 var(--s-2);font-size:var(--t-16)}.layer p{font-size:var(--t-13);color:var(--graphite)} | |
| .joint{display:flex;align-items:center;justify-content:center;position:relative} | |
| .joint::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:1px solid var(--ink)} | |
| .joint b{position:relative;background:var(--desk);padding:2px 8px;font:600 var(--t-12) var(--mono);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-1)} | |
| .joints{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-6)} | |
| .joints p{font-size:var(--t-14);color:var(--graphite)}.joints b{font-family:var(--mono);color:var(--ink);margin-right:6px} | |
| .trust{width:100%;border-collapse:collapse;font-size:var(--t-14)} | |
| .trust th,.trust td{text-align:left;padding:var(--s-4) var(--s-4) var(--s-4) 0;border-bottom:1px solid var(--rule);vertical-align:top} | |
| .trust thead th{font:500 var(--t-12) var(--sans);color:var(--pencil);border-bottom:1px solid var(--ink)} | |
| .trust td:first-child{font-weight:600;width:22%} | |
| .quote{font-size:var(--t-20);letter-spacing:-.02em;margin:var(--s-8) 0 0;font-weight:600} | |
| .points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-10)} | |
| .points h3{font-size:var(--t-14);margin:0 0 6px}.points p{font-size:var(--t-13);color:var(--graphite)} | |
| .fit{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-10);margin-top:var(--s-12)} | |
| .fit p{padding:var(--s-4) 0;border-top:1px solid var(--rule);font-size:var(--t-14);color:var(--graphite)}.fit b{display:block;color:var(--ink);margin-bottom:4px;font-weight:600} | |
| .closing h2{font-size:clamp(1.6rem,3vw,var(--t-32))} | |
| .closing p{color:var(--pencil);margin:0 0 var(--s-6);max-width:560px} | |
| .closing .fine{margin:var(--s-4) 0 0} | |
| footer.foot{border-top:1px solid var(--rule);padding:var(--s-6) 0 var(--s-10);font:400 var(--t-12) var(--mono);color:var(--faint)} | |
| footer.foot .wrap{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap} | |
| /* 로그인 */ | |
| .signin{min-height:calc(100dvh - 56px);display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr)} | |
| .signin-form{padding:80px var(--s-12);background:var(--paper);border-right:1px solid var(--rule)} | |
| .signin-form h1{font-size:var(--t-32);letter-spacing:-.03em;margin:0 0 var(--s-2)} | |
| .signin-form .sub{color:var(--pencil);margin:0 0 var(--s-8);font-size:var(--t-14)} | |
| .providers{display:flex;flex-direction:column;gap:var(--s-2)} | |
| .provider{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:48px;padding:0 var(--s-4);border-radius:var(--r-2);border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--t-14);transition:border-color var(--d-1) var(--ease),transform var(--d-1) var(--ease)} | |
| .provider:hover{border-color:var(--ink)}.provider:active{transform:scale(.98)} | |
| .provider small{font:400 var(--t-11) var(--mono);color:var(--pencil);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} | |
| .signin-empty{padding:var(--s-4);border-radius:var(--r-3);background:var(--well);color:var(--graphite);font-size:var(--t-13)} | |
| .signin-error{margin-bottom:var(--s-4)} | |
| .signin-note{margin-top:var(--s-8);font-size:var(--t-13);color:var(--pencil)} | |
| .signin-side{display:flex;align-items:center;justify-content:center;padding:var(--s-12)} | |
| .signin-side .ledger{max-width:560px;width:100%} | |
| @media(max-width:900px){ | |
| .hero{grid-template-columns:1fr;gap:var(--s-10);padding:var(--s-12) 0 64px} | |
| .steps,.points{grid-template-columns:1fr;gap:var(--s-6)}.steps li{padding-right:0} | |
| .layers{grid-template-columns:1fr}.joint{height:56px}.joint::before{left:50%;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid var(--ink)} | |
| .joints,.fit{grid-template-columns:1fr} | |
| .signin{grid-template-columns:1fr}.signin-side{display:none}.signin-form{padding:var(--s-12) var(--s-6);border-right:0} | |
| section.band{padding:64px 0} | |
| } | |
| @media(max-width:520px){.wrap{padding:0 var(--s-4)}.trust td:first-child{width:auto}} | |
| @media(prefers-reduced-motion:reduce){.e-join,.chip,.decision,.provider,.stamp-in{transition:none}} | |