:root {
--msawrp-black: #0d1117;
--msawrp-dark: #121826;
--msawrp-slate: #1d2433;
--msawrp-card: #ffffff;
--msawrp-soft: #f4f7fb;
--msawrp-line: #e9edf4;
--msawrp-text: #1b2431;
--msawrp-muted: #64748b;
--msawrp-red: #d91f26;
--msawrp-red-dark: #b8151d;
--msawrp-gold: #f7c948;
--msawrp-blue: #132d5b;
--msawrp-blue-soft: #1f5eff;
--msawrp-shadow: 0 18px 48px rgba(17, 24, 39, 0.12);
--msawrp-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08);
--msawrp-radius: 18px;
--msawrp-radius-sm: 12px;
--container: 1180px;
--msawrp-header-bg: #ffffff;
}
body.msawrp-layout-wide .container {
width: min(var(--container), calc(100% - 32px));
}
body.msawrp-layout-boxed .container {
width: min(1200px, calc(100% - 40px));
}
body.msawrp-layout-fluid .container {
width: min(100% - 24px, 1600px);
}
body.msawrp-dark-mode {
background: #0f172a;
}
body.msawrp-dark-mode .site-header,
body.msawrp-dark-mode .main-nav,
body.msawrp-dark-mode .widget,
body.msawrp-dark-mode .single-article,
body.msawrp-dark-mode .post-card,
body.msawrp-dark-mode .blog-post,
body.msawrp-dark-mode .story-card,
body.msawrp-dark-mode .category-card,
body.msawrp-dark-mode .related-card,
body.msawrp-dark-mode .page-shell {
background: var(--msawrp-card);
color: var(--msawrp-text);
}
body.msawrp-dark-mode .site-footer {
background: #0b1220;
}
body.msawrp-footer-modern .site-footer {
background: linear-gradient(180deg, #0f172a 0%, #101827 100%);
}
body.msawrp-footer-minimal .site-footer {
background: #111827;
border-top: 1px solid var(--msawrp-line);
}
body.msawrp-card-minimal .post-card,
body.msawrp-card-minimal .story-card,
body.msawrp-card-minimal .category-card,
body.msawrp-card-minimal .blog-post,
body.msawrp-card-minimal .widget {
border-radius: 12px;
box-shadow: none;
}
body.msawrp-card-soft .post-card,
body.msawrp-card-soft .story-card,
body.msawrp-card-soft .category-card,
body.msawrp-card-soft .blog-post,
body.msawrp-card-soft .widget {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(15, 23, 42, 0.05);
}
body.msawrp-home-compact .post-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.msawrp-home-magazine .post-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.msawrp-sidebar-compact .sidebar,
body.msawrp-sidebar-compact .article-sidebar {
gap: 16px;
}
body.msawrp-sidebar-featured .widget {
background: linear-gradient(180deg, rgba(217,31,38,0.04), rgba(19,45,91,0.02));
}
body.msawrp-single-sidebar-left .article-layout {
grid-template-columns: 320px minmax(0, 1.7fr);
}
body.msawrp-single-sidebar-left .article-sidebar {
order: -1;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--msawrp-font-family, "Inter"), "Segoe UI", sans-serif;
background: var(--msawrp-soft);
color: var(--msawrp-text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
figure {
margin: 0;
}
p {
margin: 0 0 1rem;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.8rem;
line-height: 1.15;
letter-spacing: -0.04em;
font-weight: 800;
font-family: var(--msawrp-heading-font, "Inter"), "Segoe UI", sans-serif;
}
.container {
width: min(var(--container), calc(100% - 32px));
margin: 0 auto;
}
.section {
padding: 70px 0;
}
.section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(217, 31, 38, 0.08);
color: var(--msawrp-red);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 11px;
font-weight: 700;
}
.kicker::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--msawrp-red);
display: inline-block;
}
.site-header {
background: var(--msawrp-header-bg, #ffffff);
border-bottom: 1px solid var(--msawrp-line);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
.topbar {
background: linear-gradient(90deg, var(--msawrp-dark) 0%, #1a2238 100%);
color: rgba(255,255,255,0.85);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 48px;
gap: 20px;
}
.topbar-date {
flex-shrink: 0;
}
.topbar-center {
flex: 1;
display: flex;
justify-content: center;
}
.topbar-links {
display: flex;
align-items: center;
gap: 22px;
}
.topbar-links a {
color: rgba(255,255,255,0.75);
transition: color 0.2s ease;
position: relative;
}
.topbar-links a:hover {
color: #fff;
}
.topbar-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--msawrp-red);
transition: width 0.3s ease;
}
.topbar-links a:hover::after {
width: 100%;
}
.topbar-social {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.topbar-right-group {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.language-switcher {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
}
.lang-btn {
display: inline-flex;
align-items: center;
gap: 4px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
padding: 2px 4px;
border-radius: 4px;
}
.lang-btn:hover,
.lang-btn.is-active {
color: #ffffff;
}
.lang-btn.is-active {
background: var(--msawrp-red);
padding: 2px 8px;
border-radius: 999px;
color: #ffffff;
font-weight: 800;
}
.lang-divider {
color: rgba(255, 255, 255, 0.3);
font-size: 0.7rem;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
transition: all 0.25s ease;
}
.social-link:hover {
background: var(--msawrp-red);
color: #fff;
transform: translateY(-2px);
}
.main-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: var(--msawrp-header-height, 88px);
}
.brand-block {
display: flex;
align-items: center;
gap: 18px;
}
.custom-logo-link {
display: inline-flex;
align-items: center;
}
.custom-logo {
max-height: 54px;
width: auto;
}
.site-title-wrap {
display: flex;
flex-direction: column;
}
.site-title-wrap a {
font-size: 1.65rem;
font-weight: 900;
letter-spacing: -0.06em;
color: var(--msawrp-dark);
}
.site-title-wrap p {
font-size: 0.72rem;
color: var(--msawrp-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
border: 0;
cursor: pointer;
transition: 0.25s ease;
font: inherit;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.02em;
}
.button-primary {
background: linear-gradient(135deg, var(--msawrp-red) 0%, #f66547 100%);
color: #fff;
box-shadow: var(--msawrp-shadow-soft);
}
.button-primary:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, var(--msawrp-red-dark) 0%, var(--msawrp-red) 100%);
}
.button-secondary {
background: var(--msawrp-dark);
color: #fff;
}
.button-block {
width: 100%;
justify-content: center;
}
.menu-toggle {
display: none;
background: var(--msawrp-soft);
color: var(--msawrp-dark);
min-height: 42px;
padding: 0 16px;
border-radius: 999px;
font-weight: 700;
}
.main-nav {
position: relative;
background: var(--msawrp-header-bg, #ffffff);
border-top: 1px solid var(--msawrp-line);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}
.nav-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 64px;
}
.main-navigation ul.nav-menu,
.main-navigation > ul,
.main-navigation > div > ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation li {
position: relative;
list-style: none;
}
.main-navigation a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--msawrp-text);
border-radius: 8px;
transition: all 0.2s ease;
}
.main-navigation a:hover,
.main-navigation li:hover > a,
.main-navigation li.focus > a,
.main-navigation .current-menu-item > a {
background: rgba(217, 31, 38, 0.08);
color: var(--msawrp-red);
}
.menu-arrow {
transition: transform 0.25s ease;
flex-shrink: 0;
}
.main-navigation li:hover > a .menu-arrow,
.main-navigation li.focus > a .menu-arrow,
.main-navigation li.is-submenu-open > a .menu-arrow {
transform: rotate(180deg);
} .main-navigation .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--msawrp-card, #ffffff);
border: 1px solid var(--msawrp-line, rgba(15, 23, 42, 0.08));
border-top: 3px solid var(--msawrp-red, #d91f26);
border-radius: 0 0 12px 12px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
padding: 8px;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
pointer-events: none;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li.focus > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.is-submenu-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.main-navigation .sub-menu li {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
.main-navigation .sub-menu a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 14px;
font-size: 0.84rem;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: var(--msawrp-text);
border-radius: 8px;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu li:hover > a {
background: rgba(217, 31, 38, 0.08);
color: var(--msawrp-red);
transform: translateX(4px);
} .main-navigation .sub-menu .sub-menu {
top: -8px;
left: 100%;
margin-left: 4px;
border-top-left-radius: 12px;
} .menu-item-mega {
position: static !important;
}
.mega-menu-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background: var(--msawrp-card, #ffffff);
border-top: 3px solid var(--msawrp-red, #d91f26);
border-bottom: 1px solid var(--msawrp-line, rgba(15, 23, 42, 0.08));
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
padding: 24px 0;
pointer-events: none;
}
.main-navigation li:hover > .mega-menu-panel,
.main-navigation li.focus > .mega-menu-panel,
.main-navigation li:focus-within > .mega-menu-panel,
.main-navigation li.is-submenu-open > .mega-menu-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mega-menu-inner {
width: min(var(--container), calc(100% - 32px));
margin: 0 auto;
}
.mega-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--msawrp-line);
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--msawrp-muted);
}
.mega-menu-header a {
color: var(--msawrp-red);
padding: 0;
text-transform: none;
font-weight: 700;
}
.mega-menu-header a:hover {
background: none;
opacity: 0.8;
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.mega-post-card {
display: flex;
gap: 14px;
align-items: center;
background: var(--msawrp-soft);
border-radius: 12px;
padding: 10px;
transition: all 0.25s ease;
}
.mega-post-card:hover {
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
.mega-post-thumb {
width: 90px;
height: 65px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.mega-post-thumb img,
.mega-post-thumb .msawrp-placeholder-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.mega-post-info {
flex: 1;
}
.mega-post-date {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: var(--msawrp-muted);
letter-spacing: 0.05em;
}
.mega-post-info h4 {
font-size: 0.88rem;
margin: 4px 0 0;
line-height: 1.3;
font-weight: 600;
}
.mega-post-info h4 a {
color: var(--msawrp-text);
padding: 0;
text-transform: none;
letter-spacing: normal;
font-size: 0.88rem;
font-weight: 600;
}
.mega-post-info h4 a:hover {
background: none;
color: var(--msawrp-red);
}
.nav-tools {
display: flex;
align-items: center;
gap: 12px;
}
.search-form {
position: relative;
}
.search-form .search-field {
width: 240px;
min-height: 42px;
padding: 0 42px 0 16px;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
background: var(--msawrp-soft);
color: var(--msawrp-text);
outline: none;
}
.search-form .search-submit {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--msawrp-red);
color: #fff;
border: none;
} .news-ticker-container {
padding-top: 24px;
padding-bottom: 0px;
}
.news-ticker {
display: flex;
align-items: center;
background: var(--msawrp-card, #ffffff);
border: 1px solid var(--msawrp-line);
border-radius: 999px;
padding: 6px 18px 6px 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.ticker-label {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--msawrp-red) 0%, #b8151d 100%);
color: #ffffff;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 6px 14px;
border-radius: 999px;
flex-shrink: 0;
margin-right: 16px;
}
.ticker-label::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
animation: pulse-dot 1.4s infinite ease-in-out;
}
@keyframes pulse-dot {
0% { transform: scale(0.8); opacity: 0.7; }
50% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(0.8); opacity: 0.7; }
}
.ticker-items {
display: flex;
align-items: center;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
white-space: nowrap;
font-size: 0.9rem;
font-weight: 600;
color: var(--msawrp-text);
}
.ticker-items::-webkit-scrollbar {
display: none;
}
.ticker-items span {
display: inline-flex;
align-items: center;
}
.ticker-items span::after {
content: "•";
margin-left: 24px;
color: var(--msawrp-muted);
opacity: 0.5;
}
.ticker-items span:last-child::after {
content: "";
margin-left: 0;
}
.ticker-items a {
color: var(--msawrp-text);
transition: color 0.2s ease;
}
.ticker-items a:hover {
color: var(--msawrp-red);
}
.hero-section {
padding-top: 24px;
padding-bottom: 50px;
}
.hero-section-modern {
padding-top: 24px;
padding-bottom: 60px;
}
.hero-wrapper {
margin-bottom: 32px;
}
.hero-feature-modern {
position: relative;
background: var(--msawrp-dark);
border: none;
border-radius: var(--msawrp-radius);
overflow: hidden;
box-shadow: 0 24px 64px rgba(17, 24, 39, 0.16);
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-feature-modern:hover {
box-shadow: 0 32px 96px rgba(217, 31, 38, 0.14);
transform: translateY(-4px);
}
.hero-image-wrapper {
position: relative;
overflow: hidden;
height: 520px;
background: #0f172a;
}
.hero-image-link {
display: block;
width: 100%;
height: 100%;
}
.hero-image-wrapper img,
.hero-image-wrapper .msawrp-placeholder-thumb {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-feature-modern:hover .hero-image-wrapper img,
.hero-feature-modern:hover .hero-image-wrapper .msawrp-placeholder-thumb {
transform: scale(1.03);
}
.hero-overlay-modern {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(13, 17, 23, 0.05) 0%, rgba(13, 17, 23, 0.75) 45%, rgba(13, 17, 23, 0.95) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
color: #fff;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
pointer-events: auto;
}
.hero-feature-modern .post-meta {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.85);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 14px;
}
.hero-feature-modern h2 {
font-size: clamp(1.8rem, 3.8vw, 3rem);
letter-spacing: -0.05em;
margin: 0 0 16px;
line-height: 1.2;
font-weight: 800;
}
.hero-feature-modern h2 a {
color: #fff;
transition: color 0.3s ease;
}
.hero-feature-modern h2 a:hover {
color: var(--msawrp-gold);
}
.hero-excerpt {
font-size: 1.02rem;
color: rgba(255,255,255,0.88);
margin: 0 0 24px;
line-height: 1.6;
}
.hero-cta {
align-self: flex-start;
min-height: 48px;
padding: 0 28px;
}
.hero-grid-secondary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.story-card-modern {
background: var(--msawrp-card, #fff);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
overflow: hidden;
box-shadow: var(--msawrp-shadow-soft);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
height: 100%;
}
.story-card-modern:hover {
border-color: var(--msawrp-red);
box-shadow: 0 16px 48px rgba(217, 31, 38, 0.12);
transform: translateY(-2px);
}
.story-card-modern.story-card-featured {
grid-column: span 1;
}
.story-card-image {
display: block;
overflow: hidden;
height: 190px;
background: var(--msawrp-soft);
}
.story-card-image img,
.story-card-image .msawrp-placeholder-thumb {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.story-card-modern:hover .story-card-image img,
.story-card-modern:hover .story-card-image .msawrp-placeholder-thumb {
transform: scale(1.04);
}
.story-content-modern {
padding: 18px 16px;
display: flex;
flex-direction: column;
flex: 1;
} .msawrp-placeholder-thumb {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #132d5b 0%, #1b2431 50%, #d91f26 100%);
overflow: hidden;
}
.msawrp-placeholder-svg {
width: 100%;
height: 100%;
object-fit: cover;
}
.story-content-modern .post-meta {
display: flex;
gap: 8px;
color: var(--msawrp-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.story-content-modern h3 {
font-size: clamp(1rem, 2vw, 1.3rem);
margin: 0;
line-height: 1.35;
}
.story-content-modern h3 a {
color: var(--msawrp-text);
transition: color 0.2s ease;
}
.story-content-modern h3 a:hover {
color: var(--msawrp-red);
}
.story-card {
position: relative;
overflow: hidden;
min-height: 266px;
}
.story-card img {
width: 100%;
height: 100%;
min-height: 266px;
object-fit: cover;
}
.story-content {
position: absolute;
inset: auto 0 0 0;
padding: 18px 20px 20px;
background: linear-gradient(180deg, transparent, rgba(13, 17, 23, 0.82));
color: #fff;
}
.story-content h3 {
font-size: 1.45rem;
margin: 8px 0 0;
}
.layout-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) 320px;
gap: 28px;
align-items: start;
}
.content-stack {
display: grid;
gap: 28px;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.pagination-wrapper {
grid-column: 1 / -1;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--msawrp-line);
}
.post-card {
overflow: hidden;
}
.post-card .thumb {
position: relative;
overflow: hidden;
max-height: 220px;
}
.post-card img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.45s ease;
}
.post-card:hover img {
transform: scale(1.03);
}
.post-body {
padding: 18px 18px 20px;
}
.post-body .meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
color: var(--msawrp-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.post-body h3 {
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
margin-top: 10px;
margin-bottom: 0;
}
.post-body p {
color: var(--msawrp-muted);
margin-top: 12px;
margin-bottom: 0;
}
.story-cta,
.post-card-cta,
.category-card-cta,
.related-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding: 8px 18px;
font-size: 0.82rem;
font-weight: 700;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
align-self: flex-start;
}
.story-cta:hover,
.post-card-cta:hover,
.category-card-cta:hover,
.related-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(217, 31, 38, 0.25);
}
.card-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.category-panel {
padding: 24px;
}
.category-panel h3 {
font-size: 1.5rem;
}
.category-card {
overflow: hidden;
}
.category-card img {
height: 200px;
width: 100%;
object-fit: cover;
}
.category-card .content {
padding: 18px;
}
.category-card h4 {
font-size: 1.25rem;
margin-bottom: 0;
}
.sidebar {
display: grid;
gap: 24px;
}
.sidebar-modern {
gap: 20px;
}
.widget {
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
box-shadow: var(--msawrp-shadow-soft);
padding: 22px 20px;
transition: all 0.3s ease;
}
.widget:hover {
border-color: rgba(217, 31, 38, 0.2);
box-shadow: 0 12px 32px rgba(217, 31, 38, 0.08);
}
.widget-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.widget-title {
margin: 0;
font-size: 1.05rem;
letter-spacing: -0.04em;
text-transform: uppercase;
font-weight: 800;
color: var(--msawrp-dark);
}
.widget-icon {
font-size: 1.5rem;
}
.widget-popular {
background: linear-gradient(135deg, rgba(217, 31, 38, 0.04) 0%, rgba(19, 45, 91, 0.02) 100%);
border: 1px solid rgba(217, 31, 38, 0.1);
}
.widget-list-numbered {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.widget-list-numbered li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--msawrp-line);
margin: 0;
}
.widget-list-numbered li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.list-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--msawrp-red) 0%, #f66547 100%);
color: #fff;
border-radius: 6px;
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
.widget-list-numbered a {
color: var(--msawrp-text);
font-weight: 600;
line-height: 1.4;
transition: color 0.2s ease;
flex: 1;
}
.widget-list-numbered a:hover {
color: var(--msawrp-red);
}
.widget-categories {
background: linear-gradient(135deg, rgba(19, 45, 91, 0.04) 0%, rgba(217, 31, 38, 0.02) 100%);
border: 1px solid rgba(19, 45, 91, 0.1);
}
.widget-list-tags {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.widget-list-tags li {
margin: 0;
}
.widget-list-tags a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
color: var(--msawrp-text);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: all 0.2s ease;
white-space: nowrap;
}
.widget-list-tags a:hover {
background: var(--msawrp-red);
color: #fff;
border-color: var(--msawrp-red);
transform: translateY(-1px);
}
.widget-newsletter-modern {
background: linear-gradient(135deg, rgba(217, 31, 38, 0.06), rgba(19, 45, 91, 0.04));
border: 1px solid rgba(217, 31, 38, 0.15);
}
.widget-description {
font-size: 0.9rem;
color: var(--msawrp-muted);
line-height: 1.5;
margin: 0 0 14px;
}
.newsletter-form {
display: grid;
gap: 12px;
margin-top: 18px;
}
.newsletter-form input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid var(--msawrp-line);
border-radius: 12px;
background: #fff;
color: var(--msawrp-text);
font: inherit;
}
.newsletter-form button {
width: 100%;
}
.newsletter-box {
display: grid;
gap: 12px;
margin-top: 18px;
padding: 18px 16px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
background: rgba(255,255,255,0.02);
}
.newsletter-box p {
margin: 0;
color: rgba(255,255,255,0.8);
}
.footer-newsletter {
margin-top: 0;
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget li {
padding: 12px 0;
border-bottom: 1px solid var(--msawrp-line);
}
.widget li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.widget a {
color: var(--msawrp-text);
font-weight: 600;
}
.news-ticker {
display: flex;
align-items: center;
overflow: hidden;
padding: 14px 18px;
gap: 16px;
color: var(--msawrp-dark);
font-weight: 600;
}
.ticker-label {
flex-shrink: 0;
background: var(--msawrp-red);
color: #fff;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 999px;
}
.ticker-items {
display: flex;
align-items: center;
gap: 20px;
white-space: nowrap;
overflow: hidden;
color: var(--msawrp-muted);
}
.site-footer {
background: var(--msawrp-dark);
color: rgba(255,255,255,0.8);
margin-top: 60px;
}
.footer-top {
padding: 62px 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 0.5fr 0.5fr 0.7fr;
gap: 28px;
}
.footer-brand {
max-width: 320px;
}
.footer-brand .site-title-wrap a {
color: #fff;
}
.footer-brand p {
color: rgba(255,255,255,0.7);
}
.footer-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.footer-list a {
color: rgba(255,255,255,0.7);
}
.footer-list a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 18px 0;
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1.7fr) 320px;
gap: 28px;
padding-top: 36px;
}
.single-article,
.page-shell {
overflow: hidden;
padding: 28px;
}
.featured-image-wrap {
margin: -28px -28px 24px;
}
.featured-image-wrap img {
width: 100%;
height: 420px;
object-fit: cover;
}
.archive-banner {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 24px;
align-items: end;
padding: 28px 30px;
background: linear-gradient(135deg, rgba(217, 31, 38, 0.08), rgba(19, 45, 91, 0.04));
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
margin-bottom: 28px;
}
.archive-banner h1 {
font-size: clamp(2rem, 2.5vw, 3.4rem);
margin: 14px 0 0;
}
.archive-banner p {
margin-top: 12px;
color: var(--msawrp-muted);
}
.archive-categories {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.archive-categories li {
list-style: none;
}
.archive-categories a {
display: inline-flex;
align-items: center;
padding: 9px 12px;
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.article-header {
margin-bottom: 22px;
}
.article-kicker {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.article-kicker .post-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.article-kicker a,
.article-kicker .tag {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: rgba(217, 31, 38, 0.08);
color: var(--msawrp-red);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
color: var(--msawrp-muted);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.article-summary {
margin: 18px 0 22px;
padding: 18px 20px;
background: var(--msawrp-soft);
border-left: 4px solid var(--msawrp-red);
border-radius: 0 16px 16px 0;
color: var(--msawrp-dark);
font-size: 1.02rem;
font-weight: 600;
}
.article-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.article-action,
.font-tools button,
.mini-tool {
border: 1px solid var(--msawrp-line);
background: #fff;
color: var(--msawrp-text);
border-radius: 999px;
padding: 10px 16px;
font: inherit;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}
.article-action:hover,
.font-tools button:hover,
.mini-tool:hover {
border-color: var(--msawrp-red);
color: var(--msawrp-red);
}
.article-action {
display: inline-flex;
align-items: center;
gap: 8px;
}
.article-action.is-liked {
background: var(--msawrp-red);
border-color: var(--msawrp-red);
color: #fff;
}
.font-tools {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
padding: 5px;
background: var(--msawrp-soft);
}
.font-tools button.is-active {
background: var(--msawrp-red);
color: #fff;
border-color: var(--msawrp-red);
}
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(15, 23, 42, 0.08);
z-index: 1200;
}
.reading-progress-bar {
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, var(--msawrp-red), #ff8f6b);
transition: width 0.15s ease-out;
}
.author-box {
display: flex;
align-items: center;
gap: 18px;
margin: 28px 0 20px;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(19, 45, 91, 0.04), rgba(217, 31, 38, 0.04));
border: 1px solid var(--msawrp-line);
border-radius: 18px;
}
.author-avatar {
flex-shrink: 0;
}
.author-avatar .avatar {
display: block;
border-radius: 50%;
border: 3px solid rgba(217, 31, 38, 0.18);
}
.author-info {
flex: 1;
min-width: 0;
}
.author-label {
display: inline-block;
margin-bottom: 6px;
color: var(--msawrp-muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.author-info h3 {
margin: 0 0 6px;
font-size: clamp(1.2rem, 2vw, 1.7rem);
}
.author-info p {
margin: 0;
color: var(--msawrp-muted);
line-height: 1.6;
}
.share-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 24px 0 18px;
padding: 14px 16px;
border: 1px solid var(--msawrp-line);
border-radius: 16px;
background: var(--msawrp-soft);
color: var(--msawrp-dark);
font-weight: 700;
}
.share-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--msawrp-line);
background: #fff;
color: var(--msawrp-text);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.share-link.x { color: #111; }
.share-link.fb { color: #1877f2; }
.share-link.wa { color: #3bbf64; }
.share-link.copy { color: var(--msawrp-red); }
.related-posts {
margin-top: 34px;
}
.related-header {
margin-bottom: 18px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.related-card {
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--msawrp-shadow-soft);
}
.related-card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.related-content {
padding: 16px 18px 18px;
}
.related-meta {
display: block;
color: var(--msawrp-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.related-content h4 {
font-size: 1.08rem;
margin: 0;
}
.single-post-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.post-nav {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: 16px;
color: var(--msawrp-text);
}
.post-nav span {
color: var(--msawrp-muted);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
}
.post-nav strong {
font-size: 1rem;
line-height: 1.4;
}
.post-nav.next {
text-align: right;
}
.comments-panel {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--msawrp-line);
}
.widget-article-tools {
background: linear-gradient(180deg, rgba(217, 31, 38, 0.05), rgba(19, 45, 91, 0.02));
}
.mini-tools {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.mini-tool {
width: 100%;
text-align: left;
border-radius: 12px;
}
.sidebar-featured {
background: linear-gradient(180deg, rgba(19, 45, 91, 0.04), rgba(217, 31, 38, 0.02));
}
.sidebar-featured-list {
display: grid;
gap: 18px;
}
.sidebar-featured-item {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
.sidebar-featured-item img {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 12px;
}
.sidebar-featured-content {
display: grid;
gap: 6px;
}
.sidebar-featured-content span {
color: var(--msawrp-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sidebar-featured-content h4 {
margin: 0;
line-height: 1.35;
font-size: 1rem;
}
.back-to-top {
position: fixed;
right: 22px;
bottom: 22px;
width: 52px;
height: 52px;
border: none;
border-radius: 50%;
background: var(--msawrp-red);
color: #fff;
box-shadow: var(--msawrp-shadow-soft);
cursor: pointer;
display: none;
font-size: 1.4rem;
z-index: 999;
}
.back-to-top.is-visible {
display: inline-flex;
align-items: center;
justify-content: center;
}
.entry-content {
font-size: 1.05rem;
color: var(--msawrp-text);
line-height: 1.9;
}
.js-article-content {
transition: font-size 0.2s ease;
}
.entry-content > * + * {
margin-top: 1.25rem;
}
.entry-content h2,
.entry-content h3 {
margin-top: 2rem;
}
.entry-content blockquote {
margin: 30px 0;
padding: 18px 22px;
border-left: 4px solid var(--msawrp-red);
background: var(--msawrp-soft);
border-radius: 0 12px 12px 0;
font-size: 1.15rem;
color: var(--msawrp-dark);
}
.entry-content a {
color: var(--msawrp-blue-soft);
}
.entry-footer {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid var(--msawrp-line);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: var(--msawrp-soft);
color: var(--msawrp-dark);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.comment-list {
list-style: none;
margin: 24px 0 0;
padding: 0;
}
.comment-list .comment {
padding: 22px 20px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: 16px;
margin-bottom: 18px;
}
.comment-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
font-size: 0.85rem;
color: var(--msawrp-muted);
}
.comment-author {
font-weight: 800;
color: var(--msawrp-dark);
}
.comment-reply-link {
color: var(--msawrp-red);
font-weight: 700;
}
.comment-form {
margin-top: 28px;
}
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
display: grid;
gap: 8px;
margin-bottom: 16px;
}
.comment-form textarea,
.comment-form input {
width: 100%;
border: 1px solid var(--msawrp-line);
border-radius: 12px;
padding: 12px 14px;
font: inherit;
background: #fff;
color: var(--msawrp-text);
}
.pagination,
.page-numbers {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 60px 0 0;
}
.page-numbers {
gap: 12px;
}
.page-numbers a,
.page-numbers .current,
.page-numbers .dots {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
min-height: 52px;
padding: 0 16px;
border-radius: 14px;
background: #fff;
border: 2px solid var(--msawrp-line);
color: var(--msawrp-text);
font-weight: 800;
font-size: 1rem;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
text-decoration: none;
}
.page-numbers a:hover {
background: var(--msawrp-soft);
border-color: var(--msawrp-red);
color: var(--msawrp-red);
transform: translateY(-3px) scale(1.08);
box-shadow: 0 10px 24px rgba(217, 31, 38, 0.16);
}
.page-numbers .current {
background: linear-gradient(135deg, var(--msawrp-red), #ff6b4a);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 28px rgba(217, 31, 38, 0.24);
font-weight: 900;
transform: scale(1.04);
}
.page-numbers .dots {
border: none;
background: transparent;
color: var(--msawrp-muted);
cursor: default;
padding: 0 4px;
min-width: auto;
min-height: auto;
font-weight: 600;
}
.page-numbers.prev,
.page-numbers.next {
gap: 6px;
min-width: auto;
padding: 0 20px;
background: linear-gradient(135deg, var(--msawrp-soft), rgba(244, 247, 251, 0.8));
border: 2px solid var(--msawrp-line);
color: var(--msawrp-text);
font-weight: 900;
}
.page-numbers.prev:hover,
.page-numbers.next:hover {
background: linear-gradient(135deg, var(--msawrp-red), #ff6b4a);
color: #fff;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(217, 31, 38, 0.24);
}
.page-numbers.prev a,
.page-numbers.next a {
border: none;
background: transparent;
min-width: auto;
min-height: auto;
padding: 0;
color: inherit;
font-weight: 900;
}
.page-numbers.prev a::before {
content: "←";
font-weight: 900;
margin-right: 8px;
font-size: 1.1rem;
}
.page-numbers.next a::after {
content: "→";
font-weight: 900;
margin-left: 8px;
font-size: 1.1rem;
}
.browse-all-section {
background: linear-gradient(135deg, rgba(217, 31, 38, 0.04), rgba(19, 45, 91, 0.02));
border-top: 1px solid var(--msawrp-line);
border-bottom: 1px solid var(--msawrp-line);
padding: 60px 0;
}
.browse-all-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 40px 32px;
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.browse-all-content {
flex: 1;
min-width: 0;
}
.browse-all-content .kicker {
margin-bottom: 8px;
display: inline-block;
}
.browse-all-content h2 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
margin: 0 0 12px;
}
.browse-all-content p {
color: var(--msawrp-muted);
font-size: 1.05rem;
margin: 0;
line-height: 1.6;
}
.browse-all-box .button {
flex-shrink: 0;
white-space: nowrap;
}
.alignleft {
float: left;
margin: 0 20px 20px 0;
}
.alignright {
float: right;
margin: 0 0 20px 20px;
}
.aligncenter {
display: block;
margin: 0 auto 20px;
}
.wp-caption {
max-width: 100%;
}
.wp-caption-text,
.gallery-caption {
color: var(--msawrp-muted);
font-size: 0.86rem;
}
.posts-list {
display: grid;
gap: 24px;
}
.archive-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.archive-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
overflow: hidden;
box-shadow: var(--msawrp-shadow-soft);
transition: all 0.3s ease;
height: 100%;
}
.archive-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
border-color: rgba(217, 31, 38, 0.2);
}
.archive-card > a {
display: block;
height: 200px;
overflow: hidden;
}
.archive-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.archive-card:hover img {
transform: scale(1.08);
}
.thumb-placeholder-grid {
width: 100%;
height: 200px;
background: linear-gradient(135deg, rgba(217, 31, 38, 0.05), rgba(19, 45, 91, 0.05));
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
.archive-card-content {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
flex: 1;
}
.archive-card .meta {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--msawrp-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.archive-card h3 {
margin: 0;
font-size: 1.2rem;
line-height: 1.35;
flex: 1;
}
.archive-card h3 a {
color: var(--msawrp-text);
transition: color 0.25s ease;
}
.archive-card:hover h3 a {
color: var(--msawrp-red);
}
.archive-card p {
margin: 0;
color: var(--msawrp-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.archive-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--msawrp-line);
color: var(--msawrp-muted);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.archive-card .button {
margin-left: auto;
}
.blog-post {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
background: #fff;
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
padding: 18px;
box-shadow: var(--msawrp-shadow-soft);
}
.blog-post img {
height: 180px;
width: 100%;
object-fit: cover;
border-radius: 14px;
}
.blog-post .content {
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-post-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
color: var(--msawrp-muted);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.page-shell .entry-header,
.page-shell .entry-content,
.single-article .entry-header,
.single-article .entry-content {
max-width: 100%;
}
.author-archive-header {
display: flex;
align-items: center;
gap: 28px;
padding: 32px 28px;
background: linear-gradient(135deg, rgba(217, 31, 38, 0.08), rgba(19, 45, 91, 0.04));
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
margin-bottom: 32px;
}
.author-avatar-large {
flex-shrink: 0;
}
.author-avatar-large .avatar {
display: block;
border-radius: 50%;
border: 4px solid rgba(217, 31, 38, 0.18);
width: 120px;
height: 120px;
}
.author-profile-info {
flex: 1;
min-width: 0;
}
.author-profile-info .kicker {
margin-bottom: 8px;
}
.author-profile-info h1 {
font-size: clamp(2rem, 3vw, 2.8rem);
margin: 0 0 12px;
}
.author-bio {
margin: 0 0 16px;
color: var(--msawrp-muted);
line-height: 1.7;
font-size: 1.02rem;
}
.author-stats {
display: flex;
gap: 24px;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-label {
color: var(--msawrp-muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.stat-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--msawrp-red);
}
.thumb-placeholder {
width: 100%;
height: 200px;
background: linear-gradient(135deg, rgba(217, 31, 38, 0.05), rgba(19, 45, 91, 0.05));
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.no-posts {
text-align: center;
padding: 60px 20px;
color: var(--msawrp-muted);
font-size: 1.1rem;
}
body.msawrp-sticky-sidebar .sidebar,
body.msawrp-sticky-sidebar .article-sidebar {
position: sticky;
top: var(--msawrp-header-height, 88px);
align-self: start;
}
body.msawrp-grid-list .post-grid {
grid-template-columns: 1fr;
gap: 18px;
}
body.msawrp-grid-list .post-card {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 18px;
}
body.msawrp-grid-list .post-card .thumb {
width: 100%;
height: 180px;
}
body.msawrp-grid-list .post-card .post-body {
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 980px) {
.hero-grid,
.layout-grid,
.article-layout,
.footer-grid {
grid-template-columns: 1fr;
}
.hero-grid-secondary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-grid,
.card-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav-inner {
flex-wrap: wrap;
padding: 12px 0;
}
.search-form .search-field {
width: 180px;
}
.browse-all-box {
flex-direction: column;
text-align: center;
gap: 24px;
}
.browse-all-box .button {
width: 100%;
}
.archive-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.topbar-inner,
.main-header,
.footer-bottom-inner,
.section-header {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.topbar-center {
width: 100%;
justify-content: flex-start;
}
.topbar-links {
gap: 12px;
}
.topbar-links a {
font-size: 10px;
}
.topbar-social {
gap: 10px;
}
.social-link {
width: 24px;
height: 24px;
}
.hero-image-wrapper {
height: 320px;
}
.hero-overlay-modern {
padding: 24px;
}
.hero-feature-modern h1 {
font-size: clamp(1.4rem, 3vw, 2rem);
}
.hero-excerpt {
font-size: 0.9rem;
margin-bottom: 16px;
}
.hero-grid-secondary {
grid-template-columns: 1fr;
}
.story-card-image {
height: 160px;
}
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.main-navigation {
width: 100%;
display: none;
}
.main-navigation.is-open {
display: block;
}
.main-navigation ul.nav-menu,
.main-navigation > ul,
.main-navigation > div > ul {
flex-direction: column;
align-items: stretch;
width: 100%;
padding: 12px 0 18px;
gap: 4px;
}
.main-navigation li {
width: 100%;
}
.main-navigation a {
width: 100%;
justify-content: space-between;
padding: 12px 14px;
}
.main-navigation .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-left: 2px solid var(--msawrp-red, #d91f26);
border-radius: 0 8px 8px 0;
background: rgba(15, 23, 42, 0.03);
margin: 4px 0 8px 12px;
padding: 6px 8px;
min-width: auto;
pointer-events: auto;
display: none;
}
.main-navigation li.is-submenu-open > .sub-menu,
.main-navigation li:hover > .sub-menu {
display: flex;
}
.main-navigation .sub-menu .sub-menu {
top: 0;
left: 0;
margin-left: 12px;
}
.mega-menu-panel {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
padding: 12px 0;
pointer-events: auto;
display: none;
}
.main-navigation li.is-submenu-open > .mega-menu-panel,
.main-navigation li:hover > .mega-menu-panel {
display: block;
}
.mega-menu-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.nav-tools {
width: 100%;
justify-content: space-between;
}
.post-grid,
.card-list,
.sidebar {
grid-template-columns: 1fr;
}
.blog-post {
grid-template-columns: 1fr;
}
.hero-feature img {
height: 420px;
}
.site-title-wrap a {
font-size: 1.3rem;
}
.page-numbers a,
.page-numbers .current,
.page-numbers.prev,
.page-numbers.next {
min-width: 44px;
min-height: 44px;
padding: 0 12px;
font-size: 0.9rem;
}
.page-numbers {
gap: 6px;
}
.browse-all-box {
flex-direction: column;
text-align: center;
gap: 20px;
padding: 28px 20px;
}
.browse-all-content h2 {
font-size: 1.6rem;
}
.browse-all-content p {
font-size: 0.95rem;
}
.browse-all-box .button {
width: 100%;
}
.author-archive-header {
flex-direction: column;
gap: 20px;
padding: 24px 20px;
text-align: center;
}
.author-profile-info h1 {
font-size: 1.8rem;
}
.archive-grid {
grid-template-columns: 1fr;
}
.archive-card-content {
padding: 18px;
}
.archive-card h3 {
font-size: 1.1rem;
}
.archive-card-footer {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.archive-card .button {
width: 100%;
margin-left: 0;
}
}  @supports (font-display: swap) {
@font-face {
font-family: 'Inter';
font-display: swap;
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
} img {
font-display: optional;
} .hero-section-modern,
.hero-feature-modern {
content-visibility: auto;
} .hero-image-wrapper {
aspect-ratio: 1400 / 520;
}
.story-card-image {
aspect-ratio: 16 / 10;
}
.post-card .thumb {
aspect-ratio: 16 / 10;
} @media (max-width: 1024px) {
.hero-image-wrapper {
height: 420px;
}
.hero-overlay-modern {
padding: 30px;
}
.hero-feature-modern h2 {
font-size: 2.2rem;
}
.hero-grid-secondary {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
}
@media (max-width: 768px) {
.hero-section-modern {
padding-top: 20px;
padding-bottom: 32px;
}
.hero-image-wrapper {
height: auto;
aspect-ratio: 16 / 10;
min-height: 280px;
}
.hero-overlay-modern {
padding: 24px 20px;
}
.hero-feature-modern h2 {
font-size: 1.65rem;
margin-bottom: 10px;
}
.hero-excerpt {
font-size: 0.92rem;
line-height: 1.45;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-cta {
min-height: 40px;
padding: 0 20px;
font-size: 0.88rem;
}
.hero-grid-secondary {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 14px;
}
.story-card-modern {
flex-direction: row;
align-items: center;
height: auto;
}
.story-card-image {
width: 130px;
height: 100px;
flex-shrink: 0;
aspect-ratio: 4 / 3;
}
.story-content-modern {
padding: 12px 16px;
}
.story-content-modern h3 {
font-size: 0.98rem;
line-height: 1.35;
}
}
@media (max-width: 480px) {
.hero-image-wrapper {
min-height: 260px;
aspect-ratio: 16 / 11;
}
.hero-overlay-modern {
padding: 16px;
}
.hero-feature-modern h2 {
font-size: 1.3rem;
}
.hero-excerpt {
display: none;
}
.hero-feature-modern .post-meta {
margin-bottom: 6px;
font-size: 10px;
}
.story-card-image {
width: 105px;
height: 85px;
}
} @media print {
body, html {
background: white;
color: black;
}
a {
color: #0563c1;
text-decoration: underline;
}
.site-header,
.main-nav,
.sidebar,
.site-footer,
.pagination-wrapper,
.no-print {
display: none !important;
}
.entry-content {
max-width: 100%;
}
.entry-content a::after {
content: " (" attr(href) ")";
}
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.screen-reader-text:focus {
clip: auto !important;
clip-path: none !important;
height: auto;
overflow: visible;
position: static;
white-space: normal;
width: auto;
z-index: 9999;
} .article-layout {
display: grid;
grid-template-columns: minmax(0, 1.7fr) 320px;
gap: 32px;
align-items: start;
padding-top: 30px;
padding-bottom: 60px;
}
.single-article {
background: var(--msawrp-card, #ffffff);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
padding: 40px;
box-shadow: var(--msawrp-shadow-soft);
overflow: hidden;
}
.article-header {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--msawrp-line);
}
.article-kicker {
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--msawrp-red);
margin-bottom: 12px;
}
.single-article h1 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.04em;
margin: 0 0 16px;
color: var(--msawrp-text);
}
.article-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--msawrp-muted);
font-weight: 600;
margin-bottom: 20px;
}
.article-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: var(--msawrp-soft);
padding: 10px 16px;
border-radius: 999px;
margin-top: 16px;
}
.article-action {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
padding: 6px 14px;
font-size: 0.82rem;
font-weight: 700;
color: var(--msawrp-text);
cursor: pointer;
transition: all 0.2s ease;
}
.article-action:hover,
.article-action.is-liked {
border-color: var(--msawrp-red);
color: var(--msawrp-red);
background: rgba(217, 31, 38, 0.06);
}
.font-tools {
display: inline-flex;
align-items: center;
gap: 4px;
background: #ffffff;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
padding: 2px 6px;
}
.font-tools button {
background: none;
border: none;
padding: 4px 8px;
font-weight: 700;
font-size: 0.85rem;
color: var(--msawrp-muted);
cursor: pointer;
border-radius: 999px;
}
.font-tools button.is-active,
.font-tools button:hover {
color: var(--msawrp-red);
background: var(--msawrp-soft);
}
.featured-image-wrap {
position: relative;
width: 100%;
max-height: 480px;
overflow: hidden;
border-radius: calc(var(--msawrp-radius) - 4px);
margin-bottom: 28px;
background: var(--msawrp-dark);
}
.featured-image-wrap img,
.featured-image-wrap .msawrp-placeholder-thumb {
width: 100%;
height: 100%;
max-height: 480px;
object-fit: cover;
display: block;
}
.article-summary {
font-size: 1.15rem;
line-height: 1.6;
font-weight: 600;
color: var(--msawrp-text);
padding: 16px 20px;
background: linear-gradient(135deg, rgba(217, 31, 38, 0.05) 0%, rgba(19, 45, 91, 0.04) 100%);
border-left: 4px solid var(--msawrp-red);
border-radius: 0 12px 12px 0;
margin-bottom: 32px;
} .entry-content {
font-size: 1.05rem;
line-height: 1.8;
color: var(--msawrp-text);
overflow-wrap: break-word;
word-wrap: break-word;
}
.entry-content p {
margin-bottom: 1.6em;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
color: var(--msawrp-text);
font-weight: 800;
letter-spacing: -0.03em;
margin-top: 1.8em;
margin-bottom: 0.8em;
line-height: 1.3;
}
.entry-content h2 { font-size: 1.8rem; }
.entry-content h3 { font-size: 1.45rem; }
.entry-content h4 { font-size: 1.2rem; }
.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content object,
.entry-content figure,
.wp-block-image img,
.wp-block-embed iframe {
max-width: 100% !important;
height: auto !important;
border-radius: 12px;
margin: 1.5em 0;
display: block;
}
.entry-content figure {
margin: 1.8em 0;
}
.entry-content figcaption {
font-size: 0.85rem;
color: var(--msawrp-muted);
text-align: center;
margin-top: 8px;
}
.entry-content blockquote {
margin: 1.8em 0;
padding: 20px 24px;
border-left: 4px solid var(--msawrp-red);
background: var(--msawrp-soft);
border-radius: 0 12px 12px 0;
font-style: italic;
font-size: 1.1rem;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 1.6em;
padding-left: 1.5em;
}
.entry-content li {
margin-bottom: 0.5em;
} .author-box {
display: flex;
align-items: center;
gap: 20px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
padding: 24px;
border-radius: var(--msawrp-radius);
margin-top: 40px;
margin-bottom: 32px;
}
.author-avatar img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--msawrp-red);
letter-spacing: 0.08em;
}
.author-info h3 {
font-size: 1.2rem;
margin: 4px 0;
}
.author-info p {
font-size: 0.92rem;
color: var(--msawrp-muted);
margin: 0;
} .share-bar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 16px 0;
border-top: 1px solid var(--msawrp-line);
border-bottom: 1px solid var(--msawrp-line);
margin-bottom: 40px;
}
.share-bar span {
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--msawrp-muted);
margin-right: 8px;
}
.share-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
color: #ffffff;
transition: all 0.25s ease;
}
.share-link.x { background: #000000; }
.share-link.fb { background: #1877f2; }
.share-link.wa { background: #25d366; }
.share-link.copy { background: var(--msawrp-dark); }
.share-link:hover {
transform: translateY(-2px);
opacity: 0.9;
} .single-post-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
.post-nav {
display: flex;
flex-direction: column;
padding: 18px 20px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
transition: all 0.25s ease;
}
.post-nav:hover {
border-color: var(--msawrp-red);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.post-nav span {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: var(--msawrp-red);
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.post-nav strong {
font-size: 1rem;
color: var(--msawrp-text);
line-height: 1.35;
}
.post-nav.next {
text-align: right;
} @media (max-width: 1024px) {
.article-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.single-article {
padding: 24px 18px;
border-radius: 12px;
}
.single-article h1 {
font-size: 1.75rem;
}
.featured-image-wrap {
max-height: 280px;
}
.single-post-navigation {
grid-template-columns: 1fr;
}
.author-box {
flex-direction: column;
text-align: center;
}
} .msawrp-ad-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: 20px auto;
text-align: center;
clear: both;
}
.msawrp-ad-label {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--msawrp-muted, #94a3b8);
margin-bottom: 6px;
user-select: none;
}
.msawrp-ad-inner {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.msawrp-ad-inner iframe,
.msawrp-ad-inner ins,
.msawrp-ad-inner img {
max-width: 100% !important;
margin: 0 auto;
}
.msawrp-ad-header {
margin: 16px auto;
width: min(var(--container), calc(100% - 32px));
}
.msawrp-ad-single_before,
.msawrp-ad-single_inline,
.msawrp-ad-single_after {
margin: 28px 0;
}
.msawrp-ad-single_inline {
padding: 16px 0;
border-top: 1px dashed var(--msawrp-line, rgba(15, 23, 42, 0.08));
border-bottom: 1px dashed var(--msawrp-line, rgba(15, 23, 42, 0.08));
}
.msawrp-ad-archive_infeed {
grid-column: 1 / -1;
width: 100%;
margin: 24px 0;
padding: 20px;
background: var(--msawrp-soft, #f8fafc);
border-radius: 12px;
border: 1px dashed var(--msawrp-line, rgba(15, 23, 42, 0.1));
}
.msawrp-ad-footer {
margin: 32px auto 0;
padding-bottom: 24px;
}
body.msawrp-dark-mode .msawrp-ad-archive_infeed {
background: rgba(15, 23, 42, 0.5);
border-color: rgba(255, 255, 255, 0.1);
}