/* * Pregnancy month pages (/pregnancy/month-1/ through /pregnancy/month-12/), * shared styling. * * The trimester color comes from four custom properties set on * .kd-month-page. The defaults below are the first trimester blue set, * matching /month-to-month-diary/ exactly, so Month 1 through Month 3 * need no per page Custom CSS at all. For months 4 through 12, paste * just this small block into that page's own Custom CSS panel, with * the right set of values for its trimester: * * .kd-month-page { * --kd-month-accent: #2f9e77; * --kd-month-accent-dark: #217155; * --kd-month-soft: #eaf7f2; * --kd-month-border: #b5decf; * } * * Trimester 1 (months 1-3, the default below): * accent #3f6fb3, dark #2c517f, soft #eaf1fb, border #c9d9ef * Trimester 2 (months 4-6): * accent #2f9e77, dark #217155, soft #eaf7f2, border #b5decf * Trimester 3 (months 7-9): * accent #d68a2c, dark #9a631f, soft #fff5e6, border #f3d7b1 * Trimester 4 (months 10-12): * accent #c05a7c, dark #8a4059, soft #fdeef2, border #ebc4d0 * * This block is wrapped in :where() on purpose. :where() carries zero * specificity, so this default always loses to a plain ".kd-month-page" * rule in a page's own Custom CSS, no matter which stylesheet happens to * print first in the page . Without :where() here, both rules have * identical specificity and it comes down to source order, and Elementor * doesn't guarantee its per-page Custom CSS prints after this plugin's * stylesheet, so a page's override could silently lose that tie and show * the default blue instead. Do not remove the :where() wrapper. */ :where(.kd-month-page) { --kd-month-accent: #3f6fb3; --kd-month-accent-dark: #2c517f; --kd-month-soft: #eaf1fb; --kd-month-border: #c9d9ef; } .kd-month-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em 1.4em; background: linear-gradient(135deg, var(--kd-month-accent), var(--kd-month-accent-dark)); color: #ffffff; border-radius: 12px; padding: 1.1em 1.4em; margin: 1.2em 0 1.6em; font-size: 0.98em; } .kd-month-banner strong { font-size: 1.15em; } .kd-month-banner span { opacity: 0.92; } .kd-month-page h2 { color: var(--kd-month-accent-dark); } .kd-month-page a { color: var(--kd-month-accent-dark); } .kd-month-note { background: var(--kd-month-soft); border: 1px solid var(--kd-month-border); border-left: 4px solid var(--kd-month-accent); border-radius: 10px; padding: 1em 1.2em; margin: 1.4em 0; font-size: 0.97em; color: #1f2937; } .kd-month-note strong { color: var(--kd-month-accent-dark); } /* The "call your doctor" box stays red regardless of trimester, on * every month page, since a warning shouldn't blend into the theme * color, it should look different from everything else on the page. */ .kd-month-alert { background: #fdeceb; border: 1px solid #eba39b; border-left: 4px solid #c0392b; border-radius: 10px; padding: 1em 1.2em; margin: 1.4em 0; color: #8a2a20; } .kd-month-alert strong { color: #8a2a20; }