body.single .main-content {
--sc-text: #263746;
--sc-heading: #102b43;
--sc-muted: #6b7f90;
--sc-primary: #087e8b;
--sc-primary-dark: #075d69;
--sc-line: #dce6ed;
--sc-soft: #f5f8fa;
--sc-table-head: #12344d;
--sc-table-hover: #eef7f8;
color: var(--sc-text);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.82;
letter-spacing: 0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- Paragraphs and links ---------- */
body.single .main-content p {
margin: 0 0 1.35em;
color: var(--sc-text);
}
body.single .main-content a:not(.button):not(.btn) {
color: var(--sc-primary-dark);
text-decoration: underline;
text-decoration-color: rgba(8, 126, 139, 0.35);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
body.single .main-content a:not(.button):not(.btn):hover {
color: var(--sc-primary);
text-decoration-color: currentColor;
}
body.single .main-content strong {
color: #18364d;
font-weight: 700;
}
/* ---------- Headings ---------- */
body.single .main-content h1,
body.single .main-content h2,
body.single .main-content h3,
body.single .main-content h4 {
color: var(--sc-heading);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Microsoft YaHei", sans-serif;
font-weight: 750;
line-height: 1.28;
letter-spacing: -0.02em;
text-wrap: balance;
scroll-margin-top: 110px;
}
body.single .main-content h1 {
margin: 0 0 0.7em;
font-size: clamp(34px, 4vw, 48px);
}
body.single .main-content h2 {
position: relative;
margin: 1.65em 0 0.75em;
padding: 0 0 0.55em 17px;
font-size: clamp(27px, 3vw, 34px);
border-bottom: 1px solid var(--sc-line);
}
body.single .main-content h2::before {
content: "";
position: absolute;
left: 0;
top: 0.12em;
width: 4px;
height: 1.05em;
border-radius: 10px;
background: linear-gradient(180deg, #16a6b6, #087e8b);
}
body.single .main-content h3 {
margin: 1.9em 0 0.65em;
font-size: clamp(22px, 2.3vw, 26px);
}
body.single .main-content h4 {
margin: 1.6em 0 0.55em;
font-size: 19px;
}
/* ---------- Images ---------- */
body.single .main-content .wp-block-image,
body.single .main-content figure:not(.wp-block-table),
body.single .main-content p > img,
body.single .main-content p > a > img {
width: min(100%, 840px) !important;
max-width: 840px !important;
margin: 2.2rem auto !important;
}
body.single .main-content .wp-block-image img,
body.single .main-content figure:not(.wp-block-table) img,
body.single .main-content p > img,
body.single .main-content p > a > img {
display: block;
width: 100% !important;
height: auto !important;
margin: 0 auto;
border: 1px solid rgba(16, 43, 67, 0.08);
border-radius: 14px;
box-shadow: 0 12px 34px rgba(24, 54, 77, 0.09);
}
/* The first article image can be slightly wider */
body.single .main-content h1 ~ figure:first-of-type,
body.single .main-content h1 ~ .wp-block-image:first-of-type {
width: min(100%, 920px) !important;
max-width: 920px !important;
}
body.single .main-content figcaption,
body.single .main-content .wp-element-caption {
max-width: 760px;
margin: 10px auto 0 !important;
color: var(--sc-muted);
font-size: 13.5px;
font-style: normal;
line-height: 1.6;
text-align: center;
}
/* ---------- Tables ---------- */
body.single .main-content .wp-block-table {
width: 100%;
margin: 2.2rem 0 2.8rem;
overflow-x: auto;
border: 1px solid var(--sc-line);
border-radius: 13px;
background: #fff;
box-shadow: 0 8px 28px rgba(24, 54, 77, 0.07);
-webkit-overflow-scrolling: touch;
}
body.single .main-content table {
width: 100%;
margin: 2.2rem 0 2.8rem;
border: 1px solid var(--sc-line) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 13px;
overflow: hidden;
background: #fff;
color: var(--sc-text);
font-size: 15.5px;
line-height: 1.6;
box-shadow: 0 8px 28px rgba(24, 54, 77, 0.07);
}
body.single .main-content .wp-block-table table {
margin: 0;
border: 0 !important;
border-radius: 0;
box-shadow: none;
}
body.single .main-content table thead th {
padding: 15px 17px !important;
border: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
background: var(--sc-table-head) !important;
color: #fff !important;
font-size: 14px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.015em;
text-align: left;
vertical-align: middle;
}
body.single .main-content table thead th:last-child {
border-right: 0 !important;
}
body.single .main-content table tbody td {
padding: 14px 17px !important;
border: 0 !important;
border-right: 1px solid var(--sc-line) !important;
border-bottom: 1px solid var(--sc-line) !important;
background: #fff;
color: var(--sc-text);
text-align: left;
vertical-align: top;
}
body.single .main-content table tbody td:last-child {
border-right: 0 !important;
}
body.single .main-content table tbody tr:last-child td {
border-bottom: 0 !important;
}
body.single .main-content table tbody tr:nth-child(even) td {
background: #f7f9fb;
}
body.single .main-content table tbody tr:hover td {
background: var(--sc-table-hover);
}
body.single .main-content table tbody td:first-child {
color: #18364d;
font-weight: 650;
}
/* ---------- Spacing after tables ---------- */
body.single .main-content .wp-block-table + p,
body.single .main-content .wp-block-table + ul,
body.single .main-content .wp-block-table + ol,
body.single .main-content .wp-block-table + h2,
body.single .main-content .wp-block-table + h3,
body.single .main-content table + p,
body.single .main-content table + ul,
body.single .main-content table + ol,
body.single .main-content table + h2,
body.single .main-content table + h3 {
margin-top: 1.15rem !important;
}
body.single .main-content .wp-block-table + h2,
body.single .main-content table + h2 {
margin-top: 1.9em !important;
}
body.single .main-content .wp-block-table + h3,
body.single .main-content table + h3 {
margin-top: 1.55em !important;
}
/* ---------- Lists ---------- */
body.single .main-content ul,
body.single .main-content ol {
margin: 0 0 1.5em;
padding-left: 1.45em;
}
body.single .main-content li {
margin: 0.45em 0;
padding-left: 0.18em;
}
body.single .main-content ul li::marker {
color: var(--sc-primary);
}
body.single .main-content ol li::marker {
color: var(--sc-primary-dark);
font-weight: 700;
}
/* ---------- Quotes, code and separators ---------- */
body.single .main-content blockquote {
margin: 2rem 0;
padding: 20px 24px;
border: 0;
border-left: 4px solid var(--sc-primary);
border-radius: 0 12px 12px 0;
background: var(--sc-soft);
color: #355064;
font-size: 17px;
font-style: normal;
}
body.single .main-content blockquote p:last-child {
margin-bottom: 0;
}
body.single .main-content code {
padding: 0.15em 0.38em;
border: 1px solid #d9e5eb;
border-radius: 5px;
background: #f2f6f8;
color: #a23c46;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 0.88em;
}
body.single .main-content pre {
margin: 1.8rem 0;
padding: 20px 22px;
overflow-x: auto;
border-radius: 12px;
background: #102b43;
color: #eaf2f7;
font-size: 14px;
line-height: 1.7;
}
body.single .main-content pre code {
padding: 0;
border: 0;
background: transparent;
color: inherit;
}
body.single .main-content hr {
margin: 2.8rem 0;
border: 0;
border-top: 1px solid var(--sc-line);
}
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
body.single .main-content {
font-size: 16px;
line-height: 1.75;
}
body.single .main-content h1 {
font-size: 32px;
}
body.single .main-content h2 {
margin-top: 1.5em;
margin-bottom: 0.7em;
padding-left: 13px;
font-size: 26px;
}
body.single .main-content h3 {
font-size: 21px;
}
body.single .main-content .wp-block-image,
body.single .main-content figure:not(.wp-block-table),
body.single .main-content p > img,
body.single .main-content p > a > img {
width: 100% !important;
margin: 1.65rem auto !important;
}
body.single .main-content .wp-block-image img,
body.single .main-content figure:not(.wp-block-table) img,
body.single .main-content p > img,
body.single .main-content p > a > img {
border-radius: 10px;
box-shadow: 0 8px 24px rgba(24, 54, 77, 0.08);
}
body.single .main-content .wp-block-table::before {
content: "← Swipe to view the full table →";
display: block;
position: sticky;
left: 0;
width: max-content;
margin: 0 0 8px;
padding: 4px 9px;
border-radius: 20px;
background: #eef7f8;
color: #52717e;
font-size: 11px;
line-height: 1.4;
letter-spacing: 0.02em;
}
/* Gutenberg table block: the wrapper scrolls */
body.single .main-content .wp-block-table {
display: block;
width: 100%;
max-width: 100%;
margin: 1.7rem 0 2.2rem;
overflow-x: auto !important;
overflow-y: hidden;
border-radius: 11px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(8, 126, 139, 0.55) #edf3f6;
}
body.single .main-content .wp-block-table table {
display: table;
width: max-content;
min-width: 680px;
max-width: none;
margin: 0;
overflow: visible;
}
/* Plain HTML tables without a Gutenberg wrapper */
body.single .main-content table:not(.wp-block-table table) {
display: block;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 1.7rem 0;
overflow-x: auto !important;
overflow-y: hidden;
white-space: nowrap;
border-radius: 11px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(8, 126, 139, 0.55) #edf3f6;
}
body.single .main-content table:not(.wp-block-table table) thead,
body.single .main-content table:not(.wp-block-table table) tbody,
body.single .main-content table:not(.wp-block-table table) tr {
width: max-content;
min-width: 680px;
}
body.single .main-content table thead th,
body.single .main-content table tbody td {
min-width: 150px;
padding: 12px 14px !important;
white-space: normal;
}
body.single .main-content table thead th:first-child,
body.single .main-content table tbody td:first-child {
min-width: 165px;
}
body.single .main-content .wp-block-table::-webkit-scrollbar,
body.single .main-content table:not(.wp-block-table table)::-webkit-scrollbar {
height: 7px;
}
body.single .main-content .wp-block-table::-webkit-scrollbar-track,
body.single .main-content table:not(.wp-block-table table)::-webkit-scrollbar-track {
background: #edf3f6;
border-radius: 20px;
}
body.single .main-content .wp-block-table::-webkit-scrollbar-thumb,
body.single .main-content table:not(.wp-block-table table)::-webkit-scrollbar-thumb {
background: rgba(8, 126, 139, 0.55);
border-radius: 20px;
}
}