diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 205 |
1 files changed, 163 insertions, 42 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 5f16a6c..37775d8 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -670,7 +670,47 @@ a:hover { text-decoration: underline; } keyboard) and `row-reverse` is what moves it right. Headings are `.welcome-pitch .welcome-h` rather than a bare class so they outrank `.main h2`. */ +/* The whole sign-in page sits on one dark backdrop, in either theme: steel + blue at the top left, night blue pooling at the bottom left, charcoal to near + black at the bottom right. Drawn in CSS alone, a fixed layer under the + page. The theme tokens are redefined for everything on it, so the form, the + cards and the chips keep their own rules and still read. */ +.welcome-backdrop { + position: fixed; + inset: 0; + z-index: 0; + overflow: hidden; + pointer-events: none; + background: linear-gradient(155deg, + #86a3c4 0%, #6a819b 18%, #3d4d61 42%, #232b36 66%, #0f1113 100%); +} +/* The night-blue pool. */ +.welcome-backdrop::before { + content: ''; + position: absolute; + left: -25%; + bottom: -30%; + width: 85%; + height: 90%; + background: radial-gradient(closest-side, rgba(26, 46, 110, 0.95), transparent); + filter: blur(36px); +} + .welcome { + --text: #f4f6fa; + --text-secondary: rgba(236, 241, 248, 0.80); + --text-dim: rgba(226, 233, 243, 0.60); + --border: rgba(255, 255, 255, 0.14); + --bg-base: rgba(255, 255, 255, 0.06); + --bg-surface: rgba(255, 255, 255, 0.07); + --accent-bg: rgba(255, 255, 255, 0.10); + --accent: #8fd0ff; + --accent-hover: #b5e0ff; + --accent-text: #0b1220; + --border-focus: #8fd0ff; + position: relative; + z-index: 1; + color: var(--text); display: flex; flex-direction: row-reverse; align-items: flex-start; @@ -679,7 +719,16 @@ a:hover { text-decoration: underline; } width: 100%; max-width: 1180px; } -.welcome > .login-card { flex: 0 0 380px; } +.welcome-side { display: flex; flex: 0 0 380px; flex-direction: column; gap: 16px; } +/* Frosted glass over the backdrop rather than a white sheet on it. */ +.welcome .login-card { + border-color: rgba(255, 255, 255, 0.16); + background: rgba(12, 16, 22, 0.45); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); + -webkit-backdrop-filter: blur(14px); + backdrop-filter: blur(14px); +} +.welcome .login-card h2 { color: var(--text); } .welcome-pitch { flex: 1 1 0; @@ -691,13 +740,14 @@ a:hover { text-decoration: underline; } } .welcome-pitch p { margin-bottom: 10px; } -.welcome-apps, .welcome-uses, .welcome-never { list-style: none; } +.welcome-apps, .welcome-steps, .welcome-uses, .welcome-badges, +.welcome-docs ul { list-style: none; } .welcome-title { - margin-bottom: 10px; + margin-bottom: 12px; color: var(--text); - font-size: 1.9em; - font-weight: 700; + font-size: 2.3em; + font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; @@ -718,18 +768,6 @@ a:hover { text-decoration: underline; } } .welcome-apps .icon { color: var(--accent); } -.welcome-e2e { - display: flex; - align-items: flex-start; - gap: 10px; - padding: 8px 14px; - border-left: 3px solid var(--accent); - border-radius: 0 6px 6px 0; - background: var(--accent-bg); - color: var(--text); -} -.welcome-e2e .icon { margin-top: 0.3em; color: var(--accent); } - .welcome-pitch .welcome-h { margin: 18px 0 8px; color: var(--text-dim); @@ -748,7 +786,39 @@ a:hover { text-decoration: underline; } font-size: 0.92em; line-height: 1.45; } -.welcome-use-icon { +/* How it works: three cards side by side, numbered by the counter so the + translation only carries the sentence. */ +.welcome-steps { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + counter-reset: welcome-step; +} +.welcome-steps li { + position: relative; + display: flex; + flex-direction: column; + gap: 8px; + padding: 14px 14px 12px; + border: 1px solid var(--border); + border-radius: 10px; + background: var(--bg-surface); + color: var(--text); + font-size: 0.9em; + line-height: 1.45; + counter-increment: welcome-step; +} +.welcome-steps li::after { + content: counter(welcome-step); + position: absolute; + top: 10px; + right: 12px; + color: var(--text-dim); + font-size: 1.3em; + font-weight: 700; + opacity: 0.5; +} +.welcome-step-icon, .welcome-use-icon { display: inline-flex; flex: 0 0 auto; align-items: center; @@ -761,57 +831,108 @@ a:hover { text-decoration: underline; } font-size: 17px; } -.welcome-hub { - margin-top: 18px; +/* Privacy, said once: a warm card rather than a list of denials. */ +.welcome-private { + display: flex; + align-items: flex-start; + gap: 14px; + margin-top: 20px; + padding: 16px 18px; + border-radius: 12px; + background: var(--accent-bg); + color: var(--text); +} +.welcome-private-icon { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--accent); + color: var(--accent-text); + font-size: 20px; +} +.welcome-pitch .welcome-private-title { + margin: 2px 0 4px; + color: var(--text); + font-size: 1.05em; + font-weight: 600; +} +.welcome-pitch .welcome-private p { margin-bottom: 10px; } +.welcome-badges { display: flex; flex-wrap: wrap; gap: 6px; } +.welcome-badges li { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 10px; + border-radius: 999px; + background: var(--bg-surface); + color: var(--text); + font-size: 0.82em; + font-weight: 500; +} +.welcome-badges .icon { color: var(--success); } + +.welcome-docs { + margin-top: 16px; padding: 12px 18px; border: 1px solid var(--border); - border-radius: 8px; + border-radius: 10px; background: var(--bg-surface); - font-size: 0.92em; + font-size: 0.9em; } -.welcome-pitch .welcome-hub .welcome-h { margin-top: 0; } -.welcome-pitch .welcome-hub-never { margin-bottom: 6px; color: var(--text); font-weight: 600; } -.welcome-never { display: flex; flex-direction: column; gap: 4px; color: var(--text); } -.welcome-never li { display: flex; align-items: flex-start; gap: 8px; } -.welcome-never .icon { margin-top: 0.3em; color: var(--success); } -.welcome-pitch .welcome-hub-free { - margin: 10px 0 0; - padding-top: 8px; - border-top: 1px solid var(--border); - color: var(--text); - font-weight: 500; +.welcome-pitch .welcome-docs .welcome-h { margin-top: 0; } +.welcome-docs ul { display: flex; flex-direction: column; gap: 6px; } +.welcome-docs li { + display: grid; + grid-template-columns: auto 10em 1fr; + align-items: baseline; + gap: 2px 8px; } +.welcome-docs .icon { color: var(--accent); } +.welcome-docs-label { color: var(--text); font-weight: 500; } +.welcome-docs-links { min-width: 0; overflow-wrap: anywhere; } .welcome-links { display: flex; - flex-wrap: wrap; - align-items: center; - gap: 12px 20px; - margin-top: 14px; + flex-direction: column; + align-items: stretch; + gap: 10px; + text-align: center; } .welcome-cta { - display: inline-flex; + display: flex; align-items: center; + justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 6px; - background: var(--accent); - color: var(--accent-text); + /* Green, so it does not compete with the blue sign-in button above it. + #16a34a rather than --success: white text is still legible on it. */ + background: #16a34a; + color: #ffffff; font-size: 0.95em; font-weight: 600; } -.welcome-cta:hover { background: var(--accent-hover); text-decoration: none; } +.welcome-cta:hover { background: #15803d; text-decoration: none; } .welcome-legal { color: var(--text-secondary); font-size: 0.9em; } .welcome-legal:hover { color: var(--accent); } @media (max-width: 1000px) { .welcome { flex-direction: column; align-items: center; gap: 36px; } - .welcome > .login-card { flex: none; } + .welcome-side { flex: none; width: 100%; max-width: 380px; } .welcome-pitch { flex: none; width: 100%; max-width: 520px; } } @media (max-width: 520px) { .welcome-title { font-size: 1.6em; } .welcome-uses { grid-template-columns: 1fr; } + .welcome-steps { grid-template-columns: 1fr; } + .welcome-steps li { flex-direction: row; align-items: center; padding-right: 36px; } + .welcome-steps li::after { top: 50%; transform: translateY(-50%); } + .welcome-docs li { grid-template-columns: auto 1fr; } + .welcome-docs-links { grid-column: 2; } } /* ── Form elements ────────────────────────────────────────────────────────── */ |