/** * TeamBuilder Opportunity Calculator - Webflow Styles * * FONT SETUP: You need to either: * 1. Host the Gilmer font files and update the @font-face URLs below, OR * 2. Use a similar font from Google Fonts (e.g., Poppins, Inter) * * To use Google Fonts instead, replace the @font-face rules with: * @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); * Then change "Gilmer" to "Poppins" throughout this file. */ /* ============================================================================ */ /* FONT FACES - Update these URLs to point to your hosted font files */ /* ============================================================================ */ /* ============================================================================ */ /* CSS RESET */ /* ============================================================================ */ .calculator-wrapper *:where(:not(html,canvas,iframe,img,svg,video):not(svg *)) { all: unset; display: revert; } .calculator-wrapper *::before, .calculator-wrapper *::after { all: unset; } .calculator-wrapper *, .calculator-wrapper *::before, .calculator-wrapper *::after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); } .calculator-wrapper { line-height: 1; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } .calculator-wrapper a, .calculator-wrapper button { cursor: pointer; } .calculator-wrapper ol, .calculator-wrapper ul { list-style: none; } .calculator-wrapper img { max-width: 100%; } .calculator-wrapper table { border-collapse: collapse; } .calculator-wrapper input, .calculator-wrapper textarea { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } .calculator-wrapper textarea { vertical-align: top; white-space: revert; } .calculator-wrapper *:where(input,textarea)::-moz-placeholder { color: unset; opacity: 1; } .calculator-wrapper *:where(input,textarea)::placeholder { color: unset; opacity: 1; } .calculator-wrapper *:where(input,textarea)::placeholder { color: unset; opacity: 1; } /* ============================================================================ */ /* FONT APPLICATION (Route 1: Use Webflow-hosted Gilmer) */ /* ============================================================================ */ .calculator-wrapper { font-family: "Gilmer", sans-serif; font-weight: 400; } /* Because the reset uses `all: unset`, we must re-apply inheritance */ .calculator-wrapper * { font-family: inherit; } /* Extra safety for form controls across browsers */ .calculator-wrapper :where(input, button, textarea, select) { font-family: inherit; } /* ============================================================================ */ /* CSS VARIABLES */ /* ============================================================================ */ .calculator-wrapper { --viewport-width: 100vw; --viewport-height: 100vh; --layout-width: 1320px; --layout-gutter: 48px; --layout-margin: calc(((var(--viewport-width) - var(--layout-width)) * 0.5)); --column-count: 12; --column-width: calc((((var(--layout-width) + var(--layout-gutter)) * (1 / var(--column-count))) - var(--layout-gutter))); --column-span: calc((var(--column-width) + var(--layout-gutter))); --border-radius: 24px; } @media (max-width: 1440px) { .calculator-wrapper { --layout-width: calc(((var(--viewport-width) - 1152px) / 288) * (1320 - 1080) + (1080 * 1px)); } } @media (max-width: 1152px) { .calculator-wrapper { --layout-width: calc((var(--viewport-width) - 72px)); } } @media (max-width: 864px) { .calculator-wrapper { --layout-width: calc(((var(--viewport-width) - 576px) / 288) * (792 - 528) + (528 * 1px)); --layout-gutter: calc(((var(--viewport-width) - 576px) / 288) * (48 - 18) + (18 * 1px)); --column-count: 4; --column-span: calc(((var(--viewport-width) - 576px) / 288) * (210 - 0) + (0 * 1px)); --border-radius: calc(((var(--viewport-width) - 576px) / 288) * (24 - 18) + (18 * 1px)); } } @media (max-width: 576px) { .calculator-wrapper { --layout-width: calc((var(--viewport-width) - 48px)); --layout-gutter: 18px; --column-span: 0; --border-radius: 18px; } } /* ============================================================================ */ /* BASE STYLES */ /* ============================================================================ */ .calculator-wrapper { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .calculator-wrapper *:where(h2,h3,h4,h5,h6) { -webkit-user-select: text; -moz-user-select: text; user-select: text; } .calculator-wrapper *:where(h2,h3,h4,h5,h6,p) span { display: block; } .calculator-wrapper.browser\:load *, .calculator-wrapper.browser\:load *::before, .calculator-wrapper.browser\:load *::after, .calculator-wrapper.browser\:resize *, .calculator-wrapper.browser\:resize *::before, .calculator-wrapper.browser\:resize *::after { transition: unset !important; } /* ============================================================================ */ /* BUTTON */ /* ============================================================================ */ .calculator-wrapper .button { display: flex; align-items: center; justify-content: center; flex-direction: row; font-family: "Gilmer", sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-align: center; border: 2px solid; border-radius: 50vw; } .calculator-wrapper section.calculator article.person button { padding: 1.125em 1.375em; gap: 0.5em; font-size: clamp(16px, calc(((var(--viewport-width) - 432px) / 1008) * (18 - 16) + (16 * 1px)), 18px); } @media (max-width: 864px) { .calculator-wrapper section.calculator article.person button { padding: calc(((var(--viewport-width) - 576px) / 288)*(18 - 10) + (10 * 1px)) calc(((var(--viewport-width) - 576px) / 288)*(24 - 16) + (16 * 1px)); } } @media (max-width: 576px) { .calculator-wrapper section.calculator article.person button { padding: 0.625em 1em; } } .calculator-wrapper section.calculator article.person button::after { display: block; width: 1em; height: 1em; flex-shrink: 0; content: ""; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 38 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22.39.55 14.93 13.99c.42.42.68.92.68 1.5 0 .5-.25 1-.68 1.42l-14.93 13.99c-.76.75-2.12.75-2.88-.08-.76-.75-.76-2.08.08-2.83l11.28-10.49h-28.83c-1.19 0-2.04-.92-2.04-2 0-1.17.85-2 2.04-2h28.84l-11.29-10.58c-.85-.75-.85-2.08-.08-2.83.76-.83 2.04-.83 2.88-.08z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 38 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22.39.55 14.93 13.99c.42.42.68.92.68 1.5 0 .5-.25 1-.68 1.42l-14.93 13.99c-.76.75-2.12.75-2.88-.08-.76-.75-.76-2.08.08-2.83l11.28-10.49h-28.83c-1.19 0-2.04-.92-2.04-2 0-1.17.85-2 2.04-2h28.84l-11.29-10.58c-.85-.75-.85-2.08-.08-2.83.76-.83 2.04-.83 2.88-.08z'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .calculator-wrapper section.calculator article.person button { color: #fcfeff; background-color: #0025ff; border-color: #0025ff; } @media (pointer: fine) { .calculator-wrapper section.calculator article.person button { transition: background-color 200ms, border-color; will-change: background-color, border-color; } .calculator-wrapper section.calculator article.person button:hover { background-color: #001cc1; border-color: #001cc1; } } /* ============================================================================ */ /* FIELD */ /* ============================================================================ */ .calculator-wrapper .field { position: relative; width: 100%; transition: opacity 250ms; will-change: opacity; } .calculator-wrapper .field.disabled { opacity: 0.5; pointer-events: none; } .calculator-wrapper .field *:where(input,textarea):-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100vw #fcfeff; } .calculator-wrapper .field .error { margin-top: 0.25em; color: #001582; font-family: "Gilmer", sans-serif; font-size: clamp(12px, calc(((var(--viewport-width) - 432px) / 1008) * (14 - 12) + (12 * 1px)), 14px); font-weight: 400; letter-spacing: -0.01em; } /* Field Choice */ @media (min-width: 865px) { .calculator-wrapper .field.choice.inline > .content { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; grid-auto-rows: auto; gap: 0 clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); } } @media (max-width: 864px) { .calculator-wrapper .field.choice.inline > .content { display: flex; flex-direction: column; gap: clamp(7px, calc(((var(--viewport-width) - 432px) / 1008) * (8 - 7) + (7 * 1px)), 8px) 0; } } .calculator-wrapper .field.choice.block > .content { display: flex; flex-direction: column; gap: clamp(7px, calc(((var(--viewport-width) - 432px) / 1008) * (8 - 7) + (7 * 1px)), 8px) 0; } .calculator-wrapper .field.choice.wrap > .content { display: flex; flex-direction: row; flex-wrap: wrap; gap: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); } @media (max-width: 864px) { .calculator-wrapper .field.choice.wrap > .content { display: flex; flex-direction: column; gap: clamp(7px, calc(((var(--viewport-width) - 432px) / 1008) * (8 - 7) + (7 * 1px)), 8px) 0; } } .calculator-wrapper .field.choice input { all: unset; position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } .calculator-wrapper .field.choice input + label { display: block; border: 2px solid; border-radius: calc(var(--border-radius) * 0.325); cursor: pointer; } .calculator-wrapper .field.choice.inline input + label { padding: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); } .calculator-wrapper .field.choice:where(.block,.wrap) input + label { padding: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px) clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px); } .calculator-wrapper .field.choice .meta { margin-top: 0.5em; } /* Field Integer */ .calculator-wrapper .field.integer *:where(label,input) { font-family: "Gilmer", sans-serif; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); } .calculator-wrapper .field.integer .meta { margin-top: 0.25em; } .calculator-wrapper .field.integer label { color: #001582; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .calculator-wrapper .field.integer > .content { margin-top: clamp(7px, calc(((var(--viewport-width) - 432px) / 1008) * (8 - 7) + (7 * 1px)), 8px); } .calculator-wrapper .field.integer input { width: 100%; padding: 0.5em 1em; color: #000105; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; border: 2px solid; border-radius: 0.5em; } .calculator-wrapper .field.integer input::-moz-placeholder { opacity: 0.5; } .calculator-wrapper .field.integer input::placeholder { opacity: 0.5; } .calculator-wrapper .field.integer input[type=number] { text-align: center; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .calculator-wrapper .field.integer input[type=number]:where(::-webkit-outer-spin-button,::-webkit-inner-spin-button) { margin: 0; -webkit-appearance: none; appearance: none; } /* Field String */ .calculator-wrapper .field.string *:where(label,input) { font-family: "Gilmer", sans-serif; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); } .calculator-wrapper .field.string label { color: #001582; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .calculator-wrapper .field.string > .content { margin-top: clamp(7px, calc(((var(--viewport-width) - 432px) / 1008) * (8 - 7) + (7 * 1px)), 8px); } .calculator-wrapper .field.string input { width: 100%; padding: 0.5em 1em; color: #000105; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; border: 2px solid; border-radius: 0.5em; } .calculator-wrapper .field.string input::-moz-placeholder { opacity: 0.5; } .calculator-wrapper .field.string input::placeholder { opacity: 0.5; } .calculator-wrapper .field.string .error { position: absolute; top: 0; right: 0; } /* Field Toggle */ .calculator-wrapper .field.toggle > .content { display: flex; align-items: center; flex-direction: row; } .calculator-wrapper .field.toggle input + label { display: grid; align-items: center; justify-content: start; grid-template-columns: repeat(2, auto); grid-template-rows: auto; gap: 0 0.75em; color: #001582; font-family: "Gilmer", sans-serif; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; cursor: pointer; } .calculator-wrapper .field.toggle input + label::before, .calculator-wrapper .field.toggle input + label::after { display: block; width: 1.375em; height: 1.375em; grid-area: 1/1/2/2; content: ""; border-radius: 0.25em; } .calculator-wrapper .field.toggle input + label::before { border: 2px solid; transition: background-color 250ms, border-color 250ms; will-change: background-color, border-color; } .calculator-wrapper .field.toggle input + label::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m40.6 8.24c1.87-1.92 1.87-4.88 0-6.8s-4.75-1.92-6.62 0l-18.33 18.83-7.64-7.67c-1.87-1.92-4.75-1.92-6.62 0s-1.87 4.88 0 6.8l10.86 11.16c1.87 1.92 4.75 1.92 6.62 0l21.72-22.32z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m40.6 8.24c1.87-1.92 1.87-4.88 0-6.8s-4.75-1.92-6.62 0l-18.33 18.83-7.64-7.67c-1.87-1.92-4.75-1.92-6.62 0s-1.87 4.88 0 6.8l10.86 11.16c1.87 1.92 4.75 1.92 6.62 0l21.72-22.32z'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform: scale(60%); transform-origin: center; transition: background-color 250ms; will-change: background-color; } /* ============================================================================ */ /* ICON */ /* ============================================================================ */ .calculator-wrapper .icon:not([style*=mask-image]) { border: 1px solid; } .calculator-wrapper .icon::before { display: block; padding-top: 100%; content: ""; } .calculator-wrapper .icon[style*=mask-image] { -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ============================================================================ */ /* TITLE */ /* ============================================================================ */ .calculator-wrapper .title { display: flex; flex-direction: column; } .calculator-wrapper .title *:where(h2,h3) { font-family: "Gilmer", sans-serif; font-size: clamp(20px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 20) + (20 * 1px)), 24px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .calculator-wrapper .title *:where(.subject,.extract,.legend) { font-family: "Gilmer", sans-serif; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .calculator-wrapper .title .subject { margin-top: 0.5em; font-size: clamp(40px, calc(((var(--viewport-width) - 432px) / 1008) * (64 - 40) + (40 * 1px)), 64px); } .calculator-wrapper .title .extract { margin-top: 0.625em; font-size: clamp(32px, calc(((var(--viewport-width) - 432px) / 1008) * (48 - 32) + (32 * 1px)), 48px); } .calculator-wrapper .title .legend { margin-top: 0.875em; font-size: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (36 - 24) + (24 * 1px)), 36px); } /* ============================================================================ */ /* CALCULATOR SECTION */ /* ============================================================================ */ .calculator-wrapper section.calculator { padding: clamp(48px, calc(((var(--viewport-width) - 432px) / 1008) * (128 - 48) + (48 * 1px)), 128px) var(--layout-margin); background-color: #fcfeff; } .calculator-wrapper section.calculator .title { padding-right: calc(var(--layout-width) * 0.25); } @media (max-width: 1152px) { .calculator-wrapper section.calculator .title { padding-right: var(--column-span); } } .calculator-wrapper section.calculator *:where(h2,h3) { color: #0025ff; } .calculator-wrapper section.calculator *:where(.extract,.legend) { color: #001582; } .calculator-wrapper section.calculator form { margin-top: clamp(32px, calc(((var(--viewport-width) - 432px) / 1008) * (64 - 32) + (32 * 1px)), 64px); } /* Fieldset Group */ .calculator-wrapper section.calculator fieldset.group { transition: opacity 250ms; will-change: opacity; } .calculator-wrapper section.calculator fieldset.group.disabled { opacity: 0.5; pointer-events: none; } .calculator-wrapper section.calculator fieldset.question { position: relative; } @media (min-width: 1153px) { .calculator-wrapper section.calculator fieldset.question { display: grid; grid-auto-flow: row; grid-auto-rows: auto; grid-template-columns: repeat(2, 1fr); gap: clamp(42px, calc(((var(--viewport-width) - 432px) / 1008) * (56 - 42) + (42 * 1px)), 56px) clamp(36px, calc(((var(--viewport-width) - 432px) / 1008) * (48 - 36) + (36 * 1px)), 48px); } } @media (min-width: 865px) { .calculator-wrapper section.calculator fieldset.question { padding: clamp(32px, calc(((var(--viewport-width) - 432px) / 1008) * (64 - 32) + (32 * 1px)), 64px) clamp(36px, calc(((var(--viewport-width) - 432px) / 1008) * (48 - 36) + (36 * 1px)), 48px); border: 1px solid #bdd5ff; border-radius: var(--border-radius); } } .calculator-wrapper section.calculator fieldset.question:not(:first-of-type) { margin-top: clamp(32px, calc(((var(--viewport-width) - 432px) / 1008) * (64 - 32) + (32 * 1px)), 64px); } .calculator-wrapper section.calculator fieldset.question::before, .calculator-wrapper section.calculator fieldset.question::after { position: absolute; top: 0; right: 0; display: block; width: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (32 - 24) + (24 * 1px)), 32px); height: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (32 - 24) + (24 * 1px)), 32px); margin: clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px); content: ""; } @media (max-width: 864px) { .calculator-wrapper section.calculator fieldset.question::before, .calculator-wrapper section.calculator fieldset.question::after { margin: clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px) 0; } } .calculator-wrapper section.calculator fieldset.question::before { background-color: transparent; border: 2px solid #7ea0ff; border-radius: 50%; transition: background-color 250ms, border-color 250ms; will-change: background-color, border-color; } .calculator-wrapper section.calculator fieldset.question::after { background-color: #7ea0ff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m40.6 8.24c1.87-1.92 1.87-4.88 0-6.8s-4.75-1.92-6.62 0l-18.33 18.83-7.64-7.67c-1.87-1.92-4.75-1.92-6.62 0s-1.87 4.88 0 6.8l10.86 11.16c1.87 1.92 4.75 1.92 6.62 0l21.72-22.32z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m40.6 8.24c1.87-1.92 1.87-4.88 0-6.8s-4.75-1.92-6.62 0l-18.33 18.83-7.64-7.67c-1.87-1.92-4.75-1.92-6.62 0s-1.87 4.88 0 6.8l10.86 11.16c1.87 1.92 4.75 1.92 6.62 0l21.72-22.32z'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform: scale(0.5); transform-origin: center; transition: background-color 250ms; will-change: background-color; } .calculator-wrapper section.calculator fieldset.question.valid::before { background-color: #0025ff; border-color: #0025ff; } .calculator-wrapper section.calculator fieldset.question.valid::after { background-color: #fcfeff; } /* Article Question */ @media (max-width: 864px) { .calculator-wrapper section.calculator article.question { padding-top: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (32 - 24) + (24 * 1px)), 32px); border-top: 1px solid #bdd5ff; } } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.question:not(:first-of-type) { margin-top: clamp(36px, calc(((var(--viewport-width) - 432px) / 1008) * (48 - 36) + (36 * 1px)), 48px); } } @media (max-width: 864px) { .calculator-wrapper section.calculator article.question:not(:first-of-type) { margin-top: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (32 - 24) + (24 * 1px)), 32px); } } .calculator-wrapper section.calculator article.question .index { display: flex; align-items: baseline; flex-direction: row; gap: 0 0.25em; color: #0025ff; font-family: "Gilmer", sans-serif; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .calculator-wrapper section.calculator article.question .index::before { color: #0025ff; content: "Question"; } .calculator-wrapper section.calculator article.question .index::after { color: #7ea0ff; content: "of 6"; font-size: 0.875em; } .calculator-wrapper section.calculator article.question .name { margin-top: 1em; color: #001582; font-family: "Gilmer", sans-serif; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .calculator-wrapper section.calculator article.question .info { margin-top: 0.5em; color: #001582; font-family: "Gilmer", sans-serif; font-size: clamp(12px, calc(((var(--viewport-width) - 432px) / 1008) * (14 - 12) + (12 * 1px)), 14px); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .calculator-wrapper section.calculator article.question .field { margin-top: clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px); } .calculator-wrapper section.calculator article.question *:where(.key,.meta) { font-family: "Gilmer", sans-serif; } .calculator-wrapper section.calculator article.question .key { color: #001582; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); font-weight: 600; letter-spacing: -0.02em; } .calculator-wrapper section.calculator article.question .meta { color: #000105; font-size: clamp(12px, calc(((var(--viewport-width) - 432px) / 1008) * (14 - 12) + (12 * 1px)), 14px); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; } .calculator-wrapper section.calculator article.question .field.choice input + label { border-color: #bdd5ff; transition: border-color 250ms; will-change: border-color; } @media (min-width: 1153px) { .calculator-wrapper section.calculator article.question .field.choice.block input + label { max-width: 20em; } } .calculator-wrapper section.calculator article.question .field.choice input:checked + label { border-color: #2045ff; } .calculator-wrapper section.calculator article.question .field:where(.field.integer,.field.string) input { border: 2px solid #bdd5ff; transition: border-color 250ms; will-change: border-color; } .calculator-wrapper section.calculator article.question .field:where(.field.integer,.field.string) input:focus { border-color: #2045ff; } /* Article Person */ .calculator-wrapper section.calculator article.person { padding: 64px; margin-top: clamp(40px, calc(((var(--viewport-width) - 432px) / 1008) * (80 - 40) + (40 * 1px)), 80px); background-color: #eef5ff; border-radius: var(--border-radius); } @media (max-width: 1296px) { .calculator-wrapper section.calculator article.person { padding: calc(((var(--viewport-width) - 1152px) / 144)*(64 - 48) + (48 * 1px)) calc(((var(--viewport-width) - 1152px) / 144)*(64 - 24) + (24 * 1px)); } } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.person { padding: 48px 24px; } } .calculator-wrapper section.calculator article.person > .content { margin-top: clamp(36px, calc(((var(--viewport-width) - 432px) / 1008) * (48 - 36) + (36 * 1px)), 48px); } @media (min-width: 1153px) { .calculator-wrapper section.calculator article.person > .content { display: grid; justify-items: start; grid-auto-flow: row; grid-auto-rows: auto; grid-template-columns: repeat(2, 1fr); gap: clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px) clamp(42px, calc(((var(--viewport-width) - 432px) / 1008) * (56 - 42) + (42 * 1px)), 56px); } } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.person .field:not(:first-of-type) { margin-top: clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px); } } .calculator-wrapper section.calculator article.person .field.string label::after { margin-left: 0.25em; content: "*"; } .calculator-wrapper section.calculator article.person .field.string input { background-color: #fcfeff; border-color: #fcfeff; } .calculator-wrapper section.calculator article.person .field.toggle input + label::before { background-color: #fcfeff; border-color: #fcfeff; } .calculator-wrapper section.calculator article.person .field.toggle input:checked + label::before { background-color: #001582; border-color: #001582; } .calculator-wrapper section.calculator article.person .field.toggle input + label::after { background-color: #bdd5ff; } .calculator-wrapper section.calculator article.person .field.toggle input:checked + label::after { background-color: #fcfeff; } .calculator-wrapper section.calculator article.person button { margin-top: clamp(32px, calc(((var(--viewport-width) - 432px) / 1008) * (64 - 32) + (32 * 1px)), 64px); } /* Article Result */ .calculator-wrapper section.calculator article.result { padding: 64px; margin-top: clamp(42px, calc(((var(--viewport-width) - 432px) / 1008) * (56 - 42) + (42 * 1px)), 56px); background-color: #ddebff; border-radius: var(--border-radius); } @media (max-width: 1296px) { .calculator-wrapper section.calculator article.result { padding: calc(((var(--viewport-width) - 1152px) / 144)*(64 - 48) + (48 * 1px)) calc(((var(--viewport-width) - 1152px) / 144)*(64 - 24) + (24 * 1px)); } } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.result { padding: 48px 24px; } } .calculator-wrapper section.calculator article.result:not(.display) { display: none; } .calculator-wrapper section.calculator article.result > .content { margin-top: clamp(42px, calc(((var(--viewport-width) - 432px) / 1008) * (56 - 42) + (42 * 1px)), 56px); } @media (min-width: 1153px) { .calculator-wrapper section.calculator article.result > .content { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 0 clamp(42px, calc(((var(--viewport-width) - 432px) / 1008) * (56 - 42) + (42 * 1px)), 56px); } } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.result > .content { padding-right: var(--column-span); } } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.result .item:not(:first-of-type) { margin-top: clamp(36px, calc(((var(--viewport-width) - 432px) / 1008) * (48 - 36) + (36 * 1px)), 48px); } } .calculator-wrapper section.calculator article.result .icon { width: 64px; background-color: #0025ff; } @media (max-width: 1152px) { .calculator-wrapper section.calculator article.result .icon { width: calc(((var(--viewport-width) - 864px) / 288)*(64 - 32) + (32 * 1px)); } } @media (max-width: 864px) { .calculator-wrapper section.calculator article.result .icon { width: 32px; } } .calculator-wrapper section.calculator article.result *:where(.name,.value,.info) { font-family: "Gilmer", sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .calculator-wrapper section.calculator article.result .name { margin-top: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (32 - 24) + (24 * 1px)), 32px); color: #0025ff; font-size: clamp(18px, calc(((var(--viewport-width) - 432px) / 1008) * (20 - 18) + (18 * 1px)), 20px); } .calculator-wrapper section.calculator article.result .value { margin-top: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); color: #001582; font-size: clamp(24px, calc(((var(--viewport-width) - 432px) / 1008) * (32 - 24) + (24 * 1px)), 32px); } .calculator-wrapper section.calculator article.result .value span { color: #0025ff; font-weight: 700; } .calculator-wrapper section.calculator article.result .item\:time .value span::after { content: "%"; } .calculator-wrapper section.calculator article.result .item\:opportunity .value span::before { content: "$"; } .calculator-wrapper section.calculator article.result .item\:roi .value span.high::after { content: "x"; } .calculator-wrapper section.calculator article.result .info { margin-top: clamp(42px, calc(((var(--viewport-width) - 432px) / 1008) * (56 - 42) + (42 * 1px)), 56px); color: #7ea0ff; font-size: clamp(14px, calc(((var(--viewport-width) - 432px) / 1008) * (16 - 14) + (14 * 1px)), 16px); } /* Page-specific overrides */ .calculator-wrapper section.calculator fieldset.question:nth-of-type(1) article.question:nth-of-type(1) .field.integer > .content { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 0 clamp(21px, calc(((var(--viewport-width) - 432px) / 1008) * (24 - 21) + (21 * 1px)), 24px); } .calculator-wrapper section.calculator fieldset.question:nth-of-type(1) article.question:nth-of-type(1) .field.integer input { width: 96px; } .calculator-wrapper section.calculator fieldset.question:nth-of-type(1) article.question:nth-of-type(1) .field.integer .error { text-align: right; } @media (max-width: 1296px) and (min-width: 1153px) { .calculator-wrapper section.calculator fieldset.question:nth-of-type(1) article.question:nth-of-type(2) .field.choice > .content { all: unset; display: flex; flex-direction: column; gap: clamp(7px, calc(((var(--viewport-width) - 432px) / 1008) * (8 - 7) + (7 * 1px)), 8px) 0; } } .calculator-wrapper section.calculator fieldset.question:nth-of-type(2) article.question:where(:nth-of-type(3),:nth-of-type(4)) { grid-column: 1 / -1; } @media (min-width: 1153px) { .calculator-wrapper section.calculator fieldset.question:nth-of-type(2) article.question:where(:nth-of-type(3),:nth-of-type(4)) .field.string { width: 40%; } } .calculator-wrapper section.calculator article.person .field:nth-of-type(4) { grid-column: 1 / -1; }

See how much TeamBuilder can save you

Most tools show data.
TeamBuilder helps you act on it — delivering measurable ROI.

Talk to an ExpertAbout TeamBuilder

Opportunity Calculator

Complete the questions to see how much you could save

1
How many FT providers* do you have?
* Physicians, nurse practitioners and physician assistants.
2
How do you feel your clinical and non-clinical staff levels are today?
3
Do you actively track and manage staff productivity?
4
How do you determine your current staffing levels/standard?
5
What do you use to create and manage schedules today?
6
What do you use to distribute the schedule?

Your details

Enter your details to receive your customized results

Your results

TeamBuilder would save you:

Efficiency
You can save up to 52 of time by digitizing your staff schedule.
Cost Reduction
You can save ~ in payroll by better aligning your teams.
Return on Investment
We estimate your ROI to range from ~ based on a standard roll-out approach.
All calculations are estimates based on responses submitted and client experience.

Experience Tomorrow™

Discover how smarter scheduling decisions can transform your operations, visibility, and performance.

Book a DemoSee it in Action