:where(p, .wp-block-paragraph).is-style-warning, :where(p, .wp-block-paragraph).is-style-error, :where(p, .wp-block-paragraph).is-style-info, :where(p, .wp-block-paragraph).is-style-tip, :where(p, .wp-block-paragraph).is-style-note, :where(p, .wp-block-paragraph).is-style-notice, :where(p, .wp-block-paragraph).is-style-minimal { --md-callout-accent: var(--color-primary); --md-callout-bg: color-mix(in srgb, var(--md-callout-accent) 6%, var(--color-content-bg)); --md-callout-border: color-mix(in srgb, var(--md-callout-accent) 22%, var(--color-border)); --md-callout-icon: color-mix(in srgb, var(--md-callout-accent) 72%, var(--color-text)); --md-callout-link: color-mix(in srgb, var(--md-callout-accent) 38%, var(--color-links)); background: var(--md-callout-bg); border: 1px solid var(--md-callout-border); border-radius: var(--radius-m); color: var(--color-text); line-height: var(--lh-relaxed, 1.7); margin: 1.5em 0 1em; padding: var(--space-single, 1.2rem) var(--space-mid, 1.5rem); } :where(p, .wp-block-paragraph).is-style-warning { --md-callout-accent: var(--color-warning, #b45309); --md-callout-glyph: "\ea07"; } :where(p, .wp-block-paragraph).is-style-error { --md-callout-accent: var(--color-error, #b91c1c); --md-callout-glyph: "\ea0d"; } :where(p, .wp-block-paragraph).is-style-info { --md-callout-accent: var(--color-info, #2563eb); --md-callout-glyph: "\ea0c"; } :where(p, .wp-block-paragraph).is-style-tip { --md-callout-accent: var(--color-success, #047857); --md-callout-glyph: "\f02b"; } :where(p, .wp-block-paragraph).is-style-note { --md-callout-accent: var(--color-tertiary); --md-callout-glyph: "\e803"; } :where(p, .wp-block-paragraph).is-style-notice { --md-callout-accent: var(--color-accent); } :where(p, .wp-block-paragraph).is-style-warning::before, :where(p, .wp-block-paragraph).is-style-error::before, :where(p, .wp-block-paragraph).is-style-info::before, :where(p, .wp-block-paragraph).is-style-tip::before, :where(p, .wp-block-paragraph).is-style-note::before { color: var(--md-callout-icon); content: var(--md-callout-glyph); display: inline-block; font-family: md-icon; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; margin-inline-end: 0.5em; speak: never; text-align: center; text-transform: none; } :where(p, .wp-block-paragraph).is-style-minimal { --md-callout-bg: color-mix(in srgb, var(--color-text) 3%, var(--color-content-bg)); --md-callout-border: color-mix(in srgb, var(--color-text) 10%, transparent); --md-callout-link: var(--color-links); color: var(--color-text-sec); } [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-warning, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-error, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-info, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-tip, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-note, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-notice { --md-callout-bg: color-mix(in srgb, var(--md-callout-accent) 12%, var(--color-content-bg)); --md-callout-border: color-mix(in srgb, var(--md-callout-accent) 28%, var(--color-border)); --md-callout-link: color-mix(in srgb, var(--md-callout-accent) 30%, var(--color-links)); } [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-minimal { --md-callout-bg: color-mix(in srgb, var(--color-text) 5%, var(--color-content-bg)); --md-callout-border: color-mix(in srgb, var(--color-text) 12%, transparent); } :where(p, .wp-block-paragraph).is-style-warning a, :where(p, .wp-block-paragraph).is-style-error a, :where(p, .wp-block-paragraph).is-style-info a, :where(p, .wp-block-paragraph).is-style-tip a, :where(p, .wp-block-paragraph).is-style-note a, :where(p, .wp-block-paragraph).is-style-notice a, :where(p, .wp-block-paragraph).is-style-minimal a { color: var(--md-callout-link); font-weight: var(--font-weight-bold, 700); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--md-callout-link) 42%, transparent); text-decoration-thickness: 0.08em; text-underline-offset: var(--text-underline-offset, 0.2em); } :where(p, .wp-block-paragraph).is-style-intro { color: var(--color-text-sec); font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3rem); line-height: 1.68; margin-block-start: var(--space-single); } :where(p, .wp-block-paragraph).is-style-serif { font-family: var(--font-serif); font-size: 1.1em; line-height: 1.8; } :where(p, .wp-block-paragraph).is-style-lead { border-block-end: 1px solid var(--color-border); color: var(--color-headline); font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem); font-weight: 500; line-height: 1.72; margin-block-end: var(--space-mid); padding-block-end: var(--space-single); } .editor-styles-wrapper .block-editor-block-list__layout > .is-style-lead { margin-block-end: var(--space-mid); } :where(p, .wp-block-paragraph).is-style-glass { background: color-mix(in srgb, var(--color-content-bg) 84%, transparent); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); border-radius: var(--radius-l); box-shadow: var(--shadow-sm); color: var(--color-text); line-height: var(--lh-relaxed, 1.7); margin: 1.5em 0; padding: var(--space-mid) var(--space-double); } [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-glass { background: color-mix(in srgb, var(--color-content-bg) 78%, transparent); border-color: color-mix(in srgb, var(--color-border) 72%, var(--color-text) 12%); } :where(p, .wp-block-paragraph).is-style-quote { border-inline-start: 3px solid color-mix(in srgb, var(--color-primary) 72%, var(--color-border)); color: var(--color-text-sec); font-style: italic; line-height: 1.7; margin: 1.25em 0; padding-inline-start: var(--space-single); } :where(p, .wp-block-paragraph).is-style-spotlight, :where(p, .wp-block-paragraph).is-style-ribbon-box, :where(p, .wp-block-paragraph).is-style-numbered-box, :where(p, .wp-block-paragraph).is-style-key-point { --md-box-accent: var(--color-primary); --md-box-bg: color-mix(in srgb, var(--md-box-accent) 5%, var(--color-content-bg)); --md-box-border: color-mix(in srgb, var(--md-box-accent) 24%, var(--color-border)); --md-box-rail: color-mix(in srgb, var(--md-box-accent) 72%, var(--color-text)); --md-box-link: color-mix(in srgb, var(--md-box-accent) 35%, var(--color-links)); background: var(--md-box-bg); border: 1px solid var(--md-box-border); border-radius: var(--radius-l); color: var(--color-text); line-height: var(--lh-relaxed, 1.7); margin: 1.5em 0; position: relative; } [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-spotlight, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-ribbon-box, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-numbered-box, [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-key-point { --md-box-bg: color-mix(in srgb, var(--md-box-accent) 11%, var(--color-content-bg)); --md-box-border: color-mix(in srgb, var(--md-box-accent) 28%, var(--color-border)); --md-box-rail: color-mix(in srgb, var(--md-box-accent) 72%, var(--color-text)); } :where(p, .wp-block-paragraph).is-style-spotlight { overflow: hidden; padding: var(--space-mid) var(--space-double); box-shadow: var(--shadow-sm); } [data-theme="dark"] :where(p, .wp-block-paragraph).is-style-spotlight { box-shadow: none; } :where(p, .wp-block-paragraph).is-style-spotlight::before { background: var(--md-box-rail); border-radius: var(--radius-l) var(--radius-l) 0 0; content: ""; height: 0.25rem; inset: 0 0 auto; position: absolute; } :where(p, .wp-block-paragraph).is-style-ribbon-box { padding: var(--space-mid) calc(var(--space-double) + var(--space-mid)) var(--space-mid) var(--space-double); } :where(p, .wp-block-paragraph).is-style-ribbon-box::before { background: var(--md-box-rail); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.5rem), 0 100%); content: ""; height: 2rem; inset: 0 var(--space-mid) auto auto; position: absolute; width: 1.125rem; } :where(p, .wp-block-paragraph).is-style-numbered-box { counter-increment: para-counter; padding: var(--space-mid) var(--space-double) var(--space-mid) calc(var(--space-double) + var(--space-mid)); } :where(p, .wp-block-paragraph).is-style-numbered-box::before { align-items: center; background: var(--md-box-rail); border-radius: var(--radius-full); color: var(--color-text-light); content: counter(para-counter); display: inline-flex; font-size: var(--fs-s); font-weight: var(--font-weight-bold); height: 2rem; inset: 50% auto auto var(--space-single); justify-content: center; position: absolute; transform: translateY(-50%); width: 2rem; } :where(p, .wp-block-paragraph).is-style-key-point { --md-box-accent: var(--color-accent); padding-block: var(--space-single); padding-inline: calc(var(--space-double) + var(--space-single)) var(--space-mid); } :where(p, .wp-block-paragraph).is-style-key-point::before { align-items: center; background: color-mix(in srgb, var(--md-box-accent) 22%, var(--color-content-bg)); border: 1px solid color-mix(in srgb, var(--md-box-accent) 36%, var(--color-border)); border-radius: var(--radius-full); color: var(--md-box-rail); content: "\e82a"; display: inline-flex; font-family: md-icon; font-size: 1.05rem; height: 2rem; inset-block-start: calc(var(--space-single) - 0.1em); inset-inline-start: var(--space-single); justify-content: center; position: absolute; width: 2rem; } :where(p, .wp-block-paragraph).is-style-spotlight a, :where(p, .wp-block-paragraph).is-style-ribbon-box a, :where(p, .wp-block-paragraph).is-style-numbered-box a, :where(p, .wp-block-paragraph).is-style-key-point a { color: var(--md-box-link); font-weight: var(--font-weight-bold, 700); }