-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
139 lines (129 loc) · 8.48 KB
/
Copy pathstyle.css
File metadata and controls
139 lines (129 loc) · 8.48 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
:root {
--bg: #07060f;
--ink: #f6f3ff;
--dim: #9aa0c8;
--pink: #ff3db8;
--cyan: #00f0ff;
--line: rgba(255,255,255,.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg); color: var(--ink);
font-family: "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif; }
.bg { position: fixed; inset: 0; pointer-events: none;
background:
radial-gradient(720px 380px at 12% -8%, rgba(255,61,184,.16), transparent 56%),
radial-gradient(640px 360px at 108% 6%, rgba(0,240,255,.1), transparent 52%),
radial-gradient(ellipse at 50% 120%, rgba(80,40,140,.16), transparent 50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px 16px;
padding: 10px 24px; background: rgba(7,6,15,.78); border-bottom: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.brand { font-weight: 900; letter-spacing: .32em; text-decoration: none; color: transparent; flex-shrink: 0;
background: linear-gradient(90deg, var(--pink), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.count { color: var(--dim); font-size: 12px; letter-spacing: .14em; white-space: nowrap;
font-variant-numeric: tabular-nums; padding: 3px 10px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.search { margin-left: auto; flex: 1 1 220px; min-width: 180px; max-width: 340px; }
.search input { width: 100%; appearance: none; -webkit-appearance: none;
background: rgba(255,255,255,.045); border: 1px solid var(--line); color: var(--ink);
border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; }
.search input::placeholder { color: #6d7198; }
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hero { padding: 18px 24px 6px; max-width: 1320px; margin: 0 auto; }
.kicker { letter-spacing: .32em; text-transform: uppercase; color: #7af6ff; font-size: 10px; }
h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing: .16em; font-weight: 900; line-height: 1.15; margin-top: 4px;
background: linear-gradient(110deg, var(--pink), #fff 48%, var(--cyan));
-webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: #c9c6e8; line-height: 1.55; margin-top: 6px; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 12px; padding: 16px 24px 48px; max-width: 1320px; margin: 0 auto; }
.card { position: relative; display: block; text-align: left; cursor: pointer; overflow: hidden;
border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 12px;
padding: 0 0 12px; color: inherit; font: inherit;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.thumb { display: block; width: 100%; height: 88px; object-fit: cover; background: #0a0918;
border-bottom: 1px solid rgba(255,255,255,.06); }
canvas.thumb { width: 100%; height: 88px; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
background: linear-gradient(90deg, hsla(var(--h),100%,62%,.95), hsla(var(--h),100%,70%,.2)); }
.card:hover { transform: translateY(-2px); border-color: hsla(var(--h),100%,70%,.5);
box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 20px hsla(var(--h),100%,50%,.14); }
.idx { position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 10px; letter-spacing: .14em;
color: rgba(246,243,255,.72); text-shadow: 0 1px 4px rgba(0,0,0,.65); font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 10px; letter-spacing: .18em; color: hsla(var(--h),100%,75%,1);
border: 1px solid hsla(var(--h),100%,70%,.35); padding: 2px 7px; border-radius: 999px; margin: 12px 14px 8px; }
.card h2 { font-size: 20px; letter-spacing: .08em; margin: 0 14px 2px; line-height: 1.25; }
.card .sub { color: var(--dim); font-size: 11px; letter-spacing: .16em; margin: 0 14px 8px; }
.card .blurb { color: #d5d2ee; line-height: 1.45; font-size: 12px; margin: 0 14px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty { max-width: 1320px; margin: 0 auto; padding: 36px 24px 80px; text-align: center;
color: var(--dim); letter-spacing: .16em; font-size: 14px; }
.hidden { display: none !important; }
.play { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: #05040a; }
.play-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 46px;
border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,6,15,.92); }
.play-bar button, .play-bar a { color: #fff; text-decoration: none; background: transparent;
border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 11px;
font-size: 12px; letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.play-bar button { border-color: rgba(255,61,184,.4); }
.play-bar a { border-color: rgba(0,240,255,.35); }
.play-meta { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.play-meta b { letter-spacing: .1em; white-space: nowrap; }
.play-meta span { color: var(--dim); font-size: 11px; letter-spacing: .14em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
iframe { flex: 1; width: 100%; border: 0; background: #000; }
.brand:focus, .card:focus, .search input:focus, .play-bar button:focus, .play-bar a:focus { outline: none; }
.brand:focus-visible, .play-bar button:focus-visible, .play-bar a:focus-visible {
outline: 2px solid var(--cyan); outline-offset: 2px; }
.card:focus-visible { border-color: hsla(var(--h),100%,70%,.7);
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px hsla(var(--h),100%,62%,.85); }
.search input:focus-visible { border-color: var(--cyan);
box-shadow: 0 0 0 3px rgba(0,240,255,.2); }
@media (max-width: 720px) {
.top { flex-wrap: wrap; padding: 10px 16px; }
.search { flex: 1 1 100%; max-width: none; margin-left: 0; }
.hero, .grid, .empty { padding-left: 16px; padding-right: 16px; }
.grid { grid-template-columns: 1fr; gap: 10px; }
h1 { letter-spacing: .1em; }
.play-meta span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.card { transition: none; }
.card:hover { transform: none; }
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 24px 0; max-width: 1320px; margin: 0 auto; }
.chip { appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.04);
color: var(--dim); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px;
letter-spacing: .12em; cursor: pointer; }
.chip[aria-pressed="true"] { color: #fff; border-color: rgba(0,240,255,.45);
background: rgba(0,240,255,.12); }
.chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.shelf-head { max-width: 1320px; margin: 0 auto; padding: 16px 24px 0; color: var(--dim);
font-size: 12px; letter-spacing: .18em; }
.grid.featured { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid.featured .thumb, .grid.featured canvas.thumb { height: 110px; }
@media (max-width: 720px) {
.filters, .shelf-head { padding-left: 16px; padding-right: 16px; }
}
.filters.subs { padding-top: 6px; }
.filters.subs .chip { font-size: 11px; padding: 4px 10px; letter-spacing: .1em; }
.grid.shelved { display: block; padding-top: 8px; }
.shelf-label { max-width: 1320px; margin: 18px auto 8px; padding: 0 2px;
color: #c9c6e8; font-size: 13px; letter-spacing: .2em; font-weight: 700; }
.shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 12px; }
.more { display: flex; align-items: center; gap: 8px; padding: 7px 12px;
border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,6,15,.92);
overflow-x: auto; flex-shrink: 0; }
.more-lab { color: var(--dim); font-size: 11px; letter-spacing: .16em; white-space: nowrap; }
.more-chip, .more-nav { appearance: none; color: #fff; background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px;
font: inherit; font-size: 12px; letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.more-chip:hover, .more-nav:hover { border-color: rgba(0,240,255,.45); background: rgba(0,240,255,.1); }
.more-nav { border-color: rgba(255,61,184,.35); }
@media (max-width: 720px) {
.shelf-row { grid-template-columns: 1fr; gap: 10px; }
.more { padding-left: 10px; padding-right: 10px; }
}