* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
background: #f7f7f5;
color: #111;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
-webkit-tap-highlight-color: transparent;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
.ambient {
position: fixed;
width: 320px;
height: 320px;
border-radius: 50%;
filter: blur(80px);
opacity: .25;
pointer-events: none;
z-index: -1;
}
.ambient-one {
top: -180px;
left: -120px;
background: #e8e8e5;
}
.ambient-two {
right: -180px;
bottom: -160px;
background: #e9e9e6;
}
.detail-header {
max-width: 1100px;
margin: 0 auto;
padding:
22px 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.detail-back {
display: inline-flex;
align-items: center;
gap: 7px;
padding:
9px 13px;
border:
1px solid
#e1e1de;
border-radius: 10px;
background:
rgba(255,255,255,.8);
color: #666;
font-size: 12px;
transition: .2s;
}
.detail-back:hover {
transform:
translateX(-2px);
background: #fff;
color: #111;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
}
.brand-mark {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 10px;
background: #111;
color: #fff;
font-size: 12px;
font-weight: 800;
}
.brand-text strong {
display: block;
font-size: 14px;
font-weight: 800;
}
.brand-text span {
display: block;
margin-top: 2px;
color: #999;
font-size: 9px;
}
.detail-main {
max-width: 900px;
margin:
45px auto 0;
padding:
0 24px 80px;
}
.detail-hero {
text-align: center;
padding:
35px 20px 40px;
}
.detail-icon {
width: 88px;
height: 88px;
margin:
0 auto 22px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 24px;
background: #f0f0ed;
border:
1px solid
#e2e2df;
box-shadow:
0 12px 35px
rgba(0,0,0,.06);
}
.detail-icon img {
width: 58px;
height: 58px;
object-fit: contain;
}
.detail-icon-fallback {
font-size: 32px;
font-weight: 800;
}
.detail-category {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 11px;
color: #999;
font-size: 11px;
}
.detail-title {
margin: 0;
font-size:
clamp(
32px,
6vw,
52px
);
line-height: 1.1;
letter-spacing: -2px;
}
.detail-description {
max-width: 620px;
margin:
18px auto 0;
color: #888;
font-size: 14px;
line-height: 1.8;
}
.detail-recommender {
margin-top: 14px;
color: #aaa;
font-size: 11px;
}
.detail-recommender a {
color: #666;
font-weight: 700;
transition: .2s;
}
.detail-recommender a:hover {
color: #111;
text-decoration: underline;
}
.detail-status {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 18px;
padding:
7px 11px;
border-radius: 999px;
background: #f2f2ef;
color: #777;
font-size: 10px;
}
.detail-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #aaa;
}
.detail-status.online {
color: #36834a;
background: #edf8ef;
}
.detail-status.online
.detail-status-dot {
background: #45a95c;
animation:
detailPulse 2s infinite;
}
.detail-status.offline {
color: #b74a4a;
background: #fff0f0;
}
.detail-status.offline
.detail-status-dot {
background: #d95353;
}
.detail-status.timeout {
color: #a47b25;
background: #fff8e6;
}
.detail-status.timeout
.detail-status-dot {
background: #d8a63b;
}
@keyframes detailPulse {
0%,
100% {
opacity: 1;
transform:
scale(1);
}
50% {
opacity: .45;
transform:
scale(.8);
}
}
.detail-actions {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 25px;
}
.detail-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 130px;
padding:
12px 18px;
border: 0;
border-radius: 11px;
background: #111;
color: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: .2s;
}
.detail-button:hover {
transform:
translateY(-2px);
box-shadow:
0 8px 20px
rgba(0,0,0,.12);
}
.detail-button.favorite {
background: #fff;
color: #666;
border:
1px solid
#dededb;
}
.detail-button.favorite.active {
color: #d8951b;
background: #fff8e8;
border-color:
#f0d28a;
}
.detail-card {
margin-top: 15px;
padding: 25px;
border:
1px solid
#e2e2df;
border-radius: 18px;
background:
rgba(255,255,255,.8);
}
.detail-card-title {
margin-bottom: 18px;
font-size: 12px;
font-weight: 800;
letter-spacing: .5px;
}
.detail-info-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 1px;
overflow: hidden;
border:
1px solid
#e1e1de;
border-radius: 12px;
background:
#e1e1de;
}
.detail-info-item {
padding: 16px;
background: #fff;
}
.detail-info-item span {
display: block;
margin-bottom: 6px;
color: #999;
font-size: 10px;
}
.detail-info-item strong {
display: block;
color: #333;
font-size: 13px;
word-break: break-word;
}
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 18px;
}
.detail-tag {
padding:
6px 9px;
border-radius: 7px;
background: #f0f0ed;
color: #777;
font-size: 10px;
}
.detail-about {
color: #666;
font-size: 13px;
line-height: 2;
}
.detail-url {
margin-top: 12px;
padding: 12px;
overflow: hidden;
border-radius: 9px;
background: #f5f5f3;
color: #777;
font-family: monospace;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 600px) {
.detail-header {
padding:
15px 15px 0;
}
.detail-main {
margin-top: 20px;
padding:
0 15px 55px;
}
.detail-hero {
padding:
30px 10px 30px;
}
.detail-icon {
width: 76px;
height: 76px;
border-radius: 20px;
}
.detail-title {
letter-spacing: -1px;
}
.detail-description {
font-size: 13px;
}
.detail-actions {
flex-direction: column;
}
.detail-button {
width: 100%;
}
.detail-card {
padding: 18px;
}
.detail-info-grid {
grid-template-columns: 1fr;
}
.brand-text {
display: none;
}
}
body.dark {
background: #111;
color: #eee;
}
body.dark .detail-back {
background: #191919;
border-color: #303030;
color: #aaa;
}
body.dark .detail-title {
color: #eee;
}
body.dark .detail-description {
color: #999;
}
body.dark .detail-recommender {
color: #777;
}
body.dark .detail-recommender a {
color: #aaa;
}
body.dark .detail-icon {
background: #222;
border-color: #333;
}
body.dark .detail-card {
background: #191919;
border-color: #303030;
}
body.dark .detail-info-grid {
background: #303030;
border-color: #303030;
}
body.dark .detail-info-item {
background: #202020;
}
body.dark .detail-info-item strong {
color: #ddd;
}
body.dark .detail-tag,
body.dark .detail-url {
background: #282828;
color: #999;
}
body.dark .detail-button.favorite {
background: #191919;
border-color: #303030;
color: #aaa;
}
body.dark .detail-button.favorite.active {
color: #e3a52a;
background: #2b2415;
border-color: #59491f;
}