// stylelint-disable declaration-no-important, a11y/font-size-is-readable
--color-badge-logo-dark: #03061b;
--color-badge-logo-light: var(--color-white);
--color-badge-tooltip-text-dark: var(--color-white);
--color-badge-tooltip-text-light: #03061b;
--color-badge-tooltip-background-light: rgb(255 255 255 / .8);
--color-badge-tooltip-background-dark: rgb(17 17 17 / .9);
--color-badge-logo: var(--color-badge-logo-dark);
--color-badge-tooltip-text: var(--color-badge-tooltip-text-dark);
--color-badge-tooltip-background: var(--color-badge-tooltip-background-dark);
.site-footer .container {
.site-footer .dude-badge {
// Adjust based on the site
fill: var(--color-badge-logo);
fill: var(--color-badge-logo);
stroke: var(--color-badge-logo);
transform: translate(-48%, 18px);
transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
background-color: var(--color-badge-tooltip-background);
color: var(--color-badge-tooltip-text);
content: attr(data-tooltip);
font-family: sans-serif !important;
font-size: 12px !important;
font-style: normal !important;
font-weight: 400 !important;
text-shadow: none !important;
transform: translate(-48%, 10px);
transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
transform: translate(-37%, 15px);
transition: transform 155ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
fill: var(--color-badge-tooltip-background);
[data-tooltip]:hover .tip,
[data-tooltip]:hover::after,
[data-tooltip]:focus .tip,
[data-tooltip]:focus::after,
[data-tooltip][data-tooltip-visible] .tip,
[data-tooltip][data-tooltip-visible]::after {
[data-tooltip]:hover::after,
[data-tooltip][data-tooltip-visible]::after {
transform: translate(-48%, -5px);
[data-tooltip]:hover .tip,
[data-tooltip][data-tooltip-visible] .tip {
transform: translate(-37%, 0);