-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoffline.css
More file actions
51 lines (51 loc) · 3.33 KB
/
Copy pathoffline.css
File metadata and controls
51 lines (51 loc) · 3.33 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
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-700-normal-latin.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Metal Mania";src:url(fonts/metal-mania-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(fonts/crimson-pro-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
--void:#050507; --void-2:#0a0a10; --void-3:#14141c; --void-4:#1c1c26;
--ghost:#e8e6dc; --ghost-dim:#8a877a; --ghost-low:#3a3830;
--blood:#ff1f2e;
--uv:#6f3eff;
--crt:#39ff14; --crt-dim:#1a8a09;
--mono:"JetBrains Mono",ui-monospace,monospace;
--display:"Metal Mania",serif;
--serif:"Crimson Pro",Georgia,serif;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html,body{height:100%}
body{margin:0; background:var(--void); color:var(--ghost); font-family:var(--serif);
font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
display:flex; align-items:center; justify-content:center; padding:40px 26px; text-align:center}
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35;
background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.35) 2px 3px)}
main{position:relative; z-index:2; max-width:62ch}
.tag{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
color:var(--crt-dim); margin:0 0 26px}
.tag b{color:var(--blood); font-weight:700}
.glyph{color:var(--uv)}
h1{font-family:var(--display); font-weight:400; letter-spacing:.01em;
font-size:clamp(3rem,12vw,6rem); line-height:1; margin:0 0 6px; color:var(--ghost)}
h1 span{color:var(--blood)}
.rule{width:100%; height:1px; margin:34px 0;
background:linear-gradient(90deg,transparent,var(--void-4),transparent)}
p{margin:0 0 20px; color:var(--ghost-dim)}
p.lead{color:var(--ghost); font-size:19px}
strong{color:var(--ghost); font-weight:600}
.next{font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ghost-dim); margin-top:38px}
.next b{display:block; font-family:var(--display); font-size:clamp(1.8rem,7vw,3rem);
letter-spacing:.02em; color:var(--crt); text-transform:none; margin-top:10px; font-weight:400}
.also{margin-top:40px; padding-top:26px; border-top:1px solid var(--void-3)}
.also .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:var(--ghost-low); margin:0 0 14px}
.also a.card{display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:.14em;
text-transform:uppercase; border:1px solid var(--void-4); padding:12px 18px; color:var(--crt-dim);
text-decoration:none}
.also a.card:hover{border-color:var(--crt-dim); color:var(--ghost); background:rgba(57,255,20,.07)}
.also a.card em{display:block; font-style:normal; font-size:11px; letter-spacing:.1em;
color:var(--ghost-low); text-transform:none; margin-top:5px}
footer{margin-top:46px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ghost-low)}
footer a{color:var(--crt-dim); text-decoration:none}
footer a:hover{color:var(--ghost); background:rgba(57,255,20,.09)}