Revamp onboarding page styling
This commit is contained in:
Aaron
@@ -1,14 +1,20 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0c111a;
|
||||
--panel: #131a24;
|
||||
--text: #dce5f7;
|
||||
--muted: #95a3c1;
|
||||
--accent: #3dd598;
|
||||
--border: #1f2734;
|
||||
--bg: #070b15;
|
||||
--panel: rgba(13, 18, 28, 0.9);
|
||||
--panel-2: rgba(18, 26, 40, 0.7);
|
||||
--text: #e9f0ff;
|
||||
--muted: #9bb0ca;
|
||||
--accent: #44d392;
|
||||
--accent-2: #6cc9ff;
|
||||
--border: #1b2538;
|
||||
--shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
|
||||
--glow: 0 20px 70px rgba(68, 211, 146, 0.14);
|
||||
}
|
||||
|
||||
* {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -17,37 +23,45 @@ body {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: radial-gradient(120% 120% at 20% 20%, #162133, #0c111a 60%);
|
||||
padding: 32px 22px;
|
||||
background: radial-gradient(140% 140% at 12% 18%, #0f1625, #080c14 58%);
|
||||
color: var(--text);
|
||||
font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 720px;
|
||||
max-width: 920px;
|
||||
width: 100%;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 20px 22px 24px;
|
||||
box-shadow: 0 12px 50px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 18px;
|
||||
padding: 28px 30px 32px;
|
||||
box-shadow: var(--shadow), var(--glow);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.35rem;
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
margin: 10px 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dot {
|
||||
@@ -55,65 +69,108 @@ p {
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 12px var(--accent);
|
||||
box-shadow: 0 0 14px var(--accent);
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin: 10px 0 4px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel-2);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.badge .dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin: 12px 0 4px;
|
||||
margin: 18px 0 12px;
|
||||
}
|
||||
|
||||
button,
|
||||
a.ghost {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--accent);
|
||||
color: #0c111a;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, var(--accent), #2dbb7b);
|
||||
color: #041008;
|
||||
padding: 12px 18px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 10px 30px rgba(68, 211, 146, 0.22);
|
||||
transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
a.ghost:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 36px rgba(68, 211, 146, 0.3);
|
||||
filter: brightness(1.02);
|
||||
}
|
||||
|
||||
button.ghost,
|
||||
a.ghost {
|
||||
background: transparent;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.copy {
|
||||
margin-left: 8px;
|
||||
background: transparent;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 10px;
|
||||
padding: 7px 11px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
margin: 12px 0;
|
||||
padding: 10px 12px;
|
||||
padding: 14px 15px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.steps h3 {
|
||||
margin: 0 0 6px;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 6px 0 4px 18px;
|
||||
margin: 6px 0 6px 18px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
background: #0b1018;
|
||||
background: #0b111c;
|
||||
border: 1px solid var(--border);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
margin-top: 6px;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
@@ -126,6 +183,12 @@ summary {
|
||||
}
|
||||
|
||||
.footnote {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.93rem;
|
||||
color: var(--muted);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.subtle {
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user