/* Wrapper (Global) */ #amust-wrapper { --focus: 0 0 0 2px #ffffff, 0 0 0 4px #000000, 0 0 0 6px #ffffff; --boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a; --fontFamily: 'Prompt', Arial, sans-serif; --primaryColor: #021B54; --backgroundColor: #ffffff; --textColor: #4b494b; --backdropBackgroundColor: #00000033; --backdropBackgroundBlur: 0px; --cookieIconColor: #021B54; --cookieIconBackgroundColor: #FFFFFF; position: fixed; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; border: 0px; display: flex; justify-content: center; align-items: center } /* Backdrop (Global) */ #amust-backdrop-global { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; border: 0px; display: none; } /* -------------------------------- Links -------------------------------- */ #amust-wrapper a { all: unset; display: inline-block; color: var(--primaryColor); text-decoration: underline; } #amust-wrapper a:hover { cursor: pointer; color: var(--textColor); } /* -------------------------------- Focus Styles -------------------------------- */ #amust-wrapper a:focus, #amust-wrapper #amust-banner button:focus, #amust-wrapper #amust-modal button:focus, #amust-wrapper #amust-cookie-icon:focus { outline: none; box-shadow: var(--focus); border-radius: 5px; } #amust-wrapper #amust-cookie-icon:focus { border-radius: 50%; } /* -------------------------------- General Styles -------------------------------- */ #amust-wrapper .st-button { color: var(--backgroundColor); background-color: var(--primaryColor); border: 2px solid var(--primaryColor); padding: 10px 20px; text-decoration: none; text-align: center; display: inline-block; font-size: 14px; line-height: 24px; cursor: pointer; border-radius: 5px; } #amust-wrapper .st-button--primary { } #amust-wrapper .st-button--primary:hover { background-color: var(--backgroundColor); color: var(--primaryColor); } #amust-wrapper .st-button--secondary { background-color: var(--backgroundColor); color: var(--primaryColor); } #amust-wrapper .st-button--secondary:hover { background-color: var(--primaryColor); color: var(--backgroundColor); } /* -------------------------------- Banner -------------------------------- */ #amust-banner { font-family: var(--fontFamily); color: var(--textColor); background-color: var(--backgroundColor); box-sizing: border-box; padding: 32px; border-radius: 5px; pointer-events: auto; border: 0px; position: fixed; bottom: 16px; right: 16px; width: 600px; overflow: auto; max-width: calc(100% - 32px); max-height: calc(100vh - 32px); transform: translate(0, -20px); opacity: 0; animation: amust-slideInDown 350ms ease-out forwards; animation-delay: 0.3s; box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a; } #amust-banner:focus { border-radius: 50%; } #amust-banner.center { top: 50%; left: 50%; bottom: auto; right: auto; position: fixed; transform: translate(-50%, calc(-50% - 20px)); animation: amust-slideInDown-center 350ms ease-out forwards; } #amust-banner.bottomLeft { bottom: 16px; left: 16px; position: fixed; } #amust-banner.bottomCenter { bottom: 16px; left: 50%; position: fixed; transform: translate(-50%, -20px); animation: amust-slideInDown-bottomCenter 350ms ease-out forwards; } #amust-banner .preferences { display: flex; gap: 5px; border: none; padding: 15px 0px; background-color: transparent; color: var(--primaryColor); cursor: pointer; font-size: 14px; } #amust-banner .preferences span { display: block; white-space: nowrap; text-decoration: underline; } #amust-banner .preferences span:hover { color: var(--textColor); } #amust-banner .preferences:after { display: block; content: '>'; text-decoration: none; } #amust-banner p { font-size: 14px; line-height: 24px; margin: 0px 0px 15px; } #amust-banner a { display: inline-block; color: var(--primaryColor); text-decoration: underline; background-color: var(--backgroundColor); } #amust-banner a:hover { color: var(--textColor); } #amust-banner a.amust-logo { display: flex; align-items: center; justify-content: center; fill: var(--primaryColor); /* passed down to svg > path */ margin-left: auto; width: 48px; height: 48px; } #amust-banner .actions { display: flex; gap: 16px; flex-direction: column; margin-top: 24px; } @media (min-width: 600px) { #amust-banner .actions { flex-direction: row; align-items: center; } } #amust-banner .actions-row { display: flex; gap: 16px; flex-direction: row; align-items: center; justify-content: space-between; flex-grow: 1; } /* -------------------------------- Modal -------------------------------- */ #amust-modal { display: none; pointer-events: auto; overflow: auto; width: 800px; max-width: 100%; max-height: 100%; border: 0px; transform: translate(0px, -20px); opacity: 0; animation: amust-slideInUp-center 350ms ease-out forwards; box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a; font-family: var(--fontFamily); color: var(--textColor); flex-direction: column; padding: 30px; background-color: var(--backgroundColor); border-radius: 5px; box-sizing: border-box; } /* -------------------------------- Modal - Header -------------------------------- */ #amust-modal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; } #amust-modal h1 { font-family: var(--fontFamily); color: var(--textColor); font-size: 18px; font-weight: 500; margin: 0px; } #amust-modal .modal-close { display: inline-flex; border: none; padding: 13px; border: 0px; cursor: pointer; background: var(--backgroundColor); color: var(--primaryColor); } #amust-modal .modal-close svg { fill: var(--primaryColor); } /* -------------------------------- Modal - Content -------------------------------- */ #amust-modal section { flex: 1; margin-top: 32px; } #amust-modal section::-webkit-scrollbar { display: block; /* Force scrollbars to show */ width: 5px; /* Width of the scrollbar */ } #amust-modal section::-webkit-scrollbar-thumb { background-color: var(--textColor); /* Color of the scrollbar thumb */ border-radius: 10px; /* Rounded corners for the thumb */ } #amust-modal p { font-size: 14px; line-height: 24px; color: var(--textColor); margin: 0px 0px 15px; } #amust-modal p:last-of-type { margin: 0px; } #amust-modal fieldset { padding: 0px; border: none; margin: 0px 0px 32px; } #amust-modal fieldset:last-of-type { margin: 0px; } #amust-modal legend { padding: 0px; margin: 0px 0px 10px; font-weight: 700; color: var(--textColor); font-size: 14px; } #amust-modal .cookie-type-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;  } /* -------------------------------- Modal - Switches -------------------------------- */ #amust-modal .switch { flex-shrink: 0; position: relative; display: inline-block; height: 34px; width: 74px; cursor: pointer; } #amust-modal .switch:focus-within { outline: none; box-shadow: var(--focus); border-radius: 25px; } #amust-modal .switch input { opacity: 0; position: absolute; } /* Unchecked Switch Styles */ #amust-modal .switch__pill { position: relative; display: block; height: 34px; width: 74px; background: var(--textColor); border-radius: 25px; } #amust-modal .switch__dot { position: absolute; top: 2px; left: 2px; display: block; height: 30px; width: 30px; background: var(--backgroundColor); border-radius: 50%; transition: left 150ms ease-out; } #amust-modal .switch__off, #amust-modal .switch__on { text-transform: uppercase; font-size: 15px; font-weight: 500; color: var(--backgroundColor); position: absolute; top: 7px; right: 8px; transition: right 150ms ease-out, opacity 150ms ease-out; } #amust-modal .switch__off { opacity: 1; } #amust-modal .switch__on { opacity: 0; } /* Checked Switch Styles */ #amust-modal .switch input:checked + .switch__pill { background: var(--primaryColor); } #amust-modal .switch input:checked ~ .switch__dot { left: calc(100% - 32px); } #amust-modal .switch input:checked ~ .switch__off { right: calc(100% - 32px); opacity: 0; } #amust-modal .switch input:checked ~ .switch__on { right: calc(100% - 34px); opacity: 1; } /* Disabled Switch Styles */ #amust-modal .switch input:disabled + .switch__pill { opacity: 0.65; cursor: not-allowed; } /* -------------------------------- Modal - Footer -------------------------------- */ #amust-modal footer { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } @media (min-width: 600px) { #amust-modal footer { flex-direction: row; align-items: center; } } #amust-modal footer a { margin-left: auto; padding: 14px 0px; } /* Cookie Icon */ #amust-cookie-icon { display: none; position: fixed; bottom: 10px; left: 10px; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; padding: 0px; border: none; background-color: var(--cookieIconColor); cursor: pointer; box-shadow: 0px 0px 6px 0px #0000001a; pointer-events: auto; animation: amust-fadeIn 0.3s ease-in-out forwards; } #amust-cookie-icon.bottomRight { left: auto; right: 10px; } #amust-cookie-icon svg { fill: var(--cookieIconBackgroundColor); } /* -------------------------------- Backdrop -------------------------------- */ #amust-backdrop { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--backdropBackgroundColor); backdrop-filter: blur(var(--backdropBackgroundBlur)); pointer-events: all; } /* -------------------------------- Animations -------------------------------- */ @keyframes amust-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes amust-slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes amust-slideInDown-center { from { opacity: 0; transform: translate(-50%, calc(-50% - 20px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes amust-slideInDown-bottomCenter { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes amust-slideInUp-center { from { opacity: 0; transform: translate(0px, 20px); } to { opacity: 1; transform: translate(0px, 0px); } }