yaya
94899e69d3
Preserve hosted website UX inside Archipelago, add isolated Business and owner-authorized native wallet setup, and include deployment handoff. Based on main with native signer import already accepted.
5 lines
3.1 KiB
CSS
5 lines
3.1 KiB
CSS
html{background:#0a0a0a}body{min-height:100vh;min-height:100dvh;background:#0a0a0a}.menu.intro{display:none}.merchant-hero{min-height:156px;padding:18px 20px 22px;background-position:center 44%;overflow:hidden}.merchant-hero .wash{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.35)),linear-gradient(0deg,rgba(0,0,0,.72),transparent 70%)}.merchant-hero nav{min-height:30px}.merchant-hero nav a{font-size:14px}.merchant-hero nav small{font-size:8px}.hero-copy{margin-top:auto}.hero-copy p,.hero-copy>span{display:none}.hero-copy h1{max-width:92%;margin:18px 0 0;font-size:clamp(32px,10vw,46px);line-height:.9;letter-spacing:-.055em}.order-shell{width:100%;display:block;margin:0;padding:0;background:var(--panel)}.menu:not(.intro){padding:28px 20px 0}.menu:not(.intro) h2{font-size:34px}.order-form{position:static;width:100%;padding:28px 20px max(24px,env(safe-area-inset-bottom));border:0;border-radius:0;background:var(--panel);box-shadow:none}.order-form h2{max-width:390px;margin:10px 0 25px;font-size:clamp(38px,11vw,48px);line-height:.92}.order-form label{margin-top:17px}.order-form input,.order-form textarea{padding:15px;border-radius:11px;font-size:16px}.order-form textarea{min-height:116px}.order-form #submit{min-height:58px;align-items:center;margin-top:22px;border-radius:11px;font-size:15px}.privacy{margin:13px 0 0}.confirmed{background:var(--bg)}
|
|
@media(min-width:760px){body{padding:24px;background:#0a0a0a}#app:not(:has(>.loading)):not(:has(>.error)):not(:has(>.confirmed)){width:min(1180px,100%);min-height:min(760px,calc(100dvh - 48px));margin:auto;display:grid;grid-template-columns:minmax(320px,43%) minmax(420px,57%);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:#fff;box-shadow:0 35px 100px rgba(0,0,0,.38)}.merchant-hero{min-height:100%;padding:28px 32px 38px;background-position:center}.merchant-hero .wash{background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.08) 68%),linear-gradient(90deg,rgba(0,0,0,.4),transparent)}.merchant-hero nav a{font-size:17px}.merchant-hero nav small{font-size:9px}.hero-copy p,.hero-copy>span{display:block}.hero-copy p{color:#ff6b35}.hero-copy h1{max-width:100%;margin:18px 0 20px;font-size:clamp(50px,5.4vw,82px);line-height:.84}.hero-copy>span{max-width:330px;color:rgba(255,255,255,.76);font-size:16px}.order-shell{min-height:100%;display:flex;flex-direction:column;justify-content:center;overflow:auto}.menu:not(.intro){padding:42px 50px 0}.products{max-height:32vh;overflow:auto}.order-form{max-width:640px;margin:auto;padding:48px clamp(42px,5vw,76px)}.order-form h2{max-width:520px;font-size:clamp(48px,4.5vw,68px)}.order-form input,.order-form textarea{padding:16px}.order-form textarea{min-height:126px}.order-form #submit{min-height:62px}.menu:not(.intro)+.order-form{margin-top:0;padding-top:30px}}
|
|
@media(min-width:1400px){body{display:grid;place-items:center}#app:not(:has(>.loading)):not(:has(>.error)):not(:has(>.confirmed)){min-height:min(800px,calc(100dvh - 64px))}}
|
|
@media(max-width:420px){.merchant-hero{min-height:138px;padding-top:max(16px,env(safe-area-inset-top))}.order-form h2{font-size:38px}.order-form{padding-top:24px}.order-form textarea{min-height:104px}}
|