body {
background-color: var(--light-color) !important;
} .codex-page-title {
padding: 40px 0;
text-align: center;
}
.codex-page-title h1 {
font-size: 32px;
font-weight: 800;
color: var(--dark-color);
margin: 0;
}
.codex-container {
max-width: 1320px;
margin: 0 auto; }
.codex-archive-filter {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 36px;
}
.codex-categories ul {
display: flex;
gap: 28px;
margin: 0px;
}
.codex-categories ul li {
list-style: none;
}
.codex-categories ul li a {
font-size: 15px;
font-weight: 500;
color: rgb(156, 163, 175);
border-bottom: 2px solid transparent;
transition: all ease 0.3s;
padding-bottom: 2px;
}
.codex-categories ul li:hover a,
.codex-categories ul li.codex-cat-active a {
font-weight: 700;
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
} .codex-search-form .codex-search-wrap {
position: relative;
}
.codex-search-form .codex-search-wrap .codex-search-icon {
position: absolute;
top: 13px;
left: 20px;
}
.codex-search-wrap input {
padding: 11px 18px 11px 40px;
border: 1.5px solid rgb(229, 231, 235) !important;
border-radius: 100px;
font-size: 14px;
font-family: inherit;
color: rgb(55, 65, 81);
background: rgb(255, 255, 255) !important;
width: 270px;
}
.codex-search-form .codex-search-wrap:focus-within {
border-color: #7C3AED;
}
.codex-search-form .codex-search-wrap svg {
color: #999;
flex-shrink: 0;
}
.codex-search-form .codex-search-wrap input {
border: none;
outline: none;
width: 100%;
font-size: 14px;
color: #333;
background: transparent;
}
.codex-search-form .codex-search-wrap input::placeholder {
color: #aaa;
} .codex-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 40px;
} .codex-archive-card {
border-radius: 18px;
overflow: hidden;
border: 1px solid #eee;
background: #fff;
transition: box-shadow 0.2s, transform 0.2s;
}
.codex-archive-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transform: translateY(-4px);
}
.codex-card-img {
display: block;
overflow: hidden;
}
.codex-card-img img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.3s;
}
.codex-card-body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.codex-card-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.codex-card-category {
display: inline-block;
color: var(--primary-color);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.codex-card-category::after {
content: ',';
}
.codex-card-category:last-child::after {
content: '';
}
.codex-card-category:hover {
color: var(--dark-color);
}
.codex-card-title {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.codex-card-title a {
text-decoration: none;
font-size: 14px;
font-weight: 700;
color: var(--dark-color);
transition: color 0.2s;
}
.codex-card-title a:hover {
color: #7C3AED;
}
.codex-card-footer {
display: flex;
align-items: center;
gap: 10px;
}
.codex-card-reading-time {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #888;
} .codex-pagination {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 40px 0 80px;
}
.codex-pagination-btn a ,
.codex-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 12px;
border: 1px solid #ddd;
text-decoration: none;
font-size: 14px;
color: #444;
transition: all 0.2s;
}
.codex-pagination .page-numbers li span,
.codex-pagination .page-numbers li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 50%;
border: 1px solid transparent;
text-decoration: none;
font-size: 14px;
color: #444;
transition: all 0.2s;
}
.codex-pagination-btn a:hover,
.codex-pagination-btn a.codex-active {
background: #7C3AED;
color: #fff;
border-color: #7C3AED;
}
.codex-pagination .page-numbers li a:hover,
.codex-pagination .page-numbers li span:hover,
.codex-pagination .page-numbers.codex-active {
background: #7C3AED;
color: #fff;
border-color: #7C3AED;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 50%;
}
.codex-pagination .page-numbers li .prev:hover,
.codex-pagination .page-numbers li .next:hover {
background: transparent;
color: #fff;
border-color: transparent;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 50%;
}
.codex-pagination ul {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.codex-no-posts {
text-align: center;
color: #888;
font-size: 16px;
padding: 48px 0;
} .codex-page-title span {
color: var(--primary-color);
}
.codex-search-count {
font-size: 14px;
color: #888;
margin-top: 6px;
}
.codex-search-count strong {
color: var(--dark-color);
} .codex-no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
gap: 16px;
color: #888;
}
.codex-no-results svg {
color: #ddd;
}
.codex-no-results h2 {
font-size: 24px;
font-weight: 700;
color: var(--dark-color);
margin: 0;
}
.codex-no-results p {
font-size: 15px;
color: #888;
margin: 0;
}
.codex-no-results strong {
color: var(--dark-color);
}
.codex-back-btn {
display: inline-block;
margin-top: 8px;
padding: 10px 24px;
background: var(--primary-color);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: opacity 0.2s;
}
.codex-back-btn:hover {
opacity: 0.85;
color: #fff;
} @media ( max-width: 1280px ) {
.codex-container {
padding: 0 32px;
}
}
@media ( max-width: 1024px ) {
.codex-container {
padding: 0 24px;
}
.codex-archive-grid {
grid-template-columns: repeat( 2, 1fr );
}
}
@media ( max-width: 768px ) {
.codex-container {
padding: 0 16px;
} .codex-archive-filter {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
} .codex-categories ul {
gap: 16px;
overflow-x: auto;
padding-bottom: 4px;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.codex-categories ul::-webkit-scrollbar {
display: none;
}
.codex-categories ul li a {
white-space: nowrap;
font-size: 13px;
} .codex-search-wrap input {
width: 100%;
}
.codex-archive-search {
width: 100%;
} .codex-archive-grid {
grid-template-columns: 1fr;
gap: 16px;
} .codex-page-title {
padding: 24px 0;
}
.admin-bar .codex-page-title {
padding: 60px 24px 0;
}
.codex-page-title h1 {
font-size: 24px;
} .codex-pagination {
flex-direction: column;
align-items: center;
gap: 12px;
margin: 24px 0 48px;
}
.codex-pagination ul {
flex-wrap: wrap;
justify-content: center;
}
}
@media ( max-width: 480px ) {
.codex-archive-grid {
grid-template-columns: 1fr;
}
.codex-card-img img {
height: 180px;
}
.codex-pagination-btn a,
.codex-pagination .page-numbers {
padding: 6px 12px;
font-size: 13px;
}
}body {
background-color: #fff !important;
} .codex-single-section {
padding: 48px 0 80px;
} .codex-single-content {
flex: 1;
min-width: 0;
}
.codex-single-title {
font-size: 36px;
font-weight: 800;
line-height: 1.3;
color: var(--dark-color);
margin-bottom: 24px;
} .codex-single-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
padding-bottom: 20px;
}
.codex-meta-left {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.codex-single-author {
display: flex;
align-items: center;
gap: 8px;
}
.codex-single-author img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.codex-single-author a {
font-size: 14px;
font-weight: 600;
color: var(--dark-color);
text-decoration: none;
}
.codex-single-date {
font-size: 13px;
color: #888;
}
.codex-single-cats ul {
display: flex;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.codex-single-cats ul li a {
font-size: 12px;
font-weight: 600;
color: var(--primary-color);
background: #f3f0ff;
padding: 3px 10px;
border-radius: 20px;
text-decoration: none;
transition: all 0.2s;
}
.codex-single-cats ul li a:hover {
background: var(--primary-color);
color: #fff;
} .codex-share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 1px solid #ddd;
width: 38px;
height: 38px;
border-radius: 50%;
padding: 8px 10px;
font-size: 13px;
font-weight: 600;
color: #555;
cursor: pointer;
transition: all 0.2s;
}
.codex-share-btn:hover,
.codex-share-btn:focus {
background: none;
border-color: var(--primary-color);
color: var(--primary-color);
} .codex-share-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.codex-share-popup.codex-active {
display: block; 
} .codex-share-popup-inner {
background: #fff;
width: 560px;
padding: 48px 50px;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.codex-share-popup-inner h3 {
font-size: 26px;
font-weight: 700;
color: var(--dark-color);
margin: 0 0 28px;
}
.codex-share-popup-inner h5 {
font-size: 16px;
font-weight: 600;
color: var(--dark-color);
margin: 0 0 14px;
} .codex-share-copy {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.codex-share-copy input {
flex: 1;
padding: 12px 16px;
background: #eceeff;
border: none;
border-radius: 6px;
font-size: 13px;
color: #555;
outline: none;
height: 44px;
box-sizing: border-box;
}
.codex-copy-btn-wrap button {
background: #151d48;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
height: 44px;
white-space: nowrap;
transition: opacity 0.2s;
}
.codex-copy-btn-wrap button:hover {
opacity: 0.85;
} .codex-social-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
}
.codex-social-links li a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(82, 82, 82, 0.15);
border-radius: 50%;
transition: border-color 0.3s;
}
.codex-social-links li a:hover {
border-color: var(--primary-color);
} .codex-share-close {
width: 42px;
height: 42px;
background: rgba(88, 108, 129, 0.05);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
position: absolute;
top: 20px;
right: 24px;
border: 1px solid rgba(88, 108, 129, 0.1);
cursor: pointer;
color: #555;
transition: all 0.2s;
}
.codex-share-close:hover {
background: #f5f5f5;
color: #333;
} .codex-single-thumbnail {
margin: 0 0 32px;
border-radius: 12px;
overflow: hidden;
}
.codex-single-thumbnail img {
width: 100%;
height: auto;
display: block;
} .codex-single-body {
font-size: 16px;
line-height: 1.8;
color: #444;
}
.codex-single-body h2 { font-size: 24px; font-weight: 700; margin: 32px 0 16px; }
.codex-single-body h3 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; }
.codex-single-body p  { margin-bottom: 16px; }
.codex-single-body a  { color: var(--primary-color); }
.codex-single-body img { max-width: 100%; border-radius: 8px; margin: 16px 0; }
.codex-single-body ul,
.codex-single-body ol { padding-left: 24px; margin-bottom: 16px; }
.codex-single-body li { margin-bottom: 8px; } .codex-faq-section {
margin-top: 48px;
padding-top: 40px;
}
.codex-faq-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 24px;
color: var(--dark-color);
}
.codex-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.codex-faq-item {
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
}
.codex-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: rgb(250, 248, 254);
border-radius: 12px;
cursor: pointer;
text-align: left;
font-size: 17px;
font-weight: 700;
color: rgb(17, 24, 39);
transition: background 0.2s;
box-shadow: none;
}
.codex-faq-question:focus {
background: rgb(250, 248, 254);
border: none;
color: rgb(17, 24, 39);
}
.codex-faq-question:hover {
border: none;
background: #f9f6ff;
color: rgb(17, 24, 39);
}
.codex-faq-question.codex-faq-open {
border: none;
background: #f9f6ff;
color: rgb(17, 24, 39);
}
.codex-faq-icon {
flex-shrink: 0;
transition: transform 0.3s;
}
.codex-faq-answer {
display: none;
padding: 0 20px 16px;
font-size: 16px;
line-height: 1.7;
color: #4B5563;
background: #f9f6ff;
}
.codex-faq-answer p { margin: 0; } .codex-author-bio {
display: flex;
gap: 28px;
align-items: center;
margin: 48px 0px;
padding: 36px 40px;
background: #ffffff;
border: 1px solid rgb(240, 234, 251);
border-radius: 18px;
}
.codex-author-bio > img {
width: 92px;
height: 92px;
border-radius: 14px;
object-fit: cover;
flex-shrink: 0;
}
.codex-author-bio-info { flex: 1; }
.codex-author-bio-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.codex-author-bio-top h3 { margin: 0; font-size: 28px; font-weight: 800; color: rgb(17, 24, 39); }
.codex-author-socials ul {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.codex-author-socials ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #eee;
color: #555;
transition: all 0.2s;
}
.codex-author-socials ul li a:hover {
background: var(--primary-color);
color: #fff;
}
.codex-author-bio-info p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
} .codex-related-title {
font-size: 24px;
font-weight: 700;
margin: 48px 0 24px;
color: var(--dark-color);
} .codex-single-wrap {
display: grid;
grid-template-columns: 240px 1fr 320px;
gap: 40px;
align-items: flex-start;
} .codex-single-toc {
position: sticky;
top: 100px;
}
.codex-toc-widget {
background: #ffffff;
border-radius: 12px;
padding: 20px;
border: 1px solid #eee;
}
.codex-toc-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 16px;
color: var(--dark-color);
}
.codex-toc-toggle {
background: none;
border: none;
cursor: pointer;
padding: 0;
color: #888;
}
.codex-toc-toggle:hover,
.codex-toc-toggle:focus {
background: none;
border: none;
color: #888;
}
.codex-toc-toggle.codex-toc-open svg {
transform: rotate(180deg);
}
.codex-toc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
max-height: 70vh;
overflow-y: auto;
}
.codex-toc-list::-webkit-scrollbar { width: 4px; }
.codex-toc-list::-webkit-scrollbar-track { background: #f1f1f1; }
.codex-toc-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.codex-toc-list a {
font-size: 14px;
color: #666;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
border-left: 2px solid transparent;
line-height: 1.4;
transition: all 0.2s;
}
.codex-toc-list a:hover,
.codex-toc-list a.codex-toc-active {
color: var(--primary-color);
border-left-color: var(--primary-color);
}
.codex-toc-h3 a { padding-left: 20px; font-size: 13px; } .codex-single-sidebar {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 24px;
} .codex-sidebar-cta {
background: var(--primary-color);
border-radius: 16px;
padding: 24px;
color: #fff;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
justify-content: center;
text-align: center;
min-height: 120px; 
box-sizing: border-box;
}
.codex-sidebar-cta h3 { 
font-size: 23px; 
font-weight: 500; 
margin: 0; 
color: #fff; 
margin-bottom: 4px;
}
.codex-sidebar-cta .codex-product-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 100%;
}
.codex-sidebar-cta .codex-product-card {
background: #FFFFFF0D;
border: 1px solid #FFFFFF1A;
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 95px;
text-align: center;
}
.codex-sidebar-cta .codex-product-list .codex-product-card p {
font-size: 14px;
font-weight: 500;
color: #fff;
line-height: 100%;
margin-top: 8px;
margin-bottom: 0;
}
.codex-sidebar-cta .codex-product-list .codex-product-card span {
font-size: 11px;
font-weight: 400;
color: #fff;
line-height: 100%;
margin-top: 0;
} .codex-sidebar-social h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 14px;
color: rgb(17, 24, 39);
}
.codex-sidebar-social-icons {
display: flex;
flex-direction: row;
gap: 8px;
}
.codex-sidebar-social-icons a {
width: 40px;
height: 40px;
border: 1.5px solid rgb(229, 231, 235);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
color: #555;
text-decoration: none;
transition: all 0.2s;
}
.codex-sidebar-social-icons a:hover {
background: #f0ebff;
color: var(--primary-color);
} .codex-dynamic-sidebar {
border-radius: 16px;
padding: 24px;
color: #fff;
display: flex;
flex-direction: column;
gap: 16px;
}
.codex-sidebar-logo {
width: 140px;
height: auto;
}
.codex-dynamic-sidebar h3 {
font-size: 23px;
font-weight: 500;
color: #fff;
margin: 0;
line-height: 1.3;
}
.codex-dynamic-sidebar p {
font-size: 14px;
font-weight: 500;
color: #fff;
margin: 0;
line-height: 1.6;
}  .codex-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
} .codex-sidebar-list.list-view {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
}
.codex-sidebar-list.list-view .codex-sidebar-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
border-bottom: 1px solid #EEF0FF33;
}
.codex-sidebar-list.list-view .codex-sidebar-item-text {
text-align: left;
} .codex-sidebar-list.card-view {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.codex-sidebar-list.card-view .codex-sidebar-list-item {
width: 100%;
min-height: 95px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #FFFFFF0D;
border: 1px solid #FFFFFF1A;
border-radius: 8px;
padding: 16px;
}
.codex-sidebar-list.card-view .codex-sidebar-item-text p {
margin-top: 8px;
}
.codex-sidebar-list.card-view .codex-sidebar-item-text span {
display: block;
font-size: 11px;
font-weight: 400;
color: #ffffff;
} .codex-sidebar-cta-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #ffffff !important;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none !important;
font-weight: 700;
font-size: 14px;
text-align: center;
transition: opacity 0.2s;
margin-top: 4px;
}
.codex-sidebar-cta-btn:hover {
opacity: 0.9;
} .codex-single-wrap {
display: grid;
grid-template-columns: 240px 1fr 320px;
gap: 40px;
align-items: flex-start;
} .codex-single-toc {
position: sticky;
top: 100px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.codex-single-toc.codex-toc-visible {
opacity: 1;
visibility: visible;
} .codex-single-sidebar {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 24px;
align-self: start;
margin-top: 0; 
}
.comment-respond {
padding: 0 !important;
}
.comment-reply-title {
font-family: var(--inter) !important;
font-size: 28px !important;
font-weight: 800 !important;
color: rgb(17, 24, 39) !important;
margin-bottom: 0 !important;
margin-top: 24px !important;
}
.comment-reply-title small a {
color: var(--primary-color);
}
.logged-in-as {
font-family: var(--inter) !important;
font-size: 14px !important;
color:  rgb(156, 163, 175) !important;
margin-bottom: 24px !important;
}
.logged-in-as a {
color: var(--primary-color);
}
.comments-area textarea#comment,
.comments-area .ast-comment-formwrap input[type="text"] {
border: 1.5px solid rgb(229, 231, 235) !important;
background: rgb(250, 250, 250) !important;
border-radius: 12px !important;
}
input#submit,
input[type="submit"],
#comments .submit {
background: var(--primary-color) !important;
border: 1px solid var(--primary-color) !important;
border-radius: 10px !important;
}
.ast-comment-cite-wrap a {
color: var(--primary-color);
}
.ast-comment-time a {
color: var(--primary-color);
}
.ast-comment-edit-reply-wrap a {
color: var(--primary-color);
}
.ast-reply-link a:hover {
background: var(--primary-color) !important;
}
.codex-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 14px;
color: rgb(17, 24, 39);
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: .3s;
}
.codex-read-more:hover {
color: var(--primary-color);
} @media ( max-width: 1200px ) {
.codex-single-wrap {
grid-template-columns: 200px 1fr 260px;
gap: 28px;
}
}
@media ( max-width: 1024px ) {
.codex-single-wrap {
grid-template-columns: 1fr;
gap: 0;
} .codex-single-toc {
display: none;
} .codex-single-sidebar {
position: static;
order: 3;
margin-top: 0 !important;
padding-top: 0 !important;
}
.codex-sidebar-inner {
position: static;
padding-top: 0 !important;
} .codex-single-sidebar {
display: grid;
grid-template-columns: repeat( 2, 1fr );
gap: 20px;
}
.codex-faq-section {
margin-bottom: 48px;
padding-top: 0;
}
.admin-bar .codex-single-section {
padding: 60px 0 48px;
}
}
@media ( max-width: 768px ) { .codex-single-wrap {
grid-template-columns: 1fr;
}
.codex-single-sidebar {
grid-template-columns: 1fr;
}
.codex-single-title {
font-size: 26px;
line-height: 1.25;
}
.codex-single-meta {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-bottom: 16px;
}
.codex-meta-left {
gap: 10px;
} .codex-share-popup-inner {
width: calc( 100% - 32px );
padding: 32px 20px;
}
.codex-share-popup-inner h3 {
font-size: 20px;
margin-bottom: 20px;
}
.codex-share-links {
flex-direction: column;
gap: 8px;
}
.codex-share-copy {
flex-direction: column;
align-items: stretch;
}
.codex-copy-btn-wrap button {
width: 100%;
} .codex-author-bio {
flex-direction: column;
padding: 24px 20px;
gap: 16px;
}
.codex-author-bio > img {
width: 72px;
height: 72px;
}
.codex-author-bio-top {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.codex-author-bio-top h3 {
font-size: 22px;
} .codex-faq-question {
font-size: 15px;
padding: 16px 18px;
}
.codex-faq-answer {
font-size: 14px;
padding: 0 16px 14px;
} .codex-archive-grid {
grid-template-columns: 1fr;
}
.codex-related-title {
font-size: 20px;
margin: 32px 0 16px;
} .codex-toc-widget {
padding: 16px;
} .comment-reply-title {
font-size: 22px !important;
}
}
@media ( max-width: 480px ) {
.codex-single-title {
font-size: 22px;
}
.codex-single-section {
padding: 24px 0 48px;
}
.admin-bar .codex-single-section {
padding: 70px 0 48px;
}
.codex-single-thumbnail {
border-radius: 8px;
margin-bottom: 20px;
}
.codex-single-body {
font-size: 15px;
line-height: 1.7;
}
.codex-single-body h2 {
font-size: 20px;
margin: 24px 0 12px;
}
.codex-single-body h3 {
font-size: 17px;
margin: 20px 0 10px;
}
.codex-faq-section {
margin-bottom: 48px;
padding-top: 0;
}
.codex-faq-title {
font-size: 20px;
}
.codex-faq-question {
font-size: 14px;
padding: 14px 16px;
}
.codex-share-popup-inner {
padding: 24px 16px;
}
.codex-share-popup-inner h3 {
font-size: 18px;
}
.codex-author-bio {
padding: 20px 16px;
}
.codex-author-bio-top h3 {
font-size: 18px;
} .codex-sidebar-social-icons {
flex-wrap: wrap;
} .codex-dynamic-sidebar {
padding: 20px;
}
.codex-sidebar-list.card-view {
grid-template-columns: repeat( 2, 1fr );
} .codex-pagination {
flex-direction: column;
align-items: center;
gap: 10px;
}
}