@charset "utf-8";
  .tags-links {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid var(--color-border-light);
}
.tag-label {
font-weight: 600;
margin-right: 8px;
color: var(--color-text-secondary);
}
.tags-links a {
display: inline-block;
background: var(--color-surface-alt);
color: var(--color-text-primary);
padding: 4px 12px;
margin: 2px 4px 2px 0;
border-radius: 15px;
font-size: 0.85em;
text-decoration: none;
border: 1px solid var(--color-border);
transition: all 0.3s ease;
}
.tags-links a:hover {
background: var(--color-primary);
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--color-primary);
color: white;
}
.wp-block-quote.is-style-border-left {
border-left: 4px solid var(--color-primary);
padding-left: 20px;
background: var(--color-surface-alt);
} .hero-section {
text-align: center;
padding: 60px 20px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: white;
border-radius: 8px;
}
.hero-section h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}  :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: "Crimson Text", Georgia, "Times New Roman", serif;
--font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace; --color-primary: #000000cc; --color-primary-light: #2c5282;
--color-primary-lighter: #3182ce;
--color-secondary: #744210; --color-accent: #c05621;  --color-text-primary: #1a202c;
--color-text-secondary: #4a5568;
n    --color-text-muted: #718096;
--color-text-light: #a0aec0; --color-background: #fafafa;
--color-surface: #ffffff;
--color-surface-alt: #f7fafc;
--color-border: #e2e8f0;
--color-border-light: #edf2f7; --content-width: 1200px;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem; --radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --transition-fast: 0.15s;
--transition-normal: 0.3s;
--transition-slow: 0.5s;
}  *, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
color: var(--color-text-primary);
background-color: var(--color-background);
margin: 0;
padding: 0;
line-height: 1.7;
font-size: 16px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}  .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-to-content.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 6px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 7px;
width: auto;
z-index: 100000;
} h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 700;
line-height: 1.25;
margin: 0 0 var(--spacing-lg) 0;
color: var(--color-text-primary);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
p {
margin: 0 0 var(--spacing-lg) 0;
color: var(--color-text-secondary);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast) ease;
}
a:hover {
color: var(--color-primary-lighter);
} ul, ol {
margin: 0 0 var(--spacing-lg) 0;
padding-left: var(--spacing-xl);
}
li {
margin-bottom: var(--spacing-sm);
color: var(--color-text-secondary);
} table {
width: 100%;
border-collapse: collapse;
margin: 0 0 var(--spacing-lg) 0;
}
th, td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
color: gray;
}
#wp-calendar th, td {
padding: 5px;
}
th {
background-color: var(--color-surface-alt);
font-weight: 600;
color: var(--color-text-primary);
} img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}  .site-header,
.site-content,
.site-footer {
width: 100%;
box-sizing: border-box;
} .container {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 var(--spacing-xl);
}
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-lg);
}
}  .site-header {
background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
} .site-header.header-visible {
transform: translateY(0);
opacity: 1;
}
.site-header.header-hidden {
transform: translateY(-100%);
opacity: 0.95;
}
.wp-element-button {
white-space: nowrap;
}
.wp-block-latest-comments {
padding-left: 5px;
}
.site-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%,
rgba(0, 0, 0, 0.05) 100%
);
pointer-events: none;
}
.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
position: relative;
z-index: 1;
min-height: 60px;
} .site-branding {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 15px;
}
.custom-logo {
height: 40px;
width: auto;
border-radius: 0;
}
.site-title {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.025em;
}
.site-title a {
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.site-title a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
transition: width 0.3s ease;
}
.site-title a:hover {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.site-title a:hover::after {
width: 100%;
}
.site-description {
margin-top: var(--spacing-xs);
font-size: 1rem;
color: var(--color-text-muted);
font-weight: 400;
display: none; } .home .site-description,
.front-page .site-description {
display: block;
} .main-navigation {
display: flex;
align-items: center;
}
.main-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 8px;
}
.main-navigation li {
margin: 0;
position: relative;
max-width: 90vw;
background: rgb(0 0 0 / 90%);
color: white;
border-radius: 8px;
}
.main-navigation .submenu-toggle {
background: none;
border: none;
color: inherit;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
cursor: pointer;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 24px;
height: 24px;
}
.main-navigation .submenu-toggle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.main-navigation .submenu-toggle .submenu-toggle-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s ease;
}
.main-navigation .submenu-toggle[aria-expanded="true"] .submenu-toggle-icon {
transform: rotate(180deg);
}
.main-navigation a {
display: block;
padding: 8px 16px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.025em;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.main-navigation .menu-item-has-children > a {
padding-right: 40px;
}
.main-navigation ul ul .menu-item-has-children > a {
padding-right: 32px;
}
.main-navigation a:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} .main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
background: rgba(255, 255, 255, 0.25);
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} .main-navigation ul ul {
position: absolute;
top: 100%;
left: 0;
backdrop-filter: blur(12px);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
min-width: max-content;
width: max-content;
max-width: calc(100vw - 40px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.main-navigation ul ul .submenu-toggle {
right: 12px;
}
.main-navigation ul ul a {
color: #ffffff;
background: transparent;
border: none;
padding: 12px 16px;
font-size: 14px;
white-space: nowrap;
}
.main-navigation ul ul a:hover {
background: var(--color-primary);
color: white;
transform: none;
} .header-right-wrapper {
display: flex;
align-items: center;
gap: 16px; } .language-switcher {
position: relative;
display: flex;
align-items: center;
}
.lang-toggle {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
height: 40px;
min-width: 50px;
justify-content: center;
}
.lang-toggle:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-1px);
}
.current-lang {
font-size: 12px;
letter-spacing: 0.5px;
}
.lang-icon {
transition: transform 0.2s ease;
opacity: 0.8;
}
.lang-dropdown.show .lang-icon {
transform: rotate(180deg);
}
.lang-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
min-width: 120px;
overflow: hidden;
}
.lang-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-option {
display: block;
width: 100%;
padding: 10px 16px;
background: none;
border: none;
color: #374151;
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
}
.lang-option:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.lang-option:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} @media (max-width: 768px) {
.lang-toggle {
padding: 4px 8px;
font-size: 12px;
min-width: 40px;
}
.current-lang {
font-size: 11px;
}
.lang-dropdown {
right: -10px;
min-width: 100px;
}
.lang-option {
padding: 8px 12px;
font-size: 13px;
}
}
.home-hero {
text-align: center;
padding: 50px;
}  .menu-toggle {
display: none;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
z-index: 10000; position: relative; }
.menu-toggle-icon {
display: block;
position: relative;
width: 24px;
height: 2px;
background-color: white;
transition: all 0.3s ease;
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: white;
transition: all 0.3s ease;
}
.menu-toggle-icon::before {
transform: translateY(-7px);
}
.menu-toggle-icon::after {
transform: translateY(7px);
}
.main-navigation li.submenu-open > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (min-width: 768px) {
.main-navigation li:not(.submenu-close):hover > ul,
.main-navigation li:not(.submenu-close).focus > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
} @media (max-width: 768px) {
.site-header .container {
flex-wrap: wrap;
}
.site-branding {
flex-grow: 1;
}
.header-right-wrapper {
display: contents;
}
.header-search {
order: 3;
width: 100%;
margin-top: 15px;
display: none; }
.main-navigation {
order: 2;
} .menu-toggle {
display: block;
} .main-navigation .menu-wrapper {
display: none;
} .main-navigation.toggled .menu-wrapper {
display: flex;
flex-direction: column;
justify-content: center; align-items: center; position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgb(0 0 0 / 90%); backdrop-filter: blur(10px);
padding: 20px;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
box-sizing: border-box;
}
.main-navigation.toggled .menu-wrapper {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.main-navigation.toggled .menu-wrapper ul {
flex-direction: column;
gap: 20px;
width: 100%;
text-align: center;
}
.main-navigation.toggled .menu-wrapper a {
color: white;
background: transparent;
padding: 15px;
border-radius: 8px;
font-size: 24px; font-weight: 700;
transition: background 0.3s ease;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.main-navigation.toggled .menu-wrapper a:hover {
background: rgba(255, 255, 255, 0.1);
}
.main-navigation.toggled .menu-wrapper li {
width: 100%;
}
.main-navigation.toggled .menu-item-has-children {
display: block;
}
.main-navigation.toggled .menu-item-has-children > a {
padding-right: 64px;
}
.main-navigation.toggled .submenu-toggle {
position: absolute;
top: 35px;
right: 24px;
transform: translateY(-50%);
width: 44px;
height: 44px;
color: #fff;
}
.main-navigation.toggled .menu-wrapper ul ul {
position: static;
background: rgba(255, 255, 255, 0.08);
border: none;
box-shadow: none;
margin: 8px 0 0;
opacity: 1;
visibility: visible;
transform: none;
display: none;
width: 100%;
max-width: none;
}
.main-navigation.toggled .menu-item-has-children.submenu-open > ul {
display: block;
}
.main-navigation.toggled .menu-wrapper ul ul a {
padding-left: 20px;
}
.main-navigation.toggled .menu-wrapper ul ul .submenu-toggle {
right: 16px;
} .menu-toggle.toggled .menu-toggle-icon {
background-color: transparent;
}
.menu-toggle.toggled .menu-toggle-icon::before {
transform: translateY(0) rotate(45deg);
}
.menu-toggle.toggled .menu-toggle-icon::after {
transform: translateY(0) rotate(-45deg);
} body.mobile-menu-open {
overflow: hidden;
}
} .mobile-menu-overlay {
display: none;
} .header-search .search-form {
position: relative;
}
.header-search .search-field {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 11px 40px 11px 16px;
width: 180px;
color: #fff;
font-size: 14px;
transition: all 0.3s ease;
}
.header-search .search-field::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.header-search .search-field:focus {
width: 240px;
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
outline: none;
}
.header-search .search-submit {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.header-search .search-submit:hover {
background: rgba(255, 255, 255, 0.3);
color: #fff;
transform: translateY(-50%) scale(1.05);
}
.header-search .search-icon {
width: 16px;
height: 16px;
}    .page-header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-surface);
text-align: center;
padding: var(--spacing-3xl) 0;
margin-bottom: var(--spacing-2xl);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.3;
}
.page-header .container {
position: relative;
z-index: 1;
}
.page-title {
font-size: 3.5rem;
font-weight: 800;
margin: 0 0 var(--spacing-md) 0;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-description {
font-size: 1.25rem;
margin: 0;
opacity: 0.9;
font-weight: 400;
max-width: 600px;
margin: 0 auto;
}  .site-content {
padding: var(--spacing-2xl) 0;
padding-top: calc(var(--spacing-2xl) + 80px); }
.content-wrapper {
display: grid;
grid-template-columns: 1fr 320px;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 var(--spacing-xl);
}
.site-main {
min-width: 0; }
.article-list {
display: grid;
gap: var(--spacing-2xl);
}
.article-item {
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: all var(--transition-normal) ease;
border: 1px solid var(--color-border-light);
}
.article-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--color-border);
}
.article-thumbnail {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background: var(--color-surface-alt);
}
.article-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow) ease;
}
.article-item:hover .article-thumbnail img {
transform: scale(1.05);
}
.article-content {
padding: var(--spacing-xl);
}
.article-title {
margin: 0 0 var(--spacing-md) 0;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
}
.article-title a {
color: var(--color-text-primary);
text-decoration: none;
transition: color var(--transition-fast) ease;
}
.article-title a:hover {
color: var(--color-primary);
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
font-size: 0.875rem;
color: var(--color-text-muted);
}
.article-meta span {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.article-meta a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast) ease;
}
.article-meta a:hover {
color: var(--color-primary);
}
.article-category {
background: var(--color-surface-alt);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-weight: 500;
}
.article-excerpt {
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
} @media (max-width: 768px) {
.content-wrapper {
grid-template-columns: 1fr;
padding: 0 var(--spacing-lg);
gap: var(--spacing-xl);
}
.article-list {
gap: var(--spacing-xl);
}
.article-thumbnail {
height: 200px;
}
.article-content {
padding: var(--spacing-lg);
}
.page-title {
font-size: 2.5rem;
}
.page-description {
font-size: 1.125rem;
}
}  .site-content {
max-width: none;
margin: 0;
padding: 100px 0 0; }
.home-hero-title {
font-size: 3.75rem;
}
.content-wrapper {
display: flex;
flex-wrap: wrap;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px; }
.site-main {
flex: 1;
min-width: 0;
}
.widget-area {
width: 280px;
margin-left: 40px;
flex-shrink: 0;
position: -webkit-sticky; position: sticky;
top: 80px; height: fit-content;
} .widget {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.widget-title {
font-size: 1.2em;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget ul li {
margin-bottom: 10px;
}
.widget ul li a {
text-decoration: none;
}
#wp-calendar {
width: 100%;
}
#wp-calendar #today {
font-weight: bold;
color: var(--color-primary);
}
.tagcloud a {
display: inline-block;
background: #f0f0f0;
color: #555;
padding: 5px 10px;
border-radius: 3px;
margin: 0 5px 5px 0;
text-decoration: none;
transition: all 0.2s ease;
}
.tagcloud a:hover {
background: var(--color-primary);
color: #fff;
} @media (max-width: 992px) {
.content-wrapper {
flex-direction: column;
padding: 0 15px;
}
.widget-area {
display: none; } .site-main {
width: 100%;
margin: 0;
}
} .page-header {
flex-basis: 100%;
background: #fff;
padding: 40px 20px;
margin-bottom: 20px;
text-align: center;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.page-title {
font-size: 2.5em;
margin: 0 0 10px;
color: #111;
}
.page-description {
font-size: 1.1em;
color: #777;
margin: 0;
} .single .site-main, .page .site-main {
background: #fff;
padding: 40px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.single-post-meta {
font-size: 0.9em;
color: #777;
margin: -10px 0 20px 0;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.single-post-meta .meta-item {
margin-right: 20px;
}
.single-post-meta .post-edit-link a {
color: var(--color-primary);
text-decoration: none;
}
.entry-title {
overflow-wrap: break-word;
word-break: break-word;
} .single .site-header,
.page .site-header,
.archive .site-header,
.search .site-header,
.error404 .site-header {
justify-content: space-between;
} .widget-area {
width: 320px; margin-left: var(--spacing-2xl);
flex-shrink: 0;
position: sticky;
top: 100px; height: fit-content;
}
.widget {
background: var(--color-surface);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-xl);
border: 1px solid var(--color-border-light);
transition: all var(--transition-normal) ease;
}
.widget:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.widget-title {
font-size: 1.25rem;
font-weight: 700;
margin-top: 0;
margin-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--spacing-md);
color: var(--color-text-primary);
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget ul li {
margin-bottom: var(--spacing-md);
color: var(--color-text-secondary);
}
.widget ul li a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast) ease;
}
.widget ul li a:hover {
color: var(--color-primary);
} .widget_search .search-form {
display: flex;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.widget_search .search-field {
flex-grow: 1;
border: none;
outline: none;
padding: var(--spacing-md);
background: transparent;
}
.widget_search .search-submit {
background: #000000cc;
color: white;
border: none;
padding: 0 var(--spacing-lg);
cursor: pointer;
transition: background-color var(--transition-fast) ease;
}
.widget_search .search-submit:hover {
background: var(--color-primary-light);
}
.widget select {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
padding: var(--spacing-md);
background: transparent;
font-size: 16px;
} .pagination {
margin-top: var(--spacing-2xl);
text-align: center;
}
.nav-links {
display: inline-flex;
gap: var(--spacing-sm);
align-items: center;
border-radius: var(--radius-lg);
background: var(--color-surface);
padding: var(--spacing-sm);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
}
.nav-links .page-numbers {
display: inline-block;
min-width: 44px;
height: 44px;
line-height: 44px;
padding: 0 var(--spacing-sm);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--color-text-secondary);
font-weight: 500;
transition: all var(--transition-fast) ease;
}
.nav-links .page-numbers:hover {
color: var(--color-primary);
background-color: var(--color-surface-alt);
}
.nav-links .page-numbers.current {
background-color: var(--color-primary);
color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.nav-links .dots {
color: var(--color-text-muted);
padding: 0 var(--spacing-md);
} .comments-area {
margin-top: var(--spacing-3xl);
}
.comments-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: var(--spacing-xl);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--spacing-lg);
}
.comment-list {
list-style: none;
padding: 0;
margin: 0;
}
.comment-list > .comment {
padding: var(--spacing-xl) 0;
border-bottom: 1px solid var(--color-border-light);
}
.comment-list > .comment:last-child {
border-bottom: none;
} .comment-body {
position: relative !important;
background: #ffffff !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
border: 1px solid #edf2f7 !important;
border-radius: 12px !important;
padding: 1.5rem !important;
margin-bottom: 1.5rem !important;
transition: box-shadow 0.3s ease !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.comment-body:hover {
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12) !important;
} .comment-header {
display: flex !important;
align-items: flex-start !important;
gap: 1rem !important;
margin-bottom: 1.5rem !important;
}
.comment-author-avatar {
flex-shrink: 0 !important;
}
.comment-author-avatar .avatar {
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
border: 3px solid #ffffff !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.comment-author-avatar .avatar:hover {
transform: scale(1.05) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}
.comment-author-info {
flex: 1 !important;
min-width: 0 !important;
}
.comment-meta {
margin-bottom: 0.25rem !important;
}
.comment-meta .fn {
font-weight: 700 !important;
color: #1a365d !important;
font-style: normal !important;
font-size: 1.1rem !important;
text-decoration: none !important;
}
.comment-meta .fn:hover {
color: #2c5282 !important;
transition: color 0.2s ease !important;
}
.comment-meta .says {
color: #718096 !important;
margin-left: 0.25rem !important;
font-size: 0.9rem !important;
}
.comment-date {
font-size: 0.875rem !important;
color: #718096 !important;
}
.comment-date a {
color: #718096 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.comment-date a:hover {
color: #1a365d !important;
}
.comment-meta a {
color: var(--color-text-muted);
text-decoration: none;
}
.comment-date .edit-link {
margin-left: 0.5rem !important;
font-size: 0.8rem !important;
}
.comment-date .edit-link a {
color: #1a365d !important;
opacity: 0.8 !important;
}
.comment-date .edit-link a:hover {
opacity: 1 !important;
}
.comment-content {
line-height: 1.7 !important;
color: #1a202c !important;
margin-top: 1rem !important;
}
.comment-content p {
margin-bottom: 1rem !important;
}
.comment-content p:last-child {
margin-bottom: 0 !important;
} .wp-block-comments .comment-author-avatar {
position: static !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
} .comment-list li.comment .comment-body {
margin-left: 0 !important;
padding-left: 1.5rem !important;
}
.reply {
text-align: right;
font-size: 0.875rem;
}
.comment-reply-link {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-primary);
color: var(--color-surface) !important; border-radius: var(--radius-md);
text-decoration: none;
transition: background-color var(--transition-fast) ease;
}
.comment-reply-link:hover {
background: var(--color-primary-light);
} .comment-list .children {
list-style: none;
margin-top: var(--spacing-xl);
padding-left: var(--spacing-xl);
} @media (max-width: 768px) {
.comment-body {
padding: var(--spacing-lg);
}
.comment-header {
gap: var(--spacing-sm);
}
.comment-author-avatar .avatar {
width: 40px;
height: 40px;
}
.comment-meta .fn {
font-size: 0.9rem;
}
.comment-date {
font-size: 0.8rem;
}
.comment-list .children {
padding-left: var(--spacing-md);
}
}
@media (max-width: 480px) {
.comment-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-sm);
}
.comment-author-info {
text-align: center;
}
} .comment-respond {
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-border-light);
}
.comment-form label {
display: inline-block;
margin-bottom: var(--spacing-sm);
font-weight: 500;
color: var(--color-text-secondary);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
transition: all var(--transition-fast) ease;
font-family: var(--font-sans);
font-size: 1rem;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3);
}
.comment-form .form-submit .submit {
display: inline-block;
background: var(--color-primary);
color: var(--color-surface);
padding: var(--spacing-md) var(--spacing-xl);
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color var(--transition-fast) ease;
}
.comment-form .form-submit .submit:hover {
background: var(--color-primary-light);
} .site-footer {
background-color: #000000cc;
color: var(--color-text-light);
padding: var(--spacing-3xl) 0;
margin-top: var(--spacing-2xl);
}
.site-footer a {
color: var(--color-surface);
text-decoration: none;
}
.site-footer a:hover {
color: var(--color-primary-lighter);
}
.footer-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-3xl);
}
.footer-widget .widget-title {
color: var(--color-surface);
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.footer-widget, .footer-widget ul li {
color: var(--color-text-light);
}
.site-info {
text-align: center;
padding-top: var(--spacing-xl);
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.25);
} .article-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 28px;
margin-bottom: 40px;
padding: 0 20px;
}
.post-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
} .post-card.card-hidden {
opacity: 0;
transform: translateY(40px) scale(0.95);
transition: none;
}
.post-card.card-visible {
opacity: 1;
transform: translateY(0) scale(1);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
} @keyframes cardFadeIn {
0% {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
} .post-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
} @media (prefers-reduced-motion: reduce) {
.post-card.card-hidden,
.post-card.card-visible,
.comment.comment-hidden,
.comment.comment-visible {
transition: opacity 0.3s ease;
transform: none !important;
}
.post-card:hover {
transform: none !important;
}
} .comment.comment-hidden {
opacity: 0;
transform: translateY(20px) scale(0.98);
transition: none;
}
.comment.comment-visible {
opacity: 1;
transform: translateY(0) scale(1);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-card-image-wrapper {
position: relative;
width: 100%;
height: 240px;
}
.post-card-image {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
} .post-card-meta-top {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 16px 20px;
background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
gap: 12px;
}
.post-card-meta-top a {
color: white;
} .post-card-title-overlay {
position: absolute;
bottom: -15px;
left: 15px;
right: 0;
padding: 10px 24px;
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
color: #fff;
backdrop-filter: blur(12px);
width: fit-content;
border-radius: 12px;
} .meta-left {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
opacity: 0.95;
width: -webkit-fill-available;
}
.meta-right {
display: flex;
align-items: flex-start;
gap: 16px;
font-size: 13px;
opacity: 0.95;
flex-wrap: wrap;
justify-content: flex-end;
width: -webkit-fill-available;
max-width: 60%;
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 500;
flex-wrap: wrap;
}
.meta-item::before {
content: '';
width: 12px;
height: 12px;
background-size: contain;
opacity: 0.9;
}
.meta-date::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.5 3a.5.5 0 0 1 .5.5v4l2.5 2.5a.5.5 0 0 1-.708.708L7 8.207V3.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
}
.meta-views::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E");
}
.meta-comments::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414a2 2 0 0 0-1.414.586L1.586 13A2 2 0 0 1 0 11.586V2a1 1 0 0 1 1-1h13z'/%3E%3C/svg%3E");
}
.meta-category::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z'/%3E%3Cpath d='M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z'/%3E%3C/svg%3E");
} .post-card-title-overlay h2 {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin: 0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
letter-spacing: -0.02em;
overflow-wrap: break-word;
word-break: break-word;
}
.post-card-title-overlay a {
color: #fff;
text-decoration: none;
transition: all 0.2s ease;
}
.post-card-title-overlay a:hover {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 20px rgba(255, 255, 255, 0.3);
} .post-card-content {
padding: 24px;
background: #fff;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.post-card-excerpt {
font-size: 15px;
line-height: 1.6;
color: #6b7280;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-card-excerpt > p {
margin: 0;
}
.article-item {
border-bottom: none; padding-bottom: 0;
margin-bottom: 0;
} .dynamic-bg-placeholder {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .post-card-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%,
rgba(0, 0, 0, 0.1) 100%
);
pointer-events: none;
} .gradient-1 { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-2 { background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); }
.gradient-3 { background-image: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
.gradient-4 { background-image: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.gradient-5 { background-image: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }  .single-post-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.single-post-main {
width: 100%;
}
.toc-sidebar {
position: relative;
} .toc-container {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border: 1px solid #e2e8f0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: fixed;
top: 100px;
right: 20px;
width: 320px;
max-height: calc(100vh - 120px);
display: block;
}
.toc-collapsed {
opacity: 0.6;
}
.toc-container:hover {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
opacity: 1;
} .toc-header {
background: #000000cc;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.toc-title {
color: #fff;
font-size: 16px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.toc-toggle {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: bold;
padding: 4px 8px;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
}
.toc-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
.toc-toggle-icon {
display: inline-block;
transition: transform 0.2s ease;
} .toc-nav {
padding: 20px;
max-height: calc(100vh - 200px);
overflow-y: auto;
transition: all 0.3s ease;
scrollbar-width: thin;
scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
}
.toc-nav::-webkit-scrollbar {
width: 4px;
}
.toc-nav::-webkit-scrollbar-track {
background: transparent;
}
.toc-nav::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.3);
border-radius: 2px;
}
.toc-nav::-webkit-scrollbar-thumb:hover {
background: rgba(102, 126, 234, 0.5);
}
.toc-collapsed .toc-nav {
max-height: 0;
padding: 0 20px;
overflow: hidden;
} .toc-list {
list-style: none;
margin: 0;
padding: 0;
} .toc-list .toc-list {
margin: 4px 0 0 0;
padding-left: 16px;
border-left: 2px solid rgba(102, 126, 234, 0.1);
}
.toc-item {
margin: 0 0 4px 0;
position: relative;
}
.toc-link {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
text-decoration: none;
color: #4a5568;
font-size: 14px;
line-height: 1.4;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.toc-link:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border-left-color: #667eea;
transform: translateX(2px);
}
.toc-link.active {
background: rgba(102, 126, 234, 0.15);
color: #667eea;
border-left-color: #667eea;
font-weight: 600;
}
.toc-number {
display: none; }
.toc-text {
flex: 1;
} .toc-container {
counter-reset: h1-counter;
}
.toc-level-1 {
counter-increment: h1-counter;
counter-reset: h2-counter;
}
.toc-level-2 {
counter-increment: h2-counter;
counter-reset: h3-counter;
}
.toc-level-3 {
counter-increment: h3-counter;
counter-reset: h4-counter;
}
.toc-level-4 {
counter-increment: h4-counter;
counter-reset: h5-counter;
}
.toc-level-5 {
counter-increment: h5-counter;
counter-reset: h6-counter;
}
.toc-level-6 {
counter-increment: h6-counter;
} .toc-level-1 > .toc-link::before {
content: counter(h1-counter) ". ";
color: #667eea;
font-weight: 700;
font-size: 14px;
}
.toc-level-2 > .toc-link::before {
content: counter(h1-counter) "." counter(h2-counter) " ";
font-weight: 600;
font-size: 13px;
}
.toc-level-3 > .toc-link::before {
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) " ";
color: #8892b0;
font-weight: 500;
font-size: 12px;
}
.toc-level-4 > .toc-link::before {
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " ";
color: #a0aec0;
font-weight: 500;
font-size: 11px;
}
.toc-level-5 > .toc-link::before,
.toc-level-6 > .toc-link::before {
content: "• ";
color: #cbd5e0;
font-weight: 400;
font-size: 10px;
}
.toc-level-1 .toc-link {
font-weight: 600;
font-size: 15px;
color: #2d3748;
}
.toc-level-2 .toc-link {
font-size: 14px;
color: #4a5568;
}
.toc-level-3 .toc-link {
font-size: 13px;
color: #718096;
}
.toc-level-4 .toc-link,
.toc-level-5 .toc-link,
.toc-level-6 .toc-link {
font-size: 12px;
color: #a0aec0;
} .entry-content {
font-size: 16px;
line-height: 1.7;
color: #2d3748;
margin-top: 30px;
overflow: auto;
} .entry-content a,
.comment-content a,
.widget_text a,
.textwidget a {
text-decoration: underline;
color: var(--color-primary);
border-bottom: none;
}
.entry-content a:hover,
.comment-content a:hover,
.widget_text a:hover,
.textwidget a:hover {
text-decoration: underline;
opacity: 0.8;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
margin-top: 2em;
margin-bottom: 0.8em;
color: #1a202c;
font-weight: 600;
line-height: 1.3;
scroll-margin-top: 100px; }
.entry-content h1 { font-size: 2.2em; }
.entry-content h2 { font-size: 1.8em; }
.entry-content h3 { font-size: 1.5em; }
.entry-content h4 { font-size: 1.3em; }
.entry-content h5 { font-size: 1.1em; }
.entry-content h6 { font-size: 1em; }
.entry-content p {
margin-bottom: 1.2em;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} .entry-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
}
.entry-title {
font-size: 2.5em;
font-weight: 700;
color: #1a202c;
margin-bottom: 16px;
line-height: 1.2;
}
.single-post-meta {
display: flex;
justify-content: center;
gap: 20px;
font-size: 14px;
color: #718096;
}
.single-post-meta .meta-item {
display: flex;
align-items: center;
gap: 4px;
} @media (max-width: 1200px) {
.single-post-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.toc-sidebar {
width: 100%;
order: -1; }
.toc-container {
position: relative !important;
top: auto !important;
right: auto !important;
width: 100% !important;
max-height: none !important;
margin-bottom: 20px;
}
.toc-nav {
max-height: 300px;
}
}
@media (max-width: 768px) {
.single-post-wrapper {
padding: 0 16px !important;
}
.toc-container {
border-radius: 12px;
}
.toc-header {
padding: 12px 16px;
}
.toc-title {
font-size: 15px;
}
.toc-nav {
padding: 16px;
max-height: 250px;
}
.toc-link {
padding: 6px 10px;
font-size: 13px;
}
.toc-level-1 .toc-link {
font-size: 14px;
}
.toc-level-3 .toc-link,
.toc-level-4 .toc-link,
.toc-level-5 .toc-link,
.toc-level-6 .toc-link {
font-size: 12px;
}
.entry-title {
font-size: 2em;
}
.single-post-meta {
flex-direction: column;
gap: 8px;
align-items: center;
}
.entry-content {
font-size: 15px;
}
.entry-content h1 { font-size: 1.8em; }
.entry-content h2 { font-size: 1.5em; }
.entry-content h3 { font-size: 1.3em; }
.entry-content h4 { font-size: 1.2em; }
} @media (max-width: 768px) {
.article-list {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 16px;
}
.post-card-image-wrapper {
height: 200px;
}
.post-card-meta-top {
padding: 12px 16px;
align-items: flex-start;
gap: 8px;
}
.meta-right {
gap: 12px;
}
.meta-item {
font-size: 12px;
padding: 3px 6px;
}
.post-card-title-overlay {
padding: 20px 16px 16px;
}
.post-card-title-overlay h2 {
font-size: 18px;
}
.post-card-content {
padding: 20px;
}
.post-card-excerpt {
font-size: 14px;
-webkit-line-clamp: 2;
}
}
@media (max-width: 480px) {
.article-list {
grid-template-columns: 1fr;
gap: 16px;
padding: 0 12px;
}
.post-card {
border-radius: 16px;
}
.post-card-meta-top {
padding: 10px 14px;
}
.meta-item {
font-size: 11px;
padding: 2px 5px;
}
.post-card-title-overlay {
padding: 16px 14px 14px;
}
.post-card-title-overlay h2 {
font-size: 16px;
}
.post-card-content {
padding: 16px;
}
} .wp-caption {
}
.wp-caption-text {
}
.sticky {
}
.gallery-caption {
}
.bypostauthor {
}
.alignright {
float: right;
margin: 0 0 1em 1em;
}
.alignleft {
float: left;
margin: 0 1em 1em 0;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}