: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 .author-box,
body.msawrp-dark-mode .post-nav,
body.msawrp-dark-mode .share-bar,
body.msawrp-dark-mode .widget-trending,
body.msawrp-dark-mode .widget-article-tools,
body.msawrp-dark-mode .sidebar-featured,
body.msawrp-dark-mode .page-shell {
background: var(--msawrp-card);
color: var(--msawrp-text);
}
body.msawrp-dark-mode .site-header.is-scrolled {
background: rgba(17, 24, 39, 0.95);
}
body.msawrp-dark-mode .site-title {
color: #ffffff;
}
body.msawrp-dark-mode .article-action,
body.msawrp-dark-mode .font-tools,
body.msawrp-dark-mode .mini-tool {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
body.msawrp-dark-mode .article-summary-card {
background: rgba(217, 31, 38, 0.08);
border-color: rgba(217, 31, 38, 0.25);
}
body.msawrp-dark-mode .entry-content blockquote {
background: #1e293b;
}
body.msawrp-dark-mode .search-form .search-field {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
body.msawrp-dark-mode .search-form .search-field:focus {
background: #0f172a;
}
body.msawrp-dark-mode .site-footer {
background: #080d17;
}
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(14px);
-webkit-backdrop-filter: blur(14px);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.is-scrolled {
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.95);
}
.topbar {
background: linear-gradient(90deg, #0d131f 0%, #151d2f 100%);
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
letter-spacing: 0.04em;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.25s ease;
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 36px;
gap: 16px;
}
.topbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.topbar-live {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(217, 31, 38, 0.2);
border: 1px solid rgba(217, 31, 38, 0.4);
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
color: #ff6b72;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.live-pulse-dot {
width: 6px;
height: 6px;
background: #ff3b45;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 59, 69, 0.7);
animation: pulse-ring 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 59, 69, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px rgba(255, 59, 69, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 59, 69, 0);
}
}
.topbar-date {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255, 255, 255, 0.7);
}
.topbar-center {
flex: 1;
display: flex;
justify-content: center;
}
.topbar-links {
display: flex;
align-items: center;
gap: 18px;
}
.topbar-links a {
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
transition: all 0.2s ease;
position: relative;
padding: 2px 0;
}
.topbar-links a:hover {
color: #ffffff;
}
.topbar-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.5px;
background: var(--msawrp-red);
transition: width 0.25s ease;
}
.topbar-links a:hover::after {
width: 100%;
}
.topbar-right-group {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.topbar-social {
display: flex;
align-items: center;
gap: 8px;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
}
.social-link:hover {
background: var(--msawrp-red);
color: #fff;
transform: translateY(-1px);
}
.language-switcher {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
}
.lang-btn {
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, 0.65);
padding: 2px 6px;
border-radius: 999px;
transition: all 0.15s ease;
}
.lang-btn:hover,
.lang-btn.is-active {
color: #fff;
}
.lang-btn.is-active {
background: var(--msawrp-red);
color: #fff;
}
.lang-divider {
color: rgba(255, 255, 255, 0.25);
font-size: 9px;
}
.main-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: var(--msawrp-header-height, 66px);
transition: min-height 0.25s ease;
}
.site-header.is-scrolled .main-header {
min-height: 56px;
}
.brand-block {
display: flex;
align-items: center;
gap: 16px;
}
.custom-logo-link {
display: inline-flex;
align-items: center;
}
.custom-logo {
max-height: 48px;
width: auto;
}
.site-title-wrap {
display: flex;
flex-direction: column;
}
.site-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.site-title {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.05em;
color: var(--msawrp-dark);
line-height: 1.1;
transition: color 0.2s ease;
}
.site-title:hover {
color: var(--msawrp-red);
}
.site-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
background: var(--msawrp-dark);
color: #ffffff;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 4px;
}
.site-tagline {
font-size: 0.7rem;
color: var(--msawrp-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 3px 0 0;
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.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: 42px;
padding: 0 18px;
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-compact {
min-height: 34px;
padding: 0 14px;
font-size: 0.78rem;
font-weight: 700;
border-radius: 999px;
gap: 6px;
}
.button-outline {
background: transparent;
border: 1px solid var(--msawrp-line);
color: var(--msawrp-text);
box-shadow: none;
}
.button-outline:hover {
border-color: var(--msawrp-red);
color: var(--msawrp-red);
background: rgba(217, 31, 38, 0.04);
}
.button-block {
width: 100%;
justify-content: center;
}
.menu-toggle {
display: none;
align-items: center;
gap: 8px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
color: var(--msawrp-dark);
min-height: 34px;
padding: 0 12px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.hamburger-box {
width: 16px;
height: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-inner,
.hamburger-box::before,
.hamburger-box::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.main-nav {
position: relative;
background: var(--msawrp-header-bg, #ffffff);
border-top: 1px solid var(--msawrp-line);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}
.nav-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 46px;
}
.main-navigation ul.nav-menu,
.main-navigation > ul,
.main-navigation > div > ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 4px;
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: 5px;
padding: 7px 11px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--msawrp-text);
border-radius: 6px;
transition: all 0.18s 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.06);
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: 10px;
}
.search-form {
position: relative;
display: flex;
align-items: center;
}
.search-form label {
margin: 0;
}
.search-form .search-field {
width: 190px;
min-height: 34px;
padding: 0 34px 0 12px;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
background: var(--msawrp-soft);
color: var(--msawrp-text);
font-size: 0.8rem;
outline: none;
transition: all 0.22s ease;
}
.search-form .search-field:focus {
width: 230px;
border-color: var(--msawrp-red);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(217, 31, 38, 0.08);
}
.search-form .search-submit {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--msawrp-red);
color: #fff;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
.search-form .search-submit:hover {
background: var(--msawrp-red-dark);
transform: translateY(-50%) scale(1.05);
} .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: #0d121f;
color: rgba(255, 255, 255, 0.8);
margin-top: 50px;
border-top: 2px solid var(--msawrp-red);
position: relative;
}
.footer-trust-strip {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
padding: 12px 0;
}
.footer-trust-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px 20px;
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.76rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.02em;
}
.trust-item svg {
color: var(--msawrp-red);
flex-shrink: 0;
}
.footer-top {
padding: 44px 0 36px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 0.7fr 0.7fr 1.1fr;
gap: 32px;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-logo {
font-size: 1.45rem;
font-weight: 900;
letter-spacing: -0.04em;
color: #ffffff;
}
.footer-desc {
font-size: 0.82rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.65);
margin: 0;
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-line {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.6);
}
.contact-line svg {
color: var(--msawrp-red);
flex-shrink: 0;
}
.contact-line a {
color: rgba(255, 255, 255, 0.8);
transition: color 0.15s ease;
}
.contact-line a:hover {
color: #ffffff;
}
.footer-col .widget-title {
color: #ffffff;
font-size: 0.88rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 14px;
position: relative;
padding-bottom: 8px;
}
.footer-col .widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--msawrp-red);
border-radius: 2px;
}
.footer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.footer-list a {
color: rgba(255, 255, 255, 0.68);
font-size: 0.82rem;
font-weight: 500;
display: inline-block;
transition: all 0.2s ease;
}
.footer-list a:hover {
color: #ffffff;
transform: translateX(4px);
}
.footer-col-subscribe {
display: flex;
flex-direction: column;
gap: 10px;
}
.newsletter-subtext {
font-size: 0.8rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
margin: 0;
}
.newsletter-form.compact-form .input-with-button {
display: flex;
align-items: center;
position: relative;
}
.newsletter-form.compact-form input[type="email"] {
width: 100%;
min-height: 38px;
padding: 0 42px 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #ffffff;
font-size: 0.8rem;
outline: none;
transition: all 0.2s ease;
}
.newsletter-form.compact-form input[type="email"]:focus {
background: rgba(255, 255, 255, 0.12);
border-color: var(--msawrp-red);
}
.newsletter-form.compact-form button[type="submit"] {
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
min-height: 32px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--msawrp-red);
color: #fff;
border: none;
box-shadow: none;
cursor: pointer;
}
.footer-social-wrap {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.social-label {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
}
.footer-social-icons {
display: flex;
align-items: center;
gap: 8px;
}
.f-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.2s ease;
}
.f-social-btn:hover {
background: var(--msawrp-red);
color: #ffffff;
border-color: var(--msawrp-red);
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 16px 0;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}
.footer-copyright strong {
color: rgba(255, 255, 255, 0.85);
}
.footer-legal-links {
display: inline-flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.6);
transition: color 0.15s ease;
}
.footer-legal-links a:hover {
color: #ffffff;
}
.footer-legal-links .sep {
color: rgba(255, 255, 255, 0.2);
font-size: 0.65rem;
}
.footer-top-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.76rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
}
.footer-top-link:hover {
color: #ffffff;
background: var(--msawrp-red);
border-color: var(--msawrp-red);
}
.page-shell {
background: var(--msawrp-card, #ffffff);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
padding: 28px;
box-shadow: var(--msawrp-shadow-soft);
overflow: hidden;
}
.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.85fr) 310px;
gap: 28px;
align-items: start;
padding-top: 24px;
padding-bottom: 50px;
}
.article-breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 0.76rem;
font-weight: 600;
color: var(--msawrp-muted);
margin-bottom: 16px;
}
.article-breadcrumbs a {
color: var(--msawrp-muted);
transition: color 0.15s ease;
}
.article-breadcrumbs a:hover {
color: var(--msawrp-red);
}
.bc-sep {
color: rgba(148, 163, 184, 0.5);
font-size: 0.72rem;
}
.bc-current {
color: var(--msawrp-text);
font-weight: 700;
}
.single-article {
background: var(--msawrp-card, #ffffff);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius);
padding: 30px;
box-shadow: var(--msawrp-shadow-soft);
overflow: hidden;
}
.article-header {
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--msawrp-line);
}
.article-kicker-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.article-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-kicker a {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(217, 31, 38, 0.08);
color: var(--msawrp-red);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: all 0.2s ease;
}
.article-kicker a:hover {
background: var(--msawrp-red);
color: #fff;
}
.article-verified-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #059669;
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.2);
padding: 3px 8px;
border-radius: 999px;
}
.article-verified-badge .badge-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #10b981;
}
.article-title {
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
line-height: 1.22;
font-weight: 800;
letter-spacing: -0.035em;
margin: 0 0 16px;
color: var(--msawrp-text);
}
.article-byline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid var(--msawrp-line);
}
.byline-author-box {
display: flex;
align-items: center;
gap: 12px;
}
.byline-avatar img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.byline-author-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.author-name-row {
display: flex;
align-items: center;
gap: 6px;
}
.author-name-row a {
font-weight: 800;
font-size: 0.88rem;
color: var(--msawrp-text);
transition: color 0.15s ease;
}
.author-name-row a:hover {
color: var(--msawrp-red);
}
.author-role-chip {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 1px 6px;
background: var(--msawrp-soft);
color: var(--msawrp-muted);
border-radius: 4px;
border: 1px solid var(--msawrp-line);
}
.byline-meta-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
color: var(--msawrp-muted);
font-weight: 500;
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.meta-sep {
color: var(--msawrp-line);
}
.article-tools {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--msawrp-soft);
padding: 4px 8px;
border-radius: 999px;
border: 1px solid var(--msawrp-line);
}
.article-action {
display: inline-flex;
align-items: center;
gap: 5px;
background: #ffffff;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
padding: 5px 10px;
font-size: 0.76rem;
font-weight: 700;
color: var(--msawrp-text);
cursor: pointer;
transition: all 0.2s ease;
line-height: 1;
}
.article-action:hover,
.article-action.is-liked {
border-color: var(--msawrp-red);
color: var(--msawrp-red);
background: rgba(217, 31, 38, 0.06);
}
.article-action.like-button .heart-svg {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.article-action.like-button.is-liked .heart-svg {
transform: scale(1.2);
color: var(--msawrp-red);
fill: var(--msawrp-red);
}
.font-tools {
display: inline-flex;
align-items: center;
gap: 2px;
background: #ffffff;
border: 1px solid var(--msawrp-line);
border-radius: 999px;
padding: 2px 4px;
}
.font-tools button {
background: none;
border: none;
padding: 3px 6px;
font-weight: 700;
font-size: 0.74rem;
color: var(--msawrp-muted);
cursor: pointer;
border-radius: 999px;
transition: all 0.15s ease;
}
.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: 440px;
overflow: hidden;
border-radius: var(--msawrp-radius-sm);
margin-bottom: 22px;
border: 1px solid var(--msawrp-line);
background: #000;
}
.featured-image-wrap img {
width: 100%;
height: 100%;
max-height: 440px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.featured-image-wrap:hover img {
transform: scale(1.02);
}
.featured-image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
color: rgba(255, 255, 255, 0.9);
padding: 24px 16px 8px;
font-size: 0.74rem;
font-style: italic;
}
.article-summary-card {
background: linear-gradient(135deg, rgba(217, 31, 38, 0.04) 0%, rgba(19, 45, 91, 0.03) 100%);
border: 1px solid rgba(217, 31, 38, 0.15);
border-left: 3px solid var(--msawrp-red);
border-radius: 0 10px 10px 0;
padding: 16px 20px;
margin-bottom: 24px;
}
.summary-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--msawrp-red);
margin-bottom: 6px;
}
.summary-text {
font-size: 1.05rem;
line-height: 1.6;
font-weight: 600;
color: var(--msawrp-text);
} .entry-content {
font-size: 1.04rem;
line-height: 1.78;
color: var(--msawrp-text);
overflow-wrap: break-word;
word-wrap: break-word;
}
.entry-content > p:first-of-type::first-letter {
float: left;
font-size: 3.2rem;
line-height: 0.85;
font-weight: 900;
padding-right: 10px;
padding-top: 4px;
color: var(--msawrp-red);
font-family: var(--msawrp-heading-font, "Inter"), sans-serif;
}
.entry-content p {
margin-bottom: 1.4em;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
color: var(--msawrp-text);
font-weight: 800;
letter-spacing: -0.03em;
margin-top: 1.6em;
margin-bottom: 0.7em;
line-height: 1.25;
}
.entry-content h2 { font-size: 1.65rem; }
.entry-content h3 { font-size: 1.35rem; }
.entry-content h4 { font-size: 1.15rem; }
.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: 10px;
margin: 1.4em 0;
display: block;
}
.entry-content blockquote {
position: relative;
margin: 1.8em 0;
padding: 20px 24px 20px 48px;
border-left: 3px solid var(--msawrp-red);
background: var(--msawrp-soft);
border-radius: 0 10px 10px 0;
font-style: italic;
font-size: 1.08rem;
line-height: 1.65;
}
.entry-content blockquote::before {
content: '“';
position: absolute;
left: 14px;
top: 10px;
font-size: 2.8rem;
line-height: 1;
color: var(--msawrp-red);
opacity: 0.35;
font-family: Georgia, serif;
}
.article-tags-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 28px 0 18px;
padding-top: 16px;
border-top: 1px solid var(--msawrp-line);
}
.tags-label {
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--msawrp-muted);
}
.article-tags-wrap .tags {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.article-tags-wrap .tag {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: 4px;
font-size: 0.74rem;
font-weight: 600;
color: var(--msawrp-muted);
transition: all 0.15s ease;
}
.article-tags-wrap .tag:hover {
background: var(--msawrp-red);
color: #fff;
border-color: var(--msawrp-red);
} .share-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 12px 16px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius-sm);
margin-bottom: 28px;
}
.share-bar-title {
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--msawrp-muted);
margin-right: 4px;
}
.share-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
color: #ffffff;
border: 0;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1;
}
.share-link.x { background: #000000; }
.share-link.fb { background: #1877f2; }
.share-link.wa { background: #25d366; }
.share-link.in { background: #0a66c2; }
.share-link.copy { background: var(--msawrp-dark); }
.share-link.copy.is-copied {
background: #059669;
}
.share-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
} .author-box {
display: flex;
align-items: center;
gap: 18px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
padding: 20px;
border-radius: var(--msawrp-radius-sm);
margin-bottom: 28px;
}
.author-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.author-avatar-wrap .author-avatar img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.author-verified-badge {
position: absolute;
bottom: 0;
right: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--msawrp-red);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.author-info {
flex: 1;
}
.author-meta-top {
margin-bottom: 2px;
}
.author-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--msawrp-red);
letter-spacing: 0.08em;
}
.author-title {
font-size: 1.15rem;
margin: 0 0 4px;
font-weight: 800;
}
.author-desc {
font-size: 0.82rem;
color: var(--msawrp-muted);
margin: 0;
line-height: 1.5;
}
.author-cta {
flex-shrink: 0;
} .single-post-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 30px;
}
.post-nav {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius-sm);
transition: all 0.2s ease;
}
.post-nav:hover {
border-color: var(--msawrp-red);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.post-nav.is-empty {
visibility: hidden;
}
.nav-dir {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--msawrp-red);
letter-spacing: 0.06em;
}
.nav-title {
font-size: 0.88rem;
color: var(--msawrp-text);
line-height: 1.35;
font-weight: 700;
}
.post-nav.next {
text-align: right;
align-items: flex-end;
} .related-posts {
margin-bottom: 30px;
}
.related-header {
margin-bottom: 16px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.related-card {
display: flex;
flex-direction: column;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius-sm);
overflow: hidden;
transition: all 0.2s ease;
}
.related-card:hover {
border-color: var(--msawrp-red);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.related-thumb-link {
display: block;
width: 100%;
height: 120px;
overflow: hidden;
background: #000;
}
.related-thumb-link img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.related-card:hover .related-thumb-link img {
transform: scale(1.04);
}
.related-content {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
}
.related-meta-row {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: var(--msawrp-muted);
margin-bottom: 6px;
}
.related-content h4 {
font-size: 0.88rem;
line-height: 1.35;
margin: 0;
font-weight: 700;
}
.related-content h4 a {
color: var(--msawrp-text);
transition: color 0.15s ease;
}
.related-content h4 a:hover {
color: var(--msawrp-red);
} .article-sidebar {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 18px;
}
.widget-trending {
background: var(--msawrp-card);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius-sm);
padding: 18px;
}
.widget-header {
margin-bottom: 12px;
}
.widget-trending .widget-title {
font-size: 1rem;
margin: 4px 0 0;
font-weight: 800;
}
.trending-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.trending-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--msawrp-line);
}
.trending-item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.trending-rank {
font-size: 1.15rem;
font-weight: 900;
color: var(--msawrp-red);
line-height: 1;
font-family: var(--msawrp-heading-font, "Inter"), sans-serif;
opacity: 0.85;
}
.trending-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.trending-date {
font-size: 0.7rem;
color: var(--msawrp-muted);
}
.trending-info h4 {
font-size: 0.82rem;
line-height: 1.3;
margin: 0;
font-weight: 700;
}
.trending-info h4 a {
color: var(--msawrp-text);
transition: color 0.15s ease;
}
.trending-info h4 a:hover {
color: var(--msawrp-red);
}
.widget-article-tools {
background: var(--msawrp-card);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius-sm);
padding: 16px 18px;
}
.mini-tools {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.mini-tool {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
background: var(--msawrp-soft);
border: 1px solid var(--msawrp-line);
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
color: var(--msawrp-text);
cursor: pointer;
transition: all 0.2s ease;
}
.mini-tool:hover {
background: var(--msawrp-red);
color: #fff;
border-color: var(--msawrp-red);
}
.sidebar-featured {
background: var(--msawrp-card);
border: 1px solid var(--msawrp-line);
border-radius: var(--msawrp-radius-sm);
padding: 16px 18px;
}
.sidebar-featured-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sidebar-featured-item {
display: flex;
gap: 10px;
align-items: center;
}
.sidebar-featured-thumb {
width: 60px;
height: 50px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: #000;
}
.sidebar-featured-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-featured-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-featured-date {
font-size: 0.7rem;
color: var(--msawrp-muted);
}
.sidebar-featured-content h4 {
font-size: 0.8rem;
line-height: 1.25;
margin: 0;
}
.sidebar-featured-content h4 a {
color: var(--msawrp-text);
}
.sidebar-featured-content h4 a:hover {
color: var(--msawrp-red);
} @media (max-width: 1024px) {
.article-layout {
grid-template-columns: 1fr;
}
.article-sidebar {
position: static;
}
}
@media (max-width: 768px) {
.single-article {
padding: 20px 16px;
border-radius: 10px;
}
.article-title {
font-size: 1.65rem;
}
.featured-image-wrap {
max-height: 260px;
}
.single-post-navigation {
grid-template-columns: 1fr;
}
.author-box {
flex-direction: column;
text-align: center;
}
.related-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.topbar-center {
display: none;
}
} .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);
}  .has-dropcap > p:first-of-type::first-letter {
font-size: 3.4rem;
line-height: 0.85;
float: left;
margin: 4px 10px 0 0;
font-weight: 800;
color: var(--msawrp-red, #d91f26);
font-family: var(--msawrp-heading-font, inherit);
text-transform: uppercase;
} .article-layout.layout-sidebar-none {
grid-template-columns: 1fr !important;
max-width: 860px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.article-layout.layout-sidebar-left {
grid-template-columns: 330px minmax(0, 1fr) !important;
}
.article-layout.layout-sidebar-left .article-sidebar {
order: -1 !important;
}
@media (max-width: 991px) {
.article-layout.layout-sidebar-left {
grid-template-columns: 1fr !important;
}
.article-layout.layout-sidebar-left .article-sidebar {
order: 2 !important;
}
}
.article-layout.no-sticky-sidebar .article-sidebar {
position: static !important;
top: auto !important;
} .related-grid.related-count-6 {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
} .language-switcher {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(0, 0, 0, 0.04);
padding: 3px 6px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
}
.language-switcher .lang-btn {
color: var(--msawrp-muted, #64748b);
text-decoration: none;
padding: 2px 4px;
border-radius: 4px;
transition: all 0.2s ease;
}
.language-switcher .lang-btn:hover,
.language-switcher .lang-btn.is-active {
color: var(--msawrp-red, #d91f26);
background: rgba(217, 31, 38, 0.08);
}
.language-switcher .lang-divider {
color: var(--msawrp-muted, #94a3b8);
font-size: 10px;
}
.footer-dev-credit a {
color: var(--msawrp-red, #d91f26);
text-decoration: none;
font-weight: 700;
transition: opacity 0.2s ease;
}
.footer-dev-credit a:hover {
text-decoration: underline;
opacity: 0.85;
}