diff --git a/static/css/forms.css b/static/css/forms.css index e2a8223c..fec86e87 100644 --- a/static/css/forms.css +++ b/static/css/forms.css @@ -1,3 +1,8 @@ +@charset "UTF-8"; +/* General form components and styling that can be reused across different forms + - general reusable form components & styling + - application-specific styling +*/ body { margin: 0; box-sizing: border-box; @@ -86,57 +91,43 @@ p { text-align: justify; } -form { - display: flex; - justify-content: center; - align-items: center; - margin: 2rem auto; - width: 75%; - max-width: 150rem; - padding: 3rem; - background-color: white; - border: 1px solid rgb(0, 0, 0); -} - -.application-page { +/* General form components and styling that can be reused across different forms + - general reusable form components & styling + - application-specific styling +*/ +.form-wrapper .wrapper { + max-width: 50%; justify-content: center; - background-color: #0093b5; - padding: 2rem; -} - -.application-form .learn-more-wrapper { - display: inline; } - -.application-form .learn-more-content { - margin: 0.5em 0 0 0; - font-size: large; +.form-wrapper #info-wrapper { + margin-bottom: 2em; } - -.application-form .learn-more-wrapper button { - display: inline; - background-color: white; - font-size: large; - color: #0093b5; - cursor: pointer; - padding: 0; - margin: 0 0 0 0.5em; +.form-wrapper #info-wrapper > fieldset { + box-sizing: border-box; + margin: 1em; + padding: 1em; + border-radius: 6px; + border: 1px solid rgba(0, 0, 0, 0.1); } - -.application-form .learn-more-wrapper button:hover { - background-color: white; - color: #16c1f3; +.form-wrapper #info-wrapper > fieldset > label { + margin-top: 1em; + margin-bottom: 0.5em; + color: rgba(0, 115, 149, 0.8); } - -.application-form .learn-more-wrapper button:focus-visible { - padding: 3px; +.form-wrapper #info-wrapper > fieldset > input[type=text], +.form-wrapper #info-wrapper > fieldset > input[type=email], +.form-wrapper #info-wrapper > fieldset > input[type=tel], +.form-wrapper #info-wrapper > fieldset > input[type=url], +.form-wrapper #info-wrapper > fieldset > input[type=number], +.form-wrapper #info-wrapper > fieldset > textarea { + min-width: 90%; + margin: auto auto 1em auto; + padding: 0.25em; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 6px; } - -.application-page > h1, -.application-page > label { - max-width: 65%; - margin: auto; - text-align: center; +.form-wrapper #info-wrapper > fieldset > textarea { + min-height: 6em; } legend { @@ -144,38 +135,39 @@ legend { font-size: 20px; } -.application-form > fieldset { - padding: 2rem; - border: 1px solid rgba(0, 0, 0, 0.559); - border-radius: 0.5rem; +.radio-wrapper { width: 100%; + margin-bottom: 1em; + color: rgba(0, 0, 0, 0.851); } - -.application-form > fieldset > label { - margin-bottom: 0.5rem; - font-size: large; +.radio-wrapper input[type=radio] { + width: 50px; } - -.application-form > fieldset > input[type=text], -.application-form > fieldset > input[type=email], -.application-form > fieldset > input[type=tel], -.application-form > fieldset > input[type=textarea] { - box-sizing: border-box; - padding: 1em; +.radio-wrapper label { + color: black; margin-bottom: 2em; - border: 1px solid rgba(0, 0, 0, 0.559); - border-radius: 6px; - width: 100%; +} +.radio-wrapper.invalid { + padding: 15px; + border: 2px solid #bf0020; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; } #radio-wrapper label { color: black; margin-bottom: 2em; } - #radio-wrapper input { background-color: #16c1f3; } +#radio-wrapper > input[type=radio] { + margin: 0; +} +#radio-wrapper > label { + font-size: smaller; +} .continue-to-app-btn { width: 50%; @@ -210,6 +202,345 @@ button.save-btn:hover { justify-content: space-between; } +.checkbox-wrapper { + margin-bottom: 1em; +} +.checkbox-wrapper input[type=checkbox] { + margin-right: 0.5em; +} +.checkbox-wrapper label { + cursor: pointer; +} + +.checkbox-container { + margin: 25px; + padding-bottom: 30px; + display: flex; +} +.checkbox-container input#code-of-conduct-checkbox { + margin-right: 15px; +} +.checkbox-container label[for=code-of-conduct-checkbox] ~ a { + color: rgba(0, 115, 149, 0.8); + text-decoration: none; +} +.checkbox-container.invalid { + padding: 10px; + background-color: rgba(255, 200, 200, 0.1); + border-radius: 4px; + border: 2px solid #bf0020; +} + +span { + font-style: italic; + color: rgba(0, 0, 0, 0.6); +} + +/* Square Payment System Styling */ +.payment-form { + padding: 50px 0px 50px 0px; + width: 100%; + max-width: 1000px; + margin: 40px auto; + display: flex; + justify-content: center; + border-radius: 20px; + align-items: center; +} + +#apple-pay-button { + height: 48px; + width: 100%; + display: inline-block; + -webkit-appearance: -apple-pay-button; + -apple-pay-button-type: plain; + -apple-pay-button-style: black; +} + +#fast-checkout { + background: #fafafa; + color: black; +} +#fast-checkout h3 { + color: #0093b5; +} +#fast-checkout input { + border-radius: 6px; + position: relative; +} +#fast-checkout .wrapper { + position: relative; +} +#fast-checkout button { + width: 100%; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + color: white; + display: inline-block; + background-color: #fc7625; + text-align: center; + font-size: 1.5em; +} +#fast-checkout button:hover { + background-color: #16c1f3; + color: white; + transition: 0.3s; +} +#fast-checkout .border { + color: rgba(0, 0, 0, 0.55); + background: rgba(0, 0, 0, 0.1); + height: 1px; + width: 100%; + margin: 30px 0; + font-size: 12px; + line-height: 20px; + text-transform: uppercase; + position: relative; +} +#fast-checkout .border span { + position: absolute; + top: -10px; + background: #fafafa; + padding: 0 10px; + left: calc(50% - 1em - 5px); +} + +#ach-wrapper { + display: none; +} +#ach-wrapper input:first-of-type { + margin-bottom: 10px; +} + +#ach-message { + width: 100%; + margin-top: 11px; + margin-bottom: 11px; + font-size: 14px; + display: inline-block; + color: #bf0020; +} +#ach-message:empty:before { + content: "​"; +} + +#payment-flow-message { + width: 100%; + margin-top: 11px; + margin-bottom: 11px; + height: 100px; + display: block; +} +#payment-flow-message.error { + color: #bf0020; + font-weight: bold; + margin-top: 10px; + font-size: 14px; + line-height: 1.4; +} +#payment-flow-message.success { + color: #28a745; + font-weight: bold; + margin-top: 10px; +} + +.wrapper { + max-width: 50%; + justify-content: center; +} + +#card-container { + max-width: 387px; + margin: auto; +} + +#payment-page { + padding: 1.5em; + background-color: #0093b5; +} +#payment-page > h1, +#payment-page > p { + max-width: 65%; + margin: auto; + text-align: center; + margin-bottom: 2rem; +} + +#consulting-list { + list-style-position: inside; + border-style: solid; + border-color: #05556d; + border-width: thick; + padding: 3% 5% 3% 5%; +} + +#consulting-bullet-items { + border-style: solid; + border-color: #05556d; + border-radius: 5px; + padding: 1%; + margin: 1%; + list-style-type: none; +} + +.application-page { + justify-content: center; + background-color: #0093b5; + padding: 2rem; +} +.application-page > h1, +.application-page > p { + max-width: 65%; + margin: auto; + text-align: center; +} +.application-page > form { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem auto; + width: 75%; + max-width: 150rem; + padding: 3rem; + background-color: white; + border: 1px solid #000000; +} + +.application-form .learn-more-wrapper { + display: inline; +} +.application-form .learn-more-wrapper button { + display: inline; + background-color: white; + color: #0093b5; + cursor: pointer; + padding: 0; + margin: 0 0 0 0.5em; +} +.application-form .learn-more-wrapper button:hover { + background-color: white; + color: #16c1f3; +} +.application-form .learn-more-wrapper button:focus-visible { + padding: 3px; +} +.application-form .learn-more-content { + margin: 0.5em 0 0 0; + font-size: large; +} +.application-form button { + background-color: #fc7625; + color: white; + font-size: large; + padding: 1rem; + border-radius: 0.5rem; + margin: auto; + display: block; + cursor: pointer; +} +.application-form button:hover { + background-color: #16c1f3; + color: white; + transition: 0.3s; +} +.application-form > fieldset { + border: 1px solid rgba(0, 0, 0, 0.559); + border-radius: 0.5rem; + padding: 2rem; + width: 100%; +} +.application-form > fieldset > label { + color: #000000; + font-size: large; +} +.application-form > fieldset > input[type=text], +.application-form > fieldset > input[type=email], +.application-form > fieldset > input[type=tel], +.application-form > fieldset > input[type=date], +.application-form > fieldset > input[type=number], +.application-form > fieldset > input[type=url], +.application-form > fieldset > textarea, +.application-form > fieldset > select { + padding: 1em; + margin-bottom: 2em; + border: 1px solid rgba(0, 0, 0, 0.559); + border-radius: 6px; + width: 100%; + box-sizing: border-box; +} +.application-form > fieldset > select, +.application-form > fieldset > input[type=checkbox], +.application-form > fieldset > #radio-wrapper > input[type=radio] { + cursor: pointer; +} +.application-form > fieldset > select { + appearance: none; + background-color: transparent; + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmc+DQogIDxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0xMCwyMzIuN2w0OTAsNTM0LjVwNDkwLTUzNC41SDEweiIgLz4NCjwvc3ZnPg==); + background-repeat: no-repeat; + background-position: right; + background-size: 15px; + background-origin: content-box; +} + +#radio-wrapper { + width: 100%; + color: rgba(0, 0, 0, 0.851); +} + +#custom-gender, +#custom-pronouns, +#custom-race-ethnicity { + display: none; +} + +.pronouns-group { + margin-bottom: 1.5em; +} +.pronouns-group.invalid { + padding: 15px; + border: 2px solid #bf0020; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; +} + +/* Form responsive design */ +@media (max-width: 900px) { + .form-wrapper .wrapper { + max-width: 75%; + } + .form-wrapper #info-wrapper { + max-width: 100%; + min-width: none; + } + .wrapper { + max-width: 75%; + } +} +@media (max-width: 600px) { + .form-wrapper .wrapper { + max-width: 100%; + } + .form-wrapper #info-wrapper { + max-width: 100%; + min-width: none; + } + .form-wrapper #info-wrapper > fieldset { + margin: 0px; + width: 100%; + } + .payment-form { + margin: 0px; + padding: 30px; + box-sizing: border-box; + } + .wrapper { + max-width: 100%; + } +} @media only screen and (min-width: 320px) and (max-width: 599px) { html, body { @@ -217,13 +548,14 @@ button.save-btn:hover { width: 100%; } .column { - padding: 0 1rem; + padding: 0; width: 100%; margin: auto; overflow-x: hidden; box-sizing: border-box; } - .row, .application-page { + .row, + .application-page { padding: 2em; } .justify { @@ -250,7 +582,7 @@ button.save-btn:hover { max-width: fit-content; } .application-page > form { - width: inherit; + width: initial; margin-bottom: 2rem; padding: 1.5rem; } @@ -270,34 +602,80 @@ button.save-btn:hover { gap: 0.5em; margin: auto; } + #radio-wrapper > input[type=radio] { + margin: 0; + } + #radio-wrapper > label, + .application-form > fieldset > label { + font-size: smaller; + } } -@media only screen and (min-width: 600px) and (max-width: 910px) { +@media only screen and (min-width: 320px) and (max-width: 599px) { + .column { + padding: 0; + } + .application-page { + padding: 2rem 0; + } + .application-page > form { + width: initial; + margin-bottom: 2rem; + padding: 1.5rem; + } + .application-page > h1 { + font-size: 1.5em; + max-width: fit-content; + } html, body { overflow-x: hidden; width: 100%; } + legend { + font-size: 18px; + } + .application-form > fieldset { + min-width: 95%; + word-wrap: break-word; + padding: 1.5rem; + margin: 0; + } + #radio-wrapper > input[type=radio] { + margin: 0; + } + #radio-wrapper > label, + .application-form > fieldset > label { + font-size: smaller; + } + .application-form .learn-more-wrapper .learn-more-title, + .application-form .learn-more-wrapper .toggle-icon { + color: #0093b5; + font-size: smaller; + } + .application-form .learn-more-wrapper .learn-more-content { + font-size: smaller; + } +} +@media only screen and (min-width: 600px) and (max-width: 910px) { .column { - padding: 0 1rem; - width: 100%; - margin: auto; - overflow-x: hidden; - box-sizing: border-box; + padding: 0; } - .row { - padding: 2em; + html, + body { + overflow-x: hidden; + width: 100%; } .application-page { - padding: 2em 0; - } - .application-page > h1 { - font-size: 2em; - max-width: fit-content; + padding: 2rem 0; } .application-page > form { width: initial; margin-bottom: 2rem; } + .application-page > h1 { + font-size: 2em; + max-width: fit-content; + } legend { font-size: 24px; } diff --git a/static/css/forms.css.map b/static/css/forms.css.map index 314ab1f9..b180e995 100644 --- a/static/css/forms.css.map +++ b/static/css/forms.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/_settings.scss","../sass/forms.scss"],"names":[],"mappings":"AAcA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA,OA5BU;EA6BV;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAGF;EACE,OAtDM;EAuDN;EACA;;;AAGF;EACE,OA/DU;EAgEV;;;AAGF;EACE,kBAjEM;EAkEN;;;AAGF;EACE,OAvEU;EAwEV,aAlEuB;;;AAqEzB;EACE,kBA9EU;EA+EV,OA5EM;;AA6EN;EACE;;;AAIJ;EACE;EACA,OAvFU;;;AA0FZ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACjGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,kBDhBQ;ECiBR;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA,ODjCQ;ECkCR;EACA;EACA;;;AAGF;EACE;EACA,ODxCS;;;AC2CX;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE,kBDxFS;;;AC2FX;EACI;;;AAGJ;AAAA;AAAA;EAGE,kBD1FW;EC2FX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBDhHS;ECiHT;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EAEE;AAAA;IAEE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;AAAA;AAAA;IAGE;;EAGF;AAAA;IAEE,ODjKM;ICkKN;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;;AAIJ;EACE;AAAA;IAEE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE","file":"forms.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/forms.scss","../sass/_settings.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AC0BA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA,OArCU;EAsCV;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAGF;EACE,OA/DM;EAgEN;EACA;;;AAGF;EACE,OAxEU;EAyEV;;;AAGF;EACE,kBA1EM;EA2EN;;;AAGF;EACE,OAhFU;EAiFV,aAjEuB;;;AAoEzB;EACE,kBAvFU;EAwFV,OArFM;;AAsFN;EACE;;;AAIJ;EACE;EACA,OAhGU;;;AAmGZ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AD/GF;AAAA;AAAA;AAAA;AAUE;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,OChBS;;ADmBX;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAMN;EACE,OCxCa;EDyCb;;;AAIF;EACE;EACA;EACA,OC/CoB;;ADiDpB;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE,kBCpFS;;ADuFX;EACE;;AAGF;EACE;;;AAKJ;EACE;;;AAGF;AAAA;AAAA;EAGE,kBCnGa;EDoGb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBCtHW;EDuHX;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE,OChJW;EDiJX;;AAGF;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE,OCtMQ;;ADyMV;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,OCrNI;EDsNJ;EACA,kBCpNW;EDqNX;EACA;;AAEA;EACE,kBC9NO;ED+NP,OC7NE;ED8NF;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA,kBCjTU;;ADmTV;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA,kBCjVU;EDkVV;;AAEA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBChWI;EDiWJ;;;AAOF;EACE;;AAEA;EACE;EACA,kBC7WE;ED8WF,OCjXM;EDkXN;EACA;EACA;;AAEA;EACE,kBCpXA;EDqXA,OCjXK;;ADoXP;EACE;;AAKN;EACE;EACA;;AAIF;EACE,kBClYW;EDmYX,OCtYI;EDuYJ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBC3YO;ED4YP,OChZE;EDiZF;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE,OCxZO;EDyZP;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMN;EACE;EACA,OC/boB;;;ADmctB;AAAA;AAAA;EAGE;;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EAEI;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;;AAIJ;EAEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;EAKN;IACE;IACA;IACA;;EAGF;IACE;;;AAKJ;EACE;AAAA;IAEE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;AAAA;IAEE;;EAGF;IACE;;EAGF;IACE;;EAGF;AAAA;AAAA;IAGE;;EAGF;AAAA;IAEE,OCpjBQ;IDqjBR;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;AAAA;IAEE;;;AAKJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAIJ;AAAA;IAEE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;AAAA;IAEE;;EAGF;AAAA;IAEE,OCtpBQ;IDupBR;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;IACA;;EAGF;IACE;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAIJ;IACE","file":"forms.css"} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 069b0907..4fb5b64c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,4 +1,11 @@ @charset "UTF-8"; +/* Main stylesheet for Techtonica website + - global styles + - global layout + - global navigation + - global validation + - global typography + - imports all component stylesheets*/ body { margin: 0; box-sizing: border-box; @@ -87,1108 +94,1231 @@ p { text-align: justify; } -.sponsor-tiers-container { - display: grid; - gap: 2rem; - margin: 3rem 0; - padding: 2rem 2rem; - grid-template-columns: repeat(4, 1fr); +/* Main stylesheet for Techtonica website + - global styles + - global layout + - global navigation + - global validation + - global typography + - imports all component stylesheets*/ +/* Main stylesheet for Techtonica website + - global styles + - global layout + - global navigation + - global validation + - global typography + - imports all component stylesheets*/ +/* General form components and styling that can be reused across different forms + - general reusable form components & styling + - application-specific styling +*/ +.form-wrapper .wrapper { + max-width: 50%; + justify-content: center; } -@media (max-width: 1024px) { - .sponsor-tiers-container { - grid-template-columns: repeat(2, 1fr); - } +.form-wrapper #info-wrapper { + margin-bottom: 2em; } -@media (max-width: 767px) { - .sponsor-tiers-container { - grid-template-columns: 1fr; - } +.form-wrapper #info-wrapper > fieldset { + box-sizing: border-box; + margin: 1em; + padding: 1em; + border-radius: 6px; + border: 1px solid rgba(0, 0, 0, 0.1); } -.sponsor-tiers-container .sponsor-tier-card { - background: white; - border-radius: 16px; - padding: 2rem; - box-shadow: 0 8px 32px rgb(5, 85, 109); - border: 2px solid transparent; - transition: all 0.3s ease; - position: relative; - overflow: hidden; +.form-wrapper #info-wrapper > fieldset > label { + margin-top: 1em; + margin-bottom: 0.5em; + color: rgba(0, 115, 149, 0.8); } -.sponsor-tiers-container .sponsor-tier-card:hover { - transform: translateY(-8px); - box-shadow: 0 16px 48px rgb(5, 85, 109); +.form-wrapper #info-wrapper > fieldset > input[type=text], +.form-wrapper #info-wrapper > fieldset > input[type=email], +.form-wrapper #info-wrapper > fieldset > input[type=tel], +.form-wrapper #info-wrapper > fieldset > input[type=url], +.form-wrapper #info-wrapper > fieldset > input[type=number], +.form-wrapper #info-wrapper > fieldset > textarea { + min-width: 90%; + margin: auto auto 1em auto; + padding: 0.25em; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 6px; } -.sponsor-tiers-container .sponsor-tier-card.featured { - border-color: #05556d; - background: linear-gradient(135deg, #f8fbff 0%, #e8f4ff 100%); +.form-wrapper #info-wrapper > fieldset > textarea { + min-height: 6em; } -.sponsor-tiers-container .sponsor-tier-card.featured::before { - content: "Most Popular"; - position: absolute; - top: 20px; - right: -30px; - background: linear-gradient(135deg, #0093B5 0%, #05556d 100%); - color: white; - padding: 8px 40px; - font-size: 0.8rem; - font-weight: 600; - transform: rotate(45deg); - box-shadow: 0 4px 12px rgb(5, 85, 109); + +legend { + color: rgba(0, 115, 149, 0.8); + font-size: 20px; } -.sponsor-tiers-container .tier-header { - text-align: center; - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 2px solid #05556d; + +.radio-wrapper { + width: 100%; + margin-bottom: 1em; + color: rgba(0, 0, 0, 0.851); } -.sponsor-tiers-container .tier-name { - font-size: 1.8rem; - font-weight: 400; - color: #05556d; - margin-bottom: 0.5rem; +.radio-wrapper input[type=radio] { + width: 50px; } -.sponsor-tiers-container .tier-description { - color: #05556d; - font-size: 0.95rem; - line-height: 1.4; - text-align: center; +.radio-wrapper label { + color: black; + margin-bottom: 2em; } -.sponsor-tiers-container .tier-features { - list-style: none; - margin: 1.5rem 0; +.radio-wrapper.invalid { + padding: 15px; + border: 2px solid #bf0020; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; } -.sponsor-tiers-container .tier-features li { - padding: 0.75rem 0; - display: flex; - align-items: flex-start; - gap: 0.75rem; - color: #000; - font-size: 0.95rem; - line-height: 1.5; - font-weight: 200; + +#radio-wrapper label { + color: black; + margin-bottom: 2em; } -.sponsor-tiers-container .tier-features li::before { - content: "✓"; - color: #0093b5; - font-weight: bold; - font-size: 1.1rem; - min-width: 20px; +#radio-wrapper input { + background-color: #16c1f3; } -.sponsor-tiers-container .tier-features li .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; +#radio-wrapper > input[type=radio] { + margin: 0; } -.sponsor-tiers-container .tier-cta { - text-align: center; - margin-top: 2rem; +#radio-wrapper > label { + font-size: smaller; } -.action-buttons { - display: flex; - gap: 1rem; - justify-content: center; - margin: 3rem 0; - flex-wrap: wrap; - align-items: center; +.continue-to-app-btn { + width: 50%; } -.row { - -webkit-display: flex; - -moz-display: flex; - display: flex; - flex-flow: row wrap; - justify-content: space-around; - padding: 3rem 5rem; +button.continue-to-app-btn, +button.previous-btn, +button.save-btn { + background-color: #fc7625; + color: white; + font-size: large; + padding: 1rem; + border-radius: 0.5rem; + display: block; + margin-left: auto; + margin-right: auto; + cursor: pointer; } -.row__center { - align-items: center; +button.continue-to-app-btn:hover, +button.previous-btn:hover, +button.save-btn:hover { + background-color: #16c1f3; + color: white; + transition: 0.3s; } -.top-testimonials { +.form-button { display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 1.5rem; - padding: 2rem; -} - -.testimonial-post { - width: 40%; - background-color: #0093b5; - margin: 0; - padding: 4rem; - padding-top: 2rem; - padding-bottom: 1.5rem; - overflow-clip-margin: content-box; - overflow: clip; - border-radius: 2px; - transition: transform 0.3s ease; + margin: auto; + align-items: center; + justify-content: space-between; } -.testimonial-post:hover { - transform: translateY(-5px); +.checkbox-wrapper { + margin-bottom: 1em; } - -.testimonial-post .post-content { - padding: 1rem; - padding-left: 0rem; - padding-right: 2rem; - width: 100%; - background-color: #fafafa; - border-radius: 1px; +.checkbox-wrapper input[type=checkbox] { + margin-right: 0.5em; } - -.testimonial-text { - font-size: 14px; - line-height: 1.6em; - color: #333; - padding: 1rem; - padding-top: 1rem; - padding-bottom: 1rem; +.checkbox-wrapper label { + cursor: pointer; } -@media (min-width: 768px) { - .testimonial-post { - width: calc(50% - 1.5rem); - } -} -@media (min-width: 1024px) { - .testimonial-post { - width: calc(33.333% - 1.5rem); - } +.checkbox-container { + margin: 25px; + padding-bottom: 30px; + display: flex; } -@media (max-width: 767px) { - .testimonial-post { - padding: 1.5rem; - } - .testimonial-post .post-content { - padding: 1rem; - padding-left: 0.5rem; - padding-right: 1.5rem; - } - .testimonial-text { - font-size: 13px; - line-height: 1.5em; - padding: 1rem; - } +.checkbox-container input#code-of-conduct-checkbox { + margin-right: 15px; } -.staff-team { - align-items: flex-start; +.checkbox-container label[for=code-of-conduct-checkbox] ~ a { + color: rgba(0, 115, 149, 0.8); + text-decoration: none; } - -.row__baseline { - align-items: baseline; +.checkbox-container.invalid { + padding: 10px; + background-color: rgba(255, 200, 200, 0.1); + border-radius: 4px; + border: 2px solid #bf0020; } -.column { - -webkit-flex: 1; - -moz-flex: 1; - flex: 1; - padding: 0 1rem; +span { + font-style: italic; + color: rgba(0, 0, 0, 0.6); } -.chart-container { - -webkit-display: flex; - -moz-display: flex; +/* Square Payment System Styling */ +.payment-form { + padding: 50px 0px 50px 0px; + width: 100%; + max-width: 1000px; + margin: 40px auto; display: flex; - flex-flow: row wrap; - justify-content: space-around; - background-color: rgb(0, 147, 181); - color: white; - padding: 3rem; + justify-content: center; + border-radius: 20px; + align-items: center; } -.nav-bar { - -webkit-display: inline-flex; - -moz-display: inline-flex; - display: inline-flex; - flex-flow: row-reverse wrap; - justify-content: space-around; - align-items: center; - position: fixed; - top: 0; - left: 0; +#apple-pay-button { + height: 48px; width: 100%; - height: 5rem; - background-color: white; - box-shadow: 0 0 8px 1px #ccc; - z-index: 100; + display: inline-block; + -webkit-appearance: -apple-pay-button; + -apple-pay-button-type: plain; + -apple-pay-button-style: black; } -.nav-bar-inner { - -webkit-display: inline-flex; - -moz-display: inline-flex; - display: inline-flex; - flex-flow: row-reverse wrap; - justify-content: space-around; - align-items: center; - width: 100%; - padding: 5px 1rem 5px 0; - background: white; +#fast-checkout { + background: #fafafa; + color: black; } - -.nav-link { - flex-grow: 1; - padding: 1em 0; - text-shadow: 0px 0px 1px #ccc; +#fast-checkout h3 { + color: #0093b5; } - -.nav-link:hover { - color: #16c1f3; +#fast-checkout input { + border-radius: 6px; + position: relative; } - -.dropdown-toggle::after { - content: " ▾"; - padding-left: 10px; +#fast-checkout .wrapper { + position: relative; } - -.dropdown-menu { - display: none; - position: absolute; - background-color: white; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; +#fast-checkout button { + width: 100%; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + color: white; + display: inline-block; + background-color: #fc7625; + text-align: center; + font-size: 1.5em; } -.dropdown-menu .dropdown-item { - color: rgb(0, 147, 181); - padding: 12px 16px; - text-decoration: none; - display: block; +#fast-checkout button:hover { + background-color: #16c1f3; + color: white; + transition: 0.3s; } -.dropdown-menu .dropdown-item:hover { - background-color: #f1f1f1; +#fast-checkout .border { + color: rgba(0, 0, 0, 0.55); + background: rgba(0, 0, 0, 0.1); + height: 1px; + width: 100%; + margin: 30px 0; + font-size: 12px; + line-height: 20px; + text-transform: uppercase; + position: relative; } -.dropdown-menu.show { - display: block; +#fast-checkout .border span { + position: absolute; + top: -10px; + background: #fafafa; + padding: 0 10px; + left: calc(50% - 1em - 5px); } -.img-link { - -webkit-flex: 10; - -moz-flex: 10; - -o-flex: 10; - flex: 10; - display: inline-block; - order: 1; +#ach-wrapper { + display: none; } - -.logo { - width: 170px; - padding-left: 1.25rem; +#ach-wrapper input:first-of-type { + margin-bottom: 10px; } -.mc-closeModal { - text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; +#ach-message { + width: 100%; + margin-top: 11px; + margin-bottom: 11px; + font-size: 14px; + display: inline-block; + color: #bf0020; } - -.main-content { - margin-top: 4rem; +#ach-message:empty:before { + content: "​"; } -.main-header { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - -webkit-display: flex; - -moz-display: flex; - -o-display: flex; - display: flex; - align-items: flex-end; - justify-content: flex-end; +#payment-flow-message { width: 100%; - height: 75vh; - background: url(../img/three-participants-at-laptops-min.jpg) #0093b5 no-repeat top right fixed; - background-size: cover; + margin-top: 11px; + margin-bottom: 11px; + height: 100px; + display: block; +} +#payment-flow-message.error { + color: #bf0020; + font-weight: bold; + margin-top: 10px; + font-size: 14px; + line-height: 1.4; +} +#payment-flow-message.success { + color: #28a745; + font-weight: bold; + margin-top: 10px; } -.main-header__text { +.wrapper { max-width: 50%; - padding: 0 1.5em; - background-color: rgba(0, 147, 181, 0.8); - border-top-left-radius: 25px; - border-top: 5px solid rgba(0, 115, 149, 0.8); + justify-content: center; } -#myChart { - display: block; - max-width: 100%; - height: auto; +#card-container { + max-width: 387px; + margin: auto; } -@media screen and (max-width: 2880px) { - #myChart { - width: 2880px; - height: 1800px; - } +#payment-page { + padding: 1.5em; + background-color: #0093b5; } -.main-header__header { - font-size: calc(28px + 24 * (100vw - 320px) / 960); +#payment-page > h1, +#payment-page > p { + max-width: 65%; + margin: auto; + text-align: center; + margin-bottom: 2rem; } -@media only screen and (min-width: 1200px) { - .main-header__header { - font-size: 3.5rem; - } + +#consulting-list { + list-style-position: inside; + border-style: solid; + border-color: #05556d; + border-width: thick; + padding: 3% 5% 3% 5%; } -.program-header { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - -webkit-display: flex; - -moz-display: flex; - -o-display: flex; - display: flex; - align-items: flex-end; - justify-content: flex-end; - width: 100%; - height: 100vh; - background: url(../img/2024-H2-Launch-Celebration-min.png) #0093b5 no-repeat top fixed; - background-size: cover; +#consulting-bullet-items { + border-style: solid; + border-color: #05556d; + border-radius: 5px; + padding: 1%; + margin: 1%; + list-style-type: none; } -.sponsor-header { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - -webkit-display: flex; - -moz-display: flex; - -o-display: flex; +.application-page { + justify-content: center; + background-color: #0093b5; + padding: 2rem; +} +.application-page > h1, +.application-page > p { + max-width: 65%; + margin: auto; + text-align: center; +} +.application-page > form { display: flex; + justify-content: center; align-items: center; - justify-content: flex-end; - width: 100%; + margin: 2rem auto; + width: 75%; + max-width: 150rem; + padding: 3rem; + background-color: white; + border: 1px solid #000000; } -#sponsor-hero { - width: 100%; +.application-form .learn-more-wrapper { + display: inline; } - -.sponsor-logo { - width: 20%; - margin: 25px; +.application-form .learn-more-wrapper button { + display: inline; + background-color: white; + color: #0093b5; + cursor: pointer; + padding: 0; + margin: 0 0 0 0.5em; } - -.sponsor-img { - width: 10%; - margin: 25px; +.application-form .learn-more-wrapper button:hover { + background-color: white; + color: #16c1f3; } - -#consulting-hero { - width: 100%; - padding-top: 5%; +.application-form .learn-more-wrapper button:focus-visible { + padding: 3px; } - -.full-width-img { - width: 100%; - max-width: 2440px; - height: auto; +.application-form .learn-more-content { + margin: 0.5em 0 0 0; + font-size: large; } -@media screen and (min-width: 2881px) { - .full-width-img { - width: 2880px !important; - height: auto !important; - margin-left: auto !important; - margin-right: auto !important; - } +.application-form button { + background-color: #fc7625; + color: white; + font-size: large; + padding: 1rem; + border-radius: 0.5rem; + margin: auto; + display: block; + cursor: pointer; } - -.forty-percent-width { - width: 40%; +.application-form button:hover { + background-color: #16c1f3; + color: white; + transition: 0.3s; } - -.twenty-percent-width { - width: 20%; +.application-form > fieldset { + border: 1px solid rgba(0, 0, 0, 0.559); + border-radius: 0.5rem; + padding: 2rem; + width: 100%; } - -.fifteen-percent-width { - width: 15%; +.application-form > fieldset > label { + color: #000000; + font-size: large; +} +.application-form > fieldset > input[type=text], +.application-form > fieldset > input[type=email], +.application-form > fieldset > input[type=tel], +.application-form > fieldset > input[type=date], +.application-form > fieldset > input[type=number], +.application-form > fieldset > input[type=url], +.application-form > fieldset > textarea, +.application-form > fieldset > select { + padding: 1em; + margin-bottom: 2em; + border: 1px solid rgba(0, 0, 0, 0.559); + border-radius: 6px; + width: 100%; + box-sizing: border-box; } - -.ten-percent-width { - width: 10%; +.application-form > fieldset > select, +.application-form > fieldset > input[type=checkbox], +.application-form > fieldset > #radio-wrapper > input[type=radio] { + cursor: pointer; } - -.min-width-250 { - min-width: 250px; +.application-form > fieldset > select { + appearance: none; + background-color: transparent; + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmc+DQogIDxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0xMCwyMzIuN2w0OTAsNTM0LjVwNDkwLTUzNC41SDEweiIgLz4NCjwvc3ZnPg==); + background-repeat: no-repeat; + background-position: right; + background-size: 15px; + background-origin: content-box; } -.max-size-75px { - max-height: 75px; - max-width: 75px; +#radio-wrapper { + width: 100%; + color: rgba(0, 0, 0, 0.851); } -.max-width-100-percent { - max-width: 100%; +#custom-gender, +#custom-pronouns, +#custom-race-ethnicity { + display: none; } -.max-width-75-percent { - max-width: 75%; +.pronouns-group { + margin-bottom: 1.5em; } - -.resize-400px { - max-height: 400px; - max-width: 400px; +.pronouns-group.invalid { + padding: 15px; + border: 2px solid #bf0020; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; } -.resize-200px { - /* Ensure each teams image is square */ - object-fit: cover; - width: 200px; - max-height: 200px; - max-width: 200px; +/* Form responsive design */ +@media (max-width: 900px) { + .form-wrapper .wrapper { + max-width: 75%; + } + .form-wrapper #info-wrapper { + max-width: 100%; + min-width: none; + } + .wrapper { + max-width: 75%; + } } - -.margin-25 { - margin: 25px; +@media (max-width: 600px) { + .form-wrapper .wrapper { + max-width: 100%; + } + .form-wrapper #info-wrapper { + max-width: 100%; + min-width: none; + } + .form-wrapper #info-wrapper > fieldset { + margin: 0px; + width: 100%; + } + .payment-form { + margin: 0px; + padding: 30px; + box-sizing: border-box; + } + .wrapper { + max-width: 100%; + } } - -.margin-1-percent { - margin: 1%; +@media only screen and (min-width: 320px) and (max-width: 599px) { + html, + body { + overflow-x: hidden; + width: 100%; + } + .column { + padding: 0; + width: 100%; + margin: auto; + overflow-x: hidden; + box-sizing: border-box; + } + .row, + .application-page { + padding: 2em; + } + .justify { + text-align: left; + } + .large-white-text { + font-size: 1.5em; + } + button.previous-btn, + button.continue-to-app-btn, + button.save-btn { + font-size: smaller; + } + .application-form .learn-more-wrapper .learn-more-title, + .application-form .learn-more-wrapper .toggle-icon { + color: #0093b5; + font-size: smaller; + } + .application-form .learn-more-wrapper .learn-more-content { + font-size: smaller; + } + .application-page > h1 { + font-size: 1.5em; + max-width: fit-content; + } + .application-page > form { + width: initial; + margin-bottom: 2rem; + padding: 1.5rem; + } + legend { + font-size: 18px; + } + .application-form > fieldset { + min-width: 95%; + word-wrap: break-word; + padding: 1.5rem; + margin: 0; + } + .application-form > fieldset > label { + font-size: smaller; + } + .form-button { + gap: 0.5em; + margin: auto; + } + #radio-wrapper > input[type=radio] { + margin: 0; + } + #radio-wrapper > label, + .application-form > fieldset > label { + font-size: smaller; + } } - -.max-size-5-percent { - max-height: 5%; - max-width: 5%; +@media only screen and (min-width: 320px) and (max-width: 599px) { + .column { + padding: 0; + } + .application-page { + padding: 2rem 0; + } + .application-page > form { + width: initial; + margin-bottom: 2rem; + padding: 1.5rem; + } + .application-page > h1 { + font-size: 1.5em; + max-width: fit-content; + } + html, + body { + overflow-x: hidden; + width: 100%; + } + legend { + font-size: 18px; + } + .application-form > fieldset { + min-width: 95%; + word-wrap: break-word; + padding: 1.5rem; + margin: 0; + } + #radio-wrapper > input[type=radio] { + margin: 0; + } + #radio-wrapper > label, + .application-form > fieldset > label { + font-size: smaller; + } + .application-form .learn-more-wrapper .learn-more-title, + .application-form .learn-more-wrapper .toggle-icon { + color: #0093b5; + font-size: smaller; + } + .application-form .learn-more-wrapper .learn-more-content { + font-size: smaller; + } } - -.max-size-15-percent { - max-height: 15%; - max-width: 15%; +@media only screen and (min-width: 600px) and (max-width: 910px) { + .column { + padding: 0; + } + html, + body { + overflow-x: hidden; + width: 100%; + } + .application-page { + padding: 2rem 0; + } + .application-page > form { + width: initial; + margin-bottom: 2rem; + } + .application-page > h1 { + font-size: 2em; + max-width: fit-content; + } + legend { + font-size: 24px; + } +} +body { + font-family: "lato", helvetica, sans-serif; + color: #000000; + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 1.2em; + line-height: 1.4em; } -.fixed-img { - width: 30%; - position: fixed; - top: 150px; +h1, h2, h3, h4, h5, h6 { + margin: 1.5rem 0; + color: #0093b5; + line-height: 1.3em; + font-weight: 700; + font-family: "lato", helvetica, sans-serif; } -.social-media, -.hiring { - width: 3rem; - height: 3rem; - margin-bottom: 0.25rem; +h1, h2 { + letter-spacing: 2px; } -.hiring { - width: 4.5rem; +h3, h4, h5, h6 { + letter-spacing: 1px; } -.icon-text { - font-size: 0.7rem; /* Smaller text size */ - text-align: center; - line-height: 1.2; - margin-top: 0.25rem; +h1 { + color: white; + font-size: 4em; + letter-spacing: 4px; } -.social-links { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 1rem; +p { + text-align: justify; + font-family: "lato", helvetica, sans-serif; } -.social-link { - display: flex; - flex-direction: column; - align-items: center; +a { + color: #0093b5; text-decoration: none; - color: inherit; - width: 60px; } -.contact-us, -.donate, -.tier-button, -.orange-button { - margin-bottom: 24px; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - -o-border-radius: 8px; - border-radius: 8px; - color: white; - display: inline-block; - background-color: #fc7625; - text-align: center; - padding-block: 24px; - padding-inline: 16px; +a:hover { + color: #16c1f3; } -.contact-us:hover, -.donate:hover, -.tier-button:hover, -.orange-button:hover { - background-color: #16c1f3; - color: white; - transition: 0.3s; + +button { + background-color: white; + border: 0; } -.orange-button:hover .link-on-blue { +.blue-h1 { color: #05556d; + text-shadow: 0px 0px 1px #ccc; } -.contact-us { - margin: 0.5em 0; - padding: 0.75em 1.5em; +.blue-background { + background-color: #0093b5; + color: white; } - -#quotes { +.blue-background a { color: white; - font-size: 2em; - letter-spacing: 2px; } - -.white-text { +.blue-background h3 { color: white; - padding: 1.5rem; - margin: 0; } -.large-white-text { - color: white; - font-size: 2em; - letter-spacing: 2px; +.white-background { + background-color: white; + color: #0093b5; +} + +.centered { + text-align: center; +} +.centered p { text-align: center; } -a:hover { - color: #16c1f3; +.hidden-lg { + display: none; } -.sponsor-p { - font-size: 20px; - line-height: 35px; +.hidden-med { + display: none; +} + +.hidden-sm { + display: none; +} + +.sponsor-tiers-container { + display: grid; + gap: 2rem; + margin: 3rem 0; + padding: 2rem 2rem; + grid-template-columns: repeat(4, 1fr); +} +@media (max-width: 1024px) { + .sponsor-tiers-container { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 767px) { + .sponsor-tiers-container { + grid-template-columns: 1fr; + } +} +.sponsor-tiers-container .sponsor-tier-card { + background: white; + border-radius: 16px; + padding: 2rem; + box-shadow: 0 8px 32px rgb(5, 85, 109); + border: 2px solid transparent; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} +.sponsor-tiers-container .sponsor-tier-card:hover { + transform: translateY(-8px); + box-shadow: 0 16px 48px rgb(5, 85, 109); +} +.sponsor-tiers-container .sponsor-tier-card.featured { + border-color: #05556d; + background: linear-gradient(135deg, #f8fbff 0%, #e8f4ff 100%); +} +.sponsor-tiers-container .sponsor-tier-card.featured::before { + content: "Most Popular"; + position: absolute; + top: 20px; + right: -30px; + background: linear-gradient(135deg, #0093B5 0%, #05556d 100%); + color: white; + padding: 8px 40px; + font-size: 0.8rem; + font-weight: 600; + transform: rotate(45deg); + box-shadow: 0 4px 12px rgb(5, 85, 109); +} + +.tier-header { text-align: center; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 2px solid #05556d; } -.stars { - height: 90px; - margin-right: 5px; - margin-bottom: 5px; +.tier-name { + font-size: 1.8rem; + font-weight: 400; + color: #05556d; + margin-bottom: 0.5rem; } -.sponsorship-levels-img { - width: 90%; - height: 90%; - padding: 5%; +.tier-description { + color: #05556d; + font-size: 0.95rem; + line-height: 1.4; + text-align: center; } -.hidden-lg { - display: none; +.tier-features { + list-style: none; + margin: 1.5rem 0; +} +.tier-features li { + padding: 0.75rem 0; + display: flex; + align-items: flex-start; + gap: 0.75rem; + color: #000; + font-size: 0.95rem; + line-height: 1.5; + font-weight: 200; +} +.tier-features li::before { + content: "✓"; + color: #0093b5; + font-weight: bold; + font-size: 1.1rem; + min-width: 20px; +} +.tier-features li .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; } -iframe#youtubeiframe { - width: 560px; - height: 315px; - padding-inline-start: 15rem; - padding-bottom: 0.5rem; - padding-top: 0.5rem; +.tier-cta { + text-align: center; + margin-top: 2rem; } -table.mentor { - border-top: 1px solid #000; - border-left: 1px solid #000; - border-right: 1px solid #000; +.action-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin: 3rem 0; + flex-wrap: wrap; + align-items: center; } -table.mentor td { - border-bottom: 1px solid #000; + +.container { + max-width: 960px; + margin: 0 auto; padding: 1rem; } -table.mentor td ul { + +/* Layout system */ +.row { + -webkit-display: flex; + -moz-display: flex; + display: flex; + flex-flow: row wrap; + justify-content: space-around; + padding: 3rem 5rem; +} + +.row__center { + align-items: center; +} + +.row__baseline { + align-items: baseline; +} + +.column { + -webkit-flex: 1; + -moz-flex: 1; + flex: 1; + padding: 0 1rem; +} + +.column-med { + -webkit-flex: 0 0 40%; + -moz-flex: 0 0 40%; + -o-flex: 0 0 40%; + flex: 0 0 40%; +} + +.staff-team { + align-items: flex-start; +} + +.top-testimonials { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1.5rem; + padding: 2rem; +} + +.testimonial-post { + width: 40%; + background-color: #0093b5; margin: 0; + padding: 4rem; + padding-top: 2rem; + padding-bottom: 1.5rem; + overflow-clip-margin: content-box; + overflow: clip; + border-radius: 2px; + transition: transform 0.3s ease; } -table.mentor td:first-of-type { - border-right: 1px solid #000; - vertical-align: top; + +.testimonial-post:hover { + transform: translateY(-5px); } -#chartcontainer { - position: relative; - min-height: auto; +.testimonial-post .post-content { + padding: 1rem; + padding-left: 0rem; + padding-right: 2rem; width: 100%; + background-color: #fafafa; + border-radius: 1px; +} + +.testimonial-text { + font-size: 14px; + line-height: 1.6em; + color: #333; + padding: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Chart and data visualization */ +.chart-container { + -webkit-display: flex; + -moz-display: flex; display: flex; - flex-grow: 1; + flex-flow: row wrap; + justify-content: space-around; + background-color: rgb(0, 147, 181); + color: white; + padding: 3rem; } -.videowrapper { - max-width: 560px; /* you have to have a size or this method doesn't work */ - max-height: 315px; - margin-right: auto; - margin-left: auto; - margin-bottom: 2rem; +#myChart { + display: block; + max-width: 100%; + height: auto; } -@media only screen and (max-width: 1024px) { - .row { - padding: 2em; - } - h1 { - font-size: 3.5em; - } - p { - text-align: left; +@media screen and (max-width: 2880px) { + #myChart { + width: 2880px; + height: 1800px; } } -@media only screen and (max-width: 910px) { - .row { - padding: 1em; - margin: 0 auto; - overflow-x: hidden; - } - .column-med { - -webkit-flex: 0 0 40%; - -moz-flex: 0 0 40%; - -o-flex: 0 0 40%; - flex: 0 0 40%; - } - .hidden-med { - display: none; - } - .column { - -webkit-flex: 0 0 100%; - -moz-flex: 0 0 100%; - -o-flex: 0 0 100%; - flex: 0 0 100%; - box-sizing: border-box; - } - h1 { - font-size: 2em; - letter-spacing: 0.5px; - } - .donate { - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - -o-border-radius: 0px; - border-radius: 0px; - color: #fc7625; - } - .donate:hover { - background-color: #fc7625; - color: white; - } - .nav-bar { - justify-content: space-between; - } - .small-screen-nav { - flex-flow: column-reverse nowrap; - justify-content: flex-end; - } - .img-link { - align-items: center; - display: flex; - height: 100%; - left: 0; - position: absolute; - top: 0; - } - .nav-link { - display: none; - } - .nav-link.dropdown { - position: relative; - padding: 0; - } - .dropdown-menu { - position: static; - width: 100%; - margin: 0 auto; - text-align: left; - } - .dropdown-menu .dropdown-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - padding-left: 3.5rem; - } - .dropdown-toggle::after { - content: " ▾"; - font-size: 2em; - display: flex; - width: 1rem; - } - .nav-link--mobile { - display: block; - width: 100%; - text-align: left; - padding: 1rem; - padding-left: 3%; - } - .nav-link--mobile a { - display: flex; - justify-content: space-between; - width: auto; - padding-right: 4%; - } - .nav-bar-inner { - display: flex; - flex-direction: column-reverse; - width: 100%; - display: flex; - align-items: flex-start; - } - .nav-bar-inner > .nav-link--mobile { - border-bottom: 1px solid #ccc; - } - .nav-link--mobile:last-child { - border-bottom: none; - } - .main-header { - display: block; - position: relative; - background: url(../img/three-participants-at-laptops-min.jpg) #0093b5 no-repeat top center; - -webkit-background-size: contain; - -moz-background-size: contain; - -o-background-size: contain; - background-size: contain; - } - .main-header__text { - position: absolute; - bottom: 0; - max-width: 100%; - width: auto; - padding: 0 1em; - } - .main-content { - margin-top: 5rem; - } - .hidden-sm { - display: none; - } - .hidden-lg { - display: inline-block; - } - .lines-button { - position: absolute; - right: 0; - top: 0; - margin: 0.5rem 0; - padding: 1.5rem 1rem; - transition: 0.3s; - cursor: pointer; - user-select: none; - border-radius: 0.4285714286rem; - } - .lines-button:hover { - opacity: 1; - } - .lines-button:active { - transition: 0; - background: rgba(0, 0, 0, 0.1); - } - .lines { - display: inline-block; - width: 3rem; - height: 0.4285714286rem; - background: #16c1f3; - border-radius: 0.2142857143rem; - transition: 0.3s; - position: relative; - /*create the upper and lower lines as pseudo-elements of the middle line*/ - } - .lines:before, .lines:after { - display: inline-block; - width: 3rem; - height: 0.4285714286rem; - background: #16c1f3; - border-radius: 0.2142857143rem; - transition: 0.3s; - position: absolute; - left: 0; - content: ""; - transform-origin: 0.2142857143rem center; - } - .lines:before { - top: 0.75rem; - } - .lines:after { - top: calc(-3rem / 4); - } - .lines-button:hover { - opacity: 1; - } - .lines-button:hover .lines:before { - top: 1rem; - } - .lines-button:hover .lines:after { - top: calc(-3rem / 3); - } - .lines-button.x.close .lines { - /*hide the middle line*/ - background: transparent; - /*overlay the lines by setting both their top values to 0*/ - } - .lines-button.x.close .lines:before, .lines-button.x.close .lines:after { - transform-origin: 50% 50%; - top: 0; - width: 2.5em; - } - .lines-button.x.close .lines:before { - transform: rotate3d(0, 0, 1, 45deg); - } - .lines-button.x.close .lines:after { - transform: rotate3d(0, 0, 1, -45deg); - } - .contact-us { - display: block; - } - .nav-bar-inner { - padding: 0; - margin-top: 5rem; - } - .social-link { - width: 50px; /* Slightly smaller width for mobile */ - } - .social-media, - .hiring { - width: 2.5rem; - height: 2.5rem; - } - .hiring { - width: 3.75rem; - } - .icon-text { - font-size: 0.6rem; /* Even smaller text for mobile */ - } -} -@media (max-width: 560px) { - .videowrapper { - position: relative; - width: 100%; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; - } - .videowrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - } - table.mentor td { - display: block; - width: 100%; - padding: 0.5rem; - box-sizing: border-box; - } - table.mentor td:first-of-type { - border-right: none; - vertical-align: top; - } +#chartcontainer { + position: relative; + min-height: auto; + width: 100%; + display: flex; + flex-grow: 1; } -@media (max-width: 411px) { - .large-white-text { - font-size: 1.5em !important; - } + +/* Navigation system */ +.nav-bar { + -webkit-display: inline-flex; + -moz-display: inline-flex; + display: inline-flex; + flex-flow: row-reverse wrap; + justify-content: space-around; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 5rem; + background-color: white; + box-shadow: 0 0 8px 1px #ccc; + z-index: 100; } -/* iphone 4 and 4s media query */ -@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { - .main-header__text { - font-size: 1rem; - height: 50vh; - } + +.nav-bar-inner { + -webkit-display: inline-flex; + -moz-display: inline-flex; + display: inline-flex; + flex-flow: row-reverse wrap; + justify-content: space-around; + align-items: center; + width: 100%; + padding: 5px 1rem 5px 0; + background: white; } -/* iphone 4 and 4s landscape media query */ -@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { - .main-header { - background-size: cover; - font-size: 14px; - } - .main-content { - font-size: 14px; - } + +.nav-link { + flex-grow: 1; + padding: 1em 0; + text-shadow: 0px 0px 1px #ccc; } -/* Samsung Galaxy s5 portrait media query */ -@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { - .main-header__text { - font-size: 1rem; - } - .main-header_text p { - margin-bottom: 20px; - } + +.nav-link:hover { + color: #16c1f3; } -/* Samsung Galaxy s5 landscape media query */ -@media screen and (device-width: 640px) and (device-height: 360px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { - .main-header__text { - font-size: 1rem; - height: 50vh; - } - .main-header { - height: 500px; - background-size: cover; - } + +.dropdown-toggle::after { + content: " ▾"; + padding-left: 10px; } -.progress-bg { - margin: 0 auto; - width: 65%; - height: 78px; - border-radius: 10px; - text-align: center; - -moz-box-shadow: inset 0 0 10px #ccc; - -webkit-box-shadow: inset 0 0 10px black; - box-shadow: inset 0 0 10px black; + +.dropdown-menu { + display: none; + position: absolute; background-color: white; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; +} +.dropdown-menu .dropdown-item { + color: rgb(0, 147, 181); + padding: 12px 16px; + text-decoration: none; + display: block; +} +.dropdown-menu .dropdown-item:hover { + background-color: #f1f1f1; +} +.dropdown-menu.show { + display: block; } -.progress-bar { - height: 78px; - border-radius: 10px; - float: left; - width: 50%; - background-color: #fc7625; +.img-link { + -webkit-flex: 10; + -moz-flex: 10; + -o-flex: 10; + flex: 10; + display: inline-block; + order: 1; +} + +.logo { + width: 170px; + padding-left: 1.25rem; +} + +/* Main content areas */ +.mc-closeModal { + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; +} + +.main-content { + margin-top: 4rem; +} + +.main-header { + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + -webkit-display: flex; + -moz-display: flex; + -o-display: flex; + display: flex; + align-items: flex-end; + justify-content: flex-end; + width: 100%; + height: 75vh; + background: url(../img/three-participants-at-laptops-min.jpg) #0093b5 no-repeat top right fixed; + background-size: cover; +} + +.main-header__text { + max-width: 50%; + padding: 0 1.5em; + background-color: rgba(0, 147, 181, 0.8); + border-top-left-radius: 25px; + border-top: 5px solid rgba(0, 115, 149, 0.8); +} + +.main-header__header { + font-size: calc(28px + 24 * (100vw - 320px) / 960); +} + +@media only screen and (min-width: 1200px) { + .main-header__header { + font-size: 3.5rem; + } +} +.program-header { + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + -webkit-display: flex; + -moz-display: flex; + -o-display: flex; + display: flex; + align-items: flex-end; + justify-content: flex-end; + width: 100%; + height: 100vh; + background: url(../img/2024-H2-Launch-Celebration-min.png) #0093b5 no-repeat top fixed; + background-size: cover; } -.progress-bg h3.goal, -.progress-bg h3.raised { - line-height: 78px; - margin: 0; - padding: 0; - text-align: center; - display: inline; +.sponsor-header { + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + -webkit-display: flex; + -moz-display: flex; + -o-display: flex; + display: flex; + align-items: center; + justify-content: flex-end; + width: 100%; } -.progress-bg h3.goal { - color: #fff; +#sponsor-hero { + width: 100%; } -.progress-bg h3.goal { - color: #fc7625; - text-align: center; +#consulting-hero { + width: 100%; + padding-top: 5%; } -.progress-bg h3.goal { - float: right; - display: inline; - padding: 0 25px 0 0; - text-align: center; +/* Image and sizing utilities */ +.full-width-img { + width: 100%; + max-width: 2440px; + height: auto; +} +@media screen and (min-width: 2881px) { + .full-width-img { + width: 2880px !important; + height: auto !important; + margin-left: auto !important; + margin-right: auto !important; + } } -/* Events Stuff */ -.event-item { - max-width: 30%; - flex-basis: 25%; - padding: 1rem 2rem; +.forty-percent-width { + width: 40%; } -.event-item__address { - font-size: 1rem; +.twenty-percent-width { + width: 20%; } -.blue-background h3 { - color: white; +.fifteen-percent-width { + width: 15%; } -.collapsible { - color: #0093b5; - cursor: pointer; - margin: 25px; - text-align: left; - outline: none; - font-size: 1.2em; +.ten-percent-width { + width: 10%; } -.collapsible:hover { - color: #05556d; + +.min-width-250 { + min-width: 250px; } -.collapsible::before { - content: "+ "; - text-decoration: none; + +.max-size-75px { + max-height: 75px; + max-width: 75px; } -.collapsible-active { - color: #05556d; +.max-width-100-percent { + max-width: 100%; } -.collapsible-active::before { - content: "- "; + +.max-width-75-percent { + max-width: 75%; } -.collapsible-content { - padding: 25px; - display: none; +.resize-400px { + max-height: 400px; + max-width: 400px; } -ul.hidden-bullets { - list-style-type: none; - padding-inline-start: 0; +.resize-200px { + object-fit: cover; + width: 200px; + max-height: 200px; + max-width: 200px; } -p.press-release-summary { - font-style: italic; +.margin-25 { + margin: 25px; } -p.press-release-bold { - font-style: bold; +.margin-1-percent { + margin: 1%; } -/* Square Payment Styling */ -.payment-form { - padding: 50px 0px 50px 0px; - width: 100%; - max-width: 1000px; - margin: 40px auto; - display: flex; - justify-content: center; - border-radius: 20px; +.max-size-5-percent { + max-height: 5%; + max-width: 5%; } -.payment-form { - align-items: center; +.max-size-15-percent { + max-height: 15%; + max-width: 15%; } -#apple-pay-button { - height: 48px; - width: 100%; - display: inline-block; - -webkit-appearance: -apple-pay-button; - -apple-pay-button-type: plain; - -apple-pay-button-style: black; +.fixed-img { + width: 30%; + position: fixed; + top: 150px; } -/* Fix for contact link visibility on job form page */ -#payment-page p a { - color: #ffffff !important; - text-decoration: underline; - font-weight: bold; +.sponsor-logo { + width: 20%; + margin: 25px; } -#payment-page p a:hover { - color: #16c1f3 !important; - text-decoration: underline; +.sponsor-img { + width: 10%; + margin: 25px; } -#fast-checkout { - background: #fafafa; - color: black; +/* Social media and contact elements */ +.social-media, +.hiring { + width: 3rem; + height: 3rem; + margin-bottom: 0.25rem; } -#fast-checkout h3 { - color: #0093b5; +.hiring { + width: 4.5rem; } -#fast-checkout input { - border-radius: 6px; - position: relative; +.icon-text { + font-size: 0.7rem; + text-align: center; + line-height: 1.2; + margin-top: 0.25rem; } -#fast-checkout .wrapper { - position: relative; +.social-links { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; } -#fast-checkout button { - width: 100%; +.social-link { + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + color: inherit; + width: 60px; } -#fast-checkout button { +/* Interactive buttons and elements */ +.contact-us, +.donate, +.orange-button { + margin-bottom: 24px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; @@ -1197,330 +1327,227 @@ p.press-release-bold { display: inline-block; background-color: #fc7625; text-align: center; - font-size: 1.5em; + padding-block: 24px; + padding-inline: 16px; } -#fast-checkout button:hover { +.contact-us:hover, +.donate:hover, +.orange-button:hover { background-color: #16c1f3; color: white; transition: 0.3s; } -#fast-checkout .border { - color: rgba(0, 0, 0, 0.55); - background: rgba(0, 0, 0, 0.1); - height: 1px; - width: 100%; - margin: 30px 0; - font-size: 12px; - line-height: 20px; - text-transform: uppercase; - position: relative; -} - -#fast-checkout .border span { - position: absolute; - top: -10px; - background: #fafafa; - padding: 0 10px; - left: calc(50% - 1em - 5px); -} - -#ach-wrapper { - display: none; -} - -#ach-wrapper input:first-of-type { - margin-bottom: 10px; -} - -#ach-message { - width: 100%; - margin-top: 11px; - margin-bottom: 11px; - font-size: 14px; - display: inline-block; - color: #bf0020; -} - -#ach-message:empty:before, -#message:empty:before { - content: "​"; -} - -#payment-flow-message { - width: 100%; - margin-top: 11px; - margin-bottom: 11px; - height: 100px; - display: block; -} - -#payment-flow-message.error { - color: #bf0020; - font-weight: bold; - margin-top: 10px; - font-size: 14px; - line-height: 1.4; +.orange-button:hover .link-on-blue { + color: #05556d; } -#payment-flow-message.success { - color: #28a745; - font-weight: bold; - margin-top: 10px; +.contact-us { + margin: 0.5em 0; + padding: 0.75em 1.5em; } -.wrapper { - max-width: 50%; - justify-content: center; +/* Text styling and content elements */ +#quotes { + color: white; + font-size: 2em; + letter-spacing: 2px; } -#card-container { - max-width: 387px; - margin: auto; +.white-text { + color: white; + padding: 1.5rem; + margin: 0; } -#info-wrapper { - margin-bottom: 2em; +.large-white-text { + color: white; + font-size: 2em; + letter-spacing: 2px; + text-align: center; } -#info-wrapper > fieldset { - box-sizing: border-box; - margin: 1em; - padding: 1em; - border-radius: 6px; - border: 1px solid rgba(0, 0, 0, 0.1); +.sponsor-p { + font-size: 20px; + line-height: 35px; + text-align: center; } -legend { - color: rgba(0, 115, 149, 0.8); +.stars { + height: 90px; + margin-right: 5px; + margin-bottom: 5px; } -#info-wrapper > fieldset > label { - margin-top: 1em; - margin-bottom: 0.5em; - color: rgba(0, 115, 149, 0.8); +.sponsorship-levels-img { + width: 90%; + height: 90%; + padding: 5%; } -#info-wrapper > fieldset > input[type=text], -#info-wrapper > fieldset > input[type=email], -#info-wrapper > fieldset > textarea { - min-width: 90%; - margin: auto auto 1em auto; - padding: 0.25em; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 6px; +/* Video and media elements */ +iframe#youtubeiframe { + width: 560px; + height: 315px; + padding-inline-start: 15rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; } -#info-wrapper > fieldset > textarea { - min-height: 6em; +.videowrapper { + max-width: 560px; + max-height: 315px; + margin-right: auto; + margin-left: auto; + margin-bottom: 2rem; } -input[type=radio] { - width: 50px; +/* Table styling */ +table.mentor { + border-top: 1px solid #000; + border-left: 1px solid #000; + border-right: 1px solid #000; +} +table.mentor td { + border-bottom: 1px solid #000; + padding: 1rem; +} +table.mentor td ul { + margin: 0; +} +table.mentor td:first-of-type { + border-right: 1px solid #000; + vertical-align: top; } -#radio-wrapper { - width: 100%; - margin-bottom: 1em; - color: rgba(0, 115, 149, 0.8); +/* Progress indicators */ +.progress-bg { + margin: 0 auto; + width: 65%; + height: 78px; + border-radius: 10px; + text-align: center; + -moz-box-shadow: inset 0 0 10px #ccc; + -webkit-box-shadow: inset 0 0 10px black; + box-shadow: inset 0 0 10px black; + background-color: white; } -#payment-page { - padding: 1.5em; - background-color: #0093b5; +.progress-bar { + height: 78px; + border-radius: 10px; + float: left; + width: 50%; + background-color: #fc7625; } -#payment-page > h1, -#payment-page > p { - max-width: 65%; - margin: auto; +.progress-bg h3.goal, .progress-bg h3.raised { + line-height: 78px; + margin: 0; + padding: 0; text-align: center; - margin-bottom: 2rem; + display: inline; } -#consulting-list { - list-style-position: inside; - border-style: solid; - border-color: #05556d; - border-width: thick; - padding: 3% 5% 3% 5%; +.progress-bg h3.goal { + color: #fff; } -#consulting-bullet-items { - border-style: solid; - border-color: #05556d; - border-radius: 5px; - padding: 1%; - margin: 1%; - list-style-type: none; +.progress-bg h3.goal { + color: #fc7625; + text-align: center; } -.checkbox-container { - margin: 25px; - padding-bottom: 30px; - display: flex; +.progress-bg h3.goal { + float: right; + display: inline; + padding: 0 25px 0 0; + text-align: center; } -input#code-of-conduct-checkbox { - margin-right: 15px; +/* Events and content sections */ +.event-item { + max-width: 30%; + flex-basis: 25%; + padding: 1rem 2rem; } -label[for=code-of-conduct-checkbox] ~ a { - color: rgba(0, 115, 149, 0.8); - text-decoration: none; +.event-item__address { + font-size: 1rem; } -@media (max-width: 900px) { - .wrapper { - max-width: 75%; - } - #info-wrapper { - max-width: 100%; - min-width: none; - } +/* Collapsible content */ +.collapsible { + color: #0093b5; + cursor: pointer; + margin: 25px; + text-align: left; + outline: none; + font-size: 1.2em; } -@media (max-width: 600px) { - .chart-container { - padding: 2rem 0; - } - #myChart { - padding: 0; - } - .payment-form { - margin: 0px; - padding: 30px; - box-sizing: border-box; - } - .wrapper { - max-width: 100%; - } - #info-wrapper { - max-width: 100%; - min-width: none; - } - #info-wrapper > fieldset { - margin: 0px; - width: 100%; - } - .sponsor-logo { - width: 38%; - margin: 15px; - } - .sponsor-img { - width: 33%; - margin: 20px; - } +.collapsible:hover { + color: #05556d; } -/* Invalid radio wrapper styling */ -#radio-wrapper.invalid { - padding: 10px; - background-color: rgba(255, 200, 200, 0.1); - border-radius: 4px; - border: 2px solid #bf0020; +.collapsible::before { + content: "+ "; + text-decoration: none; } -/* Invalid checkbox container styling */ -.checkbox-container.invalid { - padding: 10px; - background-color: rgba(255, 200, 200, 0.1); - border-radius: 4px; - border: 2px solid #bf0020; +.collapsible-active { + color: #05556d; } - -/* Disabled button styling */ -button:disabled, -button.disabled { - opacity: 0.6; - cursor: not-allowed; +.collapsible-active::before { + content: "- "; } -/* Success page styling */ -.success-container { - text-align: center; - padding: 40px 20px; - background-color: #fafafa; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +.collapsible-content { + padding: 25px; + display: none; } -.success-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 80px; - height: 80px; - background-color: #28a745; - color: white; - font-size: 40px; - border-radius: 50%; - margin-bottom: 20px; +/* List and content styling */ +ul.hidden-bullets { + list-style-type: none; + padding-inline-start: 0; } -.success-container h2 { - color: #28a745; - margin-bottom: 20px; +p.press-release-summary { + font-style: italic; } -.success-container p { - margin-bottom: 15px; - font-size: 18px; - line-height: 1.5; - color: #333; - text-align: center; +p.press-release-bold { + font-style: bold; } -.success-container a { - color: #0093b5; - text-decoration: underline; +/* News page styling */ +#news-title { + padding: 0; } -.success-container button { - margin-top: 30px; +/* Sponsor page styling */ +.sponsor-benefit-table { + margin-right: auto; + margin-left: auto; + width: 100%; } -/* Existing styles for invalid fields, etc. */ -input.invalid, -textarea.invalid { - border: 2px solid #bf0020 !important; - background-color: rgba(255, 200, 200, 0.1); +.sponsor-benefit-table, +.sponsor-benefit-table td { + border: 1px solid #0093b5; + border-collapse: collapse; } -/* Processing state styling */ -.processing { - position: relative; - pointer-events: none; +.sponsor-benefit-table th { + padding: 5px; + column-width: 100px; } -.processing::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(255, 255, 255, 0.7); - display: flex; - justify-content: center; - align-items: center; - z-index: 10; +.sponsor-table-cell { + text-align: center; } -/* Spinner animation for processing state */ -@keyframes spinner { - to { - transform: rotate(360deg); - } -} -.spinner { - display: inline-block; - width: 20px; - height: 20px; - border: 3px solid rgba(0, 147, 181, 0.3); - border-radius: 50%; - border-top-color: #0093b5; - animation: spinner 0.8s linear infinite; - margin-right: 10px; - vertical-align: middle; +.sponsor-table-prompt { + padding-left: 5px; } /* Admin Dashboard styling */ @@ -1535,17 +1562,6 @@ textarea.invalid { top: 0; left: 0; margin-bottom: 0; -} - -/* News Page Styling */ -#news-title { - padding: 0; -} - -/* Sponsor Page Styling */ -.sponsor-benefit-table { - margin-right: auto; - margin-left: auto; width: 100%; height: 5rem; background-color: white; @@ -1738,41 +1754,493 @@ progress::-webkit-progress-bar { #applicant-action { padding: 5px; border-radius: 10px; - /* Sponsor Page Styling */ } -#admin-action .sponsor-benefit-table, -#applicant-action .sponsor-benefit-table { - margin-right: auto; - margin-left: auto; + +/* Form validation styling */ +input.invalid, +textarea.invalid { + border: 2px solid #bf0020 !important; + background-color: rgba(255, 200, 200, 0.1); +} + +.invalid { + border: 2px solid #bf0020 !important; + background-color: rgba(191, 0, 32, 0.1) !important; + box-shadow: 0 0 5px rgba(191, 0, 32, 0.3) !important; +} + +.pronouns-group.invalid { + padding: 15px; + border: 2px solid #bf0020; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; +} + +.radio-wrapper.invalid { + padding: 15px; + border: 2px solid #bf0020; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; +} + +.checkbox-container.invalid { + padding: 10px; + background-color: rgba(255, 200, 200, 0.1); + border-radius: 4px; + border: 2px solid #bf0020; +} + +.validation-message { + color: #bf0020; + font-size: 14px; + font-weight: bold; + margin-top: 5px; + display: block; +} + +.required-indicator { + color: #bf0020; + font-weight: bold; +} + +.invalid:focus { + outline: 2px solid #bf0020; + outline-offset: 2px; +} + +/* Button states */ +button:disabled, +button.disabled { + opacity: 0.6; + cursor: not-allowed; +} + +/* Success page styling */ +.success-container { + text-align: center; + padding: 40px 20px; + background-color: #fafafa; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.success-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + background-color: #28a745; + color: white; + font-size: 40px; + border-radius: 50%; + margin-bottom: 20px; +} + +.success-container h2 { + color: #28a745; + margin-bottom: 20px; +} + +.success-container p { + margin-bottom: 15px; + font-size: 18px; + line-height: 1.5; + color: #333; + text-align: center; +} + +.success-container a { + color: #0093b5; + text-decoration: underline; +} + +.success-container button { + margin-top: 30px; +} + +/* Processing state styling */ +.processing { + position: relative; + pointer-events: none; +} + +.processing::after { + content: ""; + position: absolute; + top: 0; + left: 0; width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 10; } -#admin-action .sponsor-benefit-table, -#admin-action .sponsor-benefit-table td, -#applicant-action .sponsor-benefit-table, -#applicant-action .sponsor-benefit-table td { - border: 1px solid #0093b5; - border-collapse: collapse; + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} +.spinner { + display: inline-block; + width: 20px; + height: 20px; + border: 3px solid rgba(0, 147, 181, 0.3); + border-radius: 50%; + border-top-color: #0093b5; + animation: spinner 0.8s linear infinite; + margin-right: 10px; + vertical-align: middle; +} + +/* Responsive design */ +@media (min-width: 768px) { + .testimonial-post { + width: calc(50% - 1.5rem); + } +} +@media (min-width: 1024px) { + .testimonial-post { + width: calc(33.333% - 1.5rem); + } +} +@media (max-width: 767px) { + .testimonial-post { + padding: 1.5rem; + } + .testimonial-post .post-content { + padding: 1rem; + padding-left: 0.5rem; + padding-right: 1.5rem; + } + .testimonial-text { + font-size: 13px; + line-height: 1.5em; + padding: 1rem; + } +} +@media only screen and (max-width: 1024px) { + .row { + padding: 2em; + } + h1 { + font-size: 3.5em; + } + p { + text-align: left; + } +} +@media only screen and (max-width: 910px) { + .row { + padding: 1em; + margin: 0 auto; + overflow-x: hidden; + } + .column-med { + -webkit-flex: 0 0 40%; + -moz-flex: 0 0 40%; + -o-flex: 0 0 40%; + flex: 0 0 40%; + } + .hidden-med { + display: none; + } + .column { + -webkit-flex: 0 0 100%; + -moz-flex: 0 0 100%; + -o-flex: 0 0 100%; + flex: 0 0 100%; + box-sizing: border-box; + } + h1 { + font-size: 2em; + letter-spacing: 0.5px; + } + .donate { + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + -o-border-radius: 0px; + border-radius: 0px; + color: #fc7625; + } + .donate:hover { + background-color: #fc7625; + color: white; + } + .nav-bar { + justify-content: space-between; + } + .small-screen-nav { + flex-flow: column-reverse nowrap; + justify-content: flex-end; + } + .img-link { + align-items: center; + display: flex; + height: 100%; + left: 0; + position: absolute; + top: 0; + } + .nav-link { + display: none; + } + .nav-link.dropdown { + position: relative; + padding: 0; + } + .dropdown-menu { + position: static; + width: 100%; + margin: 0 auto; + text-align: left; + } + .dropdown-menu .dropdown-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + padding-left: 3.5rem; + } + .dropdown-toggle::after { + content: " ▾"; + font-size: 2em; + display: flex; + width: 1rem; + } + .nav-link--mobile { + display: block; + width: 100%; + text-align: left; + padding: 1rem; + padding-left: 3%; + } + .nav-link--mobile a { + display: flex; + justify-content: space-between; + width: auto; + padding-right: 4%; + } + .nav-bar-inner { + display: flex; + flex-direction: column-reverse; + width: 100%; + display: flex; + align-items: flex-start; + } + .nav-bar-inner > .nav-link--mobile { + border-bottom: 1px solid #ccc; + } + .nav-link--mobile:last-child { + border-bottom: none; + } + .main-header { + display: block; + position: relative; + background: url(../img/three-participants-at-laptops-min.jpg) #0093b5 no-repeat top center; + -webkit-background-size: contain; + -moz-background-size: contain; + -o-background-size: contain; + background-size: contain; + } + .main-header__text { + position: absolute; + bottom: 0; + max-width: 100%; + width: auto; + padding: 0 1em; + } + .main-content { + margin-top: 5rem; + } + .hidden-sm { + display: none; + } + .hidden-lg { + display: inline-block; + } + .lines-button { + position: absolute; + right: 0; + top: 0; + margin: 0.5rem 0; + padding: 1.5rem 1rem; + transition: 0.3s; + cursor: pointer; + user-select: none; + border-radius: 0.4285714286rem; + } + .lines-button:hover { + opacity: 1; + } + .lines-button:active { + transition: 0; + background: rgba(0, 0, 0, 0.1); + } + .lines { + display: inline-block; + width: 3rem; + height: 0.4285714286rem; + background: #16c1f3; + border-radius: 0.2142857143rem; + transition: 0.3s; + position: relative; + } + .lines:before, .lines:after { + display: inline-block; + width: 3rem; + height: 0.4285714286rem; + background: #16c1f3; + border-radius: 0.2142857143rem; + transition: 0.3s; + position: absolute; + left: 0; + content: ""; + transform-origin: 0.2142857143rem center; + } + .lines:before { + top: 0.75rem; + } + .lines:after { + top: -0.75rem; + } + .lines-button:hover { + opacity: 1; + } + .lines-button:hover .lines:before { + top: 1rem; + } + .lines-button:hover .lines:after { + top: -1rem; + } + .lines-button.x.close .lines { + background: transparent; + } + .lines-button.x.close .lines:before, .lines-button.x.close .lines:after { + transform-origin: 50% 50%; + top: 0; + width: 2.5em; + } + .lines-button.x.close .lines:before { + transform: rotate3d(0, 0, 1, 45deg); + } + .lines-button.x.close .lines:after { + transform: rotate3d(0, 0, 1, -45deg); + } + .contact-us { + display: block; + } + .nav-bar-inner { + padding: 0; + margin-top: 5rem; + } + .social-link { + width: 50px; + } + .social-media, + .hiring { + width: 2.5rem; + height: 2.5rem; + } + .hiring { + width: 3.75rem; + } + .icon-text { + font-size: 0.6rem; + } } -#admin-action .sponsor-benefit-table th, -#applicant-action .sponsor-benefit-table th { - padding: 5px; - column-width: 100px; +@media (max-width: 560px) { + .videowrapper { + position: relative; + width: 100%; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + } + .videowrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + } + table.mentor td { + display: block; + width: 100%; + padding: 0.5rem; + box-sizing: border-box; + } + table.mentor td:first-of-type { + border-right: none; + vertical-align: top; + } } -#admin-action .sponsor-table-cell, -#applicant-action .sponsor-table-cell { - text-align: center; +@media (max-width: 600px) { + .chart-container { + padding: 2rem 0; + } + #myChart { + padding: 0; + } + .sponsor-logo { + width: 38%; + margin: 15px; + } + .sponsor-img { + width: 33%; + margin: 20px; + } } -#admin-action .sponsor-table-prompt, -#applicant-action .sponsor-table-prompt { - padding-left: 5px; +@media (max-width: 411px) { + .large-white-text { + font-size: 1.5em !important; + } } @media only screen and (min-width: 320px) and (max-width: 699px) { - #admin-action .sponsor-benefit-table, - #applicant-action .sponsor-benefit-table { + .sponsor-benefit-table { max-width: 100%; table-layout: inherit; font-size: 13px; } } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { + .main-header__text { + font-size: 1rem; + height: 50vh; + } +} +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { + .main-header { + background-size: cover; + font-size: 14px; + } + .main-content { + font-size: 14px; + } +} +@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { + .main-header__text { + font-size: 1rem; + } + .main-header_text p { + margin-bottom: 20px; + } +} +@media screen and (device-width: 640px) and (device-height: 360px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { + .main-header__text { + font-size: 1rem; + height: 50vh; + } + .main-header { + height: 500px; + background-size: cover; + } +} /*# sourceMappingURL=style.css.map */ diff --git a/static/css/style.css.map b/static/css/style.css.map index 5cabfaa5..f176c97d 100644 --- a/static/css/style.css.map +++ b/static/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/_settings.scss","../sass/style.scss","../sass/_mixins.scss"],"names":[],"mappings":";AAcA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA,OA5BU;EA6BV;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAGF;EACE,OAtDM;EAuDN;EACA;;;AAGF;EACE,OA/DU;EAgEV;;;AAGF;EACE,kBAjEM;EAkEN;;;AAGF;EACE,OAvEU;EAwEV,aAlEuB;;;AAqEzB;EACE,kBA9EU;EA+EV,OA5EM;;AA6EN;EACE;;;AAIJ;EACE;EACA,OAvFU;;;AA0FZ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AC/FF;EACE;EACA;EACA;EACA;EAGA;;AAGA;EAVF;IAWI;;;AAIF;EAfF;IAgBI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE,cDtCM;ECuCN;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,ODnEQ;ECoER;;AAGF;EACE,ODxEQ;ECyER;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,ODhGI;ECiGJ;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EC3HI,iBD4HuB;EC5HvB,cD4HuB;ECxHzB,SDwHyB;EACzB;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;ECvNI,cDwNoB;ECxNpB,WDwNoB;ECpNtB,MDoNsB;EACtB;;;AAGF;EC5NI,iBD6NuB;EC7NvB,cD6NuB;ECzNzB,SDyNyB;EACzB;EACA;EACA;EACA;EACA;;;AAEF;ECpOI,iBDqOuB;ECrOvB,cDqOuB;ECjOzB,SDiOyB;EACzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDrPM;ECsPN;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YDnQM;;;ACsQR;EACE;EACA;EACA,aDpQuB;;;ACuQzB;EACE,OD/QW;;;ACkRb;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;ECtSI,cDuSoB;ECvSpB,WDuSoB;ECvSpB,SDuSoB;ECnStB,MDmSsB;EACtB;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EC1TI,yBD2T+B;EC3T/B,sBD2T+B;EC3T/B,oBD2T+B;ECvTjC,iBDuTiC;EC3T/B,iBD4TuB;EC5TvB,cD4TuB;EC5TvB,YD4TuB;ECxTzB,SDwTyB;EACzB;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EAEE;;AAGA;EALF;IAMI;;;;AAIJ;ECrWI,yBDsW+B;ECtW/B,sBDsW+B;ECtW/B,oBDsW+B;EClWjC,iBDkWiC;ECtW/B,iBDuWuB;ECvWvB,cDuWuB;ECvWvB,YDuWuB;ECnWzB,SDmWyB;EACzB;EACA;EACA;EACA;EACA;EAEA;;;AAGF;ECjXI,yBDkX+B;EClX/B,sBDkX+B;EClX/B,oBDkX+B;EC9WjC,iBD8WiC;EClX/B,iBDmXuB;ECnXvB,cDmXuB;ECnXvB,YDmXuB;EC/WzB,SD+WyB;EACzB;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;IACA;IACA;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;ECpgBE,uBDqgB6B;ECrgB7B,oBDqgB6B;ECrgB7B,kBDqgB6B;ECjgB/B,eDigB+B;EAC/B,OD7gBM;EC8gBN;EACA,kBDzgBa;EC0gBb;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EACE,kBDvhBS;ECwhBT,ODthBI;ECuhBJ;;;AAIJ;EACE,OD7hBU;;;ACgiBZ;EACE;EACA;;;AAGF;EACE,ODriBM;ECsiBN;EACA;;;AAGF;EACE,OD3iBM;EC4iBN;EACA;;;AAGF;EACE,ODjjBM;ECkjBN;EACA;EACA;;;AAGF;EACE,OD1jBW;;;AC6jBb;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;;EAGF;IC3oBE,cD4oBsB;IC5oBtB,WD4oBsB;IC5oBtB,SD4oBsB;ICxoBxB,MDwoBwB;;EAGxB;IACE;;EAGF;ICnpBE,cDopBsB;ICppBtB,WDopBsB;ICppBtB,SDopBsB;IChpBxB,MDgpBwB;IACtB;;EAGF;IACE;IACA;;EAGF;IC7pBE,uBD8pB+B;IC9pB/B,oBD8pB+B;IC9pB/B,kBD8pB+B;IC1pBjC,eD0pBiC;IAC/B,ODhqBW;;ECkqBX;IACE,kBDnqBS;ICoqBT,OD1qBE;;EC8qBN;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IC1vBA,yBD4vBiC;IC5vBjC,sBD4vBiC;IC5vBjC,oBD4vBiC;ICxvBnC,iBDwvBmC;;EAGnC;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IC9xBA;IACA,OFVY;IEWZ;IACA,YFtBW;IEuBX;IACA,YFbW;ICyyBT;AAEA;;EACA;ICpyBF;IACA,OFVY;IEWZ;IACA,YFtBW;IEuBX;IACA,YFbW;IC+yBP;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAIJ;IACE;;EAGE;IACE;;EAGF;IACE;;EAKN;AACE;IACA;AAEA;;EACA;IAEE;IACA;IACA;;EAIF;IACE;;EAGF;IACE;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAEF;AAAA;IAEE;IACA;;EAEF;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAIF;IACE;IACA;IACA;IACA;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;;AAMR;EACE;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACE;IACE;IACA;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDl+BM;;;ACq+BR;EACE;EACA;EACA;EACA;EACA,kBDp+Ba;;;ACu+Bf;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,ODr/Ba;ECs/Bb;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,OD1hCU;EC2hCV;EACA;EACA;EACA;EACA;;AAEA;EACE,ODhiCQ;;ACmiCV;EACE;EACA;;;AAIJ;EACE,OD1iCU;;AC4iCV;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,ODhnCU;;;ACmnCZ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;ECtnCI,uBDunC6B;ECvnC7B,oBDunC6B;ECvnC7B,kBDunC6B;ECnnC/B,eDmnC+B;EAC/B,OD/nCM;ECgoCN;EACA,kBD3nCa;EC4nCb;EACA;;AAEA;EACE,kBDxoCS;ECyoCT,ODvoCI;ECwoCJ;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,kBD1wCU;;;AC6wCZ;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,ODl6CU;ECm6CV;;;AAGF;EACE;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,kBDl9CU;ECm9CV;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;AAEA;;AACA;AAAA;EACE;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;;AAGF;EACE;AAAA;IACE;IACA;IACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/style.scss","../sass/_settings.scss","../sass/forms.scss","../sass/_mixins.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC0BA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA,OArCU;EAsCV;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAGF;EACE,OA/DM;EAgEN;EACA;;;AAGF;EACE,OAxEU;EAyEV;;;AAGF;EACE,kBA1EM;EA2EN;;;AAGF;EACE,OAhFU;EAiFV,aAjEuB;;;AAoEzB;EACE,kBAvFU;EAwFV,OArFM;;AAsFN;EACE;;;AAIJ;EACE;EACA,OAhGU;;;AAmGZ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AD/GF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AEAA;AAAA;AAAA;AAAA;AAUE;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,ODhBS;;ACmBX;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAMN;EACE,ODxCa;ECyCb;;;AAIF;EACE;EACA;EACA,OD/CoB;;ACiDpB;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE,kBDpFS;;ACuFX;EACE;;AAGF;EACE;;;AAKJ;EACE;;;AAGF;AAAA;AAAA;EAGE,kBDnGa;ECoGb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBDtHW;ECuHX;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE,ODhJW;ECiJX;;AAGF;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE,ODtMQ;;ACyMV;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,ODrNI;ECsNJ;EACA,kBDpNW;ECqNX;EACA;;AAEA;EACE,kBD9NO;EC+NP,OD7NE;EC8NF;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA,kBDjTU;;ACmTV;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA,kBDjVU;ECkVV;;AAEA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDhWI;ECiWJ;;;AAOF;EACE;;AAEA;EACE;EACA,kBD7WE;EC8WF,ODjXM;ECkXN;EACA;EACA;;AAEA;EACE,kBDpXA;ECqXA,ODjXK;;ACoXP;EACE;;AAKN;EACE;EACA;;AAIF;EACE,kBDlYW;ECmYX,ODtYI;ECuYJ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBD3YO;EC4YP,ODhZE;ECiZF;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE,ODxZO;ECyZP;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMN;EACE;EACA,OD/boB;;;ACmctB;AAAA;AAAA;EAGE;;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EAEI;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;;AAIJ;EAEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;EAKN;IACE;IACA;IACA;;EAGF;IACE;;;AAKJ;EACE;AAAA;IAEE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;AAAA;IAEE;;EAGF;IACE;;EAGF;IACE;;EAGF;AAAA;AAAA;IAGE;;EAGF;AAAA;IAEE,ODpjBQ;ICqjBR;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;AAAA;IAEE;;;AAKJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAIJ;AAAA;IAEE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;AAAA;IAEE;;EAGF;AAAA;IAEE,ODtpBQ;ICupBR;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;IACA;;EAGF;IACE;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAIJ;IACE;;;AFhrBJ;EACE;EACA,OCHW;EDIX;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,OCrBU;EDsBV;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,OC/CU;EDgDV;;;AAGF;EACE,OCnDW;;;ADsDb;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EAEA;;AAGA;EATF;IAUI;;;AAIF;EAdF;IAeI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE,cCzIM;ED0IN;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,OCvKU;EDwKV;;;AAGF;EACE,OC5KU;ED6KV;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,OCpMM;EDqMN;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;AACA;EGxOI,iBHyOuB;EGzOvB,cHyOuB;EGrOzB,SHqOyB;EACzB;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EGvPI,cHwPoB;EGxPpB,WHwPoB;EGpPtB,MHoPsB;EACtB;;;AAGF;EG5PI,cH6PoB;EG7PpB,WH6PoB;EG7PpB,SH6PoB;EGzPtB,MHyPsB;;;AAGxB;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EGjTI,iBHkTuB;EGlTvB,cHkTuB;EG9SzB,SH8SyB;EACzB;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EGhVI,iBHiVuB;EGjVvB,cHiVuB;EG7UzB,SH6UyB;EACzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBC9VM;ED+VN;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YC5WM;;;AD+WR;EACE;EACA;EACA,aCnWuB;;;ADsWzB;EACE,OCxXW;;;AD2Xb;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EGlZI,cHmZoB;EGnZpB,WHmZoB;EGnZpB,SHmZoB;EG/YtB,MH+YsB;EACtB;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EGtaI,yBHua+B;EGva/B,sBHua+B;EGva/B,oBHua+B;EGnajC,iBHmaiC;EGva/B,iBHwauB;EGxavB,cHwauB;EGxavB,YHwauB;EGpazB,SHoayB;EACzB;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EGncI,yBHoc+B;EGpc/B,sBHoc+B;EGpc/B,oBHoc+B;EGhcjC,iBHgciC;EGpc/B,iBHqcuB;EGrcvB,cHqcuB;EGrcvB,YHqcuB;EGjczB,SHicyB;EACzB;EACA;EACA;EACA;EACA;EACA;;;AAGF;EG9cI,yBH+c+B;EG/c/B,sBH+c+B;EG/c/B,oBH+c+B;EG3cjC,iBH2ciC;EG/c/B,iBHgduB;EGhdvB,cHgduB;EGhdvB,YHgduB;EG5czB,SH4cyB;EACzB;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;IACA;IACA;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;EAGE;EGnmBE,uBHomB6B;EGpmB7B,oBHomB6B;EGpmB7B,kBHomB6B;EGhmB/B,eHgmB+B;EAC/B,OCzmBM;ED0mBN;EACA,kBCxmBa;EDymBb;EACA;EACA;;AAEA;AAAA;AAAA;EACE,kBCnnBS;EDonBT,OClnBI;EDmnBJ;;;AAIJ;EACE,OCznBU;;;AD4nBZ;EACE;EACA;;;AAGF;AACA;EACE,OCloBM;EDmoBN;EACA;;;AAGF;EACE,OCxoBM;EDyoBN;EACA;;;AAGF;EACE,OC9oBM;ED+oBN;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCttBM;;;ADytBR;EACE;EACA;EACA;EACA;EACA,kBC3tBa;;;AD8tBf;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,OC3uBa;ED4uBb;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE,OCzwBU;ED0wBV;EACA;EACA;EACA;EACA;;AAEA;EACE,OC/wBQ;;ADkxBV;EACE;EACA;;;AAIJ;EACE,OCzxBU;;AD2xBV;EACE;;;AAIJ;EACE;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE,OC3jCY;ED4jCZ;EACA;EACA;EACA;;;AAGF;EACE,OCnkCY;EDokCZ;;;AAGF;EACE;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,OCnoCU;EDooCV;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,kBC3qCU;ED4qCV;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;;EAGF;IG9tCE,cH+tCsB;IG/tCtB,WH+tCsB;IG/tCtB,SH+tCsB;IG3tCxB,MH2tCwB;;EAGxB;IACE;;EAGF;IGtuCE,cHuuCsB;IGvuCtB,WHuuCsB;IGvuCtB,SHuuCsB;IGnuCxB,MHmuCwB;IACtB;;EAGF;IACE;IACA;;EAGF;IGhvCE,uBHivC+B;IGjvC/B,oBHivC+B;IGjvC/B,kBHivC+B;IG7uCjC,eH6uCiC;IAC/B,OCnvCW;;EDqvCX;IACE,kBCtvCS;IDuvCT,OC1vCE;;ED8vCN;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IG70CA,yBH80CiC;IG90CjC,sBH80CiC;IG90CjC,oBH80CiC;IG10CnC,iBH00CmC;;EAGnC;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IGh3CA;IACA,OFGY;IEFZ;IACA,YFnBW;IEoBX;IACA,YFPW;IDo3CT;;EAEA;IGp3CF;IACA,OFGY;IEFZ;IACA,YFnBW;IEoBX;IACA,YFPW;IDy3CP;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAIJ;IACE;;EAGE;IACE;;EAGF;IACE;;EAKN;IACE;;EAEA;IAEE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;AAAA;IAEE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;;AAMR;EACE;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;IACA","file":"style.css"} \ No newline at end of file diff --git a/static/sass/_settings.scss b/static/sass/_settings.scss index 1d7d4814..038f5979 100644 --- a/static/sass/_settings.scss +++ b/static/sass/_settings.scss @@ -1,16 +1,28 @@ +// Core SCSS variables for Techtonica project + +// Colors $main-blue: #0093b5; $light-blue: #16c1f3; $dark-blue: #05556d; $white: white; $light-gray: #ccc; $dark-gray: #666; +$focal-orange: #fc7625; // Updated to match application-form button background +$hover-blue: #16c1f3; // New variable for button hover color +$text-color: #000000; // Updated to match rgb(0,0,0) for labels and form border +$form-border-color: rgba(0, 0, 0, 0.559); // New variable for specific form border opacity +$legend-color: rgba(0, 115, 149, 0.8); // New variable for legend color +$radio-wrapper-color: rgba(0, 0, 0, 0.851); // New variable for radio wrapper color +$error-color: #bf0020; // Updated to match invalid state border + +// Effects +$transition: 0.3s; // increase this to see the transformations in slow-motion $thick-dark-text-shadow: 2px 2px 5px $dark-gray; $thin-dark-text-shadow: 1px 1px 1px $dark-gray; $thin-light-text-shadow: 0px 0px 1px $light-gray; -$focal-orange: #fc7625; +// Sizing $button-size: 3rem; -$transition: 0.3s; // increase this to see the transformations in slow-motion body { margin: 0; diff --git a/static/sass/forms.scss b/static/sass/forms.scss index a3c4c5be..04bff1b7 100644 --- a/static/sass/forms.scss +++ b/static/sass/forms.scss @@ -1,238 +1,703 @@ -@import "settings"; - - form { - display: flex; +/* General form components and styling that can be reused across different forms + - general reusable form components & styling + - application-specific styling +*/ + +@use "settings" as *; +@use "mixins" as *; + +// Form wrapper and structure - used by multiple forms +.form-wrapper { + .wrapper { + max-width: 50%; justify-content: center; - align-items: center; - margin: 2rem auto; - width: 75%; - max-width: 150rem; - padding: 3rem; - background-color: white; - border: 1px solid rgb(0, 0, 0); } - .application-page { - justify-content: center; - background-color: $main-blue; - padding: 2rem; + #info-wrapper { + margin-bottom: 2em; + + > fieldset { + box-sizing: border-box; + margin: 1em; + padding: 1em; + border-radius: 6px; + border: 1px solid rgba(0, 0, 0, 0.1); + } + + > fieldset > label { + margin-top: 1em; + margin-bottom: 0.5em; + color: $legend-color; + } + + > fieldset > input[type="text"], + > fieldset > input[type="email"], + > fieldset > input[type="tel"], + > fieldset > input[type="url"], + > fieldset > input[type="number"], + > fieldset > textarea { + min-width: 90%; + margin: auto auto 1em auto; + padding: 0.25em; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + + > fieldset > textarea { + min-height: 6em; + } + } +} + +// Legend styles +legend { + color: $legend-color; + font-size: 20px; +} + +// General radio button styling +.radio-wrapper { + width: 100%; + margin-bottom: 1em; + color: $radio-wrapper-color; + + input[type="radio"] { + width: 50px; } - .application-form .learn-more-wrapper { - display: inline; + label { + color: black; + margin-bottom: 2em; } - .application-form .learn-more-content { - margin: 0.5em 0 0 0; - font-size: large; + &.invalid { + padding: 15px; + border: 2px solid $error-color; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; } +} - .application-form .learn-more-wrapper button { - display: inline; - background-color: white; - font-size: large; - color: $main-blue; - cursor: pointer; - padding: 0; - margin: 0 0 0 0.5em; +#radio-wrapper { + label { + color: black; + margin-bottom: 2em; } - .application-form .learn-more-wrapper button:hover { - background-color: white; - color: $light-blue; + input { + background-color: $light-blue; } - .application-form .learn-more-wrapper button:focus-visible { - padding: 3px; + > input[type="radio"] { + margin: 0; } - .application-page > h1, - .application-page > label { - max-width: 65%; - margin: auto; - text-align: center; + > label { + font-size: smaller; + } +} + +// Button styles +.continue-to-app-btn { + width: 50%; +} + +button.continue-to-app-btn, +button.previous-btn, +button.save-btn { + background-color: $focal-orange; + color: white; + font-size: large; + padding: 1rem; + border-radius: 0.5rem; + display: block; + margin-left: auto; + margin-right: auto; + cursor: pointer; +} + +button.continue-to-app-btn:hover, +button.previous-btn:hover, +button.save-btn:hover { + background-color: $light-blue; + color: white; + transition: 0.3s; +} + +.form-button { + display: flex; + margin: auto; + align-items: center; + justify-content: space-between; +} + +// General checkbox styling +.checkbox-wrapper { + margin-bottom: 1em; + + input[type="checkbox"] { + margin-right: 0.5em; } - legend { - color: rgba(0, 115, 149, 0.8); - font-size: 20px; + label { + cursor: pointer; } +} - .application-form > fieldset { - padding: 2rem; - border: 1px solid rgba(0, 0, 0, 0.559); - border-radius: 0.5rem; - width: 100%; +.checkbox-container { + margin: 25px; + padding-bottom: 30px; + display: flex; + + input#code-of-conduct-checkbox { + margin-right: 15px; } - .application-form > fieldset > label { - margin-bottom: 0.5rem; - font-size: large; + label[for="code-of-conduct-checkbox"] ~ a { + color: $legend-color; + text-decoration: none; } - .application-form > fieldset > input[type="text"], - .application-form > fieldset > input[type="email"], - .application-form > fieldset > input[type="tel"], - .application-form > fieldset > input[type="textarea"] { - box-sizing: border-box; - padding: 1em; - margin-bottom: 2em; - border: 1px solid rgba(0, 0, 0, 0.559); + &.invalid { + padding: 10px; + background-color: rgba(255, 200, 200, 0.1); + border-radius: 4px; + border: 2px solid $error-color; + } +} + +// Optional field styling +span { + font-style: italic; + color: rgba(0, 0, 0, 0.6); +} + +/* Square Payment System Styling */ +.payment-form { + padding: 50px 0px 50px 0px; + width: 100%; + max-width: 1000px; + margin: 40px auto; + display: flex; + justify-content: center; + border-radius: 20px; + align-items: center; +} + +#apple-pay-button { + height: 48px; + width: 100%; + display: inline-block; + -webkit-appearance: -apple-pay-button; + -apple-pay-button-type: plain; + -apple-pay-button-style: black; +} + +#fast-checkout { + background: #fafafa; + color: black; + + h3 { + color: $main-blue; + } + + input { border-radius: 6px; + position: relative; + } + + .wrapper { + position: relative; + } + + button { width: 100%; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + color: $white; + display: inline-block; + background-color: $focal-orange; + text-align: center; + font-size: 1.5em; + + &:hover { + background-color: $light-blue; + color: $white; + transition: 0.3s; + } } - #radio-wrapper label { - color: black; - margin-bottom: 2em; + .border { + color: rgba(0, 0, 0, 0.55); + background: rgba(0, 0, 0, 0.1); + height: 1px; + width: 100%; + margin: 30px 0; + font-size: 12px; + line-height: 20px; + text-transform: uppercase; + position: relative; + + span { + position: absolute; + top: -10px; + background: #fafafa; + padding: 0 10px; + left: calc(50% - 1em - 5px); + } } - #radio-wrapper input { - background-color: $light-blue; +} + +#ach-wrapper { + display: none; + + input:first-of-type { + margin-bottom: 10px; + } +} + +#ach-message { + width: 100%; + margin-top: 11px; + margin-bottom: 11px; + font-size: 14px; + display: inline-block; + color: #bf0020; + + &:empty:before { + content: "\200b"; + } +} + +#payment-flow-message { + width: 100%; + margin-top: 11px; + margin-bottom: 11px; + height: 100px; + display: block; + + &.error { + color: #bf0020; + font-weight: bold; + margin-top: 10px; + font-size: 14px; + line-height: 1.4; } - .continue-to-app-btn { - width: 50%; + &.success { + color: #28a745; + font-weight: bold; + margin-top: 10px; + } +} + +.wrapper { + max-width: 50%; + justify-content: center; +} + +#card-container { + max-width: 387px; + margin: auto; +} + +#payment-page { + padding: 1.5em; + background-color: $main-blue; + + > h1, + > p { + max-width: 65%; + margin: auto; + text-align: center; + margin-bottom: 2rem; + } +} + +// Consulting page form elements +#consulting-list { + list-style-position: inside; + border-style: solid; + border-color: #05556d; + border-width: thick; + padding: 3% 5% 3% 5%; +} + +#consulting-bullet-items { + border-style: solid; + border-color: #05556d; + border-radius: 5px; + padding: 1%; + margin: 1%; + list-style-type: none; +} + +// Application page layout - ONLY used on application form +.application-page { + justify-content: center; + background-color: $main-blue; + padding: 2rem; + + > h1, + > p { + max-width: 65%; + margin: auto; + text-align: center; + } + + > form { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem auto; + width: 75%; + max-width: 150rem; + padding: 3rem; + background-color: $white; + border: 1px solid $text-color; + } +} + +// Application form specific styling - different from general forms +.application-form { + // Learn more functionality - specific to application form + .learn-more-wrapper { + display: inline; + + button { + display: inline; + background-color: $white; + color: $main-blue; + cursor: pointer; + padding: 0; + margin: 0 0 0 0.5em; + + &:hover { + background-color: $white; + color: $hover-blue; + } + + &:focus-visible { + padding: 3px; + } } + } - button.continue-to-app-btn, - button.previous-btn, - button.save-btn { + .learn-more-content { + margin: 0.5em 0 0 0; + font-size: large; + } + + // Application form buttons - larger than general form buttons + button { background-color: $focal-orange; - color: white; + color: $white; font-size: large; padding: 1rem; border-radius: 0.5rem; + margin: auto; display: block; - margin-left: auto; - margin-right: auto; cursor: pointer; - } - - button.continue-to-app-btn:hover, - button.previous-btn:hover, - button.save-btn:hover { - background-color: $light-blue; - color: white; - transition: 0.3s; - } - .form-button { - display: flex; - margin: auto; - align-items: center; - justify-content: space-between; + &:hover { + background-color: $hover-blue; + color: $white; + transition: 0.3s; + } } - @media only screen and (min-width: 320px) and (max-width: 599px) { + // Application form fieldsets - different styling than general forms + > fieldset { + border: 1px solid $form-border-color; + border-radius: 0.5rem; + padding: 2rem; + width: 100%; - html, - body { - overflow-x: hidden; - width: 100%; + > label { + color: $text-color; + font-size: large; } - .column { - padding: 0 1rem; + // Application form inputs - larger padding and margins + > input[type="text"], + > input[type="email"], + > input[type="tel"], + > input[type="date"], + > input[type="number"], + > input[type="url"], + > textarea, + > select { + padding: 1em; + margin-bottom: 2em; + border: 1px solid $form-border-color; + border-radius: 6px; width: 100%; - margin: auto; - overflow-x: hidden; box-sizing: border-box; } - .row, .application-page { - padding: 2em; + > select, + > input[type="checkbox"], + > #radio-wrapper > input[type="radio"] { + cursor: pointer; } - .justify { - text-align: left; + > select { + appearance: none; + background-color: transparent; + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmc+DQogIDxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0xMCwyMzIuN2w0OTAsNTM0LjVwNDkwLTUzNC41SDEweiIgLz4NCjwvc3ZnPg==); + background-repeat: no-repeat; + background-position: right; + background-size: 15px; + background-origin: content-box; } + } +} + +// Application-specific radio wrapper styling +#radio-wrapper { + width: 100%; + color: $radio-wrapper-color; +} + +// Application-specific field hiding +#custom-gender, +#custom-pronouns, +#custom-race-ethnicity { + display: none; +} + +// Application-specific pronouns group +.pronouns-group { + margin-bottom: 1.5em; + + &.invalid { + padding: 15px; + border: 2px solid $error-color; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; + } +} - .large-white-text { - font-size: 1.5em; +/* Form responsive design */ +@media (max-width: 900px) { + .form-wrapper { + .wrapper { + max-width: 75%; } - button.previous-btn, - button.continue-to-app-btn, - button.save-btn { - font-size: smaller; + #info-wrapper { + max-width: 100%; + min-width: none; } + } - .application-form .learn-more-wrapper .learn-more-title, - .application-form .learn-more-wrapper .toggle-icon { - color: $main-blue; - font-size: smaller; - } + .wrapper { + max-width: 75%; + } +} - .application-form .learn-more-wrapper .learn-more-content { - font-size: smaller; +@media (max-width: 600px) { + .form-wrapper { + .wrapper { + max-width: 100%; } - .application-page > h1 { - font-size: 1.5em; - max-width: fit-content; + #info-wrapper { + max-width: 100%; + min-width: none; + + > fieldset { + margin: 0px; + width: 100%; + } } + } + + .payment-form { + margin: 0px; + padding: 30px; + box-sizing: border-box; + } + + .wrapper { + max-width: 100%; + } +} + +// Mobile (320px to 599px) +@media only screen and (min-width: 320px) and (max-width: 599px) { + html, + body { + overflow-x: hidden; + width: 100%; + } + + .column { + padding: 0; + width: 100%; + margin: auto; + overflow-x: hidden; + box-sizing: border-box; + } + + .row, + .application-page { + padding: 2em; + } + + .justify { + text-align: left; + } + + .large-white-text { + font-size: 1.5em; + } + + button.previous-btn, + button.continue-to-app-btn, + button.save-btn { + font-size: smaller; + } + + .application-form .learn-more-wrapper .learn-more-title, + .application-form .learn-more-wrapper .toggle-icon { + color: $main-blue; + font-size: smaller; + } + + .application-form .learn-more-wrapper .learn-more-content { + font-size: smaller; + } + + .application-page > h1 { + font-size: 1.5em; + max-width: fit-content; + } + + .application-page > form { + width: initial; + margin-bottom: 2rem; + padding: 1.5rem; + } + + legend { + font-size: 18px; + } + + .application-form > fieldset { + min-width: 95%; + word-wrap: break-word; + padding: 1.5rem; + margin: 0; + } + + .application-form > fieldset > label { + font-size: smaller; + } + + .form-button { + gap: 0.5em; + margin: auto; + } + + #radio-wrapper > input[type="radio"] { + margin: 0; + } + + #radio-wrapper > label, + .application-form > fieldset > label { + font-size: smaller; + } +} + +// Application form specific responsive design +@media only screen and (min-width: 320px) and (max-width: 599px) { + .column { + padding: 0; + } + + .application-page { + padding: 2rem 0; - .application-page > form { - width: inherit; + > form { + width: initial; margin-bottom: 2rem; padding: 1.5rem; } - legend { - font-size: 18px; + > h1 { + font-size: 1.5em; + max-width: fit-content; } + } - .application-form > fieldset { - min-width: 95%; - word-wrap: break-word; - padding: 1.5rem; - margin: 0; - } + html, + body { + overflow-x: hidden; + width: 100%; + } - .application-form > fieldset > label { - font-size: smaller; - } + legend { + font-size: 18px; + } - .form-button { - gap: 0.5em; - margin: auto; - } + .application-form > fieldset { + min-width: 95%; + word-wrap: break-word; + padding: 1.5rem; + margin: 0; } - @media only screen and (min-width: 600px) and (max-width: 910px) { - html, - body { - overflow-x: hidden; - width: 100%; - } + #radio-wrapper > input[type="radio"] { + margin: 0; + } - .column { - padding: 0 1rem; - width: 100%; - margin: auto; - overflow-x: hidden; - box-sizing: border-box; - } + #radio-wrapper > label, + .application-form > fieldset > label { + font-size: smaller; + } - .row { - padding: 2em; - } + .application-form .learn-more-wrapper .learn-more-title, + .application-form .learn-more-wrapper .toggle-icon { + color: $main-blue; + font-size: smaller; + } - .application-page { - padding: 2em 0; - } + .application-form .learn-more-wrapper .learn-more-content { + font-size: smaller; + } +} - .application-page > h1 { - font-size: 2em; - max-width: fit-content; - } +@media only screen and (min-width: 600px) and (max-width: 910px) { + .column { + padding: 0; + } + + html, + body { + overflow-x: hidden; + width: 100%; + } + + .application-page { + padding: 2rem 0; - .application-page > form { + > form { width: initial; margin-bottom: 2rem; } - legend { - font-size: 24px; + > h1 { + font-size: 2em; + max-width: fit-content; } - } \ No newline at end of file + } + + legend { + font-size: 24px; + } +} \ No newline at end of file diff --git a/static/sass/style.scss b/static/sass/style.scss index b59e60ce..82df250b 100644 --- a/static/sass/style.scss +++ b/static/sass/style.scss @@ -1,5 +1,109 @@ +/* Main stylesheet for Techtonica website + - global styles + - global layout + - global navigation + - global validation + - global typography + - imports all component stylesheets*/ + @use "settings" as *; @use "mixins" as *; +@use "forms" as *; + +body { + font-family: "lato", helvetica, sans-serif; + color: $text-color; + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 1.2em; + line-height: 1.4em; +} + +h1, h2, h3, h4, h5, h6 { + margin: 1.5rem 0; + color: $main-blue; + line-height: 1.3em; + font-weight: 700; + font-family: "lato", helvetica, sans-serif; +} + +h1, h2 { + letter-spacing: 2px; +} + +h3, h4, h5, h6 { + letter-spacing: 1px; +} + +h1 { + color: white; + font-size: 4em; + letter-spacing: 4px; +} + +p { + text-align: justify; + font-family: "lato", helvetica, sans-serif; +} + +a { + color: $main-blue; + text-decoration: none; +} + +a:hover { + color: $light-blue; +} + +button { + background-color: white; + border: 0; +} + +// Utility classes +.blue-h1 { + color: #05556d; + text-shadow: 0px 0px 1px #ccc; +} + +.blue-background { + background-color: #0093b5; + color: white; + + a { + color: white; + } + + h3 { + color: white; + } +} + +.white-background { + background-color: white; + color: #0093b5; +} + +.centered { + text-align: center; + + p { + text-align: center; + } +} + +.hidden-lg { + display: none; +} + +.hidden-med { + display: none; +} + +.hidden-sm { + display: none; +} // New Sponsor Tiers Design .sponsor-tiers-container { @@ -7,7 +111,6 @@ gap: 2rem; margin: 3rem 0; padding: 2rem 2rem; - // Default to 4 columns for wider screens grid-template-columns: repeat(4, 1fr); @@ -31,7 +134,6 @@ position: relative; overflow: hidden; - &:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(5, 85, 109, 1); @@ -56,69 +158,68 @@ } } } +} - .tier-header { - text-align: center; - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 2px solid $dark-blue; - } - - .tier-name { - font-size: 1.8rem; - font-weight: 400; - color: $dark-blue; - margin-bottom: 0.5rem; - } - - .tier-description { - color: $dark-blue; - font-size: 0.95rem; - line-height: 1.4; - text-align: center; - } +.tier-header { + text-align: center; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 2px solid $dark-blue; +} - .tier-features { - list-style: none; - margin: 1.5rem 0; +.tier-name { + font-size: 1.8rem; + font-weight: 400; + color: $dark-blue; + margin-bottom: 0.5rem; +} - li { - padding: 0.75rem 0; - display: flex; - align-items: flex-start; - gap: 0.75rem; - color: #000; - font-size: 0.95rem; - line-height: 1.5; - font-weight: 200; +.tier-description { + color: $dark-blue; + font-size: 0.95rem; + line-height: 1.4; + text-align: center; +} - &::before { - content: '✓'; - color: $main-blue; - font-weight: bold; - font-size: 1.1rem; - min-width: 20px; - } +.tier-features { + list-style: none; + margin: 1.5rem 0; - .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; - } + li { + padding: 0.75rem 0; + display: flex; + align-items: flex-start; + gap: 0.75rem; + color: #000; + font-size: 0.95rem; + line-height: 1.5; + font-weight: 200; + + &::before { + content: '✓'; + color: $main-blue; + font-weight: bold; + font-size: 1.1rem; + min-width: 20px; } - } - .tier-cta { - text-align: center; - margin-top: 2rem; + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } } +} +.tier-cta { + text-align: center; + margin-top: 2rem; } // Action Buttons @@ -128,9 +229,17 @@ justify-content: center; margin: 3rem 0; flex-wrap: wrap; - align-items: center + align-items: center; +} + +// Layout components +.container { + max-width: 960px; + margin: 0 auto; + padding: 1rem; } +/* Layout system */ .row { @include prefix(display, flex, webkit moz); flex-flow: row wrap; @@ -142,6 +251,24 @@ align-items: center; } +.row__baseline { + align-items: baseline; +} + +.column { + @include prefix(flex, 1, webkit moz); + padding: 0 1rem; +} + +.column-med { + @include prefix(flex, 0 0 40%, webkit moz o); +} + +.staff-team { + align-items: flex-start; +} + +// Testimonials .top-testimonials { display: flex; justify-content: center; @@ -185,57 +312,38 @@ padding-bottom: 1rem; } -@media (min-width: 768px) { - .testimonial-post { - width: calc(50% - 1.5rem); - } +/* Chart and data visualization */ +.chart-container { + @include prefix(display, flex, webkit moz); + flex-flow: row wrap; + justify-content: space-around; + background-color: rgba(0, 147, 181, 1); + color: white; + padding: 3rem; } -@media (min-width: 1024px) { - .testimonial-post { - width: calc(33.333% - 1.5rem); - } +#myChart { + display: block; + max-width: 100%; + height: auto; } -@media (max-width: 767px) { - .testimonial-post { - padding: 1.5rem; - } - - .testimonial-post .post-content { - padding: 1rem; - padding-left: 0.5rem; - padding-right: 1.5rem; - } - - .testimonial-text { - font-size: 13px; - line-height: 1.5em; - padding: 1rem; +@media screen and (max-width: 2880px) { + #myChart { + width: 2880px; + height: 1800px; } } -.staff-team { - align-items: flex-start; -} - -.row__baseline { - align-items: baseline; -} - -.column { - @include prefix(flex, 1, webkit moz); - padding: 0 1rem; +#chartcontainer { + position: relative; + min-height: auto; + width: 100%; + display: flex; + flex-grow: 1; } -.chart-container { - @include prefix(display, flex, webkit moz); - flex-flow: row wrap; - justify-content: space-around; - background-color: rgba(0, 147, 181, 1); - color: white; - padding: 3rem; -} +/* Navigation system */ .nav-bar { @include prefix(display, inline-flex, webkit moz); flex-flow: row-reverse wrap; @@ -313,9 +421,9 @@ padding-left: 1.25rem; } +/* Main content areas */ .mc-closeModal { - text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, - 1px 1px 0 #000; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .main-content { @@ -329,8 +437,7 @@ justify-content: flex-end; width: 100%; height: 75vh; - background: url(../img/three-participants-at-laptops-min.jpg) $main-blue - no-repeat top right fixed; + background: url(../img/three-participants-at-laptops-min.jpg) $main-blue no-repeat top right fixed; background-size: cover; } @@ -342,25 +449,12 @@ border-top: 5px solid #007395cc; } -#myChart { - display: block; - max-width: 100%; - height: auto; -} - -@media screen and (max-width: 2880px) { - #myChart { - width: 2880px; - height: 1800px; - } -} - .main-header__header { - // Responsive font-size fomula, min size 28px on 320px width screen. font-size: calc(28px + 24 * (100vw - 320px) / 960); +} - // Caps max fontsize above x-large-screen breakpoint. - @media only screen and (min-width: 1200px) { +@media only screen and (min-width: 1200px) { + .main-header__header { font-size: 3.5rem; } } @@ -372,8 +466,7 @@ justify-content: flex-end; width: 100%; height: 100vh; - background: url(../img/2024-H2-Launch-Celebration-min.png) $main-blue - no-repeat top fixed; + background: url(../img/2024-H2-Launch-Celebration-min.png) $main-blue no-repeat top fixed; background-size: cover; } @@ -389,21 +482,12 @@ width: 100%; } -.sponsor-logo { - width: 20%; - margin: 25px; -} - -.sponsor-img { - width: 10%; - margin: 25px; -} - #consulting-hero { width: 100%; padding-top: 5%; } +/* Image and sizing utilities */ .full-width-img { width: 100%; max-width: 2440px; @@ -456,7 +540,6 @@ } .resize-200px { - /* Ensure each teams image is square */ object-fit: cover; width: 200px; max-height: 200px; @@ -487,6 +570,17 @@ top: 150px; } +.sponsor-logo { + width: 20%; + margin: 25px; +} + +.sponsor-img { + width: 10%; + margin: 25px; +} + +/* Social media and contact elements */ .social-media, .hiring { width: 3rem; @@ -499,7 +593,7 @@ } .icon-text { - font-size: 0.7rem; /* Smaller text size */ + font-size: 0.7rem; text-align: center; line-height: 1.2; margin-top: 0.25rem; @@ -511,6 +605,7 @@ justify-content: center; gap: 1rem; } + .social-link { display: flex; flex-direction: column; @@ -520,9 +615,9 @@ width: 60px; } +/* Interactive buttons and elements */ .contact-us, .donate, -.tier-button, .orange-button { margin-bottom: 24px; @include prefix(border-radius, 8px, webkit moz o); @@ -549,6 +644,7 @@ padding: 0.75em 1.5em; } +/* Text styling and content elements */ #quotes { color: $white; font-size: 2em; @@ -568,10 +664,6 @@ text-align: center; } -a:hover { - color: $light-blue; -} - .sponsor-p { font-size: 20px; line-height: 35px; @@ -590,10 +682,7 @@ a:hover { padding: 5%; } -.hidden-lg { - display: none; -} - +/* Video and media elements */ iframe#youtubeiframe { width: 560px; height: 315px; @@ -602,6 +691,15 @@ iframe#youtubeiframe { padding-top: 0.5rem; } +.videowrapper { + max-width: 560px; + max-height: 315px; + margin-right: auto; + margin-left: auto; + margin-bottom: 2rem; +} + +/* Table styling */ table.mentor { border-top: 1px solid #000; border-left: 1px solid #000; @@ -622,380 +720,17 @@ table.mentor { } } -#chartcontainer { - position: relative; - min-height: auto; - width: 100%; - display: flex; - flex-grow: 1; -} - -.videowrapper { - max-width: 560px; /* you have to have a size or this method doesn't work */ - max-height: 315px; - margin-right: auto; - margin-left: auto; - margin-bottom: 2rem; -} - -@media only screen and (max-width: 1024px) { - .row { - padding: 2em; - } - - h1 { - font-size: 3.5em; - } - - p { - text-align: left; - } -} - -@media only screen and (max-width: 910px) { - .row { - padding: 1em; - margin: 0 auto; - overflow-x: hidden; - } - - .column-med { - @include prefix(flex, 0 0 40%, webkit moz o); - } - - .hidden-med { - display: none; - } - - .column { - @include prefix(flex, 0 0 100%, webkit moz o); - box-sizing: border-box; - } - - h1 { - font-size: 2em; - letter-spacing: 0.5px; - } - - .donate { - @include prefix(border-radius, 0px, webkit moz o); - color: $focal-orange; - - &:hover { - background-color: $focal-orange; - color: $white; - } - } - - .nav-bar { - justify-content: space-between; - } - - .small-screen-nav { - flex-flow: column-reverse nowrap; - justify-content: flex-end; - } - - .img-link { - align-items: center; - display: flex; - height: 100%; - left: 0; - position: absolute; - top: 0; - } - - .nav-link { - display: none; - } - - .nav-link.dropdown { - position: relative; - padding: 0; - } - - .dropdown-menu { - position: static; - width: 100%; - margin: 0 auto; - text-align: left; - } - - .dropdown-menu .dropdown-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - padding-left: 3.5rem; - } - - .dropdown-toggle::after { - content: " ▾"; - font-size: 2em; - display: flex; - width: 1rem; - } - - .nav-link--mobile { - display: block; - width: 100%; - text-align: left; - padding: 1rem; - padding-left: 3%; - } - - .nav-link--mobile a { - display: flex; - justify-content: space-between; - width: auto; - padding-right: 4%; - } - - .nav-bar-inner { - display: flex; - flex-direction: column-reverse; - width: 100%; - display: flex; - align-items: flex-start; - } - - .nav-bar-inner > .nav-link--mobile { - border-bottom: 1px solid $light-gray; - } - - .nav-link--mobile:last-child { - border-bottom: none; - } - - .main-header { - display: block; - position: relative; - background: url(../img/three-participants-at-laptops-min.jpg) $main-blue - no-repeat top center; - @include prefix(background-size, contain, webkit moz o); - } - - .main-header__text { - position: absolute; - bottom: 0; - max-width: 100%; - width: auto; - padding: 0 1em; - } - - .main-content { - margin-top: 5rem; - } - - .hidden-sm { - display: none; - } - - .hidden-lg { - display: inline-block; - } - - .lines-button { - position: absolute; - right: 0; - top: 0; - margin: 0.5rem 0; - padding: calc($button-size / 2) calc($button-size / 3); - transition: 0.3s; - cursor: pointer; - user-select: none; - border-radius: calc($button-size / 7); - - &:hover { - opacity: 1; - } - - &:active { - transition: 0; - background: rgba(0, 0, 0, 0.1); - } - } - - .lines { - //create middle line - @include line; - position: relative; - - /*create the upper and lower lines as pseudo-elements of the middle line*/ - &:before, - &:after { - @include line; - position: absolute; - left: 0; - content: ""; - transform-origin: calc($button-size / 14) center; - } - - &:before { - top: calc($button-size / 4); - } - - &:after { - top: calc(-#{$button-size} / 4); - } - } - - .lines-button:hover { - opacity: 1; - - .lines { - &:before { - top: calc($button-size / 3); - } - - &:after { - top: calc(-#{$button-size} / 3); - } - } - } - - .lines-button.x.close .lines { - /*hide the middle line*/ - background: transparent; - - /*overlay the lines by setting both their top values to 0*/ - &:before, - &:after { - transform-origin: 50% 50%; - top: 0; - width: 2.5em; - } - - // rotate the lines to form the x shape - &:before { - transform: rotate3d(0, 0, 1, 45deg); - } - - &:after { - transform: rotate3d(0, 0, 1, -45deg); - } - } - - .contact-us { - display: block; - } - - .nav-bar-inner { - padding: 0; - margin-top: 5rem; - } - - .social-link { - width: 50px; /* Slightly smaller width for mobile */ - } - .social-media, - .hiring { - width: 2.5rem; - height: 2.5rem; - } - .hiring { - width: 3.75rem; - } - .icon-text { - font-size: 0.6rem; /* Even smaller text for mobile */ - } -} - -// For responsive embedded video size on mobile view -@media (max-width: 560px) { - .videowrapper { - position: relative; - width: 100%; - padding-bottom: 56.25%; // 16:9 aspect ratio - height: 0; - overflow: hidden; - } - - // Responsive iframe - .videowrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; // Remove default border - } - - table.mentor { - td { - display: block; // Make table cells stack vertically - width: 100%; // Let cells take the full width - padding: 0.5rem; // Adjust padding for smaller screens - box-sizing: border-box; // Ensure consistent border sizing - - &:first-of-type { - border-right: none; // Remove unnecessary border - vertical-align: top; // Retain alignment - } - } - } -} - -@media (max-width: 411px) { - .large-white-text { - font-size: 1.5em !important; - } -} - -/* iphone 4 and 4s media query */ -@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { - .main-header__text { - font-size: 1rem; - height: 50vh; - } -} - -/* iphone 4 and 4s landscape media query */ -@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { - .main-header { - background-size: cover; - font-size: 14px; - } - - .main-content { - font-size: 14px; - } -} - -/* Samsung Galaxy s5 portrait media query */ -@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { - .main-header__text { - font-size: 1rem; - } - - .main-header_text p { - margin-bottom: 20px; - } -} - -/* Samsung Galaxy s5 landscape media query */ -@media screen and (device-width: 640px) and (device-height: 360px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { - .main-header__text { - font-size: 1rem; - height: 50vh; - } - - .main-header { - height: 500px; - background-size: cover; - } -} - -.progress-bg { - margin: 0 auto; - width: 65%; - height: 78px; - border-radius: 10px; - text-align: center; - -moz-box-shadow: inset 0 0 10px $light-gray; - -webkit-box-shadow: inset 0 0 10px black; - box-shadow: inset 0 0 10px black; - background-color: $white; +/* Progress indicators */ +.progress-bg { + margin: 0 auto; + width: 65%; + height: 78px; + border-radius: 10px; + text-align: center; + -moz-box-shadow: inset 0 0 10px $light-gray; + -webkit-box-shadow: inset 0 0 10px black; + box-shadow: inset 0 0 10px black; + background-color: $white; } .progress-bar { @@ -1006,8 +741,7 @@ table.mentor { background-color: $focal-orange; } -.progress-bg h3.goal, -.progress-bg h3.raised { +.progress-bg h3.goal, .progress-bg h3.raised { line-height: 78px; margin: 0; padding: 0; @@ -1031,8 +765,7 @@ table.mentor { text-align: center; } -/* Events Stuff */ - +/* Events and content sections */ .event-item { max-width: 30%; flex-basis: 25%; @@ -1043,10 +776,7 @@ table.mentor { font-size: 1rem; } -.blue-background h3 { - color: white; -} - +/* Collapsible content */ .collapsible { color: $main-blue; cursor: pointer; @@ -1078,6 +808,7 @@ table.mentor { display: none; } +/* List and content styling */ ul.hidden-bullets { list-style-type: none; padding-inline-start: 0; @@ -1091,313 +822,298 @@ p.press-release-bold { font-style: bold; } -/* Square Payment Styling */ - -.payment-form { - padding: 50px 0px 50px 0px; - width: 100%; - max-width: 1000px; - margin: 40px auto; - display: flex; - justify-content: center; - border-radius: 20px; -} - -.payment-form { - align-items: center; +/* News page styling */ +#news-title { + padding: 0; } -#apple-pay-button { - height: 48px; +/* Sponsor page styling */ +.sponsor-benefit-table { + margin-right: auto; + margin-left: auto; width: 100%; - display: inline-block; - -webkit-appearance: -apple-pay-button; - -apple-pay-button-type: plain; - -apple-pay-button-style: black; -} - -/* Fix for contact link visibility on job form page */ -#payment-page p a { - color: #ffffff !important; - text-decoration: underline; - font-weight: bold; -} - -#payment-page p a:hover { - color: #16c1f3 !important; - text-decoration: underline; } -#fast-checkout { - background: #fafafa; - color: black; +.sponsor-benefit-table, +.sponsor-benefit-table td { + border: 1px solid $main-blue; + border-collapse: collapse; } -#fast-checkout h3 { - color: $main-blue; +.sponsor-benefit-table th { + padding: 5px; + column-width: 100px; } -#fast-checkout input { - border-radius: 6px; - position: relative; +.sponsor-table-cell { + text-align: center; } -#fast-checkout .wrapper { - position: relative; +.sponsor-table-prompt { + padding-left: 5px; } -#fast-checkout button { +/* Admin Dashboard styling */ +.admin-nav-bar { + -webkit-display: inline-flex; + -moz-display: inline-flex; + display: inline-flex; + flex-flow: row-reverse wrap; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + margin-bottom: 0; width: 100%; + height: 5rem; + background-color: white; + box-shadow: 0 0 8px 8px #ccc; + z-index: 100; } -#fast-checkout button { - @include prefix(border-radius, 8px, webkit moz o); - color: $white; - display: inline-block; - background-color: $focal-orange; - text-align: center; - font-size: 1.5em; - - &:hover { - background-color: $light-blue; - color: $white; - transition: 0.3s; - } +.admin-nav-bar * { + margin: 0.5em; } -#fast-checkout .border { - color: rgba(0, 0, 0, 0.55); - background: rgba(0, 0, 0, 0.1); - height: 1px; - width: 100%; - margin: 30px 0; - font-size: 12px; - line-height: 20px; - text-transform: uppercase; - position: relative; +.main-content:has(.admin-container) { + margin-top: 0; } -#fast-checkout .border span { - position: absolute; - top: -10px; - background: #fafafa; - padding: 0 10px; - left: calc(50% - 1em - 5px); +.admin-button { + font-size: medium; + padding: 1em; + box-shadow: 0 3px 5px 1px #ccc; + border-radius: 5px; } -#ach-wrapper { - display: none; +.admin-container { + display: flex; + flex-direction: column; + margin: 3em 0; + background-color: #f1f1f1; } -#ach-wrapper input:first-of-type { - margin-bottom: 10px; +.quick-stats { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 3em; } -#ach-message { - width: 100%; - margin-top: 11px; - margin-bottom: 11px; - font-size: 14px; - display: inline-block; - color: #bf0020; +.quick-stats-header { + display: flex; + justify-content: space-between; + min-width: 300px; } -#ach-message:empty:before, -#message:empty:before { - content: "\200b"; +.admin-box { + flex-grow: 2; + background-color: white; + border-radius: 8px; + box-shadow: 0 3px 5px 1px #ccc; + margin: 1em; + padding: 0.5em 1em; } -#payment-flow-message { - width: 100%; - margin-top: 11px; - margin-bottom: 11px; - height: 100px; - display: block; +.quick-stats .admin-box { + max-width: 350px; } -#payment-flow-message.error { - color: #bf0020; +.quick-stats-percent { font-weight: bold; - margin-top: 10px; - font-size: 14px; - line-height: 1.4; } -#payment-flow-message.success { - color: #28a745; - font-weight: bold; - margin-top: 10px; +.status-overview { + display: flex; + flex-direction: column; } -.wrapper { - max-width: 50%; +.attention-overview { + display: flex; + flex-direction: row; justify-content: center; } -#card-container { - max-width: 387px; - margin: auto; +.status-overview-info, +.recent-applicant-info, +.attention-overview { + margin-bottom: 2em; } -#info-wrapper { - margin-bottom: 2em; +.admin-box > label { + display: flex; + justify-content: space-between; } -#info-wrapper > fieldset { - box-sizing: border-box; - margin: 1em; - padding: 1em; +.admin-subtitle { + color: gray; +} - border-radius: 6px; - border: 1px solid rgba(0, 0, 0, 0.1); +.attention-box { + display: flex; + flex-direction: column; + align-items: center; + width: 150px; + text-align: center; + margin: 20px; } -legend { - color: #007395cc; +progress { + background-color: white; + width: 100%; + height: 1em; + border-radius: 20px; + margin-bottom: 2em; } -#info-wrapper > fieldset > label { - margin-top: 1em; - margin-bottom: 0.5em; - color: #007395cc; +progress::before { + position: absolute; + width: 30%; + text-align: center; + font-size: 18px; + color: white; } -#info-wrapper > fieldset > input[type="text"], -#info-wrapper > fieldset > input[type="email"], -#info-wrapper > fieldset > textarea { - min-width: 90%; - margin: auto auto 1em auto; - padding: 0.25em; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 6px; +#submitted::-webkit-progress-value { + background-color: rgb(155, 225, 255); + border-radius: 20px; } -#info-wrapper > fieldset > textarea { - min-height: 6em; +#review::-webkit-progress-value { + background-color: rgb(252, 237, 140); + border-radius: 20px; } -input[type="radio"] { - width: 50px; +#accepted::-webkit-progress-value { + background-color: rgb(155, 255, 180); + border-radius: 20px; } -#radio-wrapper { - width: 100%; - margin-bottom: 1em; - color: #007395cc; +#rejected::-webkit-progress-value { + background-color: rgb(252, 202, 211); + border-radius: 20px; } -#payment-page { - padding: 1.5em; - background-color: $main-blue; +progress::-webkit-progress-bar { + background-color: gray; + border-radius: 20px; } -#payment-page > h1, -#payment-page > p { - max-width: 65%; - margin: auto; - text-align: center; - margin-bottom: 2rem; +.recent-applicants-container { + overflow-x: auto; } -#consulting-list { - list-style-position: inside; - border-style: solid; - border-color: #05556d; - border-width: thick; - padding: 3% 5% 3% 5%; +.recent-applicants { + width: 100%; + border-collapse: collapse; } -#consulting-bullet-items { + +.recent-applicants td { + border-width: 2px 0 0 0; + border-color: rgb(228, 228, 228); border-style: solid; - border-color: #05556d; - border-radius: 5px; - padding: 1%; - margin: 1%; - list-style-type: none; + border-collapse: collapse; + padding: 2em 2em; } -.checkbox-container { - margin: 25px; - padding-bottom: 30px; - display: flex; +.recent-applicants th { + text-align: left; + color: gray; + padding: 2em 2em; } -input#code-of-conduct-checkbox { - margin-right: 15px; +.status { + padding: 0.5em; + border-radius: 50px; + text-align: center; + font-weight: bold; + width: fit-content; } -label[for="code-of-conduct-checkbox"] ~ a { - color: #007395cc; - text-decoration: none; +#review-text, +#applicant-action { + color: rgb(204, 150, 0); + background-color: rgb(252, 237, 140); } -@media (max-width: 900px) { - .wrapper { - max-width: 75%; - } - - #info-wrapper { - max-width: 100%; - min-width: none; - } +#submitted-text { + color: rgb(0, 58, 108); + background-color: rgb(155, 225, 255); } -@media (max-width: 600px) { - .chart-container { - padding: 2rem 0; - } - - #myChart { - padding: 0; - } +#accepted-text { + color: rgb(0, 98, 24); + background-color: rgb(155, 255, 180); +} - .payment-form { - margin: 0px; - padding: 30px; - box-sizing: border-box; - } +#rejected-text, +#admin-action { + color: rgb(138, 0, 25); + background-color: rgb(252, 202, 211); +} - .wrapper { - max-width: 100%; - } +#admin-action, +#applicant-action { + padding: 5px; + border-radius: 10px; +} - #info-wrapper { - max-width: 100%; - min-width: none; - } +/* Form validation styling */ +input.invalid, +textarea.invalid { + border: 2px solid $error-color !important; + background-color: rgba(255, 200, 200, 0.1); +} - #info-wrapper > fieldset { - margin: 0px; - width: 100%; - } +.invalid { + border: 2px solid $error-color !important; + background-color: rgba(191, 0, 32, 0.1) !important; + box-shadow: 0 0 5px rgba(191, 0, 32, 0.3) !important; +} - .sponsor-logo { - width: 38%; - margin: 15px; - } +.pronouns-group.invalid { + padding: 15px; + border: 2px solid $error-color; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; +} - .sponsor-img { - width: 33%; - margin: 20px; - } +.radio-wrapper.invalid { + padding: 15px; + border: 2px solid $error-color; + border-radius: 8px; + background-color: rgba(191, 0, 32, 0.05); + margin-bottom: 1em; } -/* Invalid radio wrapper styling */ -#radio-wrapper.invalid { +.checkbox-container.invalid { padding: 10px; background-color: rgba(255, 200, 200, 0.1); border-radius: 4px; border: 2px solid #bf0020; } -/* Invalid checkbox container styling */ -.checkbox-container.invalid { - padding: 10px; - background-color: rgba(255, 200, 200, 0.1); - border-radius: 4px; - border: 2px solid #bf0020; +.validation-message { + color: $error-color; + font-size: 14px; + font-weight: bold; + margin-top: 5px; + display: block; +} + +.required-indicator { + color: $error-color; + font-weight: bold; +} + +.invalid:focus { + outline: 2px solid $error-color; + outline-offset: 2px; } -/* Disabled button styling */ +/* Button states */ button:disabled, button.disabled { opacity: 0.6; @@ -1448,13 +1164,6 @@ button.disabled { margin-top: 30px; } -/* Existing styles for invalid fields, etc. */ -input.invalid, -textarea.invalid { - border: 2px solid #bf0020 !important; - background-color: rgba(255, 200, 200, 0.1); -} - /* Processing state styling */ .processing { position: relative; @@ -1475,7 +1184,6 @@ textarea.invalid { z-index: 10; } -/* Spinner animation for processing state */ @keyframes spinner { to { transform: rotate(360deg); @@ -1494,250 +1202,400 @@ textarea.invalid { vertical-align: middle; } -/* Admin Dashboard styling */ - -.admin-nav-bar { - -webkit-display: inline-flex; - -moz-display: inline-flex; - display: inline-flex; - flex-flow: row-reverse wrap; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; - left: 0; - margin-bottom: 0; +/* Responsive design */ +@media (min-width: 768px) { + .testimonial-post { + width: calc(50% - 1.5rem); + } } -/* News Page Styling */ -#news-title { - padding: 0; +@media (min-width: 1024px) { + .testimonial-post { + width: calc(33.333% - 1.5rem); + } } -/* Sponsor Page Styling */ -.sponsor-benefit-table { - margin-right: auto; - margin-left: auto; - width: 100%; - height: 5rem; - background-color: white; - box-shadow: 0 0 8px 8px #ccc; - z-index: 100; -} +@media (max-width: 767px) { + .testimonial-post { + padding: 1.5rem; + } -.admin-nav-bar * { - margin: 0.5em; -} + .testimonial-post .post-content { + padding: 1rem; + padding-left: 0.5rem; + padding-right: 1.5rem; + } -.main-content:has(.admin-container) { - margin-top: 0; + .testimonial-text { + font-size: 13px; + line-height: 1.5em; + padding: 1rem; + } } -.admin-button { - font-size: medium; - padding: 1em; - box-shadow: 0 3px 5px 1px #ccc; - border-radius: 5px; -} +@media only screen and (max-width: 1024px) { + .row { + padding: 2em; + } -.admin-container { - display: flex; - flex-direction: column; - margin: 3em 0; - background-color: #f1f1f1; -} + h1 { + font-size: 3.5em; + } -.quick-stats { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-top: 3em; + p { + text-align: left; + } } -.quick-stats-header { - display: flex; - justify-content: space-between; - min-width: 300px; -} +@media only screen and (max-width: 910px) { + .row { + padding: 1em; + margin: 0 auto; + overflow-x: hidden; + } + + .column-med { + @include prefix(flex, 0 0 40%, webkit moz o); + } + + .hidden-med { + display: none; + } + + .column { + @include prefix(flex, 0 0 100%, webkit moz o); + box-sizing: border-box; + } + + h1 { + font-size: 2em; + letter-spacing: 0.5px; + } + + .donate { + @include prefix(border-radius, 0px, webkit moz o); + color: $focal-orange; + + &:hover { + background-color: $focal-orange; + color: $white; + } + } + + .nav-bar { + justify-content: space-between; + } + + .small-screen-nav { + flex-flow: column-reverse nowrap; + justify-content: flex-end; + } + + .img-link { + align-items: center; + display: flex; + height: 100%; + left: 0; + position: absolute; + top: 0; + } + + .nav-link { + display: none; + } + + .nav-link.dropdown { + position: relative; + padding: 0; + } + + .dropdown-menu { + position: static; + width: 100%; + margin: 0 auto; + text-align: left; + } + + .dropdown-menu .dropdown-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + padding-left: 3.5rem; + } + + .dropdown-toggle::after { + content: " ▾"; + font-size: 2em; + display: flex; + width: 1rem; + } + + .nav-link--mobile { + display: block; + width: 100%; + text-align: left; + padding: 1rem; + padding-left: 3%; + } + + .nav-link--mobile a { + display: flex; + justify-content: space-between; + width: auto; + padding-right: 4%; + } + + .nav-bar-inner { + display: flex; + flex-direction: column-reverse; + width: 100%; + display: flex; + align-items: flex-start; + } + + .nav-bar-inner > .nav-link--mobile { + border-bottom: 1px solid $light-gray; + } + + .nav-link--mobile:last-child { + border-bottom: none; + } + + .main-header { + display: block; + position: relative; + background: url(../img/three-participants-at-laptops-min.jpg) $main-blue no-repeat top center; + @include prefix(background-size, contain, webkit moz o); + } + + .main-header__text { + position: absolute; + bottom: 0; + max-width: 100%; + width: auto; + padding: 0 1em; + } + + .main-content { + margin-top: 5rem; + } + + .hidden-sm { + display: none; + } + + .hidden-lg { + display: inline-block; + } + + .lines-button { + position: absolute; + right: 0; + top: 0; + margin: 0.5rem 0; + padding: $button-size/2 $button-size/3; + transition: 0.3s; + cursor: pointer; + user-select: none; + border-radius: $button-size/7; + + &:hover { + opacity: 1; + } + + &:active { + transition: 0; + background: rgba(0, 0, 0, 0.1); + } + } + + .lines { + @include line; + position: relative; + + &:before, + &:after { + @include line; + position: absolute; + left: 0; + content: ""; + transform-origin: $button-size/14 center; + } + + &:before { + top: $button-size/4; + } -.admin-box { - flex-grow: 2; - background-color: white; - border-radius: 8px; - box-shadow: 0 3px 5px 1px #ccc; - margin: 1em; - padding: 0.5em 1em; -} + &:after { + top: -$button-size/4; + } + } -.quick-stats .admin-box { - max-width: 350px; -} + .lines-button:hover { + opacity: 1; -.quick-stats-percent { - font-weight: bold; -} + .lines { + &:before { + top: $button-size/3; + } -.status-overview { - display: flex; - flex-direction: column; -} + &:after { + top: -$button-size/3; + } + } + } -.attention-overview { - display: flex; - flex-direction: row; - justify-content: center; -} + .lines-button.x.close .lines { + background: transparent; -.status-overview-info, -.recent-applicant-info, -.attention-overview { - margin-bottom: 2em; -} + &:before, + &:after { + transform-origin: 50% 50%; + top: 0; + width: 2.5em; + } -.admin-box > label { - display: flex; - justify-content: space-between; -} + &:before { + transform: rotate3d(0, 0, 1, 45deg); + } -.admin-subtitle { - color: gray; -} + &:after { + transform: rotate3d(0, 0, 1, -45deg); + } + } -.attention-box { - display: flex; - flex-direction: column; - align-items: center; - width: 150px; - text-align: center; - margin: 20px; -} + .contact-us { + display: block; + } -progress { - background-color: white; - width: 100%; - height: 1em; - border-radius: 20px; - margin-bottom: 2em; -} + .nav-bar-inner { + padding: 0; + margin-top: 5rem; + } -progress::before { - position: absolute; - width: 30%; - text-align: center; - font-size: 18px; - color: white; -} + .social-link { + width: 50px; + } -#submitted::-webkit-progress-value { - background-color: rgb(155, 225, 255); - border-radius: 20px; -} + .social-media, + .hiring { + width: 2.5rem; + height: 2.5rem; + } -#review::-webkit-progress-value { - background-color: rgb(252, 237, 140); - border-radius: 20px; -} + .hiring { + width: 3.75rem; + } -#accepted::-webkit-progress-value { - background-color: rgb(155, 255, 180); - border-radius: 20px; + .icon-text { + font-size: 0.6rem; + } } -#rejected::-webkit-progress-value { - background-color: rgb(252, 202, 211); - border-radius: 20px; -} +@media (max-width: 560px) { + .videowrapper { + position: relative; + width: 100%; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + } -progress::-webkit-progress-bar { - background-color: gray; - border-radius: 20px; -} + .videowrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + } -.recent-applicants-container { - overflow-x: auto; -} + table.mentor { + td { + display: block; + width: 100%; + padding: 0.5rem; + box-sizing: border-box; -.recent-applicants { - width: 100%; - border-collapse: collapse; + &:first-of-type { + border-right: none; + vertical-align: top; + } + } + } } -.recent-applicants td { - border-width: 2px 0 0 0; - border-color: rgb(228, 228, 228); - border-style: solid; - border-collapse: collapse; - padding: 2em 2em; -} +@media (max-width: 600px) { + .chart-container { + padding: 2rem 0; + } -.recent-applicants th { - text-align: left; - color: gray; - padding: 2em 2em; -} + #myChart { + padding: 0; + } -.status { - padding: 0.5em; - border-radius: 50px; - text-align: center; - font-weight: bold; - width: fit-content; -} + .sponsor-logo { + width: 38%; + margin: 15px; + } -#review-text, -#applicant-action { - color: rgb(204, 150, 0); - background-color: rgb(252, 237, 140); + .sponsor-img { + width: 33%; + margin: 20px; + } } -#submitted-text { - color: rgb(0, 58, 108); - background-color: rgb(155, 225, 255); +@media (max-width: 411px) { + .large-white-text { + font-size: 1.5em !important; + } } -#accepted-text { - color: rgb(0, 98, 24); - background-color: rgb(155, 255, 180); +@media only screen and (min-width: 320px) and (max-width: 699px) { + .sponsor-benefit-table { + max-width: 100%; + table-layout: inherit; + font-size: 13px; + } } -#rejected-text, -#admin-action { - color: rgb(138, 0, 25); - background-color: rgb(252, 202, 211); +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { + .main-header__text { + font-size: 1rem; + height: 50vh; + } } -#admin-action, -#applicant-action { - padding: 5px; - border-radius: 10px; - - /* Sponsor Page Styling */ - .sponsor-benefit-table { - margin-right: auto; - margin-left: auto; - width: 100%; +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { + .main-header { + background-size: cover; + font-size: 14px; } - .sponsor-benefit-table, - .sponsor-benefit-table td { - border: 1px solid $main-blue; - border-collapse: collapse; + + .main-content { + font-size: 14px; } - .sponsor-benefit-table th { - padding: 5px; - column-width: 100px; +} + +@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { + .main-header__text { + font-size: 1rem; } - .sponsor-table-cell { - text-align: center; + + .main-header_text p { + margin-bottom: 20px; } - .sponsor-table-prompt { - padding-left: 5px; +} + +@media screen and (device-width: 640px) and (device-height: 360px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { + .main-header__text { + font-size: 1rem; + height: 50vh; } - @media only screen and (min-width: 320px) and (max-width: 699px) { - .sponsor-benefit-table { - max-width: 100%; - table-layout: inherit; - font-size: 13px; - } + .main-header { + height: 500px; + background-size: cover; } } \ No newline at end of file diff --git a/templates/app/form.html b/templates/app/form.html index 2f66baa7..d4a15d7f 100644 --- a/templates/app/form.html +++ b/templates/app/form.html @@ -1,233 +1,23 @@ -{% extends "base.html" %} {% block title %} Techtonica: Bridging the Tech Gap — -Techtonica Application {% endblock title %} {% block content %} +{% extends "base.html" %} +{% from "form_macros.html" import fieldset, input_field, textarea_field, radio_group, checkbox_field, conduct_checkbox, contact_info, gender_identity_select, pronouns_checkbox_group, age_group_select, race_ethnicity_select %} + +{% block title %} Techtonica: Bridging the Tech Gap — +Techtonica Application {% endblock title %} + +{% block content %}

Techtonica Application

-
- General Applicant Demographics -
-
-
-
-
-
- -
- -

- You can make a recording on - name-coach.com, generate your link - and share in the text field if preferred. -

-
-
-
- -
- -

- Please use the same business-minded Gmail with your name (e.g. - janedoe@gmail.com) that you used in the shorter form. This is the - email we will contact you with for the duration of the application - process and program. -

-
-
- -
- -
-
    -
  • - Agender or genderless: People who do not identify - with any gender or feel an absence of gender. They may use terms - like genderblank, genderfree, genderless, gendervoid, - non-gendered, or null gender. -
  • -
  • - Genderfluid: People whose gender identity is not - fixed and may change over time, fluctuating between different - gender expressions or identities. -
  • -
  • - Cis Man or Cis Woman: A person whose gender - identity aligns with the male or female sex they were assigned at - birth. -
  • -
  • - Non-binary or Genderqueer: People who do not - identify exclusively as a man or a woman. They may feel like both, - somewhere in between, or outside these categories entirely. -
  • -
  • - Trans Man or Trans Woman: People whose gender - identity differs from the sex they are assigned at birth. e.g., a - transgender man is someone who was assigned female at birth but - whose gender identity is male, while a transgender woman is - someone who is assigned male at birth but whose gender identity is - female. -
  • -
  • - Other: A person whose gender identity does not - fit within the listed categories or who prefers a different term. -
  • -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
+ {% call fieldset('General Applicant Demographics') %} + {{ contact_info() }} + {{ gender_identity_select() }} + {{ pronouns_checkbox_group() }} + + {{ input_field('What is your birth date?', 'birth-date', type='date', required=true) }} + + {{ age_group_select() }} + + {# Phone Number with pattern #}
Techtonica Application required autocomplete="tel" />
-
-
- - - -
-
-
- -
- -

- You are considered to have a disability if you have a physical or - mental impairment or medical condition that substantially limits a - major life activity. -

-
-
- - - -
-
-
-
- - - -
-
- + + {{ radio_group('Are you a U.S. veteran?', 'veteran-status', [('Yes', 'Yes'), ('No', 'No')]) }} + {{ radio_group('Do you have a disability? (You can find some examples here: https://askjan.org/a-to-z.cfm)', 'disabled-status', [('Yes', 'Yes'), ('No', 'No')]) }}
-
-
    -
  • - African-American, Black, or African: A person - having origins in Africa, including those across the African - diaspora, such as communities in the Americas, the Caribbean, and - other regions. -
  • -
  • - Central Asian: A person having origins in any of - the Central Asian countries, including Kazakhstan, Kyrgyzstan, - Tajikistan, Turkmenistan, Uzbekistan. -
  • -
  • - East Asian: A person having origins in any of the - East Asian countries, including China, Japan, Korea, Mongolia, - Tibet, and Taiwan. -
  • -
  • - Hispanic or Latinx: A person of having origins in - Cuba, Mexico, Puerto Rico, the Dominican Republic, or South or - Central America. -
  • -
  • - Middle Eastern or North African (MENA): A person - having origins in the Middle East or North Africa. -
  • -
  • - Native American, Alaskan Native, First Nations or - Indigenous: - A person having origins in any of the Indigenous peoples of North - and South America (including Central America). -
  • -
  • - Pacific Islander: A person having origins in any - of the Pacific Islands, including Polynesia, Micronesia, and - Melanesia. -
  • -
  • - South Asian: A person having origins in any of - the South Asian countries, including Bangladesh, Bhutan, India, - Nepal, Pakistan, Afghanistan, and Sri Lanka. -
  • -
  • - Southeast Asian: A person having origins in any - of the Southeast Asian countries, including Cambodia, Indonesia, - Laos, Malaysia, Myanmar, the Philippines, Singapore, Thailand, and - Vietnam. -
  • -
  • White: A person having origins in Europe.
  • -
  • - Another race/ethnicity: A person who identifies - with a racial/ethnic group not listed above. -
  • -
-
-
- -
-
-
-
-
- - - -
-
-
-
- - - -
+ You are considered to have a disability if you have a physical or + mental impairment or medical condition that substantially limits a + major life activity. +

- -
-
-
- - + - {% endblock content %} diff --git a/templates/form_macros.html b/templates/form_macros.html new file mode 100644 index 00000000..c087a498 --- /dev/null +++ b/templates/form_macros.html @@ -0,0 +1,263 @@ +{% macro form_wrapper(title, form_id='form', form_class='', include_payment=false) %} +
+
+
+ {% if title %} +

{{ title }}

+ {% endif %} +
+ {{ caller() }} +
+ + {% if include_payment %} +

Payment Info

+
+ {% endif %} + + {{ conduct_checkbox() }} + + {% if include_payment %} + + + {% else %} + + + {% endif %} +
+
+
+{% endmacro %} + +{% macro fieldset(legend='') %} +
+ {% if legend %} + {{ legend }} + {% endif %} + {{ caller() }} +
+{% endmacro %} + +{% macro input_field(label, id, type='text', required=true, pattern='', title='', placeholder='', minlength='', maxlength='', autocomplete='') %} + + +{% endmacro %} + +{% macro textarea_field(label, id, rows=5, required=true) %} + + +{% endmacro %} + +{% macro radio_group(question, name, options) %} +
+

{{ question }}

+ {% for opt in options %} + {% if opt is sequence and opt is not string %} + {% set value = opt[0] %} + {% set label = opt[1] %} + {% else %} + {% set value = opt.value %} + {% set label = opt.label %} + {% endif %} + + + {% endfor %} +
+{% endmacro %} + +{% macro checkbox_field(id, label, required=false) %} +
+ + +
+{% endmacro %} + +{% macro conduct_checkbox() %} +
+ + +
+{% endmacro %} + +{% macro contact_info() %} +
+ Contact Information + + {{ input_field('Full legal given or \'first\' name:', 'first-name', required=true) }} + {{ input_field('Preferred given or "first" name (if not the same as your legal "first" or given name):', 'preferred-name', required=false) }} + {{ input_field('Full legal last/family name or surname:', 'last-name', required=true) }} + {{ input_field('How to pronounce your full name:', 'name-pronunciation', required=false) }} +
+ +

+ You can make a recording on + name-coach.com, generate your link + and share in the text field if preferred. +

+
+
+ {{ input_field('Email:', 'email', type='email', required=true) }} +
+ +

+ Please use the same business-minded Gmail with your name (e.g. + janedoe@gmail.com) that you used in the shorter form. This is the + email we will contact you with for the duration of the application + process and program. +

+
+
+
+{% endmacro %} + +{% macro gender_identity_select() %} + +
+ +
+ +
+
+
+ +
+{% endmacro %} + +{% macro pronouns_checkbox_group() %} +
+
+ {{ checkbox_field('pronouns-she-her', 'She/Her', required=false) }} + {{ checkbox_field('pronouns-he-him', 'He/Him', required=false) }} + {{ checkbox_field('pronouns-they-them', 'They/Them', required=false) }} + {{ checkbox_field('pronouns-ze-zir', 'Ze/Zir', required=false) }} + {{ checkbox_field('pronouns-other', 'Other', required=false) }} +
+ +
+{% endmacro %} + +{% macro age_group_select() %} +
+
+{% endmacro %} + +{% macro race_ethnicity_select() %} + +
+ +
+ +
+
+ +
+{% endmacro %} diff --git a/templates/job-form.html b/templates/job-form.html index 499fc936..3bd0798c 100644 --- a/templates/job-form.html +++ b/templates/job-form.html @@ -1,4 +1,6 @@ -{% extends "base.html" %} {% block title %} Techtonica: Bridging the Tech Gap — +{% extends "base.html" %} +{% from "form_macros.html" import form_wrapper, fieldset, input_field, textarea_field, radio_group, conduct_checkbox %} +{% block title %} Techtonica: Bridging the Tech Gap — Post A Job {% endblock title %} {% block content %} @@ -14,117 +16,31 @@

Post A Job

- Have a job opening but your company isn’t ready to become a hiring partner? + Have a job opening but your company isn't ready to become a hiring partner?
- Submit the job for $100 and we’ll share with our graduates who have 0-5 + Submit the job for $100 and we'll share with our graduates who have 0-5 years of experience.

{% if not credentials %}

Contact us to post your job!

{% else %} -
-
-
-

Job Listing Form

-
-
- Contact Information - - - - - - - - - -
- -
- Job Details - - - - - - - - - - - - - - - - -
-

Can you make a referral/connection?

- - - - -
- - - - - - - - - -
- -
- -

Payment Info

-
-
- - -
- - -
-
-
+ {# Adjusted form_wrapper call to match parameters: title, form_id, form_class, include_payment #} + {% call form_wrapper('Job Listing Form', 'fast-checkout', 'payment-form form-wrapper', include_payment=true) %} + {% call fieldset('Job Details') %} + {# input_field now takes label, id, type, required #} + {{ input_field('Job Title', 'jobtitle') }} + {{ input_field('Company', 'company') }} + {{ input_field('Type', 'type', required=false) }} + {{ input_field('Education Requirement', 'educationreq', required=false) }} + {{ input_field('Location', 'location') }} + + {{ radio_group('Can you make a referral/connection?', 'referral', [('yes', 'Yes'), ('no', 'No')]) }} + + {{ input_field('Salary Range', 'salaryrange', required=false) }} + {{ textarea_field('Description', 'description', required=false) }} + {{ input_field('Link to Apply', 'applicationlink', required=false) }} + {% endcall %} + {% endcall %} {% endif %}