/* aws-badge.css — "Available in AWS Marketplace" trust element. * * Text treatment only: the words carry the statement, the AWS logo sits inside * the sentence. No endorsement or partnership is implied or worded anywhere. * * Trademark handling: the two SVGs ship unmodified and are never recoloured, * stretched or cropped. Only `height` is set — `width: auto` lets the intrinsic * 300.73 x 179.82 ratio govern, so the mark is never distorted. The width and * height attributes on the stay for layout reservation. * * Dark mode follows the site mechanism: [data-theme] on , set by the * inline bootstrap in each page and by assets/js/theme.js. Exactly one of the * two logo files is rendered at a time — never both, in either mode. */ .aws-mp-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; line-height: 1; /* --slate-500 is #64748B in light and #94A3B8 in dark, so the token already carries the theme switch and no second colour rule is needed. */ color: var(--slate-500, #64748B); text-decoration: none; white-space: nowrap; transition: opacity .15s ease; } .aws-mp-badge:hover, .aws-mp-badge:focus-visible { opacity: .75; } .aws-mp-badge__text { letter-spacing: .01em; } .aws-mp-badge__logo { height: 19px; width: auto; /* intrinsic ratio — do not constrain both axes */ display: block; } /* One logo per theme, never both. Light is the default so a page that has not yet had data-theme stamped on it still shows a readable mark. */ .aws-mp-badge__logo--dark { display: none; } [data-theme="dark"] .aws-mp-badge__logo--light { display: none; } [data-theme="dark"] .aws-mp-badge__logo--dark { display: block; } /* index.html applies a global dimming to images in dark mode; the trademark is exempt so it stays at full contrast on the dark background. */ [data-theme="dark"] .aws-mp-badge__logo { opacity: 1; } /* Some sections carry a dark surface regardless of the page theme — the pricing CTA band is #0F172A in light mode too. There the theme attribute says "light" while the background is dark, so the Gray850 mark would sit almost invisibly on it. This modifier pins the white file to those surfaces. */ .aws-mp-badge--on-dark { color: rgba(248, 250, 252, .75); } .aws-mp-badge--on-dark .aws-mp-badge__logo--light { display: none; } .aws-mp-badge--on-dark .aws-mp-badge__logo--dark { display: block; } @media (max-width: 480px) { .aws-mp-badge { font-size: .8rem; gap: .35rem; } .aws-mp-badge__logo { height: 17px; } }