/* ═══════════════════════════════════════════════════════════════════ MID — Certification / editorial article pages (GIA, EGL, HRD, IGI, AGS) Luxury B2B article layout in the White Diamonds language: warm background, refined serif headings, small spaced overlines, short 60px gold dividers, thin elegant borders, clean left-aligned reading column, native widgets. Loads alongside mid-luxury-homepage.css + mid-home-native.css + mid-white-review.css. ═══════════════════════════════════════════════════════════════════ */ /* ── Section backgrounds + vertical rhythm (full-bleed bg via .mid-hr-full) ── */ /* extra top padding clears the fixed site header so the overline isn't hidden behind it */ .mid-cert-sec.mid-cert--hero { background: var(--mid-warm-white); padding: 168px 0 14px !important; } .mid-cert-sec.mid-cert--body { background: var(--mid-warm-white); padding: 10px 0 104px !important; } @media (max-width:767px){ .mid-cert-sec.mid-cert--hero { padding: 108px 0 10px !important; } .mid-cert-sec.mid-cert--body { padding: 8px 0 66px !important; } } /* ensure the hero overline is visible + spaced above the H1 */ .mid-cert--hero .mid-luxury-overline .elementor-heading-title{ display:block; margin:0 0 14px; } @media (max-width:767px){ .mid-cert--hero { padding: 82px 0 4px; } .mid-cert--body { padding: 4px 0 66px; } .mid-cert--hero, .mid-cert--body { overflow-x:hidden; } } /* ── Reading column: constrain line length, left-aligned within the container ── */ .mid-cert-col > .elementor-widget-wrap { max-width: 860px; } /* ── Hero ── */ .mid-cert-h1 .elementor-heading-title{ font-family: var(--mid-font-serif); font-size: 56px; font-weight: 300; line-height: 1.06; letter-spacing: -0.01em; color: var(--mid-charcoal); text-transform: uppercase; } .mid-cert-h1 { margin: 6px 0 20px; } @media (max-width:1024px){ .mid-cert-h1 .elementor-heading-title{ font-size: 44px; } } @media (max-width:767px){ .mid-cert-h1 .elementor-heading-title{ font-size: 33px; } } /* ── Section headings within the body ── */ .mid-cert-h2 .elementor-heading-title{ font-family: var(--mid-font-serif); font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: .005em; color: var(--mid-charcoal); text-transform: none; } .mid-cert-h2 { margin: 0 0 2px; } @media (max-width:767px){ .mid-cert-h2 .elementor-heading-title{ font-size: 25px; } } /* short gold divider that precedes each section heading (60px, never full-width) */ .mid-cert-div .elementor-divider, .mid-cert-div { margin: 40px 0 18px; } /* ── Body copy ── */ .mid-cert-body .elementor-heading-title, .mid-cert-body p{ font-family: var(--mid-font-sans); font-size: 16px; font-weight: 300; line-height: 1.85; color: #4a4a4a; margin: 0 0 20px; } .mid-cert-body p:last-child{ margin-bottom: 0; } .mid-cert-body a{ color: var(--mid-light-gold); text-decoration: none; border-bottom: 1px solid rgba(201,169,110,.4); } .mid-cert-body a:hover{ color: var(--mid-navy); border-bottom-color: var(--mid-navy); } /* ── Images ── */ .mid-cert-img .elementor-widget-image img{ width: 100%; height: auto; display: block; border: 1px solid var(--mid-platinum); background:#fff; } .mid-cert-img { margin: 10px 0 14px; } /* ── Video ── */ .mid-cert-video { margin: 12px 0 16px; } .mid-cert-video .elementor-wrapper{ border: 1px solid var(--mid-platinum); } /* ── Image carousel (EGL) — keep it calm ── */ .mid-cert-carousel { margin: 14px 0; } /* ── Slides (About / family history) ── */ .mid-cert-slides { margin: 16px 0; } .mid-cert-slides .elementor-slides-wrapper{ border: 1px solid var(--mid-platinum); } /* ── FAQ (GIA) — Q/A list with thin rules ── */ .mid-cert-faq-q .elementor-heading-title{ font-family: var(--mid-font-serif); font-size: 21px; font-weight: 500; color: var(--mid-navy); line-height: 1.3; } .mid-cert-faq-q { margin: 0 0 8px; padding-top: 24px; border-top: 1px solid var(--mid-platinum); } .mid-cert-faq-a p{ font-family: var(--mid-font-sans); font-size: 16px; font-weight: 300; line-height: 1.8; color:#5a5a5a; margin: 0 0 10px; } /* ── Inline "search inventory" button (converted from the old plugin button) ── */ .mid-cert-btn { margin: 26px 0 6px; } /* hide any leftover schema/JSON-LD html widget visual box (it only carries markup) */ .mid-cert-schema { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ COMPANY PROFILE (About / page 114) — CTA button-group layout Scoped to the two button columns by their UNIQUE Elementor element IDs (#4950d765 = top group, #c114w29 = bottom CTA). Those IDs exist only on this page, so no other page/section is affected. Button text, links and the navy/outline luxury style are untouched — only layout. Goal: two buttons side by side on desktop + tablet; stacked & equal width on mobile. The buttons share one flex row and shrink to fit, so the long "VIEW WHITE DIAMOND INVENTORY" label can never bump the second button onto a separate row at tablet width. ────────────────────────────────────────────────────────────────────────── */ .elementor-element-4950d765 > .elementor-widget-wrap, .elementor-element-c114w29 > .elementor-widget-wrap{ display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 16px; justify-content: flex-start; } /* every non-button widget (overline, heading, divider, body copy) keeps its normal full-width block flow above the buttons */ .elementor-element-4950d765 > .elementor-widget-wrap > .elementor-widget:not(.mid-hr-binline), .elementor-element-c114w29 > .elementor-widget-wrap > .elementor-widget:not(.mid-hr-binline){ flex: 0 0 100%; max-width: 100%; } /* the two CTA buttons: stay compact (natural width) and side by side; they may shrink to fit the column but never wrap onto a second row, so the long "VIEW WHITE DIAMOND INVENTORY" label keeps its neighbour beside it at tablet */ .elementor-element-4950d765 > .elementor-widget-wrap > .elementor-widget.mid-hr-binline, .elementor-element-c114w29 > .elementor-widget-wrap > .elementor-widget.mid-hr-binline{ flex: 0 1 auto; min-width: 0; margin: 16px 0 0 0 !important; } /* equal height even if one label wraps to two lines at tablet width */ .elementor-element-4950d765 .mid-hr-binline .elementor-button, .elementor-element-c114w29 .mid-hr-binline .elementor-button{ height: 100%; justify-content: center; text-align: center; } /* Tablet (768–1024): the hero stays a 2-column layout, so the text column is narrow. Force the two buttons to share one row as equal halves (they shrink and the long label wraps inside its own button) instead of dropping the second button onto a new line. */ @media (min-width: 768px) and (max-width: 1024px){ .elementor-element-4950d765 > .elementor-widget-wrap > .elementor-widget.mid-hr-binline, .elementor-element-c114w29 > .elementor-widget-wrap > .elementor-widget.mid-hr-binline{ flex: 1 1 0; } .elementor-element-4950d765 .mid-hr-binline .elementor-button, .elementor-element-c114w29 .mid-hr-binline .elementor-button{ width: 100%; padding-left: 24px; padding-right: 24px; } } /* Mobile: stack the two buttons, one under the other, full & equal width */ @media (max-width: 767px){ .elementor-element-4950d765 > .elementor-widget-wrap > .elementor-widget.mid-hr-binline, .elementor-element-c114w29 > .elementor-widget-wrap > .elementor-widget.mid-hr-binline{ flex: 0 0 100%; max-width: 100%; width: 100% !important; margin-top: 12px !important; } .elementor-element-4950d765 .mid-hr-binline .elementor-button, .elementor-element-c114w29 .mid-hr-binline .elementor-button{ width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════ Diamond Education — Shapes & Cuts pages: "More Diamond Shapes" nav grid (native Elementor image-box cells). Loaded via $luxury_redesigned in config. ══════════════════════════════════════════════════════════════════════════ */ /* On cert-family pages the hero uses .mid-wd--hero; guarantee its overline clears the fixed site header even when the hero image is short (mid-cert.css only loads on these pages, so white/loose/wholesale/home heroes are unaffected). */ .mid-wd--hero { padding-top: 152px !important; } @media (max-width:767px){ .mid-wd--hero { padding-top: 100px !important; } } .mid-shapes-sec { background: var(--mid-ivory); padding: 80px 0 96px; } .mid-shapes-sec .mid-cert-h2 { margin-top: 0; } .mid-shape-gridsec { margin: 20px 0 40px; } .mid-shape-grid > .elementor-widget-wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: stretch; } .mid-shape-grid > .elementor-widget-wrap > .elementor-widget { width: auto; margin: 0 !important; } @media (max-width:1024px){ .mid-shape-grid > .elementor-widget-wrap { grid-template-columns: repeat(4,1fr); } } @media (max-width:767px){ .mid-shape-grid > .elementor-widget-wrap { grid-template-columns: repeat(2,1fr); gap: 14px; } } /* the 4 Cs sibling row (wide banner thumbnails) */ .mid-4cs-grid > .elementor-widget-wrap { grid-template-columns: repeat(3,1fr); max-width: 760px; } @media (max-width:600px){ .mid-4cs-grid > .elementor-widget-wrap { grid-template-columns: 1fr; } } /* shape cell = native image-box, luxury card */ .mid-shape-cell .elementor-image-box-wrapper { background: var(--mid-warm-white); border: 1px solid var(--mid-platinum); padding: 22px 10px 18px; height: 100%; transition: border-color .25s, box-shadow .25s; } .mid-shape-cell:hover .elementor-image-box-wrapper { border-color: var(--mid-light-gold); box-shadow: 0 8px 24px rgba(28,28,28,.06); } .mid-shape-cell .elementor-image-box-img { margin: 0 auto 12px; } .mid-shape-cell .elementor-image-box-img img { width: 62px; height: 62px; object-fit: contain; display: inline-block; } .mid-shape-cell .elementor-image-box-title { font-family: var(--mid-font-serif); font-size: 17px; font-weight: 500; line-height: 1.2; margin: 0; color: var(--mid-charcoal); } .mid-shape-cell .elementor-image-box-title a { color: inherit; text-decoration: none; } .mid-shape-cell:hover .elementor-image-box-title a { color: var(--mid-light-gold); } .mid-4cs-cell .elementor-image-box-img img { width: auto; height: 68px; } /* ══════════════════════════════════════════════════════════════════════════ MM to Carat conversion page (637) — luxury reskin around preserved jet-tables ══════════════════════════════════════════════════════════════════════════ */ .mid-mm--body { background: var(--mid-warm-white); padding: 40px 0 100px; } .mid-mm-col > .elementor-widget-wrap { max-width: 1000px; margin-left: auto; margin-right: auto; } /* shape-name headings → serif, luxury */ .mid-mm--body .elementor-widget-heading .elementor-heading-title{ font-family: var(--mid-font-serif); font-size: 30px; font-weight: 400; line-height: 1.25; letter-spacing: .005em; color: var(--mid-charcoal); text-transform: none; } @media (max-width:767px){ .mid-mm--body .elementor-widget-heading .elementor-heading-title{ font-size: 24px; } } /* shape-section headings now use the corrected Round block (overline + mid-cert-h1); restore the cert hero heading style so they match Round (56px uppercase serif) */ .mid-mm--body .mid-cert-h1 .elementor-heading-title{ font-family: var(--mid-font-serif); font-size: 56px; font-weight: 300; line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase; color: var(--mid-charcoal); } .mid-mm--body .mid-cert-h1{ margin: 6px 0 20px; } @media (max-width:1024px){ .mid-mm--body .mid-cert-h1 .elementor-heading-title{ font-size: 44px; } } @media (max-width:767px){ .mid-mm--body .mid-cert-h1 .elementor-heading-title{ font-size: 33px; } } /* keep the small uppercase overline correct inside the MM body */ .mid-mm--body .mid-luxury-overline .elementor-heading-title{ font-family: var(--mid-font-sans); font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--mid-light-gold); line-height: 1.4; } /* body copy */ .mid-mm--body .elementor-widget-text-editor{ font-family: var(--mid-font-sans); font-weight: 300; color: #4a4a4a; line-height: 1.85; } .mid-mm--body .elementor-widget-text-editor a{ color: var(--mid-light-gold); text-decoration: none; border-bottom: 1px solid rgba(201,169,110,.4); } /* images — cap + thin border */ .mid-mm--body .elementor-widget-image img{ max-width: 440px; height: auto; border: 1px solid var(--mid-platinum); background:#fff; } /* jet-table → thin platinum grid, warm header, serif-free readable body */ .mid-mm--body .jet-table{ border: 1px solid var(--mid-platinum) !important; } .mid-mm--body .jet-table__cell, .mid-mm--body .jet-table__heading-cell, .mid-mm--body .jet-table td, .mid-mm--body .jet-table th{ border-color: var(--mid-platinum) !important; } .mid-mm--body .jet-table__heading, .mid-mm--body .jet-table thead{ background: var(--mid-ivory) !important; } .mid-mm--body .jet-table__heading-cell, .mid-mm--body .jet-table th{ font-family: var(--mid-font-sans) !important; letter-spacing: .04em; color: var(--mid-charcoal) !important; } /* SEARCH / LEARN MORE buttons → luxury inline pair */ .mid-mm--body .elementor-widget-button .elementor-button{ border-radius: 0; font-family: var(--mid-font-sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 14px 26px; } .mid-mm--body { overflow-x: hidden; } /* ══════════════════════════════════════════════════════════════════════════ Contact + Branch pages — luxury reskin around preserved content (addresses / phones / emails / maps / galleries / videos / html kept as-is) ══════════════════════════════════════════════════════════════════════════ */ .mid-branch--body { background: var(--mid-warm-white); padding: 30px 0 56px; } .mid-branch--body .elementor-heading-title { font-family: var(--mid-font-serif); color: var(--mid-charcoal); } .mid-branch--body .elementor-widget-text-editor { font-family: var(--mid-font-sans); font-weight: 300; color: #4a4a4a; line-height: 1.75; } .mid-branch--body .elementor-widget-text-editor a { color: var(--mid-light-gold); text-decoration: none; } .mid-branch--body .elementor-widget-text-editor a:hover { color: var(--mid-navy); } /* contact icons in gold */ .mid-branch--body .elementor-icon, .mid-branch--body .elementor-widget-icon i, .mid-branch--body .elementor-widget-icon svg { color: var(--mid-light-gold); fill: var(--mid-light-gold); } /* framed media: map / video / gallery / images */ .mid-branch--body .jet-map, .mid-branch--body .elementor-widget-video .elementor-wrapper, .mid-branch--body .elementor-widget-image img { border: 1px solid var(--mid-platinum); } .mid-branch--body { overflow-x: hidden; } /* branch-card "Read more" buttons already navy via mid-hr-bnavy; keep inline calm */ .mid-branch--body .mid-hr-bnavy { margin-top: 14px; } /* ═══════════════════════════════════════════════════════════════════ BRANCH PAGES — refined style (MID Shanghai = approved reference) 2026-07-08 Scoped per-page by Elementor wrappers .elementor- (this theme's has no page-id class). Covers: 240 Shanghai (ref), 196 NY, 216 LA, 224 Antwerp, 235 HK, 245 London, 249 Tel Aviv, 255 Tokyo. Contact hub 163 intentionally EXCLUDED. (1) compact the title/hero; (2) remove unwanted bold → light refined type. ═══════════════════════════════════════════════════════════════════ */ /* (1) compact hero/title */ .elementor-240 .mid-wd--hero, .elementor-196 .mid-wd--hero, .elementor-216 .mid-wd--hero, .elementor-224 .mid-wd--hero, .elementor-235 .mid-wd--hero, .elementor-245 .mid-wd--hero, .elementor-249 .mid-wd--hero, .elementor-255 .mid-wd--hero { padding-top: 100px; padding-bottom: 26px; } @media (max-width:767px){ .elementor-240 .mid-wd--hero, .elementor-196 .mid-wd--hero, .elementor-216 .mid-wd--hero, .elementor-224 .mid-wd--hero, .elementor-235 .mid-wd--hero, .elementor-245 .mid-wd--hero, .elementor-249 .mid-wd--hero, .elementor-255 .mid-wd--hero { padding-top: 64px; padding-bottom: 20px; } } /* trim the empty band under the title (base branch pad + baked 50px inner-section pad) */ .elementor-240 .mid-branch--body, .elementor-196 .mid-branch--body, .elementor-216 .mid-branch--body, .elementor-224 .mid-branch--body, .elementor-235 .mid-branch--body, .elementor-245 .mid-branch--body, .elementor-249 .mid-branch--body, .elementor-255 .mid-branch--body { padding-top: 10px; } .elementor-240 .mid-branch--body .elementor-inner-section, .elementor-196 .mid-branch--body .elementor-inner-section, .elementor-216 .mid-branch--body .elementor-inner-section, .elementor-224 .mid-branch--body .elementor-inner-section, .elementor-235 .mid-branch--body .elementor-inner-section, .elementor-245 .mid-branch--body .elementor-inner-section, .elementor-249 .mid-branch--body .elementor-inner-section, .elementor-255 .mid-branch--body .elementor-inner-section { padding-top: 12px !important; } /* (2) remove unwanted bold; keep headings elegant and body light/regular */ .elementor-240 .mid-branch--body .elementor-heading-title, .elementor-196 .mid-branch--body .elementor-heading-title, .elementor-216 .mid-branch--body .elementor-heading-title, .elementor-224 .mid-branch--body .elementor-heading-title, .elementor-235 .mid-branch--body .elementor-heading-title, .elementor-245 .mid-branch--body .elementor-heading-title, .elementor-249 .mid-branch--body .elementor-heading-title, .elementor-255 .mid-branch--body .elementor-heading-title { font-weight: 400 !important; } .elementor-240 .mid-branch--body .elementor-widget-text-editor, .elementor-240 .mid-branch--body .elementor-widget-text-editor p, .elementor-196 .mid-branch--body .elementor-widget-text-editor, .elementor-196 .mid-branch--body .elementor-widget-text-editor p, .elementor-216 .mid-branch--body .elementor-widget-text-editor, .elementor-216 .mid-branch--body .elementor-widget-text-editor p, .elementor-224 .mid-branch--body .elementor-widget-text-editor, .elementor-224 .mid-branch--body .elementor-widget-text-editor p, .elementor-235 .mid-branch--body .elementor-widget-text-editor, .elementor-235 .mid-branch--body .elementor-widget-text-editor p, .elementor-245 .mid-branch--body .elementor-widget-text-editor, .elementor-245 .mid-branch--body .elementor-widget-text-editor p, .elementor-249 .mid-branch--body .elementor-widget-text-editor, .elementor-249 .mid-branch--body .elementor-widget-text-editor p, .elementor-255 .mid-branch--body .elementor-widget-text-editor, .elementor-255 .mid-branch--body .elementor-widget-text-editor p { font-weight: 300 !important; } .elementor-240 .mid-branch--body .elementor-widget-text-editor strong, .elementor-240 .mid-branch--body .elementor-widget-text-editor b, .elementor-196 .mid-branch--body .elementor-widget-text-editor strong, .elementor-196 .mid-branch--body .elementor-widget-text-editor b, .elementor-216 .mid-branch--body .elementor-widget-text-editor strong, .elementor-216 .mid-branch--body .elementor-widget-text-editor b, .elementor-224 .mid-branch--body .elementor-widget-text-editor strong, .elementor-224 .mid-branch--body .elementor-widget-text-editor b, .elementor-235 .mid-branch--body .elementor-widget-text-editor strong, .elementor-235 .mid-branch--body .elementor-widget-text-editor b, .elementor-245 .mid-branch--body .elementor-widget-text-editor strong, .elementor-245 .mid-branch--body .elementor-widget-text-editor b, .elementor-249 .mid-branch--body .elementor-widget-text-editor strong, .elementor-249 .mid-branch--body .elementor-widget-text-editor b, .elementor-255 .mid-branch--body .elementor-widget-text-editor strong, .elementor-255 .mid-branch--body .elementor-widget-text-editor b { font-weight: 500 !important; } /* Tokyo (255) special case: it has NO .mid-wd--hero — its title lives in the first .mid-branch--body section (#1373459). The compact 10px top padding above hid the overline behind the fixed header, so give this one section header clearance (mirrors the hero's 100px) and drop its now-redundant spacer. */ .elementor-255 .elementor-element-1373459 { padding-top: 152px !important; } @media (max-width:767px){ .elementor-255 .elementor-element-1373459 { padding-top: 84px !important; } } .elementor-255 .elementor-element-1373459 .elementor-widget-spacer { display: none !important; } /* ═══════════════════════════════════════════════════════════════════ MM to Carat (page 637) — shape-heading images at 50% (2026-07-08) The shared .mid-wd-hero-img rule renders every shape image at max-width:260px. Halve to 130px, scoped to .elementor-637 ONLY so no other page that uses .mid-wd-hero-img is affected. CSS-only — no Elementor data / table change. ═══════════════════════════════════════════════════════════════════ */ .elementor-637 .mid-wd-hero-img .elementor-widget-image img { max-width: 130px; } /* ═══════════════════════════════════════════════════════════════════ BRANCH PAGES — remove the large white band before the bottom CTA (2026-07-08) Real sources (found in page data, not guessed): (1) the content section (.mid-branch--body) carries a baked margin-bottom:100px; (2) most pages have a schema-only html section (a .mid-branch--body wrapping just a JSON-LD