.box {
padding: 0.715em;
border-collapse: separate;
background-color: #f5f5f5;
margin-left: 0;
margin-right: 0;
margin-bottom: 1.43em;
border-radius: 8px;
position: relative;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.06),
0 4px 16px rgba(0, 0, 0, 0.04),
0 8px 32px rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
*zoom: 1;
*margin: 0;
}
.box:before,
.box:after {
display: table;
content: "";
line-height: 0;
}
.box:after {
clear: both;
}
.box:hover {
transform: translateY(-1px);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06),
0 16px 48px rgba(0, 0, 0, 0.04);
}
.two-box {
margin-bottom: 1.43em;
border-radius: 8px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06),
0 16px 48px rgba(0, 0, 0, 0.04);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.two-box:hover {
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.12),
0 8px 20px rgba(0, 0, 0, 0.1),
0 16px 40px rgba(0, 0, 0, 0.08),
0 24px 64px rgba(0, 0, 0, 0.06);
}
.two-box .box {
box-shadow: none;
margin-bottom: 0;
}
.box-dark {
background: linear-gradient(135deg, #ececec 0%, #e6e6e6 100%);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.08),
0 4px 16px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.box-dark:hover {
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.12),
0 4px 12px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.box-white {
background: #ffffff;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.06),
0 2px 8px rgba(0, 0, 0, 0.04),
0 4px 16px rgba(0, 0, 0, 0.03),
0 8px 32px rgba(0, 0, 0, 0.02),
inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.box-white:hover {
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(0, 0, 0, 0.04),
0 16px 48px rgba(0, 0, 0, 0.03),
inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.box-flat {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.04);
border: none;
}
.box-flat:hover {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.06),
0 8px 16px rgba(0, 0, 0, 0.04);
}
.box-up {
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.06),
0 4px 16px rgba(0, 0, 0, 0.04);
}
.box-down {
border-top: 2px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.06),
0 4px 16px rgba(0, 0, 0, 0.04);
}
.box-transparent {
padding: 0.3575em;
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(109, 109, 109, 0.03);
margin-bottom: 1.43em;
border-radius: 6px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 2px 6px rgba(0, 0, 0, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: auto;
*zoom: 1;
}
.box-transparent:before,
.box-transparent:after {
display: table;
content: "";
line-height: 0;
}
.box-transparent:after {
clear: both;
}
.box-transparent:hover {
background: rgba(109, 109, 109, 0.05);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}



.choice-box {
margin-bottom: 20px;
border: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 12px rgba(0, 0, 0, 0.04),
0 8px 24px rgba(0, 0, 0, 0.02);
transition: all 0.3s ease;
}
.choice-box:hover {
border-color: #4B9307;
box-shadow:
0 2px 6px rgba(75, 147, 7, 0.15),
0 4px 12px rgba(75, 147, 7, 0.1),
0 8px 24px rgba(75, 147, 7, 0.08),
0 0 0 2px rgba(75, 147, 7, 0.1);
transform: translateY(-2px);
}



.box-purple {
background: linear-gradient(135deg, #e0cdd9 0%, #d5c2cf 100%);
padding: 0.715em;
border-radius: 8px;
box-shadow:
0 2px 4px rgba(126, 31, 95, 0.15),
0 4px 12px rgba(126, 31, 95, 0.1),
0 8px 24px rgba(126, 31, 95, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
*zoom: 1;
}
.box-purple:before,
.box-purple:after {
display: table;
content: "";
line-height: 0;
}
.box-purple:after {
clear: both;
}
.box-purple:hover {
background: linear-gradient(135deg, #e5d5de 0%, #dac9d4 100%);
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(126, 31, 95, 0.2),
0 8px 20px rgba(126, 31, 95, 0.15),
0 16px 40px rgba(126, 31, 95, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.double-padding {
padding: 1.43em;
}
.no-padding {
padding: 0;
}
.box-margin-top {
margin-top: 20px;
}
.box.box-elevated {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.1),
0 8px 20px rgba(0, 0, 0, 0.08),
0 16px 40px rgba(0, 0, 0, 0.06);
}
.box.box-elevated:hover {
transform: translateY(-2px);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.12),
0 16px 32px rgba(0, 0, 0, 0.1),
0 24px 64px rgba(0, 0, 0, 0.08);
}
.box.box-glow {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(75, 147, 7, 0.15),
0 0 0 1px rgba(75, 147, 7, 0.1);
}
.box.box-glow:hover {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.1),
0 8px 20px rgba(0, 0, 0, 0.08),
0 16px 40px rgba(75, 147, 7, 0.2),
0 0 0 2px rgba(75, 147, 7, 0.15),
0 0 40px rgba(75, 147, 7, 0.1);
}
.box.box-inset {
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 4px rgba(0, 0, 0, 0.06),
0 1px 0 rgba(255, 255, 255, 0.8);
}
.mod-box {
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom-color: rgba(0, 0, 0, 0.25);
padding-bottom: 4px;
border-radius: 8px;
background: linear-gradient(to bottom, #e0e0e0 0%, #d2d2d2 100%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
min-width: 500px;
max-width: 800px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.mod-box:hover {
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.12),
0 8px 20px rgba(0, 0, 0, 0.1),
0 16px 40px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.mod-box > div {
padding: 20px;
border-radius: 6px;
background: #f7f7f9;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.8),
inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.mod-box .module-title {
color: #666;
}
.mod-box h3 {
margin-top: 0;
}
@media (max-width: 768px) {
.box,
.two-box,
.mod-box {
border-radius: 6px;
}
.mod-box {
min-width: auto;
max-width: 100%;
}
.box:hover,
.two-box:hover,
.choice-box:hover {
transform: translateY(-1px);
}
}
@keyframes boxFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.box.animate-in {
animation: boxFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-color-scheme: dark) {
.box {
background-color: #2a2a2a;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.25),
0 4px 16px rgba(0, 0, 0, 0.2);
}
.box-white {
background-color: #1a1a1a;
}
.box-dark {
background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
}
}