#primary.page-header {
position: relative;
min-height: 50vh;
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
margin-top: 0; margin-bottom: 50px;
background-attachment: fixed;
} #primary.page-header::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.8) 60%,
rgba(0, 0, 0, 0.8) 100%
);
z-index: 1;
} #primary.page-header::after {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
z-index: 1;
pointer-events: none;
}
#primary.page-header .container {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-max, 1280px);
margin-inline: auto;
padding: 64px 24px 120px;
}
@media (min-width: 768px) {
#primary.page-header .container {
padding-inline: 40px;
padding-top: 100px;
padding-bottom: 50px;
}
}
@media (min-width: 1280px) {
#primary.page-header .container {
padding-inline: 56px;
padding-top: 90px;
}
} #primary.page-header:not([style*='background']) {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--md-primary-container) 60%, var(--md-background)) 0%,
var(--md-background) 100%
);
border-bottom: 1px solid var(--md-outline-variant);
}
#primary.page-header:not([style*='background'])::before {
display: none;
}
#primary.page-header:not([style*='background']) .entry-title,
#primary.page-header:not([style*='background']) .author,
#primary.page-header:not([style*='background']) .author a {
color: var(--md-on-surface);
} .post-hero-category {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: rgb(0, 104, 116);
color: #ffffff;
border: 1px solid var(--vm-accent, #006874);
border-radius: 9999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
margin-bottom: 16px;
} #primary.page-header .entry-title,
#primary.page-header .atomx-section-heading {
font-size: clamp(26px, 4.5vw, 48px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1;
color: #4fd8eb;
margin: 0 0 20px;
max-width: 800px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
} #primary.page-header .author {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0;
}
#primary.page-header .author a {
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
text-decoration: none;
}
#primary.page-header .author a:hover {
color: var(--vm-accent, #006874);
}
#primary.page-header .author time {
color: rgba(255, 255, 255, 0.7);
} .post-hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
.post-hero-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
}
.post-hero-meta-item .material-symbols-rounded {
font-size: 15px;
color: var(--vm-accent, #006874);
} [data-theme='light'] #primary.page-header:not([style*='background']) {
background: linear-gradient(135deg, #e0f6f9 0%, #f2f9fa 100%);
} .vm-post-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 48px;
align-items: start;
padding-top: 56px;
padding-bottom: 96px;
}
@media (max-width: 1100px) {
.vm-post-layout {
grid-template-columns: 1fr 300px;
gap: 32px;
}
}
@media (max-width: 860px) {
.vm-post-layout {
grid-template-columns: 1fr;
gap: 48px;
}
} .row {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.col-md-8.single-post-container {
flex: 0 0 70%;
max-width: 70%;
padding-right: 40px;
box-sizing: border-box;
}
.col-md-4.blog-sidebar-wrapper,
aside#secondary.blog-sidebar {
flex: 0 0 30%;
max-width: 30%;
min-width: 260px;
}
@media (max-width: 1024px) {
.col-md-8.single-post-container {
flex: 0 0 70%;
max-width: 70%;
padding-right: 28px;
}
.col-md-4.blog-sidebar-wrapper,
aside#secondary.blog-sidebar {
flex: 0 0 30%;
max-width: 30%;
}
}
@media (max-width: 860px) {
.col-md-8.single-post-container,
.col-md-4.blog-sidebar-wrapper,
aside#secondary.blog-sidebar {
flex: 0 0 100%;
max-width: 100%;
min-width: unset;
padding-right: 0;
margin-top: 30px;
}
} aside#secondary.blog-sidebar,
.blog-sidebar-wrapper {
position: sticky;
top: calc(var(--nav-height, 72px) + 24px);
}
@media (max-width: 860px) {
aside#secondary.blog-sidebar,
.blog-sidebar-wrapper {
position: static;
}
} .section-text .container,
.single-post-section .container {
max-width: var(--container-max, 1280px);
margin-inline: auto;
padding-inline: 24px;
}
@media (min-width: 768px) {
.single-post-section .container {
padding-inline: 40px;
}
}
@media (min-width: 1280px) {
.single-post-section .container {
padding-inline: 56px;
}
} .single-post-wrap,
.entry-content {
color: var(--md-on-surface);
font-size: 16px;
line-height: 1.85;
font-family: 'Roboto', sans-serif;
} .entry-content p,
.single-post-wrap p {
margin-bottom: 1em;
color: var(--md-on-surface-variant);
font-size: 16px;
line-height: 1.85;
}
.entry-content p.has-medium-font-size {
font-size: 17px;
}
.entry-content p.has-large-font-size {
font-size: 20px;
}
.entry-content p.has-x-large-font-size {
font-size: 24px;
}
.entry-content p.has-small-font-size {
font-size: 14px;
} .entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
font-weight: 500;
color: var(--md-on-surface);
line-height: 1.25;
letter-spacing: -0.02em;
margin-top: 2em;
margin-bottom: 0.75em;
}
.entry-content h1 {
font-size: clamp(28px, 4vw, 40px);
}
.entry-content h2 {
font-size: clamp(22px, 3vw, 32px);
padding-bottom: 10px;
border-bottom: 1px solid var(--md-outline-variant);
}
.entry-content h3 {
font-size: clamp(18px, 2.5vw, 24px);
}
.entry-content h4 {
font-size: 20px;
}
.entry-content h5 {
font-size: 17px;
}
.entry-content h6 {
font-size: 15px;
color: var(--md-on-surface-variant);
}
.wp-block-table.is-style-stripes tbody tr:nth-child(2n + 1) {
background-color: transparent !important;
} .entry-content a {
color: var(--md-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
transition: color 0.2s, text-decoration-color 0.2s;
font-weight: 600;
}
.entry-content a:hover {
color: var(--vm-accent, #006874);
text-decoration-color: transparent;
} .entry-content ul,
.entry-content ol {
margin: 0 0 1.6em 1.5em;
padding: 0;
color: var(--md-on-surface-variant);
line-height: 1.8;
}
.entry-content ul {
list-style: disc;
}
.entry-content ol {
list-style: decimal;
}
.entry-content li {
margin-bottom: 0.5em;
}
.entry-content li > ul,
.entry-content li > ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
} .entry-content blockquote {
position: relative;
margin: 2em 0;
padding: 24px 28px 24px 40px;
background: color-mix(
in srgb,
var(--md-primary) 5%,
var(--md-surface-container-low)
);
border-left: 4px solid var(--md-primary);
border-radius: 0 var(--md-shape-lg, 16px) var(--md-shape-lg, 16px) 0;
font-size: 18px;
font-weight: 500;
color: var(--md-on-surface);
line-height: 1.7;
}
.entry-content blockquote h5 {
margin: 0 !important;
line-height: 1.6 !important;
font-weight: 500;
}
.entry-content blockquote p {
margin-bottom: 0;
color: inherit;
font-size: inherit;
}
.entry-content blockquote cite,
.entry-content blockquote footer {
display: block;
margin-top: 12px;
font-size: 13px;
font-style: normal;
color: var(--md-on-surface-variant);
font-weight: 600;
}
.entry-content blockquote cite::before {
content: '— ';
} .entry-content code {
font-family: 'Roboto Mono', monospace;
font-size: 13px;
padding: 2px 7px;
background: var(--md-surface-container);
border: 1px solid var(--md-outline-variant);
border-radius: 4px;
color: var(--md-primary);
}
.entry-content pre {
background: var(--md-surface-container-lowest);
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-lg, 16px);
padding: 24px;
overflow-x: auto;
margin: 2em 0;
font-size: 13px;
line-height: 1.8;
}
.entry-content pre code {
background: none;
border: none;
padding: 0;
color: var(--md-on-surface);
font-size: inherit;
}
[data-theme='dark'] .entry-content pre {
background: #050d0f;
border-color: #24404a;
} .entry-content table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 14px;
border-radius: var(--md-shape-lg, 16px);
overflow: hidden;
border: 1px solid var(--md-outline-variant);
}
.entry-content th {
background: var(--md-surface-container);
color: var(--md-on-surface);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--md-outline-variant);
}
.entry-content td {
padding: 12px 16px;
color: var(--md-on-surface-variant);
border-bottom: 1px solid var(--md-outline-variant);
vertical-align: top;
}
.entry-content tr:last-child td {
border-bottom: none;
}
.entry-content tr:nth-child(even) td {
background: color-mix(in srgb, var(--md-primary) 3%, transparent);
} .entry-content img {
max-width: 100%;
height: auto;
border-radius: var(--md-shape-lg, 16px);
display: block;
}
.entry-content .wp-block-image,
.entry-content figure {
margin: 2em 0;
}
.entry-content figcaption {
text-align: center;
font-size: 13px;
color: var(--md-on-surface-variant);
margin-top: 8px;
font-style: italic;
}
.entry-content .aligncenter {
margin-inline: auto;
}
.entry-content .alignleft {
float: left;
margin: 0 24px 16px 0;
}
.entry-content .alignright {
float: right;
margin: 0 0 16px 24px;
}
.entry-content .alignfull {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
border-radius: 0;
}
.entry-content .alignwide {
width: calc(100% + 80px);
margin-left: -40px;
} .entry-content hr,
.entry-content .wp-block-separator {
border: none;
height: 1px;
background: var(--md-outline-variant);
margin: 2.5em 0;
}
.entry-content .wp-block-separator.is-style-wide {
width: 100%;
}
.entry-content .wp-block-separator.is-style-dots {
background: none;
height: auto;
text-align: center;
color: var(--md-on-surface-variant);
}
.entry-content .wp-block-separator.is-style-dots::before {
content: '···';
font-size: 24px;
letter-spacing: 8px;
}  .entry-content .wp-block-cover {
border-radius: var(--md-shape-lg, 16px);
overflow: hidden;
margin: 2em 0;
min-height: 300px;
} .entry-content .wp-block-columns {
display: flex;
gap: 24px;
margin: 2em 0;
flex-wrap: wrap;
}
.entry-content .wp-block-column {
flex: 1 1 0;
min-width: 200px;
} .entry-content .wp-block-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 2em 0;
}
.entry-content .wp-block-button__link {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: var(--md-primary);
color: var(--md-on-primary);
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none !important;
transition: box-shadow 0.2s, transform 0.2s;
}
.entry-content .wp-block-button__link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.entry-content .is-style-outline .wp-block-button__link {
background: transparent;
color: var(--md-primary);
border: 1.5px solid var(--md-primary);
} .entry-content .wp-block-notice,
.entry-content .notice,
.entry-content .wp-block-info,
.entry-content .wp-block-warning {
padding: 16px 20px;
border-radius: var(--md-shape-md, 12px);
border-left: 4px solid var(--md-primary);
background: color-mix(
in srgb,
var(--md-primary) 6%,
var(--md-surface-container-low)
);
margin: 1.5em 0;
font-size: 14px;
color: var(--md-on-surface);
} .entry-content .wp-block-pullquote {
border-top: 4px solid var(--md-primary);
border-bottom: 4px solid var(--md-primary);
padding: 32px 0;
margin: 2.5em 0;
text-align: center;
}
.entry-content .wp-block-pullquote blockquote {
background: none;
border: none;
padding: 0;
font-size: 22px;
}
.entry-content .wp-block-pullquote blockquote::before {
display: none;
} .entry-content .wp-block-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 10px;
margin: 2em 0;
}
.entry-content .wp-block-gallery figure {
margin: 0;
}
.entry-content .wp-block-gallery img {
border-radius: var(--md-shape-md, 12px);
width: 100%;
height: 100%;
object-fit: cover;
} .entry-content .wp-block-embed,
.entry-content .wp-block-video {
margin: 2em 0;
}
.entry-content .wp-block-embed__wrapper {
position: relative;
padding-top: 56.25%;
border-radius: var(--md-shape-lg, 16px);
overflow: hidden;
background: var(--md-surface-container);
}
.entry-content .wp-block-embed__wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
} .entry-content .wp-block-details {
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-md, 12px);
padding: 0;
margin: 1.5em 0;
overflow: hidden;
}
.entry-content .wp-block-details summary {
padding: 14px 20px;
font-weight: 600;
cursor: pointer;
background: var(--md-surface-container-low);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.entry-content .wp-block-details summary::after {
content: '+';
font-size: 18px;
color: var(--md-primary);
}
.entry-content .wp-block-details[open] summary::after {
content: '−';
}
.entry-content .wp-block-details > *:not(summary) {
padding: 14px 20px;
} .entry-content .wp-block-post-terms {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 2em 0;
}
.entry-content .wp-block-post-terms a {
display: inline-flex;
padding: 4px 12px;
border-radius: 9999px;
background: var(--md-surface-container);
border: 1px solid var(--md-outline-variant);
color: var(--md-on-surface-variant);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.entry-content .wp-block-post-terms a:hover {
border-color: var(--md-primary);
color: var(--md-primary);
} .post-tags,
.entry-footer {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--md-outline-variant);
align-items: center;
}
.post-tags-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--md-on-surface-variant);
margin-right: 4px;
}
.post-tag,
.cat-links a,
.tags-links a {
display: inline-flex;
padding: 4px 12px;
border-radius: 9999px;
background: var(--md-surface-container);
border: 1px solid var(--md-outline-variant);
color: var(--md-on-surface-variant);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.post-tag:hover,
.cat-links a:hover,
.tags-links a:hover {
border-color: var(--md-primary);
color: var(--md-primary);
background: var(--vm-accent-glow, rgba(0, 104, 116, 0.1));
} .post-navigation,
.nav-links.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--md-outline-variant);
}
@media (max-width: 560px) {
.post-navigation,
.nav-links.post-nav {
grid-template-columns: 1fr;
}
}
.nav-previous,
.nav-next {
background: var(--md-surface-container-low);
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-xl, 28px);
padding: 16px 20px;
text-decoration: none !important;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav-next {
text-align: right;
margin-left: auto; flex-direction: row;
}
.nav-previous:hover,
.nav-next:hover {
border-color: var(--md-primary);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} .nav-post-thumb {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid var(--md-outline-variant);
transition: border-color 0.25s;
}
.nav-previous:hover .nav-post-thumb,
.nav-next:hover .nav-post-thumb {
border-color: var(--md-primary);
} .nav-post-text {
display: flex;
flex-direction: column;
gap: 4px; justify-content: center;
}
.nav-direction {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--md-primary);
}
.nav-post-title {
font-size: 14px;
font-weight: 600;
color: var(--md-on-surface);
line-height: 1.4;
} .related-posts {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--md-outline-variant);
}
.related-posts-heading {
font-size: 15px;
font-weight: 700;
color: var(--md-on-surface);
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 7px;
}  #comments.section-comments,
.comments-area {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--md-outline-variant);
clear: both;
} #comments .media-area,
.comments-area .media-area {
margin-bottom: 32px;
text-align: center;
}
#comments .media-area h3,
#comments .atomx-section-heading,
.comments-title,
.comment-reply-title {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--md-on-surface) !important;
letter-spacing: -0.02em !important;
margin-bottom: 0 !important;
}
.comment-reply-title small {
font-size: 13px;
font-weight: 400;
margin-left: 10px;
}
.comment-reply-title small a {
color: var(--md-on-surface-variant);
text-decoration: none;
font-size: 12px;
} .comment-list,
ol.commentlist {
list-style: none;
margin: 0 0 40px;
padding: 0;
}
.comment-list .comment,
ol.commentlist li.comment {
margin-bottom: 20px;
}
.comment-body {
background: var(--md-surface-container-low);
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-xl, 28px);
padding: 22px 24px;
}
.comment-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.comment-author .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid var(--md-outline-variant);
}
.comment-author .fn {
font-size: 14px;
font-weight: 700;
color: var(--md-on-surface);
}
.comment-author .fn a {
color: inherit;
text-decoration: none;
}
.comment-metadata {
font-size: 12px;
color: var(--md-on-surface-variant);
}
.comment-metadata a {
color: inherit;
text-decoration: none;
}
.comment-content p {
font-size: 14px;
color: var(--md-on-surface-variant);
line-height: 1.7;
margin-bottom: 0.8em;
}
.reply a {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--md-primary);
text-decoration: none;
padding: 4px 12px;
border-radius: 9999px;
background: var(--vm-accent-glow, rgba(0, 104, 116, 0.1));
margin-top: 8px;
transition: background 0.2s;
}
.reply a:hover {
background: color-mix(in srgb, var(--md-primary) 15%, transparent);
}
.comment-list .children,
ol.commentlist .children {
list-style: none;
margin: 16px 0 0 40px;
padding: 0;
border-left: 2px solid var(--md-outline-variant);
padding-left: 20px;
} .no-comments {
text-align: center;
color: var(--md-on-surface-variant);
font-size: 14px;
padding: 24px 0;
} .comment-respond,
#respond {
margin-top: 40px;
background: var(--md-surface-container-low);
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-xl, 28px);
padding: 32px;
position: relative;
overflow: hidden;
} .comment-respond::before,
#respond::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--md-primary),
var(--md-secondary, var(--md-primary))
);
} .comment-respond h3,
#respond h3,
.comment-respond .atomx-section-heading {
font-size: 18px !important;
font-weight: 700 !important;
color: var(--md-on-surface) !important;
letter-spacing: -0.02em !important;
margin-bottom: 24px !important;
text-align: left !important;
display: flex;
align-items: center;
gap: 10px;
}
.comment-respond h3::before,
#respond h3::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background: var(--md-primary);
border-radius: 2px;
flex-shrink: 0;
} .logged-in-as {
font-size: 13px;
color: var(--md-on-surface-variant);
margin-bottom: 20px;
padding: 10px 14px;
background: var(--md-surface-container);
border-radius: var(--md-shape-md, 12px);
border: 1px solid var(--md-outline-variant);
line-height: 1.6;
}
.logged-in-as a {
color: var(--md-primary);
text-decoration: none;
font-weight: 500;
} .required-field-message {
display: block;
font-size: 11px;
color: var(--md-on-surface-variant);
margin-top: 4px;
}
.required {
color: var(--md-error, #ba1a1a);
}  .comment-form .form-group,
#commentform .form-group {
margin-bottom: 20px;
position: relative;
} .comment-form .form-group .control-label,
#commentform .label-floating .control-label {
display: none;
} .comment-form textarea,
#commentform textarea,
textarea#comment {
width: 100%;
padding: 14px 16px;
background: var(--md-surface-container-lowest);
border: 1.5px solid var(--md-outline-variant);
border-radius: var(--md-shape-lg, 16px);
color: var(--md-on-surface);
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 1.65;
min-height: 140px;
resize: vertical;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.comment-form textarea:focus,
#commentform textarea:focus,
textarea#comment:focus {
border-color: var(--md-primary);
box-shadow: 0 0 0 3px var(--vm-accent-glow, rgba(0, 104, 116, 0.15));
} .comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
#commentform input[type='text'],
#commentform input[type='email'],
#commentform input[type='url'] {
width: 100%;
padding: 12px 16px;
background: var(--md-surface-container-lowest);
border: 1.5px solid var(--md-outline-variant);
border-radius: var(--md-shape-md, 12px);
color: var(--md-on-surface);
font-family: 'Roboto', sans-serif;
font-size: 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
display: block;
margin-bottom: 16px;
}
.comment-form input[type='text']:focus,
.comment-form input[type='email']:focus,
#commentform input[type='text']:focus,
#commentform input[type='email']:focus {
border-color: var(--md-primary);
box-shadow: 0 0 0 3px var(--vm-accent-glow, rgba(0, 104, 116, 0.15));
} .comment-form label,
#commentform label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--md-on-surface-variant);
margin-bottom: 6px;
} .comment-form .form-submit,
#commentform .form-submit,
p.form-submit {
margin-top: 8px;
}
.comment-form .form-submit input[type='submit'],
#commentform input[type='submit'],
input#submit,
.comment-form .btn-primary,
#commentform .btn.btn-primary {
display: inline-flex !important;
align-items: center !important;
padding: 12px 28px !important;
background: var(--md-primary) !important;
color: var(--md-on-primary, #004049) !important;
border: none !important;
border-radius: 9999px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
cursor: pointer !important;
transition: box-shadow 0.2s, transform 0.2s !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px 2px rgba(0, 0, 0, 0.08) !important;
text-transform: none !important;
float: none !important;
}
.comment-form .form-submit input[type='submit']:hover,
#commentform input[type='submit']:hover,
input#submit:hover {
transform: translateY(-1px) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 8px 3px rgba(0, 0, 0, 0.12) !important;
} .comment-form .waves-input-wrapper,
#commentform .waves-input-wrapper {
display: contents;
}
.pull-right {
float: none !important;
} .comment-respond .pull-left.author,
#respond .pull-left.author {
display: none; } [data-theme='dark'] .comment-respond,
[data-theme='dark'] #respond {
background: var(--md-surface-container-low, #0b181b);
border-color: var(--md-outline-variant, #24404a);
}
[data-theme='dark'] .comment-body {
background: var(--md-surface-container-low, #0b181b);
border-color: var(--md-outline-variant, #24404a);
}
[data-theme='dark'] .comment-form textarea,
[data-theme='dark'] #commentform textarea,
[data-theme='dark'] textarea#comment,
[data-theme='dark'] .comment-form input[type='text'],
[data-theme='dark'] .comment-form input[type='email'],
[data-theme='dark'] #commentform input[type='text'],
[data-theme='dark'] #commentform input[type='email'] {
background: #050d0f;
border-color: #24404a;
color: #e6f4f6;
}
[data-theme='dark'] .logged-in-as {
background: #0f1e21;
border-color: #24404a;
} aside#secondary,
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
} .widget {
background: var(--md-surface-container-low);
border: none;
border-radius: var(--md-shape-xl, 28px);
overflow: hidden;
transition: border-color 0.2s;
}
.widget:hover {
border-color: color-mix(
in srgb,
var(--md-primary) 30%,
var(--md-outline-variant)
);
} .widget h5,
.widget h4,
.widget .widget-title,
.widget-title {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: var(--md-on-surface-variant) !important;
margin: 0 !important;
padding: 14px 20px !important;
border-bottom: 1px solid var(--md-outline-variant) !important;
background: var(--md-surface-container) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.widget h5::before {
content: '';
display: inline-block;
width: 3px;
height: 14px;
background: var(--md-primary);
border-radius: 2px;
flex-shrink: 0;
} .widget > *:not(h5):not(h4):not(.widget-title) {
padding: 16px 20px;
} .widget .widget_search form,
.widget .sidebar-ax-latest-posts,
.widget ul {
padding: 16px 20px;
}
.widget .wp-block-heading {
font-size: 1.3em;
margin: 10px 0 0 20px;
} .widget_search .search-form {
display: flex;
gap: 8px;
align-items: center;
}
.widget_search .search-field,
.widget_search input[type='search'] {
flex: 1;
padding: 10px 14px;
background: var(--md-surface-container-lowest);
border: 1.5px solid var(--md-outline-variant);
border-radius: 9999px;
color: var(--md-on-surface);
font-family: 'Roboto', sans-serif;
font-size: 13px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
}
.widget_search .search-field:focus {
border-color: var(--md-primary);
box-shadow: 0 0 0 3px var(--vm-accent-glow, rgba(0, 104, 116, 0.15));
}
.widget_search .search-submit,
.widget_search input[type='submit'] {
padding: 10px 18px;
background: var(--md-primary);
color: var(--md-on-primary);
border: none;
border-radius: 9999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: box-shadow 0.2s, transform 0.2s;
flex-shrink: 0;
}
.widget_search .search-submit:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
} .widget_search .label-floating .control-label {
display: none;
}
.widget_search .label-floating {
margin: 0;
}
.widget_search .waves-input-wrapper {
display: contents;
} .widget_atomx_recent_posts .sidebar-ax-latest-posts {
padding: 8px 20px;
}
.ax-recent-post-widget-wrapper {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--md-outline-variant);
}
.ax-recent-post-widget-wrapper:last-child {
border-bottom: none;
} .ax-recent-post-widget-wrapper .ax-thumb,
.ax-thumb {
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--md-outline-variant);
transition: border-color 0.2s;
}
.ax-recent-post-widget-wrapper:hover .ax-thumb {
border-color: var(--md-primary);
}
.ax-recent-post-widget-info-wrapper {
flex: 1;
min-width: 0;
}
.ax-recent-post-widget-title {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 0 4px !important;
padding: 0 !important;
display: block !important;
}
.ax-recent-post-widget-title a {
color: var(--md-on-surface) !important;
text-decoration: none;
transition: color 0.2s;
}
.ax-recent-post-widget-title a:hover {
color: var(--md-primary) !important;
}
.ax-recent-post-widget-info {
font-size: 11px;
color: var(--md-on-surface-variant);
display: block;
} .widget_categories ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_recent_comments ul,
.widget_meta ul {
list-style: none;
margin: 0;
padding: 8px 20px;
}
.widget_categories ul li,
.widget_recent_entries ul li,
.widget_pages ul li,
.widget_archive ul li,
.widget_nav_menu ul li,
.widget_recent_comments ul li {
border-bottom: 1px solid var(--md-outline-variant);
padding: 0;
}
.widget_categories ul li:last-child,
.widget_recent_entries ul li:last-child,
.widget_pages ul li:last-child,
.widget_archive ul li:last-child {
border-bottom: none;
}
.widget_categories ul a,
.widget_recent_entries ul a,
.widget_pages ul a,
.widget_archive ul a,
.widget_nav_menu ul a,
.widget_recent_comments ul a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
font-size: 13px;
color: var(--md-on-surface-variant);
text-decoration: none;
transition: color 0.2s, padding-left 0.2s;
}
.widget_categories ul a:hover,
.widget_recent_entries ul a:hover,
.widget_pages ul a:hover,
.widget_archive ul a:hover {
color: var(--md-primary);
padding-left: 4px;
}
.widget_categories ul .cat-item .count,
.widget_archive ul a .post-count {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
background: var(--md-surface-container);
border: 1px solid var(--md-outline-variant);
border-radius: 9999px;
color: var(--md-on-surface-variant);
flex-shrink: 0;
} .widget_tag_cloud .tagcloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 16px 20px;
}
.widget_tag_cloud a,
.tagcloud a {
display: inline-flex;
padding: 4px 10px;
border-radius: 9999px;
background: var(--md-surface-container);
border: 1px solid var(--md-outline-variant);
color: var(--md-on-surface-variant);
font-size: 12px !important;
text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.widget_tag_cloud a:hover,
.tagcloud a:hover {
border-color: var(--md-primary);
color: var(--md-primary);
background: var(--vm-accent-glow, rgba(0, 104, 116, 0.1));
} .widget_text .textwidget,
.widget_custom_html .custom-html-widget {
font-size: 13px;
color: var(--md-on-surface-variant);
line-height: 1.7;
} .widget_rss ul {
padding: 8px 20px;
}
.widget_rss li {
padding: 10px 0;
border-bottom: 1px solid var(--md-outline-variant);
}
.widget_rss li:last-child {
border-bottom: none;
}
.widget_rss a {
color: var(--md-primary);
font-size: 13px;
font-weight: 600;
}
.widget_rss .rss-date {
font-size: 11px;
color: var(--md-on-surface-variant);
display: block;
margin-top: 2px;
} .widget_calendar table {
margin: 0;
border: none;
}
.widget_calendar caption {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--md-on-surface-variant);
padding-bottom: 8px;
}
.widget_calendar th {
background: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--md-on-surface-variant);
}
.widget_calendar td {
text-align: center;
font-size: 12px;
}
.widget_calendar td a {
color: var(--md-primary);
font-weight: 700;
text-decoration: none;
} .blog-archive,
.archive-content {
padding-top: 48px;
padding-bottom: 96px;
}
.post-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
margin-top: 40px;
}
@media (max-width: 640px) {
.post-card-grid {
grid-template-columns: 1fr;
}
} article.post-card {
background: var(--md-surface-container-low);
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-xl, 28px);
overflow: hidden;
transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
article.post-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
border-color: color-mix(
in srgb,
var(--md-primary) 40%,
var(--md-outline-variant)
);
}
.post-card-thumbnail {
aspect-ratio: 16/9;
overflow: hidden;
}
.post-card-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
transition: transform 0.4s;
}
article.post-card:hover .post-card-thumbnail img {
transform: scale(1.04);
}
.post-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.post-card-category {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--md-primary);
}
.post-card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--md-on-surface);
margin: 0;
}
article.post-card:hover .post-card-title {
color: var(--md-primary);
}
.post-card-excerpt {
font-size: 13px;
color: var(--md-on-surface-variant);
line-height: 1.65;
flex: 1;
}
.post-card-meta {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
font-size: 12px;
color: var(--md-on-surface-variant);
padding-top: 14px;
border-top: 1px solid var(--md-outline-variant);
}
.post-card-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: none;
} .pagination,
.page-links,
.nav-links.archive-nav {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 56px;
flex-wrap: wrap;
}
.page-numbers,
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 9999px;
font-size: 14px;
font-weight: 500;
color: var(--md-on-surface-variant);
background: var(--md-surface-container-low);
border: 1px solid var(--md-outline-variant);
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.page-numbers:hover,
.pagination a:hover {
border-color: var(--md-primary);
color: var(--md-primary);
}
.page-numbers.current,
.pagination .current {
background: var(--md-primary);
color: var(--md-on-primary);
border-color: var(--md-primary);
}
.page-numbers.dots {
background: none;
border: none;
} .clear,
.clearfix::after {
content: '';
display: table;
clear: both;
} [data-theme='dark'] .widget_search .search-field,
[data-theme='dark'] .comment-form input,
[data-theme='dark'] .comment-form textarea {
background: #050d0f;
border-color: #24404a;
color: #e6f4f6;
}
[data-theme='dark'] .entry-content code {
background: #0b181b;
border-color: #24404a;
}
[data-theme='dark'] .comment-body {
background: #0b181b;
border-color: #24404a;
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
} .admin-bar .nav {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .nav {
top: 46px;
}
} .wp-dark-mode,
.wp-dark-mode--fallback {
display: none !important;
}
::selection {
background: #4fd8eb;
color: #081214;
}
.wp-block-table.is-style-stripes,
.wp-block-table thead {
border-bottom: none !important;
}
.wp-block-latest-posts.wp-block-latest-posts__list li {
clear: both;
overflow-wrap: break-word;
margin-bottom: 18px;
line-height: 1.1em;
padding-left: 15px;
position: relative; list-style: none; }
.wp-block-latest-posts.wp-block-latest-posts__list li::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 5px; height: 100%; background-color: #4fd8eb; transition: 0.8s;
}
.wp-block-latest-posts.wp-block-latest-posts__list li:hover::before {
width: 15px !important;
transition: 0.4s;
}
a:hover {
text-underline-offset: 3px;
}
.post-hero-category:hover {
text-decoration: none !important;
background-color: rgba(0, 0, 0, 0.5);
color: #4fd8eb;
}
.archive .section {
max-width: 80%;
margin: 0 auto;
}
.archive .post-card-avatar {
display: none;
}