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
-
{{ 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 %} +
- 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.
Contact us to post your job!
{% else %} -