111 lines
2.0 KiB
CSS
111 lines
2.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=ZCOOL+XiaoWei&display=swap');
|
|
|
|
:root {
|
|
--bg: #070a10;
|
|
--bg-elevated: #0d121a;
|
|
--ink: #d5ccb8;
|
|
--ink-soft: #a89e8a;
|
|
--ink-bright: #f4ead8;
|
|
--gold: #cda15a;
|
|
--gold-soft: #d5ba84;
|
|
--cinnabar-soft: #d48d79;
|
|
--serif: 'Noto Serif SC', 'Songti SC', serif;
|
|
--display: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
|
|
font-family: var(--serif);
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 18% 18%, rgba(138, 28, 18, 0.12), transparent 24%),
|
|
radial-gradient(circle at 82% 16%, rgba(199, 160, 94, 0.08), transparent 20%),
|
|
linear-gradient(180deg, #090c12, #070a10 34%, #090c12 100%);
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent 0,
|
|
transparent 108px,
|
|
rgba(255, 245, 222, 0.018) 108px,
|
|
rgba(255, 245, 222, 0.018) 109px
|
|
),
|
|
radial-gradient(circle at 50% -10%, rgba(221, 179, 98, 0.08), transparent 32%),
|
|
var(--bg);
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(circle at 22% 20%, rgba(255, 248, 232, 0.04), transparent 14%),
|
|
radial-gradient(circle at 76% 14%, rgba(193, 151, 73, 0.05), transparent 16%);
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
a,
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
color: inherit;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
ul {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: var(--ink-bright);
|
|
font-weight: 600;
|
|
}
|
|
|
|
p,
|
|
li,
|
|
label,
|
|
span,
|
|
input,
|
|
textarea,
|
|
select,
|
|
button {
|
|
font-family: var(--serif);
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(205, 161, 90, 0.28);
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|