.def-page {
background: var(--g1);
min-height: 100vh;
}
.def-container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
} .def-breadcrumb {
border-bottom: 1px solid var(--g2);
padding: 12px 0;
background: #fff;
}
.def-breadcrumb__link {
font-size: 0.8rem;
color: var(--t-teal);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.def-breadcrumb__link:hover {
text-decoration: underline;
}
.def-breadcrumb__sep {
font-size: 0.8rem;
color: var(--g2);
margin: 0 4px;
}
.def-breadcrumb__current {
font-size: 0.8rem;
color: var(--g4);
font-weight: 600;
} .def-layout {
display: grid;
grid-template-columns: 1fr 220px;
gap: 0;
background: #fff;
border-radius: 8px;
margin-top: 24px;
margin-bottom: 48px;
overflow: hidden;
border: 1px solid var(--g2);
} .def-main {
padding: 32px 36px;
border-right: 1px solid var(--g2);
}
.def-title {
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 700;
color: var(--black);
margin-bottom: 20px;
line-height: 1.2;
} .def-content.prose p {
font-size: 15px;
line-height: 1.72;
color: var(--black);
margin-bottom: 14px;
}
.def-content.prose h2,
.def-content.prose h3,
.def-content.prose h4 {
color: var(--black);
}
.def-content.prose a {
color: var(--t-teal);
text-decoration: none;
border-bottom: 1px solid rgba(0,151,167,0.3);
}
.def-content.prose a:hover {
border-bottom-color: var(--t-teal);
} .def-content.prose blockquote {
background: #F8F9FA;
border-left: 3px solid var(--t-teal);
border-radius: 0;
padding: 16px 20px;
margin: 0 0 20px;
}
.def-content.prose blockquote p {
font-size: 15px;
font-weight: 600;
color: var(--dark);
margin: 0;
line-height: 1.55;
} .def-sidebar {
padding: 24px 20px;
background: #F8F9FA;
}
.def-meta-section {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--g2);
}
.def-meta-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.def-meta-heading {
font-size: 0.7rem;
font-weight: 700;
color: var(--g4);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.def-meta-label {
font-size: 0.78rem;
color: var(--g3);
margin-bottom: 2px;
}
.def-meta-value {
font-size: 0.85rem;
color: var(--dark);
font-weight: 600;
margin-bottom: 10px;
} .def-related-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.def-related-link {
display: block;
font-size: 0.8rem;
padding: 6px 10px;
background: #fff;
color: var(--dark);
border-radius: 4px;
border: 1px solid var(--g2);
text-decoration: none;
}
.def-related-link:hover {
border-color: var(--t-teal);
color: var(--t-teal);
}
.def-related-link--active {
background: var(--t-teal);
color: #fff;
border-color: var(--t-teal);
font-weight: 600;
} .def-see-also {
display: flex;
flex-direction: column;
gap: 4px;
}
.def-see-also a {
font-size: 0.8rem;
color: var(--t-teal);
text-decoration: none;
line-height: 1.8;
}
.def-see-also a:hover {
text-decoration: underline;
} @media (max-width: 767px) {
.def-layout {
grid-template-columns: 1fr;
margin-top: 16px;
}
.def-main {
padding: 24px 20px;
border-right: none;
border-bottom: 1px solid var(--g2);
}
.def-sidebar {
padding: 20px;
}
.def-related-list {
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.def-related-link {
padding: 4px 12px;
border-radius: 14px;
}
} .ref-sidebar-sticky {
position: sticky;
top: 80px;
}
.ref-toc {
display: flex;
flex-direction: column;
gap: 1px;
}
.ref-toc-link {
display: block;
font-size: 0.8rem;
padding: 5px 10px;
color: var(--g4);
border-left: 2px solid transparent;
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.ref-toc-link:hover {
color: var(--dark);
}
.ref-toc-link--active {
color: var(--t-teal);
border-left-color: var(--t-teal);
font-weight: 600;
}
.ref-toc-link--h3 {
padding-left: 20px;
font-size: 0.75rem;
}