/* ========================================================================== NutritiousDr — Elementor effect helpers Signature mockup effects that native Elementor controls can't express (3-stop gradients, watercolor washes, organic blob, featured badge). Applied to containers/widgets via CSS-class settings. Keeps the build pixel-faithful while the layout stays native Elementor. ========================================================================== */ /* ---- Signature gradient backgrounds (3-stop / branded) ---- */ .ndr-hero-bg { background: linear-gradient(118deg, #FBEEE6 0%, #FAE7EC 52%, #E9F1ED 100%) !important; } .ndr-method-bg { background: linear-gradient(160deg, #6FC5C5 0%, #5F8F89 100%) !important; } .ndr-promise-bg { background: linear-gradient(120deg, #D9A38F 0%, #E76F51 100%) !important; } /* ---- Watercolor washes (soft radial bleed; sit behind content) ---- */ .ndr-wash { position: relative; overflow: hidden; } .ndr-wash > .e-con-inner, .ndr-wash > .elementor-widget-wrap { position: relative; z-index: 1; } .ndr-wash::before { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; } .ndr-wash-rose-tr::before { width: 360px; height: 360px; top: -100px; right: -80px; background: radial-gradient(circle, rgba(217,163,143,.16) 0%, transparent 70%); } .ndr-wash-teal-bl::before { width: 340px; height: 340px; bottom: -110px; left: -90px; background: radial-gradient(circle, rgba(111,197,197,.16) 0%, transparent 70%); } .ndr-wash-tangerine-tl::before { width: 320px; height: 320px; top: 30px; left: -100px; background: radial-gradient(circle, rgba(231,111,81,.15) 0%, transparent 70%); } /* ---- Organic blob mask for hero/feature imagery ---- */ .ndr-blob, .ndr-blob .elementor-widget-container, .ndr-blob img { border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%; } .ndr-blob { overflow: hidden; } /* ---- Image placeholder (premium, intentional — pending real photos) ---- */ /* Optimized DOM output is ON → no .elementor-widget-container; style widgets directly. */ .ndr-ph { display: block; line-height: 0; border-radius: 18px; overflow: hidden; width: 100%; } .ndr-ph .ndr-ph-img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 18px; } .ndr-ph.ndr-blob, .ndr-ph.ndr-blob .ndr-ph-img { border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%; } /* ---- Founder gradient-monogram avatar (until real headshots) ---- */ .ndr-avatar { width: 104px !important; height: 104px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 600; flex: 0 0 auto; } .ndr-avatar div, .ndr-avatar p { margin: 0; color: #fff; } .ndr-avatar-bb { background: linear-gradient(135deg, #E3B6A4, #E76F51) !important; } .ndr-avatar-ne { background: linear-gradient(135deg, #5F8F89, #6FC5C5) !important; } .ndr-avatar-photo { overflow: hidden !important; padding: 0 !important; } .ndr-avatar-photo .elementor-widget-container { width: 100%; height: 100%; } .ndr-avatar-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; } /* Real face-centered portraits in blob placeholders */ .ndr-ph-real { object-position: center; } /* About-page circular portraits (square face-crops) */ .ndr-portrait { aspect-ratio: 1 / 1; width: 100%; max-width: 340px; margin: 8px auto 0; border-radius: 50%; overflow: hidden; } .ndr-portrait .ndr-ph-img { width: 100%; height: 100%; min-height: 0 !important; object-fit: cover; border-radius: 50%; } .ndr-avatar-sm { width: 46px !important; height: 46px !important; font-size: 17px !important; } /* ---- Cards ---- */ .ndr-card.e-con { background: #fff; border: 1px solid #E5DBCA; border-radius: 22px; } .ndr-pillar { border-top: 3px solid #D9A38F !important; border-radius: 22px; } .ndr-pillar-1 { border-top-color: #D9A38F !important; } .ndr-pillar-2 { border-top-color: #6FC5C5 !important; } .ndr-pillar-3 { border-top-color: #5B8DB8 !important; } /* R = Resilience -> Mediterranean Blue (Brand Guide v2) */ /* Smaller image placeholder for blog/article card thumbnails */ .ndr-ph.ndr-ph-thumb { border-radius: 14px 14px 0 0; } .ndr-ph.ndr-ph-thumb .ndr-ph-img { min-height: 158px; border-radius: 14px 14px 0 0; } /* Program cards */ .ndr-prog { background: #fff; border: 1px solid #E5DBCA; border-radius: 16px; position: relative; } /* Pin the program CTA to the bottom so buttons align across cards */ .ndr-prog .elementor-widget-button { margin-top: auto; } .ndr-prog-featured { border: 2px solid #D9A38F !important; box-shadow: 0 18px 40px rgba(217,163,143,.16) !important; } .ndr-badge { position: absolute !important; top: -14px; left: 50%; transform: translateX(-50%); background: #D9A38F; color: #fff; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 5px 14px; border-radius: 20px; white-space: nowrap; z-index: 2; } .ndr-badge span { color: #fff; } /* Method step cards (on teal band) */ .ndr-step.e-con { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; } /* Lab tiles (on teal band) */ .ndr-labtile.e-con { background: rgba(255,255,255,.08); border-radius: 10px; } /* ---- Sticky header chrome ---- */ .ndr-header.e-con, .ndr-header .e-con-inner { background: #FBF5EF; } .ndr-header { border-bottom: 1px solid #E5DBCA; } /* ---- Topbar announcement ---- */ .ndr-topbar { background: #5F8F89; } /* ---- Star rating ---- */ .ndr-stars { color: #E76F51 !important; font-size: 17px; letter-spacing: 3px; } /* ---- Utility: pill input/buttons consistency handled by Elementor globals ---- */ /* ---- Styled lists (rendered as HTML in text widgets — reliable) ---- */ .ndr-check ul, .ndr-dash ul { list-style: none; margin: 0; padding: 0; } .ndr-check li, .ndr-dash li { position: relative; padding-left: 26px; margin: 8px 0; line-height: 1.55; } .ndr-check li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #6FC5C5; font-weight: 800; } .ndr-dash li::before { content: "\2013"; position: absolute; left: 4px; top: 0; color: #D9A38F; font-weight: 800; } .ndr-prog-inc ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #E5DBCA; } .ndr-prog-inc li { position: relative; padding-left: 22px; margin: 7px 0; font-size: 13.3px; color: #5b4c52; } .ndr-prog-inc li::before { content: "\2713"; position: absolute; left: 0; color: #6FC5C5; font-weight: 800; } /* ---- Credibility strip inline items (white for AA contrast on dark-teal bg) ---- */ .ndr-strip b { color: #ffffff; } /* ---- Newsletter inline form polish (Elementor form on dark) ---- */ .ndr-news .elementor-field-textual { border-radius: 40px !important; padding: 14px 20px !important; border: none !important; } .ndr-news .elementor-button { border-radius: 40px !important; } /* ---- Together italic line (practitioners) ---- */ .ndr-together { font-family: 'Playfair Display', serif; font-style: italic; } /* ---- Hero H1 (raw-HTML heading → responsive sizing via class) ---- */ .ndr-hero-h1 { font-size: 55px; margin: 0; } /* ---- Responsive: tighten + stack on mobile ---- */ @media (max-width: 1024px) { .ndr-hero-h1 { font-size: 42px; } /* Tablet + mobile header = logo + hamburger only (CTA lives in hero + sections). */ .ndr-header .elementor-widget-button { display: none !important; } } @media (max-width: 767px) { .ndr-ph .ndr-ph-img { min-height: 220px; } .ndr-wash::before { width: 220px; height: 220px; } .ndr-hero-h1 { font-size: 33px; line-height: 1.16; } .ndr-avatar { width: 88px !important; height: 88px !important; font-size: 28px; } } /* ========================================================================== ADDITIONS — article single, article cards, program cards, how-it-works steps (scoped classes; native Elementor still editable in wp-admin) ========================================================================== */ /* ---- P1: Single-article template ---- */ .ndr-crumb { font-family: var(--ndr-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--ndr-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ndr-crumb a { color: var(--ndr-teal-d); text-decoration: none; } .ndr-crumb a:hover { text-decoration: underline; } .ndr-crumb span { color: var(--ndr-line); } .ndr-crumb .ndr-crumb-cur { color: var(--ndr-soft); } .ndr-byline { font-family: var(--ndr-sans); font-size: 13.5px; color: var(--ndr-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } .ndr-byline-sep { color: var(--ndr-line); } .ndr-byline-author strong { color: var(--ndr-teal-d); font-weight: 800; } /* Article body rhythm + on-brand headings/links inside post content */ .ndr-article-body { font-family: var(--ndr-sans); color: #374151; } .ndr-article-body p { margin: 0 0 1.05em; font-size: 17px; line-height: 1.78; } .ndr-article-body h2 { font-family: var(--ndr-serif); color: var(--ndr-teal-d); font-size: 27px; line-height: 1.22; font-weight: 600; margin: 1.7em 0 .5em; } .ndr-article-body h3 { font-family: var(--ndr-serif); color: var(--ndr-ink); font-size: 21px; line-height: 1.25; font-weight: 600; margin: 1.4em 0 .4em; } .ndr-article-body ul, .ndr-article-body ol { margin: 0 0 1.1em; padding-left: 1.25em; } .ndr-article-body li { margin: .4em 0; line-height: 1.7; } .ndr-article-body a { color: var(--ndr-rose-d); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .ndr-article-body a:hover { color: var(--ndr-rose); } .ndr-article-body strong { color: var(--ndr-ink); } .ndr-article-body em { color: inherit; } /* ---- P5: Article cards on the /articles/ archive (Elementor classic posts) ---- */ .ndr-artgrid .elementor-posts-container { align-items: stretch; } .ndr-artgrid .elementor-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ndr-line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px rgba(55,65,81,.06); transition: box-shadow .2s ease, transform .2s ease; height: 100%; } .ndr-artgrid .elementor-post:hover { box-shadow: 0 16px 38px rgba(55,65,81,.12); transform: translateY(-3px); } /* Tinted brand header strip (no featured image on these posts) */ .ndr-artgrid .elementor-post::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, #D9A38F 0%, #E76F51 55%, #6FC5C5 100%); } .ndr-artgrid .elementor-post__thumbnail { display: none; } .ndr-artgrid .elementor-post__text { padding: 22px 24px 24px; margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; } .ndr-artgrid .elementor-post__title { margin: 0 0 8px; } .ndr-artgrid .elementor-post__title a { font-family: var(--ndr-serif); font-weight: 600; font-size: 20px; line-height: 1.24; color: var(--ndr-ink); text-decoration: none; } .ndr-artgrid .elementor-post__title a:hover { color: var(--ndr-rose-d); } .ndr-artgrid .elementor-post__meta-data { margin: 0 0 10px; font-family: var(--ndr-sans); font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ndr-tangerine); } .ndr-artgrid .elementor-post__excerpt p { font-family: var(--ndr-sans); font-size: 14px; line-height: 1.6; color: #5b4c52; margin: 0; } .ndr-artgrid .elementor-post__read-more { margin-top: auto; padding-top: 14px; font-family: var(--ndr-sans); font-weight: 800; font-size: 13.5px; color: var(--ndr-rose-d); text-decoration: none; align-self: flex-start; } .ndr-artgrid .elementor-post__read-more:hover { color: var(--ndr-rose); } /* Pagination polish */ .ndr-artgrid .elementor-pagination { margin-top: 36px; text-align: center; } .ndr-artgrid .page-numbers { display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0 10px; margin: 0 3px; border-radius: 999px; font-family: var(--ndr-sans); font-weight: 700; font-size: 14px; color: var(--ndr-teal-d); border: 1px solid var(--ndr-line); text-decoration: none; background: #fff; } .ndr-artgrid .page-numbers.current { background: var(--ndr-rose); color: #fff; border-color: var(--ndr-rose); } .ndr-artgrid .page-numbers:hover:not(.current) { border-color: var(--ndr-rose); } /* ---- P4: Program cards (home programs grid) — stronger hierarchy ---- */ .ndr-prog.e-con { border: 1px solid var(--ndr-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(55,65,81,.06); transition: box-shadow .2s ease, transform .2s ease; } .ndr-prog.e-con:hover { box-shadow: 0 16px 38px rgba(55,65,81,.12); transform: translateY(-3px); } /* 2-column card header: NAME (serif, left) | PRICE + duration (right) */ .ndr-prog-headwrap .elementor-widget-container, .ndr-prog-headwrap { width: 100%; } .ndr-prog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%; } .ndr-prog-name { font-family: var(--ndr-serif); font-weight: 600; font-size: 24px; line-height: 1.16; color: var(--ndr-ink); margin: 0; flex: 1 1 auto; min-width: 0; } .ndr-prog-pricewrap { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 0 0 auto; line-height: 1; } .ndr-prog-amt { font-family: var(--ndr-serif); font-size: 34px; font-weight: 700; line-height: 1; color: var(--ndr-rose); white-space: nowrap; } .ndr-prog-suf { font-family: var(--ndr-sans); font-size: 12px; font-weight: 600; color: var(--ndr-soft); margin-top: 3px; white-space: nowrap; } .ndr-prog-for { margin-top: -2px; } .ndr-prog-dur { padding-bottom: 12px; border-bottom: 1px solid var(--ndr-line); } .ndr-prog-out { margin-top: 2px; } /* Featured tier — make it clearly the hero card */ .ndr-prog-featured.e-con { border: 2px solid var(--ndr-rose) !important; box-shadow: 0 22px 50px rgba(217,163,143,.24) !important; background: linear-gradient(180deg, #fff 0%, #fffaf7 100%) !important; } .ndr-prog-featured.e-con:hover { transform: translateY(-4px); } .ndr-badge { box-shadow: 0 6px 14px rgba(217,163,143,.35); } /* HER row label */ .ndr-prog-rowlabel { text-align: center; margin: 6px 0 2px; } .ndr-prog-rowlabel-k { display: block; font-family: var(--ndr-serif); font-weight: 600; font-size: 27px; color: var(--ndr-teal-d); line-height: 1.2; } .ndr-prog-rowlabel-s { display: block; font-family: var(--ndr-sans); font-size: 13.5px; font-weight: 600; color: var(--ndr-soft); margin-top: 2px; } /* Premium banner card (Transformation) — legacy class, retained for safety */ .ndr-prog-wide.e-con { border-color: var(--ndr-gold) !important; box-shadow: 0 16px 40px rgba(233,196,106,.18) !important; } /* ---- P4b: Program card width family + premium capstone ---- */ /* Begin tier: constrain the 2-up to a centered ~760px so each card lands at ~362px — matching the loved 3-across HER cards. The inner grid already computes calc(50% - 12px) from this width. */ .ndr-prog-begin { max-width: 778px; margin-left: auto; margin-right: auto; } .ndr-prog-begin > .e-con-inner { width: 100%; } /* Premium capstone (Transformation): centered, ~452px, richer tinted bg + gold accent */ .ndr-prog-cap.e-con { width: 357px !important; max-width: 357px !important; margin-left: auto !important; margin-right: auto !important; border: 2px solid var(--ndr-gold) !important; background: linear-gradient(180deg, #fffaf3 0%, #fdf1e6 100%) !important; box-shadow: 0 20px 48px rgba(233,196,106,.22) !important; text-align: center; } .ndr-prog-cap.e-con:hover { transform: translateY(-3px); } /* Capstone: stack the header centered (name over price) instead of 2-col split */ .ndr-prog-cap .ndr-prog-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; } .ndr-prog-cap .ndr-prog-pricewrap { align-items: center; text-align: center; } /* Center every content row inside the capstone */ .ndr-prog-cap .ndr-prog-dur, .ndr-prog-cap .ndr-prog-out, .ndr-prog-cap .ndr-prog-for, .ndr-prog-cap .elementor-widget-heading .elementor-heading-title, .ndr-prog-cap .elementor-widget-text-editor { text-align: center !important; } /* Center the ✓ list as a block while keeping ticks left-aligned to text */ .ndr-prog-cap .ndr-prog-inc ul { display: inline-block; text-align: left; } .ndr-prog-cap .ndr-prog-inc { text-align: center; } .ndr-prog-cap .elementor-widget-button { align-self: center; } /* ---- P3: Lab "How it works" 1-2-3 step rhythm ---- */ .ndr-howstep { align-items: flex-start; } .ndr-howstep .ndr-howstep-num .elementor-heading-title, .ndr-howstep .ndr-howstep-num { margin-bottom: 4px; padding-bottom: 8px; line-height: 1; } .ndr-howstep .ndr-howstep-h { margin-top: 2px; } @media (max-width: 767px) { .ndr-artgrid .elementor-post__title a { font-size: 19px; } .ndr-prog-amt { font-size: 30px; } /* Byline wraps to two lines on phones — drop the dangling inline separator. */ .ndr-byline .ndr-byline-sep { display: none; } } /* ========================================================================== P4c: PROGRAMS SECTION — soft feminine vibe + refined 2-col card header (scoped to .ndr-prog-section; brand-on; client-editable via Elementor class) ========================================================================== */ /* Section background: layered blush→cream gradient so it isn't flat. The .ndr-wash-rose-tr blob still bleeds rose in the top-right above this. */ .ndr-prog-section.e-con, .ndr-prog-section { background: radial-gradient(120% 80% at 85% 0%, rgba(217,163,143,.10) 0%, transparent 55%), radial-gradient(110% 70% at 8% 100%, rgba(231,111,81,.08) 0%, transparent 55%), linear-gradient(168deg, #FBF1EC 0%, #F6EBE4 48%, #F3E8E6 100%) !important; } /* A touch larger / softer rose wash inside this section for a feminine glow */ .ndr-prog-section.ndr-wash-rose-tr::before { width: 460px; height: 460px; top: -130px; right: -110px; background: radial-gradient(circle, rgba(217,163,143,.20) 0%, transparent 70%); } /* Cards stay CLEAN white — NO in-card tint or accent bar (per client). The feminine vibe lives on the SECTION BACKGROUND only: the soft rose wash (top-right, above) + a delicate botanical line motif (bottom-left, below). Featured keeps its rose border and the capstone its gold border (defined earlier), so they still stand out without any card fill. */ .ndr-prog-section .ndr-prog.e-con, .ndr-prog-section .ndr-prog-featured.e-con, .ndr-prog-section .ndr-prog-cap.e-con { background: #ffffff !important; } .ndr-prog-section::after { content: ""; position: absolute; bottom: -8px; left: -6px; width: 200px; height: 200px; z-index: 0; pointer-events: none; opacity: .38; background: url("data:image/svg+xml,") no-repeat center / contain; } @media (max-width: 600px){ .ndr-prog-section::after{ width: 124px; height: 124px; opacity: .3; } } /* Mobile: capstone returns to full-width stack like the other cards. */ @media (max-width: 767px){ .ndr-prog-cap.e-con{ width: 100% !important; max-width: 100% !important; } } /* Mobile: collapse the 2-col header to stacked name-over-price so long program names (e.g. "HER Energy & Resilience") never crowd the price. */ @media (max-width: 600px) { .ndr-prog-head { flex-direction: column; align-items: flex-start; gap: 4px; } .ndr-prog-pricewrap { flex-direction: row; align-items: baseline; gap: 7px; text-align: left; } .ndr-prog-suf { margin-top: 0; } } /* ===================================================================== HER METHOD — image-topped pillar cards, letter badge, fit lists ===================================================================== */ /* Image-topped pillar card: photo bleeds to the rounded top edge, the accent top-border still reads under it via the card's own radius. */ .ndr-her-card.e-con { overflow: hidden; padding-top: 0 !important; } /* Keep the 3 pillars on ONE row at desktop: the grid wrapper carries a 10px Elementor pad, so trim each card a touch below an exact third (1px rounding was wrapping the 3rd card to a new line). Tablet/mobile keep lib widths. */ @media (min-width: 1025px) { .ndr-her-card.e-con { width: calc(33.333% - 22px) !important; } } .ndr-her-img.ndr-ph { border-radius: 22px 22px 0 0; margin-bottom: 0; } .ndr-her-img.ndr-ph .ndr-ph-img { min-height: 0; height: 280px; border-radius: 22px 22px 0 0; object-position: center 38%; } /* The accent bar sits ABOVE the image, so re-clip the image to keep the top corners crisp against the colored ndr-pillar border. */ .ndr-her-card.ndr-pillar { border-top-width: 4px !important; } /* Floating circular letter chip overlapping image / body seam */ .ndr-her-letterwrap { line-height: 0; margin: -30px 0 2px 22px; } .ndr-her-letter { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 30px; line-height: 1; box-shadow: 0 6px 16px rgba(55,65,81,.18); border: 3px solid #fff; } /* Pad the textual content of the card (image is full-bleed; text needs gutters) */ .ndr-her-card > .e-con-inner > .elementor-widget:not(.ndr-her-img):not(.ndr-her-letterwrap), .ndr-her-card > .elementor-widget-wrap > .elementor-widget:not(.ndr-her-img):not(.ndr-her-letterwrap) { padding-left: 26px; padding-right: 26px; } /* "What we look at" bullet list inside pillars */ .ndr-her-pts { margin: 4px 0 2px; padding-left: 18px; } .ndr-her-pts li { margin: 3px 0; padding-left: 2px; } .ndr-her-pts li::marker { color: #D9A38F; } /* Good-fit / not-a-fit cards */ .ndr-her-fit.e-con { background: #fff; } .ndr-her-fit-no.e-con { background: #FBF7F1; } .ndr-her-fitlist { list-style: none; margin: 6px 0 0; padding: 0; } .ndr-her-fitlist li { position: relative; padding-left: 30px; margin: 9px 0; } .ndr-her-fitlist.ndr-yes li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #5F8F89; font-weight: 800; } .ndr-her-fitlist.ndr-no li::before { content: "\2014"; position: absolute; left: 0; top: 0; color: #C9B9A6; font-weight: 800; } @media (max-width: 767px) { .ndr-her-img.ndr-ph .ndr-ph-img { height: 240px; object-position: center 32%; } } /* ========================================================================== v2 ENHANCEMENTS (2026-06-25) — gradient cards, clickable journal, feminine floral divider + botanical page motif. Reusable classes; apply `ndr-grad-card` from Elementor Advanced > CSS Classes to any container. ========================================================================== */ /* ---- Gradient feature cards (Why women choose us · Before you book) ---- */ .ndr-grad-card.e-con, .ndr-grad-card { background: linear-gradient(155deg, #FFFFFF 0%, #FBEEE6 58%, #F6ECE2 100%) !important; border: 1px solid rgba(217, 163, 143, .38) !important; border-top: 3px solid var(--ndr-rose, #D9A38F) !important; border-radius: 20px !important; box-shadow: 0 14px 34px rgba(55, 65, 81, .10) !important; padding: 30px 28px !important; transition: transform .25s ease, box-shadow .25s ease; } .ndr-grad-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(55, 65, 81, .15) !important; } /* On the coral "Why women choose us" band, lift the white cards a touch more */ .ndr-promise-bg .ndr-grad-card { box-shadow: 0 16px 40px rgba(55, 65, 81, .16) !important; } /* ...and the card text was white (built for the coral band) — make it dark/legible now it sits on a light card */ .ndr-promise-bg .ndr-grad-card h1, .ndr-promise-bg .ndr-grad-card h2, .ndr-promise-bg .ndr-grad-card h3, .ndr-promise-bg .ndr-grad-card h4 { color: var(--ndr-teal-d, #5F8F89) !important; } .ndr-promise-bg .ndr-grad-card p, .ndr-promise-bg .ndr-grad-card li, .ndr-promise-bg .ndr-grad-card .elementor-widget-text-editor, .ndr-promise-bg .ndr-grad-card .elementor-widget-text-editor * { color: var(--ndr-ink, #374151) !important; } /* ---- Clickable "From the journal" cards (whole card is a link) ---- */ .elementor-element-eb7469f .ndr-card, .elementor-element-eb7469f a.ndr-card { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; } .elementor-element-eb7469f .ndr-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(55, 65, 81, .16) !important; } .elementor-element-eb7469f .ndr-card:hover h3, .elementor-element-eb7469f .ndr-card:hover h4 { color: var(--ndr-teal-d, #5F8F89); } /* ---- Feminine floral divider between "Online, wherever you are" + "Nourish your inbox" ---- */ .elementor-element-b562d99::before { content: ""; display: block; width: 100%; height: 44px; flex: 0 0 100%; margin: 4px 0 34px; background: url("img/ndr-divider-floral-light.svg") center center / auto 44px no-repeat; } /* ---- Botanical page motif (subtle, behind content) ---- */ body.page::before { content: ""; position: fixed; inset: 0; background: url("img/ndr-botanical-bg.svg") 0 0 / 420px 420px repeat; opacity: .07; pointer-events: none; z-index: 0; } /* keep Elementor content above the motif; solid section backgrounds still cover it */ body.page .elementor { position: relative; z-index: 1; } /* ---- HER pillar cards: even footers + comfortable spacing (no ragged bottom gap) ---- */ .ndr-her-card > .elementor-widget:last-child { margin-top: auto !important; padding-top: 14px; } .ndr-her-card { padding-bottom: 30px !important; } /* a little breathing room under the image before the heading/badge */ .ndr-her-card > .elementor-widget-heading { margin-top: 6px; } /* ---- Pixel-pass polish (2026-06-25) ---- */ /* (a) HER Programs: reserve 2 lines for the card title so 1-line vs 2-line titles don't shove the rows below out of alignment across the 3 cards. */ .ndr-prog .ndr-prog-name { min-height: 2.4em; display: flex; align-items: flex-start; } /* (b) HER Healthspan Method band: pin each card's "You get:" line to a shared bottom baseline (cards are equal height; closing line was ragged). */ .ndr-step { display: flex; flex-direction: column; } .ndr-step > .elementor-widget:last-child { margin-top: auto; } /* (c) Lab-testing mini-cards: coral titles vibrate on the teal band — switch to warm cream for legibility (keep the white subtext). */ .ndr-labtile :is(h1,h2,h3,h4,h5,.elementor-heading-title) { color: #F4EEE2 !important; } .ndr-labtile b, .ndr-labtile strong { color: #F4EEE2 !important; } /* (d) "Connect on LinkedIn" text was LinkedIn-blue (#0A66C2) — off-brand on the warm palette. Tone to sage teal; the recognizable LinkedIn icon stays. */ a[href*="linkedin"] { color: var(--ndr-teal-d, #5F8F89) !important; } /* ---- Mobile/tablet nav menu fix (2026-06-25) ---- The header Nav Menu widget has no "Full Width" (Elementor `--stretch`) class, so its mobile dropdown defaulted to `position:static` and rendered as a narrow ~98px in-flow box jammed against the right edge instead of a full-width panel ("not displaying correct / cropped"). Elementor only sets the dropdown `position:absolute` via `.elementor-nav-menu--stretch`, which this widget lacks. Fix mirrors that stretch behaviour with pure CSS (no stretch-JS dependency, so it survives the static export): neutralise positioning on the header's inner Elementor containers so the dropdown's containing block becomes `.ndr-header` itself, then drop it full-width below the toggle. `overflow-y:auto` overrides Elementor's stock `overflow-y:hidden` so a tall menu scrolls on short/landscape screens instead of clipping. Scoped to `.ndr-header` + the toggle breakpoint. */ @media (max-width: 1024px) { .ndr-header .e-con, .ndr-header .elementor-widget-nav-menu, .ndr-header .elementor-widget-container { position: static; } .ndr-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { position: absolute; left: 0; right: 0; width: 100%; top: 100%; z-index: 9997; overflow-y: auto !important; -webkit-overflow-scrolling: touch; box-shadow: 0 14px 30px rgba(55, 65, 81, .16); } } /* ========================================================================== Mobile tap-target minimums (WCAG 2.5.5) — 2026-07-08 Header hamburger toggle + footer links were <44px on touch. Bring to 44px. ========================================================================== */ .elementor-menu-toggle { min-width: 44px !important; min-height: 44px !important; display: flex; align-items: center; justify-content: center; } [data-elementor-type="footer"] a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* === NDR HER pillar images: full-bleed fix (2026-07-20) === White space L/R on all three card images = the card's own horizontal padding. Zero it (text keeps 26px gutters via the existing :not(.ndr-her-img) rule) and pin the image widgets to 100% so the stray per-widget width no longer overflows. */ .ndr-her-card.e-con { padding-left: 0 !important; padding-right: 0 !important; } .ndr-her-card .ndr-her-img.ndr-ph.elementor-widget { width: 100% !important; max-width: 100% !important; } /* ============================================================================ FIXES 2026-07-23 ========================================================================== */ /* (1) Footer "Follow us on Social Media" bar (widget 42ecf50) sits on the LIGHT band, but the global footer social-icon rule paints icons cream (#E7E0D6) — invisible on cream. Recolor to brand sage; hover coral. */ .elementor-location-footer .elementor-element-42ecf50 .elementor-social-icon i, .elementor-location-footer .elementor-element-42ecf50 .elementor-social-icon svg, [data-elementor-type="footer"] .elementor-element-42ecf50 .elementor-social-icon i, [data-elementor-type="footer"] .elementor-element-42ecf50 .elementor-social-icon svg{ color:#46706A !important; fill:#46706A !important; } .elementor-location-footer .elementor-element-42ecf50 .elementor-social-icon:hover i, .elementor-location-footer .elementor-element-42ecf50 .elementor-social-icon:hover svg, [data-elementor-type="footer"] .elementor-element-42ecf50 .elementor-social-icon:hover i, [data-elementor-type="footer"] .elementor-element-42ecf50 .elementor-social-icon:hover svg{ color:#C5512F !important; fill:#C5512F !important; } /* (2) Article body reading measure: the prose wrap INSIDE .ndr-article-body was capped at 760px — cramped on desktop. Widen to a more comfortable column. Scoped to the body wrap only (the hero's own .her-wrap is a sibling, left at its 820px). */ .ndr-article-body .her-wrap{ max-width:920px !important; margin-left:auto !important; margin-right:auto !important; } /* (3) Remove the section-rhythm 68px top padding that put a white gap between the header and the coral article hero (single-post content section 4681c96). */ .elementor-element-4681c96{ padding-top:0 !important; } /* (4) Popup 807 ("Hello Welcome") mobile comfort + scaling. On phones it ran too tall — heading + image ate the space and the CTA fell under the cookie banner. Cap the modal to the viewport with internal scroll, shrink the heading + image, and tighten padding so the email + button are always reachable. Only one popup exists, so scoping to .elementor-popup-modal is safe. */ @media (max-width: 767px) { .elementor-popup-modal .dialog-widget-content { max-height: 90vh !important; } .elementor-popup-modal .dialog-message { max-height: 90vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* tighter section padding inside the popup */ .elementor-popup-modal [data-elementor-type="popup"] > .elementor-element, .elementor-popup-modal [data-elementor-type="popup"] .e-con-inner, .elementor-popup-modal [data-elementor-type="popup"] .elementor-widget-wrap { padding-top: 12px !important; padding-bottom: 12px !important; } /* headline: fits two lines, not four */ .elementor-popup-modal .elementor-widget-heading .elementor-heading-title, .elementor-popup-modal [data-elementor-type="popup"] h1, .elementor-popup-modal [data-elementor-type="popup"] h2 { font-size: 1.5rem !important; line-height: 1.12 !important; margin-bottom: 6px !important; } /* image: keep it, but shorter so it doesn't dominate */ .elementor-popup-modal .elementor-widget-image img { max-height: 120px !important; width: 100% !important; object-fit: cover !important; } /* body copy a touch smaller + less gap between widgets */ .elementor-popup-modal .elementor-widget-text-editor { font-size: .9rem !important; line-height: 1.45 !important; } .elementor-popup-modal .elementor-widget-text-editor p { margin-bottom: .55em !important; } .elementor-popup-modal .elementor-widget:not(:last-child) { margin-bottom: 8px !important; } } /* (5) Desktop sub-menu never opened (header template 48, nav widget 13cd75a). ROOT CAUSE, measured 2026-07-23: Elementor Pro's own widget-nav-menu.min.css has @media (min-width:1025px){ .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown{ display:none } } The widget carries .elementor-nav-menu--dropdown-tablet and each sub-menu is