.md-pull-quote { margin-left: auto; margin-right: auto; max-width: 85%; position: relative; } .md-pull-quote-text { font-size: 1.35em; font-style: italic; line-height: 1.5; margin: 0 0 0.9375rem; } .md-pull-quote-citation { color: var(--color-text-sec); font-size: 0.88em; } .md-pull-quote-citation:before { content: '\2014 '; } .md-pull-quote-border { border-left: 4px solid var(--color-primary); padding-left: 1.8125rem; text-align: left !important; } .md-pull-quote-quote-marks { position: relative; } .md-pull-quote-quote-marks .md-pull-quote-mark { color: var(--color-primary); font-family: Georgia, serif; font-size: 4em; left: -0.1em; line-height: 1; opacity: 0.25; position: absolute; top: -0.2em; } .md-pull-quote-quote-marks .md-pull-quote-text { padding-left: 1.5em; } .md-pull-quote-boxed { background: var(--color-content-bg); border: 1px solid var(--color-border); border-radius: var(--radius-l); max-width: 100%; padding: 1.8125rem 3.625rem; transition: border-color var(--transition); } .md-pull-quote-boxed:hover { border-color: color-mix(in srgb, var(--color-border), var(--color-text) 10%); } .md-pull-quote-minimal .md-pull-quote-text { color: var(--color-text-sec); } .md-pull-quote.alignwide { max-width: var(--wide); width: calc(100% + 100px); margin-left: -50px; margin-right: -50px; } .md-pull-quote.alignfull { max-width: 100vw; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-left: 3.625rem; padding-right: 3.625rem; } .md-pull-quote.bleed-full { max-width: 100vw; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .md-pull-quote.alignfull.md-pull-quote-boxed, .md-pull-quote.bleed-full.md-pull-quote-boxed { border-radius: 0; } .md-pull-quote.alignfull .md-pull-quote-text, .md-pull-quote.bleed-full .md-pull-quote-text { max-width: var(--content-width, 720px); margin-left: auto; margin-right: auto; } .md-pull-quote.float-left { float: left; margin-right: 3.625rem; margin-bottom: 1.8125rem; max-width: 45%; width: 45%; } .md-pull-quote.float-right { float: right; margin-left: 3.625rem; margin-bottom: 1.8125rem; max-width: 45%; width: 45%; } .md-pull-quote.float-left, .md-pull-quote.float-right { clear: none; } .md-pull-quote.float-left .md-pull-quote-text, .md-pull-quote.float-right .md-pull-quote-text { font-size: 1.15em; } .md-pull-quote.has-shadow { box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--color-text), transparent 90%); } @media (max-width: 782px) { .md-pull-quote.alignwide { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; } .md-pull-quote.alignfull, .md-pull-quote.bleed-full { padding-left: 1.8125rem; padding-right: 1.8125rem; } .md-pull-quote.float-left, .md-pull-quote.float-right { float: none; margin-left: auto; margin-right: auto; max-width: 100%; width: 100%; } } .md-pull-quote-typographic { text-align: center; max-width: 100%; padding: 3.625rem 0; } .md-pull-quote-typographic .md-pull-quote-text { font-family: var(--font-serif); font-size: 2em; line-height: 1.35; font-weight: 400; font-style: normal; letter-spacing: -0.02em; max-width: 32ch; margin-inline: auto; } .md-pull-quote-typographic .md-pull-quote-citation { margin-top: 1.8125rem; font-size: var(--fs-s); font-weight: var(--font-weight-bold); color: var(--color-text-sec); letter-spacing: 0.08em; text-transform: uppercase; } .md-pull-quote-typographic .md-pull-quote-citation:before { content: none; } .md-pull-quote-sidebar { float: right; max-width: 45%; width: 45%; margin: 0.5em 0 1.8125rem 3.625rem; padding-left: 3.625rem; border-left: 2px solid var(--color-primary); text-align: left !important; } .md-pull-quote-sidebar .md-pull-quote-text { font-family: var(--font-serif); font-size: 1.25em; line-height: 1.55; } .md-pull-quote-sidebar .md-pull-quote-citation { margin-top: 0.75em; font-size: 0.75em; font-weight: var(--font-weight-bold); } .md-pull-quote-bezel { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-content-bg)); outline: 1px solid color-mix(in srgb, var(--color-border), transparent 40%); border-radius: 20px; padding: 6px; max-width: 100%; } .md-pull-quote-bezel-inner { background: var(--color-content-bg); border-radius: 15px; padding: 3.625rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .md-pull-quote-bezel .md-pull-quote-bezel-mark { font-family: var(--font-serif); font-size: 3.5rem; line-height: 1; color: var(--color-primary); opacity: 0.15; display: block; margin-bottom: 0.9375rem; } .md-pull-quote-bezel .md-pull-quote-text { font-family: var(--font-serif); font-size: 1.3125em; line-height: 1.6; font-style: normal; } .md-pull-quote-bezel .md-pull-quote-citation { margin-top: 1.8125rem; font-weight: var(--font-weight-bold); } .md-pull-quote-bezel .md-pull-quote-citation:before { content: none; } .md-pull-quote-dark { background: color-mix(in srgb, var(--color-headline) 94%, var(--color-primary)); border-radius: var(--radius-l); padding: 3.625rem 3.625rem; text-align: center; max-width: 100%; position: relative; overflow: hidden; } .md-pull-quote-dark::before { content: "\201C"; position: absolute; top: -0.25rem; right: 1.5rem; font-family: var(--font-serif); font-size: 10rem; line-height: 1; color: rgba(255, 255, 255, 0.04); } .md-pull-quote-dark .md-pull-quote-text { font-family: var(--font-serif); font-size: 1.75em; line-height: 1.4; font-weight: 400; font-style: normal; color: rgba(255, 255, 255, 0.92); max-width: 36ch; margin-inline: auto; letter-spacing: -0.01em; position: relative; } .md-pull-quote-dark .md-pull-quote-citation { color: rgba(255, 255, 255, 0.5); position: relative; margin-top: 1.8125rem; } .md-pull-quote-dark .md-pull-quote-citation:before { content: none; } @media (max-width: 782px) { .md-pull-quote-sidebar { float: none; max-width: 100%; width: 100%; margin-left: 0; padding-left: 1.8125rem; } .md-pull-quote-typographic .md-pull-quote-text { font-size: 1.5em; } .md-pull-quote-dark .md-pull-quote-text { font-size: 1.25em; } } [data-theme="dark"] .md-pull-quote-boxed { background: color-mix(in srgb, var(--color-content-bg), white 2%); border-color: color-mix(in srgb, var(--color-border), transparent 20%); } [data-theme="dark"] .md-pull-quote.has-shadow { box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35); }