/* =========================================================================== UB Satish — the door and the hub Property of Zera Technologies (https://zeratech.io/) --------------------------------------------------------------------------- Two businesses that look nothing alike: the lending system is midnight and gold, the land portal is bone and forest green. The hub does not try to reconcile them. It sits in a dark, quiet room and lets each card wear its own colours, so the tap into either one feels like walking through a door into a place you already recognise rather than a page change. MOBILE FIRST, and meant literally: this page is opened one-handed, standing in a field, on a phone whose address bar has already eaten a hundred pixels. Both doors must be on screen at once without a scroll — a chooser you have to scroll is not a chooser. Every measurement below is in service of that, and the layout is checked at 390, 360 and 320 px wide. =========================================================================== */ :root { --bg: #0b0f16; --ink: #f2f4f7; --ink-2: #b9c2cf; --ink-3: #7d8798; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.055); --gold: #c9a227; --gold-l: #e4c76a; --forest-l:#8fcfa6; --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* The colour wash behind everything sits at z-index -1, which puts it BEHIND the body's own background — so the background belongs on and the body stays transparent, or the wash is invisible. */ html { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: transparent; color: inherit; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); } /* A slow wash of colour — the two businesses bleeding into the room from opposite corners. Motion is off for anyone who asks for it off. */ .field { position: fixed; inset: 0; z-index: -1; overflow: hidden; } .field span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; animation: drift 26s ease-in-out infinite alternate; } .field span:nth-child(1) { width: 62vmax; height: 62vmax; top: -28vmax; left: -22vmax; background: #14502f; } .field span:nth-child(2) { width: 54vmax; height: 54vmax; bottom: -26vmax; right: -20vmax; background: #6b5210; animation-delay: -9s; } .field span:nth-child(3) { width: 40vmax; height: 40vmax; top: 34%; left: 48%; background: #12243f; opacity: .5; animation-delay: -17s; } @keyframes drift { to { transform: translate3d(4vmax, -3vmax, 0) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .field span { animation: none; } } /* ══ BOOT ════════════════════════════════════════════════════════════ */ #boot { position: fixed; inset: 0; display: grid; place-items: center; } #boot[hidden] { display: none; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); border-top-color: var(--gold-l); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ══ THE DOOR ════════════════════════════════════════════════════════ */ /* Two rows: the card takes all the free height and centres inside it, the credit line stays on the floor where it belongs. */ #door { flex: 1; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; } #door[hidden], #hub[hidden] { display: none; } .door-card { width: 100%; max-width: 360px; text-align: center; padding: 36px 24px 28px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 24px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); } .mark { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(150deg, #2c6f4a, #1a4630); color: #eaf5ee; box-shadow: 0 12px 26px -10px rgba(26,70,48,.9), inset 0 1px 0 rgba(255,255,255,.18); } .mark svg { width: 27px; height: 27px; } .door-card h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 31px; letter-spacing: -.02em; } .tagline { margin: 7px 0 24px; font-size: 13px; color: var(--ink-3); } .gsi-slot { display: flex; justify-content: center; min-height: 44px; } .door-err { margin-top: 16px; padding: 11px 13px; border-radius: 11px; background: rgba(214,69,69,.13); border: 1px solid rgba(214,69,69,.3); color: #ffb4b4; font-size: 12.5px; line-height: 1.5; } .fine { margin: 22px 0 0; font-size: 11px; line-height: 1.7; color: var(--ink-3); } /* ══ THE HUB ═════════════════════════════════════════════════════════ */ #hub { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; } .hub-top { display: flex; align-items: center; gap: 10px; min-height: 38px; } .hub-brand { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; letter-spacing: -.01em; } .hub-logo { width: 18px; height: 18px; color: var(--forest-l); } .who { margin-left: auto; display: flex; align-items: center; gap: 7px; max-width: 52vw; padding: 3px 11px 3px 3px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font: 600 12px var(--sans); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .who img { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #223; object-fit: cover; } .greet { margin: 20px 0 16px; } .greet h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 7.2vw, 42px); letter-spacing: -.025em; line-height: 1.06; } .greet p { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); letter-spacing: .01em; } /* ── the two doors ─────────────────────────────────────────────────── Full width and stacked on a phone, because the serif titles and the figures both want the room. Side by side from 640px, which catches a phone held sideways as well as any tablet. */ .doors { display: grid; gap: 12px; } @media (min-width: 640px) { .doors { grid-template-columns: 1fr 1fr; gap: 16px; } } .biz { position: relative; display: flex; flex-direction: column; padding: 17px 18px 18px; border-radius: 20px; text-decoration: none; color: inherit; overflow: hidden; border: 1px solid var(--line); transition: transform .18s ease, box-shadow .18s ease; } .biz::before { /* A texture that says what the place is before you have read a word: furrows for the land, coin rings for the money. Barely there on purpose — you should feel it, not notice it. */ content: ""; position: absolute; inset: 0; pointer-events: none; } .biz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.13); pointer-events: none; } .biz:active { transform: scale(.985); } @media (hover: hover) { .biz:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(0,0,0,.9); } .biz:hover .biz-arrow { transform: translateX(3px); } } .biz:focus-visible { outline: 2px solid var(--forest-l); outline-offset: 3px; } /* Each card IS its app: the same ground you land on when you tap it. */ .biz.land { background: radial-gradient(120% 90% at 0% 0%, rgba(143,207,166,.16), transparent 58%), linear-gradient(160deg, #1b3f2c, #12261c); } .biz.land::before { background: repeating-linear-gradient(104deg, rgba(255,255,255,.030) 0 1px, transparent 1px 10px); } .biz.lend { background: radial-gradient(120% 90% at 100% 0%, rgba(228,199,106,.15), transparent 58%), linear-gradient(160deg, #141c30, #0d1320); } .biz.lend::before { background: repeating-radial-gradient(circle at 96% 4%, rgba(228,199,106,.040) 0 1px, transparent 1px 14px); } .biz-top { display: flex; align-items: center; gap: 9px; position: relative; } .biz-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); } .biz-ico svg { width: 18px; height: 18px; } .land .biz-ico { color: var(--forest-l); } .lend .biz-ico { color: var(--gold-l); } .biz-kicker { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .land .biz-kicker { color: rgba(143,207,166,.82); } .lend .biz-kicker { color: rgba(228,199,106,.82); } .biz-arrow { margin-left: auto; width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid var(--line); transition: transform .18s ease; } .biz-arrow svg { width: 13px; height: 13px; } .land .biz-arrow { color: var(--forest-l); } .lend .biz-arrow { color: var(--gold-l); } .biz h3 { position: relative; margin: 13px 0 0; font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: -.02em; line-height: 1.1; } .figs { position: relative; display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; } .fig { display: flex; flex-direction: column; gap: 1px; } .fig b { font-size: 19px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .land .fig b { color: #dff0e4; } .lend .fig b { color: #f4e6bd; } .fig span { font-size: 10px; color: var(--ink-3); letter-spacing: .04em; } /* A number on its way looks like a number, not like nothing. */ .skel { display: inline-block; min-width: 58px; border-radius: 6px; background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.13) 38%, transparent 58%) rgba(255,255,255,.055); background-size: 260% 100%; animation: shim 1.4s linear infinite; color: transparent !important; } @keyframes shim { to { background-position: -160% 0; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* The calm state describes the place. The alert state is the one thing in the card that is asking for something, and it is marked with a dot so it reads as a flag rather than as more prose. */ .biz-note { position: relative; margin-top: 11px; font-size: 12px; line-height: 1.55; color: var(--ink-2); opacity: .78; } .biz-note.alert { display: inline-block; align-self: flex-start; margin-top: 11px; padding: 5px 12px 5px 24px; border-radius: 999px; opacity: 1; font-weight: 550; font-size: 11.5px; border: 1px solid var(--line); background: rgba(255,255,255,.05); } .biz-note.alert::before { content: ""; position: absolute; left: 10px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; } .land .biz-note.alert { color: #cfe9d8; } .land .biz-note.alert::before { background: var(--forest-l); box-shadow: 0 0 0 3px rgba(143,207,166,.16); } .lend .biz-note.alert { color: #f0e2bb; } .lend .biz-note.alert::before { background: var(--gold-l); box-shadow: 0 0 0 3px rgba(228,199,106,.16); } .biz-note b { font-weight: 700; } /* ── tray ── */ .tray { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; } .tray-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font: 600 12px var(--sans); cursor: pointer; } .tray-b svg { width: 14px; height: 14px; } .tray-b:active { background: rgba(255,255,255,.09); } .tray-b.quiet { background: none; border-color: var(--line-2); color: var(--ink-3); } .tray-b[hidden] { display: none; } .credit { margin-top: auto; padding-top: 22px; font-size: 10px; line-height: 1.75; color: var(--ink-3); text-align: center; } .credit a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); } /* A toast, for the rare thing worth saying. */ #toasts { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: grid; gap: 8px; justify-items: center; } .toast { max-width: 420px; padding: 11px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 550; line-height: 1.45; background: #1b2330; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); } .toast.bad { background: #3a1c1c; border-color: rgba(255,120,120,.3); color: #ffd4d4; } /* ── short screens: the real constraint ─────────────────────────────── */ @media (max-height: 700px) { .greet { margin: 13px 0 11px; } .greet h2 { font-size: clamp(22px, 6.4vw, 30px); } .greet p { font-size: 11.5px; margin-top: 5px; } .biz { padding: 14px 16px 15px; } .biz h3 { font-size: 21px; margin-top: 11px; } .figs { margin-top: 10px; } .biz-note, .biz-note.alert { margin-top: 9px; } .tray { margin-top: 12px; } .tray-b { min-height: 38px; } .credit { padding-top: 14px; } } /* A screen this short is a 2016 phone. Give up the date and some air rather than the second door. */ @media (max-height: 600px) { .greet { margin: 10px 0 9px; } .greet h2 { font-size: 21px; } .greet p { display: none; } .biz { padding: 12px 14px 13px; } .biz h3 { font-size: 19px; margin-top: 9px; } .biz-ico { width: 31px; height: 31px; } .figs { margin-top: 9px; } .fig b { font-size: 16.5px; } .tray { margin-top: 10px; } .credit { padding-top: 10px; } } /* ── small phones (iPhone SE, older Androids) ───────────────────────── */ @media (max-width: 380px) { .credit { font-size: 9.5px; line-height: 1.7; } } @media (max-width: 360px) { body { padding-left: 13px; padding-right: 13px; } .greet { margin: 16px 0 13px; } .biz { padding: 15px 15px 16px; border-radius: 18px; } .biz h3 { font-size: 21px; margin-top: 11px; } .figs { gap: 14px; margin-top: 10px; } .fig b { font-size: 17.5px; } .who { max-width: 44vw; } } /* ── phone held sideways: very little height, plenty of width ───────── */ @media (orientation: landscape) and (max-height: 540px) { .greet { margin: 10px 0 9px; } .greet h2 { font-size: 23px; } .greet p { display: none; } .biz { padding: 13px 15px 14px; } .biz h3 { font-size: 20px; margin-top: 9px; } .figs { margin-top: 9px; } .biz-note, .biz-note.alert { margin-top: 8px; } .tray { margin-top: 10px; } .credit { padding-top: 11px; } }