47 lines
1.6 KiB
CSS
47 lines
1.6 KiB
CSS
:root {
|
|
--bg: #e6e8ee;
|
|
--ink: #1f2023;
|
|
--muted: #5d646f;
|
|
--card: linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96));
|
|
--line: #b9cbe0;
|
|
--accent: linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%);
|
|
--accent-line: #88a4d4;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
background:
|
|
radial-gradient(760px 360px at 14% 6%, rgba(255,255,255,0.82), transparent 72%),
|
|
radial-gradient(760px 360px at 88% 8%, rgba(154, 203, 247, 0.16), transparent 74%),
|
|
repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(170,182,198,0.03) 1px 3px),
|
|
linear-gradient(#eef1f6, #dde2ea);
|
|
color: var(--ink);
|
|
}
|
|
.shell {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: 24px 16px 48px;
|
|
}
|
|
.hero { margin-bottom: 16px; }
|
|
.eyebrow {
|
|
margin: 0;
|
|
color: #5f6772;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 12px;
|
|
}
|
|
h1 { margin: 6px 0 0; font-size: 32px; }
|
|
.card {
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%),
|
|
repeating-linear-gradient(to bottom, rgba(255,255,255,0.26) 0 1px, rgba(188,205,223,0.10) 1px 3px),
|
|
var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
box-shadow: 0 10px 20px rgba(78, 107, 139, 0.09), inset 0 1px 0 rgba(255,255,255,0.96);
|
|
}
|
|
code { background: #eef3fb; padding: 1px 5px; border-radius: 6px; }
|