::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: white;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #444 25%, #666 25%, #666 50%, #444 50%, #444 75%, #666 75%);
background-size: 5px 5px;
border-radius: 10px;
border: 1px solid #333;
}
.brutal-box {
position: relative;
background: linear-gradient(145deg, #DCDDDE 0%, #ADAFAF 100%);
padding: 28px 32px;
border: 1px solid #C2C2C2;
box-shadow: 9px 9px 0 black;
transition: all 0.1s linear;
cursor: default;
width: 700px;
max-width: 90%;
box-sizing: border-box;
margin: 1.8vh 0;
}
/* 噪声图层 */
.brutal-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1000' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity: 1;
mix-blend-mode: overlay;
pointer-events: none;
}
.brutal-box:hover {
transform: translate(2px, 2px);
box-shadow: 4px 4px 0 #000000;
}
.brutal-box .box-title {
position: relative;
font-size: 1.5rem;
font-weight: 400;
font-family: 'Microsoft YaHei UI', '微软雅黑', sans-serif;
color: #1a1a1a;
letter-spacing: -1.3px;
z-index: 1;
text-shadow: 2px 2px 0px rgba(0,0,0,0.25);
}
.brutal-box .box-desc {
position: relative;
font-size: 0.85rem;
font-family: 'Segoe UI';
color: #767878;
margin-top: 0.8vh;
z-index: 1;
}
.gentleai-box {
position: relative;
background: linear-gradient(145deg, #E5E5E5 0%, #ADAFAF 100%);
padding: 21px 32px;
border: 1px solid #C2C2C2;
box-shadow: 6px 6px 0 black;
transition: all 0.1s linear;
cursor: default;
width: 700px;
max-width: 90%;
box-sizing: border-box;
border-radius: 18px 0px 0 18px;
margin: 1.6vh 0;
}
/* 噪声图层 */
.gentleai-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='990' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity: 1;
mix-blend-mode: overlay;
pointer-events: none;
border-radius: inherit;
}
.gentleai-box:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 #000000;
}
.gentleai-box .box-title {
position: relative;
font-size: 1.4rem;
font-weight: 400;
font-family: 'Microsoft YaHei UI', '微软雅黑', sans-serif;
color: #1a1a1a;
letter-spacing: -1.3px;
z-index: 1;
text-shadow: 1.5px 1.5px 0px rgba(0,0,0,0.25);
}
.gentleai-box .box-desc {
position: relative;
font-size: 0.85rem;
font-family: 'Segoe UI';
color: #767878;
margin-top: 0.8vh;
z-index: 1;
}