diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js
index 63dcbea..557f373 100644
--- a/src/components/contact/contact-styles.js
+++ b/src/components/contact/contact-styles.js
@@ -54,7 +54,7 @@ export const ContactButton = styled.a`
padding-left: 60px;
padding-top: 16px;
padding-bottom: 16px;
- background-color: ${colors.orange900};
+ background-color: ${colors.seafoam900};
text-transform: uppercase;
color: ${colors.white900};
@@ -62,7 +62,7 @@ export const ContactButton = styled.a`
transition: all 0.1s ease-in-out;
&:hover {
- box-shadow: 0 0 46px -9px ${colors.orange900};
+ box-shadow: 0 0 46px -9px ${colors.seafoam900};
}
`
@@ -99,12 +99,12 @@ export const SpecificContactInfo = styled.div`
export const EmailSection = styled.div`
margin-right: 127px;
margin-top: 64px;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
`
export const AddressSection = styled.div`
margin-top: 64px;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
width: 228px;
margin-bottom: 110px;
`
diff --git a/src/components/faq/faq-question/FAQQuestion.styles.js b/src/components/faq/faq-question/FAQQuestion.styles.js
index d65db58..fd138be 100644
--- a/src/components/faq/faq-question/FAQQuestion.styles.js
+++ b/src/components/faq/faq-question/FAQQuestion.styles.js
@@ -11,12 +11,12 @@ export const ToggleContainer = styled.div`
`
export const FAQQuestionTitle = styled(H4)`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
margin: 0;
`
export const FAQAnswer = styled(Body)`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
padding-left: 24px;
width: 90%;
line-height: 32px;
diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js
index 9c1c834..990166d 100644
--- a/src/components/faq/topics-picker/TopicsPicker.styles.js
+++ b/src/components/faq/topics-picker/TopicsPicker.styles.js
@@ -10,8 +10,8 @@ export const TopicsContainer = styled.div`
`
const SelectedBox = css`
- border: 3px solid ${colors.orange900};
- background-color: ${colors.orange900_transparent};
+ border: 3px solid ${colors.seafoam900};
+ background-color: ${colors.seafoam900_transparent};
`
export const TopicBox = styled.div`
@@ -26,10 +26,10 @@ export const TopicBox = styled.div`
font-weight: bolder;
cursor: pointer;
- border: 2px solid ${colors.orange900};
+ border: 2px solid ${colors.seafoam900};
background-color: transparent;
transition: all 0.1s ease-in-out;
- color: ${colors.orange900};
+ color: ${colors.seafoam900};
text-transform: uppercase;
${props => props.selected && SelectedBox};
diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js
index 9440b4f..5549b6a 100644
--- a/src/components/footer/footer-styles.js
+++ b/src/components/footer/footer-styles.js
@@ -95,7 +95,7 @@ export const EmailSection = styled.div`
width: 20vw;
height: 36px;
margin-top: 10px;
- border: solid ${colors.blue900} 1px;
+ border: solid ${colors.ocean900} 1px;
}
@media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -103,7 +103,7 @@ export const EmailSection = styled.div`
width: 80%;
height: 36px;
margin-top: 10px;
- border: solid ${colors.blue900} 1px;
+ border: solid ${colors.ocean900} 1px;
}
}
@@ -182,7 +182,7 @@ export const SockContent = styled.div`
`
export const ConnectTitle = styled.div`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
`
export const SockEmailForm = styled.form`
@@ -194,11 +194,11 @@ export const SockEmailForm = styled.form`
background: transparent;
border: none;
width: 36vw;
- border-bottom: 4px solid ${colors.blue900};
+ border-bottom: 4px solid ${colors.ocean900};
}
input[type="text"]::placeholder {
- color: ${colors.blue900};
+ color: ${colors.ocean900};
}
@media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -207,14 +207,14 @@ export const SockEmailForm = styled.form`
background: transparent;
border: none;
width: 100%;
- border-bottom: 4px solid ${colors.blue900};
+ border-bottom: 4px solid ${colors.ocean900};
}
}
input[type="text"],
select {
font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1440 - 320)));
- color: ${colors.blue900};
+ color: ${colors.ocean900};
}
`
@@ -234,7 +234,7 @@ export const SockCTA = styled.button`
border: none;
padding-top: 16px;
padding-bottom: 16px;
- background-color: ${colors.orange900};
+ background-color: ${colors.seafoam900};
text-transform: uppercase;
color: ${colors.white900};
`
diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
index e5019b4..074150d 100644
--- a/src/components/homepage/index-styles.js
+++ b/src/components/homepage/index-styles.js
@@ -47,7 +47,7 @@ export const HeroDescription = styled.div``
export const HeroCTA = styled.div`
margin-top: 64px;
a {
- background-color: ${colors.orange900};
+ background-color: ${colors.seafoam900};
text-transform: uppercase;
color: ${colors.white900};
padding-left: 48px;
@@ -65,7 +65,7 @@ export const ImpactSection = styled.div`
min-height: 100vh;
z-index: 1;
position: relative;
-
+ color: ${colors.ocean900};
background-color: ${colors.white900};
justify-content: center;
@media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -154,7 +154,7 @@ export const FutureImage = styled.div`
export const FutureHeader = styled.div`
font-weight: bold;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
@media (min-width: ${dimensions.maxwidthTablet}px) {
}
`
@@ -175,7 +175,7 @@ export const FutureSolarIcon = styled.div`
export const FutureDescription = styled.div`
margin-top: 32px;
font-size: 18px;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
@media (max-width: ${dimensions.maxwidthTablet}px) {
font-size: 16px;
@@ -189,12 +189,12 @@ export const FutureCTA = styled.div`
padding-left: 60px;
padding-top: 16px;
padding-bottom: 16px;
- border: solid ${colors.orange900}; 1px;
+ border: solid ${colors.seafoam900}; 1px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
- color: ${colors.orange900};
+ color: ${colors.seafoam900};
}
`
@@ -206,14 +206,14 @@ export const HomePageContainer = styled.div`
export const SolutionsSection = styled.div`
min-height: 100vh;
margin-top: 200px;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
padding-bottom: 100px;
`
export const SolutionsCard = styled.div`
a {
text-decoration: none;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
}
@media (max-width: ${dimensions.maxwidthTablet}px) {
img {
@@ -253,12 +253,12 @@ a {
padding-left: 60px;
padding-top: 16px;
padding-bottom: 16px;
- border: solid ${colors.orange900}; 1px;
+ border: solid ${colors.seafoam900}; 1px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
- color: ${colors.orange900};
+ color: ${colors.seafoam900};
}
`
export const CTASection = styled.div`
@@ -299,7 +299,7 @@ export const CTAContent = styled.div`
`
export const CTAText = styled.div`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
@media (min-width: ${dimensions.maxwidthTablet}px) {
margin-left: 133px;
@@ -315,12 +315,12 @@ a {
padding-left: 60px;
padding-top: 16px;
padding-bottom: 16px;
- border: solid ${colors.orange900}; 1px;
+ border: solid ${colors.seafoam900}; 1px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
- color: ${colors.orange900};
+ color: ${colors.seafoam900};
}
`
export const NodeLine = styled.div`
@@ -329,7 +329,7 @@ export const NodeLine = styled.div`
left: -80px;
margin-top: 64px;
z-index: 0;
- background-color: ${colors.orange900};
+ background-color: ${colors.grass900};
@media (min-width: ${dimensions.maxwidthDesktop}px) {
width: 70%;
@@ -345,7 +345,7 @@ export const MobileNodeLine = styled.div`
left: -${layoutPaddingMobile};
margin-top: 64px;
z-index: 0;
- background-color: ${colors.orange900};
+ background-color: ${colors.seafoam900};
@media (max-width: ${dimensions.maxwidthTablet}px) {
width: 55.8%;
diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js
index 0a42ce2..9479bfb 100644
--- a/src/components/solutions/solutions-styles.js
+++ b/src/components/solutions/solutions-styles.js
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled'
+import styled from "@emotion/styled"
import colors from "../../style/colors"
import dimensions from "../../style/dimensions"
import {
@@ -11,10 +11,10 @@ export const SolutionsContainer = styled.div``
export const TaglineSection = styled.div``
export const TaglineHeader = styled.div`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
`
export const TaglineDescription = styled.div`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
`
export const TaglineImage = styled.div`
@@ -61,7 +61,7 @@ export const UseCaseCard = styled.div`
width: 100%;
a {
text-decoration: none;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
}
@media (min-width: ${dimensions.maxwidthTablet}px) {
@@ -76,12 +76,12 @@ a {
padding-left: 60px;
padding-top: 16px;
padding-bottom: 16px;
- border: solid ${colors.orange900}; 1px;
+ border: solid ${colors.seafoam900}; 1px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
- color: ${colors.orange900};
+ color: ${colors.seafoam900};
}
`
@@ -125,7 +125,6 @@ export const ModelCTAText = styled.div`
margin-bottom: 116px;
margin-top: 116px;
- color: ${colors.blue900};
@media (min-width: ${dimensions.maxwidthTablet}px) {
margin-left: 76px;
margin-top: 72px;
@@ -137,7 +136,7 @@ export const ModelsButton = styled.div`
margin-top: 42px;
a {
- background-color: ${colors.orange900};
+ background-color: ${colors.seafoam900};
text-transform: uppercase;
color: ${colors.white900};
padding-left: 48px;
diff --git a/src/style/colors.js b/src/style/colors.js
index 929e416..f02c54b 100644
--- a/src/style/colors.js
+++ b/src/style/colors.js
@@ -15,6 +15,14 @@ const colors = {
softblue900: "#ECF3F7",
gray900: "#585858",
black_overlay: "rgb(0, 0, 0, 0.55)",
+ ocean900: "#00667B",
+ seafoam900: "#5AC7AC",
+ solar900: "#FFB729",
+ grass900: "#B2DD8E",
+ frost900: "#ECF3F7",
+ stone900: "#585858",
+ seafoam900_transparent: "rgb(90, 199, 172, .07)",
+
}
export default colors
diff --git a/src/templates/use-case-styles.js b/src/templates/use-case-styles.js
index 1b05c02..a0d80a9 100644
--- a/src/templates/use-case-styles.js
+++ b/src/templates/use-case-styles.js
@@ -44,7 +44,7 @@ export const IntroTextSection = styled.div`
`
export const IntroHeader = styled.div`
- color: ${colors.blue900};
+ color: ${colors.ocean900};
`
export const ImageTwo = styled.div`
@@ -87,7 +87,7 @@ export const WhyHeader = styled.div`
margin-top: 118px;
margin-bottom: 88px;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
@media (min-width: ${dimensions.maxwidthTablet}px) {
margin-top: 152px;
@@ -116,7 +116,7 @@ export const SpecificImage = styled.div`
export const SpecificReasonHeading = styled.div`
text-align: center;
- color: ${colors.blue900};
+ color: ${colors.ocean900};
@media (min-width: ${dimensions.maxwidthTablet}px) {
}
@@ -135,7 +135,7 @@ export const WhyCTA = styled.div`
justify-content: center;
a {
- background-color: ${colors.orange900};
+ background-color: ${colors.seafoam900};
text-transform: uppercase;
color: ${colors.white900};
padding-left: 48px;
@@ -148,39 +148,31 @@ export const WhyCTA = styled.div`
`
export const DemoVideoSection = styled.div`
-margin-top: 75px;
-margin-bottom: 75px;
-
-@media (min-width: ${dimensions.maxwidthTablet}px) {
- margin-top: 192px;
- margin-bottom: 192px;
- justify-content: center;
- display: flex;
-}
-
-
+ margin-top: 75px;
+ margin-bottom: 75px;
+ @media (min-width: ${dimensions.maxwidthTablet}px) {
+ margin-top: 192px;
+ margin-bottom: 192px;
+ justify-content: center;
+ display: flex;
+ }
`
export const DemoVideo = styled.div`
-
-iframe {
- width: 72vw;
- height: 562px;
-}
-
-@media (max-width: ${dimensions.maxwidthTablet}px) {
iframe {
- width: 100%;
- height: 173px;
+ width: 72vw;
+ height: 562px;
}
-}
+ @media (max-width: ${dimensions.maxwidthTablet}px) {
+ iframe {
+ width: 100%;
+ height: 173px;
+ }
+ }
`
-
export const DemoHeading = styled.div`
-
-color: ${colors.blue900};
-
+ color: ${colors.ocean900};
`
diff --git a/src/vectors/circle.svg b/src/vectors/circle.svg
index feb8825..fc26665 100644
--- a/src/vectors/circle.svg
+++ b/src/vectors/circle.svg
@@ -1,3 +1,3 @@
diff --git a/src/vectors/close.svg b/src/vectors/close.svg
index c3cf8cd..8d56ce5 100644
--- a/src/vectors/close.svg
+++ b/src/vectors/close.svg
@@ -1,4 +1,4 @@
diff --git a/src/vectors/old.svg b/src/vectors/old.svg
new file mode 100644
index 0000000..fb9f112
--- /dev/null
+++ b/src/vectors/old.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/vectors/open.svg b/src/vectors/open.svg
index 733b2d2..7b85b27 100644
--- a/src/vectors/open.svg
+++ b/src/vectors/open.svg
@@ -1,5 +1,5 @@
diff --git a/src/vectors/plant-icon.svg b/src/vectors/plant-icon.svg
index 630d513..3bb1140 100644
--- a/src/vectors/plant-icon.svg
+++ b/src/vectors/plant-icon.svg
@@ -1,8 +1,9 @@
-