|
--------------------------------------------------------- */
.article-body table thead th,
.article-body table thead td {
padding: 22px 24px;
background: var(--theme-success) !important;
color: #fff !important;
font-family: var(--theme-font-heading);
font-size: 17px;
font-weight: 800;
line-height: 1.35;
text-align: left;
border: 0;
vertical-align: middle;
}
/* Tables without a : treat the first row as the header */
.article-body table:not(:has(thead)) tbody tr:first-child th,
.article-body table:not(:has(thead)) tbody tr:first-child td {
padding: 22px 24px;
background: var(--theme-success) !important;
color: #fff !important;
font-family: var(--theme-font-heading);
font-size: 17px;
font-weight: 800;
line-height: 1.35;
text-align: left;
border: 0;
vertical-align: middle;
}
/* ---------------------------------------------------------
TABLE BODY CELLS
--------------------------------------------------------- */
.article-body table tbody td,
.article-body table tbody th {
padding: 24px;
background: transparent;
color: var(--theme-text);
font-size: 16px;
line-height: 1.5;
border: 0;
border-bottom: 1px solid #e5e7eb;
vertical-align: middle;
}
/* Keep the header row green when the table has no */
.article-body table:not(:has(thead)) tbody tr:first-child td,
.article-body table:not(:has(thead)) tbody tr:first-child th {
background: var(--theme-success) !important;
color: #fff !important;
border-bottom: 0;
}
/* ---------------------------------------------------------
ALTERNATING BODY ROWS
--------------------------------------------------------- */
.article-body table tbody tr:nth-child(odd) {
background: #ffffff;
}
.article-body table tbody tr:nth-child(even) {
background: #f8fafc;
}
/* Do not override the universal green header */
.article-body table thead tr,
.article-body table:not(:has(thead)) tbody tr:first-child {
background: var(--theme-success) !important;
}
/* Remove border from final row */
.article-body table tbody tr:last-child td,
.article-body table tbody tr:last-child th {
border-bottom: 0;
}
/* Final / Total row */
.article-body table tbody tr:last-child td,
.article-body table tbody tr:last-child th {
font-weight: 800;
color: var(--theme-text);
}
/* Restore white text if the final row is also the header row */
.article-body table:not(:has(thead)) tbody tr:first-child td,
.article-body table:not(:has(thead)) tbody tr:first-child th {
color: #fff !important;
}
/* Existing data-table support */
.article-body .data-table {
width: 100%;
}
/* Green header variant */
.article-body .data-table.green-head thead th {
background: var(--theme-success) !important;
color: #fff !important;
}
/* Generic WordPress tables */
.article-body table:not(.data-table) th,
.article-body table:not(.data-table) td {
text-align: left;
}
/* =========================================================
TABLE RESPONSIVENESS
========================================================= */
@media (max-width: 768px) {
.article-body table {
font-size: 14px;
border-radius: 14px;
}
.article-body table thead th {
padding: 16px 14px;
font-size: 14px;
}
.article-body table tbody td {
padding: 16px 14px;
font-size: 14px;
}
}
/* =========================================================
CUSTOM STUDYDUNIA FAQ
========================================================= */
.faq-section {
width: 100%;
margin: 38px 0 34px;
}
.faq-section-title {
margin: 0 0 18px;
font-family: var(--theme-font-heading);
font-size: 22px;
font-weight: 800;
line-height: 1.35;
color: var(--theme-text);
}
/* ── FAQ ITEM ── */
.faq-item {
width: 100%;
margin: 0 0 14px;
background: var(--theme-surface);
border: 1px solid var(--theme-border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.faq-item:last-child {
margin-bottom: 0;
}
/* ── QUESTION BUTTON ── */
.faq-btn {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 64px;
margin: 0;
padding: 12px 24px 12px 28px;
border: 0;
background: var(--theme-surface);
font-family: var(--theme-font-heading);
font-size: 17px;
font-weight: 700;
line-height: 1.4;
color: var(--theme-text);
text-align: left;
cursor: pointer;
transition:
background .2s ease,
color .2s ease;
}
.faq-btn:hover {
background: #fafcff;
}
/* ── QUESTION LEFT SIDE ── */
.faq-btn-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
padding-right: 20px;
}
/* ── NUMBER ── */
.faq-num {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: var(--theme-primary-light, #e8f0fd);
color: var(--theme-primary);
font-family: var(--theme-font-heading);
font-size: 15px;
font-weight: 800;
line-height: 1;
}
/* ── QUESTION TEXT ── */
.faq-q-text {
display: block;
min-width: 0;
}
/* ── ARROW ── */
.faq-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
font-size: 15px;
line-height: 1;
color: var(--theme-muted);
transition:
transform .2s ease,
color .2s ease;
}
.faq-item.open .faq-arrow {
transform: rotate(180deg);
color: var(--theme-primary);
}
/* ── ANSWER ── */
.faq-answer {
margin: 0;
padding: 18px 28px 20px 80px;
border-top: 1px solid var(--theme-border);
background: var(--theme-surface);
font-family: var(--theme-font-article);
font-size: 14px;
line-height: 1.75;
color: var(--theme-muted);
}
.faq-answer[hidden] {
display: none;
}
.faq-answer p {
margin: 0 0 14px;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer a {
color: var(--theme-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
/* =========================================================
COMMENTS
========================================================= */
#sd-comments {
width: 100%;
margin: 38px 0 34px;
padding-top: 26px;
border-top: 1px solid var(--theme-border);
}
#sd-comments .comments-title,
#sd-comments .comment-reply-title {
margin: 0 0 14px;
font-family: var(--theme-font-heading);
font-size: 18px;
font-weight: 800;
line-height: 1.35;
color: var(--theme-text);
}
#sd-comments .logged-in-as,
#sd-comments .comment-notes {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.6;
color: var(--theme-muted);
}
#sd-comments label {
display: block;
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
color: var(--theme-text);
}
#sd-comments textarea,
#sd-comments input[type="text"],
#sd-comments input[type="email"],
#sd-comments input[type="url"] {
width: 100%;
padding: 12px 14px;
background: var(--theme-surface);
border: 1px solid var(--theme-border);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
line-height: 1.5;
color: var(--theme-text);
outline: none;
transition:
border-color .15s ease,
box-shadow .15s ease;
}
#sd-comments textarea {
min-height: 150px;
resize: vertical;
}
#sd-comments textarea:focus,
#sd-comments input[type="text"]:focus,
#sd-comments input[type="email"]:focus,
#sd-comments input[type="url"]:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px color-mix(
in srgb,
var(--theme-primary) 12%,
transparent
);
}
#sd-comments .form-submit {
margin: 14px 0 0;
}
#sd-comments .submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border: 0;
border-radius: 8px;
background: var(--theme-primary);
color: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition:
transform .15s ease,
opacity .15s ease;
}
#sd-comments .submit:hover {
opacity: .9;
transform: translateY(-1px);
}
/* =========================================================
SINGLE POST PAGE
========================================================= */
.sd-single-page {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-top: 28px;
}
/* =========================================================
SINGLE POST DESKTOP LAYOUT
========================================================= */
.sd-article-layout {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 760px)
var(--theme-sidebar-width);
gap: var(--theme-sidebar-gap);
align-items: start;
}
.sd-single-article {
width: 100%;
min-width: 0;
}
.sd-single-sidebar {
width: 100%;
min-width: 0;
}
/* Make sure article components never overflow */
.sd-single-article > * {
max-width: 100%;
}
/* =========================================================
FAQ MOBILE
========================================================= */
@media (max-width: 768px) {
.faq-section {
margin: 30px 0;
}
.faq-section-title {
font-size: 20px;
margin-bottom: 14px;
}
.faq-item {
margin-bottom: 10px;
border-radius: 12px;
}
.faq-btn {
min-height: 66px;
padding: 14px 18px;
font-size: 15px;
}
.faq-btn-left {
gap: 12px;
padding-right: 10px;
}
.faq-num {
width: 38px;
height: 38px;
flex-basis: 38px;
font-size: 15px;
}
.faq-arrow {
width: 24px;
height: 24px;
font-size: 15px;
}
.faq-answer {
padding: 16px 18px 18px 68px;
font-size: 14px;
line-height: 1.7;
}
}
/* =========================================================
SINGLE POST — MOBILE
========================================================= */
@media (max-width: 767px) {
.sd-single-page {
width: 100%;
max-width: 100%;
padding-top: 18px;
}
.sd-article-layout {
display: block;
width: 100%;
max-width: 100%;
}
.sd-single-article {
width: 100%;
max-width: 100%;
}
.sd-single-sidebar {
display: none !important;
}
}
/* =========================================================
SINGLE POST — MOBILE HEADER REFINEMENT
========================================================= */
@media screen and (max-width: 767px) {
/* -----------------------------------------
ARTICLE TITLE
----------------------------------------- */
body.single-post .article-title {
margin: 0 0 12px;
font-size: 28px;
line-height: 1.2;
font-weight: 900;
letter-spacing: -0.3px;
}
/* -----------------------------------------
POST META
----------------------------------------- */
body.single-post .article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 8px;
margin: 0 0 16px;
font-size: 12px;
line-height: 1.4;
color: var(--theme-muted);
}
/* Individual meta items */
body.single-post .article-meta > span,
body.single-post .article-meta > a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
/* -----------------------------------------
AUTHOR
----------------------------------------- */
body.single-post .article-meta .sd-author {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--theme-text);
}
/* Author avatar */
body.single-post .article-meta .sd-author-avatar {
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
object-fit: cover;
}
/* -----------------------------------------
META SEPARATOR
----------------------------------------- */
body.single-post .article-meta > span:not(.sd-author)::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
margin-right: 8px;
border-radius: 50%;
background: var(--theme-border);
}
/* -----------------------------------------
SHARE ROW
----------------------------------------- */
body.single-post .share-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px;
}
body.single-post .share-label {
margin-right: 2px;
font-size: 12px;
font-weight: 600;
color: var(--theme-muted);
}
/* Share buttons */
body.single-post .share-btn {
width: 34px;
height: 34px;
flex: 0 0 34px;
font-size: 13px;
border-radius: 50%;
}
/* -----------------------------------------
FEATURED IMAGE
----------------------------------------- */
body.single-post .article-featured-img {
height: 250px;
margin-bottom: 18px;
border-radius: 16px;
}
/* -----------------------------------------
CATEGORY BADGE
----------------------------------------- */
body.single-post .article-tag-abs {
bottom: 14px;
left: 14px;
padding: 5px 12px;
font-size: 10px;
}
/* -----------------------------------------
EXTRA SMALL PHONES
----------------------------------------- */
@media screen and (max-width: 480px) {
body.single-post .article-featured-img {
height: 220px;
margin-bottom: 16px;
border-radius: 14px;
}
body.single-post .article-title {
font-size: 26px;
line-height: 1.22;
margin-bottom: 11px;
}
body.single-post .article-meta {
column-gap: 10px;
row-gap: 7px;
margin-bottom: 15px;
font-size: 12px;
}
body.single-post .article-meta .sd-author {
font-size: 12px;
}
body.single-post .article-meta .sd-author-avatar {
width: 28px;
height: 28px;
flex-basis: 28px;
}
body.single-post .share-row {
gap: 7px;
margin-bottom: 20px;
}
body.single-post .share-btn {
width: 32px;
height: 32px;
flex-basis: 32px;
font-size: 12px;
}
}
}
/* =========================================================
SINGLE POST — MOBILE PILLAR NAVIGATION REFINEMENT
========================================================= */
@media screen and (max-width: 767px) {
/* Main navigation container */
body.single-post .pillar-nav {
width: 100%;
max-width: 100%;
margin: 0 0 20px;
border-radius: 12px;
box-shadow: none;
overflow: hidden;
}
/* Horizontal scrolling navigation */
body.single-post .pillar-nav-inner {
display: flex;
align-items: stretch;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
body.single-post .pillar-nav-inner::-webkit-scrollbar {
display: none;
}
/* Individual pillar buttons */
body.single-post .pillar-btn {
flex: 0 0 auto;
min-height: 42px;
padding: 10px 15px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
border-right: 1px solid var(--theme-border);
background: var(--theme-surface);
color: var(--theme-text);
}
/* Active / opened pillar */
body.single-post .pillar-btn:hover,
body.single-post .pillar-btn.open,
body.single-post .pillar-btn[aria-expanded="true"] {
background: var(--theme-primary);
color: #fff;
}
/* Dropdown */
body.single-post .pillar-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 190px;
max-width: calc(100vw - 30px);
border-radius: 0 0 10px 10px;
box-shadow: var(--theme-shadow-md);
z-index: 100;
}
/* Dropdown links */
body.single-post .pillar-dropdown a {
padding: 10px 14px;
font-size: 12px;
line-height: 1.4;
}
/* -----------------------------------------
SMALL PHONES
----------------------------------------- */
@media screen and (max-width: 480px) {
body.single-post .pillar-nav {
margin-bottom: 18px;
border-radius: 11px;
}
body.single-post .pillar-btn {
min-height: 40px;
padding: 9px 13px;
font-size: 11px;
}
body.single-post .pillar-dropdown {
min-width: 175px;
}
body.single-post .pillar-dropdown a {
padding: 9px 13px;
font-size: 11px;
}
}
}
/* =========================================================
STUDYDUNIA STATIC PAGE DESIGN
========================================================= */
.sd-page-wrapper {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-top: 28px;
padding-bottom: 50px;
}
/* ---------------------------------------------------------
PAGE LAYOUT
--------------------------------------------------------- */
.sd-page-layout {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 760px) var(--theme-sidebar-width);
gap: var(--theme-sidebar-gap);
align-items: start;
}
.sd-page-article {
width: 100%;
min-width: 0;
background: var(--theme-surface);
}
/* ---------------------------------------------------------
PAGE HEADER
--------------------------------------------------------- */
.sd-page-header {
margin: 0 0 24px;
}
.sd-page-title {
margin: 0;
font-family: var(--theme-font-heading);
font-size: 34px;
font-weight: 900;
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--theme-text);
}
.sd-page-intro {
margin-top: 12px;
max-width: 720px;
font-family: var(--theme-font-article);
font-size: 16px;
line-height: 1.7;
color: var(--theme-muted);
}
.sd-page-intro p {
margin: 0;
}
/* ---------------------------------------------------------
FEATURED IMAGE
--------------------------------------------------------- */
.sd-page-featured-image {
width: 100%;
height: 320px;
margin-bottom: 28px;
border-radius: 18px;
overflow: hidden;
background: var(--theme-background);
}
.sd-page-featured-image img,
.sd-page-featured-image .sd-thumb-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* ---------------------------------------------------------
PAGE CONTENT
--------------------------------------------------------- */
.sd-page-content {
width: 100%;
font-family: var(--theme-font-article);
font-size: 17px;
line-height: 1.85;
color: #1f2937;
}
.sd-page-content p {
margin: 0 0 20px;
}
.sd-page-content h2 {
margin: 34px 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(
--theme-primary-light,
#e8f0fd
);
font-family: var(--theme-font-heading);
font-size: 24px;
font-weight: 800;
line-height: 1.3;
color: var(--theme-text);
}
.sd-page-content h3 {
margin: 28px 0 12px;
font-family: var(--theme-font-heading);
font-size: 19px;
font-weight: 700;
line-height: 1.4;
color: var(--theme-text);
}
.sd-page-content h4 {
margin: 22px 0 10px;
font-family: var(--theme-font-heading);
font-size: 17px;
font-weight: 700;
color: var(--theme-text);
}
.sd-page-content strong {
font-weight: 700;
color: var(--theme-text);
}
.sd-page-content a {
color: var(--theme-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.sd-page-content a:hover {
text-decoration-thickness: 2px;
}
/* ---------------------------------------------------------
LISTS
--------------------------------------------------------- */
.sd-page-content ul {
margin: 0 0 22px;
padding-left: 22px;
}
.sd-page-content ol {
margin: 0 0 22px;
padding-left: 24px;
}
.sd-page-content li {
margin-bottom: 9px;
line-height: 1.65;
}
.sd-page-content li:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------
BLOCKQUOTE
--------------------------------------------------------- */
.sd-page-content blockquote {
margin: 28px 0;
padding: 18px 22px;
border-left: 4px solid var(--theme-primary);
border-radius: 0 12px 12px 0;
background: var(--theme-background);
color: var(--theme-text);
font-size: 16px;
line-height: 1.7;
font-style: italic;
}
.sd-page-content blockquote p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------
IMAGES
--------------------------------------------------------- */
.sd-page-content img {
display: block;
max-width: 100%;
height: auto;
margin: 28px auto;
border-radius: 12px;
}
/* ---------------------------------------------------------
TABLES
--------------------------------------------------------- */
.sd-page-content table {
width: 100%;
margin: 28px 0;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 1px solid var(--theme-border);
border-radius: 14px;
background: var(--theme-surface);
}
.sd-page-content table thead th,
.sd-page-content table thead td,
.sd-page-content table:not(:has(thead)) tbody tr:first-child th,
.sd-page-content table:not(:has(thead)) tbody tr:first-child td {
padding: 16px;
background: var(--theme-success) !important;
color: #fff !important;
font-family: var(--theme-font-heading);
font-size: 14px;
font-weight: 700;
text-align: left;
}
.sd-page-content td,
.sd-page-content tbody th {
padding: 14px 16px;
border-bottom: 1px solid var(--theme-border);
font-size: 14px;
line-height: 1.5;
}
.sd-page-content table tbody tr:nth-child(odd) {
background: #ffffff;
}
.sd-page-content table tbody tr:nth-child(even) {
background: #f8fafc;
}
.sd-page-content table:not(:has(thead)) tbody tr:first-child {
background: var(--theme-success) !important;
}
.sd-page-content tr:last-child td {
border-bottom: 0;
}
/* ---------------------------------------------------------
SIDEBAR
--------------------------------------------------------- */
.sd-page-sidebar {
width: 100%;
min-width: 0;
}
/* ---------------------------------------------------------
PAGE LINKS
--------------------------------------------------------- */
.sd-page-links {
margin: 30px 0;
padding-top: 20px;
border-top: 1px solid var(--theme-border);
font-size: 13px;
font-weight: 600;
color: var(--theme-muted);
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media screen and (max-width: 767px) {
.sd-page-wrapper {
padding-top: 18px;
padding-bottom: 35px;
}
.sd-page-layout {
display: block;
width: 100%;
}
.sd-page-article {
width: 100%;
}
.sd-page-header {
margin-bottom: 18px;
}
.sd-page-title {
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.3px;
}
.sd-page-intro {
margin-top: 9px;
font-size: 14px;
line-height: 1.65;
}
.sd-page-featured-image {
height: 250px;
margin-bottom: 20px;
border-radius: 15px;
}
.sd-page-content {
font-size: 16px;
line-height: 1.8;
}
.sd-page-content h2 {
margin-top: 30px;
font-size: 22px;
}
.sd-page-content h3 {
margin-top: 24px;
font-size: 18px;
}
.sd-page-sidebar {
display: none !important;
}
.sd-page-content table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
@media screen and (max-width: 480px) {
.sd-page-wrapper {
padding-top: 15px;
padding-bottom: 30px;
}
.sd-page-title {
font-size: 26px;
line-height: 1.22;
}
.sd-page-intro {
font-size: 13px;
}
.sd-page-featured-image {
height: 220px;
border-radius: 14px;
margin-bottom: 18px;
}
.sd-page-content {
font-size: 15px;
line-height: 1.8;
}
.sd-page-content h2 {
font-size: 20px;
margin-top: 28px;
}
.sd-page-content h3 {
font-size: 17px;
}
.sd-page-content p {
margin-bottom: 18px;
}
}
/* =========================================================
GLOBAL CONTENT — TABLE SPACING
Applies to Posts + Static Pages
========================================================= */
.article-body > p + .wp-block-table,
.sd-page-content > p + .wp-block-table {
margin-top: 0 !important;
}
/* =========================================================
ARTICLE INTERNAL LINKS
========================================================= */
.sd-single-article .article-body a,
.sd-single-article .article-body a:visited {
color: var(--theme-primary) !important;
}
.sd-single-article .article-body a:hover,
.sd-single-article .article-body a:focus {
color: var(--theme-secondary) !important;
}
/* =========================================================
SINGLE POST — DESKTOP STICKY SIDEBAR
========================================================= */
@media screen and (min-width: 901px) {
body.single-post .sd-single-sidebar {
align-self: start;
min-width: 0;
overflow: visible !important;
}
body.single-post .sd-single-sidebar .sidebar {
position: -webkit-sticky;
position: sticky;
top: 20px;
width: 100%;
align-self: start;
}
} |