.bio-ec-branding-card,
.bio-ec-branding-card * {
box-sizing: border-box;
}
.bio-ec-branding-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 312px;
height: 148px;
max-width: calc(100vw - 24px);
padding: 2px;
overflow: hidden;
border: 1px solid var(--bio-card-border, rgba(255, 255, 255, .16));
border-radius: 16px;
background: var(--bio-card-bg, #061E41);
box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
color: var(--bio-card-text, #fff);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.bio-ec-branding-card--admin {
position: fixed;
left: 5px;
bottom: 5px;
z-index: 2147483000;
}
.bio-ec-branding-card__logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 172px;
height: 68px;
max-width: 100%;
padding: 8px 18px;
border-radius: 11px;
background: #fff;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.bio-ec-branding-card__logo-link:hover,
.bio-ec-branding-card__logo-link:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
outline: 2px solid #72aee6;
outline-offset: 2px;
}
.bio-ec-branding-card__logo {
display: block;
width: 124px;
height: 45px;
max-width: 100%;
object-fit: contain;
}
.bio-ec-branding-card__claim {
margin: 7px 0;
color: var(--bio-card-muted, rgba(255, 255, 255, .84));
font-size: 12px;
line-height: 1.35;
}
.bio-ec-branding-card__claim strong {
margin-left: 3px;
color: var(--bio-card-text, #fff);
font-weight: 700;
}
.bio-ec-branding-card__socials {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
}
.bio-ec-branding-card__social {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--bio-card-border, rgba(255, 255, 255, .16));
border-radius: 9px;
background: var(--bio-card-social-bg, rgba(255, 255, 255, .08));
color: var(--bio-card-text, #fff);
text-decoration: none;
transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.bio-ec-branding-card__social svg {
width: 17px;
height: 17px;
fill: currentColor;
pointer-events: none;
}
.bio-ec-branding-card__social:hover,
.bio-ec-branding-card__social:focus-visible {
color: var(--bio-card-text, #fff);
border-color: var(--bio-card-hover-border, rgba(255, 255, 255, .48));
background: var(--bio-card-social-hover, rgba(255, 255, 255, .18));
transform: translateY(-2px);
outline: 2px solid #72aee6;
outline-offset: 2px;
}
.bio-ec-branding-card__social--whatsapp {
background: #25d366;
border-color: #25d366;
}
.bio-ec-branding-card__social--whatsapp:hover,
.bio-ec-branding-card__social--whatsapp:focus-visible {
background: #1fbd59;
border-color: #1fbd59;
} .bio-ec-footer-credit {
position: relative;
display: inline-block;
z-index: 20;
}
.bio-ec-footer-credit__trigger {
display: inline-block;
color: var(--bio-credit-text, inherit) !important;
font: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
cursor: pointer;
}
.bio-ec-footer-credit__trigger:hover,
.bio-ec-footer-credit__trigger:focus-visible {
text-decoration: none;
outline: 2px solid currentColor;
outline-offset: 3px;
}
.bio-ec-footer-credit--on-light {
--bio-credit-text: var(--bio-credit-on-light, #061E41);
}
.bio-ec-footer-credit--on-dark {
--bio-credit-text: var(--bio-credit-on-dark, #FFFFFF);
} .bio-ec-footer-credit__popover {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 2147483000;
display: block;
width: 312px;
max-width: calc(100vw - 24px);
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(12px) scale(.96);
transform-origin: center;
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.bio-ec-footer-credit:hover .bio-ec-footer-credit__popover,
.bio-ec-footer-credit:focus-within .bio-ec-footer-credit__popover,
.bio-ec-footer-credit.is-open .bio-ec-footer-credit__popover,
.bio-ec-footer-credit__popover.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
transition-delay: 0s;
}
.bio-ec-branding-card--footer {
position: relative;
left: auto;
bottom: auto;
}
@media screen and (max-width: 520px) {
.bio-ec-branding-card--admin {
left: 8px;
bottom: 8px;
width: calc(100vw - 16px);
}
.bio-ec-branding-card__socials {
gap: 7px;
}
.bio-ec-branding-card__social {
width: 31px;
height: 31px;
}
}
@media (prefers-reduced-motion: reduce) {
.bio-ec-branding-card__logo-link,
.bio-ec-branding-card__social,
.bio-ec-footer-credit__popover {
transition: none;
}
} .bio-ec-sidebar-slot {
position: fixed;
left: 0;
bottom: 0px;
z-index: 9990;
width: auto;
padding: 8px 6px;
background: #1d2327;
}
.bio-ec-branding-card--admin.bio-ec-branding-card--sidebar {
position: relative;
left: auto;
bottom: auto;
z-index: auto;
width: 148px;
height: auto;
min-height: 184px;
max-width: 148px;
padding: 10px 7px;
border-radius: 10px;
box-shadow: none;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__logo-link {
width: 124px;
height: 54px;
padding: 7px 12px;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__logo {
width: 96px;
height: auto;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__claim {
margin: 8px 2px;
font-size: 10px;
line-height: 1.35;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__claim strong {
display: block;
margin: 2px 0 0;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__socials {
display: grid;
grid-template-columns: repeat(4, 28px);
gap: 5px;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__social {
width: 28px;
height: 28px;
border-radius: 7px;
}
.bio-ec-branding-card--sidebar .bio-ec-branding-card__social svg {
width: 14px;
height: 14px;
} #adminmenu {
padding-bottom: 225px;
} .folded .bio-ec-sidebar-slot {
display: none;
}
@media screen and (max-width: 960px) {
.auto-fold .bio-ec-sidebar-slot {
display: none;
}
}
@media screen and (max-height: 720px) {
.bio-ec-sidebar-slot {
position: static;
width: 160px;
padding-top: 12px;
}
#adminmenu {
padding-bottom: 0;
}
} .bio-ec-branding-settings .form-table th {
width: 250px;
}
.bio-ec-branding-settings input[type="color"] {
width: 64px;
height: 38px;
padding: 2px;
vertical-align: middle;
}
.bio-ec-branding-settings input[type="color"] + code {
margin-left: 8px;
}
.bio-ec-bg-options > label {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 20px 10px 0;
font-weight: 600;
}
.bio-ec-bg-swatch {
display: inline-block;
width: 28px;
height: 28px;
border: 1px solid #a7aaad;
border-radius: 7px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.bio-ec-bg-swatch--blue { background: #061E41; }
.bio-ec-bg-swatch--white { background: #FFFFFF; }
.bio-ec-bg-swatch--black { background: #000000; }
.bio-ec-shortcode-help {
max-width: 760px;
margin-top: 22px;
padding: 18px 20px;
border: 1px solid #dcdcde;
border-radius: 10px;
background: #fff;
}
.bio-ec-shortcode-help h2 {
margin-top: 0;
}