/* MP Site Code — snippet #7503859. Edited in wp-admin; do not edit this file. */ /* ========================================================= MENSTRUAL PORTAL — CATEGORY ARCHIVE One template, accent driven by the category body class. ========================================================= */ :root{ --ink:#1A1A1A; --muted:#645A60; --line:#F1E0E6; --r-lg:24px; --shadow-md:0 14px 40px rgba(0,0,0,.09); /* default accent (fallback = brand berry) */ --cat:#8E2C4E; --cat-soft:#F7E7EB; --cat-wash:#FBF1F3; } /* Per-category accent — WordPress adds .category-{slug} to */ body.category-health { --cat:#8E2C4E; --cat-soft:#F7E7EB; --cat-wash:#FBF1F3; } body.category-wellness { --cat:#5A4B87; --cat-soft:#F3EEFB; --cat-wash:#F6F1FC; } body.category-empowerment{ --cat:#38707F; --cat-soft:#D9EEF4; --cat-wash:#EBF6F9; } /* light blue from #A1D5E2 */ body.category-products { --cat:#3A5349; --cat-soft:#E7F0EB; --cat-wash:#EFF6F2; } /* sage (was empowerment) */ body.category-awareness { --cat:#B15C38; --cat-soft:#FBE6DC; --cat-wash:#FDF2EC; } /* terracotta (was products) */ body.category-hygiene { --cat:#2E7D82; --cat-soft:#DCF0F0; --cat-wash:#ECF8F8; } /* light teal */ /* remove any inherited gap above the hero */ .cat-main{margin-block-start:0;padding-block-start:0;} .cat-main > :first-child{margin-block-start:0;} /* ---------- HERO ---------- */ .cat-hero{ background:var(--cat-wash); border-bottom:1px solid var(--line); padding:40px 0 40px; margin-block-start:0; } section.cat-hero{display:block;} /* never let the section become flex/grid */ .cat-hero__inner{ max-width:1120px;margin-inline:auto;padding-inline:24px; } .cat-hero .cat-hero__inner{display:block;} /* stack, don't lay out side by side */ .cat-hero__inner > *{display:block;margin-inline:0;max-width:none;} .cat-hero__inner .eyebrow{display:inline-flex;} /* keep the pill/bar look */ .cat-hero .eyebrow{ font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--cat);display:inline-flex;align-items:center;gap:8px;margin:0 0 8px; } .cat-hero .eyebrow::before{ content:"";width:20px;height:2px;background:var(--cat);border-radius:2px; } .cat-hero .cat-h1{ font-size:clamp(2.1rem,4.2vw,2.9rem);line-height:1.2;letter-spacing:-.02em; font-weight:800;color:#000;margin:0 0 14px; } .cat-hero .cat-desc{ font-size:1.05rem;color:var(--muted);max-width:620px;margin:0; } /* ---------- ARTICLES ---------- */ .articles-section{padding:60px 24px 80px;} /* grid (Post Template renders a

) */ .article-grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:28px; } .article-grid > li{ position:relative;cursor:pointer; margin:0;display:flex;flex-direction:column; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:#fff;transition:transform .2s,box-shadow .2s; } .article-grid > li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} /* whole card is clickable — the title's link is stretched over the card */ .article-body .wp-block-post-title a::after{ content:"";position:absolute;inset:0;z-index:1; } /* thumb — image shown at its actual proportions, with category pill overlaid */ .article-media{position:relative;margin:0;} .article-thumb{margin:0;display:block;} .article-thumb img{display:block;width:100%;height:auto;} /* category pill — same design as the homepage cards */ .article-tag{ position:absolute;left:16px;bottom:16px;z-index:2;margin:0;pointer-events:none; font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:6px 13px;border-radius:100px; background:rgba(255,255,255,.92);color:var(--ink); } .article-tag a{color:inherit;text-decoration:none;} /* body */ .article-body{padding:20px 20px 22px;gap:8px;flex:1;} .article-body .wp-block-post-title{ font-size:1.08rem;line-height:1.5;letter-spacing:-.02em;font-weight:800;margin:0; } .article-body .wp-block-post-title a{color:var(--ink);text-decoration:none;} .article-body .wp-block-post-title a:hover{color:var(--cat);} .article-body .wp-block-post-excerpt{font-size:.88rem;color:var(--muted);margin:0;flex:1;} .article-body .wp-block-post-excerpt__more-text{display:none;} .article-meta{font-size:.76rem;color:var(--muted);margin:0;} .article-body .mp-rev-by{display:block;font-size:.76rem;color:var(--muted);margin-top:4px;} .article-body .mp-rev-name{color:var(--cat);font-weight:700;} /* ---------- PAGINATION ---------- */ .pagination{margin-top:52px;gap:8px;align-items:center;} .pagination .page-numbers, .pagination .wp-block-query-pagination-previous, .pagination .wp-block-query-pagination-next{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;padding:0 12px;border-radius:10px; border:1.5px solid var(--line);background:#fff; font-weight:700;font-size:.86rem;color:var(--ink);text-decoration:none; } .pagination .page-numbers:hover, .pagination .wp-block-query-pagination-previous:hover, .pagination .wp-block-query-pagination-next:hover{border-color:var(--cat);} .pagination .page-numbers.current{background:var(--cat);border-color:var(--cat);color:#fff;} /* ---------- RESPONSIVE ---------- */ @media(max-width:960px){ .article-grid{grid-template-columns:1fr 1fr;} } @media(max-width:640px){ .article-grid{grid-template-columns:1fr;} .cat-hero__inner{padding-left:18px;padding-right:18px;} .articles-section{padding:40px 18px 56px;} } @media(prefers-reduced-motion:reduce){ .article-grid > li{transition:none;} } /* ---------- SELF ---------- */ main#wp--skip-link--target{ margin-top:0 !important; }