:root {
--bg-body: #05070a;
--bg-card: #101827;
--bg-card-alt: #0b1220;
--accent: #f97316;
--accent-soft: rgba(249, 115, 22, 0.12);
--text-main: #e5e7eb;
--text-muted: #9ca3af;
--border-subtle: #1f2933;
--radius-lg: 14px;
--radius-md: 8px;
--radius-pill: 999px;
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
--shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.03);
--gap-lg: 1.75rem;
--gap-md: 1.25rem;
--gap-sm: 0.75rem;
--font-sans: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
background: radial-gradient(circle at top, #111827 0, #020617 52%, #000 100%);
color: var(--text-main);
} .site-wrapper {
min-height: 100vh;
display: flex;
justify-content: center;
padding: 3rem 1rem 4rem;
}
.site-shell {
width: 100%;
max-width: 860px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--gap-lg);
} .site-header {
position: sticky;
top: 0;
z-index: 10;
padding-bottom: 1.5rem;
margin-bottom: 0.5rem;
backdrop-filter: blur(18px);
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.85));
border-radius: var(--radius-lg);
border: 1px solid rgba(148, 163, 184, 0.18);
padding: 0.6rem 1.3rem 1.1rem;
box-shadow: var(--shadow-soft);
} .site-branding {
display: block;
}
.site-avatar {
display: none;
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid rgba(249, 115, 22, 0.7);
background: radial-gradient(circle at 30% 20%, #f97316, #0f172a);
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
color: #f9fafb;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 0 18px rgba(249, 115, 22, 0.65);
}
.site-title-group {
display: flex;
flex-direction: column;
gap: 0.05rem;
margin-top: 0;
}
.site-title {
margin: 0;
line-height: 1.1;
}
.site-title a {
margin: 0;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.03em;
color: #f9fafb;
text-decoration: none;
}
.site-tagline {
margin: 0;
font-size: 0.78rem;
color: var(--text-muted);
} .site-meta-chips {
display: flex;
align-items: center;
gap: 0.5rem;
}
.meta-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.73rem;
padding: 0.28rem 0.7rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(148, 163, 184, 0.28);
background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.16), rgba(15, 23, 42, 0.95));
color: var(--text-muted);
}
.meta-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #22c55e;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 0 12px rgba(34, 197, 94, 0.85);
} .site-nav-toggle {
border: 1px solid rgba(148, 163, 184, 0.28);
background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.16), rgba(15, 23, 42, 0.95));
color: var(--text-muted);
cursor: pointer;
}
.site-nav-toggle-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
}
.site-nav-toggle-icon {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.site-nav-toggle-icon span {
display: block;
width: 12px;
height: 2px;
border-radius: 999px;
background: rgba(249, 250, 251, 0.9);
} .site-nav {
margin-top: 0.6rem;
display: none;
}
.site-nav.is-open {
display: block;
}
.site-nav-list {
list-style: none;
margin: 0;
padding: 0.35rem 0.1rem 0.1rem;
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
}
.site-nav-list li {
margin: 0;
padding: 0;
}
.site-nav-list a {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.7rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(55, 65, 81, 0.9);
font-size: 0.78rem;
text-decoration: none;
color: var(--text-muted);
background: rgba(15, 23, 42, 0.96);
}
.site-nav-list a:hover,
.site-nav-list a:focus {
border-color: rgba(249, 115, 22, 0.8);
color: #f9fafb;
} .micro-compose {
margin-bottom: 1.5rem;
}
.micro-compose-form {
margin: 0;
}
.micro-compose-inner {
background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.08), var(--bg-card));
border-radius: 12px;
border: 1px solid rgba(51, 65, 85, 0.85);
box-shadow: var(--shadow-soft);
padding: 0.85rem 1rem 0.75rem;
}
.micro-compose-textarea {
width: 100%;
resize: vertical;
min-height: 3.2rem;
max-height: 12rem;
border: none;
outline: none;
background: transparent;
color: var(--text-main);
font-family: var(--font-sans);
font-size: 0.98rem;
line-height: 1.5;
}
.micro-compose-textarea::placeholder {
color: var(--text-muted);
}
.micro-compose-footer {
margin-top: 0.55rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.micro-compose-left {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.micro-compose-hint {
font-size: 0.78rem;
color: var(--text-muted);
}
.micro-compose-submit {
border: none;
border-radius: var(--radius-pill);
padding: 0.3rem 1.1rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
background: var(--accent);
color: #111827;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 0 14px rgba(249, 115, 22, 0.6);
}
.micro-compose-submit:hover {
filter: brightness(1.05);
}
.micro-compose-notice {
margin-top: 0.35rem;
font-size: 0.78rem;
color: var(--text-muted);
} .micro-compose-attach {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.18rem 0.75rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.96);
font-size: 0.78rem;
color: var(--text-muted);
cursor: pointer;
}
.micro-compose-attach-icon {
font-size: 0.9rem;
line-height: 1;
}
.micro-compose-file {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
} .micro-compose-preview {
margin-top: 0.55rem;
padding: 0.55rem 0.7rem;
border-radius: 10px;
border: 1px dashed rgba(55, 65, 81, 0.85);
background: rgba(15, 23, 42, 0.85);
font-size: 0.8rem;
color: var(--text-muted);
display: none;
}
.micro-compose-preview.is-visible {
display: block;
}
.micro-compose-preview-inner {
display: flex;
align-items: center;
gap: 0.6rem;
}
.micro-compose-preview-thumb {
flex: 0 0 auto;
}
.micro-compose-preview-thumb img {
display: block;
width: 64px;
height: 64px;
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(31, 41, 55, 0.9);
}
.micro-compose-preview-icon {
flex: 0 0 auto;
font-size: 1rem;
}
.micro-compose-preview-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.micro-compose-preview-name {
font-size: 0.82rem;
color: #e5e7eb;
}
.micro-compose-preview-type {
font-size: 0.76rem;
color: var(--text-muted);
}
.micro-compose-preview-remove {
margin-top: 0.2rem;
align-self: flex-start;
border-radius: var(--radius-pill);
border: 1px solid rgba(75, 85, 99, 0.9);
background: rgba(15, 23, 42, 0.9);
color: var(--text-muted);
font-size: 0.76rem;
padding: 0.12rem 0.6rem;
cursor: pointer;
}
.micro-compose-preview-remove:hover {
border-color: rgba(239, 68, 68, 0.9);
color: #fee2e2;
} .timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.micro-post {
position: relative;
background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.08), var(--bg-card));
border-radius: 12px;
padding: 0.9rem 1rem 0.85rem;
border: 1px solid rgba(51, 65, 85, 0.85);
box-shadow: var(--shadow-soft);
overflow: hidden;
cursor: pointer;
}
.micro-post::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.13), transparent 55%);
opacity: 0.9;
pointer-events: none;
} .micro-post-inner {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: flex-start;
}
.micro-post-avatar {
flex: 0 0 auto;
}
.micro-post-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(249, 115, 22, 0.7);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 0 14px rgba(249, 115, 22, 0.5);
} .micro-post-main {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.micro-post-title {
font-size: 0.9rem;
font-weight: 600;
margin: 0;
color: #e5e7eb;
}
.micro-post-title a {
text-decoration: none;
color: inherit;
}
.micro-post-title a:hover {
text-decoration: underline;
} .micro-post-headerline {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.micro-post-author {
font-weight: 600;
color: #f9fafb;
text-transform: none;
letter-spacing: 0;
}
.micro-post-separator {
opacity: 0.7;
}
.micro-post-datetime {
opacity: 0.85;
}
.micro-post-content {
font-size: 0.98rem;
line-height: 1.5;
color: #e5e7eb;
}
.micro-post-content p {
margin: 0.08rem 0 0.45rem;
}
.micro-post-content p:last-child {
margin-bottom: 0;
} .micro-post-media {
margin-top: 0.4rem;
}
.micro-post-media img,
.micro-post-media video {
display: block;
max-width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid rgba(31, 41, 55, 0.9);
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}
.micro-post-media .wp-video,
.micro-post-media .wp-video-shortcode,
.micro-post-media .wp-audio-shortcode {
max-width: 100%;
}
.micro-post-media audio {
width: 100%;
} .micro-doc-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.22rem 0.75rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.96);
font-size: 0.8rem;
color: var(--text-muted);
text-decoration: none;
}
.micro-doc-chip:hover {
border-color: rgba(249, 115, 22, 0.8);
color: #f9fafb;
}
.micro-doc-chip-icon {
font-size: 0.9rem;
} .micro-post-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.6rem;
padding-top: 0.55rem;
border-top: 1px solid rgba(31, 41, 55, 0.85);
gap: 0.75rem;
font-size: 0.78rem;
color: var(--text-muted);
}
.micro-post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.micro-tag {
padding: 0.14rem 0.6rem;
border-radius: var(--radius-pill);
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(55, 65, 81, 0.8);
font-size: 0.78rem;
text-decoration: none;
color: var(--text-muted);
}
.micro-tag:hover {
border-color: rgba(249, 115, 22, 0.75);
color: #f9fafb;
}
.micro-post-actions {
display: flex;
align-items: center;
gap: 0.6rem;
}
.micro-meta-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.16rem 0.55rem;
border-radius: var(--radius-pill);
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(55, 65, 81, 0.75);
font-size: 0.78rem;
}
.micro-meta-pill-icon {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent-soft);
box-shadow: 0 0 0 1px rgba(31, 41, 55, 1);
} .micro-like-button {
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
}
.micro-like-button.is-liked {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.5);
opacity: 0.95;
} .pagination {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.pagination a,
.pagination span {
display: inline-block;
margin: 0 0.25rem;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-pill);
font-size: 0.85rem;
text-decoration: none;
border: 1px solid rgba(55, 65, 81, 0.9);
color: var(--text-muted);
}
.pagination .current {
background: var(--accent);
color: #111827;
border-color: transparent;
} .pagination-load-more {
margin-top: 1.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.pagination-load-more .pagination-older a {
padding: 0.45rem 1.4rem;
border-radius: var(--radius-pill);
background: var(--accent);
color: #111827;
border: none;
font-weight: 600;
text-decoration: none;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 0 14px rgba(249, 115, 22, 0.6);
}
.pagination-load-more .pagination-older a:hover {
filter: brightness(1.05);
}
.pagination-load-more .pagination-older a.is-disabled {
opacity: 0.6;
cursor: default;
box-shadow: none;
}
.pagination-load-more .pagination-newer a {
font-size: 0.8rem;
color: var(--text-muted);
text-decoration: none;
}
.pagination-load-more .pagination-newer a:hover {
color: #fed7aa;
} .pagination-back-to-top {
margin-top: 0.35rem;
display: flex;
justify-content: center;
}
.back-to-top-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.9rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.96);
font-size: 0.78rem;
text-decoration: none;
color: var(--text-muted);
}
.back-to-top-chip:hover,
.back-to-top-chip:focus-visible {
border-color: rgba(249, 115, 22, 0.8);
color: #f9fafb;
}
.back-to-top-chip-icon {
font-size: 0.9rem;
line-height: 1;
} .site-footer {
font-size: 0.8rem;
color: var(--text-muted);
text-align: center;
padding-top: 0.5rem;
border-top: 1px solid rgba(31, 41, 55, 0.9);
} a,
a:visited {
color: var(--accent);
}
a:hover,
a:focus {
color: #fed7aa;
}
a:active {
color: var(--accent);
}
code,
pre {
font-family: "JetBrains Mono", ui-monospace, SFMonoRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre {
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
border: 1px solid rgba(55, 65, 81, 0.9);
background: #020617;
overflow-x: auto;
} .single .micro-post {
cursor: default;
}
.comments-wrap {
margin-top: 1.25rem;
} .comments-area {
margin: 0;
padding: 0.9rem 1rem 1rem;
border-radius: 12px;
border: 1px solid rgba(55, 65, 81, 0.9);
background: #020617;
}
.comments-title,
.comment-reply-title {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 0.75rem;
color: #e5e7eb;
}
.comment-list {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
}
.comment-list .comment {
padding: 0.6rem 0;
border-top: 1px solid rgba(31, 41, 55, 0.85);
}
.comment-list .comment:first-child {
border-top: none;
}
.comment-author {
font-size: 0.83rem;
font-weight: 600;
color: #e5e7eb;
}
.comment-metadata {
font-size: 0.75rem;
color: var(--text-muted);
}
.comment-content {
font-size: 0.9rem;
line-height: 1.5;
margin-top: 0.25rem;
}
.comment-form-comment textarea {
width: 100%;
max-width: 100%;
background: #020617;
border-radius: 8px;
border: 1px solid rgba(55, 65, 81, 0.9);
padding: 0.6rem 0.7rem;
color: #e5e7eb;
}
.comment-form-comment textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.4);
}
.comment-form input[type="submit"] {
margin-top: 0.6rem;
border-radius: 999px;
border: 1px solid rgba(249, 115, 22, 0.9);
background: var(--accent);
color: #111827;
font-size: 0.85rem;
padding: 0.35rem 0.9rem;
cursor: pointer;
}
.comment-form input[type="submit"]:hover {
background: #fed7aa;
} .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
position: static;
width: auto;
height: auto;
margin: 0;
clip: auto;
} .skip-link {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.4rem 0.9rem;
background: #111827;
color: #f9fafb;
z-index: 100;
border-radius: 999px;
border: 1px solid rgba(249, 115, 22, 0.9);
text-decoration: none;
transform: translateY(-200%);
opacity: 0;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
opacity: 1;
} .micro-post-content a,
.comment-content a {
text-decoration: underline;
text-underline-offset: 2px;
}
.micro-post-content a:hover,
.comment-content a:hover {
text-decoration-thickness: 2px;
} a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
outline: 2px solid rgba(249, 115, 22, 0.9);
outline-offset: 2px;
}
.pagination a:focus-visible,
.pagination-load-more .pagination-older a:focus-visible,
.micro-compose-submit:focus-visible {
box-shadow:
0 0 0 2px rgba(15, 23, 42, 1),
0 0 0 4px rgba(249, 115, 22, 0.9);
} @media (max-width: 720px) {
.site-wrapper {
padding: 1.8rem 0.9rem 2.4rem;
}
.site-header-inner {
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
}
.site-meta-chips {
width: 100%;
justify-content: space-between;
}
}