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
|
/* Self-hosted web fonts: Orbitron and Share Tech Mono (SIL OFL 1.1).
Sources: https://fonts.google.com/specimen/Orbitron and
https://fonts.google.com/specimen/Share+Tech+Mono
See FONT_LICENSE.txt in this directory. */
@font-face {
font-family: 'Orbitron';
src: url('orbitron-v35-latin_latin-ext-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Orbitron';
src: url('orbitron-v35-latin_latin-ext-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Share Tech Mono';
src: url('share-tech-mono-v16-latin_latin-ext-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root { --pink:#ff6b9d; --purple:#00d9c0; --orange:#ff8c42; --bg:#0a0121; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Share Tech Mono',monospace; background:var(--bg);
color:#f0efe4; overflow:hidden; height:100vh; height:100dvh; }
#three-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
.overlay { position:relative; z-index:10; height:100vh; height:100dvh; display:flex; flex-direction:column; }
header { padding:16px 28px; background:rgba(10,1,33,0.85); backdrop-filter:blur(12px);
border-bottom:2px solid var(--pink); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
.logo-mark { font-size:1.8rem; font-family:'Orbitron',sans-serif; color:var(--purple);
text-shadow:0 0 12px var(--purple),0 0 28px rgba(0,217,192,0.4); }
.logo-title h1 { font-size:1.7rem; font-family:'Orbitron',sans-serif; color:#f0efe4;
letter-spacing:3px; text-shadow:0 0 8px rgba(255,255,255,0.2); }
.logo-title .subtitle { font-size:0.7rem; color:rgba(240,239,228,0.55); margin-top:2px;
font-family:'Share Tech Mono',monospace; }
.logo-title .subtitle a { color:var(--pink); text-decoration:none; }
.logo-title .subtitle a:hover { text-shadow:0 0 8px var(--pink); }
.logo-title .logo-host { font-size:0.65rem; color:rgba(0,217,192,0.6); margin-top:2px;
font-family:'Share Tech Mono',monospace; }
.transmit-btn { border:2px solid var(--orange); color:var(--orange); padding:10px 22px;
border-radius:22px; text-decoration:none; letter-spacing:1px;
font-size:0.88rem; font-family:'Orbitron',sans-serif; transition:all 0.2s; }
.transmit-btn:hover { background:var(--orange); color:var(--bg); box-shadow:0 0 18px rgba(255,140,66,0.5); }
a.header-feed-link { color:var(--pink); font-family:'Share Tech Mono',monospace; }
.nav-hints { background:rgba(10,1,33,0.75); border-bottom:1px solid rgba(0,217,192,0.25);
color:rgba(240,239,228,0.45); padding:5px 20px; display:flex; gap:18px;
font-size:0.68rem; font-family:'Share Tech Mono',monospace; flex-wrap:wrap; }
.nav-hints kbd { background:rgba(0,217,192,0.12); border:1px solid rgba(0,217,192,0.45);
color:var(--purple); border-radius:3px; padding:0 5px; margin:0 2px; font-size:0.7rem; }
.content { flex:1; overflow-y:auto; padding:22px 28px;
scrollbar-width:thin; scrollbar-color:var(--purple) var(--bg); }
.page-nav { display:flex; justify-content:center; margin:14px 0; }
.page-nav a { border:2px solid var(--pink); color:var(--pink); padding:8px 22px;
border-radius:22px; text-decoration:none; letter-spacing:2px; font-size:0.82rem;
font-family:'Orbitron',sans-serif; transition:all 0.2s; }
.page-nav a:hover { background:var(--pink); color:var(--bg); }
.page-nav-footer { flex-shrink:0; padding:8px 28px; display:flex; justify-content:center;
background:rgba(10,1,33,0.82); backdrop-filter:blur(10px);
border-top:2px solid var(--pink); }
.post { background:rgba(20,10,55,0.85); border:1px solid rgba(0,217,192,0.3);
border-radius:12px; padding:22px; margin-bottom:18px; cursor:pointer; transition:all 0.25s;
box-shadow:0 2px 16px rgba(0,0,0,0.4); }
.post:hover { border-color:var(--pink); box-shadow:0 0 22px rgba(255,107,157,0.3),0 4px 24px rgba(0,0,0,0.5); transform:translateY(-3px); }
.post-active { border-color:var(--orange) !important; background:rgba(30,15,60,0.96) !important;
box-shadow:0 0 22px rgba(255,140,66,0.4),inset 3px 0 0 var(--orange) !important; }
.post-header { display:flex; justify-content:space-between; margin-bottom:14px; }
.post-time { color:var(--orange); font-family:'Share Tech Mono',monospace; font-size:0.85rem; }
.post-text { line-height:1.6; font-size:0.95rem; font-family:'Share Tech Mono',monospace; }
.post-text a { color:var(--pink); text-decoration:none; }
.post-audio { width:100%; margin-top:10px; }
.post-modal { display:none; position:fixed; inset:0; z-index:100;
background:rgba(10,1,33,0.96); overflow-y:auto; padding:40px 20px; }
.post-modal.active { display:block; }
.modal-inner { max-width:780px; margin:0 auto; background:rgba(20,10,55,0.98);
border:2px solid var(--pink); border-radius:12px;
box-shadow:0 0 60px rgba(255,107,157,0.25); padding:38px; }
.modal-close { float:right; background:none; border:none; color:var(--orange);
font-family:'Orbitron',sans-serif; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
@media(max-width:640px) { .nav-hints{padding:6px 16px} .nav-hints .nav-hints-row{padding:6px 0;gap:8px} .nav-hints kbd{display:none} .nav-hints-label,.nav-hints-spacer{display:none} .nav-fx-button{padding:10px 0;min-height:44px;flex:1 1 auto;justify-content:center;gap:0.2rem} header{padding:12px 18px;} .content{padding:12px 14px} .transmit-btn{padding-top:11px;padding-bottom:11px;min-height:44px} .modal-close{padding:10px 14px;min-width:44px;min-height:44px;text-align:center} }
[data-sno-theme="retrofuture"] .splash-overlay {
background: radial-gradient(ellipse at 50% 60%, #1a0840 0%, var(--bg) 55%, #050010 100%);
}
[data-sno-theme="retrofuture"] .splash-starburst {
position:absolute; inset:0; pointer-events:none; z-index:1;
}
[data-sno-theme="retrofuture"] .splash-starburst span {
position:absolute; top:50%; left:50%; width:3px; height:3px;
border-radius:50%; background:var(--pink); opacity:0.5;
box-shadow:0 0 6px var(--pink);
animation: starTwinkle 3s ease-in-out infinite;
}
@keyframes starTwinkle {
0%,100%{opacity:0.3;transform:scale(1);}
50%{opacity:0.8;transform:scale(1.4);}
}
[data-sno-theme="retrofuture"] .splash-atomic {
width:min(100px,22vw); height:min(100px,22vw); margin:0 auto 1rem;
border-radius:50%; border:3px solid var(--purple);
box-shadow:0 0 20px var(--purple),0 0 40px rgba(0,217,192,0.3),inset 0 0 20px rgba(0,217,192,0.15);
position:relative; animation:splashAtomicPulse 2.5s ease-in-out infinite alternate;
}
[data-sno-theme="retrofuture"] .splash-atomic::before,
[data-sno-theme="retrofuture"] .splash-atomic::after {
content:''; position:absolute; border:2px solid var(--purple); border-radius:50%;
top:50%; left:50%; transform:translate(-50%,-50%);
}
[data-sno-theme="retrofuture"] .splash-atomic::before {
width:160%; height:30%; opacity:0.7;
box-shadow:0 0 10px var(--purple);
}
[data-sno-theme="retrofuture"] .splash-atomic::after {
width:30%; height:160%; opacity:0.7;
box-shadow:0 0 10px var(--purple);
}
@keyframes splashAtomicPulse {
from{transform:scale(0.95);box-shadow:0 0 15px var(--purple),0 0 30px rgba(0,217,192,0.2),inset 0 0 15px rgba(0,217,192,0.1);}
to{transform:scale(1.05);box-shadow:0 0 25px var(--purple),0 0 50px rgba(0,217,192,0.4),inset 0 0 25px rgba(0,217,192,0.2);}
}
[data-sno-theme="retrofuture"] .splash-title {
font-family:'Orbitron',sans-serif; font-size:clamp(1.4rem,4.5vw,2rem);
color:#f0efe4; letter-spacing:4px; text-shadow:0 0 20px rgba(255,107,157,0.6);
}
[data-sno-theme="retrofuture"] .splash-tag { font-family:'Share Tech Mono',monospace; color:var(--purple); }
[data-sno-theme="retrofuture"] .splash-hint { font-family:'Share Tech Mono',monospace; color:rgba(240,239,228,0.8); }
[data-sno-theme="retrofuture"] .splash-inner { text-shadow:0 2px 24px rgba(10,1,33,0.9); }
|
