.md-quote { position: relative; margin: 2em 0; } .md-quote-text { font-size: 1.25em; line-height: 1.65; margin: 0; font-style: normal; } .md-quote-font-sans .md-quote-text { font-family: var(--font-base); } .md-quote-font-serif .md-quote-text { font-family: var(--font-serif); } .md-quote-name { font-family: var(--font-base); font-style: normal; font-weight: var(--font-weight-bold); } .md-quote-role { font-family: var(--font-base); display: block; font-size: 0.8125em; color: var(--color-text-sec); margin-top: 0.125em; } .md-quote-avatar { object-fit: cover; flex-shrink: 0; } .md-quote-stars { display: flex; gap: 0.1em; color: #d4a017; font-size: 1rem; letter-spacing: 0.1em; } .md-quote-meta { display: flex; align-items: center; gap: 0.75em; margin-top: 1.25em; } .md-quote-vertical-rule { border-left: 3px solid var(--color-primary); padding: 0.25em 0 0.25em 1.75em; } .md-quote-vertical-rule .md-quote-name { font-size: var(--fs-s); color: var(--color-text-sec); } .md-quote-oversize-mark { padding-left: 3.5em; } .md-quote-oversize-mark > .md-quote-mark { position: absolute; left: 0; top: -0.15em; font-family: var(--font-serif); font-size: 5em; line-height: 1; color: var(--color-primary); opacity: 0.2; } .md-quote-oversize-mark .md-quote-name { font-size: var(--fs-s); } .md-quote-oversize-mark .md-quote-name strong { font-weight: var(--font-weight-bold); color: var(--color-text); } .md-quote-editorial-band { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 2em 0; text-align: center; } .md-quote-editorial-band .md-quote-text { max-width: 38ch; margin-inline: auto; letter-spacing: -0.01em; font-style: italic; } .md-quote-editorial-band .md-quote-meta { justify-content: center; } .md-quote-editorial-band .md-quote-name { font-size: var(--fs-s); color: var(--color-text-sec); letter-spacing: 0.06em; text-transform: uppercase; } .md-quote-tinted-surface { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-content-bg)); border-radius: var(--radius-l); padding: 3.625rem; } .md-quote-tinted-surface .md-quote-meta { gap: 0.625em; } .md-quote-tinted-surface .md-quote-meta::before { content: ""; display: block; width: 20px; height: 1px; background: color-mix(in srgb, var(--color-primary) 40%, transparent); } .md-quote-tinted-surface .md-quote-name { font-size: var(--fs-s); font-weight: 500; color: var(--color-text-sec); } .md-quote-boxed-accent { border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: 3.625rem; overflow: hidden; } .md-quote-boxed-accent::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--color-primary); border-radius: var(--radius-l) 0 0 var(--radius-l); } .md-quote-boxed-accent .md-quote-text { font-size: 1.0625em; } .md-quote-boxed-accent .md-quote-name { font-size: var(--fs-s); color: var(--color-primary); } .md-quote-inline-dash .md-quote-text { letter-spacing: -0.01em; } .md-quote-inline-dash .md-quote-name { font-size: 0.875em; font-weight: 400; color: var(--color-text-sec); } .md-quote-inline-dash .md-quote-name::before { content: "\2014\00a0"; color: var(--color-text-sec); } .md-quote-success-soft { background: color-mix(in srgb, var(--color-tertiary) 10%, var(--color-content-bg)); border: 1px solid color-mix(in srgb, var(--color-tertiary) 25%, var(--color-border)); border-radius: var(--radius-l); padding: 3.625rem; } .md-quote-success-soft .md-quote-text { font-size: var(--fs-m); } .md-quote-success-soft .md-quote-name { font-size: var(--fs-s); color: color-mix(in srgb, var(--color-tertiary) 60%, var(--color-text)); } .md-quote-success-border { border: 1px solid var(--color-tertiary); border-left-width: 4px; border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 3.625rem; background: var(--color-content-bg); } .md-quote-success-border .md-quote-text { font-size: var(--fs-m); } .md-quote-success-border .md-quote-name { font-size: var(--fs-s); color: var(--color-tertiary); } .md-quote-success-dark { background: color-mix(in srgb, var(--color-tertiary) 85%, var(--color-headline)); border-radius: var(--radius-l); padding: 3.625rem; } .md-quote-success-dark .md-quote-text { font-size: var(--fs-m); color: color-mix(in srgb, var(--color-tertiary) 15%, white); } .md-quote-success-dark .md-quote-name { font-size: var(--fs-s); color: color-mix(in srgb, var(--color-tertiary) 30%, white); } .md-quote-success-dark .md-quote-role { color: color-mix(in srgb, var(--color-tertiary) 40%, white); } .md-quote-serif-lead .md-quote-text { font-family: var(--font-serif); max-width: 52ch; } .md-quote-serif-lead .md-quote-name { font-size: var(--fs-s); color: var(--color-text-sec); } .md-quote-sans-secondary .md-quote-text { color: var(--color-text-sec); max-width: 55ch; } .md-quote-sans-secondary .md-quote-name { font-size: var(--fs-s); color: var(--color-text-sec); } .md-quote-editorial-italic { padding-bottom: 1.5em; border-bottom: 1px solid var(--color-border); } .md-quote-editorial-italic .md-quote-text { font-family: var(--font-serif); font-style: italic; max-width: 48ch; } .md-quote-editorial-italic .md-quote-name { font-size: var(--fs-s); color: var(--color-text-sec); } .md-quote-classic-centered { text-align: center; padding: 3.625rem 0; } .md-quote-classic-centered .md-quote-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.8125rem; display: block; } .md-quote-classic-centered .md-quote-text { font-style: italic; max-width: 42ch; margin-inline: auto; } .md-quote-classic-centered .md-quote-meta { justify-content: center; } .md-quote-classic-centered .md-quote-name { font-size: 0.875em; } .md-quote-card-stars { background: var(--color-content-bg); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: 3.625rem; } .md-quote-card-stars .md-quote-stars { margin-bottom: 1.8125rem; } .md-quote-card-stars .md-quote-text { font-size: 1em; line-height: 1.7; } .md-quote-card-stars .md-quote-meta { padding-top: 1.25em; border-top: 1px solid var(--color-border); } .md-quote-card-stars .md-quote-avatar { width: 36px; height: 36px; border-radius: 50%; } .md-quote-card-stars .md-quote-name { font-size: 0.8125em; line-height: 1.2; } .md-quote-card-stars .md-quote-role { font-size: 0.75em; } .md-quote-dark-statement { background: color-mix(in srgb, var(--color-headline) 94%, var(--color-primary)); border-radius: var(--radius-l); padding: 3.625rem; overflow: hidden; } .md-quote-dark-statement::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-quote-dark-statement .md-quote-text { color: rgba(255, 255, 255, 0.92); max-width: 42ch; } .md-quote-dark-statement .md-quote-avatar { width: 44px; height: 44px; border-radius: 50%; } .md-quote-dark-statement .md-quote-name { font-size: 0.875em; color: rgba(255, 255, 255, 0.92); } .md-quote-dark-statement .md-quote-role { font-size: 0.75em; color: rgba(255, 255, 255, 0.45); } .md-quote-asymmetric-mark { display: grid; grid-template-columns: 3rem 1fr; gap: 1.8125rem; align-items: start; } .md-quote-asymmetric-mark > .md-quote-mark { font-family: var(--font-serif); font-size: 4.5rem; line-height: 0.85; color: var(--color-primary); opacity: 0.25; padding-top: 0.25em; } .md-quote-asymmetric-mark .md-quote-avatar { width: 32px; height: 32px; border-radius: 8px; } .md-quote-asymmetric-mark .md-quote-name { font-size: 0.8125em; } .md-quote-asymmetric-mark .md-quote-role { font-size: 0.75em; } .md-quote.has-shadow { box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--color-text), transparent 90%); } @media (max-width: 782px) { .md-quote-asymmetric-mark { grid-template-columns: 2rem 1fr; } .md-quote-asymmetric-mark > .md-quote-mark { font-size: 3rem; } .md-quote-dark-statement { padding: 1.8125rem; } .md-quote-dark-statement .md-quote-text { font-size: 1.125em; } .md-quote-editorial-band .md-quote-text { font-size: 1.25em; } .md-quote-oversize-mark { padding-left: 2.5em; } .md-quote-oversize-mark > .md-quote-mark { font-size: 3.5em; } } [data-theme="dark"] .md-quote-tinted-surface { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-content-bg)); } [data-theme="dark"] .md-quote-boxed-accent { border-color: color-mix(in srgb, var(--color-border), transparent 20%); } [data-theme="dark"] .md-quote-card-stars { 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-quote-success-soft { background: color-mix(in srgb, var(--color-tertiary) 8%, var(--color-content-bg)); border-color: color-mix(in srgb, var(--color-tertiary) 20%, var(--color-border)); } [data-theme="dark"] .md-quote-success-border { background: color-mix(in srgb, var(--color-content-bg), white 2%); } [data-theme="dark"] .md-quote-dark-statement { background: color-mix(in srgb, var(--color-content-bg) 94%, var(--color-primary)); } [data-theme="dark"] .md-quote.has-shadow { box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35); }