SashegDev
137 lines
4.2 KiB
CSS
137 lines
4.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
--bg: #080c18;
|
|
--surface: rgba(255,255,255,0.03);
|
|
--border: rgba(255,255,255,0.06);
|
|
--border-hover: rgba(255,255,255,0.12);
|
|
--text: #fff;
|
|
--text-sec: rgba(255,255,255,0.5);
|
|
--text-ter: rgba(255,255,255,0.3);
|
|
--accent: #6C63FF;
|
|
--green: #10b981;
|
|
--amber: #f59e0b;
|
|
--rose: #f43f5e;
|
|
--card-rad: 16px;
|
|
}
|
|
|
|
* { margin:0; padding:0; box-sizing:border-box }
|
|
body {
|
|
font-family:'Plus Jakarta Sans',sans-serif;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
min-height:100vh;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
.sub-bg {
|
|
position:fixed;inset:0;
|
|
background:
|
|
radial-gradient(ellipse 70% 50% at 30% 0%, rgba(108,99,255,0.08) 0%, transparent 70%),
|
|
radial-gradient(ellipse 50% 40% at 70% 100%, rgba(16,185,129,0.06) 0%, transparent 70%);
|
|
pointer-events:none;
|
|
z-index:0;
|
|
}
|
|
|
|
.sub-wrap {
|
|
position:relative;z-index:1;
|
|
max-width:600px;margin:0 auto;padding:40px 20px;
|
|
}
|
|
|
|
.sub-card {
|
|
background:var(--surface); border:1px solid var(--border);
|
|
border-radius:var(--card-rad); padding:28px 24px;
|
|
margin-bottom:16px;
|
|
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
|
|
animation:fadeUp .5s ease-out var(--d,0s) both;
|
|
}
|
|
|
|
.sub-top { text-align:center; --d:0s }
|
|
.sub-top h1 {
|
|
font-size:24px; font-weight:800; letter-spacing:-.03em;
|
|
background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,.6));
|
|
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
|
|
background-clip:text;
|
|
margin:12px 0 8px;
|
|
}
|
|
|
|
.logo-img { width:72px; height:72px; border-radius:14px }
|
|
.logo-emoji { font-size:48px }
|
|
|
|
.tier-badge {
|
|
display:inline-block;
|
|
padding:4px 14px; border-radius:20px;
|
|
font-size:12px; font-weight:600; letter-spacing:.02em;
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
.announcement {
|
|
background:rgba(108,99,255,0.08);
|
|
border:1px solid rgba(108,99,255,0.15);
|
|
border-left:3px solid var(--accent);
|
|
border-radius:12px; padding:14px 16px;
|
|
margin-bottom:16px; font-size:14px;
|
|
animation:fadeUp .5s .05s ease-out both;
|
|
}
|
|
|
|
.info-block { font-size:14px; line-height:1.8; margin-bottom:16px }
|
|
.info-block p { display:flex; align-items:center; gap:8px; color:var(--text-sec) }
|
|
.traffic-server { font-size:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border) }
|
|
.traffic-server .server-name { color:var(--text-ter); font-weight:500 }
|
|
.traffic-server .traffic-values { color:var(--green); font-family:'JetBrains Mono',monospace }
|
|
|
|
.srv-tags { display:flex; flex-wrap:wrap; gap:8px }
|
|
.srv-tag {
|
|
display:inline-flex; align-items:center; gap:4px;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid var(--border);
|
|
border-radius:20px; padding:5px 12px;
|
|
font-size:12px; font-weight:500; color:var(--text-sec);
|
|
}
|
|
|
|
.sub-qr { text-align:center }
|
|
.qr-box {
|
|
display:inline-block;
|
|
background:rgba(255,255,255,0.04);
|
|
border-radius:14px; padding:8px; margin-bottom:14px;
|
|
}
|
|
.qr-box img {
|
|
display:block;
|
|
border-radius:10px; width:200px; height:200px;
|
|
}
|
|
.qr-url {
|
|
background:rgba(255,255,255,0.03);
|
|
border:1px solid var(--border);
|
|
border-radius:10px; padding:10px 14px;
|
|
word-break:break-all; font-size:11px; color:var(--text-ter);
|
|
font-family:'JetBrains Mono',monospace; margin-bottom:16px;
|
|
}
|
|
.qr-actions { display:flex; flex-direction:column; gap:10px; align-items:center }
|
|
|
|
.btn {
|
|
display:inline-flex; align-items:center; gap:6px;
|
|
padding:12px 28px; border:none; border-radius:12px;
|
|
font-size:14px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif;
|
|
cursor:pointer; text-decoration:none;
|
|
transition:transform .3s, box-shadow .3s;
|
|
}
|
|
.btn:hover { transform:translateY(-2px) }
|
|
.btn-primary { background:var(--accent); color:#fff }
|
|
.btn-primary:hover { box-shadow:0 8px 32px rgba(108,99,255,0.25) }
|
|
.btn-support { background:var(--rose); color:#fff }
|
|
.btn-support:hover { box-shadow:0 8px 32px rgba(244,63,94,0.25) }
|
|
|
|
.sub-footer { text-align:center; padding:20px; color:var(--text-ter); font-size:12px; --d:0.25s }
|
|
|
|
@keyframes fadeUp {
|
|
from { opacity:0; transform:translateY(16px) }
|
|
to { opacity:1; transform:translateY(0) }
|
|
}
|
|
|
|
@media(max-width:520px) {
|
|
.sub-wrap { padding:20px 12px }
|
|
.sub-card { padding:20px 16px }
|
|
.sub-top h1 { font-size:20px }
|
|
.qr-box img { width:160px; height:160px }
|
|
}
|