/* ============================================================================= designerbox-v4-auth.css - the v4 skin for sign-in, reset password, sign-up and checkout (2026-09-11) WHY THIS FILE EXISTS Production does not serve app/public/css/frontend/signuppro.css. The Dockerfile copies a FROZEN April 2026 build (infra/build-fixups/ d41d8cd9.signuppro.css) over the grunt output, because useminPrepare writes that bundle empty. So nothing edited in the source signuppro.css reaches production, including its Soft Studio block: the live sign-up and checkout rendered checkout-hp.css's dark palette with a pink CTA. This file is raw (never bundled), loads LAST, and carries every v4 value for these pages. HOW IT WINS Every selector starts `html:root body.db-...`, which outranks the three sheets it sits on top of, in any load order: - the frozen bundle: ids and !important, up to (1,2,1) - checkout-hp.css: `.db-checkout ...`, up to (0,5,2) with !important - signin.css (login and reset): `.db-login ...`, up to (1,1,1) !important Verify against BOTH signuppro files: the dev server serves the source, and production serves the frozen copy. Route /css/frontend/signuppro.css to infra/build-fixups/d41d8cd9.signuppro.css in Playwright to see production. WHERE IT LOADS (raw , bump ?v= on every edit: app.js serves CSS immutable for a year) common/frontend_signup_common_style.pug, after checkout-hp.css: the six checkout templates (body.db-checkout) frontend_login.pug (body.db-login) frontend_reset_password.pug (body.db-reset) Values: docs/v4/DESIGN-SYSTEM-V4.md and docs/v4/SITE-MIGRATION.md. The 44px controls are the app's own sign-in controls (designerbox-v4 src/components/ui/button.tsx: primaryLg, secondaryLg, field.inputLg). Colour, type, radius and spacing only. No id, name, data- attribute or script hook is touched. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. TOKENS checkout-hp.css and signin.css read their colour from --ck-* and --db-*. Re-pointing the names here flips every rule that uses them. -------------------------------------------------------------------------- */ html:root body.db-checkout { --ck-page: #FFFFFF; --ck-panel: #FFFFFF; --ck-surface: #FFFFFF; --ck-surface-2: #F6F5F4; --ck-line: #E6E4E1; --ck-line-strong: #D7D4CF; --ck-ink: #121212; --ck-ink-2: #3D3D3C; --ck-ink-3: #6F6D6A; --ck-accent: #121212; --ck-accent-ink: #121212; --ck-danger: #C9372C; --ck-r: 10px; --ck-r-lg: 24px; --ck-pink: #ECEBE9; background: #FFFFFF !important; color: #121212; /* the frozen bundle sets body to Roboto !important */ font-family: var(--v4-font-sans, 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif) !important; letter-spacing: normal; } html:root body.db-login, html:root body.db-reset { --db-accent: #121212; --db-accent-hover: #121212; --db-bg: #FFFFFF; --db-panel: #FFFFFF; --db-surface: #FFFFFF; --db-surface-hover: #F6F5F4; --db-border: #E6E4E1; --db-border-strong: #D7D4CF; --db-text: #121212; --db-text-muted: #3D3D3C; --db-text-faint: #6F6D6A; --db-pink: #ECEBE9; --db-pink-3: #F6F5F4; --db-radius: 10px; --db-radius-pill: 10px; background: #FFFFFF !important; color: #121212; } /* checkout-hp paints from a token declared on , so on it fell through to its #08080a fallback: a black gutter under short pages. */ html:root:has(body.db-checkout), html:root:has(body.db-login), html:root:has(body.db-reset) { background: #FFFFFF !important; } /* The two framed auth screens sit on a WHITE page (Vytas, 2026-09-11: "Don't like this gray background at all. Remove it."). The app's #F2F1F0 canvas and #FBFBFA panel are not used on the site. */ html:root:has(body.db-login), html:root:has(body.db-checkout .flex-screen) { background: #FFFFFF !important; } html:root body.db-checkout ::selection, html:root body.db-login ::selection, html:root body.db-reset ::selection { background: #E6FFC8; color: #121212; } /* the live wordmark; theme-global still defaults it to white */ html:root body.db-checkout .db-logo__word, html:root body.db-login .db-logo__word, html:root body.db-reset .db-logo__word { color: #121212 !important; } /* ----------------------------------------------------------------------------- 2. CONTROLS, shared by all three surfaces -------------------------------------------------------------------------- */ /* --- primary: ink at rest, lime with ink text on hover. 44px, 10px. ------- */ html:root body.db-checkout button#signup, html:root body.db-checkout button#updateCardButton, html:root body.db-checkout .signupButton button, html:root body.db-checkout.single-signup .container-flex-screen button#signup, html:root body.db-login button#signin, html:root body.db-login .signinButton button, html:root body.db-login button#submit, html:root body.db-reset button#submit, html:root body.db-reset button#submit.standardButton { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 100% !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 0 20px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center; text-transform: none !important; white-space: normal; color: #FFFFFF !important; -webkit-text-fill-color: currentColor !important; background: #121212 !important; background-image: none !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; transform: none !important; cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html:root body.db-checkout button#signup *, html:root body.db-checkout button#updateCardButton *, html:root body.db-login button#signin *, html:root body.db-login button#submit *, html:root body.db-reset button#submit * { color: inherit !important; -webkit-text-fill-color: currentColor !important; } html:root body.db-checkout button#signup:hover, html:root body.db-checkout button#updateCardButton:hover, html:root body.db-checkout .signupButton button:hover, html:root body.db-checkout.single-signup .container-flex-screen button#signup:hover, html:root body.db-login button#signin:hover, html:root body.db-login button#signin.button:hover, html:root body.db-login .signinButton button:hover, html:root body.db-login button#submit:hover, html:root body.db-reset button#submit:hover, html:root body.db-reset button#submit.standardButton:hover { background: #96FF1A !important; color: #121212 !important; box-shadow: none !important; transform: none !important; } html:root body.db-checkout button#signup:active, html:root body.db-checkout button#updateCardButton:active, html:root body.db-login button#signin:active, html:root body.db-login button#submit:active, html:root body.db-reset button#submit:active { transform: scale(0.98) !important; } html:root body.db-checkout button#signup:focus-visible, html:root body.db-checkout button#updateCardButton:focus-visible, html:root body.db-login button#signin:focus-visible, html:root body.db-login button#submit:focus-visible, html:root body.db-reset button#submit:focus-visible { outline: 2px solid #121212 !important; outline-offset: 2px !important; } /* disabled keeps its size and turns grey with an ink-2 label, as in the app */ html:root body.db-checkout button#signup:disabled, html:root body.db-checkout button#updateCardButton:disabled, html:root body.db-login button#signin:disabled, html:root body.db-reset button#submit:disabled, html:root body.db-checkout button#signup:disabled:hover, html:root body.db-checkout button#updateCardButton:disabled:hover, html:root body.db-login button#signin:disabled:hover, html:root body.db-reset button#submit:disabled:hover { background: #ECEBE9 !important; color: #3D3D3C !important; opacity: 1 !important; cursor: not-allowed; } /* the submit spinner sizes to the label */ html:root body.db-checkout .spin-item .spinner-svg, html:root body.db-login .spin-item .spinner-svg { width: 16px; height: 16px; } /* --- secondary: white, hairline, ink. Continue with Google, Cancel. -------- */ html:root body.db-login .signinButtonSocial, html:root body.db-login button.button.signinButtonSocial, html:root body.db-checkout button.button.signinButtonSocial, html:root body.db-checkout.single-signup .container-flex-screen button.button.signinButtonSocial, html:root body.db-checkout button#cancelUpdateCard { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 20px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: #121212 !important; -webkit-text-fill-color: currentColor !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E6E4E1 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html:root body.db-login .signinButtonSocial:hover, html:root body.db-login button.button.signinButtonSocial:hover, html:root body.db-checkout button.button.signinButtonSocial:hover, html:root body.db-checkout.single-signup .container-flex-screen button.button.signinButtonSocial:hover, html:root body.db-checkout button#cancelUpdateCard:hover { background: #F6F5F4 !important; border-color: #D7D4CF !important; color: #121212 !important; transform: none !important; } html:root body.db-login .signinButtonSocial:focus-visible, html:root body.db-checkout button.button.signinButtonSocial:focus-visible, html:root body.db-checkout button#cancelUpdateCard:focus-visible { outline: 2px solid #121212 !important; outline-offset: 2px !important; } html:root body.db-login .authenticateGoogleButton, html:root body.db-login .authenticateGoogleButton a, html:root body.db-checkout .authenticateContainer, html:root body.db-checkout .authenticateContainer > a { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html:root body.db-login .signinButtonSocialFlex, html:root body.db-checkout .signinButtonSocialFlex { display: flex; align-items: center; justify-content: center; gap: 10px; height: auto; } html:root body.db-login .signinButtonSocialText, html:root body.db-checkout .signinButtonSocialText, html:root body.db-checkout.single-signup .signinButtonSocialText { flex-grow: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: #121212 !important; } /* Google's own four-colour mark stays as Google draws it */ html:root body.db-login .iconGoogle, html:root body.db-checkout .iconGoogle, html:root body.db-checkout.single-signup .iconGoogle { flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; height: 18px !important; background-size: 18px 18px !important; background-position: center !important; } /* --- fields: 44px, 10px, hairline; lime border and ring on focus, plus the ink outline for the keyboard (the app's field.inputLg) ------------------- */ html:root body.db-login .login-fields input, html:root body.db-login #get-credentials input[type='text'], html:root body.db-login #get-credentials input[type='email'], html:root body.db-reset .login-fields input, html:root body.db-reset input.password-field, html:root body.db-checkout input[type='text'], html:root body.db-checkout input[type='password'], html:root body.db-checkout input[type='email'], html:root body.db-checkout input[type='tel'], html:root body.db-checkout input[type='number'], html:root body.db-checkout select, html:root body.db-checkout .input-large, html:root body.db-checkout .input-large2, html:root body.db-checkout .input-xlarge, html:root body.db-checkout .input-xxlarge, html:root body.db-checkout.single-signup .container-flex-screen .input-xlarge { display: block; width: 100% !important; min-width: 0; max-width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 14px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: normal !important; letter-spacing: 0 !important; color: #121212 !important; -webkit-text-fill-color: #121212; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E6E4E1 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html:root body.db-login .login-fields input::placeholder, html:root body.db-login #get-credentials input::placeholder, html:root body.db-reset .login-fields input::placeholder, html:root body.db-checkout input::placeholder, html:root body.db-checkout textarea::placeholder { color: #6F6D6A !important; -webkit-text-fill-color: #6F6D6A; opacity: 1; } html:root body.db-login .login-fields input:hover, html:root body.db-login #get-credentials input:hover, html:root body.db-reset .login-fields input:hover, html:root body.db-checkout input[type='text']:hover, html:root body.db-checkout input[type='password']:hover, html:root body.db-checkout input[type='email']:hover, html:root body.db-checkout input[type='tel']:hover, html:root body.db-checkout select:hover, html:root body.db-checkout .input-xlarge:hover, html:root body.db-checkout.single-signup .container-flex-screen .input-xlarge:hover { border-color: #D7D4CF !important; } html:root body.db-login .login-fields input:focus, html:root body.db-login #get-credentials input:focus, html:root body.db-reset .login-fields input:focus, html:root body.db-reset input.password-field:focus, html:root body.db-checkout input[type='text']:focus, html:root body.db-checkout input[type='password']:focus, html:root body.db-checkout input[type='email']:focus, html:root body.db-checkout input[type='tel']:focus, html:root body.db-checkout input[type='number']:focus, html:root body.db-checkout select:focus, html:root body.db-checkout .input-xlarge:focus, html:root body.db-checkout .input-xxlarge:focus, /* the resting rule above names this longer selector, so the focus state must too or the signup fields never show the ring */ html:root body.db-checkout.single-signup .container-flex-screen .input-xlarge:focus { border-color: #96FF1A !important; background: #FFFFFF !important; box-shadow: 0 0 0 2px rgba(150, 255, 26, 0.4) !important; outline: 2px solid #121212 !important; outline-offset: 2px !important; } /* a field a validator marked wrong */ html:root body.db-checkout .redInputBorder, html:root body.db-checkout input.redInputBorder, html:root body.db-login .login-fields input.redInputBorder { border-color: #C9372C !important; } /* iOS Safari zooms the page into any field under 16px */ @media (pointer: coarse) and (max-width: 767.98px) { html:root body.db-login .login-fields input, html:root body.db-login #get-credentials input[type='text'], html:root body.db-reset .login-fields input, html:root body.db-checkout input[type='text'], html:root body.db-checkout input[type='password'], html:root body.db-checkout input[type='email'], html:root body.db-checkout input[type='tel'], html:root body.db-checkout select, html:root body.db-checkout .input-xlarge { font-size: 16px !important; } } /* validator messages. The frozen bundle paints .redColor WHITE. */ html:root body.db-checkout .redColor, html:root body.db-checkout .container-flex-screen .redColor, html:root body.db-checkout .input-container .redColor:not(.hide) { font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5; color: #C9372C !important; text-shadow: none !important; border: 0 !important; } html:root body.db-checkout .input-container .redColor:not(.hide) { display: block; margin-top: 6px; } html:root body.db-checkout #card-errors, html:root body.db-checkout .payment-errors { font-size: 12px !important; font-weight: 400 !important; color: #C9372C !important; } /* field labels (the free sign-up and the login form) */ html:root body.db-login .login-fields label, html:root body.db-login #get-credentials label, html:root body.db-checkout .container-flex-screen label, html:root body.db-checkout form#signupAccountTrial label { display: block; margin: 0 0 6px !important; /* a legacy 9px bottom padding put the free sign-up's fields 15px under their labels, twice the gap on /login */ padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0 !important; color: #3D3D3C !important; text-shadow: none !important; } /* ----------------------------------------------------------------------------- 3. SIGN-IN (/login, body.db-login) Layout stays in signin.css; this sets the v4 sizes, the showcase chip and the white caption card. -------------------------------------------------------------------------- */ /* The app's sign-in frame (designerbox-v4 /login) on a white page: 8px of white around and between two 24px panels. The form sits on a white panel with a hairline; the picture is the media stage beside it. */ html:root body.db-login, html:root body.db-login .login-container { background: #FFFFFF !important; } html:root body.db-login .db-auth { gap: 8px; padding: 8px; } html:root body.db-login .db-auth__col--form { position: relative; padding-top: 96px; padding-bottom: 64px; background: #FFFFFF; border: 1px solid #E6E4E1; border-radius: 24px; } html:root body.db-login .db-auth__form { max-width: 380px; } /* The wordmark sits in the column's top-left corner at 17px, where the app puts it on its own sign-in screen: a way home, not a heading. */ html:root body.db-login .db-auth__logo { position: absolute; top: 32px; left: 40px; margin: 0; border-radius: 4px; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-login .db-auth__logo .db-logo__word, html:root body.db-checkout .freeFormContainer .logolink .db-logo__word, html:root body.db-reset .account-container3 .db-logo__word { font-size: 17px !important; } html:root body.db-login .db-auth__logo:hover { opacity: 0.7; } html:root body.db-login .account-container2 h1, html:root body.db-login .account-container2 .auth-title { margin: 0 0 8px; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #121212; } html:root body.db-login .account-container2 .content > p { margin: 0 0 28px; font-size: 14px; line-height: 24px; color: #6F6D6A; text-wrap: pretty; } html:root body.db-login .new-divider { margin: 20px 0; } html:root body.db-login .new-divider span { padding: 0 12px; background: #FFFFFF; font-size: 12px; font-weight: 500; letter-spacing: 0.025em; color: #6F6D6A; } html:root body.db-login .new-divider:after { border-top-color: #E6E4E1; } html:root body.db-login .login-fields .field { margin: 0 0 16px; } html:root body.db-login .login-fields .field.margin-top12 { margin-top: 0 !important; } html:root body.db-login .db-field-input input { padding-right: 44px !important; } /* The show-password glyph is a mask: background-color is the glyph colour. Phosphor Eye / EyeSlash (regular), 18px, quiet text. The legacy CoreUI glyph drew at half opacity and about 12px wide. loginController.js only toggles .eye-closed, so the open eye is the base state here: the icon no longer disappears once the password is shown. */ html:root body.db-login #togglePassword { position: absolute; top: 50%; right: 14px; left: auto; display: block; width: 18px !important; height: 18px !important; margin: 0 !important; transform: translateY(-50%); background-color: #6F6D6A !important; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22currentColor%22%20%3E%3Cpath%20d%3D%22M247.31%2C124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57%2C61.26%2C162.88%2C48%2C128%2C48S61.43%2C61.26%2C36.34%2C86.35C17.51%2C105.18%2C9%2C124%2C8.69%2C124.76a8%2C8%2C0%2C0%2C0%2C0%2C6.5c.35.79%2C8.82%2C19.57%2C27.65%2C38.4C61.43%2C194.74%2C93.12%2C208%2C128%2C208s66.57-13.26%2C91.66-38.34c18.83-18.83%2C27.3-37.61%2C27.65-38.4A8%2C8%2C0%2C0%2C0%2C247.31%2C124.76ZM128%2C192c-30.78%2C0-57.67-11.19-79.93-33.25A133.47%2C133.47%2C0%2C0%2C1%2C25%2C128%2C133.33%2C133.33%2C0%2C0%2C1%2C48.07%2C97.25C70.33%2C75.19%2C97.22%2C64%2C128%2C64s57.67%2C11.19%2C79.93%2C33.25A133.46%2C133.46%2C0%2C0%2C1%2C231.05%2C128C223.84%2C141.46%2C192.43%2C192%2C128%2C192Zm0-112a48%2C48%2C0%2C1%2C0%2C48%2C48A48.05%2C48.05%2C0%2C0%2C0%2C128%2C80Zm0%2C80a32%2C32%2C0%2C1%2C1%2C32-32A32%2C32%2C0%2C0%2C1%2C128%2C160Z%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22currentColor%22%20%3E%3Cpath%20d%3D%22M247.31%2C124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57%2C61.26%2C162.88%2C48%2C128%2C48S61.43%2C61.26%2C36.34%2C86.35C17.51%2C105.18%2C9%2C124%2C8.69%2C124.76a8%2C8%2C0%2C0%2C0%2C0%2C6.5c.35.79%2C8.82%2C19.57%2C27.65%2C38.4C61.43%2C194.74%2C93.12%2C208%2C128%2C208s66.57-13.26%2C91.66-38.34c18.83-18.83%2C27.3-37.61%2C27.65-38.4A8%2C8%2C0%2C0%2C0%2C247.31%2C124.76ZM128%2C192c-30.78%2C0-57.67-11.19-79.93-33.25A133.47%2C133.47%2C0%2C0%2C1%2C25%2C128%2C133.33%2C133.33%2C0%2C0%2C1%2C48.07%2C97.25C70.33%2C75.19%2C97.22%2C64%2C128%2C64s57.67%2C11.19%2C79.93%2C33.25A133.46%2C133.46%2C0%2C0%2C1%2C231.05%2C128C223.84%2C141.46%2C192.43%2C192%2C128%2C192Zm0-112a48%2C48%2C0%2C1%2C0%2C48%2C48A48.05%2C48.05%2C0%2C0%2C0%2C128%2C80Zm0%2C80a32%2C32%2C0%2C1%2C1%2C32-32A32%2C32%2C0%2C0%2C1%2C128%2C160Z%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat; cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-login #togglePassword.eye-closed { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22currentColor%22%20%3E%3Cpath%20d%3D%22M53.92%2C34.62A8%2C8%2C0%2C1%2C0%2C42.08%2C45.38L61.32%2C66.55C25%2C88.84%2C9.38%2C123.2%2C8.69%2C124.76a8%2C8%2C0%2C0%2C0%2C0%2C6.5c.35.79%2C8.82%2C19.57%2C27.65%2C38.4C61.43%2C194.74%2C93.12%2C208%2C128%2C208a127.11%2C127.11%2C0%2C0%2C0%2C52.07-10.83l22%2C24.21a8%2C8%2C0%2C1%2C0%2C11.84-10.76Zm47.33%2C75.84%2C41.67%2C45.85a32%2C32%2C0%2C0%2C1-41.67-45.85ZM128%2C192c-30.78%2C0-57.67-11.19-79.93-33.25A133.16%2C133.16%2C0%2C0%2C1%2C25%2C128c4.69-8.79%2C19.66-33.39%2C47.35-49.38l18%2C19.75a48%2C48%2C0%2C0%2C0%2C63.66%2C70l14.73%2C16.2A112%2C112%2C0%2C0%2C1%2C128%2C192Zm6-95.43a8%2C8%2C0%2C0%2C1%2C3-15.72%2C48.16%2C48.16%2C0%2C0%2C1%2C38.77%2C42.64%2C8%2C8%2C0%2C0%2C1-7.22%2C8.71%2C6.39%2C6.39%2C0%2C0%2C1-.75%2C0%2C8%2C8%2C0%2C0%2C1-8-7.26A32.09%2C32.09%2C0%2C0%2C0%2C134%2C96.57Zm113.28%2C34.69c-.42.94-10.55%2C23.37-33.36%2C43.8a8%2C8%2C0%2C1%2C1-10.67-11.92A132.77%2C132.77%2C0%2C0%2C0%2C231.05%2C128a133.15%2C133.15%2C0%2C0%2C0-23.12-30.77C185.67%2C75.19%2C158.78%2C64%2C128%2C64a118.37%2C118.37%2C0%2C0%2C0-19.36%2C1.57A8%2C8%2C0%2C1%2C1%2C106%2C49.79%2C134%2C134%2C0%2C0%2C1%2C128%2C48c34.88%2C0%2C66.57%2C13.26%2C91.66%2C38.35%2C18.83%2C18.83%2C27.3%2C37.62%2C27.65%2C38.41A8%2C8%2C0%2C0%2C1%2C247.31%2C131.26Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22currentColor%22%20%3E%3Cpath%20d%3D%22M53.92%2C34.62A8%2C8%2C0%2C1%2C0%2C42.08%2C45.38L61.32%2C66.55C25%2C88.84%2C9.38%2C123.2%2C8.69%2C124.76a8%2C8%2C0%2C0%2C0%2C0%2C6.5c.35.79%2C8.82%2C19.57%2C27.65%2C38.4C61.43%2C194.74%2C93.12%2C208%2C128%2C208a127.11%2C127.11%2C0%2C0%2C0%2C52.07-10.83l22%2C24.21a8%2C8%2C0%2C1%2C0%2C11.84-10.76Zm47.33%2C75.84%2C41.67%2C45.85a32%2C32%2C0%2C0%2C1-41.67-45.85ZM128%2C192c-30.78%2C0-57.67-11.19-79.93-33.25A133.16%2C133.16%2C0%2C0%2C1%2C25%2C128c4.69-8.79%2C19.66-33.39%2C47.35-49.38l18%2C19.75a48%2C48%2C0%2C0%2C0%2C63.66%2C70l14.73%2C16.2A112%2C112%2C0%2C0%2C1%2C128%2C192Zm6-95.43a8%2C8%2C0%2C0%2C1%2C3-15.72%2C48.16%2C48.16%2C0%2C0%2C1%2C38.77%2C42.64%2C8%2C8%2C0%2C0%2C1-7.22%2C8.71%2C6.39%2C6.39%2C0%2C0%2C1-.75%2C0%2C8%2C8%2C0%2C0%2C1-8-7.26A32.09%2C32.09%2C0%2C0%2C0%2C134%2C96.57Zm113.28%2C34.69c-.42.94-10.55%2C23.37-33.36%2C43.8a8%2C8%2C0%2C1%2C1-10.67-11.92A132.77%2C132.77%2C0%2C0%2C0%2C231.05%2C128a133.15%2C133.15%2C0%2C0%2C0-23.12-30.77C185.67%2C75.19%2C158.78%2C64%2C128%2C64a118.37%2C118.37%2C0%2C0%2C0-19.36%2C1.57A8%2C8%2C0%2C1%2C1%2C106%2C49.79%2C134%2C134%2C0%2C0%2C1%2C128%2C48c34.88%2C0%2C66.57%2C13.26%2C91.66%2C38.35%2C18.83%2C18.83%2C27.3%2C37.62%2C27.65%2C38.41A8%2C8%2C0%2C0%2C1%2C247.31%2C131.26Z%22%2F%3E%3C%2Fsvg%3E"); } html:root body.db-login #togglePassword:hover { background-color: #121212 !important; } html:root body.db-login .login-forgot { display: block; margin: -6px 0 16px; text-align: right; } html:root body.db-login .login-forgot a.small, html:root body.db-login .db-auth__signup .needAccountLink { font-size: 13px; font-weight: 500; color: #121212; text-decoration: none; border-radius: 4px; } html:root body.db-login .login-forgot a.small:hover, html:root body.db-login .db-auth__signup a:hover .needAccountLink { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } html:root body.db-login .signinButton { margin-top: 0; } html:root body.db-login .db-auth__signup { margin-top: 24px; font-size: 13px; color: #6F6D6A; } html:root body.db-login .db-auth__signup .needAccountText { color: #6F6D6A; } html:root body.db-login #footer-sign-in { max-width: 380px; margin-top: 48px; gap: 16px; font-size: 12px; color: #6F6D6A; } html:root body.db-login #footer-sign-in a { color: #6F6D6A; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-login #footer-sign-in a:hover { color: #121212 !important; } /* The picture: a media stage inset 8px from the page edge, 24px corners, the way the app frames its sign-in panel. */ html:root body.db-login .db-auth__col--showcase { margin: 0; border-radius: 24px; background: #121212; overflow: hidden; } html:root body.db-login .db-showcase__scrim { background: none; } html:root body.db-login .db-showcase__content { padding: 24px; } /* the kicker is a label chip on a photo: white, no border, ink text */ html:root body.db-login .db-showcase__eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; background: #FFFFFF; border: 0; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; color: #121212; box-shadow: none; } html:root body.db-login .db-showcase__spark { width: 12px; height: 12px; color: #121212; } html:root body.db-login .db-showcase__foot { align-self: flex-start; max-width: 440px; padding: 24px; background: #FFFFFF; border: 1px solid #E6E4E1; border-radius: 20px; box-shadow: none; } html:root body.db-login .db-showcase__line { max-width: 36ch; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: #121212; } @media (max-width: 900px) { html:root body.db-login .db-auth__col--form { min-height: calc(100vh - 16px); padding: 96px 20px 48px; } html:root body.db-login .db-auth__logo { top: 24px; left: 20px; } /* one row on a phone: at 16px the third link wrapped 62px below */ html:root body.db-login #footer-sign-in { flex-wrap: wrap; justify-content: center; gap: 0 12px; } } /* ----------------------------------------------------------------------------- 4. RESET PASSWORD (/reset-password, body.db-reset) -------------------------------------------------------------------------- */ html:root body.db-reset .account-container3 { position: absolute; top: 32px; left: 40px; width: auto; max-width: none; margin: 0; text-align: left; } html:root body.db-reset .account-container3 .clearfix { display: none; } html:root body.db-reset .account-container3 .logolink { display: inline-block; border-radius: 4px; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-reset .account-container3 .logolink:hover { opacity: 0.7; } html:root body.db-reset .account-container2 { max-width: 420px; margin: 136px auto 0; background: #FFFFFF; border: 1px solid #E6E4E1; border-radius: 24px; box-shadow: none; } html:root body.db-reset .account-container2 .content { padding: 28px 24px 24px; } /* the screen title at the app's 28px sign-in size, same as /login */ html:root body.db-reset .account-container2 h3 { margin: 0 0 20px; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #121212; } html:root body.db-reset button#submit.standardButton { margin-top: 16px !important; } html:root body.db-reset .alert.alert-error { padding: 10px 14px; font-size: 13px; color: #C9372C; background: #FDECEA; border: 1px solid #F3B6B0; border-radius: 10px; } html:root body.db-reset .login-extra { max-width: 420px; margin-top: 24px; font-size: 13px; line-height: 1.8; color: #6F6D6A; } html:root body.db-reset .login-extra a { font-weight: 500; color: #121212; text-decoration: none; } html:root body.db-reset .login-extra a:hover { color: #121212; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } html:root body.db-reset #footer-sign-in { max-width: 420px; margin-top: 40px; gap: 8px 16px; font-size: 12px; color: #6F6D6A; } html:root body.db-reset #footer-sign-in a { color: #6F6D6A; } html:root body.db-reset #footer-sign-in a:hover { color: #121212 !important; } @media (max-width: 480px) { html:root body.db-reset .account-container3 { top: 24px; left: 20px; } html:root body.db-reset .account-container2 { margin-top: 96px; } } /* ----------------------------------------------------------------------------- 5. FREE SIGN-UP (/signup?plan=free): the same form as /login, beside the same inset media stage -------------------------------------------------------------------------- */ /* The same frame as /login: a white page, 8px, a white form panel with a hairline, the media stage beside it. */ html:root body.db-checkout.single-signup:has(.flex-screen), html:root body.db-checkout .page-container { background: #FFFFFF !important; } html:root body.db-checkout .flex-screen { gap: 8px; padding: 8px; box-sizing: border-box; } html:root body.db-checkout .flex-screen-left, html:root body.db-checkout #signupProContainer.pricing_page.signupfree { background: #FFFFFF !important; } html:root body.db-checkout .flex-screen-left { position: relative; padding-top: 96px; padding-bottom: 64px; border: 1px solid #E6E4E1; border-radius: 24px; } html:root body.db-checkout .freeFormContainer { max-width: 380px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html:root body.db-checkout .freeFormContainer .logolink { position: absolute; top: 32px; left: 40px; margin: 0; border-radius: 4px; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-checkout .freeFormContainer .logolink:hover { opacity: 0.7; } html:root body.db-checkout .freeFormContainer h1, html:root body.db-checkout .freeFormContainer h1.centre, html:root body.db-checkout .freeFormContainer .auth-title { margin: 0 0 8px; text-align: left; font-size: 28px !important; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #121212; } html:root body.db-checkout .freeFormContainer .auth-sub { margin: 0 0 28px; font-size: 14px; line-height: 24px; color: #6F6D6A; text-wrap: pretty; } html:root body.db-checkout .signup-or-divider { margin: 20px 0 !important; font-size: 12px !important; /* the copy is upper case ("OR"): it takes the one label style, 12px/500 */ font-weight: 500; letter-spacing: 0.025em; color: #6F6D6A !important; } html:root body.db-checkout .signup-or-divider::before, html:root body.db-checkout .signup-or-divider::after { background: #E6E4E1 !important; } html:root body.db-checkout form#signupAccountTrial { gap: 0 !important; } html:root body.db-checkout form#signupAccountTrial .input-container { margin-bottom: 16px; } html:root body.db-checkout form#signupAccountTrial > .newbutton { margin-top: 8px !important; } /* "Already have an account? Sign in now" */ html:root body.db-checkout form#signupAccountTrial .login-container { margin-top: 24px !important; font-size: 13px; /* the legacy row is a white box; on the panel it showed as a white strip */ background: transparent !important; } html:root body.db-checkout form#signupAccountTrial .login-container .disclaimer { float: none; width: 100%; margin: 0 !important; padding: 0 !important; text-align: center; background: transparent !important; } html:root body.db-checkout .login-container .pageElement, html:root body.db-checkout .container-flex-screen .disclaimer { font-family: inherit !important; font-size: 13px !important; color: #6F6D6A !important; } html:root body.db-checkout .newbutton a, html:root body.db-checkout .newbutton a.underline, html:root body.db-checkout .container-flex-screen .newbutton a { font-size: 13px !important; font-weight: 500 !important; color: #121212 !important; text-decoration: none !important; border-bottom: 0 !important; } html:root body.db-checkout .newbutton a:hover, html:root body.db-checkout .newbutton a.underline:hover { color: #121212 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* the legal line under the form */ html:root body.db-checkout .freeFormContainer .disclaimer3, html:root body.db-checkout .container-flex-screen .disclaimer3 { margin: 32px 0 0 !important; font-family: inherit !important; font-size: 12px !important; line-height: 20px; color: #6F6D6A !important; } html:root body.db-checkout .freeFormContainer .disclaimer3 a, html:root body.db-checkout .container-flex-screen .disclaimer3 a { font-size: 12px !important; font-weight: 400; color: #3D3D3C !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } html:root body.db-checkout .freeFormContainer .disclaimer3 a:hover, html:root body.db-checkout .container-flex-screen .disclaimer3 a:hover { color: #121212 !important; } /* the showcase column: photographs and clips on a stage, inset 8px, 24px */ html:root body.db-checkout .flex-screen-right { margin: 0; border-radius: 24px; background: #121212 !important; overflow: hidden; } html:root body.db-checkout .signup-slideshow, html:root body.db-checkout .signup-slide-media { padding: 0; background: #121212 !important; border-radius: 0; } html:root body.db-checkout .signup-slideshow-slides { border-radius: 0; } /* no scrim: the caption sits on its own white card */ html:root body.db-checkout .signup-slide-media::after { background: none !important; } html:root body.db-checkout .signup-slide-overlay { left: 24px; right: 24px; bottom: 110px; gap: 12px; padding: 24px; background: #FFFFFF; border: 1px solid #E6E4E1; border-radius: 20px; box-shadow: none; } html:root body.db-checkout .signup-slide-badge, html:root body.db-checkout .signup-slide-badge--primary { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid #E6E4E1; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; color: #3D3D3C; } /* the tick is Phosphor Check (a filled path): colour only, no stroke, or the stroke thickens it */ html:root body.db-checkout .signup-slide-badge svg { flex: 0 0 auto; width: 12px; height: 12px; color: #3D3D3C; stroke: none; } html:root body.db-checkout .signup-slide-info { gap: 8px; } /* the kicker strings are upper case in every locale: they take the eyebrow role (a p since 2026-09-11; the h3 it was sat outside the heading scale) */ html:root body.db-checkout .signup-slide-info h3, html:root body.db-checkout .signup-slide-info p.signup-slide-kicker { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase; color: #6F6D6A; } html:root body.db-checkout .signup-slide-info p:not(.signup-slide-kicker) { max-width: 30ch; margin: 0; /* the kit's h3 size: a caption card, not a second page title */ font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #121212; } html:root body.db-checkout .signup-slideshow-tabs { left: 24px; right: 24px; bottom: 24px; gap: 12px; padding: 12px 16px; background: #FFFFFF; border: 1px solid #E6E4E1; border-radius: 16px; box-shadow: none; } /* each tab kept a legacy 20px margin-bottom: 13px above the labels, 33px below the bars */ html:root body.db-checkout .signup-slideshow-tab { margin: 0 !important; } html:root body.db-checkout .signup-tab-progress { height: 3px; background: #E6E4E1; border-radius: 9999px; } html:root body.db-checkout .signup-tab-progress-bar { background: #D7D4CF; border-radius: 9999px; } html:root body.db-checkout .signup-slideshow-tab.active .signup-tab-progress-bar { background: #121212; } html:root body.db-checkout .signup-slideshow-tab span { font-size: 12px; font-weight: 500; color: #6F6D6A; } html:root body.db-checkout .signup-slideshow-tab.active span { font-weight: 500; color: #121212; } html:root body.db-checkout .signup-slideshow-tab:focus-visible { outline: 2px solid #121212; outline-offset: 2px; border-radius: 4px; } @media (max-width: 900px) { html:root body.db-checkout .flex-screen-left { min-height: calc(100vh - 16px); padding: 96px 20px 48px; } html:root body.db-checkout .freeFormContainer .logolink { top: 24px; left: 20px; } } /* ----------------------------------------------------------------------------- 6. PAID CHECKOUT, UPGRADE AND UPDATE CARD (form#signupAccount, form#signupPro, form#updateBilling): the order summary left, the form card right -------------------------------------------------------------------------- */ html:root body.db-checkout .pageElement, html:root body.db-checkout #signupProContainer.pricing_page { background: #FFFFFF !important; } /* the back-and-wordmark row starts on the title's top line, so the two columns begin together (a legacy 16px top margin dropped it below) */ html:root body.db-checkout .container-left-overview { margin-top: 0 !important; /* on a phone checkout-hp centred this row over a left-aligned column */ justify-content: flex-start !important; } /* back to pricing: a 36px ghost icon button (the page kit's small size) */ html:root body.db-checkout .container-left-overview .link-default a { width: 36px; height: 36px; margin-left: -6px; border-radius: 10px; color: #6F6D6A; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-checkout .container-left-overview .link-default a:hover { background: #ECEBE9; color: #121212; } /* a legacy rule paints the chevron #A8A8A8; it follows the link instead */ html:root body.db-checkout .link-default svg { width: 24px; height: 24px; color: inherit !important; } html:root body.db-checkout .link-default svg path { stroke: currentColor !important; stroke-width: 1.75; } html:root body.db-checkout .price-heading, html:root body.db-checkout .price-heading.green { font-family: inherit !important; /* the page kit's price: 40px/600, proportional figures */ font-size: 40px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.03em !important; font-variant-numeric: normal !important; color: #121212 !important; } html:root body.db-checkout .price-heading2, html:root body.db-checkout .price-heading .small-grey, html:root body.db-checkout .small-grey { font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #6F6D6A !important; } html:root body.db-checkout .normal-black { font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; color: #121212 !important; } html:root body.db-checkout .order-item.total-amount-container .normal-black, html:root body.db-checkout .total-amount-value { font-size: 15px !important; font-weight: 600 !important; } html:root body.db-checkout .order-item.border-bottom { border-bottom: 1px solid #E6E4E1 !important; } /* the page heading over the form */ html:root body.db-checkout .h1-container h1, html:root body.db-checkout .h1-container h1.marginLeft, html:root body.db-checkout .h1-container .auth-title { margin: 0 !important; padding: 0 !important; font-family: inherit !important; font-size: 28px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; color: #121212 !important; } html:root body.db-checkout .h1-container .h1-sub { margin-top: 8px; max-width: 56ch; font-size: 14px; line-height: 24px; color: #6F6D6A !important; } /* the form card */ html:root body.db-checkout form#signupAccount, html:root body.db-checkout form#signupPro, html:root body.db-checkout form#updateBilling { gap: 16px !important; padding: 32px !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E6E4E1 !important; border-radius: 24px !important; box-shadow: none !important; } /* section labels: the v4 eyebrow (p since 2026-09-11, h3 on older pages) */ html:root body.db-checkout h3.whiteheader, html:root body.db-checkout p.whiteheader { /* each label owns its row in the flex-wrap form (checkout-hp.css keys this on the old h3 tag) */ flex: 0 0 100%; max-width: 100%; float: none; margin: 0 !important; padding: 0 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.025em !important; text-transform: uppercase; color: #6F6D6A !important; } html:root body.db-checkout form > h3.whiteheader:not(:first-child), html:root body.db-checkout form > p.whiteheader:not(:first-child) { margin-top: 8px !important; } html:root body.db-checkout .requiredFields { margin-left: 8px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6F6D6A !important; } /* card brand marks: printed on white by the issuers */ html:root body.db-checkout img.cards { background: #FFFFFF; border: 1px solid #E6E4E1; border-radius: 4px; box-shadow: none; opacity: 1; } /* The Stripe card field. Stripe draws the input in its own iframe; this is the box around it, sized to the 44px fields beside it. The text inside takes the style object in signup.js / upgradeController.js / updateCardController.js. */ html:root body.db-checkout #card-element { min-height: 44px; padding: 10px 14px !important; background: #FFFFFF !important; border: 1px solid #E6E4E1 !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-checkout #card-element:hover { border-color: #D7D4CF !important; } html:root body.db-checkout #card-element.StripeElement--focus { border-color: #96FF1A !important; box-shadow: 0 0 0 2px rgba(150, 255, 26, 0.4) !important; outline: 2px solid #121212; outline-offset: 2px; } html:root body.db-checkout #card-element.StripeElement--invalid { border-color: #C9372C !important; } html:root body.db-checkout .textDetails { font-size: 12px; color: #6F6D6A; } /* consumer / business: v4 radios, ink when chosen */ html:root body.db-checkout .label_radio { font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; color: #121212 !important; } html:root body.db-checkout .label_radio::before { width: 18px; height: 18px; background: #FFFFFF; border: 1px solid #D7D4CF; border-radius: 9999px; box-shadow: none; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-checkout .label_radio:hover::before { border-color: #6F6D6A; } html:root body.db-checkout .label_radio.r_on::before, html:root body.db-checkout .label_radio:has(input:checked)::before { border-color: #121212; box-shadow: inset 0 0 0 4px #FFFFFF, inset 0 0 0 9px #121212; } html:root body.db-checkout .label_radio:has(input:focus-visible)::before { outline: 2px solid #121212; outline-offset: 2px; } /* country picker (chosen.js) */ html:root body.db-checkout .chosen-container { font-family: inherit !important; } html:root body.db-checkout .chosen-container-single .chosen-single { height: 44px !important; padding: 0 14px !important; font-size: 14px !important; line-height: 42px !important; color: #121212 !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E6E4E1 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-checkout .chosen-container-single .chosen-single:hover { border-color: #D7D4CF !important; } /* the caret: Phosphor CaretDown, 16px, quiet text, centred in the field (chosen's sprite drew a 6px triangle pinned to the top) */ html:root body.db-checkout .chosen-container-single .chosen-single div { top: 0 !important; right: 12px !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; width: 16px !important; height: 100% !important; } /* the label sits on the field's middle line, like the text inputs beside it */ html:root body.db-checkout .chosen-container-single .chosen-single span { margin: 0 !important; line-height: 42px !important; } html:root body.db-checkout .chosen-container-single .chosen-single div b { display: block; width: 16px !important; height: 16px !important; background: #6F6D6A !important; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22currentColor%22%20%3E%3Cpath%20d%3D%22M213.66%2C101.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32%2C0l-80-80A8%2C8%2C0%2C0%2C1%2C53.66%2C90.34L128%2C164.69l74.34-74.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22currentColor%22%20%3E%3Cpath%20d%3D%22M213.66%2C101.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32%2C0l-80-80A8%2C8%2C0%2C0%2C1%2C53.66%2C90.34L128%2C164.69l74.34-74.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; } html:root body.db-checkout .chosen-container-single .chosen-default, html:root body.db-checkout .chosen-container-single .chosen-default span { color: #6F6D6A !important; } html:root body.db-checkout .chosen-container-active.chosen-container-single .chosen-single, html:root body.db-checkout .chosen-container-active.chosen-with-drop .chosen-single { border-color: #96FF1A !important; box-shadow: 0 0 0 2px rgba(150, 255, 26, 0.4) !important; background: #FFFFFF !important; } html:root body.db-checkout .chosen-container .chosen-drop { margin-top: 6px; padding: 6px; background: #FFFFFF !important; border: 1px solid #E6E4E1 !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(18, 18, 18, 0.16) !important; } html:root body.db-checkout .chosen-container .chosen-search input[type='text'] { height: 36px !important; min-height: 36px !important; margin: 0 0 6px !important; padding: 0 12px !important; font-size: 13px !important; background-image: none !important; } html:root body.db-checkout .chosen-container .chosen-results { margin: 0; padding: 0; } html:root body.db-checkout .chosen-container .chosen-results li { padding: 8px 10px; font-size: 13px; line-height: 1.4; color: #3D3D3C; border-radius: 10px; } html:root body.db-checkout .chosen-container .chosen-results li.highlighted { background: #ECEBE9 !important; background-image: none !important; color: #121212 !important; } html:root body.db-checkout .chosen-container .chosen-results li.result-selected { font-weight: 500; color: #121212; } /* secure checkout line and the sign-in row under the CTA */ html:root body.db-checkout .newbutton { gap: 12px; margin: 8px 0 0 !important; } html:root body.db-checkout .secure-checkout { gap: 6px; } html:root body.db-checkout .lock-payment { background-color: #6F6D6A !important; } html:root body.db-checkout .textDetails2 { font-size: 12px; font-weight: 500; color: #6F6D6A; } html:root body.db-checkout .secure-checkout-2 { margin-right: 0 !important; /* !important: a legacy rule zeroed it and the line sat on the hairline */ padding-top: 16px !important; border-top: 1px solid #E6E4E1; font-size: 13px; color: #6F6D6A; } html:root body.db-checkout .secure-checkout-2 .pageElement { font-size: 13px !important; color: #6F6D6A !important; } html:root body.db-checkout .secure-checkout-2 a { font-size: 13px !important; font-weight: 500 !important; color: #121212 !important; text-decoration: none !important; } html:root body.db-checkout .secure-checkout-2 a:hover { text-decoration: underline !important; text-underline-offset: 3px; } /* the legal line under the card */ html:root body.db-checkout .disclaimer3 { font-family: inherit !important; font-size: 12px !important; line-height: 20px; color: #6F6D6A !important; } html:root body.db-checkout .disclaimer3 strong { font-weight: 500; color: #3D3D3C; } html:root body.db-checkout .disclaimer3 a { font-size: 12px !important; font-weight: 400 !important; color: #3D3D3C !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } html:root body.db-checkout .disclaimer3 a:hover { color: #121212 !important; } /* upgrade: the saved card */ html:root body.db-checkout .card-existing { padding: 16px; background: #F6F5F4; border: 1px solid #E6E4E1; border-radius: 20px; } html:root body.db-checkout .card-existing h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #121212; } html:root body.db-checkout .payment-description { font-size: 14px; color: #3D3D3C; } html:root body.db-checkout #editCardButton, html:root body.db-checkout button#cancelUpgrade { display: inline-flex; align-items: center; justify-content: center; height: auto !important; min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; color: #121212 !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E6E4E1 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-checkout #editCardButton:hover, html:root body.db-checkout button#cancelUpgrade:hover { background: #F6F5F4 !important; border-color: #D7D4CF !important; } /* /account/update-card summary rail */ html:root body.db-checkout .row > .span3 .priceContainer h2 { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #121212; } html:root body.db-checkout .row > .span3 h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.025em; color: #6F6D6A; } html:root body.db-checkout .row > .span3 > span { font-size: 14px; line-height: 24px; color: #3D3D3C; } @media (max-width: 620px) { html:root body.db-checkout form#signupAccount, html:root body.db-checkout form#signupPro, html:root body.db-checkout form#updateBilling { padding: 20px !important; } html:root body.db-checkout .h1-container h1, html:root body.db-checkout .h1-container .auth-title { font-size: 24px !important; } } /* ----------------------------------------------------------------------------- 7. DIALOGS on these pages (bootstrap 2 .modal: forgot password, login failed, form errors, alert). The v4 dialog: 24px, hairline, one shadow. -------------------------------------------------------------------------- */ html:root body.db-login .modal, html:root body.db-reset .modal, html:root body.db-checkout .modal { overflow: hidden; color: #121212; background: #FFFFFF !important; border: 1px solid #E6E4E1 !important; border-radius: 24px !important; box-shadow: 0 4px 24px rgba(18, 18, 18, 0.16) !important; } html:root body.db-login .modal-backdrop, html:root body.db-reset .modal-backdrop, html:root body.db-checkout .modal-backdrop { background-color: #121212; } html:root body.db-login .modal-backdrop.in, html:root body.db-reset .modal-backdrop.in, html:root body.db-checkout .modal-backdrop.in { opacity: 0.78; } html:root body.db-login .modal-header, html:root body.db-reset .modal-header, html:root body.db-checkout .modal-header { position: relative; padding: 20px 56px 4px 24px; background: transparent; border-bottom: 0; } html:root body.db-login .modal-header h2, html:root body.db-login .modal-header h3, html:root body.db-reset .modal-header h3, html:root body.db-checkout .modal-header h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.375; letter-spacing: -0.02em; color: #121212; } /* the close control: a 36px ghost icon button */ html:root body.db-login .modal-header .close, html:root body.db-reset .modal-header .close, html:root body.db-checkout .modal-header .close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; font-size: 16px; font-weight: 400; line-height: 1; color: #121212; text-shadow: none; opacity: 1; background: transparent; border: 0; border-radius: 10px; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } html:root body.db-login .modal-header .close svg, html:root body.db-reset .modal-header .close svg, html:root body.db-checkout .modal-header .close svg { display: block; width: 18px; height: 18px; } html:root body.db-login .modal-header .close:hover, html:root body.db-reset .modal-header .close:hover, html:root body.db-checkout .modal-header .close:hover { color: #121212; background: #ECEBE9; } html:root body.db-login .modal-body, html:root body.db-reset .modal-body, html:root body.db-checkout .modal-body { padding: 8px 24px 20px; } html:root body.db-login .modal-body p, html:root body.db-reset .modal-body p, html:root body.db-checkout .modal-body p, html:root body.db-checkout .modal-body li { margin: 0; font-size: 14px; line-height: 24px; color: #6F6D6A; } html:root body.db-checkout .modal-body ul { margin: 8px 0 0 18px; } html:root body.db-checkout .modal-body li { color: #3D3D3C; } html:root body.db-login .modal-footer, html:root body.db-reset .modal-footer, html:root body.db-checkout .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 16px; background: #FFFFFF; border-top: 1px solid #E6E4E1; border-radius: 0; box-shadow: none; } html:root body.db-login .modal-footer .btn, html:root body.db-reset .modal-footer .btn, html:root body.db-checkout .modal-footer .btn, html:root body.db-checkout .modal-footer .button { float: none; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 88px; height: auto !important; min-height: 36px !important; margin: 0 !important; padding: 0 14px !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; color: #121212 !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E6E4E1 !important; border-radius: 10px !important; box-shadow: none !important; text-shadow: none !important; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html:root body.db-login .modal-footer .btn:hover, html:root body.db-reset .modal-footer .btn:hover, html:root body.db-checkout .modal-footer .btn:hover, html:root body.db-checkout .modal-footer .button:hover { background: #F6F5F4 !important; border-color: #D7D4CF !important; } /* the one primary a dialog can carry */ html:root body.db-login .modal-footer .btn-primary, html:root body.db-reset .modal-footer .btn-primary, html:root body.db-checkout .modal-footer .btn-primary, html:root body.db-checkout .modal-footer .button-primary { color: #FFFFFF !important; background: #121212 !important; border-color: #121212 !important; } html:root body.db-login .modal-footer .btn-primary:hover, html:root body.db-reset .modal-footer .btn-primary:hover, html:root body.db-checkout .modal-footer .btn-primary:hover, html:root body.db-checkout .modal-footer .button-primary:hover { color: #121212 !important; background: #96FF1A !important; border-color: #96FF1A !important; } /* forgot password: the form fills the dialog, Cancel sits in the footer */ html:root body.db-login #get-credentials-form { float: none; width: auto; margin: 0; } html:root body.db-login #get-credentials .resetContainer > br { display: none; } html:root body.db-login #get-credentials p.reset { margin: 0 0 20px; } html:root body.db-login #get-credentials label { margin-top: 0 !important; } html:root body.db-login #get-credentials button#submit { margin-top: 16px !important; } html:root body.db-login #get-credentials .modal-footer .btn { width: auto !important; } html:root body.db-login #get-credentials .alert-error, html:root body.db-login .alert.alert-error { margin: 12px 0 0; padding: 10px 14px; font-size: 13px; color: #C9372C; text-shadow: none; background: #FDECEA; border: 1px solid #F3B6B0; border-radius: 10px; } /* ----------------------------------------------------------------------------- 8. MOTION: every transition above sits under reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html:root body.db-checkout *, html:root body.db-login *, html:root body.db-reset * { transition-duration: 0.01ms !important; } html:root body.db-checkout button#signup:active, html:root body.db-login button#signin:active, html:root body.db-reset button#submit:active { transform: none !important; } }