/** * Container */ #convertkit-setup-wizard { max-width: 900px; margin: 0 auto; padding: 20px 0; } #convertkit-setup-wizard .wrap { margin: 10px 0; } /** * Logo */ #convertkit-setup-wizard-header { height: 80px; background: url(../images/convertkit-long.svg) center no-repeat; background-size: 200px auto; } #convertkit-setup-wizard-header h1 { margin: 0; padding: 0; font-weight: 400; color: #D2D8DD; text-indent: -9999px; } /** * Progress Bar */ #convertkit-setup-wizard-progress { text-align: center; padding: 20px 0; } #convertkit-setup-wizard-progress ol { list-style: none; margin: 0; padding: 0; } #convertkit-setup-wizard-progress li { position: relative; display: inline-block; width: 135px; text-align: center; line-height: 3em; } #convertkit-setup-wizard-progress li:after { position: absolute; display: block; z-index: 1; top: -2px; left: -65px; height: 2px; width: 135px; content: ""; background-color: #dfdfdf; } #convertkit-setup-wizard-progress li:before { position: absolute; z-index: 2; top: -6px; left: 65px; height: 10px; width: 10px; border-radius: 1.2em; border: none; line-height: 1.2em; content: " "; background-color: #dfdfdf; } #convertkit-setup-wizard-progress li:first-child:after { display: none; } #convertkit-setup-wizard-progress li.done { color: #1c9bd7; } #convertkit-setup-wizard-progress li.done:after, #convertkit-setup-wizard-progress li.done:before { background-color: #1c9bd7; } /** * Body */ #convertkit-setup-wizard-body { background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } /** * Step X of Y */ #convertkit-setup-wizard-step { color: #8c8f9a; font-size: 15px; } /** * Content */ #convertkit-setup-wizard-content { padding: 80px 80px 0 80px; } #convertkit-setup-wizard-content h1 { margin: 0 0 20px 0; } #convertkit-setup-wizard-content hr { margin: 40px 0 0 0; padding: 0 0 40px 0; border-bottom: none; } #convertkit-setup-wizard-content p { font-size: 16px; } #convertkit-setup-wizard-content p.description { font-size: 13px; } #convertkit-setup-wizard-content a.button, #convertkit-setup-wizard-content button, #convertkit-setup-wizard-footer a.button, #convertkit-setup-wizard-footer button { padding: 5px 20px; font-weight: 500; font-size: 16px; } /** * Content Grid */ #convertkit-setup-wizard-content .convertkit-setup-wizard-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; } #convertkit-setup-wizard-content .convertkit-setup-wizard-grid > div { text-align: center; padding: 20px; background-color: #fcfcfc; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } #convertkit-setup-wizard-content .convertkit-setup-wizard-grid > div span { display: block; } #convertkit-setup-wizard-content .convertkit-setup-wizard-grid > div span.description { margin: 20px 0 0 0; color: #646970; font-size: 13px; } #convertkit-setup-wizard-content > div { margin: 0 0 40px 0; } #convertkit-setup-wizard-content > div label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500; } #convertkit-setup-wizard-content .convertkit-setup-wizard-selection { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; } #convertkit-setup-wizard-content .convertkit-setup-wizard-selection label { text-align: center; padding: 20px; background-color: #fcfcfc; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } #convertkit-setup-wizard-content .convertkit-setup-wizard-selection label span { display: block; } #convertkit-setup-wizard-content .convertkit-setup-wizard-selection label span.description { margin: 20px 0 0 0; color: #646970; font-size: 13px; font-weight: 400; font-style: italic; } #convertkit-setup-wizard-content .convertkit-setup-wizard-selection label input[type=radio] { margin: 20px 0 0 0; } /** * Footer */ #convertkit-setup-wizard-footer { display: grid; grid-template-columns: repeat(2,1fr); grid-template-areas: "left right"; padding: 40px 80px; } #convertkit-setup-wizard-footer .left { grid-area: left; text-align: left; } #convertkit-setup-wizard-footer .right { grid-area: right; text-align: right; } /** * Exit Link */ #convertkit-setup-wizard-exit-link { display: block; margin: 80px 0; text-align: center; font-size: 14px; } #convertkit-setup-wizard-exit-link a { color: #8c8f9a; }