.elementor-2623 .elementor-element.elementor-element-1d28745{--display:flex;--min-height:450px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--overlay-opacity:0.55;--overlay-mix-blend-mode:overlay;--padding-top:60px;--padding-bottom:60px;--padding-left:60px;--padding-right:60px;}.elementor-2623 .elementor-element.elementor-element-1d28745:not(.elementor-motion-effects-element-type-background), .elementor-2623 .elementor-element.elementor-element-1d28745 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(198deg, var( --e-global-color-e1e1c8c ) 0%, var( --e-global-color-accent ) 100%);}.elementor-2623 .elementor-element.elementor-element-1d28745::before, .elementor-2623 .elementor-element.elementor-element-1d28745 > .elementor-background-video-container::before, .elementor-2623 .elementor-element.elementor-element-1d28745 > .e-con-inner > .elementor-background-video-container::before, .elementor-2623 .elementor-element.elementor-element-1d28745 > .elementor-background-slideshow::before, .elementor-2623 .elementor-element.elementor-element-1d28745 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2623 .elementor-element.elementor-element-1d28745 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://modernretailingconference.com/wp-content/uploads/2025/07/MRC25-CircleGradientBackground.svg");--background-overlay:'';}.elementor-2623 .elementor-element.elementor-element-dfffaf0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-widget-post-info .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-post-info .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-text, .elementor-widget-post-info .elementor-icon-list-text a{color:var( --e-global-color-secondary );}.elementor-widget-post-info .elementor-icon-list-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-2623 .elementor-element.elementor-element-37f14e4 > .elementor-widget-container{background-color:#FFFFFF1A;padding:4px 012px 4px 12px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF40;border-radius:4px 4px 4px 4px;}.elementor-2623 .elementor-element.elementor-element-37f14e4 .elementor-icon-list-icon{width:14px;}.elementor-2623 .elementor-element.elementor-element-37f14e4 .elementor-icon-list-icon i{font-size:14px;}.elementor-2623 .elementor-element.elementor-element-37f14e4 .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}.elementor-2623 .elementor-element.elementor-element-37f14e4 .elementor-icon-list-item{font-family:"DM Sans", Sans-serif;font-size:14px;font-weight:400;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2623 .elementor-element.elementor-element-94bacd0 .elementor-heading-title{font-family:var( --e-global-typography-7c902d9-font-family ), Sans-serif;font-size:var( --e-global-typography-7c902d9-font-size );font-weight:var( --e-global-typography-7c902d9-font-weight );line-height:var( --e-global-typography-7c902d9-line-height );color:var( --e-global-color-secondary );}.elementor-2623 .elementor-element.elementor-element-1e696f9 .elementor-icon-list-icon{width:14px;}.elementor-2623 .elementor-element.elementor-element-1e696f9 .elementor-icon-list-icon i{font-size:14px;}.elementor-2623 .elementor-element.elementor-element-1e696f9 .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}.elementor-2623 .elementor-element.elementor-element-1e696f9 .elementor-icon-list-item{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2623 .elementor-element.elementor-element-d74a6e7{text-align:center;}.elementor-2623 .elementor-element.elementor-element-d74a6e7 .elementor-heading-title{font-family:"BN Carta Noir", Sans-serif;font-size:56px;font-weight:600;text-transform:none;line-height:1.3em;letter-spacing:-0.5px;color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2623 .elementor-element.elementor-element-c83d6ce{width:var( --container-widget-width, 650px );max-width:650px;--container-widget-width:650px;--container-widget-flex-grow:0;text-align:center;font-family:"articulat-cf", Sans-serif;font-size:16px;font-weight:400;letter-spacing:0.5px;color:#FFFFFFC2;}.elementor-2623 .elementor-element.elementor-element-b73ef32{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--overflow:hidden;--margin-top:0px;--margin-bottom:-16px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-2623 .elementor-element.elementor-element-5b11e28{width:100%;max-width:100%;}@media(max-width:1024px){.elementor-2623 .elementor-element.elementor-element-1d28745{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-widget-post-info .elementor-icon-list-item{font-size:var( --e-global-typography-text-font-size );}.elementor-2623 .elementor-element.elementor-element-94bacd0 .elementor-heading-title{font-size:var( --e-global-typography-7c902d9-font-size );line-height:var( --e-global-typography-7c902d9-line-height );}.elementor-2623 .elementor-element.elementor-element-d74a6e7 .elementor-heading-title{font-size:28px;letter-spacing:0px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-2623 .elementor-element.elementor-element-b73ef32{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-widget-theme-post-content{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-2623 .elementor-element.elementor-element-1d28745{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-post-info .elementor-icon-list-item{font-size:var( --e-global-typography-text-font-size );}.elementor-2623 .elementor-element.elementor-element-94bacd0 .elementor-heading-title{font-size:var( --e-global-typography-7c902d9-font-size );line-height:var( --e-global-typography-7c902d9-line-height );}.elementor-2623 .elementor-element.elementor-element-d74a6e7 .elementor-heading-title{font-size:24px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-2623 .elementor-element.elementor-element-b73ef32{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-theme-post-content{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for post-info, class: .elementor-element-37f14e4 */.elementor-2623 .elementor-element.elementor-element-37f14e4 { width: fit-content; }/* End custom CSS */ /* Start custom CSS *//* ========================================================================== MRC BLOG DESIGN SYSTEM - Modern Retailing Conference Version 1.0 - Built for Gutenberg core blocks rendered in an Elementor Post Template "Post Content" widget. SETUP 1. In the Elementor Post Template, select the Post Content widget -> Advanced -> CSS Classes -> add: mrc-post 2. Paste this whole file into ONE of: - Elementor -> Site Settings -> Custom CSS (recommended), or - Appearance -> Customize -> Additional CSS, or - the Post Content widget -> Advanced -> Custom CSS 3. Set the Post Content widget to the full width of its container (e.g. a 1200px boxed container). This stylesheet constrains normal blocks to a reading measure and lets Wide / Full blocks break out. FONTS - Display face (--mrc-font-display): used ONLY for the H1 and H2s, so it stays an accent. Set to your custom font in the tokens below. - Articulat CF (--mrc-font-body): everything else - body, H3-H6, labels, quotes, buttons. Served by the site's Adobe Fonts kit as "articulat-cf". Weights used: 400, 500, 600. - Code blocks use the system monospace font. SCOPE - Every body.elementor-page-2623 starts with `body .mrc-post`. Nothing outside the Post Content widget is touched: no global element styles, no changes to WordPress or Elementor settings, no PHP. - The `body` prefix only adds specificity so these rules beat the Hello Elementor theme and Elementor kit defaults without !important. CONVENTIONS - Variant classes are added per-block via Block -> Advanced -> Additional CSS class(es). They are all prefixed mrc- - Breakpoints match Elementor: tablet 1024px and below, mobile 767px and below. CONTENTS 01 Tokens 10 Pullquote 19 Media & Text 02 WP preset remap 11 Images & figures 20 Details / FAQ 03 Base, flow & block layout 12 Gallery 21 Code / Pre / Verse 04 Headings 13 Buttons 22 Embeds, Video, Audio 05 Paragraph & inline 14 Separator & Spacer 23 File download 06 Links 15 Table 24 Footnotes 07 Lists 16 Group utilities 25 Social icons 08 Color utilities 17 Columns & stats 26 Utilities 09 Quote 18 Cover 27 Responsive - Print ========================================================================== */ /* ========================================================================== 01 - TOKENS Brand values are pulled from the site's Elementor kit (elementor-kit-7). Values marked (derived) are shades mixed from brand colors for accessible text contrast; they stay inside the brand family. ========================================================================== */ body .mrc-post { /* --- Navy / ink ---------------------------------------------------- */ --mrc-navy: #364C5D; /* kit primary - headings, dark UI */ --mrc-navy-900: #243441; /* (derived) pressed / deep panels */ --mrc-ink: #010B11; /* kit - deepest ink, rarely used */ /* --- Slate (text) -------------------------------------------------- */ --mrc-slate: #526C80; /* (derived) meta, captions - 5.5:1 */ --mrc-slate-600: #3A5163; /* (derived) body copy - 8.3:1 on white */ /* --- Blues --------------------------------------------------------- */ --mrc-blue: #0C72A5; /* kit accent - links, primary buttons */ --mrc-blue-700: #0A5F8A; /* (derived) link hover - 7:1 */ --mrc-sky: #4498D4; /* kit - decorative highlights */ --mrc-ice: #C5E4FB; /* kit - highlighter, borders on tint */ --mrc-mist: #E7F5FF; /* kit - info tint */ --mrc-frost: #F3F7FD; /* kit - lightest blue surface */ /* --- Cool neutrals ------------------------------------------------- */ --mrc-line: #E0E7F1; /* kit - default rule / border */ --mrc-line-strong: #D5E1EA; /* kit - emphasized border */ --mrc-cloud: #E2E9ED; /* kit */ --mrc-fog: #EEF1F4; /* kit - code / muted fill */ --mrc-snow: #F8FAFC; /* kit - card surface */ --mrc-paper: #FBFCFD; /* kit - subtle surface */ --mrc-white: #FFFFFF; /* kit secondary */ /* --- Warm accents -------------------------------------------------- */ --mrc-orange: #EE8C22; /* kit - accent bars only (not text) */ --mrc-orange-700: #9A5510; /* (derived) orange text - 5.3:1 */ --mrc-peach: #FBDAC5; /* kit */ --mrc-cream: #FFF4E7; /* kit - warm surface */ --mrc-maroon: #8E3638; /* kit - alerts, strong emphasis */ --mrc-rose: #F7C8C8; /* kit */ --mrc-blush: #F7EAEA; /* kit - alert surface */ /* --- Semantic roles ------------------------------------------------ */ --mrc-ink-800: #2E4152; /* (derived) body copy - 10.5:1 on white */ --mrc-color-heading: var(--mrc-navy-900); --mrc-color-text: var(--mrc-ink-800); --mrc-color-muted: var(--mrc-slate); --mrc-color-strong: var(--mrc-navy-900); --mrc-color-link: var(--mrc-blue); --mrc-color-link-hover: var(--mrc-blue-700); --mrc-color-border: var(--mrc-line); --mrc-color-surface: var(--mrc-snow); --mrc-focus: 0 0 0 3px var(--mrc-white), 0 0 0 5px var(--mrc-blue); /* --- Type families ------------------------------------------------- */ --mrc-font-display: "BN Carta Noir", "articulat-cf", "Helvetica Neue", Arial, sans-serif; --mrc-font-body: "articulat-cf", "Helvetica Neue", Arial, sans-serif; --mrc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* --- Type scale (desktop; tablet/mobile overrides in section 27) ---- Mirrors the Elementor kit global typography sizes. */ --mrc-fs-h1: 36px; --mrc-lh-h1: 1.1; --mrc-ls-h1: 0; --mrc-fs-h2: 26px; --mrc-lh-h2: 1.15; --mrc-ls-h2: 0; --mrc-fs-h3: 20px; --mrc-lh-h3: 1.35; --mrc-ls-h3: -0.1px; --mrc-fs-h4: 18px; --mrc-lh-h4: 1.4; --mrc-ls-h4: 0; --mrc-fs-h5: 16px; --mrc-lh-h5: 1.45; --mrc-ls-h5: 0; --mrc-fs-h6: 15px; --mrc-lh-h6: 1.4; --mrc-ls-h6: 0; --mrc-fs-body: 18px; --mrc-lh-body: 1.7; --mrc-fs-lead: 22px; --mrc-lh-lead: 1.6; --mrc-fs-sm: 15px; --mrc-fs-xs: 13px; --mrc-fs-quote: 21px; --mrc-fs-pull: 25px; --mrc-fs-stat: 56px; /* --- Layout -------------------------------------------------------- */ --mrc-measure: 720px; /* reading column */ --mrc-wide: 1120px; /* .alignwide */ --mrc-gutter: 0px; /* side padding inside the widget */ /* --- Spacing (8pt-ish) --------------------------------------------- */ --mrc-space-3xs: 4px; --mrc-space-2xs: 8px; --mrc-space-xs: 12px; --mrc-space-sm: 16px; --mrc-space-md: 24px; --mrc-space-lg: 32px; --mrc-space-xl: 48px; --mrc-space-2xl: 64px; --mrc-space-3xl: 96px; --mrc-flow: 1.25em; /* default gap between blocks */ /* --- Shape & depth ------------------------------------------------- */ --mrc-radius-xs: 3px; /* buttons (matches site) */ --mrc-radius-sm: 4px; --mrc-radius: 6px; /* cards, images (matches site) */ --mrc-radius-lg: 12px; --mrc-radius-pill: 999px; --mrc-shadow-sm: 0 1px 2px rgba(54, 76, 93, .06), 0 1px 3px rgba(54, 76, 93, .08); --mrc-shadow: 0 4px 12px rgba(54, 76, 93, .08), 0 1px 3px rgba(54, 76, 93, .06); --mrc-shadow-lg: 0 18px 40px rgba(54, 76, 93, .12), 0 4px 10px rgba(54, 76, 93, .06); --mrc-ease: cubic-bezier(.2, .7, .2, 1); } /* ========================================================================== 02 - WORDPRESS PRESET REMAP Gutenberg writes color / size choices as classes like .has-vivid-red-color that read WordPress preset variables. Redefining those variables inside the post means ANY default-palette choice an author makes still lands on a brand color, and default font-size picks land on the brand scale. ========================================================================== */ body .mrc-post { /* Default WP palette -> nearest brand color */ --wp--preset--color--black: var(--mrc-navy); --wp--preset--color--white: var(--mrc-white); --wp--preset--color--cyan-bluish-gray: var(--mrc-slate); --wp--preset--color--pale-pink: var(--mrc-rose); --wp--preset--color--vivid-red: var(--mrc-maroon); --wp--preset--color--luminous-vivid-orange: var(--mrc-orange); --wp--preset--color--luminous-vivid-amber: var(--mrc-orange); --wp--preset--color--light-green-cyan: var(--mrc-ice); --wp--preset--color--vivid-green-cyan: var(--mrc-sky); --wp--preset--color--pale-cyan-blue: var(--mrc-ice); --wp--preset--color--vivid-cyan-blue: var(--mrc-blue); --wp--preset--color--vivid-purple: var(--mrc-navy); /* Default WP font sizes -> brand scale */ --wp--preset--font-size--small: var(--mrc-fs-sm); --wp--preset--font-size--medium: var(--mrc-fs-lead); --wp--preset--font-size--large: var(--mrc-fs-h3); --wp--preset--font-size--x-large: var(--mrc-fs-h2); /* Default WP spacing presets -> brand spacing */ --wp--preset--spacing--20: var(--mrc-space-2xs); --wp--preset--spacing--30: var(--mrc-space-sm); --wp--preset--spacing--40: var(--mrc-space-md); --wp--preset--spacing--50: var(--mrc-space-lg); --wp--preset--spacing--60: var(--mrc-space-xl); --wp--preset--spacing--70: var(--mrc-space-2xl); --wp--preset--spacing--80: var(--mrc-space-3xl); /* Layout variables used by constrained Group blocks */ --wp--style--global--content-size: var(--mrc-measure); --wp--style--global--wide-size: var(--mrc-wide); --wp--style--block-gap: var(--mrc-space-md); } /* Default gradient presets are not brand-safe; neutralize to brand gradients */ body .mrc-post { --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, var(--mrc-blue) 0%, var(--mrc-navy) 100%); --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, var(--mrc-mist) 0%, var(--mrc-ice) 100%); --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, var(--mrc-cream) 0%, var(--mrc-peach) 100%); --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, var(--mrc-orange) 0%, var(--mrc-maroon) 100%); --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, var(--mrc-snow) 0%, var(--mrc-cloud) 100%); --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, var(--mrc-mist) 0%, var(--mrc-cream) 100%); --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, var(--mrc-blush) 0%, var(--mrc-frost) 100%); --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, var(--mrc-rose) 0%, var(--mrc-maroon) 100%); --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, var(--mrc-sky) 0%, var(--mrc-navy) 100%); --wp--preset--gradient--pale-ocean: linear-gradient(135deg, var(--mrc-frost) 0%, var(--mrc-ice) 100%); --wp--preset--gradient--electric-grass: linear-gradient(135deg, var(--mrc-ice) 0%, var(--mrc-blue) 100%); --wp--preset--gradient--midnight: linear-gradient(135deg, var(--mrc-navy) 0%, var(--mrc-ink) 100%); } /* ========================================================================== 03 - BASE & FLOW LAYOUT ========================================================================== */ body .mrc-post { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-body); line-height: var(--mrc-lh-body); font-weight: 400; letter-spacing: normal; color: var(--mrc-color-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1; overflow-wrap: break-word; padding-inline: var(--mrc-gutter); } body .mrc-post *, body .mrc-post *::before, body .mrc-post *::after { box-sizing: border-box; } /* Reset block margins, then apply one consistent vertical rhythm */ body .mrc-post :where(p, ul, ol, dl, figure, blockquote, pre, table, hr, h1, h2, h3, h4, h5, h6, details, .wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-cover, .wp-block-media-text, .wp-block-embed, .wp-block-file, .wp-block-table, .wp-block-gallery) { margin-block: 0; } body .mrc-post > * + *, body .mrc-post > .elementor-widget-container > * + *, body .mrc-post :where(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container, .wp-block-media-text__content, .wp-block-details, blockquote) > * + * { margin-block-start: var(--mrc-flow); } /* If mrc-post is also on a parent container, the inner copy is not squeezed into the reading column */ body .mrc-post .mrc-post { max-width: none; margin-inline: 0; padding-inline: 0; } /* Reading column: normal blocks sit in the measure, centered */ body .mrc-post :where(figure) { margin-inline: 0; } body .mrc-post > :where(:not(.alignwide, .alignfull, .alignleft, .alignright, .elementor-widget-container)), body .mrc-post > .elementor-widget-container > :where(:not(.alignwide, .alignfull, .alignleft, .alignright)) { max-width: var(--mrc-measure); margin-inline: auto; } /* Wide & full alignment */ body .mrc-post .alignwide { max-width: var(--mrc-wide); margin-inline: auto; width: 100%; } body .mrc-post .alignfull { max-width: none; width: 100%; margin-inline: 0; } /* Big blocks get more breathing room */ body .mrc-post > :is(.alignwide, .alignfull, .wp-block-cover, .wp-block-media-text, .wp-block-gallery, .mrc-cta), body .mrc-post > .elementor-widget-container > :is(.alignwide, .alignfull, .wp-block-cover, .wp-block-media-text, .wp-block-gallery, .mrc-cta) { margin-block: var(--mrc-space-xl); } /* Floats (Align left / right) */ body .mrc-post .alignleft { float: left; max-width: 50%; margin: 0.35em var(--mrc-space-lg) var(--mrc-space-sm) 0; } body .mrc-post .alignright { float: right; max-width: 50%; margin: 0.35em 0 var(--mrc-space-sm) var(--mrc-space-lg); } /* At the top level, floats line up with the edges of the reading column */ body .mrc-post > .alignleft, body .mrc-post > .elementor-widget-container > .alignleft { margin-inline-start: max(0px, calc((100% - var(--mrc-measure)) / 2)); } body .mrc-post > .alignright, body .mrc-post > .elementor-widget-container > .alignright { margin-inline-end: max(0px, calc((100% - var(--mrc-measure)) / 2)); } body .mrc-post > :is(.alignleft, .alignright) { max-width: min(50%, calc(var(--mrc-measure) / 2)); } body .mrc-post .aligncenter { margin-inline: auto; text-align: center; } body .mrc-post::after, body .mrc-post .wp-block-group::after { content: ""; display: table; clear: both; } /* First and last blocks never add outer space */ body .mrc-post > :first-child, body .mrc-post > .elementor-widget-container > :first-child { margin-block-start: 0 !important; } body .mrc-post > :last-child, body .mrc-post > .elementor-widget-container > :last-child { margin-block-end: 0 !important; } body .mrc-post ::selection { background: var(--mrc-ice); color: var(--mrc-navy); } body .mrc-post :focus-visible { outline: none; box-shadow: var(--mrc-focus); border-radius: var(--mrc-radius-xs); } /* ========================================================================== 03b - BLOCK LAYOUT FALLBACKS Elementor pages on this site do not load WordPress's block-library CSS, so the structural layout of core blocks is defined here. If the library does load, these rules agree with it. ========================================================================== */ body .mrc-post :where(.wp-block-image, .wp-block-embed, .wp-block-table, .wp-block-video, .wp-block-audio):where(:not(.alignleft, .alignright)) { margin-inline: auto; } body .mrc-post .wp-block-image.aligncenter { display: table; } body .mrc-post .wp-block-image.aligncenter > figcaption { display: table-caption; caption-side: bottom; } body .mrc-post .wp-block-image :is(img[style*="width"], img[width]) { height: auto; } /* Gallery */ body .mrc-post .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; align-items: normal; --mrc-gallery-gap: var(--wp--style--unstable-gallery-gap, var(--mrc-space-sm)); gap: var(--mrc-gallery-gap); } body .mrc-post .wp-block-gallery.has-nested-images > figure.wp-block-image { position: relative; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin: 0 !important; max-width: 100%; width: calc((100% - var(--mrc-gallery-gap) * 2) / 3); } body .mrc-post .wp-block-gallery.has-nested-images.columns-1 > figure.wp-block-image { width: 100%; } body .mrc-post .wp-block-gallery.has-nested-images.columns-2 > figure.wp-block-image { width: calc((100% - var(--mrc-gallery-gap)) / 2); } body .mrc-post .wp-block-gallery.has-nested-images.columns-3 > figure.wp-block-image { width: calc((100% - var(--mrc-gallery-gap) * 2) / 3); } body .mrc-post .wp-block-gallery.has-nested-images.columns-4 > figure.wp-block-image { width: calc((100% - var(--mrc-gallery-gap) * 3) / 4); } body .mrc-post .wp-block-gallery.has-nested-images.columns-5 > figure.wp-block-image { width: calc((100% - var(--mrc-gallery-gap) * 4) / 5); } body .mrc-post .wp-block-gallery.has-nested-images.columns-6 > figure.wp-block-image { width: calc((100% - var(--mrc-gallery-gap) * 5) / 6); } body .mrc-post .wp-block-gallery.has-nested-images > figure.wp-block-image img { display: block; width: 100%; height: auto; } body .mrc-post .wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image:not(#individual-image) img { height: 100%; flex: 1 0 0%; object-fit: cover; } body .mrc-post .wp-block-gallery.has-nested-images > figure.wp-block-image > figcaption { position: absolute; inset: auto 0 0 0; max-height: 100%; overflow: auto; } body .mrc-post .wp-block-gallery.has-nested-images > .blocks-gallery-caption { flex-basis: 100%; margin-block-start: var(--mrc-space-2xs); } /* Cover */ body .mrc-post .wp-block-cover, body .mrc-post .wp-block-cover-image { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-position: center; background-size: cover; } body .mrc-post .wp-block-cover__image-background, body .mrc-post .wp-block-cover__video-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0 !important; object-fit: cover; box-shadow: none; z-index: 0; } body .mrc-post .wp-block-cover__background { position: absolute; inset: 0; z-index: 1; opacity: .5; background-color: var(--mrc-navy); } body .mrc-post .wp-block-cover__background.has-background-dim-0 { opacity: 0; } body .mrc-post .wp-block-cover__background.has-background-dim-10 { opacity: .1; } body .mrc-post .wp-block-cover__background.has-background-dim-20 { opacity: .2; } body .mrc-post .wp-block-cover__background.has-background-dim-30 { opacity: .3; } body .mrc-post .wp-block-cover__background.has-background-dim-40 { opacity: .4; } body .mrc-post .wp-block-cover__background.has-background-dim-50 { opacity: .5; } body .mrc-post .wp-block-cover__background.has-background-dim-60 { opacity: .6; } body .mrc-post .wp-block-cover__background.has-background-dim-70 { opacity: .7; } body .mrc-post .wp-block-cover__background.has-background-dim-80 { opacity: .8; } body .mrc-post .wp-block-cover__background.has-background-dim-90 { opacity: .9; } body .mrc-post .wp-block-cover__background.has-background-dim-100 { opacity: 1; } body .mrc-post .wp-block-cover__inner-container { position: relative; z-index: 2; } body .mrc-post .wp-block-cover.has-custom-content-position.is-position-top-left, body .mrc-post .wp-block-cover.has-custom-content-position.is-position-center-left, body .mrc-post .wp-block-cover.has-custom-content-position.is-position-bottom-left { justify-content: flex-start; } body .mrc-post .wp-block-cover.has-custom-content-position.is-position-top-right, body .mrc-post .wp-block-cover.has-custom-content-position.is-position-center-right, body .mrc-post .wp-block-cover.has-custom-content-position.is-position-bottom-right { justify-content: flex-end; } body .mrc-post .wp-block-cover.has-custom-content-position:is(.is-position-top-left, .is-position-top-center, .is-position-top-right) { align-items: flex-start; } body .mrc-post .wp-block-cover.has-custom-content-position:is(.is-position-bottom-left, .is-position-bottom-center, .is-position-bottom-right) { align-items: flex-end; } body .mrc-post .wp-block-cover.has-parallax { background-attachment: fixed; } /* Media & Text */ body .mrc-post .wp-block-media-text__media { margin: 0; grid-column: 1; grid-row: 1; align-self: center; } body .mrc-post .wp-block-media-text__content { grid-column: 2; grid-row: 1; align-self: center; word-break: break-word; } body .mrc-post .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; } body .mrc-post .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; } body .mrc-post .wp-block-media-text.is-vertically-aligned-top :is(.wp-block-media-text__media, .wp-block-media-text__content) { align-self: start; } body .mrc-post .wp-block-media-text.is-vertically-aligned-bottom :is(.wp-block-media-text__media, .wp-block-media-text__content) { align-self: end; } body .mrc-post .wp-block-media-text.is-image-fill .wp-block-media-text__media, body .mrc-post .wp-block-media-text.is-image-fill-element .wp-block-media-text__media { height: 100%; min-height: 250px; align-self: stretch; } /* Button widths (core Width setting) */ body .mrc-post .wp-block-button.wp-block-button__width-25 { width: calc(25% - var(--mrc-space-xs) * .75); } body .mrc-post .wp-block-button.wp-block-button__width-50 { width: calc(50% - var(--mrc-space-xs) * .5); } body .mrc-post .wp-block-button.wp-block-button__width-75 { width: calc(75% - var(--mrc-space-xs) * .25); } body .mrc-post .wp-block-button.wp-block-button__width-100 { width: 100%; flex-basis: 100%; } body .mrc-post .wp-block-button[class*="__width-"] .wp-block-button__link { width: 100%; } /* Social links sizing */ body .mrc-post .wp-block-social-links .wp-social-link svg { width: 20px; height: 20px; fill: currentColor; } /* Screen-reader text used inside some blocks */ body .mrc-post .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ========================================================================== 04 - HEADINGS (core/heading) The post title comes from the Elementor Post Title widget, so body headings normally start at H2. ========================================================================== */ body .mrc-post :is(h1, h2, h3, h4, h5, h6) { font-family: var(--mrc-font-body); font-weight: 600; color: var(--mrc-color-heading); text-wrap: balance; font-kerning: normal; } /* Display face: post-level H1 and section H2s only */ body .mrc-post :is(h1, h2, .mrc-heading-display) { font-family: var(--mrc-font-display); font-weight: 600; letter-spacing: 0.01em; } body .mrc-post h1 { font-size: var(--mrc-fs-h1); line-height: var(--mrc-lh-h1); } body .mrc-post h2 { font-size: var(--mrc-fs-h2); line-height: var(--mrc-lh-h2); } body .mrc-post h3 { font-size: var(--mrc-fs-h3); line-height: var(--mrc-lh-h3); letter-spacing: var(--mrc-ls-h3); } body .mrc-post h4 { font-size: var(--mrc-fs-h4); line-height: var(--mrc-lh-h4); letter-spacing: var(--mrc-ls-h4); } body .mrc-post h5 { font-size: var(--mrc-fs-h5); line-height: var(--mrc-lh-h5); letter-spacing: var(--mrc-ls-h5); } body .mrc-post h6 { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-h6); line-height: var(--mrc-lh-h6); letter-spacing: var(--mrc-ls-h6); font-weight: 600; color: var(--mrc-blue); } /* Space above headings in the article flow (sections breathe) */ body .mrc-post > h2, body .mrc-post > .elementor-widget-container > h2 { margin-block-start: 2.6em; clear: both; } body .mrc-post > h3, body .mrc-post > .elementor-widget-container > h3 { margin-block-start: 1.8em; } body .mrc-post > :is(h4, h5, h6), body .mrc-post > .elementor-widget-container > :is(h4, h5, h6) { margin-block-start: 1.4em; } /* Content right after a heading sits closer to it */ body .mrc-post :is(h1, h2, h3, h4, h5, h6) + * { margin-block-start: 0.7em; } body .mrc-post h6 + :is(h1, h2, h3, h4) { margin-block-start: 0.4em; } /* Anchor offset for sticky headers / table-of-contents links */ body .mrc-post :is(h2, h3, h4)[id] { scroll-margin-top: 120px; } /* Heading variants ------------------------------------------------------ */ /* .mrc-heading-rule - OPTIONAL hairline above a heading. Use it for two or three major breaks in a long article, not on every H2. Spacing alone separates normal sections. */ body .mrc-post .mrc-heading-rule { padding-block-start: 1em; border-block-start: 1px solid var(--mrc-line); } /* Never stack two lines: skip the rule right after anything that already ends in a line or panel */ body .mrc-post :is(.mrc-toc, .mrc-list-divided, .wp-block-separator, hr, .mrc-faq, .wp-block-pullquote, .mrc-callout, .mrc-panel, .mrc-panel-dark, .wp-block-table, .wp-block-details, .wp-block-group.has-background) + .mrc-heading-rule { padding-block-start: 0; border-block-start: 0; } /* .mrc-heading-highlight - site-style highlighter bar under all text */ body .mrc-post .mrc-heading-highlight { background-image: linear-gradient(transparent 62%, var(--mrc-mist) 62%, var(--mrc-mist) 92%, transparent 92%); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; } /* Headings using inline "Highlight" format get the highlighter too (see 05) */ /* .mrc-heading-display - oversized section opener */ body .mrc-post .mrc-heading-display { font-size: calc(var(--mrc-fs-h1) * 1.2); line-height: 1.1; letter-spacing: -0.3px; } /* ========================================================================== 05 - PARAGRAPH & INLINE TEXT (core/paragraph + rich-text formats) ========================================================================== */ body .mrc-post p { text-wrap: pretty; margin-block-end: 0; } /* beats kit's p{margin-block-end:1.2em} */ body .mrc-post strong, body .mrc-post b { font-weight: 600; color: var(--mrc-color-strong); } body .mrc-post em, body .mrc-post i { font-style: italic; } body .mrc-post small { font-size: 0.8em; } body .mrc-post sub, body .mrc-post sup { font-size: 0.7em; line-height: 0; position: relative; vertical-align: baseline; } body .mrc-post sup { top: -0.5em; } body .mrc-post sub { bottom: -0.25em; } body .mrc-post s, body .mrc-post del { color: var(--mrc-color-muted); } body .mrc-post abbr[title] { text-decoration: underline dotted; cursor: help; } /* Highlight format (mark element) WordPress uses the mark element for BOTH inline text color and highlight color. - Plain mark (pasted/HTML) -> brand highlighter bar - Highlight -> Background = "Ice" -> brand highlighter bar - Any other text / background choice -> honored as-is */ body .mrc-post mark { color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } body .mrc-post mark:not(.has-inline-color), body .mrc-post mark[style*="c5e4fb" i] { background-color: transparent !important; background-image: linear-gradient(transparent 55%, var(--mrc-ice) 55%, var(--mrc-ice) 92%, transparent 92%); padding-inline: 0.1em; } body .mrc-post mark.has-inline-color:not([style*="c5e4fb" i])[style*="background-color"]:not([style*="rgba(0, 0, 0, 0)"]):not([style*="rgba(0,0,0,0)"]) { padding: 0.05em 0.25em; border-radius: var(--mrc-radius-xs); } body .mrc-post kbd { font-family: var(--mrc-font-mono); font-size: 0.8em; padding: 0.15em 0.45em; border: 1px solid var(--mrc-line-strong); border-bottom-width: 2px; border-radius: var(--mrc-radius-sm); background: var(--mrc-white); color: var(--mrc-navy); } /* Inline code (not inside pre) */ body .mrc-post :not(pre) > code { font-family: var(--mrc-font-mono); font-size: 0.85em; padding: 0.15em 0.4em; border-radius: var(--mrc-radius-sm); background: var(--mrc-fog); color: var(--mrc-navy); word-break: break-word; } /* Drop cap (core toggle: Typography -> Drop cap) */ body .mrc-post p.has-drop-cap:not(:focus)::first-letter { font-family: var(--mrc-font-body); font-weight: 500; font-size: 4.6em; line-height: 0.85; float: left; margin: 0.06em 0.12em 0 0; color: var(--mrc-blue); text-transform: uppercase; font-style: normal; } /* Paragraph variants ---------------------------------------------------- */ /* .mrc-lead - intro / standfirst paragraph */ body .mrc-post .mrc-lead { font-size: var(--mrc-fs-lead); line-height: var(--mrc-lh-lead); color: var(--mrc-color-heading); font-weight: 400; } /* .mrc-eyebrow / .mrc-kicker - small label above a heading (plain text, no pill, no caps) */ body .mrc-post :is(.mrc-eyebrow, .mrc-kicker) { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-sm); line-height: 1.4; font-weight: 500; letter-spacing: 0; color: var(--mrc-slate); } body .mrc-post :is(.mrc-eyebrow, .mrc-kicker) + :is(h1, h2, h3, h4) { margin-block-start: 0.35em; } /* .mrc-small / .mrc-muted / .mrc-meta */ body .mrc-post .mrc-small { font-size: var(--mrc-fs-sm); line-height: 1.7; } body .mrc-post .mrc-muted { color: var(--mrc-color-muted); } body .mrc-post .mrc-meta { font-size: var(--mrc-fs-sm); line-height: 1.5; color: var(--mrc-color-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } /* .mrc-note - small italic editor's note */ body .mrc-post .mrc-note { font-size: var(--mrc-fs-sm); font-style: italic; color: var(--mrc-color-muted); border-inline-start: 2px solid var(--mrc-line-strong); padding-inline-start: var(--mrc-space-sm); } /* ========================================================================== 06 - LINKS ========================================================================== */ body .mrc-post a { color: var(--mrc-color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--mrc-blue) 40%, transparent); transition: color .2s var(--mrc-ease), text-decoration-color .2s var(--mrc-ease); } body .mrc-post a:hover { color: var(--mrc-color-link-hover); text-decoration-color: currentColor; text-decoration-thickness: 2px; } /* Links inside headings stay heading-colored */ body .mrc-post :is(h1, h2, h3, h4, h5) a { color: inherit; text-decoration-color: var(--mrc-ice); } body .mrc-post :is(h1, h2, h3, h4, h5) a:hover { color: var(--mrc-blue); } /* External-link marker: add class .mrc-link-external to the paragraph */ body .mrc-post .mrc-link-external a[href^="http"]::after { content: "\2197"; display: inline-block; margin-inline-start: 0.15em; font-size: 0.85em; text-decoration: none; } /* ========================================================================== 07 - LISTS (core/list, core/list-item) ========================================================================== */ body .mrc-post :is(ul, ol) { padding-inline-start: 1.4em; } body .mrc-post li { padding-inline-start: 0.25em; } body .mrc-post li + li { margin-block-start: 0.35em; } body .mrc-post li > :is(ul, ol) { margin-block-start: 0.45em; } body .mrc-post ul > li::marker { color: var(--mrc-blue); font-size: 1.05em; } body .mrc-post ul ul > li::marker { color: var(--mrc-sky); } body .mrc-post ol > li::marker { color: var(--mrc-blue); font-family: var(--mrc-font-body); font-weight: 600; font-variant-numeric: tabular-nums; } body .mrc-post ol ol { list-style-type: lower-alpha; } /* List variants (add class to the List block) -------------------------- */ /* .mrc-list-check - checkmarks */ body .mrc-post :is(ul, ol).mrc-list-check, body .mrc-post :is(ul, ol).mrc-list-arrow, body .mrc-post :is(ul, ol).mrc-list-plain { list-style: none; padding-inline-start: 0; } body .mrc-post .mrc-list-check > li, body .mrc-post .mrc-list-arrow > li { position: relative; padding-inline-start: 2em; } body .mrc-post .mrc-list-check > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.3em; width: 1.25em; height: 1.25em; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%230C72A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; } /* .mrc-list-arrow - arrows */ body .mrc-post .mrc-list-arrow > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.3em; width: 1.25em; height: 1.25em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5l4.5 4.5-4.5 4.5' fill='none' stroke='%230C72A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; } /* .mrc-list-plain - no markers */ body .mrc-post .mrc-list-plain > li { padding-inline-start: 0; } /* .mrc-list-steps - numbered circles (use on a Numbered list) */ body .mrc-post ol.mrc-list-steps { list-style: none; padding-inline-start: 0; counter-reset: mrc-step; } body .mrc-post ol.mrc-list-steps > li { counter-increment: mrc-step; position: relative; padding-inline-start: 3.1em; min-height: 2.1em; } body .mrc-post ol.mrc-list-steps > li + li { margin-block-start: var(--mrc-space-md); } body .mrc-post ol.mrc-list-steps > li::before { content: counter(mrc-step); position: absolute; inset-inline-start: 0; top: 0.05em; width: 2.1em; height: 2.1em; display: grid; place-items: center; border-radius: 50%; background: var(--mrc-white); border: 1px solid var(--mrc-line-strong); color: var(--mrc-blue); font-family: var(--mrc-font-body); font-weight: 600; font-size: 0.8em; line-height: 1; font-variant-numeric: tabular-nums; } body .mrc-post ol.mrc-list-steps[start] { counter-reset: none; } /* .mrc-list-divided - rows separated by rules */ body .mrc-post .mrc-list-divided { list-style: none; padding-inline-start: 0; } body .mrc-post .mrc-list-divided > li { padding: 0.75em 0; border-bottom: 1px solid var(--mrc-line); margin: 0; } body .mrc-post .mrc-list-divided > li:first-child { border-top: 1px solid var(--mrc-line); } /* .mrc-list-columns - two columns on desktop */ body .mrc-post .mrc-list-columns { columns: 2; column-gap: var(--mrc-space-xl); } body .mrc-post .mrc-list-columns > li { break-inside: avoid; } /* ========================================================================== 08 - COLOR UTILITIES Add to any block (Advanced -> Additional CSS class(es)) when you want a brand color without touching the editor's color picker. ========================================================================== */ body .mrc-post .mrc-text-navy { color: var(--mrc-navy) !important; } body .mrc-post .mrc-text-slate { color: var(--mrc-slate-600) !important; } body .mrc-post .mrc-text-blue { color: var(--mrc-blue) !important; } body .mrc-post .mrc-text-orange { color: var(--mrc-orange-700) !important; } body .mrc-post .mrc-text-maroon { color: var(--mrc-maroon) !important; } body .mrc-post .mrc-text-white { color: var(--mrc-white) !important; } body .mrc-post .mrc-bg-navy { background-color: var(--mrc-navy) !important; } body .mrc-post .mrc-bg-blue { background-color: var(--mrc-blue) !important; } body .mrc-post .mrc-bg-mist { background-color: var(--mrc-mist) !important; } body .mrc-post .mrc-bg-frost { background-color: var(--mrc-frost) !important; } body .mrc-post .mrc-bg-snow { background-color: var(--mrc-snow) !important; } body .mrc-post .mrc-bg-cream { background-color: var(--mrc-cream) !important; } body .mrc-post .mrc-bg-blush { background-color: var(--mrc-blush) !important; } body .mrc-post .mrc-bg-maroon { background-color: var(--mrc-maroon) !important; } body .mrc-post :is(p, h2, h3, h4, .wp-block-group, .wp-block-column):is([class*="mrc-bg-"]) { padding: var(--mrc-space-md) var(--mrc-space-lg); border-radius: var(--mrc-radius); } body .mrc-post .wp-block-group[class*="mrc-bg-"] { padding: var(--mrc-space-xl); } /* Any block with a background color gets padding + radius automatically */ body .mrc-post :is(p, h2, h3, h4, .wp-block-group, .wp-block-column).has-background { padding: var(--mrc-space-md) var(--mrc-space-lg); border-radius: var(--mrc-radius); } body .mrc-post .wp-block-group.has-background { padding: var(--mrc-space-xl); } /* Dark backgrounds flip text to white */ body .mrc-post :is(.mrc-bg-navy, .mrc-bg-blue, .mrc-bg-maroon, .has-black-background-color, .has-vivid-cyan-blue-background-color, .has-vivid-red-background-color, .has-vivid-purple-background-color) { color: var(--mrc-white); --mrc-color-heading: var(--mrc-white); --mrc-color-strong: var(--mrc-white); --mrc-color-text: rgba(255, 255, 255, .86); --mrc-color-muted: rgba(255, 255, 255, .72); --mrc-color-link: var(--mrc-white); --mrc-color-link-hover: var(--mrc-ice); } /* Highlighter on dark surfaces */ body .mrc-post :is(.mrc-cta:not(.mrc-cta-light), .mrc-panel-dark, .mrc-callout--takeaway, .wp-block-cover:not(.is-light), .mrc-bg-navy) mark:is(:not(.has-inline-color), [style*="c5e4fb" i]) { background-image: linear-gradient(transparent 60%, rgba(68, 152, 212, .55) 60%, rgba(68, 152, 212, .55) 92%, transparent 92%); } /* ========================================================================== 09 - QUOTE (core/quote) Styles: Default - Plain (core) - Large (.is-style-large) Variants: .mrc-quote-card - .mrc-quote-testimonial ========================================================================== */ body .mrc-post .wp-block-quote, body .mrc-post blockquote:not(.wp-block-pullquote blockquote) { position: relative; margin-inline: auto; padding: 0.25em 0 0.25em var(--mrc-space-lg); border: 0; border-inline-start: 3px solid var(--mrc-blue); background: none; font-family: var(--mrc-font-body); font-size: var(--mrc-fs-quote); font-weight: 400; line-height: 1.45; letter-spacing: -0.1px; color: var(--mrc-navy); quotes: none; } body .mrc-post .wp-block-quote p { font-size: inherit; line-height: inherit; } body .mrc-post .wp-block-quote > * + * { margin-block-start: 0.7em; } body .mrc-post .wp-block-quote cite, body .mrc-post .wp-block-quote footer, body .mrc-post .wp-block-pullquote cite { display: block; margin-block-start: var(--mrc-space-sm); font-family: var(--mrc-font-body); font-size: var(--mrc-fs-sm); font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--mrc-color-muted); } body .mrc-post .wp-block-quote cite::before { content: "\2014\00a0"; color: var(--mrc-blue); } body .mrc-post .wp-block-quote.has-text-align-center { border-inline-start: 0; padding-inline: 0; border-top: 3px solid var(--mrc-blue); padding-top: var(--mrc-space-md); } body .mrc-post .wp-block-quote.has-text-align-right { border-inline-start: 0; border-inline-end: 3px solid var(--mrc-blue); padding-inline: 0 var(--mrc-space-lg); } /* Plain (core) */ body .mrc-post .wp-block-quote.is-style-plain { border: 0; padding: 0; font-family: var(--mrc-font-body); font-size: var(--mrc-fs-lead); font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--mrc-slate-600); } /* Large */ body .mrc-post .wp-block-quote.is-style-large { border: 0; padding: var(--mrc-space-md) 0 0; font-size: var(--mrc-fs-h3); line-height: 1.3; letter-spacing: -0.17px; } body .mrc-post .wp-block-quote.is-style-large::before { content: ""; display: block; width: 44px; height: 33px; margin-block-end: var(--mrc-space-sm); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath fill='%234498D4' d='M0 36V22.4C0 9.6 6.2 2.1 18.6 0l1.9 5.3C13.7 7.4 10.4 11.4 10.1 17.3H19V36zm27.4 0V22.4C27.4 9.6 33.6 2.1 46 0l2 5.3c-6.9 2.1-10.2 6.1-10.5 12H46.4V36z'/%3E%3C/svg%3E") left center / contain no-repeat; } /* .mrc-quote-card - tinted card with oversized mark */ body .mrc-post .wp-block-quote.mrc-quote-card { border: 0; background: var(--mrc-frost); border-radius: var(--mrc-radius); padding: var(--mrc-space-xl) var(--mrc-space-xl) var(--mrc-space-lg); } body .mrc-post .wp-block-quote.mrc-quote-card::before { content: ""; position: absolute; top: var(--mrc-space-lg); inset-inline-end: var(--mrc-space-lg); width: 56px; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath fill='%23C5E4FB' d='M0 36V22.4C0 9.6 6.2 2.1 18.6 0l1.9 5.3C13.7 7.4 10.4 11.4 10.1 17.3H19V36zm27.4 0V22.4C27.4 9.6 33.6 2.1 46 0l2 5.3c-6.9 2.1-10.2 6.1-10.5 12H46.4V36z'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } body .mrc-post .wp-block-quote.mrc-quote-card > :first-child { padding-inline-end: 64px; } /* .mrc-quote-testimonial - attendee / speaker quote */ body .mrc-post .wp-block-quote.mrc-quote-testimonial { border: 1px solid var(--mrc-line); border-radius: var(--mrc-radius); background: var(--mrc-white); box-shadow: var(--mrc-shadow-sm); padding: var(--mrc-space-lg); font-family: var(--mrc-font-body); font-size: var(--mrc-fs-lead); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--mrc-navy); } body .mrc-post .wp-block-quote.mrc-quote-testimonial cite { font-family: var(--mrc-font-body); font-weight: 600; color: var(--mrc-navy); font-size: var(--mrc-fs-sm); padding-top: var(--mrc-space-sm); border-top: 1px solid var(--mrc-line); } body .mrc-post .wp-block-quote.mrc-quote-testimonial cite::before { content: none; } /* ========================================================================== 10 - PULLQUOTE (core/pullquote) Variants: .mrc-pullquote-dark - .mrc-pullquote-minimal ========================================================================== */ body .mrc-post .wp-block-pullquote, body .mrc-post .wp-block-pullquote.has-background, body .mrc-post .wp-block-pullquote.mrc-pullquote-dark, body .mrc-post .wp-block-pullquote.mrc-pullquote-minimal { margin-block: var(--mrc-space-xl); padding: 0.1em 0 0.1em var(--mrc-space-lg); border: 0; border-inline-start: 2px solid var(--mrc-blue); border-radius: 0; background: none !important; text-align: start; color: var(--mrc-color-heading); } body .mrc-post .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; background: none; } body .mrc-post .wp-block-pullquote p { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-pull); font-weight: 500; line-height: 1.35; letter-spacing: -0.1px; color: inherit; text-wrap: balance; } body .mrc-post .wp-block-pullquote cite { margin-block-start: var(--mrc-space-sm); text-transform: none; color: var(--mrc-color-muted); } body .mrc-post .wp-block-pullquote:is(.alignleft, .alignright) { max-width: 42%; margin-block: 0.35em var(--mrc-space-sm); } body .mrc-post .wp-block-pullquote:is(.alignleft, .alignright) p { font-size: var(--mrc-fs-h4); } /* ========================================================================== 11 - IMAGES & FIGURES (core/image) Styles: Default - Rounded (core .is-style-rounded -> circle) Variants: .mrc-img-square - .mrc-img-shadow - .mrc-img-frame - .mrc-img-tint ========================================================================== */ body .mrc-post img { max-width: 100%; height: auto; } body .mrc-post .wp-block-image img, body .mrc-post figure img { display: block; border-radius: var(--mrc-radius); } body .mrc-post .wp-block-image.aligncenter img { margin-inline: auto; } body .mrc-post .wp-block-image.alignfull img, body .mrc-post .wp-block-image.alignwide img { width: 100%; } body .mrc-post .wp-block-image.alignfull img { border-radius: 0; } body .mrc-post .wp-block-image a { display: block; } body .mrc-post .wp-block-image a img { transition: opacity .2s var(--mrc-ease); } body .mrc-post .wp-block-image a:hover img { opacity: .92; } /* Captions (image, gallery, table, embed, video, audio) */ body .mrc-post :is(figcaption, .wp-element-caption, .wp-block-image figcaption, .blocks-gallery-caption) { margin-block-start: var(--mrc-space-xs); font-family: var(--mrc-font-body); font-size: var(--mrc-fs-sm); line-height: 1.5; color: var(--mrc-color-muted); text-align: start; } body .mrc-post .aligncenter :is(figcaption, .wp-element-caption) { text-align: center; } body .mrc-post :is(figcaption, .wp-element-caption) a { color: inherit; } /* Rounded (core) = circle, for headshots */ body .mrc-post .wp-block-image.is-style-rounded img { border-radius: 50%; } /* Variants */ body .mrc-post .wp-block-image.mrc-img-square img { border-radius: 0; } body .mrc-post .wp-block-image.mrc-img-shadow img { box-shadow: var(--mrc-shadow-lg); } body .mrc-post .wp-block-image.mrc-img-frame img { padding: var(--mrc-space-xs); background: var(--mrc-white); border: 1px solid var(--mrc-line); border-radius: var(--mrc-radius-lg); } /* .mrc-img-tint - image on a soft brand panel (great for screenshots/UI) */ body .mrc-post .wp-block-image.mrc-img-tint { background: var(--mrc-frost); border-radius: var(--mrc-radius-lg); padding: var(--mrc-space-xl); } body .mrc-post .wp-block-image.mrc-img-tint img { box-shadow: var(--mrc-shadow); } body .mrc-post .wp-block-image.mrc-img-tint figcaption { margin-block-start: var(--mrc-space-md); } /* .mrc-caption-bar - caption sits in a rule-topped bar */ body .mrc-post .mrc-caption-bar :is(figcaption, .wp-element-caption) { padding-top: var(--mrc-space-xs); border-top: 1px solid var(--mrc-line); } /* ========================================================================== 12 - GALLERY (core/gallery) ========================================================================== */ body .mrc-post .wp-block-gallery { --wp--style--unstable-gallery-gap: var(--mrc-space-sm); gap: var(--mrc-space-sm); } body .mrc-post .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: var(--mrc-radius); } body .mrc-post .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { /* WP puts captions over the image; restyle as a soft navy gradient */ background: linear-gradient(0deg, rgba(36, 52, 65, .78) 0%, rgba(36, 52, 65, 0) 100%); border-radius: 0 0 var(--mrc-radius) var(--mrc-radius); font-size: var(--mrc-fs-xs); color: var(--mrc-white); padding: var(--mrc-space-lg) var(--mrc-space-sm) var(--mrc-space-xs); margin: 0; text-align: start; } body .mrc-post .wp-block-gallery .blocks-gallery-caption { width: 100%; } /* .mrc-gallery-square - force square crops */ body .mrc-post .wp-block-gallery.mrc-gallery-square figure.wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; height: 100%; } /* .mrc-gallery-flush - no gaps, no radius */ body .mrc-post .wp-block-gallery.mrc-gallery-flush { gap: 0; --wp--style--unstable-gallery-gap: 0px; } body .mrc-post .wp-block-gallery.mrc-gallery-flush img { border-radius: 0 !important; } /* ========================================================================== 13 - BUTTONS (core/buttons, core/button) Styles: Fill (default) - Outline (core .is-style-outline) Variants (on the Button): .mrc-btn-navy - .mrc-btn-light - .mrc-btn-link .mrc-btn-arrow - .mrc-btn-lg - .mrc-btn-sm Variant (on the Buttons wrapper): .mrc-buttons-stack (full width stack) ========================================================================== */ body .mrc-post .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--mrc-space-xs); align-items: center; } body .mrc-post .wp-block-buttons.is-content-justification-center { justify-content: center; } body .mrc-post .wp-block-buttons.is-content-justification-right { justify-content: flex-end; } body .mrc-post .wp-block-buttons.is-content-justification-space-between { justify-content: space-between; } body .mrc-post .wp-block-buttons.is-vertical { flex-direction: column; align-items: flex-start; } body .mrc-post .wp-block-button { margin: 0; } body .mrc-post .wp-block-button__link, body .mrc-post .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 14px 24px; border: 1px solid var(--mrc-blue); border-radius: var(--mrc-radius-xs); background-color: var(--mrc-blue); color: var(--mrc-white); font-family: var(--mrc-font-body); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s var(--mrc-ease), border-color .2s var(--mrc-ease), color .2s var(--mrc-ease), transform .2s var(--mrc-ease), box-shadow .2s var(--mrc-ease); } body .mrc-post .wp-block-button__link:hover, body .mrc-post .wp-element-button:hover { background-color: var(--mrc-navy); border-color: var(--mrc-navy); color: var(--mrc-white); text-decoration: none; } body .mrc-post .wp-block-button__link:active { transform: translateY(1px); } body .mrc-post .wp-block-button__link:focus-visible { box-shadow: var(--mrc-focus); } /* Width settings (core) */ body .mrc-post .wp-block-button.has-custom-width .wp-block-button__link { width: 100%; } /* Outline (core style) */ body .mrc-post .wp-block-button.is-style-outline > .wp-block-button__link, body .mrc-post .wp-block-button .wp-block-button__link.is-style-outline { background-color: transparent; border-color: var(--mrc-blue); color: var(--mrc-blue); padding: 14px 24px; } body .mrc-post .wp-block-button.is-style-outline > .wp-block-button__link:hover { background-color: var(--mrc-blue); border-color: var(--mrc-blue); color: var(--mrc-white); } /* Variants */ body .mrc-post .wp-block-button.mrc-btn-navy > .wp-block-button__link { background-color: var(--mrc-navy); border-color: var(--mrc-navy); } body .mrc-post .wp-block-button.mrc-btn-navy > .wp-block-button__link:hover { background-color: var(--mrc-blue); border-color: var(--mrc-blue); } body .mrc-post .wp-block-button.mrc-btn-navy.is-style-outline > .wp-block-button__link { background: transparent; color: var(--mrc-navy); border-color: var(--mrc-navy); } body .mrc-post .wp-block-button.mrc-btn-navy.is-style-outline > .wp-block-button__link:hover { background: var(--mrc-navy); color: var(--mrc-white); } body .mrc-post .wp-block-button.mrc-btn-light > .wp-block-button__link { background-color: var(--mrc-white); border-color: var(--mrc-white); color: var(--mrc-navy); } body .mrc-post .wp-block-button.mrc-btn-light > .wp-block-button__link:hover { background-color: var(--mrc-mist); border-color: var(--mrc-mist); color: var(--mrc-navy); } body .mrc-post .wp-block-button.mrc-btn-light.is-style-outline > .wp-block-button__link { background: transparent; color: var(--mrc-white); border-color: rgba(255, 255, 255, .6); } body .mrc-post .wp-block-button.mrc-btn-light.is-style-outline > .wp-block-button__link:hover { background: var(--mrc-white); color: var(--mrc-navy); border-color: var(--mrc-white); } body .mrc-post .wp-block-button.mrc-btn-link > .wp-block-button__link { background: transparent; border-color: transparent; color: var(--mrc-blue); padding-inline: 0; min-height: 0; text-decoration: underline; text-decoration-color: var(--mrc-ice); text-underline-offset: 0.3em; text-decoration-thickness: 2px; } body .mrc-post .wp-block-button.mrc-btn-link > .wp-block-button__link:hover { color: var(--mrc-blue-700); text-decoration-color: currentColor; } body .mrc-post .wp-block-button.mrc-btn-link.mrc-btn-arrow > .wp-block-button__link { text-decoration: none; } body .mrc-post .wp-block-button.mrc-btn-arrow > .wp-block-button__link::after { content: ""; flex: none; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5l4.5 4.5-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5l4.5 4.5-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--mrc-ease); } body .mrc-post .wp-block-button.mrc-btn-arrow > .wp-block-button__link:hover::after { transform: translateX(3px); } body .mrc-post .wp-block-button.mrc-btn-lg > .wp-block-button__link { min-height: 56px; padding: 18px 32px; font-size: 16px; } body .mrc-post .wp-block-button.mrc-btn-sm > .wp-block-button__link { min-height: 38px; padding: 9px 16px; font-size: 13px; } body .mrc-post .wp-block-buttons.mrc-buttons-stack { flex-direction: column; align-items: stretch; } body .mrc-post .wp-block-buttons.mrc-buttons-stack .wp-block-button__link { width: 100%; } /* Buttons that picked an editor background color keep hover feedback */ body .mrc-post .wp-block-button__link.has-background:hover { filter: brightness(.92); } /* ========================================================================== 14 - SEPARATOR & SPACER (core/separator, core/spacer) Styles: Default - Wide (core) - Dots (core) Variants: .mrc-sep-accent - .mrc-sep-space ========================================================================== */ body .mrc-post hr, body .mrc-post .wp-block-separator { border: 0; height: 1px; background: var(--mrc-line-strong); color: var(--mrc-line-strong); opacity: 1; margin-block: var(--mrc-space-xl); margin-inline: auto; max-width: var(--mrc-measure); width: 100%; } /* Default (non-wide) separator is a short centered rule */ body .mrc-post .wp-block-separator:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull):not(.mrc-sep-accent) { max-width: 120px; } body .mrc-post .wp-block-separator.is-style-wide { max-width: var(--mrc-measure); } body .mrc-post .wp-block-separator.alignwide { max-width: var(--mrc-wide); } body .mrc-post .wp-block-separator.alignfull { max-width: none; } /* Dots */ body .mrc-post .wp-block-separator.is-style-dots { background: none !important; height: auto; max-width: none; text-align: center; line-height: 1; } body .mrc-post .wp-block-separator.is-style-dots::before { content: "\00b7\00b7\00b7"; font-family: var(--mrc-font-body); font-size: 36px; letter-spacing: 0.6em; padding-inline-start: 0.6em; color: var(--mrc-sky); } /* Colored via editor */ body .mrc-post .wp-block-separator.has-background:not(.is-style-dots) { height: 2px; } body .mrc-post .wp-block-separator.has-text-color.is-style-dots::before { color: currentColor; } /* .mrc-sep-accent - short thick blue bar (left aligned to measure) */ body .mrc-post .wp-block-separator.mrc-sep-accent { height: 3px; width: 48px; max-width: 48px; background: var(--mrc-blue); border-radius: 2px; margin-inline: max(0px, calc((100% - var(--mrc-measure)) / 2)) auto; } /* .mrc-sep-space - invisible section break with extra space */ body .mrc-post .wp-block-separator.mrc-sep-space { background: transparent; margin-block: var(--mrc-space-2xl); } body .mrc-post .wp-block-spacer { margin: 0 !important; } body .mrc-post .wp-block-spacer + * { margin-block-start: 0 !important; } /* ========================================================================== 15 - TABLE (core/table) Styles: Default - Stripes (core .is-style-stripes) Variants: .mrc-table-compact - .mrc-table-light-head - .mrc-table-borderless ========================================================================== */ body .mrc-post .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--mrc-radius); border: 1px solid var(--mrc-line); } body .mrc-post .wp-block-table table, body .mrc-post table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; margin: 0; } body .mrc-post .wp-block-table.has-fixed-layout table { table-layout: fixed; } body .mrc-post :is(th, td) { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--mrc-line); text-align: start; vertical-align: top; background: transparent; } /* Neutralize Hello Elementor's default zebra/hover cell tint */ body .mrc-post table tbody tr :is(td, th), body .mrc-post table tbody tr:hover :is(td, th) { background-color: transparent; } body .mrc-post thead th { background: var(--mrc-navy); color: var(--mrc-white); font-family: var(--mrc-font-body); font-weight: 600; font-size: 15px; letter-spacing: 0; border-bottom: 0; vertical-align: bottom; } body .mrc-post tbody th { color: var(--mrc-navy); font-weight: 600; } body .mrc-post tbody tr:last-child :is(td, th) { border-bottom: 0; } body .mrc-post tfoot td { background: var(--mrc-snow); font-weight: 600; color: var(--mrc-navy); border-top: 1px solid var(--mrc-line-strong); border-bottom: 0; } body .mrc-post .wp-block-table :is(td, th)[data-align="center"], body .mrc-post .wp-block-table .has-text-align-center { text-align: center; } body .mrc-post .wp-block-table :is(td, th)[data-align="right"], body .mrc-post .wp-block-table .has-text-align-right { text-align: end; } body .mrc-post .wp-block-table figcaption { padding: var(--mrc-space-xs) 18px; margin: 0; border-top: 1px solid var(--mrc-line); background: var(--mrc-paper); } /* Stripes */ body .mrc-post .wp-block-table.is-style-stripes { border-bottom: 1px solid var(--mrc-line); } body .mrc-post .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--mrc-snow); } body .mrc-post .wp-block-table.is-style-stripes :is(td, th) { border-bottom: 0; } /* Variants */ body .mrc-post .wp-block-table.mrc-table-compact :is(th, td) { padding: 8px 12px; font-size: 14px; } body .mrc-post .wp-block-table.mrc-table-light-head thead th { background: var(--mrc-frost); color: var(--mrc-navy); border-bottom: 1px solid var(--mrc-ice); } body .mrc-post .wp-block-table.mrc-table-borderless { border: 0; border-radius: 0; } body .mrc-post .wp-block-table.mrc-table-borderless thead th { background: transparent; color: var(--mrc-navy); border-bottom: 2px solid var(--mrc-navy); } /* Editor-applied background/text colors on the table */ body .mrc-post .wp-block-table table.has-background { background: inherit; } /* ========================================================================== 16 - GROUP UTILITIES (core/group - add class to the Group block) .mrc-callout (+ --info --takeaway --warning --alert --cream) .mrc-card - .mrc-panel - .mrc-panel-dark - .mrc-cta - .mrc-toc .mrc-author - .mrc-session - .mrc-faq ========================================================================== */ body .mrc-post .wp-block-group { border-radius: var(--mrc-radius); } body .mrc-post .wp-block-group.is-layout-flex { display: flex; gap: var(--wp--style--block-gap); flex-wrap: wrap; } body .mrc-post .wp-block-group.is-layout-flex > * { margin: 0; } body .mrc-post .wp-block-group.is-vertical { flex-direction: column; } /* Callout ---------------------------------------------------------------- One quiet style: a soft fill, no border. Variants only change the fill and title color. Use at most one or two per article. */ body .mrc-post .mrc-callout { --mrc-callout-bg: var(--mrc-snow); --mrc-callout-title: var(--mrc-color-heading); --mrc-callout-accent: var(--mrc-blue); position: relative; padding: var(--mrc-space-lg); background: var(--mrc-callout-bg); border: 0; border-radius: var(--mrc-radius); color: var(--mrc-color-text); font-size: 17px; line-height: 1.65; } body .mrc-post .mrc-callout > * + * { margin-block-start: 0.6em; } body .mrc-post .mrc-callout :is(h2, h3, h4, h5, h6):first-child, body .mrc-post .mrc-callout > p:first-child > strong:only-child { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-sm); font-weight: 600; letter-spacing: 0; line-height: 1.4; text-transform: none; color: var(--mrc-callout-title); margin: 0; } body .mrc-post .mrc-callout :is(h2, h3, h4, h5, h6):first-child + *, body .mrc-post .mrc-callout > p:first-child:has(> strong:only-child) + * { margin-block-start: 0.5em; } body .mrc-post .mrc-callout a { color: var(--mrc-color-heading); text-decoration-color: currentColor; } body .mrc-post .mrc-callout--info { --mrc-callout-bg: var(--mrc-frost); } body .mrc-post .mrc-callout--warning { --mrc-callout-bg: var(--mrc-cream); --mrc-callout-title: var(--mrc-orange-700); } body .mrc-post .mrc-callout--alert { --mrc-callout-bg: var(--mrc-blush); --mrc-callout-title: var(--mrc-maroon); } body .mrc-post .mrc-callout--cream, body .mrc-post .mrc-callout--neutral { --mrc-callout-bg: var(--mrc-snow); } /* Key takeaways - no box: a label and list under a hairline */ body .mrc-post .mrc-callout--takeaway { background: none; border-radius: 0; padding: var(--mrc-space-md) 0 0; border-top: 1px solid var(--mrc-line-strong); font-size: var(--mrc-fs-body); line-height: 1.6; } body .mrc-post .mrc-callout--takeaway :is(h2, h3, h4, h5, h6):first-child, body .mrc-post .mrc-callout--takeaway > p:first-child > strong:only-child { color: var(--mrc-color-muted); font-weight: 500; } body .mrc-post .mrc-callout--takeaway :is(ul, ol) { margin-block-start: var(--mrc-space-xs); } body .mrc-post .mrc-callout--takeaway li + li { margin-block-start: 0.5em; } /* Card ------------------------------------------------------------------- */ body .mrc-post .mrc-card { padding: var(--mrc-space-lg); background: var(--mrc-snow); border-radius: var(--mrc-radius); color: var(--mrc-slate-600); font-size: 16px; line-height: 1.7; height: 100%; } body .mrc-post .mrc-card :is(h2, h3, h4) { font-size: var(--mrc-fs-h4); line-height: 1.25; letter-spacing: -0.17px; } body .mrc-post .mrc-card > * + * { margin-block-start: 0.75em; } body .mrc-post .mrc-card .wp-block-image:first-child { margin: calc(var(--mrc-space-lg) * -1) calc(var(--mrc-space-lg) * -1) var(--mrc-space-md); } body .mrc-post .mrc-card .wp-block-image:first-child img { border-radius: var(--mrc-radius) var(--mrc-radius) 0 0; width: 100%; } /* .mrc-card-outline / .mrc-card-raised */ body .mrc-post .mrc-card.mrc-card-outline { background: var(--mrc-white); border: 1px solid var(--mrc-line); } body .mrc-post .mrc-card.mrc-card-raised { background: var(--mrc-white); box-shadow: var(--mrc-shadow); } /* Panels ----------------------------------------------------------------- */ body .mrc-post .mrc-panel { padding: var(--mrc-space-xl); background: var(--mrc-frost); border-radius: var(--mrc-radius-lg); } body .mrc-post .mrc-panel-dark { padding: var(--mrc-space-xl); background: var(--mrc-navy); border-radius: var(--mrc-radius-lg); color: rgba(255, 255, 255, .86); --mrc-color-heading: var(--mrc-white); --mrc-color-strong: var(--mrc-white); --mrc-color-muted: rgba(255, 255, 255, .7); --mrc-color-link: var(--mrc-white); --mrc-color-link-hover: var(--mrc-ice); } body .mrc-post .mrc-panel-dark ul > li::marker { color: var(--mrc-sky); } /* CTA band --------------------------------------------------------------- */ body .mrc-post .mrc-cta { position: relative; overflow: hidden; padding: var(--mrc-space-2xl) var(--mrc-space-xl); background: radial-gradient(120% 140% at 100% 0%, rgba(68, 152, 212, .35) 0%, rgba(68, 152, 212, 0) 55%), var(--mrc-navy); border-radius: var(--mrc-radius-lg); color: rgba(255, 255, 255, .86); text-align: center; --mrc-color-heading: var(--mrc-white); --mrc-color-strong: var(--mrc-white); --mrc-color-link: var(--mrc-white); } body .mrc-post .mrc-cta > * { max-width: 620px; margin-inline: auto; } body .mrc-post .mrc-cta > * + * { margin-block-start: var(--mrc-space-sm); } body .mrc-post .mrc-cta :is(h2, h3) { font-size: var(--mrc-fs-h2); line-height: 1.15; } body .mrc-post .mrc-cta .mrc-eyebrow { color: var(--mrc-ice); } body .mrc-post .mrc-cta .wp-block-buttons { justify-content: center; margin-block-start: var(--mrc-space-md); } body .mrc-post .mrc-cta .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link { background: var(--mrc-white); border-color: var(--mrc-white); color: var(--mrc-navy); } body .mrc-post .mrc-cta .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link:hover { background: var(--mrc-mist); border-color: var(--mrc-mist); } body .mrc-post .mrc-cta .wp-block-button.is-style-outline:not([class*="mrc-btn-"]) > .wp-block-button__link { color: var(--mrc-white); border-color: rgba(255, 255, 255, .6); } body .mrc-post .mrc-cta .wp-block-button.is-style-outline:not([class*="mrc-btn-"]) > .wp-block-button__link:hover { background: var(--mrc-white); color: var(--mrc-navy); } /* .mrc-cta-light - soft blue version */ body .mrc-post .mrc-cta.mrc-cta-light { background: radial-gradient(120% 140% at 100% 0%, var(--mrc-ice) 0%, rgba(197, 228, 251, 0) 60%), var(--mrc-frost); color: var(--mrc-slate-600); --mrc-color-heading: var(--mrc-navy); --mrc-color-strong: var(--mrc-navy); --mrc-color-link: var(--mrc-blue); } body .mrc-post .mrc-cta.mrc-cta-light .mrc-eyebrow { color: var(--mrc-blue); } body .mrc-post .mrc-cta.mrc-cta-light .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link { background: var(--mrc-blue); border-color: var(--mrc-blue); color: var(--mrc-white); } body .mrc-post .mrc-cta.mrc-cta-light .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link:hover { background: var(--mrc-navy); border-color: var(--mrc-navy); } body .mrc-post .mrc-cta.mrc-cta-light .wp-block-button.is-style-outline:not([class*="mrc-btn-"]) > .wp-block-button__link { color: var(--mrc-blue); border-color: var(--mrc-blue); } body .mrc-post .mrc-cta.mrc-cta-light .wp-block-button.is-style-outline:not([class*="mrc-btn-"]) > .wp-block-button__link:hover { background: var(--mrc-blue); color: var(--mrc-white); } /* Table of contents (Group containing a heading/paragraph + List of #links) */ body .mrc-post .mrc-toc { padding-block: var(--mrc-space-md); border-block: 1px solid var(--mrc-line); font-size: 16px; line-height: 1.5; } body .mrc-post .mrc-toc :is(h2, h3, h4, h5, h6, p):first-child { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-sm); font-weight: 600; letter-spacing: 0; color: var(--mrc-navy); margin: 0; } body .mrc-post .mrc-toc :is(ol, ul) { margin-block-start: var(--mrc-space-xs); padding-inline-start: 0; list-style: none; columns: 2; column-gap: var(--mrc-space-xl); } body .mrc-post .mrc-toc li { break-inside: avoid; padding: 0; } body .mrc-post .mrc-toc li + li { margin-block-start: 0.4em; } body .mrc-post .mrc-toc a { color: var(--mrc-slate-600); text-decoration: none; } body .mrc-post .mrc-toc a:hover { color: var(--mrc-blue); text-decoration: underline; } @media (max-width: 767px) { body .mrc-post .mrc-toc :is(ol, ul) { columns: 1; } } /* Sticky contents rail (1200px and up). Any post with a top-level .mrc-toc Group switches to a 3-column grid: rail | article | space. Wide/full blocks stay in the article column while the rail is shown. */ @media (min-width: 1200px) { body .mrc-post:not(:has(> .elementor-widget-container)):has(> .mrc-toc), body .mrc-post > .elementor-widget-container:has(> .mrc-toc) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--mrc-measure)) minmax(0, 1fr); column-gap: var(--mrc-space-2xl); align-items: start; } body .mrc-post:not(:has(> .elementor-widget-container)):has(> .mrc-toc) > *, body .mrc-post > .elementor-widget-container:has(> .mrc-toc) > * { grid-column: 2; width: 100%; max-width: none; margin-inline: 0; } body .mrc-post:not(:has(> .elementor-widget-container)):has(> .mrc-toc) > .mrc-toc, body .mrc-post > .elementor-widget-container:has(> .mrc-toc) > .mrc-toc { grid-column: 1; grid-row: 1 / span 999; justify-self: end; width: 100%; max-width: 240px; position: sticky; top: var(--mrc-toc-top, 120px); margin: 0 !important; padding: 0 0 0 var(--mrc-space-sm); border: 0; border-inline-start: 1px solid var(--mrc-line); font-size: 14px; max-height: calc(100vh - var(--mrc-toc-top, 120px) - 24px); overflow: auto; } body .mrc-post .mrc-toc :is(ol, ul) { columns: 1; } body .mrc-post .mrc-toc a { display: block; padding: 3px 0; } /* Sticky needs every ancestor to allow overflow. Elementor's "Overflow: Hidden" on the surrounding container breaks it, so switch that to clip, which still hides overflow but lets the rail stick. */ body .e-con:has(.mrc-post .mrc-toc), body .e-con.mrc-post:has(.mrc-toc) { overflow: clip !important; } } /* Author / speaker bio (Group with Image + Heading + Paragraph, or Media & Text) */ body .mrc-post .mrc-author { display: grid; grid-template-columns: 88px 1fr; gap: var(--mrc-space-2xs) var(--mrc-space-md); align-items: start; padding: var(--mrc-space-lg); background: var(--mrc-snow); border-radius: var(--mrc-radius); font-size: 16px; line-height: 1.65; } body .mrc-post .mrc-author > * { margin: 0 !important; grid-column: 2; } body .mrc-post .mrc-author > .wp-block-image:first-child { grid-column: 1; grid-row: 1 / span 4; } body .mrc-post .mrc-author > .wp-block-image img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; } body .mrc-post .mrc-author :is(h2, h3, h4, h5) { font-size: var(--mrc-fs-h5); letter-spacing: -0.07px; line-height: 1.3; font-weight: 600; } body .mrc-post .mrc-author :is(h2, h3, h4, h5) + p { font-size: var(--mrc-fs-sm); color: var(--mrc-blue); font-weight: 500; } /* Session / event card */ body .mrc-post .mrc-session { padding: var(--mrc-space-md) 0 0; background: none; border: 0; border-top: 1px solid var(--mrc-line-strong); border-radius: 0; font-size: 16px; line-height: 1.6; height: 100%; } body .mrc-post .mrc-session > * + * { margin-block-start: 0.6em; } body .mrc-post .mrc-session :is(h2, h3, h4) { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-h4); line-height: 1.35; letter-spacing: 0; } body .mrc-post .mrc-session .mrc-meta { color: var(--mrc-slate); } body .mrc-post .mrc-session :is(.mrc-eyebrow, .mrc-kicker) { font-size: var(--mrc-fs-xs); } /* A Columns row with a single column (an odd card left over) keeps card width */ @media (min-width: 768px) { body .mrc-post .wp-block-columns > .wp-block-column:only-child { flex: 0 1 calc(50% - var(--mrc-space-lg) / 2); max-width: calc(50% - var(--mrc-space-lg) / 2); } } /* FAQ - Group of Details blocks */ body .mrc-post .mrc-faq > .wp-block-details + .wp-block-details { margin-block-start: 0; border-top: 0; border-radius: 0; } body .mrc-post .mrc-faq > .wp-block-details:first-of-type { border-radius: var(--mrc-radius) var(--mrc-radius) 0 0; } body .mrc-post .mrc-faq > .wp-block-details:last-of-type { border-radius: 0 0 var(--mrc-radius) var(--mrc-radius); } body .mrc-post .mrc-faq > .wp-block-details:only-of-type { border-radius: var(--mrc-radius); } /* ========================================================================== 17 - COLUMNS & STATS (core/columns, core/column) Variants on Columns: .mrc-columns-divided - .mrc-columns-cards - .mrc-stats Variant on Paragraph: .mrc-stat-number ========================================================================== */ body .mrc-post .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--mrc-space-lg); align-items: stretch; } body .mrc-post .wp-block-columns.are-vertically-aligned-center { align-items: center; } body .mrc-post .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; } @media (min-width: 768px) { body .mrc-post .wp-block-columns { flex-wrap: nowrap; } body .mrc-post .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; } } body .mrc-post .wp-block-column { flex: 1 1 0; min-width: 0; } body .mrc-post .wp-block-column[style*="flex-basis"] { flex-grow: 0; } /* .mrc-columns-divided - vertical rules between columns */ body .mrc-post .mrc-columns-divided { gap: 0; } body .mrc-post .mrc-columns-divided:not(.alignwide):not(.alignfull) > .wp-block-column { font-size: 16px; line-height: 1.65; } body .mrc-post .mrc-columns-divided > .wp-block-column { padding-inline: var(--mrc-space-lg); } body .mrc-post .mrc-columns-divided > .wp-block-column:first-child { padding-inline-start: 0; } body .mrc-post .mrc-columns-divided > .wp-block-column:last-child { padding-inline-end: 0; } body .mrc-post .mrc-columns-divided > .wp-block-column + .wp-block-column { border-inline-start: 1px solid var(--mrc-line); } /* .mrc-columns-cards - plain text columns under a hairline (no fill) */ body .mrc-post .mrc-columns-cards { gap: var(--mrc-space-lg); } body .mrc-post .mrc-columns-cards > .wp-block-column { padding: var(--mrc-space-sm) 0 0; background: none; border-top: 1px solid var(--mrc-line-strong); border-radius: 0; font-size: 16px; line-height: 1.6; } body .mrc-post .mrc-columns-cards > .wp-block-column :is(h2, h3, h4) { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-h5); line-height: 1.35; letter-spacing: 0; } body .mrc-post .mrc-columns-cards > .wp-block-column > * + * { margin-block-start: 0.5em; } /* Stats - Columns with class .mrc-stats; each column: big number paragraph (.mrc-stat-number or just the first paragraph) + label paragraph */ body .mrc-post .mrc-stats { gap: var(--mrc-space-sm); } body .mrc-post .mrc-stats > .wp-block-column { padding: var(--mrc-space-lg); background: var(--mrc-frost); border-radius: var(--mrc-radius); font-size: var(--mrc-fs-sm); line-height: 1.5; color: var(--mrc-slate-600); } body .mrc-post .mrc-stats > .wp-block-column > * + * { margin-block-start: var(--mrc-space-2xs); } body .mrc-post .mrc-stat-number, body .mrc-post .mrc-stats > .wp-block-column > p:first-child { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-stat); font-weight: 500; line-height: 1; letter-spacing: -0.3px; color: var(--mrc-navy); font-variant-numeric: tabular-nums; } body .mrc-post .mrc-stat-number sup, body .mrc-post .mrc-stats > .wp-block-column > p:first-child sup { font-size: 0.45em; top: -0.9em; color: var(--mrc-blue); } body .mrc-post .mrc-stats.mrc-stats-dark > .wp-block-column { background: var(--mrc-navy); color: rgba(255, 255, 255, .8); } body .mrc-post .mrc-stats.mrc-stats-dark > .wp-block-column > p:first-child, body .mrc-post .mrc-stats.mrc-stats-dark .mrc-stat-number { color: var(--mrc-white); } /* ========================================================================== 18 - COVER (core/cover) ========================================================================== */ body .mrc-post .wp-block-cover, body .mrc-post .wp-block-cover-image { min-height: 420px; padding: var(--mrc-space-2xl) var(--mrc-space-xl); border-radius: var(--mrc-radius-lg); overflow: hidden; color: var(--mrc-white); } body .mrc-post .wp-block-cover.alignfull { border-radius: 0; } /* Default overlay: brand navy instead of WP black */ body .mrc-post .wp-block-cover .wp-block-cover__background.has-background-dim:not([class*="-background-color"]) { background-color: var(--mrc-navy); } body .mrc-post .wp-block-cover__inner-container { width: 100%; max-width: var(--mrc-measure); color: inherit; --mrc-color-heading: currentColor; --mrc-color-strong: currentColor; --mrc-color-text: currentColor; --mrc-color-link: currentColor; --mrc-color-link-hover: currentColor; } body .mrc-post .wp-block-cover__inner-container :is(h1, h2, h3, h4, p) { color: inherit; } body .mrc-post .wp-block-cover__inner-container :is(h1, h2) { font-size: var(--mrc-fs-h1); line-height: 1.12; } body .mrc-post .wp-block-cover.is-light { color: var(--mrc-navy); } body .mrc-post .wp-block-cover .mrc-eyebrow { color: rgba(255, 255, 255, .85); } body .mrc-post .wp-block-cover.is-light .mrc-eyebrow { color: var(--mrc-blue); } body .mrc-post .wp-block-cover .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link { background: var(--mrc-white); border-color: var(--mrc-white); color: var(--mrc-navy); } body .mrc-post .wp-block-cover .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link:hover { background: var(--mrc-mist); border-color: var(--mrc-mist); } body .mrc-post .wp-block-cover .wp-block-button.is-style-outline:not([class*="mrc-btn-"]) > .wp-block-button__link { color: var(--mrc-white); border-color: rgba(255, 255, 255, .6); } body .mrc-post .wp-block-cover.is-light .wp-block-button:not([class*="mrc-btn-"]):not(.is-style-outline) > .wp-block-button__link { background: var(--mrc-blue); border-color: var(--mrc-blue); color: var(--mrc-white); } /* ========================================================================== 19 - MEDIA & TEXT (core/media-text) Variant: .mrc-media-card (tinted card) ========================================================================== */ body .mrc-post .wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; align-items: center; gap: 0; border-radius: var(--mrc-radius); overflow: hidden; } body .mrc-post .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; } body .mrc-post .wp-block-media-text__media img, body .mrc-post .wp-block-media-text__media video { width: 100%; height: auto; display: block; border-radius: var(--mrc-radius); } body .mrc-post .wp-block-media-text.is-image-fill .wp-block-media-text__media img, body .mrc-post .wp-block-media-text.is-image-fill-element .wp-block-media-text__media img { height: 100%; object-fit: cover; } body .mrc-post .wp-block-media-text__content { padding: var(--mrc-space-lg) 0 var(--mrc-space-lg) var(--mrc-space-xl); } body .mrc-post .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: var(--mrc-space-lg) var(--mrc-space-xl) var(--mrc-space-lg) 0; } body .mrc-post .wp-block-media-text__content :is(h2, h3) { font-size: var(--mrc-fs-h3); line-height: 1.2; } body .mrc-post .wp-block-media-text.has-background .wp-block-media-text__content { padding: var(--mrc-space-xl); } body .mrc-post .wp-block-media-text.has-background .wp-block-media-text__media img { border-radius: 0; } body .mrc-post .wp-block-media-text.mrc-media-card { background: var(--mrc-snow); } body .mrc-post .wp-block-media-text.mrc-media-card .wp-block-media-text__content { padding: var(--mrc-space-xl); } body .mrc-post .wp-block-media-text.mrc-media-card .wp-block-media-text__media img { border-radius: 0; } /* ========================================================================== 20 - DETAILS / ACCORDION (core/details) ========================================================================== */ body .mrc-post .wp-block-details { border: 1px solid var(--mrc-line); border-radius: var(--mrc-radius); background: var(--mrc-white); padding: 0; overflow: hidden; } body .mrc-post .wp-block-details summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-family: var(--mrc-font-body); font-size: var(--mrc-fs-h5); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--mrc-navy); transition: background-color .2s var(--mrc-ease); } body .mrc-post .wp-block-details summary::-webkit-details-marker { display: none; } body .mrc-post .wp-block-details summary::after { content: ""; position: absolute; top: 50%; inset-inline-end: 24px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--mrc-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%230C72A5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat; transition: transform .25s var(--mrc-ease); } body .mrc-post .wp-block-details[open] summary::after { transform: rotate(45deg); } body .mrc-post .wp-block-details summary:hover { background: var(--mrc-paper); } body .mrc-post .wp-block-details summary:focus-visible { box-shadow: inset 0 0 0 2px var(--mrc-blue); border-radius: var(--mrc-radius); } body .mrc-post .wp-block-details[open] summary { border-bottom: 1px solid var(--mrc-line); } body .mrc-post .wp-block-details > :not(summary) { margin: 0; padding: 0 24px; font-size: 17px; line-height: 1.7; } body .mrc-post .wp-block-details > summary + * { padding-top: 18px; margin-block-start: 0; } body .mrc-post .wp-block-details > :not(summary) + :not(summary) { margin-block-start: 0; padding-top: 0.8em; } body .mrc-post .wp-block-details > :last-child:not(summary) { padding-bottom: 22px; } body .mrc-post .wp-block-details + .wp-block-details { margin-block-start: var(--mrc-space-xs); } /* ========================================================================== 21 - CODE / PREFORMATTED / VERSE (core/code, core/preformatted, core/verse) ========================================================================== */ body .mrc-post pre, body .mrc-post .wp-block-code, body .mrc-post .wp-block-preformatted { font-family: var(--mrc-font-mono); font-size: 14px; line-height: 1.7; padding: var(--mrc-space-md); border-radius: var(--mrc-radius); overflow-x: auto; white-space: pre; tab-size: 4; } body .mrc-post .wp-block-code { background: var(--mrc-navy-900); color: #E7F5FF; border: 0; } body .mrc-post .wp-block-code code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: inherit; white-space: pre; } body .mrc-post .wp-block-preformatted { background: var(--mrc-fog); color: var(--mrc-navy); white-space: pre-wrap; } body .mrc-post .wp-block-verse { font-family: var(--mrc-font-body); font-size: var(--mrc-fs-lead); font-style: italic; line-height: 1.7; color: var(--mrc-navy); background: none; padding: 0 0 0 var(--mrc-space-lg); border-inline-start: 2px solid var(--mrc-ice); white-space: pre-wrap; overflow: visible; } /* ========================================================================== 22 - EMBEDS, VIDEO, AUDIO (core/embed, core/video, core/audio) ========================================================================== */ body .mrc-post .wp-block-embed { margin-inline: auto; } body .mrc-post .wp-block-embed__wrapper { position: relative; } body .mrc-post .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper { border-radius: var(--mrc-radius); overflow: hidden; background: var(--mrc-navy-900); } body .mrc-post .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; } body .mrc-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; } body .mrc-post .wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1 / 1; } body .mrc-post .wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; } body .mrc-post .wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; } body .mrc-post .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before { display: none; padding: 0; } body .mrc-post .wp-block-embed.wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } body .mrc-post .wp-block-embed iframe { max-width: 100%; border: 0; } /* Social embeds (LinkedIn, X) center nicely */ body .mrc-post :is(.wp-block-embed-twitter, .wp-block-embed-x, .is-provider-linkedin) .wp-block-embed__wrapper { display: flex; justify-content: center; } body .mrc-post .wp-block-video video { width: 100%; display: block; border-radius: var(--mrc-radius); background: var(--mrc-navy-900); } body .mrc-post .wp-block-audio audio { width: 100%; min-width: 280px; display: block; } body .mrc-post .wp-block-audio { padding: var(--mrc-space-sm); background: var(--mrc-snow); border-radius: var(--mrc-radius); } /* ========================================================================== 23 - FILE DOWNLOAD (core/file) ========================================================================== */ body .mrc-post .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mrc-space-sm); padding: var(--mrc-space-md) var(--mrc-space-lg); background: var(--mrc-white); border: 1px solid var(--mrc-line); border-radius: var(--mrc-radius); font-size: 16px; line-height: 1.4; } body .mrc-post .wp-block-file > a:not(.wp-block-file__button) { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mrc-font-body); font-weight: 600; color: var(--mrc-navy); text-decoration: none; } body .mrc-post .wp-block-file > a:not(.wp-block-file__button)::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: var(--mrc-radius-sm); background: var(--mrc-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z M14 3v5h5' fill='none' stroke='%230C72A5' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 55% no-repeat; } body .mrc-post .wp-block-file > a:not(.wp-block-file__button):hover { color: var(--mrc-blue); } body .mrc-post .wp-block-file .wp-block-file__button { display: inline-flex; align-items: center; gap: 0.4em; padding: 10px 18px; border-radius: var(--mrc-radius-xs); background: var(--mrc-blue); color: var(--mrc-white); font-family: var(--mrc-font-body); font-size: 14px; font-weight: 600; text-decoration: none; margin: 0; transition: background-color .2s var(--mrc-ease); } body .mrc-post .wp-block-file .wp-block-file__button:hover { background: var(--mrc-navy); color: var(--mrc-white); } body .mrc-post .wp-block-file__embed { width: 100%; border-radius: var(--mrc-radius-sm); margin-top: var(--mrc-space-sm); } /* ========================================================================== 24 - FOOTNOTES (core/footnotes) ========================================================================== */ body .mrc-post sup.fn a, body .mrc-post sup[data-fn] a { font-family: var(--mrc-font-body); font-weight: 600; text-decoration: none; color: var(--mrc-blue); padding: 0 0.1em; } body .mrc-post sup[data-fn] a::before { content: "["; } body .mrc-post sup[data-fn] a::after { content: "]"; } body .mrc-post .wp-block-footnotes { margin-block-start: var(--mrc-space-xl); padding-block-start: var(--mrc-space-md); border-top: 1px solid var(--mrc-line-strong); padding-inline-start: 1.4em; font-size: 14px; line-height: 1.6; color: var(--mrc-color-muted); } body .mrc-post .wp-block-footnotes li + li { margin-block-start: 0.35em; } body .mrc-post .wp-block-footnotes li::marker { color: var(--mrc-slate); font-family: var(--mrc-font-body); font-weight: 500; } body .mrc-post .wp-block-footnotes li:target { background: var(--mrc-mist); border-radius: var(--mrc-radius-xs); } body .mrc-post .wp-block-footnotes a[href^="#"][aria-label] { text-decoration: none; margin-inline-start: 0.25em; } /* ========================================================================== 25 - SOCIAL ICONS (core/social-links) - brand-tinted, overrides per-network colors ========================================================================== */ body .mrc-post .wp-block-social-links { gap: var(--mrc-space-2xs); padding: 0; list-style: none; display: flex; flex-wrap: wrap; } body .mrc-post .wp-block-social-links li { margin: 0; padding: 0; } body .mrc-post .wp-block-social-links:not(.is-style-logos-only) .wp-social-link { background-color: var(--mrc-mist) !important; color: var(--mrc-blue) !important; border-radius: var(--mrc-radius-xs); transition: background-color .2s var(--mrc-ease), color .2s var(--mrc-ease); } body .mrc-post .wp-block-social-links:not(.is-style-logos-only) .wp-social-link:hover { background-color: var(--mrc-blue) !important; color: var(--mrc-white) !important; transform: none; } body .mrc-post .wp-block-social-links .wp-social-link a { color: inherit; padding: 10px; display: flex; text-decoration: none; } body .mrc-post .wp-block-social-links.is-style-logos-only .wp-social-link { color: var(--mrc-navy) !important; } body .mrc-post .wp-block-social-links.is-style-logos-only .wp-social-link:hover { color: var(--mrc-blue) !important; } body .mrc-post .wp-block-social-links.is-style-pill-shape .wp-social-link { border-radius: var(--mrc-radius-pill); } /* ========================================================================== 26 - UTILITIES (any block) ========================================================================== */ body .mrc-post .mrc-measure { max-width: var(--mrc-measure) !important; margin-inline: auto !important; } body .mrc-post .mrc-narrow { max-width: 600px !important; margin-inline: auto !important; } body .mrc-post .mrc-center { text-align: center; } body .mrc-post .mrc-mt-0 { margin-block-start: 0 !important; } body .mrc-post .mrc-mt-lg { margin-block-start: var(--mrc-space-xl) !important; } body .mrc-post .mrc-mt-xl { margin-block-start: var(--mrc-space-2xl) !important; } body .mrc-post .mrc-mb-0 { margin-block-end: 0 !important; } body .mrc-post .mrc-radius-0, body .mrc-post .mrc-radius-0 img { border-radius: 0 !important; } body .mrc-post .mrc-shadow { box-shadow: var(--mrc-shadow); } body .mrc-post .mrc-border { border: 1px solid var(--mrc-line); border-radius: var(--mrc-radius); } body .mrc-post .mrc-show-mobile { display: none !important; } /* .mrc-bleed - make an .alignfull block span the whole viewport. Only use if the Elementor section/page has overflow-x hidden or clip. */ body .mrc-post .alignfull.mrc-bleed { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw) !important; border-radius: 0; } /* Editor text-align classes */ body .mrc-post .has-text-align-center { text-align: center; } body .mrc-post .has-text-align-right { text-align: right; } body .mrc-post .has-text-align-left { text-align: left; } /* ========================================================================== 27 - RESPONSIVE (Elementor breakpoints) - PRINT - MOTION ========================================================================== */ @media (max-width: 1024px) { body .mrc-post { --mrc-gutter: 32px; --mrc-fs-h1: 32px; --mrc-fs-h2: 22px; --mrc-lh-h2: 1.2; --mrc-fs-h3: 19px; --mrc-fs-h4: 17px; --mrc-fs-h5: 16px; --mrc-fs-body: 17px; --mrc-fs-lead: 20px; --mrc-fs-quote: 20px; --mrc-fs-pull: 23px; --mrc-fs-stat: 48px; --mrc-space-xl: 40px; --mrc-space-2xl: 56px; } body .mrc-post .mrc-columns-divided:not(.is-not-stacked-on-mobile) { flex-direction: column; gap: var(--mrc-space-md); } body .mrc-post .mrc-columns-divided:not(.is-not-stacked-on-mobile) > .wp-block-column { padding-inline: 0 !important; flex-basis: auto !important; } body .mrc-post .mrc-columns-divided:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column { border-inline-start: 0; border-top: 1px solid var(--mrc-line); padding-top: var(--mrc-space-md); } } @media (max-width: 767px) { body .mrc-post { --mrc-gutter: 20px; --mrc-fs-h1: 28px; --mrc-lh-h1: 1.15; --mrc-fs-h2: 24px; --mrc-lh-h2: 1.25; --mrc-ls-h2: -0.1px; --mrc-fs-h3: 18px; --mrc-fs-h4: 17px; --mrc-fs-h5: 16px; --mrc-fs-body: 16px; --mrc-lh-body: 1.75; --mrc-fs-lead: 19px; --mrc-lh-lead: 1.55; --mrc-fs-sm: 14px; --mrc-fs-quote: 19px; --mrc-fs-pull: 21px; --mrc-fs-stat: 40px; --mrc-space-lg: 24px; --mrc-space-xl: 32px; --mrc-space-2xl: 44px; } /* Full-width blocks still reach the screen edges */ body .mrc-post > .alignfull, body .mrc-post > .elementor-widget-container > .alignfull { width: calc(100% + var(--mrc-gutter) * 2); max-width: none; margin-inline: calc(var(--mrc-gutter) * -1); } /* Floats become full width */ body .mrc-post .alignleft, body .mrc-post .alignright, body .mrc-post .wp-block-pullquote.alignleft, body .mrc-post .wp-block-pullquote.alignright { float: none; max-width: 100%; margin-inline: 0; margin-block: var(--mrc-flow) 0; } /* Columns stack (unless "stack on mobile" is off) */ body .mrc-post .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; gap: var(--mrc-space-md); } body .mrc-post .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: auto !important; width: 100%; } body .mrc-post .mrc-columns-divided:not(.is-not-stacked-on-mobile) > .wp-block-column { padding-inline: 0; } body .mrc-post .mrc-columns-divided:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column { border-inline-start: 0; border-top: 1px solid var(--mrc-line); padding-top: var(--mrc-space-md); } body .mrc-post .mrc-columns-cards:not(.is-not-stacked-on-mobile), body .mrc-post .mrc-stats:not(.is-not-stacked-on-mobile) { gap: var(--mrc-space-xs); } /* Media & Text stacks (core "Stack on mobile" class) */ body .mrc-post .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; } body .mrc-post .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { grid-column: 1; grid-row: 1; } body .mrc-post .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; grid-row: 2; padding: var(--mrc-space-md) 0 0 !important; } body .mrc-post .wp-block-media-text.is-stacked-on-mobile.has-background .wp-block-media-text__content, body .mrc-post .wp-block-media-text.is-stacked-on-mobile.mrc-media-card .wp-block-media-text__content { padding: var(--mrc-space-lg) !important; } body .mrc-post .wp-block-group.has-background, body .mrc-post .mrc-panel, body .mrc-post .mrc-panel-dark { padding: var(--mrc-space-lg); } body .mrc-post .mrc-callout { padding: var(--mrc-space-md); font-size: 16px; } body .mrc-post .mrc-callout--takeaway { padding: var(--mrc-space-md) 0 0; } body .mrc-post .mrc-cta { padding: var(--mrc-space-xl) var(--mrc-space-md); } body .mrc-post .mrc-cta .wp-block-buttons { flex-direction: column; align-items: stretch; } body .mrc-post .wp-block-quote.mrc-quote-card { padding: var(--mrc-space-lg); } body .mrc-post .wp-block-cover { min-height: 340px; padding: var(--mrc-space-xl) var(--mrc-space-md); } body .mrc-post .wp-block-image.mrc-img-tint { padding: var(--mrc-space-md); } body .mrc-post .wp-block-details summary { padding: 16px 52px 16px 18px; } body .mrc-post .wp-block-details > :not(summary) { padding-inline: 18px; } body .mrc-post .wp-block-details summary::after { inset-inline-end: 18px; } body .mrc-post .mrc-author { grid-template-columns: 64px 1fr; padding: var(--mrc-space-md); } body .mrc-post .mrc-author > .wp-block-image img { width: 64px; height: 64px; } body .mrc-post .mrc-list-columns { columns: 1; } body .mrc-post :is(th, td) { padding: 12px 14px; } body .mrc-post .wp-block-table table { font-size: 15px; } body .mrc-post .wp-block-file { padding: var(--mrc-space-sm); } body .mrc-post .wp-block-file .wp-block-file__button { width: 100%; justify-content: center; } body .mrc-post .wp-block-buttons.mrc-buttons-stack-mobile { flex-direction: column; align-items: stretch; } body .mrc-post .wp-block-buttons.mrc-buttons-stack-mobile .wp-block-button__link { width: 100%; } body .mrc-post .mrc-hide-mobile { display: none !important; } body .mrc-post .mrc-show-mobile { display: block !important; } } @media (prefers-reduced-motion: reduce) { body .mrc-post *, body .mrc-post *::before, body .mrc-post *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { body .mrc-post { font-size: 11pt; line-height: 1.6; color: #000; } body .mrc-post a { color: #000; text-decoration: underline; } body .mrc-post :is(.mrc-cta, .wp-block-buttons, .wp-block-embed, .wp-block-social-links) { display: none !important; } body .mrc-post :is(h2, h3, h4) { break-after: avoid; } body .mrc-post :is(figure, blockquote, table, .mrc-callout) { break-inside: avoid; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'BN Carta Noir'; font-style: normal; font-weight: bold; font-display: auto; src: url('https://modernretailingconference.com/wp-content/uploads/2026/08/BNCartaNoir-Bold.ttf') format('truetype'); } /* End Custom Fonts CSS */