/* ═══════════════════════════════════════════════════════════════════ MID — Blog (archive listing + single article) luxury B2B styling Loaded on the posts archive (is_home) and single posts (is_singular post). Archive listing template = 1319 (.elementor-1319). Single-post prototype = post 7080 (sections tagged .mid-article-body). Dynamic archive-posts loop is preserved; only styled. ═══════════════════════════════════════════════════════════════════ */ /* ---- Blog archive: dynamic post cards (Elementor archive-posts) ---- */ .mid-blog--grid { background: var(--mid-warm-white); padding: 12px 0 72px; } .mid-blog--grid .elementor-posts-container { gap: 0; } .mid-blog--grid .elementor-post { background: var(--mid-warm-white); border: 1px solid var(--mid-platinum); padding: 0 0 24px; margin: 0 14px 28px; transition: box-shadow .3s, border-color .3s; } .mid-blog--grid .elementor-post:hover { border-color: var(--mid-light-gold); box-shadow: 0 10px 30px rgba(28,28,28,.06); } .mid-blog--grid .elementor-post__thumbnail { margin-bottom: 20px; } .mid-blog--grid .elementor-post__thumbnail img { border-bottom: 1px solid var(--mid-platinum); } .mid-blog--grid .elementor-post__text { padding: 0 24px; } .mid-blog--grid .elementor-post__title, .mid-blog--grid .elementor-post__title a { font-family: var(--mid-font-serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--mid-charcoal); letter-spacing: .005em; } .mid-blog--grid .elementor-post__title a:hover { color: var(--mid-light-gold); } .mid-blog--grid .elementor-post__meta-data { font-family: var(--mid-font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9a8f7a; } .mid-blog--grid .elementor-post__excerpt p { font-family: var(--mid-font-sans); font-weight: 300; font-size: 16px; line-height: 1.75; color: #4a4a4a; } .mid-blog--grid .elementor-post__read-more { display: inline-block; font-family: var(--mid-font-sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mid-navy); border-bottom: 1px solid var(--mid-light-gold); padding-bottom: 3px; margin-top: 6px; } .mid-blog--grid .elementor-post__read-more:hover { color: var(--mid-light-gold); } .mid-blog--grid { overflow-x: hidden; } /* blog hero search form, kept but calm */ .mid-blog--hero .elementor-search-form__container { border: 1px solid var(--mid-platinum); background:#fff; max-width: 620px; } .mid-blog--hero .elementor-search-form__submit { background: var(--mid-navy); } /* ---- Single article (prototype: post 7080 sections tagged .mid-article-body) ---- */ .mid-article-body { background: var(--mid-warm-white); } .mid-article-body .elementor-widget-theme-post-content, .mid-article-body .elementor-widget-text-editor { font-family: var(--mid-font-sans); font-weight: 300; color: #40403c; line-height: 1.9; } .mid-article-body .elementor-widget-text-editor { font-size: 16px; } .mid-article-body .elementor-widget-text-editor a { color: var(--mid-light-gold); text-decoration: none; border-bottom: 1px solid rgba(201,169,110,.4); } .mid-article-body .elementor-widget-text-editor a:hover { color: var(--mid-navy); } /* headings -> refined serif, not heavy */ .mid-article-body .elementor-heading-title { font-family: var(--mid-font-serif); font-weight: 400; color: var(--mid-charcoal); letter-spacing: .005em; } .mid-article-body .mid-cert-h1 .elementor-heading-title { font-size: 40px; line-height: 1.12; } @media (max-width:767px){ .mid-article-body .mid-cert-h1 .elementor-heading-title { font-size: 29px; } } .mid-article-body strong, .mid-article-body b { font-weight: 500; } /* framed images */ .mid-article-body .elementor-widget-image img { border: 1px solid var(--mid-platinum); } /* author box / related-posts calm */ .mid-article-body .elementor-author-box { border-top: 1px solid var(--mid-platinum); padding-top: 24px; } .mid-article-body .elementor-post__title a { font-family: var(--mid-font-serif); color: var(--mid-charcoal); } .mid-article-body { overflow-x: hidden; } /* ═══════════════════════════════════════════════════════════════════ GLOBAL SINGLE-POST ROLLOUT (2026-07-13) Applies the approved EU-post (7080) article design to EVERY single post. single.php wraps `the_content()` of ALL posts in `.mid-single-post`, so that wrapper is the global hook. These rules mirror the `.mid-article-body` prototype 1:1 — the EU post (which sits inside .mid-single-post too) is unchanged; every other post inherits the same luxury editorial styling. CSS-only: no post content, Elementor data, URLs, slugs, Yoast, categories, tags, authors, dates or publish status are touched. No !important on typography, so a post that sets a widget style intentionally still wins (preserves unique layouts/custom widgets while sharing the visual language). Heading PIXEL sizes are deliberately NOT forced — the EU post's H1/H2 sizes come from its own Elementor widgets; forcing sizes would overwrite the approved reference. We roll out the font family / weight / colour / spacing. */ .mid-single-post { background: var(--mid-warm-white); overflow-x: hidden; } /* body copy */ .mid-single-post .elementor-widget-theme-post-content, .mid-single-post .elementor-widget-text-editor { font-family: var(--mid-font-sans); font-weight: 300; color: #40403c; line-height: 1.9; } .mid-single-post .elementor-widget-text-editor { font-size: 16px; } .mid-single-post .elementor-widget-text-editor a { color: var(--mid-light-gold); text-decoration: none; border-bottom: 1px solid rgba(201,169,110,.4); } .mid-single-post .elementor-widget-text-editor a:hover { color: var(--mid-navy); } /* headings -> refined serif. !important on family/weight/colour ONLY, because old posts bake a per-widget heading font (e.g. Open Sans) into Elementor that a plain rule can't beat. font-SIZE and letter-spacing are intentionally left alone so the approved EU post keeps its own per-widget H1/H2 sizes+spacing (forcing those would overwrite the reference). Other posts keep their sizes too — only the family/weight/colour are unified to the luxury serif. */ .mid-single-post .elementor-heading-title { font-family: var(--mid-font-serif) !important; font-weight: 400 !important; color: var(--mid-charcoal) !important; letter-spacing: .005em; } .mid-single-post strong, .mid-single-post b { font-weight: 500; } /* framed images (matches EU post) */ .mid-single-post .elementor-widget-image img { border: 1px solid var(--mid-platinum); } /* author box / related-posts calm (matches EU post) */ .mid-single-post .elementor-author-box { border-top: 1px solid var(--mid-platinum); padding-top: 24px; } .mid-single-post .elementor-post__title a { font-family: var(--mid-font-serif); color: var(--mid-charcoal); } /* ═══════════════════════════════════════════════════════════════════ DECORATIVE WATERMARK TYPOGRAPHY MATCH (2026-07-13) Old posts carry a decorative "Scriptina" script word (e.g. NEWS / Focus on / Oscar Awards) sitting directly above a post heading. The posts were duplicated from templates, so the watermark widget keeps a SHARED Elementor element id across posts — these 11 ids cover ALL 578 watermark posts (589 widgets): 0fd8274(443) 0d805c4(104) ee65522(16) b79fade(11) 7247b7d(5) f5c8bb8(2) e27c5b6(2) 279f1b1(2) 11d8969(2) 4baee4c(1) 31b4e8d(1) We restyle those ids so the watermark DROPS Scriptina and matches the heading directly below it — Cormorant Garamond, weight 400, #1C1C1C, and the heading's font-size (title overlines match the 52px H1; the one mid-article "Oscar Awards" overline, 7247b7d, matches its 29px H2). Overlap is removed (position:static, clean margin). CSS-ONLY, scoped to .mid-single-post — the watermark TEXT/wording is preserved; no post content, Elementor data, URLs, slugs, Yoast, taxonomy, authors, dates or status are touched. */ /* box: remove the old overlap/positioning, give clean spacing above the heading */ .mid-single-post .elementor-element-0fd8274, .mid-single-post .elementor-element-0d805c4, .mid-single-post .elementor-element-ee65522, .mid-single-post .elementor-element-b79fade, .mid-single-post .elementor-element-7247b7d, .mid-single-post .elementor-element-f5c8bb8, .mid-single-post .elementor-element-e27c5b6, .mid-single-post .elementor-element-279f1b1, .mid-single-post .elementor-element-11d8969, .mid-single-post .elementor-element-4baee4c, .mid-single-post .elementor-element-31b4e8d { position: static !important; /* the old template pulls the TITLE up (~30px negative offset) so it overlapped the script watermark; this bottom margin clears the title cleanly without touching the title widget itself */ margin: 0 auto 34px !important; transform: none !important; z-index: auto !important; } /* title overlines -> match the H1 heading below (Cormorant Garamond 52px/400 #1C1C1C) */ .mid-single-post .elementor-element-0fd8274, .mid-single-post .elementor-element-0fd8274 p, .mid-single-post .elementor-element-0fd8274 span, .mid-single-post .elementor-element-0d805c4, .mid-single-post .elementor-element-0d805c4 p, .mid-single-post .elementor-element-0d805c4 span, .mid-single-post .elementor-element-ee65522, .mid-single-post .elementor-element-ee65522 p, .mid-single-post .elementor-element-ee65522 span, .mid-single-post .elementor-element-b79fade, .mid-single-post .elementor-element-b79fade p, .mid-single-post .elementor-element-b79fade span, .mid-single-post .elementor-element-f5c8bb8, .mid-single-post .elementor-element-f5c8bb8 p, .mid-single-post .elementor-element-f5c8bb8 span, .mid-single-post .elementor-element-e27c5b6, .mid-single-post .elementor-element-e27c5b6 p, .mid-single-post .elementor-element-e27c5b6 span, .mid-single-post .elementor-element-279f1b1, .mid-single-post .elementor-element-279f1b1 p, .mid-single-post .elementor-element-279f1b1 span, .mid-single-post .elementor-element-11d8969, .mid-single-post .elementor-element-11d8969 p, .mid-single-post .elementor-element-11d8969 span, .mid-single-post .elementor-element-4baee4c, .mid-single-post .elementor-element-4baee4c p, .mid-single-post .elementor-element-4baee4c span, .mid-single-post .elementor-element-31b4e8d, .mid-single-post .elementor-element-31b4e8d p, .mid-single-post .elementor-element-31b4e8d span { font-family: var(--mid-font-serif) !important; font-size: 52px !important; font-weight: 400 !important; line-height: 1.12 !important; color: var(--mid-charcoal) !important; letter-spacing: .005em !important; } /* mid-article section overline (Oscar Awards, 7247b7d) -> match its H2 (29px) */ .mid-single-post .elementor-element-7247b7d, .mid-single-post .elementor-element-7247b7d p, .mid-single-post .elementor-element-7247b7d span { font-family: var(--mid-font-serif) !important; font-size: 29px !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--mid-charcoal) !important; letter-spacing: .005em !important; } /* ═══════════════════════════════════════════════════════════════════ TITLE ↔ CONTENT / WATERMARK OVERLAP FIX (2026-07-14) Follow-up to the global rollout: on the duplicated-template posts the H1 title is the SHARED Elementor widget id `03e2051` (confirmed dominant across the ~443 watermark posts; both sample posts israel-diamond-week-in-new-york- 2015 and mid-outstanding-diamond-exporter use it). Two template leftovers made it look broken AFTER the rollout swapped the heading font to Cormorant: 1) the widget baked `line-height:1em` at 52px — fine for the old Open Sans, but Cormorant Garamond's taller ascenders/descenders make a 2-line title (e.g. "ISRAEL INTERNATIONAL / DIAMOND WEEK") OVERLAP itself at 1em. 2) the container carried a negative top pull-up (-30px, and -73/-97px on a couple of posts) — a relic from when the Scriptina watermark sat BEHIND the title. With the watermark now static (+34px bottom margin) that left only ~4px above the title. FIX (CSS-only, scoped to `.mid-single-post` + the shared title id): give the title a comfortable line-height so its lines never overlap, and normalise the pull-up to 0 so the watermark's 34px bottom margin is the single clean gap. Not global to all headings on purpose — the approved EU reference H1 uses a DIFFERENT id, so it is untouched; intro/body headings keep their spacing. No post content, Elementor data, URLs, slugs, Yoast, taxonomy or status touched. */ .mid-single-post .elementor-element-03e2051 .elementor-heading-title{ line-height: 1.15 !important; } .mid-single-post .elementor-element-03e2051 > .elementor-widget-container{ margin-top: 0 !important; } /* Blog archive hero fix (2026-07-08): the section's .mid-hr-n rule (.mid-hr-n .elementor-widget:not(:last-child){margin-bottom:0}) cancels the gold divider's 32px bottom margin, so the 60px divider line collapses onto the intro's first line and reads as a strike-through. Restore clear spacing so the short gold divider sits cleanly between the H1 and the intro. Scoped to the blog archive hero only — no posts, no other pages, no global template. */ .mid-blog--hero .mid-luxury-gold-line{ margin-top:6px !important; margin-bottom:28px !important; } /* ═══ FIX (2026-07-21): blog single-post headings — mobile scale ═══════════ Verified issue: content section H2s are baked at 52px in Elementor and do NOT scale down, so long words clip/overflow at ≤390px. The H1 title (40px on the EU reference, up to 52px on older-template posts) is also reduced for safety. Scoped to .mid-single-post + tag, mobile only (≤767px) — desktop/tablet keep their approved sizes, and the small overline labels (p / 11–29px) are untouched. */ @media (max-width:767px){ .mid-single-post h1.elementor-heading-title{ font-size:34px !important; line-height:1.2 !important; } .mid-single-post h2.elementor-heading-title{ font-size:30px !important; line-height:1.25 !important; } }