-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpages.css
More file actions
119 lines (109 loc) · 5.38 KB
/
Copy pathpages.css
File metadata and controls
119 lines (109 loc) · 5.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
@font-face{
font-family:'Stack Sans Notch';
font-style:normal;
font-weight:200 700;
font-display:swap;
src:url('fonts/stack-sans-notch-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Stack Sans Notch';
font-style:normal;
font-weight:200 700;
font-display:swap;
src:url('fonts/stack-sans-notch-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
color-scheme:dark;
--void:#05060B; --bg:#090B12; --bg-2:#0D1018;
--glass-1:rgba(255,255,255,0.032); --glass-2:rgba(255,255,255,0.055); --glass-3:rgba(255,255,255,0.085);
--edge:rgba(255,255,255,0.10); --edge-2:rgba(255,255,255,0.17);
--sheen:rgba(255,255,255,0.16);
--blur-1:10px; --blur-2:20px;
--ink:#EDF0F9; --ink-2:#A5ADC4; --ink-3:#6B7490; --ink-4:#434B63;
--iris:#8AA0FF; --iris-2:#B394FF; --mint:#55DFA4;
--iris-wash:rgba(138,160,255,0.14);
--on-accent:#0A0D1A;
--lift-1:0 1px 2px rgba(0,0,0,0.45);
--lift-2:0 10px 28px -10px rgba(0,0,0,0.62);
--halo:0 0 0 1px rgba(138,160,255,0.38),0 10px 44px -14px rgba(138,160,255,0.55);
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
--display:"Stack Sans Notch",var(--sans);
--ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
--r:14px; --r-sm:10px; --r-lg:20px; --r-full:999px;
--pad:clamp(20px,5vw,40px); --max:820px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--sans);font-size:16.5px;line-height:1.65;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
background:
radial-gradient(38vmax 32vmax at 12% 4%, rgba(138,160,255,0.22),transparent 62%),
radial-gradient(34vmax 30vmax at 88% 12%, rgba(179,148,255,0.18),transparent 60%),
radial-gradient(40vmax 34vmax at 70% 92%, rgba(94,220,228,0.13), transparent 62%),
radial-gradient(30vmax 26vmax at 20% 80%, rgba(85,223,164,0.10), transparent 60%);
filter:saturate(120%);
}
::selection{background:var(--iris);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol{margin:0}
a{color:var(--iris);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
/* nav */
header.nav{
position:sticky;top:0;z-index:50;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
background:color-mix(in srgb,var(--bg) 88%,transparent);
border-bottom:1px solid var(--edge);
}
.nav-in{display:flex;align-items:center;gap:20px;height:66px}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:1.02rem;color:var(--ink)}
.mark:hover{text-decoration:none}
.glyph{width:36px;height:auto;flex:none;display:block;color:var(--ink);fill:currentColor;transition:color .3s ease}
.mark:hover .glyph{color:var(--iris)}
.nav-in .back{margin-left:auto;font-size:.9rem;color:var(--ink-2)}
.nav-in .back:hover{color:var(--ink);text-decoration:none}
/* document pane */
main{padding:clamp(40px,7vw,72px) 0 clamp(56px,8vw,96px)}
.pane{
position:relative;
background:var(--glass-2);border:1px solid var(--edge);
border-radius:var(--r-lg);box-shadow:var(--lift-2);
backdrop-filter:blur(var(--blur-2)) saturate(160%);
-webkit-backdrop-filter:blur(var(--blur-2)) saturate(160%);
padding:clamp(26px,5vw,48px);
}
.pane::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px 1px 0;
background:linear-gradient(to bottom,var(--sheen),transparent 42%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
pointer-events:none;opacity:.7;
}
.t-label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h1{font-family:var(--display);font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.12;letter-spacing:-.03em;font-weight:650;margin:10px 0 6px}
.updated{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:22px}
.intro{color:var(--ink-2);margin-bottom:8px}
.doc h2{font-family:var(--display);font-size:1.12rem;letter-spacing:-.015em;font-weight:640;margin:30px 0 10px}
.doc p{color:var(--ink-2);margin-bottom:12px}
.doc ol,.doc ul{color:var(--ink-2);padding-left:22px;margin-bottom:12px}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--ink-3)}
/* footer */
footer{border-top:1px solid var(--edge);padding:30px 0 44px}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.88rem;margin-bottom:18px}
.foot-links a{color:var(--ink-2)}
.foot-links a:hover{color:var(--ink);text-decoration:none}
.registered{
font-size:.78rem;line-height:1.65;color:var(--ink-4);max-width:78ch;
}
.registered b{font-weight:600;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}