.mam-hub,
.mam-article {
--mam-primary: #1B4332;
--mam-primary-light: rgba(27, 67, 50, 0.08);
--mam-accent: #D4A017;
--mam-gold: #D4AF37;
--mam-text: #1a1a1a;
--mam-muted: #555;
--mam-border: #e5e5e5;
--mam-bg: #faf8f4;
font-family: 'Lora', Georgia, serif;
color: var(--mam-text);
}
.mam-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .mam-hub__header {
background: linear-gradient(135deg, #1B4332 0%, #2D5A3D 100%);
color: #fff !important;
padding: 70px 0 60px;
position: relative;
overflow: hidden;
}
.mam-hub__header::before {
content: '';
position: absolute;
right: -150px; top: -150px;
width: 500px; height: 500px;
background: rgba(212, 175, 55, 0.1);
border-radius: 50%;
}
.mam-hub__header > * { position: relative; z-index: 2; }
.mam-hub__header h1,
.mam-hub__header p,
.mam-hub__header span { color: #fff !important; }
.mam-hub__badge {
display: inline-block;
font-size: 0.85rem; font-weight: 600;
letter-spacing: 0.1em;
color: var(--mam-gold) !important;
background: rgba(212, 175, 55, 0.15);
padding: 6px 14px; border-radius: 3px;
margin-bottom: 20px;
font-family: -apple-system, sans-serif;
}
.mam-hub__title {
font-size: 3rem; font-weight: 800;
line-height: 1.1; margin: 0 0 18px;
letter-spacing: -0.02em;
}
.mam-hub__subtitle {
font-size: 1.15rem; line-height: 1.65;
opacity: 0.92; margin: 0; max-width: 760px;
} .mam-categories-section { background: #fff; padding: 60px 0; }
.mam-section-title {
font-size: 1.7rem; font-weight: 700;
color: var(--mam-primary);
margin: 0 0 30px;
padding-bottom: 14px;
border-bottom: 3px solid var(--mam-accent);
display: inline-block;
font-family: -apple-system, sans-serif;
}
.mam-categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.mam-category-card {
display: block;
padding: 36px 28px;
background: var(--mam-bg);
border: 1px solid var(--mam-border);
border-left: 5px solid var(--mam-primary);
border-radius: 4px;
text-decoration: none !important;
color: var(--mam-text);
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.mam-category-card::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.08), transparent 70%);
pointer-events: none;
}
.mam-category-card:hover {
background: #fff;
border-left-color: var(--mam-accent);
box-shadow: 0 12px 32px rgba(27, 67, 50, 0.15);
transform: translateY(-4px);
color: var(--mam-text);
}
.mam-category-card__icon {
font-size: 3rem;
margin-bottom: 16px;
line-height: 1;
}
.mam-category-card h3 {
font-size: 1.5rem; font-weight: 700;
color: var(--mam-primary) !important;
margin: 0 0 12px;
font-family: -apple-system, sans-serif;
letter-spacing: -0.01em;
}
.mam-category-card p {
font-size: 0.98rem; color: var(--mam-muted);
line-height: 1.65; margin: 0 0 18px;
}
.mam-category-card__count {
display: inline-block;
font-size: 0.85rem; font-weight: 700;
color: var(--mam-accent);
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: -apple-system, sans-serif;
padding-top: 12px;
border-top: 2px solid var(--mam-border);
width: 100%;
} .mam-articles-section { background: var(--mam-bg); padding: 60px 0; }
.mam-articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.mam-article-card {
display: flex;
gap: 14px;
padding: 20px 22px;
background: #fff;
border: 1px solid var(--mam-border);
border-radius: 4px;
text-decoration: none !important;
color: var(--mam-text);
transition: all 0.2s ease;
border-top: 3px solid transparent;
}
.mam-article-card:hover {
border-top-color: var(--mam-accent);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
color: var(--mam-text);
}
.mam-article-card__icon {
font-size: 1.9rem;
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--mam-primary-light);
border-radius: 8px;
}
.mam-article-card__body { flex: 1; min-width: 0; }
.mam-article-card__body h3 {
font-size: 1.1rem; font-weight: 700;
color: var(--mam-primary) !important;
margin: 0 0 6px; line-height: 1.3;
font-family: -apple-system, sans-serif;
}
.mam-article-card__body p {
font-size: 0.92rem; color: var(--mam-muted);
line-height: 1.55; margin: 0 0 10px;
}
.mam-article-card__year {
display: inline-block;
font-size: 0.78rem; font-weight: 600;
color: var(--mam-accent);
background: rgba(212, 160, 23, 0.1);
padding: 2px 10px; border-radius: 3px;
}
.mam-empty { text-align: center; padding: 60px 20px; color: var(--mam-muted); } .mam-breadcrumbs {
padding: 20px 0;
background: var(--mam-bg);
border-bottom: 1px solid var(--mam-border);
font-size: 0.88rem;
font-family: -apple-system, sans-serif;
}
.mam-breadcrumbs a { color: var(--mam-primary); text-decoration: none; font-weight: 500; }
.mam-breadcrumbs a:hover { text-decoration: underline; }
.mam-breadcrumbs span { margin: 0 8px; color: var(--mam-muted); }
.mam-article__header {
padding: 50px 0 40px;
background: #fff;
border-bottom: 1px solid var(--mam-border);
}
.mam-article__icon { font-size: 3.5rem; line-height: 1; margin-bottom: 16px; }
.mam-article__title {
font-size: 2.6rem; font-weight: 800;
color: var(--mam-primary) !important;
margin: 0 0 16px;
line-height: 1.15;
letter-spacing: -0.015em;
font-family: 'Lora', Georgia, serif;
}
.mam-article__lead {
font-size: 1.2rem; line-height: 1.65;
color: var(--mam-muted);
margin: 0 0 22px;
max-width: 760px;
font-style: italic;
}
.mam-article__meta {
display: flex; gap: 14px; flex-wrap: wrap;
font-family: -apple-system, sans-serif;
font-size: 0.88rem;
}
.mam-meta-item {
display: inline-block;
padding: 5px 14px;
background: var(--mam-primary-light);
color: var(--mam-primary);
border-radius: 3px;
font-weight: 600;
} .mam-article__body { padding: 50px 0; background: #fff; }
.mam-article__layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 50px;
align-items: start;
}
.mam-article__main { min-width: 0; }
.mam-article__content {
font-size: 1.08rem;
line-height: 1.85;
color: var(--mam-text);
}
.mam-article__content p { margin: 0 0 1.4em; }
.mam-article__content p:first-of-type::first-letter {
font-size: 3.5rem; font-weight: 700;
float: left; line-height: 0.95;
padding: 6px 12px 0 0;
color: var(--mam-primary);
font-family: 'Lora', Georgia, serif;
}
.mam-article__content h2 {
font-size: 1.65rem; font-weight: 700;
color: var(--mam-primary) !important;
margin: 2em 0 0.6em;
padding-bottom: 10px;
border-bottom: 2px solid var(--mam-border);
font-family: -apple-system, sans-serif;
line-height: 1.3;
}
.mam-article__content h3 {
font-size: 1.3rem; font-weight: 700;
color: var(--mam-primary) !important;
margin: 1.8em 0 0.5em;
font-family: -apple-system, sans-serif;
}
.mam-article__content strong { color: var(--mam-primary); }
.mam-article__content blockquote {
border-left: 4px solid var(--mam-accent);
padding: 10px 24px;
margin: 1.5em 0;
background: var(--mam-bg);
font-style: italic;
color: var(--mam-muted);
}
.mam-article__content ul, .mam-article__content ol {
margin: 0 0 1.4em;
padding-left: 1.4em;
}
.mam-article__content li { margin-bottom: 0.5em; }
.mam-article__content a {
color: var(--mam-primary);
text-decoration: underline;
text-decoration-color: var(--mam-accent);
text-underline-offset: 3px;
} .mam-article__sidebar {
position: sticky; top: 20px;
display: flex; flex-direction: column; gap: 22px;
font-family: -apple-system, sans-serif;
}
.mam-sidebar-box {
background: var(--mam-bg);
border: 1px solid var(--mam-border);
border-radius: 4px;
padding: 22px 24px;
}
.mam-sidebar-box--facts {
background: linear-gradient(135deg, rgba(212, 160, 23, 0.08), rgba(212, 175, 55, 0.04));
border-color: rgba(212, 160, 23, 0.3);
border-left: 4px solid var(--mam-accent);
}
.mam-sidebar-box h3 {
font-size: 1rem; font-weight: 700;
color: var(--mam-primary) !important;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--mam-border);
}
.mam-sidebar-box ul { list-style: none; padding: 0; margin: 0; }
.mam-sidebar-box li {
padding: 8px 0 8px 20px;
font-size: 0.92rem;
line-height: 1.55;
position: relative;
border-bottom: 1px solid var(--mam-border);
}
.mam-sidebar-box li:last-child { border-bottom: 0; }
.mam-sidebar-box--facts li::before {
content: '▸';
position: absolute; left: 0;
color: var(--mam-accent);
font-weight: 700;
} .mam-sidebar-box--facts li.mam-fact-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
}
.mam-sidebar-box--facts li.mam-fact-item::before {
display: none;
}
.mam-fact-icon {
flex-shrink: 0;
font-size: 1.15rem;
line-height: 1.4;
width: 22px;
text-align: center;
}
.mam-fact-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mam-fact-label {
color: var(--mam-primary);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mam-fact-value {
color: var(--mam-text);
font-size: 0.92rem;
line-height: 1.45;
word-wrap: break-word;
}
.mam-figures-list li,
.mam-links-list li,
.mam-related-list li { padding-left: 0; }
.mam-figures-list li::before,
.mam-links-list li::before,
.mam-related-list li::before { display: none; }
.mam-figures-list strong { color: var(--mam-primary); }
.mam-figures-list small { color: var(--mam-muted); }
.mam-links-list a, .mam-related-list a {
color: var(--mam-primary);
text-decoration: none;
font-weight: 500;
}
.mam-links-list a:hover, .mam-related-list a:hover { text-decoration: underline; } .mam-shortcode-wrap { margin: 30px 0; }
.mam-shortcode-footer { text-align: center; margin-top: 24px; }
.mam-view-all-btn {
display: inline-block;
padding: 12px 28px;
background: var(--mam-primary);
color: #fff !important;
border-radius: 3px;
text-decoration: none !important;
font-weight: 600;
font-family: -apple-system, sans-serif;
}
.mam-view-all-btn:hover {
background: #0f2d1e;
box-shadow: 0 4px 12px rgba(27, 67, 50, 0.2);
} .mam-promo {
display: flex; gap: 18px;
padding: 24px 22px;
border-radius: 6px; margin: 20px 0;
font-family: -apple-system, sans-serif;
}
.mam-promo--dark { background: linear-gradient(135deg, #1B4332 0%, #2D5A3D 100%); color: #fff; }
.mam-promo--dark h3 { color: #fff !important; margin: 0 0 8px !important; }
.mam-promo--dark p { color: rgba(255,255,255,.88) !important; margin: 0 0 14px !important; }
.mam-promo--light { background: var(--mam-bg); border: 1px solid var(--mam-border); border-left: 4px solid var(--mam-accent); }
.mam-promo--light h3 { color: var(--mam-primary) !important; margin: 0 0 8px !important; }
.mam-promo--light p { color: var(--mam-text) !important; margin: 0 0 14px !important; }
.mam-promo__icon { font-size: 2.4rem; flex-shrink: 0; }
.mam-promo__body { flex: 1; }
.mam-promo__btn {
display: inline-block;
padding: 8px 18px;
background: var(--mam-accent);
color: #1B4332 !important;
border-radius: 3px;
text-decoration: none !important;
font-weight: 700;
}
.mam-promo__btn:hover { background: #b88912; } .mam-timeline { margin: 40px 0; font-family: -apple-system, sans-serif; }
.mam-timeline-list { position: relative; padding-left: 40px; }
.mam-timeline-list::before {
content: '';
position: absolute; left: 12px; top: 20px; bottom: 20px;
width: 2px; background: var(--mam-border);
}
.mam-timeline-item { position: relative; margin-bottom: 30px; padding-left: 20px; }
.mam-timeline-item::before {
content: '';
position: absolute; left: -32px; top: 8px;
width: 14px; height: 14px;
background: var(--mam-accent);
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--mam-accent);
}
.mam-timeline-year {
font-size: 0.85rem; font-weight: 700;
color: var(--mam-accent);
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.mam-timeline-content h3 {
font-size: 1.15rem; font-weight: 700;
color: var(--mam-primary) !important;
margin: 0 0 6px;
}
.mam-timeline-content a { text-decoration: none; color: inherit; }
.mam-timeline-content a:hover h3 { text-decoration: underline; }
.mam-timeline-content p { font-size: 0.92rem; color: var(--mam-muted); margin: 0; line-height: 1.5; } .mam-article__hero {
background: var(--mam-bg);
margin: 0;
padding: 30px 0;
border-bottom: 1px solid var(--mam-border);
}
.mam-article__hero img {
display: block;
width: 100%;
max-height: 500px;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.mam-article__hero figcaption {
margin-top: 12px;
font-size: 0.88rem;
font-family: -apple-system, sans-serif;
color: var(--mam-muted);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.mam-hero-caption {
font-style: italic;
color: var(--mam-muted);
}
.mam-hero-credit {
font-size: 0.78rem;
color: #999;
font-style: italic;
}
.mam-hero-credit::before {
content: '📸 ';
font-style: normal;
} .mam-article__gallery {
margin: 50px 0 0;
padding-top: 40px;
border-top: 2px solid var(--mam-border);
font-family: -apple-system, sans-serif;
}
.mam-article__gallery h2 {
font-size: 1.4rem;
font-weight: 700;
color: var(--mam-primary) !important;
margin: 0 0 20px;
}
.mam-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.mam-gallery-item {
margin: 0;
background: var(--mam-bg);
border-radius: 6px;
overflow: hidden;
transition: transform 0.2s ease;
}
.mam-gallery-item:hover {
transform: translateY(-3px);
}
.mam-gallery-item img {
display: block;
width: 100%;
height: 240px;
object-fit: cover;
}
.mam-gallery-item figcaption {
padding: 10px 14px;
font-size: 0.85rem;
line-height: 1.5;
}
.mam-gallery-caption {
display: block;
color: var(--mam-text);
font-weight: 500;
margin-bottom: 2px;
}
.mam-gallery-credit {
display: block;
font-size: 0.72rem;
color: #888;
font-style: italic;
}
.mam-gallery-credit::before {
content: '📸 ';
font-style: normal;
}
@media (max-width: 600px) {
.mam-gallery-grid {
grid-template-columns: 1fr;
}
.mam-article__hero img {
max-height: 300px;
}
.mam-article__hero figcaption {
flex-direction: column;
}
} @media (max-width: 960px) {
.mam-hub__title { font-size: 2.2rem; }
.mam-categories-grid { grid-template-columns: repeat(2, 1fr); }
.mam-articles-grid { grid-template-columns: repeat(2, 1fr); }
.mam-article__layout { grid-template-columns: 1fr; gap: 30px; }
.mam-article__sidebar { position: static; }
.mam-article__title { font-size: 2rem; }
.mam-article__content { font-size: 1rem; }
}
@media (max-width: 600px) {
.mam-hub__header { padding: 45px 0 35px; }
.mam-hub__title { font-size: 1.7rem; }
.mam-categories-grid { grid-template-columns: 1fr; }
.mam-articles-grid { grid-template-columns: 1fr; }
.mam-article__header { padding: 32px 0 26px; }
.mam-article__title { font-size: 1.6rem; }
.mam-article__lead { font-size: 1rem; }
.mam-promo { flex-direction: column; }
.mam-article__content p:first-of-type::first-letter { font-size: 2.8rem; }
} .mam-cat-nav {
background: #fff;
border-top: 1px solid var(--mam-border);
border-bottom: 3px solid var(--mam-accent);
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mam-cat-nav .mam-container {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
flex-wrap: nowrap;
}
.mam-cat-nav__home {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--mam-primary-light);
text-decoration: none;
font-size: 1.1rem;
transition: all 0.2s ease;
}
.mam-cat-nav__home:hover {
background: var(--mam-primary);
transform: translateY(-1px);
}
.mam-cat-nav__list {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
flex: 1;
padding: 4px 0;
align-content: center;
justify-content: flex-start;
}
.mam-cat-nav__list::-webkit-scrollbar { display: none; }
.mam-cat-nav__item {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
background: #f5f1e8;
color: var(--mam-text);
text-decoration: none;
border-radius: 18px;
font-family: -apple-system, sans-serif;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid transparent;
white-space: nowrap;
}
.mam-cat-nav__item:hover {
background: var(--mam-primary-light);
color: var(--mam-primary);
border-color: var(--mam-accent);
text-decoration: none;
}
.mam-cat-nav__item.is-active {
background: var(--mam-primary);
color: #fff;
font-weight: 600;
box-shadow: 0 2px 6px rgba(27, 67, 50, 0.25);
}
.mam-cat-nav__item.is-active:hover {
background: var(--mam-primary);
color: #fff;
}
.mam-cat-nav__icon { font-size: 1rem; line-height: 1; }
.mam-cat-nav__label { line-height: 1; } .mam-cat-nav__toggle {
display: none;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--mam-primary, #1b4332);
color: #fff;
border: none;
border-radius: 22px;
font-family: -apple-system, sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
flex: 1;
text-align: left;
transition: background 0.2s;
min-height: 40px;
}
.mam-cat-nav__toggle:hover {
background: var(--mam-primary-dark, #0f2818);
}
.mam-cat-nav__toggle-icon {
font-size: 1.2rem;
line-height: 1;
flex-shrink: 0;
}
.mam-cat-nav__toggle-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}  .mam-cat-nav.is-compact .mam-container,
.mam-cat-nav.is-open .mam-container {
flex-wrap: wrap;
position: relative;
}
.mam-cat-nav.is-compact .mam-cat-nav__toggle {
display: inline-flex;
}
.mam-cat-nav.is-compact .mam-cat-nav__list {
display: none;
position: absolute;
top: 100%;
left: 12px;
right: 12px;
flex-direction: column;
gap: 4px;
overflow: visible;
padding: 12px;
max-height: 70vh;
overflow-y: auto;
order: 3;
background: #fff;
border: 1px solid var(--mam-border, #e5e0d3);
border-top: none;
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 100;
}
.mam-cat-nav.is-compact.is-open .mam-cat-nav__list {
display: flex;
}
.mam-cat-nav.is-compact .mam-cat-nav__item {
padding: 10px 14px;
font-size: 0.95rem;
border-radius: 8px;
justify-content: flex-start;
white-space: normal;
}
.mam-cat-nav.is-compact .mam-cat-nav__label {
display: inline;
}
.mam-cat-nav.is-compact .mam-cat-nav__icon {
font-size: 1.15rem;
} @media (max-width: 768px) {
.mam-cat-nav .mam-container {
padding: 8px 12px;
gap: 8px;
flex-wrap: wrap;
position: relative;
}
.mam-cat-nav__home {
width: 38px; height: 38px;
font-size: 1rem;
}
.mam-cat-nav__toggle {
display: inline-flex;
}
.mam-cat-nav__list {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 4px;
overflow: visible;
padding: 12px;
max-height: 70vh;
overflow-y: auto;
order: 3;
background: #fff;
border-top: 1px solid var(--mam-border, #e5e0d3);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 100;
}
.mam-cat-nav.is-open .mam-cat-nav__list {
display: flex;
}
.mam-cat-nav__item {
padding: 10px 14px;
font-size: 0.95rem;
border-radius: 8px;
justify-content: flex-start;
white-space: normal;
}
.mam-cat-nav__label {
display: inline;
}
.mam-cat-nav__icon { font-size: 1.15rem; }
} .mam-category-card.has-image {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mam-category-card__image {
width: 100%;
height: 180px;
background-size: cover;
background-position: center;
background-color: var(--mam-primary-light, #e8f0eb);
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.mam-category-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.45));
}
.mam-category-card__icon-overlay {
position: relative;
z-index: 2;
margin: 12px;
font-size: 2rem;
background: rgba(255,255,255,0.95);
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.mam-category-card.has-image .mam-category-card__body {
padding: 20px 24px 24px;
}
.mam-category-card.has-image h3 {
margin-top: 0;
} .mam-breadcrumbs {
background: #fff;
border-bottom: 1px solid var(--mam-border, #e5e0d3);
padding: 12px 0;
font-size: 0.9rem;
}
.mam-breadcrumbs .mam-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.mam-breadcrumbs__current {
color: var(--mam-muted, #6b7280);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
@media (max-width: 768px) {
.mam-breadcrumbs {
padding: 10px 0;
font-size: 0.85rem;
}
.mam-breadcrumbs .mam-container {
gap: 3px;
}
.mam-breadcrumbs__current {
max-width: 100%;
}
}.mss-hub,
.mss-service {
--mss-primary: #0F2557;
--mss-primary-light: rgba(15, 37, 87, 0.08);
--mss-accent: #C41A1A;
--mss-gold: #D4AF37;
--mss-text: #222;
--mss-muted: #666;
--mss-border: #e5e5e5;
--mss-bg: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--mss-text);
}
.mss-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} .mss-hub__header {
background: linear-gradient(135deg, var(--mss-primary) 0%, #1a3570 100%);
color: #fff;
padding: 60px 0 50px;
position: relative;
overflow: hidden;
}
.mss-hub__header::before {
content: '';
position: absolute;
right: -100px;
top: -100px;
width: 400px;
height: 400px;
background: rgba(212, 175, 55, 0.08);
border-radius: 50%;
}
.mss-hub__header-inner {
position: relative;
z-index: 2;
max-width: 800px;
}
.mss-hub__badge {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--mss-gold);
background: rgba(212, 175, 55, 0.15);
padding: 6px 14px;
border-radius: 3px;
margin-bottom: 18px;
}
.mss-hub__title {
font-size: 2.6rem;
font-weight: 800;
line-height: 1.15;
margin: 0 0 16px;
letter-spacing: -0.01em;
color: #fff !important;
}
.mss-hub__subtitle {
font-size: 1.1rem;
line-height: 1.6;
opacity: 0.9;
margin: 0 0 20px;
color: #fff !important;
}
.mss-hub__meta {
font-size: 0.9rem;
opacity: 0.8;
display: flex;
gap: 10px;
flex-wrap: wrap;
color: #fff !important;
}
.mss-hub__header,
.mss-hub__header * { }
.mss-hub__header h1,
.mss-hub__header h1 a,
.mss-hub__header h2,
.mss-hub__header p,
.mss-hub__header span {
color: #fff !important;
} .mss-quick-section,
.mss-all-services {
padding: 50px 0;
background: #fff;
}
.mss-all-services {
background: var(--mss-bg);
}
.mss-section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--mss-primary);
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--mss-primary);
display: inline-block;
} .mss-quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 16px;
}
.mss-quick-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--mss-border);
border-radius: 6px;
text-decoration: none;
color: var(--mss-text);
transition: all 0.2s ease;
position: relative;
}
.mss-quick-card:hover {
border-color: var(--mss-primary);
box-shadow: 0 4px 16px rgba(15, 37, 87, 0.1);
transform: translateY(-2px);
color: var(--mss-text);
}
.mss-quick-card__icon {
font-size: 2rem;
flex-shrink: 0;
line-height: 1;
}
.mss-quick-card__body {
flex: 1;
}
.mss-quick-card__body h3 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 4px;
color: var(--mss-primary);
}
.mss-quick-card__body p {
font-size: 0.85rem;
color: var(--mss-muted);
line-height: 1.45;
margin: 0;
}
.mss-quick-card__arrow {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--mss-primary);
font-size: 1.2rem;
opacity: 0;
transition: all 0.2s ease;
}
.mss-quick-card:hover .mss-quick-card__arrow {
opacity: 1;
right: 14px;
} .mss-category-block {
margin-bottom: 50px;
}
.mss-category-header {
margin-bottom: 20px;
}
.mss-category-name {
font-size: 1.3rem;
font-weight: 700;
color: var(--mss-primary);
margin: 0 0 4px;
padding-left: 14px;
border-left: 4px solid var(--mss-accent);
}
.mss-category-desc {
font-size: 0.95rem;
color: var(--mss-muted);
line-height: 1.55;
margin: 0 0 0 18px;
} .mss-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.mss-service-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--mss-border);
border-radius: 6px;
padding: 20px;
text-decoration: none;
color: var(--mss-text);
transition: all 0.2s ease;
border-top: 3px solid transparent;
}
.mss-service-card:hover {
border-color: var(--mss-border);
border-top-color: var(--mss-accent);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transform: translateY(-3px);
color: var(--mss-text);
}
.mss-service-card__icon-wrap {
margin-bottom: 10px;
}
.mss-service-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 1.6rem;
background: var(--mss-primary-light);
border-radius: 10px;
}
.mss-service-card__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--mss-primary);
line-height: 1.3;
margin: 0 0 8px;
}
.mss-service-card__desc {
font-size: 0.9rem;
color: var(--mss-muted);
line-height: 1.55;
margin: 0 0 14px;
flex-grow: 1;
}
.mss-service-card__meta {
font-size: 0.78rem;
color: var(--mss-muted);
display: flex;
gap: 14px;
padding-top: 12px;
border-top: 1px solid var(--mss-border);
flex-wrap: wrap;
} .mss-hub__footer,
.mss-service__footer {
padding: 30px 0;
background: #fff;
border-top: 1px solid var(--mss-border);
}
.mss-disclaimer {
background: #fffbeb;
border: 1px solid #fcd34d;
border-left: 4px solid #f59e0b;
padding: 16px 20px;
border-radius: 4px;
font-size: 0.92rem;
line-height: 1.6;
color: #78350f;
}
.mss-disclaimer strong {
color: #92400e;
}
.mss-disclaimer a {
color: var(--mss-primary);
font-weight: 600;
}
.mss-empty {
text-align: center;
padding: 60px 20px;
color: var(--mss-muted);
} .mss-breadcrumbs {
padding: 20px 0;
background: var(--mss-bg);
border-bottom: 1px solid var(--mss-border);
font-size: 0.88rem;
}
.mss-breadcrumbs a {
color: var(--mss-primary);
text-decoration: none;
font-weight: 500;
}
.mss-breadcrumbs a:hover {
text-decoration: underline;
}
.mss-breadcrumbs span {
margin: 0 8px;
color: var(--mss-muted);
}
.mss-service__header {
padding: 40px 0 30px;
background: #fff;
border-bottom: 1px solid var(--mss-border);
}
.mss-service__icon {
font-size: 3rem;
line-height: 1;
margin-bottom: 14px;
}
.mss-service__title {
font-size: 2.2rem;
font-weight: 800;
color: var(--mss-primary) !important;
margin: 0 0 14px;
line-height: 1.15;
letter-spacing: -0.01em;
}
.mss-service__lead {
font-size: 1.15rem;
line-height: 1.6;
color: var(--mss-text);
margin: 0 0 24px;
max-width: 800px;
}
.mss-service__quickinfo {
display: flex;
gap: 28px;
flex-wrap: wrap;
padding: 18px 24px;
background: var(--mss-primary-light);
border-radius: 8px;
max-width: 600px;
}
.mss-quickinfo__item {
display: flex;
flex-direction: column;
gap: 4px;
}
.mss-quickinfo__label {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mss-muted);
}
.mss-quickinfo__value {
font-size: 1.05rem;
font-weight: 700;
color: var(--mss-primary);
} .mss-service__body {
padding: 40px 0;
background: #fff;
}
.mss-service__layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
align-items: start;
}
.mss-service__main {
min-width: 0;
} .mss-alert {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 14px 18px;
border-radius: 4px;
margin-bottom: 30px;
font-size: 0.95rem;
line-height: 1.55;
color: #78350f;
}
.mss-alert strong {
color: #92400e;
} .mss-section {
margin-bottom: 36px;
}
.mss-section h2 {
font-size: 1.4rem;
font-weight: 700;
color: var(--mss-primary);
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 2px solid var(--mss-border);
display: flex;
align-items: center;
gap: 10px;
}
.mss-section-icon {
font-size: 1.3rem;
}
.mss-service__content p {
font-size: 1.02rem;
line-height: 1.75;
margin: 0 0 16px;
color: var(--mss-text);
}
.mss-service__content strong {
color: var(--mss-primary);
} .mss-docs-list {
list-style: none;
padding: 0;
margin: 0;
}
.mss-docs-list li {
position: relative;
padding: 12px 14px 12px 44px;
margin-bottom: 8px;
background: var(--mss-bg);
border-left: 3px solid var(--mss-primary);
border-radius: 3px;
font-size: 0.96rem;
line-height: 1.55;
}
.mss-docs-list li::before {
content: '✓';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
background: var(--mss-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
} .mss-steps-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step;
}
.mss-steps-list li {
position: relative;
padding: 14px 14px 14px 56px;
margin-bottom: 12px;
background: #fff;
border: 1px solid var(--mss-border);
border-radius: 6px;
font-size: 0.96rem;
line-height: 1.6;
counter-increment: step;
transition: all 0.2s ease;
}
.mss-steps-list li:hover {
border-color: var(--mss-primary);
box-shadow: 0 2px 8px rgba(15, 37, 87, 0.08);
}
.mss-steps-list li::before {
content: counter(step);
position: absolute;
left: 14px;
top: 14px;
width: 30px;
height: 30px;
background: var(--mss-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 700;
} .mss-service__sidebar {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 20px;
}
.mss-sidebar-box {
background: var(--mss-bg);
border: 1px solid var(--mss-border);
border-radius: 6px;
padding: 18px 20px;
}
.mss-sidebar-box h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--mss-primary);
margin: 0 0 14px;
}
.mss-sidebar-box p {
font-size: 0.92rem;
line-height: 1.55;
margin: 0 0 10px;
}
.mss-sidebar-box p small {
color: var(--mss-muted);
font-size: 0.82rem;
}
.mss-sidebar-box a {
color: var(--mss-primary);
text-decoration: none;
font-weight: 500;
}
.mss-sidebar-box a:hover {
text-decoration: underline;
}
.mss-sidebar-btn {
display: block;
padding: 12px 16px;
background: #fff;
border: 1.5px solid var(--mss-border);
border-radius: 4px;
text-align: center;
font-weight: 600;
font-size: 0.93rem;
margin-bottom: 10px;
transition: all 0.2s ease;
color: var(--mss-primary) !important;
text-decoration: none !important;
}
.mss-sidebar-btn:hover {
background: var(--mss-primary-light);
border-color: var(--mss-primary);
text-decoration: none !important;
}
.mss-sidebar-btn--primary {
background: var(--mss-primary);
color: #fff !important;
border-color: var(--mss-primary);
}
.mss-sidebar-btn--primary:hover {
background: #0a1a3e;
color: #fff !important;
border-color: #0a1a3e;
} .mss-related-list {
list-style: none;
padding: 0;
margin: 0;
}
.mss-related-list li {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--mss-border);
}
.mss-related-list li:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mss-related-list a {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
line-height: 1.4;
}
.mss-related-icon {
flex-shrink: 0;
font-size: 1.1rem;
} .mss-shortcode-wrap {
margin: 30px 0;
}
.mss-shortcode-wrap .mss-section-title {
margin-bottom: 20px;
}
.mss-shortcode-footer {
text-align: center;
margin-top: 24px;
}
.mss-view-all-btn {
display: inline-block;
padding: 12px 28px;
background: var(--mss-primary);
color: #fff !important;
border-radius: 4px;
text-decoration: none !important;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.mss-view-all-btn:hover {
background: #0a1a3e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 37, 87, 0.2);
} .mss-promo {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 24px 22px;
border-radius: 8px;
margin: 20px 0;
}
.mss-promo--dark {
background: linear-gradient(135deg, #0F2557 0%, #1a3570 100%);
color: #fff;
}
.mss-promo--dark h3 {
color: #fff !important;
margin: 0 0 8px !important;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
}
.mss-promo--dark p {
color: rgba(255, 255, 255, 0.88) !important;
font-size: 0.92rem;
line-height: 1.55;
margin: 0 0 14px !important;
}
.mss-promo--light {
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-left: 4px solid var(--mss-primary);
}
.mss-promo--light h3 {
color: var(--mss-primary) !important;
margin: 0 0 8px !important;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
}
.mss-promo--light p {
color: var(--mss-text) !important;
font-size: 0.92rem;
line-height: 1.55;
margin: 0 0 14px !important;
}
.mss-promo__icon {
font-size: 2.4rem;
line-height: 1;
flex-shrink: 0;
}
.mss-promo__body {
flex: 1;
}
.mss-promo__btn {
display: inline-block;
padding: 8px 18px;
background: var(--mss-gold);
color: #0F2557 !important;
border-radius: 4px;
text-decoration: none !important;
font-weight: 700;
font-size: 0.88rem;
transition: all 0.2s ease;
}
.mss-promo__btn:hover {
background: #c49a2e;
transform: translateY(-1px);
}
.mss-promo--light .mss-promo__btn {
background: var(--mss-primary);
color: #fff !important;
}
.mss-promo--light .mss-promo__btn:hover {
background: #0a1a3e;
} .widget .mss-promo {
flex-direction: column;
padding: 18px 16px;
gap: 10px;
}
.widget .mss-promo__icon {
font-size: 1.8rem;
}
.widget .mss-promo h3 {
font-size: 1rem !important;
}
.widget .mss-promo p {
font-size: 0.85rem !important;
}
@media (max-width: 600px) {
.mss-promo {
flex-direction: column;
padding: 20px 18px;
}
} @media (max-width: 960px) {
.mss-hub__title { font-size: 2.1rem; }
.mss-quick-grid { grid-template-columns: repeat(2, 1fr); }
.mss-services-grid { grid-template-columns: repeat(2, 1fr); }
.mss-service__layout { grid-template-columns: 1fr; gap: 30px; }
.mss-service__sidebar { position: static; }
.mss-service__title { font-size: 1.8rem; }
}
@media (max-width: 600px) {
.mss-hub__header { padding: 40px 0 32px; }
.mss-hub__title { font-size: 1.65rem; }
.mss-hub__subtitle { font-size: 0.98rem; }
.mss-quick-grid { grid-template-columns: 1fr; }
.mss-services-grid { grid-template-columns: 1fr; }
.mss-service__header { padding: 30px 0 24px; }
.mss-service__title { font-size: 1.5rem; }
.mss-service__lead { font-size: 1rem; }
.mss-service__quickinfo { gap: 18px; padding: 14px 16px; }
.mss-section h2 { font-size: 1.2rem; }
.mss-steps-list li { padding: 12px 12px 12px 48px; font-size: 0.92rem; }
.mss-docs-list li { padding: 10px 12px 10px 38px; }
}