@@ -223,32 +423,6 @@
Your favourite CSS syntaxes - all under one roof
-
-
-
-
-
-
- Building a better website, together
-
-
-
-
-
-
-
-
-
-
Help & Support
-
Guidance every step of the way
-
Outside of a cool new feature, each branch comes with an introductory landing page (just like this one) and a branch-specific README. The landing page gives you a quick overview of the branch, with the README providing more technical details should you wish to expand.
-
Additionally, all project-critical actions that need to be taken have a comment containing "CS-TODO". After merging in your branches, you can search the codebase for "CS-TODO", find the most important changes that need to be made, and action them effortlessly.
-
Finally, if you are still stuck or find a bug in the kit, you can use the CTAs in the header to get directly in touch with the kit creators, or reach out to a community of hundreds of other developers.
-
The kit continues to be supported going forward, with a complete set of tutorial videos and additional feature branches planned in the very near future. Follow our subreddit to stay up to date!
-
Learn More
-
-
+
{% endblock %}
\ No newline at end of file
diff --git a/starter-styles/less/cms-blog.less b/starter-styles/less/cms-blog.less
new file mode 100644
index 0000000..8b76b1a
--- /dev/null
+++ b/starter-styles/less/cms-blog.less
@@ -0,0 +1,722 @@
+/*-- -------------------------- -->
+<--- Core Styles -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-container {
+ width: 94%;
+ max-width: (1120/16em);
+ margin: auto;
+ }
+
+ .blog-link {
+ font-size: (16/16rem);
+ font-weight: 700;
+ /* 46px - 56px */
+ line-height: clamp(2.875em, 5.5vw, 3.5em);
+ text-align: center;
+ text-decoration: none;
+ min-width: (150/16rem);
+ margin: auto;
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 (24/16rem);
+ color: #fff;
+ background-color: var(--headerColor);
+ border-radius: (4/16rem);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ z-index: 1;
+ transition: color 0.3s;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: #fff;
+ opacity: 0;
+ border: 1px solid var(--headerColor);
+ border-radius: (4/16rem);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ z-index: -1;
+ transition: opacity 0.3s;
+ }
+
+ &:hover {
+ color: var(--headerColor);
+ &:before {
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Header -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ #header {
+ position: relative;
+ z-index: 1;
+
+ .blog-container {
+ padding: clamp(100px, 14vw, 200px) 0 clamp(50px, 11vw, 100px);
+ }
+
+ .blog-header {
+ font-size: clamp(24px, 4vw, 48px);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: left;
+ width: 100%;
+ margin: 0;
+ color: #fff;
+ }
+
+ .blog-bg {
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ &:before {
+ /* color overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.6;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Interior Page Header -->
+<--- -------------------------- -*/
+
+/* Mobile */
+@media only screen and (min-width: 0em) {
+ #int-hero {
+ min-height: 30vh;
+ padding-top: (270/16rem);
+ padding-bottom: (80/16rem);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.7;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+
+ picture {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ h1 {
+ font-size: (64/30rem);
+ text-align: center;
+ width: 96%;
+ max-width: (500/16rem);
+ margin: 0 auto;
+ margin-top: (70/16rem);
+ margin-bottom: (30/16rem);
+ color: #fff;
+ position: relative;
+ }
+
+ p {
+ text-align: center;
+ width: 96%;
+ max-width: (400/16rem);
+ margin: auto;
+ margin-bottom: (30/16rem);
+ color: #fff;
+ display: block;
+ }
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: 48em) {
+ #int-hero {
+ font-size: 100%;
+
+ h1 {
+ font-size: (64/16rem);
+ }
+ }
+}
+
+/* Small Desktop */
+@media only screen and (min-width: 64em) {
+ #int-hero {
+ font-size: inherit;
+ height: auto;
+ min-height: (300/16rem);
+ padding-top: (180/16rem);
+ background-attachment: fixed;
+ padding-block-end: (100/16rem);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Main Content -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-container {
+ padding: clamp(60px, 7vw, 100px) 0;
+ }
+
+ .main-content-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: (50/16em);
+ }
+
+ .main-content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: (50/16em);
+ }
+}
+
+/* Tablet - 1024px */
+@media only screen and (min-width: 64em) {
+ .main-content-wrapper {
+ flex-direction: row;
+ align-items: flex-start;
+ column-gap: (20/16em);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Recent Blog Articles -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .recent-articles {
+ width: 100%;
+ max-width: (795/16em);
+ overflow: hidden;
+ flex: none;
+
+ .blog-mainImage {
+ width: 100%;
+ height: clamp(200px, 30vw, 400px);
+ border-radius: (8/16em) (8/16em) 0 0;
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .article-group {
+ padding: clamp(30px, 5vw, 50px);
+ border: 1px solid #ebebeb;
+ border-radius: 0 0 (8/16em) (8/16em);
+ }
+
+ .blog-author-img {
+ width: (32/16em);
+ height: (32/16em);
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .blog-authorGroup {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: (12/16rem);
+ }
+
+ .blog-author,
+ .blog-date {
+ font-size: (14/16rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ }
+
+ .blog-dot {
+ width: 3px;
+ height: 3px;
+ background-color: var(--primary);
+ border-radius: 50%;
+ display: block;
+ }
+
+ .blog-h1 {
+ font-size: clamp(20px, 5vw, 32px);
+ font-weight: 700;
+ line-height: 1.4em;
+ margin: (16/16rem) 0;
+ color: var(--headerColor);
+ }
+
+ .blog-desc {
+ font-size: (16/16rem);
+ line-height: 1.5em;
+ margin: (16/16rem) 0 (32/16rem);
+ color: var(--bodyTextColor);
+ }
+
+ .blog-link {
+ font-size: (16/16rem);
+ font-weight: 700;
+ /* 46px - 56px */
+ line-height: clamp(2.875em, 5.5vw, 3.5em);
+ text-align: center;
+ text-decoration: none;
+ min-width: (150/16rem);
+ margin: auto;
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 (24/16rem);
+ color: #fff;
+ background-color: var(--headerColor);
+ border-radius: (4/16rem);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ z-index: 1;
+ transition: color 0.3s;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: #fff;
+ opacity: 0;
+ border: 1px solid var(--headerColor);
+ border-radius: (4/16rem);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ z-index: -1;
+ transition: opacity 0.3s;
+ }
+
+ &:hover {
+ color: var(--headerColor);
+ &:before {
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
+
+/* Mobile - 1024px */
+@media only screen and (min-width: 64em) {
+ .recent-articles {
+ .blog-h1 {
+ max-width: (500/16rem);
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0em) {
+ body.dark-mode {
+ .recent-articles {
+ .blog-h1,
+ .blog-desc,
+ .blog-author,
+ .blog-date {
+ color: #f7f7f7;
+ }
+ }
+
+ .blog-sidebar {
+ .feature-h3,
+ .feature-date,
+ .blog-header {
+ color: #f7f7f7;
+ }
+ .blog-header {
+ &:after {
+ background: var(--primary);
+ }
+ }
+ }
+
+ .blog-article {
+ .blog-h1,
+ .blog-author,
+ .blog-date {
+ color: #f7f7f7;
+ }
+
+ #blog-content {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: #f7f7f7;
+ }
+ p,
+ li {
+ color: #f7f7f7;
+ opacity: 0.8;
+ }
+ a {
+ color: #9dafe5;
+ }
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Sidebar -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-sidebar {
+ width: 100%;
+ max-width: (795/16em);
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: (50/16em);
+
+ .blog-featured-group {
+ width: 100%;
+ padding: (35/16em) (30/16em);
+ border: 1px solid #ebebeb;
+ border-radius: (8/16em);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .blog-header {
+ font-size: (20/16em);
+ font-weight: bold;
+ text-align: center;
+ margin-bottom: (30/16rem);
+ color: var(--headerColor);
+ display: block;
+ position: relative;
+
+ &:after {
+ content: "";
+ width: (50/16rem);
+ height: 3px;
+ margin: (16/16rem) auto;
+ background: var(--headerColor);
+ border-radius: (4/16rem);
+ display: block;
+ position: relative;
+ }
+ }
+
+ .blog-feature {
+ text-decoration: none;
+ width: 100%;
+ padding: (20/16rem) 0;
+ border-bottom: 1px solid #ebebeb;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ column-gap: (24/16em);
+
+ &:nth-of-type(1) {
+ padding-top: 0;
+ }
+
+ &:last-of-type {
+ padding-bottom: 0;
+ border: none;
+ }
+ }
+
+ .blog-featureImage {
+ width: (60/16em);
+ height: (60/16em);
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ overflow: hidden;
+ flex: none;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .feature-h3 {
+ font-size: (15/16rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ text-decoration: none;
+ margin: 0;
+ margin-bottom: (4/16rem);
+ color: var(--headerColor);
+ display: block;
+ }
+
+ .feature-date {
+ font-size: (14/16rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ display: block;
+ }
+ }
+}
+
+/* Tablet - 1024px */
+@media only screen and (min-width: 64em) {
+ .blog-sidebar {
+ max-width: (360/16em);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Blog Articles -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-article {
+ width: 100%;
+ max-width: (795/16em);
+ display: block;
+ .blog-mainImage {
+ width: 100%;
+ height: clamp(200px, 30vw, 400px);
+ margin-bottom: (50/16em);
+ border-radius: (8/16em);
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .blog-author-img {
+ width: (32/16em);
+ height: (32/16em);
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .blog-authorGroup {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: (12/16rem);
+ }
+
+ .blog-author,
+ .blog-date {
+ font-size: (14/16rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ }
+
+ .blog-dot {
+ width: 3px;
+ height: 3px;
+ background-color: #fe4f70;
+ border-radius: 50%;
+ display: block;
+ }
+
+ .blog-h1 {
+ font-size: clamp(20px, 5vw, 39px);
+ font-weight: 700;
+ line-height: 1.4em;
+ max-width: (550/16rem);
+ margin: (16/16rem) 0;
+ color: var(--headerColor);
+ }
+
+ #blog-content {
+ margin-top: (16/16em);
+ padding-top: (25/16em);
+ border-top: 1px solid #ebebeb;
+
+ h1 {
+ font-size: 2.25rem;
+ font-weight: 700;
+ line-height: 1.75em;
+ margin-bottom: 1rem;
+ color: var(--headerColor);
+ }
+
+ h2 {
+ font-size: (28/16rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: (16/16rem);
+ color: var(--headerColor);
+ }
+
+ h3 {
+ font-size: (24/16rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: (16/16rem);
+ color: var(--headerColor);
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: (20/16rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: (16/16rem);
+ color: var(--headerColor);
+ }
+
+ p {
+ font-size: (16/16rem);
+ line-height: 1.6em;
+ margin: 0;
+ margin-bottom: (16/16rem);
+ color: var(--bodyTextColor);
+ }
+
+ a {
+ font-size: inherit;
+ text-decoration: underline;
+ color: var(--secondary);
+ }
+
+ ul,
+ ol {
+ margin: 0;
+ margin: (16/16rem) 0;
+ padding-left: (40/16rem);
+
+ li {
+ font-size: (16/16rem);
+ line-height: 1.6em;
+ list-style: circle;
+ margin-bottom: (16/16rem);
+ color: var(--bodyTextColor);
+ }
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ margin: (16/16rem) 0;
+ border-radius: (8/16rem);
+ display: block;
+ }
+ }
+ }
+}
diff --git a/starter-styles/less/cms-menu.less b/starter-styles/less/cms-menu.less
new file mode 100644
index 0000000..8fde64c
--- /dev/null
+++ b/starter-styles/less/cms-menu.less
@@ -0,0 +1,538 @@
+/*-- -------------------------- -->
+<--- Banner -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ #banner-1018 {
+ z-index: 1;
+ position: relative;
+ background-color: #000;
+ padding: 0 (16/16rem);
+ /* 160px - 245px */
+ padding-top: (270/16rem);
+ padding-bottom: (120/16rem);
+
+ .cs-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ max-width: (1280/16rem);
+ width: 100%;
+ text-align: center;
+ }
+
+ .cs-picture {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 0 (12/16rem);
+ width: 100%;
+ gap: (16/16rem);
+
+ &:before {
+ position: relative;
+ /* left line */
+ content: "";
+ opacity: 1;
+ display: block;
+ background: #b4b2c7;
+ height: 1px;
+ max-width: (150/16rem);
+ width: 50%;
+ }
+
+ &:after {
+ position: relative;
+ /* right line */
+ content: "";
+ opacity: 1;
+ display: block;
+ background: #b4b2c7;
+ height: 1px;
+ max-width: (150/16rem);
+ width: 50%;
+ }
+ }
+
+ .cs-icon {
+ height: auto;
+ /* 100px - 180px */
+ max-width: clamp(6.25rem, 18vw, 11.25rem);
+ width: 40%;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+
+ .cs-int-title {
+ position: relative;
+ margin: 0 0 (16/16rem) 0;
+ max-width: (700/16rem);
+ /* 39px - 61px */
+ font-size: clamp(2.4375rem, 6.5vw, 3.8125rem);
+ line-height: 1.2em;
+ font-weight: 900;
+ color: var(--bodyTextColorWhite);
+ text-align: center;
+ }
+
+ .cs-text {
+ margin: 0;
+ max-width: (765/16rem);
+ width: 100%;
+ /* 16px - 20px */
+ font-size: clamp(1rem, 2vw, 1.25rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColorWhite);
+ text-align: inherit;
+ }
+
+ .cs-background {
+ z-index: -1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0.7;
+ display: block;
+ height: 100%;
+ width: 100%;
+
+ &:before {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ /* black overlay box */
+ content: "";
+ opacity: 0.72;
+ display: block;
+ background: #000;
+ height: 100%;
+ width: 100%;
+ }
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Menu -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ html,
+ body {
+ overflow: initial;
+ /* when you click a menu button and jump to the top of the screen this makes it so it has a smooth transiiton instead of an abrupt movement */
+ scroll-behavior: smooth;
+ }
+
+ #cs-menu-group {
+ height: auto;
+ padding: var(--sectionPadding);
+ padding-right: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
+
+ text-align: center;
+
+ .cs-container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: auto;
+ /* changes to 1280px at tablet */
+ max-width: (550/16em);
+ width: 100%;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ padding: var(--sectionPadding);
+ /* 48px - 64px */
+ padding-top: clamp(3em, 5vw, 4em);
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+
+ .cs-hidden {
+ display: none;
+ }
+
+ .cs-wrapper {
+ z-index: 10000;
+ position: sticky;
+ /* change based on how tall your navigation is above it. If your navigation is 90px tall, set it to 100px from the top on mobile, and increase the larger value in the clamp to change the desktop value if you need to as well */
+ top: (208/16rem);
+ display: flex;
+ flex-wrap: wrap;
+ grid-template-columns: repeat(12, 1fr);
+ justify-content: center;
+ border: 1px solid #b4b2c7;
+ border-radius: (70/16em);
+ margin: 0 auto;
+ background-color: #f3f3f3;
+ max-width: (900/16rem);
+ width: 94%;
+ box-sizing: border-box;
+ padding: 0;
+ /* 16px - 28px top & bottom */
+ /* 32px - 48px left & right */
+ padding: clamp(1em, 3vw, 1.75em) clamp(2em, 4vw, 3em);
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+ column-gap: clamp(0.5rem, 2vw, 1.5rem);
+ row-gap: (8/16rem);
+ }
+
+ .cs-button-group {
+ z-index: 1000;
+ margin: 0 (8/16rem) 0 0;
+ width: auto;
+ grid-column: span 6;
+ /* 24px - 36px */
+ column-gap: clamp(1.5rem, 2vw, 2.25rem);
+ row-gap: (12/16rem);
+ }
+
+ .cs-button {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ background-color: transparent;
+ width: 100%;
+ padding: (4/16rem);
+ font-size: clamp(0.875rem, 1.3vw, 1rem);
+ line-height: 1.5;
+ font-weight: 400;
+ color: #878787;
+ transition: color 0.3s, font-weight 0.3s, color 0.3s;
+
+ &:hover {
+ color: var(--primary);
+ cursor: pointer;
+ }
+
+ &:after {
+ position: relative;
+ /* active state icon */
+ content: "";
+ opacity: 0;
+ display: block;
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ffancy-icon.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ /* 16px - 24px */
+ height: clamp(1em, 3vw, 1.5em);
+ width: 0;
+ transition: width 0.3s, opacity 0.3s, margin-left 0.3s;
+ }
+
+ &.cs-active {
+ font-weight: 700;
+ color: var(--headerColor);
+ &:after {
+ opacity: 1;
+ /* 8px - 16px */
+ margin-left: clamp(0.5em, 0.5vw, 1em);
+ width: clamp(1.5625em, 3vw, 2.25em);
+ }
+ }
+ }
+
+ .cs-menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 32px - 64px */
+ gap: clamp(2rem, 6vw, 4rem);
+
+ &.cs-menu-style2 {
+ position: relative;
+ /* changes to desktop at desktop */
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FMISC%2Fwood2-m.jpg");
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ &:before {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "";
+ opacity: 0.7;
+ display: block;
+ background: #000;
+ height: 100%;
+ width: 100%;
+ }
+
+ .cs-title,
+ .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-name {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-menu-p {
+ opacity: 0.8;
+ color: #fff;
+ }
+ }
+
+ &.cs-menu-style3 {
+ background-color: rgba(255, 255, 255, 0.7);
+ }
+ }
+
+ .cs-content {
+ z-index: 20;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: center;
+ width: 100%;
+ /* set text align to left if content needs to be left aligned */
+ text-align: center;
+ }
+
+ .cs-title {
+ position: relative;
+ margin: 0 0 (16/16rem) 0;
+ max-width: (700/16rem);
+ font-size: clamp(3.9375rem, 7.9vw, 5.4625rem);
+ line-height: 1.2em;
+ color: var(--headerColor);
+ text-align: inherit;
+ }
+
+ .cs-text {
+ margin: 0;
+ max-width: (650/16rem);
+ width: 100%;
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ text-align: inherit;
+ }
+
+ .cs-menu-list {
+ z-index: 20;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ width: 100%;
+ padding: 0;
+ row-gap: (32/16rem);
+ }
+
+ .cs-menu-row {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ /* 32px - 60px */
+ row-gap: clamp(2rem, 6vw, 3.75rem);
+ }
+
+ .cs-menu-item {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ width: 100%;
+ list-style: none;
+ text-align: left;
+ gap: (16/16rem);
+ }
+
+ .cs-h3 {
+ position: relative;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ margin: 0;
+ width: 100%;
+ /* 20px - 25px */
+ font-size: clamp(1.25rem, 2vw, 1.5625rem);
+ line-height: 1.2em;
+ font-weight: 700;
+ gap: (16/16rem);
+
+ &:after {
+ /* forces it into the 2nd position */
+ order: 2;
+ position: relative;
+ /* divider line */
+ content: "";
+ opacity: 1;
+ display: block;
+ margin-top: clamp(1.125rem, 2vw, 1.5rem);
+ background: #b4b2c7;
+ height: 1px;
+ max-width: (200/16rem);
+ min-width: (16/16rem);
+ width: 100%;
+ }
+ }
+
+ .cs-name {
+ display: block;
+ /* 4px - 8px */
+ margin: clamp(0.25rem, 0.8vw, 0.625rem) 0 0 0;
+ margin-right: auto;
+ max-width: 16ch;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+
+ .cs-price {
+ /* forces it into the 3rd position */
+ order: 3;
+ display: block;
+ border: 1px solid #b4b2c7;
+ border-radius: (80/16rem);
+ margin: 0;
+ background-color: #fff;
+ width: auto;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ padding: (8/16rem) (12/16rem);
+ /* 20px - 25px */
+ font-size: clamp(1rem, 2vw, 1.5625rem);
+ line-height: 1.2em;
+ font-weight: bold;
+ color: var(--primary);
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+
+ .cs-menu-p {
+ margin: 0;
+ width: 100%;
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ text-align: inherit;
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #cs-menu-group {
+ .cs-container {
+ max-width: (1280/16rem);
+ }
+
+ .cs-menu {
+ width: 100%;
+ &.cs-menu-style2 {
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FMISC%2Fwood.jpg");
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .cs-menu-row {
+ flex-direction: row;
+ justify-content: stretch;
+ width: 100%;
+ /* 32px - 80px */
+ gap: clamp(2em, 4vw, 5rem);
+
+ &.cs-3 {
+ .cs-h3 {
+ gap: (8/16rem);
+ &:after {
+ display: none;
+ }
+ }
+ .cs-name {
+ max-width: 20ch;
+ width: 70%;
+ font-size: clamp(1rem, 2vw, 1.5625rem);
+ }
+ }
+ }
+
+ .cs-menu-row {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ width: 100%;
+ }
+
+ .cs-menu-item {
+ margin: 0 auto;
+ max-width: (600/16rem);
+ grid-column: span 4;
+ }
+
+ .cs-name {
+ max-width: 70%;
+ width: fit-content;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #cs-menu-group {
+ background-color: rgba(0, 0, 0, 0.5);
+
+ .cs-wrapper {
+ background-color: var(--medium);
+ }
+
+ .cs-button {
+ color: #fff;
+ &:hover {
+ color: var(--secondary);
+ }
+ }
+ .cs-topper {
+ color: var(--primaryLight);
+ }
+ .cs-title,
+ .cs-text,
+ .cs-name,
+ .cs-menu-p {
+ color: var(--bodyTextColorWhite);
+ }
+ .cs-text,
+ .cs-menu-p {
+ opacity: 0.8;
+ }
+ .cs-price {
+ background-color: var(--medium);
+ color: var(--secondary);
+ }
+ .cs-menu-style2 .cs-price {
+ background-color: #fff;
+ color: var(--primary);
+ }
+
+ .cs-menu-style3 {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
+ }
+ }
+}
diff --git a/starter-styles/less/cms.less b/starter-styles/less/cms.less
new file mode 100644
index 0000000..6781280
--- /dev/null
+++ b/starter-styles/less/cms.less
@@ -0,0 +1,394 @@
+/*-- -------------------------- -->
+<--- Banner -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #banner-1400 {
+ padding: var(--sectionPadding);
+ padding-top: (270/16rem);
+ padding-bottom: (100/16rem);
+ position: relative;
+ z-index: 1;
+ /* clips the line from causing overflow issues for going off screen */
+ overflow: hidden;
+
+ .cs-container {
+ text-align: center;
+ width: 100%;
+ max-width: (1280/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ /* 8px - 12px */
+ gap: clamp(0.5rem, 1vw, 0.75rem);
+ }
+
+ .cs-int-title {
+ /* 39px - 61px */
+ font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
+ font-weight: 900;
+ line-height: 1.2em;
+ text-align: inherit;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ }
+
+ .cs-breadcrumbs {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-link {
+ font-size: (16/16rem);
+ line-height: 1.2em;
+ text-decoration: none;
+ color: var(--bodyTextColorWhite);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ &:last-of-type {
+ /* remove the chevron on the last list item */
+ &::after {
+ display: none;
+ }
+ }
+
+ &:after {
+ /* chevron */
+ content: "";
+ width: (7/16rem);
+ height: (12/16rem);
+ margin: 0 (16/16rem);
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/white-chev.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ display: block;
+ position: relative;
+ }
+
+ &.cs-active {
+ color: var(--primary);
+ }
+ }
+
+ .cs-background {
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ &:before {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.4;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ &:after {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 40%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ top,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* Makes img tag act as a background image */
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #banner-1400 {
+ .cs-background {
+ &:before {
+ width: 50%;
+ height: 100%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ left,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Content Page -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #content-page-847 {
+ padding: var(--sectionPadding);
+ background-color: #fff;
+ position: relative;
+ z-index: 1;
+ /* clips the wave background from causing overflow issues when it goes off screen */
+ overflow: hidden;
+
+ .cs-container {
+ width: 100%;
+ max-width: (1280/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ position: relative;
+ }
+
+ .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ max-width: (630/16rem);
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: 700;
+ text-align: inherit;
+ margin: 0 0 (16/16rem) 0;
+ color: var(--headerColor);
+ }
+
+ h2 {
+ font-size: (32/16rem);
+ margin-top: (32/16rem);
+ }
+
+ h3 {
+ font-size: (24/16rem);
+ color: var(--primary);
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: (20/16rem);
+ }
+
+ .cs-button-solid {
+ margin-bottom: (32/16rem);
+ }
+
+ .cs-no-margin {
+ margin: 0;
+ }
+
+ .cs-color {
+ color: var(--primary);
+ }
+
+ p {
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ text-align: inherit;
+ width: 100%;
+ margin: 0 0 (16/16rem) 0;
+ color: var(--bodyTextColor);
+ &:last-of-type {
+ margin-bottom: (32/16rem);
+ }
+
+ a {
+ font-size: inherit;
+ line-height: inherit;
+ text-decoration: underline;
+ color: var(--primary);
+ }
+ }
+
+ ol,
+ ul {
+ margin: 0 0 (32/16rem) 0;
+ padding-left: (24/16rem);
+ color: var(--bodyTextColor);
+ display: flex;
+ flex-direction: column;
+ gap: (16/16rem);
+ }
+
+ ul {
+ li {
+ list-style: none;
+ color: inherit;
+ position: relative;
+
+ &:before {
+ /* custom list bullet */
+ content: "";
+ width: 3px;
+ height: 3px;
+ background: currentColor;
+ opacity: 1;
+ border-radius: 50%;
+ display: block;
+ position: absolute;
+ top: (10/16rem);
+ left: (-12/16rem);
+ }
+ }
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+
+ .cs-image-group {
+ width: 50%;
+ max-width: (542/16rem);
+ display: none;
+ flex-direction: column;
+ gap: (20/16rem);
+ position: relative;
+ }
+
+ .cs-picture {
+ width: 100%;
+ /* 300px - 520px */
+ height: clamp(18.75rem, 40vw, 32.5rem);
+ /* prevents border from affecting height and width */
+ box-sizing: border-box;
+ box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
+ display: block;
+ position: relative;
+ /* clips img tag corners */
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* makes it act like a background image */
+ object-fit: cover;
+ }
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #content-page-847 {
+ .cs-container {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ }
+
+ .cs-content {
+ width: 60%;
+ flex: none;
+ }
+
+ .cs-image-group {
+ display: flex;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #content-page-847 {
+ background-color: var(--dark);
+
+ .cs-title,
+ .cs-text,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ li,
+ p {
+ color: var(--bodyTextColorWhite);
+ }
+ .cs-color,
+ a {
+ color: var(--primaryLight);
+ }
+
+ p,
+ li {
+ color: #ebebeb;
+ }
+
+ .cs-picture {
+ background-color: var(--dark);
+ border-color: var(--dark);
+ }
+ }
+ }
+}
diff --git a/starter-styles/less/collection.less b/starter-styles/less/collection.less
new file mode 100644
index 0000000..8f08773
--- /dev/null
+++ b/starter-styles/less/collection.less
@@ -0,0 +1,266 @@
+/*-- -------------------------- -->
+<--- Interior Page Header -->
+<--- -------------------------- -*/
+
+/* Mobile */
+@media only screen and (min-width: 0em) {
+ #int-hero {
+ min-height: 30vh;
+ padding-top: 9.375rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.7;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+
+ picture {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ h1 {
+ font-size: 2.13333333rem;
+ text-align: center;
+ width: 96%;
+ max-width: 31.25rem;
+ margin: 0 auto;
+ margin-top: 4.375rem;
+ margin-bottom: 1.875rem;
+ color: #fff;
+ position: relative;
+ }
+
+ p {
+ text-align: center;
+ width: 96%;
+ max-width: 25rem;
+ margin: auto;
+ margin-bottom: 1.875rem;
+ color: #fff;
+ display: block;
+ }
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: 48em) {
+ #int-hero {
+ font-size: 100%;
+
+ h1 {
+ font-size: 4rem;
+ }
+ }
+}
+
+/* Small Desktop */
+@media only screen and (min-width: 64em) {
+ #int-hero {
+ font-size: inherit;
+ height: auto;
+ min-height: 18.75rem;
+ padding-top: 11.25rem;
+ background-attachment: fixed;
+ padding-block-end: 6.25rem;
+ }
+}
+
+/*-- -------------------------- -->
+<--- Collection -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #collection {
+ padding: var(--sectionPadding);
+
+ .cs-container {
+ width: 100%;
+ max-width: (1280/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ position: relative;
+ z-index: 1;
+ }
+
+ .cs-card-group {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ justify-items: center;
+ grid-template-columns: repeat(auto-fit, minmax(19.0625rem, 1fr));
+ /* 16px - 20px */
+ column-gap: clamp(1rem, 3vw, 1.25rem);
+ /* 16px - 40px */
+ row-gap: clamp(1rem, 3vw, 2.5rem);
+ position: relative;
+ transform-style: preserve-3d;
+ }
+
+ .cs-item {
+ max-width: (296/16rem);
+ padding: (16/16rem);
+ border: 1px solid #e8e8e8;
+
+ &:hover .cs-picture img {
+ transform: scale(1.05);
+ }
+ }
+
+ .cs-link {
+ text-decoration: none;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .cs-image-group {
+ width: auto;
+ height: (300/16rem);
+ margin-bottom: (20/16rem);
+ position: relative;
+ }
+
+ .cs-picture {
+ width: 100%;
+ height: 100%;
+ display: block;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s;
+ }
+ }
+
+ .cs-offer {
+ font-size: (13/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-transform: uppercase;
+ letter-spacing: 1.3px;
+ padding: (6/16rem);
+ color: #fff;
+ background: #ff4747;
+ position: absolute;
+ top: (12/16rem);
+ right: (12/16rem);
+ }
+
+ .cs-product {
+ /* 20px - 24px */
+ font-size: clamp(1.25rem, 3vw, 1.5rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--headerColor);
+ }
+
+ .cs-wrapper {
+ margin-top: (20/16rem);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .cs-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .cs-price {
+ font-size: (20/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ color: var(--primary);
+ }
+
+ .cs-old-price {
+ font-size: (16/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-decoration: line-through;
+ color: #767676;
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #collection {
+ .cs-item {
+ max-width: none;
+ }
+
+ .cs-image-group {
+ height: clamp(12rem, 23vw, 20rem);
+ }
+ }
+}
+/* Small Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #collection {
+ .cs-card-group {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #collection {
+ .cs-offer,
+ .cs-product,
+ .cs-price,
+ .cs-old-price {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-item {
+ &:hover .cs-picture {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ }
+
+ .cs-picture {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+}
diff --git a/starter-styles/less/product.less b/starter-styles/less/product.less
new file mode 100644
index 0000000..eeec179
--- /dev/null
+++ b/starter-styles/less/product.less
@@ -0,0 +1,357 @@
+/*-- -------------------------- -->
+<--- Interior Page Header -->
+<--- -------------------------- -*/
+
+/* Mobile */
+@media only screen and (min-width: 0em) {
+ #int-hero {
+ min-height: 30vh;
+ padding-top: (150/16rem);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.7;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+
+ picture {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ h1 {
+ font-size: (34/16rem);
+ text-align: center;
+ width: 96%;
+ max-width: (500/16rem);
+ margin: 0 auto;
+ margin-top: (70/16rem);
+ margin-bottom: (30/16rem);
+ color: #fff;
+ position: relative;
+ }
+
+ p {
+ text-align: center;
+ width: 96%;
+ max-width: (400/16rem);
+ margin: auto;
+ margin-bottom: (30/16rem);
+ color: #fff;
+ display: block;
+ }
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: 48em) {
+ #int-hero {
+ font-size: 100%;
+
+ h1 {
+ font-size: 4rem;
+ }
+ }
+}
+
+/* Small Desktop */
+@media only screen and (min-width: 64em) {
+ #int-hero {
+ font-size: inherit;
+ height: auto;
+ min-height: (300/16rem);
+ padding-top: (180/16rem);
+ background-attachment: fixed;
+ padding-block-end: (100/16rem);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Product -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #product {
+ padding: var(--sectionPadding);
+ overflow: hidden;
+
+ .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: (750/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 28px - 64px */
+ gap: clamp(1.75rem, 5vw, 4rem);
+ }
+
+ .cs-large-image {
+ width: 100%;
+ /* 248px - 533px */
+ height: clamp(15.5rem, 70vw, 33.3125rem);
+ display: block;
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* as we want to show the product in full, contain the image in the img tag. then, use a matching background color for the whitespace. feel free to remove and use object-fit:cover if you'd rather */
+ object-fit: contain;
+ display: block;
+ }
+ }
+
+ .cs-h3 {
+ font-size: var(--headerFontSize);
+ font-weight: 900;
+ line-height: 1.2em;
+ margin: 0 0 (8/16rem);
+ color: var(--headerColor);
+ }
+
+ .cs-price {
+ font-size: (20/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ color: var(--secondary);
+ display: block;
+ }
+
+ .cs-compare-price {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ text-decoration: line-through;
+ color: #767676;
+ display: block;
+ }
+
+ .cs-taxes {
+ font-size: (14/16rem);
+ font-weight: 400;
+ line-height: 1.5em;
+ color: var(--primary);
+ display: block;
+ }
+
+ .cs-info-text {
+ font-size: (16/16rem);
+ font-weight: 400;
+ line-height: 1.5em;
+ /* 12px - 16px */
+ margin: clamp(0.75rem, 2vw, 1rem) 0 (8/16rem);
+ color: var(--bodyTextColor);
+ }
+
+ .cs-details {
+ font-size: (16/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ width: fit-content;
+ margin-bottom: (24/16rem);
+ color: var(--bodyTextColor);
+ /* using a border-bottom instead of text-decoration to give more space between the line and the text */
+ border-bottom: 1px solid var(--bodyTextColor);
+ display: block;
+ }
+
+ .cs-option {
+ font-size: (14/16rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ }
+
+ .cs-dropdown {
+ width: 100%;
+ max-width: (240/16rem);
+ height: (48/16rem);
+ margin-bottom: (24/16rem);
+ padding: 0 (16/16rem);
+ background: #f7f7f7;
+ border: 1px solid #e8e8e8;
+ border-radius: (100/16rem);
+ outline: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: (16/16rem);
+ cursor: pointer;
+ }
+
+ .cs-quantity {
+ width: 100%;
+ width: fit-content;
+ max-width: (240/16rem);
+ height: (48/16rem);
+ margin-bottom: (24/16rem);
+ padding: 0 (16/16rem);
+ background: #f7f7f7;
+ border: 1px solid #e8e8e8;
+ border-radius: (100/16rem);
+ outline: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: (16/16rem);
+ cursor: pointer;
+ }
+
+ .cs-select-icon {
+ display: none;
+ }
+
+ .cs-quantity-increment {
+ font-size: (24/16rem);
+ color: #767676;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .cs-quantity-decrement {
+ font-size: (24/16rem);
+ color: #767676;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .cs-quantity-input {
+ font-size: (20/16rem);
+ line-height: 1.5em;
+ text-align: center;
+ width: (32/16rem);
+ background-color: transparent;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-quantity-input[type="number"] {
+ margin: 0;
+ -webkit-appearance: none;
+ -moz-appearance: textfield;
+ }
+
+ .cs-button {
+ font-size: (16/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ padding: (16/16rem);
+ background: none;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1 0 0;
+ }
+
+ .cs-cart {
+ border: 1px solid #1a1a1a;
+ }
+
+ .cs-buy {
+ color: #fff;
+ background-color: var(--primary);
+ cursor: pointer;
+ }
+ }
+
+ .visuallyhidden {
+ white-space: nowrap;
+ width: 1px;
+ height: 1px;
+ position: absolute;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ }
+}
+
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #product {
+ .cs-container {
+ max-width: (1280/16rem);
+ flex-direction: row;
+ align-items: start;
+ }
+
+ .cs-large-image {
+ height: 100%;
+ /* dont grow or shrink and set the flex basis to 540px. the large image will stay at this width and the other content will adapt */
+ flex: 0 0 (540/16rem);
+ }
+
+ .cs-product-info {
+ /* grow to fill the rest of the flex-container */
+ flex: 1 0 0;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #product {
+ .cs-h3,
+ .cs-info-text,
+ .cs-details,
+ .cs-option,
+ .cs-option b,
+ .cs-box,
+ .cs-quantity,
+ .cs-cart {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-price {
+ color: var(--primaryLight);
+ }
+
+ .cs-taxes {
+ color: var(--secondaryLight);
+ }
+
+ .cs-info-text {
+ opacity: 0.8;
+ }
+
+ .cs-box-number,
+ .cs-quantity,
+ .cs-cart {
+ background-color: var(--medium);
+ border-color: var(--accent);
+ }
+ }
+ }
+}
diff --git a/starter-styles/less/shop.less b/starter-styles/less/shop.less
new file mode 100644
index 0000000..14d03a2
--- /dev/null
+++ b/starter-styles/less/shop.less
@@ -0,0 +1,724 @@
+/*-- -------------------------- -->
+<--- Banner -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #banner-1400 {
+ padding: var(--sectionPadding);
+ /* 190px - 268px */
+ padding-top: clamp(11.875rem, 25vw, 16.75rem);
+ padding-bottom: (100/16rem);
+ position: relative;
+ z-index: 1;
+ /* clips the line from causing overflow issues for going off screen */
+ overflow: hidden;
+
+ .cs-container {
+ text-align: center;
+ width: 100%;
+ max-width: (1280/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ /* 8px - 12px */
+ gap: clamp(0.5rem, 1vw, 0.75rem);
+ }
+
+ .cs-int-title {
+ /* 39px - 61px */
+ font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
+ font-weight: 900;
+ line-height: 1.2em;
+ text-align: inherit;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ }
+
+ .cs-breadcrumbs {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-link {
+ font-size: (16/16rem);
+ line-height: 1.2em;
+ text-decoration: none;
+ color: var(--bodyTextColorWhite);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ &:last-of-type {
+ /* remove the chevron on the last list item */
+ &::after {
+ display: none;
+ }
+ }
+
+ &:after {
+ /* chevron */
+ content: "";
+ width: (7/16rem);
+ height: (12/16rem);
+ margin: 0 (16/16rem);
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/white-chev.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ display: block;
+ position: relative;
+ }
+
+ &.cs-active {
+ color: var(--primary);
+ }
+ }
+
+ .cs-background {
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ &:before {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.4;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ &:after {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 40%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ top,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* Makes img tag act as a background image */
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #banner-1400 {
+ .cs-background {
+ &:before {
+ width: 50%;
+ height: 100%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ left,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Side By Side -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #sbs-297 {
+ padding: var(--sectionPadding);
+
+ .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: (550/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: center;
+ width: 100%;
+ max-width: (522/16rem);
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: center;
+ }
+
+ .cs-text {
+ margin-bottom: (16/16rem);
+ &:last-of-type {
+ margin-bottom: (32/16rem);
+ }
+ }
+
+ .cs-link {
+ font-size: (20/16rem);
+ font-weight: 700;
+ text-decoration: none;
+ color: var(--primary);
+ }
+
+ .cs-image-group {
+ width: 100%;
+ max-width: (550/16rem);
+ /* 78px - 108px */
+ margin: 0 auto clamp(4.875rem, 16.5vw, 6.75rem);
+ display: block;
+ position: relative;
+ /* width divided by height */
+ aspect-ratio: 328/363;
+ }
+
+ .cs-picture {
+ /* big background image */
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-box {
+ /* 204px - 326px & changes at desktop */
+ width: clamp(12.75rem, 50vw, 20.375rem);
+ height: clamp(12.75rem, 50vw, 20.375rem);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ /* 38px - 60px - wrapped in a calc function to make clamp values negative */
+ bottom: ~"calc(clamp(2.375rem, 7.9vw, 3.75rem) *-1)";
+ left: 50%;
+ z-index: 10;
+ overflow: hidden;
+ transform: translateX(-50%);
+ }
+
+ .cs-box-picture {
+ /* Background image for cs-box */
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ /* clips img corners and bg corners */
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.65;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-number {
+ /* 75px - 100px */
+ font-size: clamp(4.6875rem, 8vw, 6.25rem);
+ font-weight: 900;
+ line-height: 1em;
+ margin-bottom: (8/16rem);
+ color: var(--headerColor);
+ display: block;
+ z-index: 10;
+ /* creates the transparent clipping text */
+ mix-blend-mode: screen;
+
+ &:before {
+ /* opaque white box - For mix-blend-mode to work, we need the
+ white box inside the .cs-number, so we use a pseudo element.
+ We DON'T add a position to the cs-number so the pseudo positions
+ itself relative to the .cs-box, which has position relative. This
+ allows us to center to .cs-number pseudo inside the .cs-box */
+ content: "";
+ /* 184px - 294px & changes at desktop */
+ width: clamp(11.5rem, 45vw, 18.375rem);
+ height: clamp(11.5rem, 45vw, 18.375rem);
+ background-color: #fff;
+ opacity: 1;
+ display: block;
+ position: absolute;
+ /* these next 3 properties are an old school way to center an absolutely
+ positioned element inside a relative position parent */
+ top: 50%;
+ left: 50%;
+ z-index: -1;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ .cs-desc {
+ /* 16px - 25px */
+ font-size: clamp(1rem, 4vw, 1.5625rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: center;
+ text-transform: lowercase;
+ width: 80%;
+ color: var(--headerColor);
+ position: relative;
+ z-index: 10;
+ }
+ }
+}
+
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #sbs-297 {
+ /* aligns the button */
+ text-align: left;
+ .cs-container {
+ max-width: (1280/16rem);
+ /* set to horizontal arrangement */
+ flex-direction: row;
+ justify-content: space-between;
+ gap: (160/16rem);
+ }
+
+ .cs-content {
+ text-align: left;
+ align-items: flex-start;
+ }
+
+ .cs-image-group {
+ width: 40vw;
+ max-width: (521/16rem);
+ /* 520px - 672px */
+ height: clamp(32.5rem, 51.9vw, 42rem);
+ margin: 0;
+ }
+
+ .cs-box {
+ /* 251px - 325px */
+ width: clamp(15.6875rem, 24.5vw, 20.3125rem);
+ height: clamp(15.6875rem, 24.5vw, 20.3125rem);
+ /* -52px to -102px */
+ right: ~"calc(clamp(3.25rem, 5.5vw + 1.6rem, 6.375rem) *-1)";
+ /* 62px - 80px */
+ bottom: clamp(3.875rem, 6.2vw, 5rem);
+ left: auto;
+ transform: none;
+ }
+
+ .cs-number {
+ &:before {
+ /* 226px - 293px */
+ width: clamp(14.125rem, 22.7vw, 18.3125rem);
+ height: clamp(14.125rem, 22.7vw, 18.3125rem);
+ }
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #sbs-297 {
+ .cs-topper {
+ color: var(--secondaryLight);
+ }
+
+ .cs-title,
+ .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-link {
+ color: var(--secondaryLight);
+ }
+
+ .cs-text {
+ opacity: 0.8;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Stats -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #stats-1642 {
+ padding: var(--sectionPadding);
+
+ .cs-container {
+ width: 100%;
+ max-width: (1280/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+
+ .cs-content {
+ /* set text align to right if content needs to be right aligned */
+ text-align: left;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* left aligns content */
+ align-items: flex-start;
+ }
+
+ .cs-title {
+ max-width: 20ch;
+ /* 28px - 64px */
+ margin: 0 0 clamp(1.75rem, 7vw, 4rem) 0;
+ }
+
+ .cs-picture {
+ width: 100%;
+ height: 95vw;
+ max-height: (400/16rem);
+ display: block;
+ position: relative;
+ z-index: 1;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-quote {
+ width: (74/16rem);
+ height: auto;
+ opacity: 0.5;
+ position: relative;
+ top: (24/16rem);
+ z-index: -1;
+ }
+
+ .cs-text {
+ margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0;
+ }
+
+ .cs-stats-group {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* 28px - 40px */
+ }
+
+ .cs-card-group {
+ width: 100%;
+ /* 550px - 630px */
+ max-width: clamp(34.375rem, 50vw, 39.375rem);
+ margin: 0;
+ padding: 0;
+ display: grid;
+ align-items: center;
+ gap: (24/16rem);
+ }
+
+ .cs-item {
+ list-style: none;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: (8/16rem);
+ }
+
+ .wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ gap: (10/16rem);
+ }
+
+ .cs-item-number {
+ font-size: (20/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--primary);
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: (8/16rem);
+ }
+
+ .cs-h3 {
+ font-size: (20/16rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--headerColor);
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: (8/16rem);
+ }
+
+ .cs-item-text {
+ font-size: (16/16rem);
+ line-height: 1.5em;
+ margin: 0;
+ color: var(--bodyTextColor);
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #stats-1642 {
+ .cs-container {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .cs-content {
+ justify-content: stretch;
+ /* sends it to the right in the 2nd position */
+ order: 2;
+ }
+
+ .cs-picture {
+ height: 100%;
+ max-height: 100%;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #stats-1642 {
+ .cs-title,
+ .cs-text,
+ .cs-item-text,
+ .cs-h3 {
+ color: var(--bodyTextColorWhite);
+ }
+ .cs-text,
+ .cs-item-text {
+ opacity: 0.8;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Side By Side -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #sbs-1640 {
+ padding: var(--sectionPadding);
+ background-color: #111926;
+ overflow: hidden;
+
+ .cs-container {
+ width: 100%;
+ /* changes to 1280px at tablet */
+ max-width: (584/16rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+
+ .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ max-width: (630/16rem);
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ position: relative;
+ z-index: 10;
+ }
+
+ .cs-title {
+ margin: 0 0 (40/16rem) 0;
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-text {
+ margin-bottom: (16/16rem);
+ color: var(--bodyTextColorWhite);
+ opacity: 0.8;
+
+ &:last-of-type {
+ margin-bottom: (32/16rem);
+ }
+ }
+
+ .cs-picture {
+ width: 100%;
+ height: auto;
+ min-height: (420/16rem);
+ display: block;
+ position: relative;
+ z-index: 1;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-stats-group {
+ width: 100%;
+ max-width: (570/16rem);
+ display: flex;
+ flex-direction: column;
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #sbs-1640 {
+ .cs-container {
+ max-width: (1280/16rem);
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .cs-stats-group {
+ /* 52px - 90px */
+ margin-bottom: clamp(3.25rem, 7vw, 5.625rem);
+ /* 60px - 120px */
+ padding-top: clamp(3.75rem, 10vw, 7.5rem);
+ /* 60px - 80px */
+ padding-bottom: clamp(3.75rem, 8vw, 5rem);
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 200vw;
+ height: 100%;
+ background: #fff;
+ opacity: 1;
+ display: block;
+ position: absolute;
+ top: 100%;
+ left: -100%;
+ z-index: -1;
+ transform: translateX(-50%);
+ }
+ }
+
+ .cs-picture {
+ height: 100%;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #sbs-1640 {
+ background-color: rgba(0, 0, 0, 0.6);
+
+ .cs-stats-group {
+ &:before {
+ background-color: var(--dark);
+ }
+ }
+ }
+ }
+}
diff --git a/starter-styles/sass/cms-blog.scss b/starter-styles/sass/cms-blog.scss
new file mode 100644
index 0000000..0e8ccf8
--- /dev/null
+++ b/starter-styles/sass/cms-blog.scss
@@ -0,0 +1,722 @@
+/*-- -------------------------- -->
+<--- Core Styles -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-container {
+ width: 94%;
+ max-width: calc(1120 / 16 * 1em);
+ margin: auto;
+ }
+
+ .blog-link {
+ font-size: calc(16 / 16 * 1rem);
+ font-weight: 700;
+ /* 46px - 56px */
+ line-height: clamp(2.875em, 5.5vw, 3.5em);
+ text-align: center;
+ text-decoration: none;
+ min-width: calc(150 / 16 * 1rem);
+ margin: auto;
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 calc(24 / 16 * 1rem);
+ color: #fff;
+ background-color: var(--headerColor);
+ border-radius: calc(4 / 16 * 1rem);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ z-index: 1;
+ transition: color 0.3s;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: #fff;
+ opacity: 0;
+ border: 1px solid var(--headerColor);
+ border-radius: calc(4 / 16 * 1rem);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ z-index: -1;
+ transition: opacity 0.3s;
+ }
+
+ &:hover {
+ color: var(--headerColor);
+ &:before {
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Header -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ #header {
+ position: relative;
+ z-index: 1;
+
+ .blog-container {
+ padding: clamp(100px, 14vw, 200px) 0 clamp(50px, 11vw, 100px);
+ }
+
+ .blog-header {
+ font-size: clamp(24px, 4vw, 48px);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: left;
+ width: 100%;
+ margin: 0;
+ color: #fff;
+ }
+
+ .blog-bg {
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ &:before {
+ /* color overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.6;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Interior Page Header -->
+<--- -------------------------- -*/
+
+/* Mobile */
+@media only screen and (min-width: 0em) {
+ #int-hero {
+ min-height: 30vh;
+ padding-top: calc(270 / 16 * 1rem);
+ padding-bottom: calc(80 / 16 * 1rem);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.7;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+
+ picture {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ h1 {
+ font-size: calc(64 / 30 * 1rem);
+ text-align: center;
+ width: 96%;
+ max-width: calc(500 / 16 * 1rem);
+ margin: 0 auto;
+ margin-top: calc(70 / 16 * 1rem);
+ margin-bottom: calc(30 / 16 * 1rem);
+ color: #fff;
+ position: relative;
+ }
+
+ p {
+ text-align: center;
+ width: 96%;
+ max-width: calc(400 / 16 * 1rem);
+ margin: auto;
+ margin-bottom: calc(30 / 16 * 1rem);
+ color: #fff;
+ display: block;
+ }
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: 48em) {
+ #int-hero {
+ font-size: 100%;
+
+ h1 {
+ font-size: calc(64 / 16 * 1rem);
+ }
+ }
+}
+
+/* Small Desktop */
+@media only screen and (min-width: 64em) {
+ #int-hero {
+ font-size: inherit;
+ height: auto;
+ min-height: calc(300 / 16 * 1rem);
+ padding-top: calc(180 / 16 * 1rem);
+ background-attachment: fixed;
+ padding-block-end: calc(100 / 16 * 1rem);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Main Content -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-container {
+ padding: clamp(60px, 7vw, 100px) 0;
+ }
+
+ .main-content-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: calc(50 / 16 * 1em);
+ }
+
+ .main-content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: calc(50 / 16 * 1em);
+ }
+}
+
+/* Tablet - 1024px */
+@media only screen and (min-width: 64em) {
+ .main-content-wrapper {
+ flex-direction: row;
+ align-items: flex-start;
+ column-gap: calc(20 / 16 * 1em);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Recent Blog Articles -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .recent-articles {
+ width: 100%;
+ max-width: calc(795 / 16 * 1em);
+ overflow: hidden;
+ flex: none;
+
+ .blog-mainImage {
+ width: 100%;
+ height: clamp(200px, 30vw, 400px);
+ border-radius: calc(8 / 16 * 1em) calc(8 / 16 * 1em) 0 0;
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .article-group {
+ padding: clamp(30px, 5vw, 50px);
+ border: 1px solid #ebebeb;
+ border-radius: 0 0 calc(8 / 16 * 1em) calc(8 / 16 * 1em);
+ }
+
+ .blog-author-img {
+ width: calc(32 / 16 * 1em);
+ height: calc(32 / 16 * 1em);
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .blog-authorGroup {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: calc(12 / 16 * 1rem);
+ }
+
+ .blog-author,
+ .blog-date {
+ font-size: calc(14 / 16 * 1rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ }
+
+ .blog-dot {
+ width: 3px;
+ height: 3px;
+ background-color: var(--primary);
+ border-radius: 50%;
+ display: block;
+ }
+
+ .blog-h1 {
+ font-size: clamp(20px, 5vw, 32px);
+ font-weight: 700;
+ line-height: 1.4em;
+ margin: calc(16 / 16 * 1rem) 0;
+ color: var(--headerColor);
+ }
+
+ .blog-desc {
+ font-size: calc(16 / 16 * 1rem);
+ line-height: 1.5em;
+ margin: calc(16 / 16 * 1rem) 0 calc(32 / 16 * 1rem);
+ color: var(--bodyTextColor);
+ }
+
+ .blog-link {
+ font-size: calc(16 / 16 * 1rem);
+ font-weight: 700;
+ /* 46px - 56px */
+ line-height: clamp(2.875em, 5.5vw, 3.5em);
+ text-align: center;
+ text-decoration: none;
+ min-width: calc(150 / 16 * 1rem);
+ margin: auto;
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 calc(24 / 16 * 1rem);
+ color: #fff;
+ background-color: var(--headerColor);
+ border-radius: calc(4 / 16 * 1rem);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ z-index: 1;
+ transition: color 0.3s;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: #fff;
+ opacity: 0;
+ border: 1px solid var(--headerColor);
+ border-radius: calc(4 / 16 * 1rem);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ z-index: -1;
+ transition: opacity 0.3s;
+ }
+
+ &:hover {
+ color: var(--headerColor);
+ &:before {
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
+
+/* Mobile - 1024px */
+@media only screen and (min-width: 64em) {
+ .recent-articles {
+ .blog-h1 {
+ max-width: calc(500 / 16 * 1rem);
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0em) {
+ body.dark-mode {
+ .recent-articles {
+ .blog-h1,
+ .blog-desc,
+ .blog-author,
+ .blog-date {
+ color: #f7f7f7;
+ }
+ }
+
+ .blog-sidebar {
+ .feature-h3,
+ .feature-date,
+ .blog-header {
+ color: #f7f7f7;
+ }
+ .blog-header {
+ &:after {
+ background: var(--primary);
+ }
+ }
+ }
+
+ .blog-article {
+ .blog-h1,
+ .blog-author,
+ .blog-date {
+ color: #f7f7f7;
+ }
+
+ #blog-content {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: #f7f7f7;
+ }
+ p,
+ li {
+ color: #f7f7f7;
+ opacity: 0.8;
+ }
+ a {
+ color: #9dafe5;
+ }
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Sidebar -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-sidebar {
+ width: 100%;
+ max-width: calc(795 / 16 * 1em);
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: calc(50 / 16 * 1em);
+
+ .blog-featured-group {
+ width: 100%;
+ padding: calc(35 / 16 * 1em) calc(30 / 16 * 1em);
+ border: 1px solid #ebebeb;
+ border-radius: calc(8 / 16 * 1em);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .blog-header {
+ font-size: calc(20 / 16 * 1em);
+ font-weight: bold;
+ text-align: center;
+ margin-bottom: calc(30 / 16 * 1rem);
+ color: var(--headerColor);
+ display: block;
+ position: relative;
+
+ &:after {
+ content: "";
+ width: calc(50 / 16 * 1rem);
+ height: 3px;
+ margin: calc(16 / 16 * 1rem) auto;
+ background: var(--headerColor);
+ border-radius: calc(4 / 16 * 1rem);
+ display: block;
+ position: relative;
+ }
+ }
+
+ .blog-feature {
+ text-decoration: none;
+ width: 100%;
+ padding: calc(20 / 16 * 1rem) 0;
+ border-bottom: 1px solid #ebebeb;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ column-gap: calc(24 / 16 * 1em);
+
+ &:nth-of-type(1) {
+ padding-top: 0;
+ }
+
+ &:last-of-type {
+ padding-bottom: 0;
+ border: none;
+ }
+ }
+
+ .blog-featureImage {
+ width: calc(60 / 16 * 1em);
+ height: calc(60 / 16 * 1em);
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ overflow: hidden;
+ flex: none;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .feature-h3 {
+ font-size: calc(15 / 16 * 1rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ text-decoration: none;
+ margin: 0;
+ margin-bottom: calc(4 / 16 * 1rem);
+ color: var(--headerColor);
+ display: block;
+ }
+
+ .feature-date {
+ font-size: calc(14 / 16 * 1rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ display: block;
+ }
+ }
+}
+
+/* Tablet - 1024px */
+@media only screen and (min-width: 64em) {
+ .blog-sidebar {
+ max-width: calc(360 / 16 * 1em);
+ }
+}
+
+/*-- -------------------------- -->
+<--- Blog Articles -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ .blog-article {
+ width: 100%;
+ max-width: calc(795 / 16 * 1em);
+ display: block;
+ .blog-mainImage {
+ width: 100%;
+ height: clamp(200px, 30vw, 400px);
+ margin-bottom: calc(50 / 16 * 1em);
+ border-radius: calc(8 / 16 * 1em);
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .blog-author-img {
+ width: calc(32 / 16 * 1em);
+ height: calc(32 / 16 * 1em);
+ border-radius: 50%;
+ display: block;
+ position: relative;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .blog-authorGroup {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: calc(12 / 16 * 1rem);
+ }
+
+ .blog-author,
+ .blog-date {
+ font-size: calc(14 / 16 * 1rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ }
+
+ .blog-dot {
+ width: 3px;
+ height: 3px;
+ background-color: #fe4f70;
+ border-radius: 50%;
+ display: block;
+ }
+
+ .blog-h1 {
+ font-size: clamp(20px, 5vw, 39px);
+ font-weight: 700;
+ line-height: 1.4em;
+ max-width: calc(550 / 16 * 1rem);
+ margin: calc(16 / 16 * 1rem) 0;
+ color: var(--headerColor);
+ }
+
+ #blog-content {
+ margin-top: calc(16 / 16 * 1em);
+ padding-top: calc(25 / 16 * 1em);
+ border-top: 1px solid #ebebeb;
+
+ h1 {
+ font-size: 2.25rem;
+ font-weight: 700;
+ line-height: 1.75em;
+ margin-bottom: 1rem;
+ color: var(--headerColor);
+ }
+
+ h2 {
+ font-size: calc(28 / 16 * 1rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: calc(16 / 16 * 1rem);
+ color: var(--headerColor);
+ }
+
+ h3 {
+ font-size: calc(24 / 16 * 1rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: calc(16 / 16 * 1rem);
+ color: var(--headerColor);
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: calc(20 / 16 * 1rem);
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: calc(16 / 16 * 1rem);
+ color: var(--headerColor);
+ }
+
+ p {
+ font-size: calc(16 / 16 * 1rem);
+ line-height: 1.6em;
+ margin: 0;
+ margin-bottom: calc(16 / 16 * 1rem);
+ color: var(--bodyTextColor);
+ }
+
+ a {
+ font-size: inherit;
+ text-decoration: underline;
+ color: var(--secondary);
+ }
+
+ ul,
+ ol {
+ margin: 0;
+ margin: calc(16 / 16 * 1rem) 0;
+ padding-left: calc(40 / 16 * 1rem);
+
+ li {
+ font-size: calc(16 / 16 * 1rem);
+ line-height: 1.6em;
+ list-style: circle;
+ margin-bottom: calc(16 / 16 * 1rem);
+ color: var(--bodyTextColor);
+ }
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ margin: calc(16 / 16 * 1rem) 0;
+ border-radius: calc(8 / 16 * 1rem);
+ display: block;
+ }
+ }
+ }
+}
diff --git a/starter-styles/sass/cms-menu.scss b/starter-styles/sass/cms-menu.scss
new file mode 100644
index 0000000..133e880
--- /dev/null
+++ b/starter-styles/sass/cms-menu.scss
@@ -0,0 +1,538 @@
+/*-- -------------------------- -->
+<--- Banner -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0em) {
+ #banner-1018 {
+ z-index: 1;
+ position: relative;
+ background-color: #000;
+ padding: 0 calc(16 / 16 * 1rem);
+ /* 160px - 245px */
+ padding-top: calc(270 / 16 * 1rem);
+ padding-bottom: calc(120 / 16 * 1rem);
+
+ .cs-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ max-width: calc(1280 / 16 * 1rem);
+ width: 100%;
+ text-align: center;
+ }
+
+ .cs-picture {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 0 calc(12 / 16 * 1rem);
+ width: 100%;
+ gap: calc(16 / 16 * 1rem);
+
+ &:before {
+ position: relative;
+ /* left line */
+ content: "";
+ opacity: 1;
+ display: block;
+ background: #b4b2c7;
+ height: 1px;
+ max-width: calc(150 / 16 * 1rem);
+ width: 50%;
+ }
+
+ &:after {
+ position: relative;
+ /* right line */
+ content: "";
+ opacity: 1;
+ display: block;
+ background: #b4b2c7;
+ height: 1px;
+ max-width: calc(150 / 16 * 1rem);
+ width: 50%;
+ }
+ }
+
+ .cs-icon {
+ height: auto;
+ /* 100px - 180px */
+ max-width: clamp(6.25rem, 18vw, 11.25rem);
+ width: 40%;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+
+ .cs-int-title {
+ position: relative;
+ margin: 0 0 calc(16 / 16 * 1rem) 0;
+ max-width: calc(700 / 16 * 1rem);
+ /* 39px - 61px */
+ font-size: clamp(2.4375rem, 6.5vw, 3.8125rem);
+ line-height: 1.2em;
+ font-weight: 900;
+ color: var(--bodyTextColorWhite);
+ text-align: center;
+ }
+
+ .cs-text {
+ margin: 0;
+ max-width: calc(765 / 16 * 1rem);
+ width: 100%;
+ /* 16px - 20px */
+ font-size: clamp(1rem, 2vw, 1.25rem);
+ line-height: 1.5em;
+ color: var(--bodyTextColorWhite);
+ text-align: inherit;
+ }
+
+ .cs-background {
+ z-index: -1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0.7;
+ display: block;
+ height: 100%;
+ width: 100%;
+
+ &:before {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ /* black overlay box */
+ content: "";
+ opacity: 0.72;
+ display: block;
+ background: #000;
+ height: 100%;
+ width: 100%;
+ }
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Menu -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ html,
+ body {
+ overflow: initial;
+ /* when you click a menu button and jump to the top of the screen this makes it so it has a smooth transiiton instead of an abrupt movement */
+ scroll-behavior: smooth;
+ }
+
+ #cs-menu-group {
+ height: auto;
+ padding: var(--sectionPadding);
+ padding-right: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
+
+ text-align: center;
+
+ .cs-container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: auto;
+ /* changes to 1280px at tablet */
+ max-width: calc(550 / 16 * 1em);
+ width: 100%;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ padding: var(--sectionPadding);
+ /* 48px - 64px */
+ padding-top: clamp(3em, 5vw, 4em);
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+
+ .cs-hidden {
+ display: none;
+ }
+
+ .cs-wrapper {
+ z-index: 10000;
+ position: sticky;
+ /* change based on how tall your navigation is above it. If your navigation is 90px tall, set it to 100px from the top on mobile, and increase the larger value in the clamp to change the desktop value if you need to as well */
+ top: calc(208 / 16 * 1rem);
+ display: flex;
+ flex-wrap: wrap;
+ grid-template-columns: repeat(12, 1fr);
+ justify-content: center;
+ border: 1px solid #b4b2c7;
+ border-radius: calc(70 / 16 * 1em);
+ margin: 0 auto;
+ background-color: #f3f3f3;
+ max-width: calc(900 / 16 * 1rem);
+ width: 94%;
+ box-sizing: border-box;
+ padding: 0;
+ /* 16px - 28px top & bottom */
+ /* 32px - 48px left & right */
+ padding: clamp(1em, 3vw, 1.75em) clamp(2em, 4vw, 3em);
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+ column-gap: clamp(0.5rem, 2vw, 1.5rem);
+ row-gap: calc(8 / 16 * 1rem);
+ }
+
+ .cs-button-group {
+ z-index: 1000;
+ margin: 0 calc(8 / 16 * 1rem) 0 0;
+ width: auto;
+ grid-column: span 6;
+ /* 24px - 36px */
+ column-gap: clamp(1.5rem, 2vw, 2.25rem);
+ row-gap: calc(12 / 16 * 1rem);
+ }
+
+ .cs-button {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ background-color: transparent;
+ width: 100%;
+ padding: calc(4 / 16 * 1rem);
+ font-size: clamp(0.875rem, 1.3vw, 1rem);
+ line-height: 1.5;
+ font-weight: 400;
+ color: #878787;
+ transition: color 0.3s, font-weight 0.3s, color 0.3s;
+
+ &:hover {
+ color: var(--primary);
+ cursor: pointer;
+ }
+
+ &:after {
+ position: relative;
+ /* active state icon */
+ content: "";
+ opacity: 0;
+ display: block;
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ffancy-icon.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ /* 16px - 24px */
+ height: clamp(1em, 3vw, 1.5em);
+ width: 0;
+ transition: width 0.3s, opacity 0.3s, margin-left 0.3s;
+ }
+
+ &.cs-active {
+ font-weight: 700;
+ color: var(--headerColor);
+ &:after {
+ opacity: 1;
+ /* 8px - 16px */
+ margin-left: clamp(0.5em, 0.5vw, 1em);
+ width: clamp(1.5625em, 3vw, 2.25em);
+ }
+ }
+ }
+
+ .cs-menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 32px - 64px */
+ gap: clamp(2rem, 6vw, 4rem);
+
+ &.cs-menu-style2 {
+ position: relative;
+ /* changes to desktop at desktop */
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FMISC%2Fwood2-m.jpg");
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ &:before {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "";
+ opacity: 0.7;
+ display: block;
+ background: #000;
+ height: 100%;
+ width: 100%;
+ }
+
+ .cs-title,
+ .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-name {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-menu-p {
+ opacity: 0.8;
+ color: #fff;
+ }
+ }
+
+ &.cs-menu-style3 {
+ background-color: rgba(255, 255, 255, 0.7);
+ }
+ }
+
+ .cs-content {
+ z-index: 20;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: center;
+ width: 100%;
+ /* set text align to left if content needs to be left aligned */
+ text-align: center;
+ }
+
+ .cs-title {
+ position: relative;
+ margin: 0 0 calc(16 / 16 * 1rem) 0;
+ max-width: calc(700 / 16 * 1rem);
+ font-size: clamp(3.9375rem, 7.9vw, 5.4625rem);
+ line-height: 1.2em;
+ color: var(--headerColor);
+ text-align: inherit;
+ }
+
+ .cs-text {
+ margin: 0;
+ max-width: calc(650 / 16 * 1rem);
+ width: 100%;
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ text-align: inherit;
+ }
+
+ .cs-menu-list {
+ z-index: 20;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ width: 100%;
+ padding: 0;
+ row-gap: calc(32 / 16 * 1rem);
+ }
+
+ .cs-menu-row {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ /* 32px - 60px */
+ row-gap: clamp(2rem, 6vw, 3.75rem);
+ }
+
+ .cs-menu-item {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ width: 100%;
+ list-style: none;
+ text-align: left;
+ gap: calc(16 / 16 * 1rem);
+ }
+
+ .cs-h3 {
+ position: relative;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ margin: 0;
+ width: 100%;
+ /* 20px - 25px */
+ font-size: clamp(1.25rem, 2vw, 1.5625rem);
+ line-height: 1.2em;
+ font-weight: 700;
+ gap: calc(16 / 16 * 1rem);
+
+ &:after {
+ /* forces it into the 2nd position */
+ order: 2;
+ position: relative;
+ /* divider line */
+ content: "";
+ opacity: 1;
+ display: block;
+ margin-top: clamp(1.125rem, 2vw, 1.5rem);
+ background: #b4b2c7;
+ height: 1px;
+ max-width: calc(200 / 16 * 1rem);
+ min-width: calc(16 / 16 * 1rem);
+ width: 100%;
+ }
+ }
+
+ .cs-name {
+ display: block;
+ /* 4px - 8px */
+ margin: clamp(0.25rem, 0.8vw, 0.625rem) 0 0 0;
+ margin-right: auto;
+ max-width: 16ch;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+
+ .cs-price {
+ /* forces it into the 3rd position */
+ order: 3;
+ display: block;
+ border: 1px solid #b4b2c7;
+ border-radius: calc(80 / 16 * 1rem);
+ margin: 0;
+ background-color: #fff;
+ width: auto;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ padding: calc(8 / 16 * 1rem) calc(12 / 16 * 1rem);
+ /* 20px - 25px */
+ font-size: clamp(1rem, 2vw, 1.5625rem);
+ line-height: 1.2em;
+ font-weight: bold;
+ color: var(--primary);
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+
+ .cs-menu-p {
+ margin: 0;
+ width: 100%;
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ color: var(--bodyTextColor);
+ text-align: inherit;
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #cs-menu-group {
+ .cs-container {
+ max-width: calc(1280 / 16 * 1rem);
+ }
+
+ .cs-menu {
+ width: 100%;
+ &.cs-menu-style2 {
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FMISC%2Fwood.jpg");
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .cs-menu-row {
+ flex-direction: row;
+ justify-content: stretch;
+ width: 100%;
+ /* 32px - 80px */
+ gap: clamp(2em, 4vw, 5rem);
+
+ &.cs-3 {
+ .cs-h3 {
+ gap: calc(8 / 16 * 1rem);
+ &:after {
+ display: none;
+ }
+ }
+ .cs-name {
+ max-width: 20ch;
+ width: 70%;
+ font-size: clamp(1rem, 2vw, 1.5625rem);
+ }
+ }
+ }
+
+ .cs-menu-row {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ width: 100%;
+ }
+
+ .cs-menu-item {
+ margin: 0 auto;
+ max-width: calc(600 / 16 * 1rem);
+ grid-column: span 4;
+ }
+
+ .cs-name {
+ max-width: 70%;
+ width: fit-content;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #cs-menu-group {
+ background-color: rgba(0, 0, 0, 0.5);
+
+ .cs-wrapper {
+ background-color: var(--medium);
+ }
+
+ .cs-button {
+ color: #fff;
+ &:hover {
+ color: var(--secondary);
+ }
+ }
+ .cs-topper {
+ color: var(--primaryLight);
+ }
+ .cs-title,
+ .cs-text,
+ .cs-name,
+ .cs-menu-p {
+ color: var(--bodyTextColorWhite);
+ }
+ .cs-text,
+ .cs-menu-p {
+ opacity: 0.8;
+ }
+ .cs-price {
+ background-color: var(--medium);
+ color: var(--secondary);
+ }
+ .cs-menu-style2 .cs-price {
+ background-color: #fff;
+ color: var(--primary);
+ }
+
+ .cs-menu-style3 {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
+ }
+ }
+}
diff --git a/starter-styles/sass/cms.scss b/starter-styles/sass/cms.scss
new file mode 100644
index 0000000..2870c43
--- /dev/null
+++ b/starter-styles/sass/cms.scss
@@ -0,0 +1,394 @@
+/*-- -------------------------- -->
+<--- Banner -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #banner-1400 {
+ padding: var(--sectionPadding);
+ padding-top: calc(270 / 16 * 1rem);
+ padding-bottom: calc(100 / 16 * 1rem);
+ position: relative;
+ z-index: 1;
+ /* clips the line from causing overflow issues for going off screen */
+ overflow: hidden;
+
+ .cs-container {
+ text-align: center;
+ width: 100%;
+ max-width: calc(1280 / 16 * 1rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ /* 8px - 12px */
+ gap: clamp(0.5rem, 1vw, 0.75rem);
+ }
+
+ .cs-int-title {
+ /* 39px - 61px */
+ font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
+ font-weight: 900;
+ line-height: 1.2em;
+ text-align: inherit;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ }
+
+ .cs-breadcrumbs {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-link {
+ font-size: calc(16 / 16 * 1rem);
+ line-height: 1.2em;
+ text-decoration: none;
+ color: var(--bodyTextColorWhite);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ &:last-of-type {
+ /* remove the chevron on the last list item */
+ &::after {
+ display: none;
+ }
+ }
+
+ &:after {
+ /* chevron */
+ content: "";
+ width: calc(7 / 16 * 1rem);
+ height: calc(12 / 16 * 1rem);
+ margin: 0 calc(16 / 16 * 1rem);
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/white-chev.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ display: block;
+ position: relative;
+ }
+
+ &.cs-active {
+ color: var(--primary);
+ }
+ }
+
+ .cs-background {
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ &:before {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.4;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ &:after {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 40%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ top,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* Makes img tag act as a background image */
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #banner-1400 {
+ .cs-background {
+ &:before {
+ width: 50%;
+ height: 100%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ left,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Content Page -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #content-page-847 {
+ padding: var(--sectionPadding);
+ background-color: #fff;
+ position: relative;
+ z-index: 1;
+ /* clips the wave background from causing overflow issues when it goes off screen */
+ overflow: hidden;
+
+ .cs-container {
+ width: 100%;
+ max-width: calc(1280 / 16 * 1rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ position: relative;
+ }
+
+ .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ max-width: calc(630 / 16 * 1rem);
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: 700;
+ text-align: inherit;
+ margin: 0 0 calc(16 / 16 * 1rem) 0;
+ color: var(--headerColor);
+ }
+
+ h2 {
+ font-size: calc(32 / 16 * 1rem);
+ margin-top: calc(32 / 16 * 1rem);
+ }
+
+ h3 {
+ font-size: calc(24 / 16 * 1rem);
+ color: var(--primary);
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: calc(20 / 16 * 1rem);
+ }
+
+ .cs-button-solid {
+ margin-bottom: calc(32 / 16 * 1rem);
+ }
+
+ .cs-no-margin {
+ margin: 0;
+ }
+
+ .cs-color {
+ color: var(--primary);
+ }
+
+ p {
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ text-align: inherit;
+ width: 100%;
+ margin: 0 0 calc(16 / 16 * 1rem) 0;
+ color: var(--bodyTextColor);
+ &:last-of-type {
+ margin-bottom: calc(32 / 16 * 1rem);
+ }
+
+ a {
+ font-size: inherit;
+ line-height: inherit;
+ text-decoration: underline;
+ color: var(--primary);
+ }
+ }
+
+ ol,
+ ul {
+ margin: 0 0 calc(32 / 16 * 1rem) 0;
+ padding-left: calc(24 / 16 * 1rem);
+ color: var(--bodyTextColor);
+ display: flex;
+ flex-direction: column;
+ gap: calc(16 / 16 * 1rem);
+ }
+
+ ul {
+ li {
+ list-style: none;
+ color: inherit;
+ position: relative;
+
+ &:before {
+ /* custom list bullet */
+ content: "";
+ width: 3px;
+ height: 3px;
+ background: currentColor;
+ opacity: 1;
+ border-radius: 50%;
+ display: block;
+ position: absolute;
+ top: calc(10 / 16 * 1rem);
+ left: calc(-12 / 16 * 1rem);
+ }
+ }
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+
+ .cs-image-group {
+ width: 50%;
+ max-width: calc(542 / 16 * 1rem);
+ display: none;
+ flex-direction: column;
+ gap: calc(20 / 16 * 1rem);
+ position: relative;
+ }
+
+ .cs-picture {
+ width: 100%;
+ /* 300px - 520px */
+ height: clamp(18.75rem, 40vw, 32.5rem);
+ /* prevents border from affecting height and width */
+ box-sizing: border-box;
+ box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
+ display: block;
+ position: relative;
+ /* clips img tag corners */
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* makes it act like a background image */
+ object-fit: cover;
+ }
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #content-page-847 {
+ .cs-container {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ }
+
+ .cs-content {
+ width: 60%;
+ flex: none;
+ }
+
+ .cs-image-group {
+ display: flex;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #content-page-847 {
+ background-color: var(--dark);
+
+ .cs-title,
+ .cs-text,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ li,
+ p {
+ color: var(--bodyTextColorWhite);
+ }
+ .cs-color,
+ a {
+ color: var(--primaryLight);
+ }
+
+ p,
+ li {
+ color: #ebebeb;
+ }
+
+ .cs-picture {
+ background-color: var(--dark);
+ border-color: var(--dark);
+ }
+ }
+ }
+}
diff --git a/starter-styles/sass/collection.scss b/starter-styles/sass/collection.scss
new file mode 100644
index 0000000..b0f4128
--- /dev/null
+++ b/starter-styles/sass/collection.scss
@@ -0,0 +1,276 @@
+/*-- -------------------------- -->
+<--- Interior Page Header -->
+<--- -------------------------- -*/
+
+/* Mobile */
+@media only screen and (min-width: 0em) {
+ #int-hero {
+ min-height: 30vh;
+ padding-top: 9.375rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.7;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+
+ picture {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ h1 {
+ font-size: 2.13333333rem;
+ text-align: center;
+ width: 96%;
+ max-width: 31.25rem;
+ margin: 0 auto;
+ margin-top: 4.375rem;
+ margin-bottom: 1.875rem;
+ color: #fff;
+ position: relative;
+ }
+
+ p {
+ text-align: center;
+ width: 96%;
+ max-width: 25rem;
+ margin: auto;
+ margin-bottom: 1.875rem;
+ color: #fff;
+ display: block;
+ }
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: 48em) {
+ #int-hero {
+ font-size: 100%;
+
+ h1 {
+ font-size: 4rem;
+ }
+ }
+}
+
+/* Small Desktop */
+@media only screen and (min-width: 64em) {
+ #int-hero {
+ font-size: inherit;
+ height: auto;
+ min-height: 18.75rem;
+ padding-top: 11.25rem;
+ background-attachment: fixed;
+ padding-block-end: 6.25rem;
+ }
+}
+
+/*-- -------------------------- -->
+<--- Collection -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #collection {
+ padding: var(--sectionPadding);
+
+ .cs-container {
+ width: 100%;
+ max-width: 80rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: clamp(3rem, 6vw, 4rem);
+ position: relative;
+ z-index: 1;
+ }
+
+ .cs-card-group {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ justify-items: center;
+ grid-template-columns: repeat(auto-fit, minmax(19.0625rem, 1fr));
+ column-gap: clamp(1rem, 3vw, 1.25rem);
+ row-gap: clamp(1rem, 3vw, 2.5rem);
+ position: relative;
+ transform-style: preserve-3d;
+ }
+
+ .cs-item {
+ max-width: 18.5rem;
+ padding: 1rem;
+ border: 1px solid #e8e8e8;
+ &:hover {
+ .cs-picture {
+ img {
+ transform: scale(1.05);
+ }
+ }
+ }
+ }
+
+ .cs-link {
+ text-decoration: none;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .cs-image-group {
+ width: auto;
+ height: 18.75rem;
+ margin-bottom: 1.25rem;
+ position: relative;
+ }
+
+ .cs-picture {
+ width: 100%;
+ height: 100%;
+ display: block;
+ overflow: hidden;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s;
+ }
+ }
+
+ .cs-offer {
+ font-size: 0.8125rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ text-transform: uppercase;
+ letter-spacing: 1.3px;
+ padding: 0.375rem;
+ color: #fff;
+ background: #ff4747;
+ position: absolute;
+ top: 0.75rem;
+ right: 0.75rem;
+ }
+
+ .cs-product {
+ font-size: clamp(1.25rem, 3vw, 1.5rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--headerColor);
+ }
+
+ .cs-wrapper {
+ margin-top: 1.25rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .cs-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .cs-price {
+ font-size: 1.25rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ color: var(--primary);
+ }
+
+ .cs-old-price {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ text-decoration: line-through;
+ color: #767676;
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #collection {
+ .cs-item {
+ max-width: none;
+ }
+
+ .cs-image-group {
+ height: clamp(12rem, 23vw, 20rem);
+ }
+ }
+}
+
+/* Small Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #collection {
+ .cs-card-group {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #collection {
+ .cs-offer {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-product {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-price {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-old-price {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-item {
+ &:hover {
+ .cs-picture {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ }
+ }
+
+ .cs-picture {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+}
diff --git a/starter-styles/sass/local.scss b/starter-styles/sass/local.scss
index 67d7962..27903ed 100644
--- a/starter-styles/sass/local.scss
+++ b/starter-styles/sass/local.scss
@@ -1,530 +1,680 @@
/*-- -------------------------- -->
<--- Hero -->
<--- -------------------------- -*/
-
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#hero-1621 {
/* 296px - 364px - top leaving extra space for the navigation */
/* 60px - 100px bottom */
- padding: clamp(18.5rem, 25.95vw, 22.75rem) calc(16 / 16 * 1rem)
+ padding: clamp(18.5rem, 25.95vw, 22.75rem) 1rem
clamp(3.75rem, 7.82vw, 6.25rem);
position: relative;
z-index: 1;
/* prevents the topper line from causing an overflow */
overflow: hidden;
+ }
+ #hero-1621 .cs-container {
+ width: 100%;
+ max-width: 80rem;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ /* 140px - 180px */
+ gap: clamp(8.75rem, 13vw, 11.25rem);
+ }
+ #hero-1621 .cs-content {
+
+ width: 100%;
+ max-width: 53.125rem;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ /* 112px - 144px top & bottom */
+ /* 16px - 48px left & right */
+ padding: clamp(7rem, 8vw, 9rem) clamp(1rem, 5vw, 3rem);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+ }
+
+
+ #hero-1621 .cs-topper {
+ /* 13px - 16px */
+ font-size: clamp(0.8125rem, 1.5vw, 1rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ margin-bottom: 0.25rem;
+ color: var(--primary);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ position: relative;
+ }
+ #hero-1621 .cs-chevron {
+ --chevronColor: var(--primary);
+ width: 3rem;
+ height: auto;
+ }
+ #hero-1621 .cs-title {
+ /* 39px - 61px */
+ font-size: clamp(5.4375rem, 8.4vw, 14.8125rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: start;
+ max-width: 51.8125rem;
+ /* 16px - 24px */
+ margin-top:-200px;
+ color: #d7b65d;
+ position: relative;
+ }
+ #hero-1621 .cs-title2 {
+ /* 39px - 61px */
+ font-size: clamp(5.4375rem, 8.4vw, 10.8125rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: start;
+ max-width: 51.8125rem;
+ /* 16px - 24px */
+ margin-top:-40px;
+ color: #fff;
+ position: relative;
+ }
+ #hero-1621 .cs-title3 {
+ /* 39px - 61px */
+ font-size:30px;
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: start;
+ max-width: 51.8125rem;
+ /* 16px - 24px */
+ margin-top: -100px;
+ margin-left: 20px;
+ color: #fff;
+ position: relative;
+ }
+ #hero-1621 .cs-text {
+ /* 16px - 20px */
+ font-size: clamp(1rem, 1.95vw, 1.25rem);
+ line-height: 1.5em;
+ text-align: center;
+ width: 100%;
+ /* 464px - 622px */
+ max-width: clamp(29rem, 60vw, 38.785rem);
+ margin: 0 auto 0;
+ margin-bottom: 2rem;
+ color: #fff;
+ }
+ #hero-1621 .cs-card-group {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(9, 8rem);
+ /* 16px - 20px */
+ gap: clamp(1rem, 2.3vw, 1.25rem);
+ }
+ #hero-1621 .cs-item {
+ text-align: left;
+ list-style: none;
+ width: 100%;
+ margin: 0;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ /* 24px - 32px */
+ padding: clamp(1.5rem, 3vw, 2rem);
+ background-color: #192026;
+ box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ grid-column: span 12;
+ grid-row: span 1;
+ position: relative;
+ z-index: 1;
+ }
+ #hero-1621 .cs-icon {
+ width: 3rem;
+ height: auto;
+ margin: 0 0 auto 0;
+ padding: 0 0 1.5rem 0;
+ }
+ #hero-1621 .cs-h3 {
+ /* 20px - 25px */
+ font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
+ font-weight: bold;
+ line-height: 1.2em;
+ text-align: inherit;
+ margin: 0 0 1rem 0;
+ color: var(--titleColor);
+ }
+ #hero-1621 .cs-item-text {
+ /* 14px - 16px */
+ font-size: clamp(0.875rem, 1.5vw, 1rem);
+ line-height: 1.5em;
+ max-width: 28.125rem;
+ margin: 0;
+ padding: 0;
+ color: var(--bodyTextColor);
+ }
+ #hero-1621 .cs-background {
+ width: 100%;
+ height: 55%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ }
+ #hero-1621 .cs-background:before {
+ /* Overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #111926;
+ opacity: 0.8;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ /* prevents the cursor from interacting with it */
+ pointer-events: none;
+ }
+ #hero-1621 .cs-background img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+}
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #hero-1621 .cs-item {
+ grid-column: span 6;
+ }
+ #hero-1621 .cs-background {
+ height: 70%;
+ }
+}
+/* Large Desktop - 1300px */
+@media only screen and (min-width: 81.25rem) {
+ #hero-1621 .cs-container {
+ width: 100%;
+ max-width: 80rem;
+
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-right: 200px;
+ gap: clamp(8.75rem, 13vw, 11.25rem);
+ }
+ #hero-1621 .cs-content {
+
+ width: 100%;
+ max-width: 53.125rem;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ /* 112px - 144px top & bottom */
+ /* 16px - 48px left & right */
+ margin-bottom: 200px;
+ padding: clamp(7rem, 8vw, 9rem) clamp(1rem, 5vw, 3rem);
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ position: relative;
+ z-index: 1;
+ }
+ #hero-1621 .cs-item {
+ grid-column: span 3;
+ }
+ #hero-1621 .cs-background {
+ height: 80%;
+ }
+}
- .cs-container {
- width: 100%;
- max-width: calc(1280 / 16 * 1rem);
- margin: auto;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- /* 140px - 180px */
- gap: clamp(8.75rem, 13vw, 11.25rem);
- }
- .cs-content {
- --cornerWidth: 8.75rem;
- --cornerHeight: 8.75rem;
-
- width: 100%;
- max-width: calc(850 / 16 * 1rem);
- /* prevents padding from affecting height and width */
- box-sizing: border-box;
- /* 112px - 144px top & bottom */
- /* 16px - 48px left & right */
- padding: clamp(7rem, 8vw, 9rem) clamp(1rem, 5vw, 3rem);
- display: flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- z-index: 1;
-
- &:before {
- /* top left corner */
- content: "";
- width: 35vw;
- max-width: var(--cornerWidth);
- height: 35vw;
- max-height: var(--cornerHeight);
- opacity: 1;
- border: 2px solid #fff;
- border-right: none;
- border-bottom: none;
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- }
-
- &:after {
- /* top right corner */
- content: "";
- width: 35vw;
- max-width: var(--cornerWidth);
- height: 35vw;
- max-height: var(--cornerHeight);
- opacity: 1;
- border: 2px solid #fff;
- border-bottom: none;
- border-left: none;
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- z-index: -1;
- }
- }
- .cs-corners {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-
- &:before {
- /* bottom left corner */
- content: "";
- width: 35vw;
- max-width: var(--cornerWidth);
- height: 35vw;
- max-height: var(--cornerHeight);
- opacity: 1;
- border: 2px solid #fff;
- border-top: none;
- border-right: none;
- display: block;
- position: absolute;
- bottom: 0;
- left: 0;
- z-index: -1;
- }
-
- &:after {
- /* bottom right corner */
- content: "";
- width: 35vw;
- max-width: var(--cornerWidth);
- height: 35vw;
- max-height: var(--cornerHeight);
- opacity: 1;
- border: 2px solid #fff;
- border-top: none;
- border-left: none;
- display: block;
- position: absolute;
- right: 0;
- bottom: 0;
- z-index: -1;
- }
- }
+@media only screen and (min-width: 81.25rem) {
- .cs-topper {
- /* 13px - 16px */
- font-size: clamp(0.8125rem, 1.5vw, 1rem);
- font-weight: 700;
- line-height: 1.2em;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- margin-bottom: calc(4 / 16 * 1rem);
- color: var(--primary);
- display: flex;
- justify-content: center;
- align-items: center;
- gap: calc(8 / 16 * 1rem);
- position: relative;
- }
+ #image-section {
+ margin-top: 100px;
+ position: relative;
+ width: 100%;
+ height: 600px; /* Adjust as needed */
+ overflow: hidden;
+ background-image: url('../images/road1.avif');
- .cs-chevron {
- --chevronColor: var(--primary);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+
+ }
+
+
+ /* Container for titles */
+ #image-section .titles-container {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ text-align: center;
+ padding: 20px; /* Adjust as needed */
+ margin-top: 50px;
+ }
+
+ #image-section .title1 {
+ margin: 0;
+ color: #111926; /* Title color */
+ font-size: 1.5rem; /* Adjust size as needed */
+ font-weight: bold;
+ }
- width: calc(48 / 16 * 1rem);
- height: auto;
- }
+ #image-section .title2 {
+ margin: 0;
+ color: #d7b65d; /* Title color */
+ font-size: 6rem; /* Adjust size as needed */
+ font-weight: bold;
+ }
- .cs-title {
- /* 39px - 61px */
- font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
- font-weight: 700;
- line-height: 1.2em;
- text-align: center;
- max-width: calc(829 / 16 * 1rem);
- /* 16px - 24px */
- margin: 0 0 calc(40 / 16 * 1rem) 0;
- color: #fff;
- position: relative;
- }
+ #image-section .title3 {
+ margin: 0;
+ color: #111926; /* Title color */
+ font-size: 6rem; /* Adjust size as needed */
+ font-weight: bold;
+ }
- .cs-text {
- /* 16px - 20px */
- font-size: clamp(1rem, 1.95vw, 1.25rem);
- line-height: 1.5em;
- text-align: center;
- width: 100%;
- /* 464px - 622px */
- max-width: clamp(29rem, 60vw, 38.785rem);
- margin: 0 auto 0;
- margin-bottom: calc(32 / 16 * 1rem);
- color: #fff;
- }
+
+
- .cs-card-group {
- width: 100%;
- margin: 0;
- padding: 0;
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- /* 16px - 20px */
- gap: clamp(1rem, 2.3vw, 1.25rem);
- }
+}
- .cs-item {
- text-align: left;
- list-style: none;
- width: 100%;
- margin: 0;
- /* prevents padding from affecting height and width */
- box-sizing: border-box;
- /* 24px - 32px */
- padding: clamp(1.5rem, 3vw, 2rem);
- background-color: #fff;
- box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- grid-column: span 12;
- grid-row: span 1;
- position: relative;
- z-index: 1;
- }
+@media only screen and (min-width: 81.25rem) {
- .cs-icon {
- width: calc(48 / 16 * 1rem);
- height: auto;
- margin: 0 0 auto 0;
- padding: 0 0 calc(24 / 16 * 1rem) 0;
- }
+ #image2 .overlay-image {
+ margin-top: 3200px;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 70%; /* Adjust the width as needed */
+ height: auto; /* Maintain aspect ratio */
+ z-index: 2; /* Ensure it appears above both sections */
+ pointer-events: none; /* Allow clicks to pass through */
+ }
+
+ /* Container for titles */
+
+}
- .cs-h3 {
- /* 20px - 25px */
- font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
- font-weight: bold;
- line-height: 1.2em;
- text-align: inherit;
- margin: 0 0 calc(16 / 16 * 1rem) 0;
- color: var(--headerColor);
- }
- .cs-item-text {
- /* 14px - 16px */
- font-size: clamp(0.875rem, 1.5vw, 1rem);
- line-height: 1.5em;
- max-width: calc(450 / 16 * 1rem);
- margin: 0;
- padding: 0;
- color: var(--bodyTextColor);
- }
+@media only screen and (min-width: 81.25rem) {
- .cs-background {
- width: 100%;
- height: 55%;
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -2;
-
- &:before {
- /* Overlay */
- content: "";
- width: 100%;
- height: 100%;
- background: #111926;
- opacity: 0.8;
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- /* prevents the cursor from interacting with it */
- pointer-events: none;
- }
-
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- }
- }
+ #background-seat {
+ position: relative; /* Ensure that the image is positioned relative to this container */
}
+
+ #background-seat .overlay-image {
+
+ margin-top: -450px;
+ position: absolute;
+ top: 0;
+ right: 0; /* Align to the right side of the container */
+ transform: translateX(0); /* No need to center horizontally */
+ width: 45%; /* Adjust the width as needed */
+ height: 600px; /* Maintain aspect ratio */
+ z-index: 2; /* Ensure it appears above both sections */
+ pointer-events: none; /* Allow clicks to pass through */
+ }
+
+ /* Container for titles */
+
}
-/* Tablet - 768px */
-@media only screen and (min-width: 48rem) {
- #hero-1621 {
- .cs-item {
- grid-column: span 6;
- }
+@media only screen and (min-width: 81.25rem) {
- .cs-background {
- height: 70%;
- }
+ #black-background {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #111926;
+ color: #fff; /* Text color */
+ padding: 20px; /* Adjust as needed */
+ position: relative; /* Ensure positioning context for the image */
+ }
+
+ #black-background .content h2 {
+ margin-top: 300px;
+
+ margin-bottom: 10px;
+ font-size: 2.5rem; /* Adjust size as needed */
+ line-height: 1.2; /* Adjust line height as needed */
+ color: #fff; /* Default color for the text */
+ }
+
+ #black-background .highlight {
+ color: #d7b65d; /* Change this to your desired color */
+ font-weight: bold; /* Optional: Make it bold */
+ }
+
+ #black-background .svg-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* 3 columns */
+ grid-template-rows: repeat(2, auto); /* 2 rows */
+ gap: 20px; /* Space between items */
+ max-width: 40%; /* Ensure grid fits within container */
+ padding: 20px; /* Padding around the grid */
+ box-sizing: border-box; /* Include padding in width calculation */
+ }
+
+
+ #black-background .svg-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent; /* Light background for each item */
+ border-radius: 10px;
+ padding: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+ box-sizing: border-box; /* Include padding in width calculation */
+ }
+
+
+ #black-background .svg-icon {
+ width: 100px; /* Adjust size as needed */
+ height: auto; /* Maintain aspect ratio */
+ margin-bottom: 10px; /* Space between SVG and title */
+ filter: invert(71%) sepia(72%) saturate(334%) hue-rotate(359deg) brightness(93%) contrast(91%);
}
+
+
+ #black-background .svg-title {
+ font-size: 1rem; /* Adjust size as needed */
+ color: #ffffff; /* Title color */
+ text-align: center; /* Center-align the title */
+ }
+
+
+
+
+ /* Container for titles */
+
}
-/* Large Desktop - 1300px */
-@media only screen and (min-width: 81.25rem) {
- #hero-1621 {
- .cs-item {
- grid-column: span 3;
- }
- .cs-background {
- height: 80%;
- }
+
+
+
+
+@media only screen and (max-width: 81.25rem) {
+ #image-section {
+ height: 300px; /* Adjust for mobile */
+ background-image: url('../images/road1.avif'); /* Ensure correct path */
+ background-size: cover;
+ }
+
+ #image-section .titles-container {
+ position: relative;
+ padding: 10px; /* Adjust as needed */
+ margin-top: 20px;
+ text-align: center;
+ }
+
+ #image-section .title1,
+ #image-section .title3 {
+ font-size: 1.2rem; /* Adjust size as needed for mobile */
+ }
+
+ #image-section .title2 {
+ font-size: 3rem; /* Adjust size as needed for mobile */
}
}
+
+@media only screen and (max-width: 81.25rem) {
+ #image2 .overlay-image {
+ margin-top: 100px; /* Adjust top margin for mobile */
+ position: relative; /* Adjust positioning */
+ width: 100%; /* Adjust width for mobile */
+ height: auto; /* Maintain aspect ratio */
+ z-index: 1; /* Adjust if needed */
+ }
+}
+
+@media only screen and (max-width: 81.25rem) {
+ #background-seat {
+ position: relative; /* Adjust if needed */
+ }
+
+ #background-seat .overlay-image {
+ margin-top: 100px; /* Adjust top margin for mobile */
+ position: relative; /* Adjust positioning */
+ width: 100%; /* Adjust width for mobile */
+ height: 300px; /* Adjust height for mobile */
+ z-index: 1; /* Adjust if needed */
+ }
+}
+
+@media only screen and (max-width: 81.25rem) {
+ #black-background {
+ display: block; /* Stack items vertically on mobile */
+ background-color: #111926;
+ color: #fff; /* Text color */
+ padding: 20px; /* Adjust as needed */
+ }
+
+ #black-background .content h2 {
+ margin-top: 20px; /* Adjust for mobile */
+ margin-bottom: 20px; /* Adjust for mobile */
+ font-size: 1.5rem; /* Adjust size as needed for mobile */
+ }
+
+ #black-background .highlight {
+ color: #d7b65d; /* Adjust color if needed */
+ font-weight: bold; /* Optional: Make it bold */
+ }
+
+
+
+}
+
/* Large Desktop - Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
- #hero-1621 {
- .cs-background {
- background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting-2.jpeg");
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
- background-attachment: fixed;
- img {
- display: none;
- }
- }
+ #hero-1621 .cs-background {
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting-2.jpeg");
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ }
+ #hero-1621 .cs-background img {
+ display: none;
}
}
-
/* Dark Mode */
@media only screen and (min-width: 0rem) {
- body.dark-mode {
- #hero-1621 {
- .cs-item {
- background-color: var(--medium);
- }
-
- .cs-icon {
- filter: brightness(0) invert(1);
- }
-
- .cs-h3,
- .cs-item-text {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-item-text {
- opacity: 0.8;
- }
-
- .cs-background {
- &:before {
- opacity: 0.9;
- }
- }
- }
+ body.dark-mode #hero-1621 .cs-item {
+ background-color: var(--medium);
+ }
+ body.dark-mode #hero-1621 .cs-icon {
+ filter: brightness(0) invert(1);
+ }
+ body.dark-mode #hero-1621 .cs-h3,
+ body.dark-mode #hero-1621 .cs-item-text {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #hero-1621 .cs-item-text {
+ opacity: 0.8;
+ }
+ body.dark-mode #hero-1621 .cs-background:before {
+ opacity: 0.9;
}
}
-
/*-- -------------------------- -->
-<--- Side By Side -->
-<--- -------------------------- -*/
-
+ <--- Side By Side -->
+ <--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#sbs-523 {
padding: var(--sectionPadding);
-
- @keyframes floatAnimation {
- 0% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(-0.6em);
- }
- 100% {
- transform: translateY(0);
- }
- }
-
- @keyframes floatAnimation2 {
- 0% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(-1em);
- }
- 100% {
- transform: translateY(0);
- }
- }
-
- .cs-container {
- width: 100%;
- /* changes to 1280px at desktop */
- max-width: calc(550 / 16 * 1rem);
- margin: auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- /* 48px - 64px */
- gap: clamp(3rem, 6vw, 4rem);
- }
-
- .cs-content {
- /* set text align to left if content needs to be left aligned */
- text-align: left;
- width: 100%;
- display: flex;
- flex-direction: column;
- /* centers content horizontally, set to flex-start to left align */
- align-items: flex-start;
- }
-
- .cs-color {
- color: var(--secondary);
+ }
+ @keyframes floatAnimation {
+ 0% {
+ transform: translateY(0);
}
-
- .cs-text {
- margin-bottom: calc(16 / 16 * 1rem);
- &:last-of-type {
- margin-bottom: calc(32 / 16 * 1rem);
- }
+ 50% {
+ transform: translateY(-0.6em);
}
-
- .cs-image-group {
- /* this is how we can scale entire groups using ems. Font size is tied to the view width, so as the screen gets bigger, so does the font size, and this scales up and down the elements with em values. Then it stops growing once the font size reaches the defined value of 1em (16px which is default on the html element). Font size changes at desktop */
- font-size: min(2.3vw, 0.875em);
- /* all values are done in ems, not rems, so we can scale the group with a font size min/max equation */
- width: calc(630 / 16 * 1em);
- height: calc(817 / 16 * 1em);
- /* pushes it to the top in the first position */
- order: -1;
- position: relative;
-
- &:before {
- content: "";
- width: calc(186 / 16 * 1em);
- height: calc(161 / 16 * 1em);
- background: var(--primary);
- opacity: 1;
- display: block;
- position: absolute;
- top: calc(0 / 16 * 1em);
- left: calc(0 / 16 * 1em);
- animation-name: floatAnimation;
- animation-duration: 6s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: infinite;
- animation-fill-mode: forwards;
- }
+ 100% {
+ transform: translateY(0);
}
-
- .cs-picture {
- display: block;
- position: absolute;
-
- img {
- width: 100%;
- height: 100%;
- /* makes it act like a background image */
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- }
+ }
+ @keyframes floatAnimation2 {
+ 0% {
+ transform: translateY(0);
}
-
- .cs-picture-large {
- width: calc(476 / 16 * 1em);
- height: calc(677 / 16 * 1em);
- top: calc(70 / 16 * 1em);
- left: calc(62 / 16 * 1em);
+ 50% {
+ transform: translateY(-1em);
}
-
- .cs-picture-small {
- width: calc(260 / 16 * 1em);
- height: calc(225 / 16 * 1em);
- background-color: #fff;
- border: calc(10 / 16 * 1em) solid #fff;
- right: 0;
- bottom: 0;
- animation-name: floatAnimation2;
- animation-duration: 20s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: infinite;
- animation-fill-mode: forwards;
+ 100% {
+ transform: translateY(0);
}
}
+ #sbs-523 .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: 34.375rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+ #sbs-523 .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ }
+ #sbs-523 .cs-color {
+ color: var(--secondary);
+ }
+ #sbs-523 .cs-text {
+ margin-bottom: 1rem;
+ }
+ #sbs-523 .cs-text:last-of-type {
+ margin-bottom: 2rem;
+ }
+ #sbs-523 .cs-image-group {
+ /* this is how we can scale entire groups using ems. Font size is tied to the view width, so as the screen gets bigger, so does the font size, and this scales up and down the elements with em values. Then it stops growing once the font size reaches the defined value of 1em (16px which is default on the html element). Font size changes at desktop */
+ font-size: min(2.3vw, 0.875em);
+ /* all values are done in ems, not rems, so we can scale the group with a font size min/max equation */
+ width: 39.375em;
+ height: 51.0625em;
+ /* pushes it to the top in the first position */
+ order: -1;
+ position: relative;
+ }
+ #sbs-523 .cs-image-group:before {
+ content: "";
+ width: 11.625em;
+ height: 10.0625em;
+ background: var(--primary);
+ opacity: 1;
+ display: block;
+ position: absolute;
+ top: 0em;
+ left: 0em;
+ animation-name: floatAnimation;
+ animation-duration: 6s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ animation-fill-mode: forwards;
+ }
+ #sbs-523 .cs-picture {
+ display: block;
+ position: absolute;
+ }
+ #sbs-523 .cs-picture img {
+ width: 100%;
+ height: 100%;
+ /* makes it act like a background image */
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #sbs-523 .cs-picture-large {
+ width: 29.75em;
+ height: 42.3125em;
+ top: 4.375em;
+ left: 3.875em;
+ }
+ #sbs-523 .cs-picture-small {
+ width: 16.25em;
+ height: 14.0625em;
+ background-color: #fff;
+ border: 0.625em solid #fff;
+ right: 0;
+ bottom: 0;
+ animation-name: floatAnimation2;
+ animation-duration: 20s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ animation-fill-mode: forwards;
+ }
}
-
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
- #sbs-523 {
- .cs-container {
- max-width: calc(1280 / 16 * 1rem);
- flex-direction: row;
- justify-content: space-between;
- }
-
- .cs-content {
- width: 51%;
- max-width: calc(550 / 16 * 1rem);
- }
-
- .cs-image-group {
- font-size: min(1.1vw, 1em);
- }
+ #sbs-523 .cs-container {
+ max-width: 80rem;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ #sbs-523 .cs-content {
+ width: 51%;
+ max-width: 34.375rem;
+ }
+ #sbs-523 .cs-image-group {
+ font-size: min(1.1vw, 1em);
}
}
-
/* Dark Mode */
@media only screen and (min-width: 0rem) {
- body.dark-mode {
- #sbs-523 {
- .cs-title,
- .cs-text {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-text {
- opacity: 0.8;
- }
-
- .cs-image-group {
- &:before {
- background-color: var(--secondary);
- opacity: 0.3;
- }
- }
-
- .cs-picture-small {
- border-color: var(--dark);
- }
- }
+ body.dark-mode #sbs-523 .cs-title,
+ body.dark-mode #sbs-523 .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #sbs-523 .cs-text {
+ opacity: 0.8;
+ }
+ body.dark-mode #sbs-523 .cs-image-group:before {
+ background-color: var(--secondary);
+ opacity: 0.3;
+ }
+ body.dark-mode #sbs-523 .cs-picture-small {
+ border-color: var(--dark);
}
}
-
/*-- -------------------------- -->
-<--- Steps -->
-<--- -------------------------- -*/
-
+ <--- Steps -->
+ <--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#steps-1172 {
@@ -532,206 +682,161 @@
position: relative;
z-index: 1;
overflow: hidden;
-
- .cs-container {
- width: 100%;
- /* changes to 1280px at desktop */
- max-width: calc(704 / 16 * 1rem);
- margin: auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- /* 48px - 64px */
- gap: clamp(3rem, 6vw, 4rem);
- }
-
- .cs-content {
- /* set text align to left if content needs to be left aligned */
- text-align: center;
- width: 100%;
- display: flex;
- flex-direction: column;
- /* centers content horizontally, set to flex-start to left align */
- align-items: center;
- }
-
- .cs-text {
- font-size: var(--bodyFontSize);
- line-height: 1.5em;
- text-align: inherit;
- width: 100%;
- max-width: calc(650 / 16 * 1rem);
- margin: 0;
- color: var(--bodyTextColor);
- }
-
- .cs-card-group {
- width: 100%;
- margin: 0;
- padding: 0;
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- gap: calc(20 / 16 * 1rem);
- }
-
- .cs-item {
- text-align: center;
- list-style: none;
- display: flex;
- flex-direction: column;
- align-items: center;
- grid-column: span 12;
- position: relative;
-
- &:last-of-type {
- &:after {
- display: none;
- }
- }
-
- &:nth-of-type(even) {
- &:after {
- /* scaleX -1 flips it horizontally */
- transform: rotate(-135deg) scaleX(-1);
- }
- }
-
- &:after {
- content: "";
- /* 54px - 84px */
- width: clamp(3.375rem, 6vw, 5.25rem);
- height: clamp(3.375rem, 6vw, 5.25rem);
- margin-top: calc(20 / 16 * 1rem);
- background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/curved-arrow-light.svg");
- background-position: center;
- background-size: contain;
- background-repeat: no-repeat;
- opacity: 1;
- display: block;
- position: relative;
- transform: rotate(135deg);
- }
- }
-
- .cs-picture {
- width: calc(88 / 16 * 1rem);
- height: calc(88 / 16 * 1rem);
- margin-bottom: calc(24 / 16 * 1rem);
- border: 1px solid #858585;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .cs-icon {
- width: calc(40 / 16 * 1rem);
- height: auto;
- display: block;
- }
-
- .cs-h3 {
- font-size: calc(20 / 16 * 1rem);
- line-height: 1.2em;
- text-align: inherit;
- margin: 0 0 calc(12 / 16 * 1rem) 0;
- color: var(--headerColor);
- }
-
- .cs-item-text {
- font-size: calc(16 / 16 * 1rem);
- line-height: 1.5em;
- text-align: inherit;
- max-width: calc(342 / 16 * 1rem);
- margin: 0;
- color: var(--bodyTextColor);
- }
+ }
+ #steps-1172 .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: 44rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+ #steps-1172 .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: center;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: center;
+ }
+ #steps-1172 .cs-text {
+ font-size: var(--bodyFontSize);
+ line-height: 1.5em;
+ text-align: inherit;
+ width: 100%;
+ max-width: 40.625rem;
+ margin: 0;
+ color: var(--bodyTextColor);
+ }
+ #steps-1172 .cs-card-group {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: 1.25rem;
+ }
+ #steps-1172 .cs-item {
+ text-align: center;
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ grid-column: span 12;
+ position: relative;
+ }
+ #steps-1172 .cs-item:last-of-type:after {
+ display: none;
+ }
+ #steps-1172 .cs-item:nth-of-type(even):after {
+ /* scaleX -1 flips it horizontally */
+ transform: rotate(-135deg) scaleX(-1);
+ }
+ #steps-1172 .cs-item:after {
+ content: "";
+ /* 54px - 84px */
+ width: clamp(3.375rem, 6vw, 5.25rem);
+ height: clamp(3.375rem, 6vw, 5.25rem);
+ margin-top: 1.25rem;
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/curved-arrow-light.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ opacity: 1;
+ display: block;
+ position: relative;
+ transform: rotate(135deg);
+ }
+ #steps-1172 .cs-picture {
+ width: 5.5rem;
+ height: 5.5rem;
+ margin-bottom: 1.5rem;
+ border: 1px solid #858585;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ #steps-1172 .cs-icon {
+ width: 2.5rem;
+ height: auto;
+ display: block;
+ }
+ #steps-1172 .cs-h3 {
+ font-size: 1.25rem;
+ line-height: 1.2em;
+ text-align: inherit;
+ margin: 0 0 0.75rem 0;
+ color: var(--headerColor);
+ }
+ #steps-1172 .cs-item-text {
+ font-size: 1rem;
+ line-height: 1.5em;
+ text-align: inherit;
+ max-width: 21.375rem;
+ margin: 0;
+ color: var(--bodyTextColor);
}
}
-
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
- #steps-1172 {
- .cs-item {
- grid-column: span 6;
-
- &:nth-of-type(2) {
- &:after {
- display: none;
- }
- }
-
- &:nth-of-type(1) {
- &:after {
- transform: rotate(135deg) scaleX(-1);
- }
- }
-
- &:after {
- margin: 0;
- position: absolute;
- top: 0;
- right: calc(-40 / 16 * 1rem);
- transform: rotate(45deg);
- }
- }
+ #steps-1172 .cs-item {
+ grid-column: span 6;
+ }
+ #steps-1172 .cs-item:nth-of-type(2):after {
+ display: none;
+ }
+ #steps-1172 .cs-item:nth-of-type(1):after {
+ transform: rotate(135deg) scaleX(-1);
+ }
+ #steps-1172 .cs-item:after {
+ margin: 0;
+ position: absolute;
+ top: 0;
+ right: -2.5rem;
+ transform: rotate(45deg);
}
}
-
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
- #steps-1172 {
- .cs-container {
- max-width: calc(1280 / 16 * 1rem);
- }
-
- .cs-item {
- grid-column: span 3;
-
- &:nth-of-type(2) {
- &:after {
- display: block;
- transform: rotate(45deg);
- }
- }
-
- &:nth-of-type(3) {
- &:after {
- display: block;
- transform: rotate(135deg) scaleX(-1);
- }
- }
-
- &:after {
- right: calc(-48 / 16 * 1rem);
- }
- }
+ #steps-1172 .cs-container {
+ max-width: 80rem;
+ }
+ #steps-1172 .cs-item {
+ grid-column: span 3;
+ }
+ #steps-1172 .cs-item:nth-of-type(2):after {
+ display: block;
+ transform: rotate(45deg);
+ }
+ #steps-1172 .cs-item:nth-of-type(3):after {
+ display: block;
+ transform: rotate(135deg) scaleX(-1);
+ }
+ #steps-1172 .cs-item:after {
+ right: -3rem;
}
}
-
/* Dark Mode */
@media only screen and (min-width: 0rem) {
- body.dark-mode {
- #steps-1172 {
- .cs-title,
- .cs-text,
- .cs-item-text,
- .cs-h3 {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-text,
- .cs-item-text {
- opacity: 0.8;
- }
- }
+ body.dark-mode #steps-1172 .cs-title,
+ body.dark-mode #steps-1172 .cs-text,
+ body.dark-mode #steps-1172 .cs-item-text,
+ body.dark-mode #steps-1172 .cs-h3 {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #steps-1172 .cs-text,
+ body.dark-mode #steps-1172 .cs-item-text {
+ opacity: 0.8;
}
}
-
/*-- -------------------------- -->
-<--- Why Choose Us -->
-<--- -------------------------- -*/
-
+ <--- Why Choose Us -->
+ <--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#why-choose-1657 {
@@ -740,411 +845,854 @@
position: relative;
z-index: 1;
overflow: hidden;
+ }
+ #why-choose-1657 .cs-container {
+ width: 100%;
+ /* changes to 1280px at tablet */
+ max-width: 36.5rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 100px */
+ gap: clamp(3rem, 10vw, 6.25rem);
+ }
+ #why-choose-1657 .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ }
+ #why-choose-1657 .cs-flex {
+ max-width: 38.5rem;
+ }
+ #why-choose-1657 .cs-title {
+ max-width: 20ch;
+ margin-bottom: 1.5rem;
+ }
+ #why-choose-1657 .cs-ul {
+ width: 100%;
+ max-width: 32.625rem;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ /* 28px - 32px */
+ gap: clamp(1.75rem, 3vw, 2rem);
+ }
+ #why-choose-1657 .cs-li {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+ #why-choose-1657 .cs-number {
+ font-size: 1.25rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--primary);
+ display: block;
+ }
+ #why-choose-1657 .cs-li-text {
+ /* 14px - 16px */
+ font-size: clamp(0.875rem, 1.5vw, 1rem);
+ line-height: 1.5em;
+ margin: 0;
+ color: var(--bodyTextColor);
+ }
+ #why-choose-1657 .cs-wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* 40px - 64px */
+ gap: clamp(2.5rem, 6vw, 4rem);
+ position: relative;
+ z-index: 1;
+ }
+ #why-choose-1657 .cs-wrapper:before {
+ /* white background */
+ content: "";
+ width: 100vw;
+ height: 500%;
+ background: #fff;
+ opacity: 1;
+ display: block;
+ position: absolute;
+ /* 40px - 140px */
+ top: clamp(2.5rem, 10vw, 8.75rem);
+ left: 50%;
+ z-index: -1;
+ transform: translateX(-50%);
+ }
+ #why-choose-1657 .cs-picture {
+ width: 100%;
+ height: 70vw;
+ max-height: 25rem;
+ display: block;
+ position: relative;
+ z-index: 1;
+ }
+ #why-choose-1657 .cs-picture img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #why-choose-1657 .cs-quote {
+ /* 62px - 100px */
+ width: clamp(3.875rem, 7vw, 6.25rem);
+ height: auto;
+ margin-bottom: -1.75rem;
+ opacity: 0.4;
+ position: relative;
+ z-index: -1;
+ }
+ #why-choose-1657 .cs-review {
+ --quoteColor: var(--primary);
+ /* 20px - 25px */
+ font-size: clamp(1.25rem, 3vw, 1.5625rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ width: 100%;
+ max-width: 32.625rem;
+ margin: 0;
+ color: var(--headerColor);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #why-choose-1657 .cs-container {
+ max-width: 80rem;
+ gap: 0;
+ }
+ #why-choose-1657 .cs-content {
+ padding-bottom: 6.25rem;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ }
+ #why-choose-1657 .cs-flex {
+ text-align: left;
+ width: 40vw;
+ max-width: 39.375rem;
+ flex: none;
+ }
+ #why-choose-1657 .cs-title {
+ margin: 0;
+ }
+ #why-choose-1657 .cs-wrapper {
+ /* -60px to -140px */
+ margin-top: calc(clamp(3.75rem, 10vw, 8.75rem) * -1);
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+ #why-choose-1657 .cs-picture {
+ width: 43vw;
+ max-width: 39.375rem;
+ height: auto;
+ max-height: 100%;
+ /* 252px - 414px */
+ min-height: clamp(15.75rem, 30vw, 25.875rem);
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+ #why-choose-1657 .cs-review {
+ /* 100px - 235px */
+ /* pushes up against the container so there's always that gap between the top of the review and the container */
+ margin-top: clamp(6.25rem, 20vw, 14.5rem);
+ align-self: flex-end;
+ }
+}
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode #why-choose-1657 {
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+ body.dark-mode #why-choose-1657 .cs-title,
+ body.dark-mode #why-choose-1657 .cs-li-text,
+ body.dark-mode #why-choose-1657 .cs-review {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #why-choose-1657 .cs-li-text {
+ opacity: 0.8;
+ }
+ body.dark-mode #why-choose-1657 .cs-wrapper:before {
+ background-color: var(--dark);
+ }
+}
+/*-- -------------------------- -->
+ <--- Side By Side Reverse -->
+ <--- -------------------------- -*/
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #sbsr-1309 {
+ padding: var(--sectionPadding);
+ overflow: hidden;
+ }
+ #sbsr-1309 .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: 36.5rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: clamp(3rem, 4vw, 4rem);
+ }
+ #sbsr-1309 .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ max-width: 33.875rem;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ position: relative;
+ z-index: 10;
+ }
+ #sbsr-1309 .cs-text {
+ margin-bottom: 1rem;
+ }
+ #sbsr-1309 .cs-text:last-of-type {
+ margin-bottom: 2rem;
+ }
+ #sbsr-1309 .cs-image-group {
+ width: 100%;
+ max-width: 41.875rem;
+ height: 100vw;
+ max-height: 39.375rem;
+ display: block;
+ position: relative;
+ z-index: 1;
+ }
+ #sbsr-1309 .cs-picture {
+ /* big background image */
+ width: 93%;
+ height: 93%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #sbsr-1309 .cs-picture img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #sbsr-1309 .cs-box {
+ text-align: left;
+ width: 70%;
+ max-width: 19rem;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ /* 20px - 40px */
+ padding: clamp(1.25rem, 4vw, 2.5rem);
+ background-color: #1a1a1a;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 0.5rem;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ }
+ #sbsr-1309 .cs-desc {
+ /* 16px - 31px */
+ font-size: clamp(1rem, 2.5vw, 1.9375rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: inherit;
+ width: 100%;
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ z-index: 10;
+ }
+ #sbsr-1309 .cs-graphic {
+ width: 150%;
+ height: auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ z-index: -1;
+ transform: translate(-50%, -50%);
+ }
+}
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #sbsr-1309 .cs-container {
+ max-width: 80rem;
+ /* set to horizontal arrangement */
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+ #sbsr-1309 .cs-content {
+ width: 30%;
+ padding: 3rem 0;
+ align-self: center;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+ #sbsr-1309 .cs-image-group {
+ width: 70%;
+ max-width: 71.875rem;
+ height: auto;
+ max-height: 100%;
+ min-height: 11.875rem;
+ margin: 0;
+ /* sends it to the right in the second position */
+ order: 2;
+ }
+ #sbsr-1309 .cs-picture {
+ width: 93%;
+ height: 94%;
+ right: 0;
+ left: auto;
+ }
+ #sbsr-1309 .cs-box {
+ right: auto;
+ bottom: 0rem;
+ left: 0;
+ }
+ #sbsr-1309 .cs-graphic {
+ max-width: 44.6875rem;
+ right: 8.125rem;
+ left: auto;
+ transform: translateY(-50%);
+ }
+}
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode #sbsr-1309 .cs-title,
+ body.dark-mode #sbsr-1309 .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #sbsr-1309 .cs-link {
+ color: var(--secondaryLight);
+ }
+ body.dark-mode #sbsr-1309 .cs-text {
+ opacity: 0.8;
+ }
+ body.dark-mode #sbsr-1309 .cs-box {
+ background-color: var(--medium);
+ }
+}
- .cs-container {
- width: 100%;
- /* changes to 1280px at tablet */
- max-width: calc(584 / 16 * 1rem);
- margin: auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- /* 48px - 100px */
- gap: clamp(3rem, 10vw, 6.25rem);
- }
- .cs-content {
- /* set text align to left if content needs to be left aligned */
- text-align: left;
- width: 100%;
- display: flex;
- flex-direction: column;
- /* centers content horizontally, set to flex-start to left align */
- align-items: flex-start;
- }
- .cs-flex {
- max-width: calc(616 / 16 * 1rem);
- }
+@media only screen and (min-width: 0rem) {
- .cs-title {
- max-width: 20ch;
- margin-bottom: calc(24 / 16 * 1rem);
- }
+ #gridsection1 {
+ /* Ensures container adapts to mobile screens */
+ overflow: hidden; /* Prevents overflow */
+ }
- .cs-ul {
- width: 100%;
- max-width: calc(522 / 16 * 1rem);
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
- /* 28px - 32px */
- gap: clamp(1.75rem, 3vw, 2rem);
- }
+ #gridsection1 .grid-container {
+ display: grid;
+ grid-template-columns: 1fr; /* Single column layout for mobile */
+ gap: 10px; /* Reduced space between items */
+ padding: 10px;
+ max-width: 100%; /* Ensures container doesn't exceed screen width */
+ box-sizing: border-box; /* Includes padding in width calculation */
+ }
- .cs-li {
- list-style: none;
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- gap: calc(16 / 16 * 1rem);
- }
+ #gridsection1 .grid-item {
+ padding: 10px;
+ box-sizing: border-box; /* Ensures padding does not cause overflow */
+ }
- .cs-number {
- font-size: calc(20 / 16 * 1rem);
- font-weight: 700;
- line-height: 1.2em;
- margin: 0;
- color: var(--primary);
- display: block;
- }
+ #gridsection1 .grid-item img {
+ width: 100%; /* Full width of the grid item */
+ height: auto; /* Adjust height to maintain aspect ratio */
+ display: block; /* Removes extra space below the image */
+ }
- .cs-li-text {
- /* 14px - 16px */
- font-size: clamp(0.875rem, 1.5vw, 1rem);
- line-height: 1.5em;
- margin: 0;
- color: var(--bodyTextColor);
- }
+ #gridsection1 .item-title {
+ font-size: 1.25rem; /* Adjust size for mobile */
+ margin: 10px 0; /* Adds margin around title */
+ }
- .cs-wrapper {
- width: 100%;
- display: flex;
- flex-direction: column;
- /* 40px - 64px */
- gap: clamp(2.5rem, 6vw, 4rem);
- position: relative;
- z-index: 1;
-
- &:before {
- /* white background */
- content: "";
- width: 100vw;
- height: 500%;
- background: #fff;
- opacity: 1;
- display: block;
- position: absolute;
- /* 40px - 140px */
- top: clamp(2.5rem, 10vw, 8.75rem);
- left: 50%;
- z-index: -1;
- transform: translateX(-50%);
- }
- }
+ #gridsection1 .item-description {
+ font-size: 0.9rem; /* Adjust size for mobile */
+ margin: 0 0 10px; /* Margin below description */
+ }
- .cs-picture {
- width: 100%;
- height: 70vw;
- max-height: calc(400 / 16 * 1rem);
- display: block;
- position: relative;
- z-index: 1;
-
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- }
- }
+ #gridsection1 .item-button {
+ font-size: 0.9rem; /* Adjust font size for mobile */
+ padding: 8px 16px; /* Adjust padding for mobile */
+ display: inline-block; /* Allows for responsive button width */
+ }
- .cs-quote {
- /* 62px - 100px */
- width: clamp(3.875rem, 7vw, 6.25rem);
- height: auto;
- margin-bottom: calc(-28 / 16 * 1rem);
- opacity: 0.4;
- position: relative;
- z-index: -1;
- }
+ #gridsection1 .sub-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* 3 columns on mobile */
+ gap: 5px; /* Reduced space between SVG items */
+ margin-bottom: 20px; /* Space between sub-grid and button */
+ }
- .cs-review {
- --quoteColor: var(--primary);
-
- /* 20px - 25px */
- font-size: clamp(1.25rem, 3vw, 1.5625rem);
- font-weight: 700;
- line-height: 1.2em;
- width: 100%;
- max-width: calc(522 / 16 * 1rem);
- margin: 0;
- color: var(--headerColor);
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
+ #gridsection1 .sub-grid-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%; /* Full width of the sub-grid item */
+ height: auto; /* Adjust height to maintain aspect ratio */
+ box-sizing: border-box; /* Includes padding in width calculation */
+ padding: 10px; /* Padding inside the item */
+ }
+
+ #gridsection1 .sub-grid-item img {
+ width: 60%; /* Adjust size for mobile */
+ height: auto; /* Maintain aspect ratio */
}
+
+ #gridsection1 .svg-title {
+ font-size: 0.8rem; /* Adjust size for mobile */
+ margin-top: 5px; /* Margin above title */
+ }
+
}
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
-/* Tablet - 768px */
-@media only screen and (min-width: 48rem) {
- #why-choose-1657 {
- .cs-container {
- max-width: calc(1280 / 16 * 1rem);
- gap: 0;
- }
+ #gridsection1{
- .cs-content {
- padding-bottom: calc(100 / 16 * 1rem);
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-start;
- }
- .cs-flex {
- text-align: left;
- width: 40vw;
- max-width: calc(630 / 16 * 1rem);
- flex: none;
- }
+ }
- .cs-title {
- margin: 0;
- }
+ #gridsection1 .grid-container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
+ gap: 20px; /* Space between items */
+ padding: 20px;
+ max-width: 1200px;
+ margin: 0 auto; /* Center the grid */
+ }
+
+ #gridsection1 .grid-item {
+ background-color: #ffffff; /* Light background for each item */
+ border-radius: 10px;
+ overflow: hidden;
+ text-align: center;
+ padding: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ #gridsection1 .grid-item img {
+ width: 100%;
+ height: 200px;
+ border-radius: 10px 10px 0 0;
+ }
+
+ #gridsection1 .item-title {
+ font-size: 1.5rem;
+ margin: 15px 0 10px;
+ color: #333;
+ }
+
+ #gridsection1 .item-description {
+ font-size: 1rem;
+ color: #666;
+ margin-bottom: 20px;
+ }
+
+ #gridsection1 .item-button {
+ background-color: #dd9528; /* Button color */
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ font-size: 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ #gridsection1 .item-button:hover {
+ background-color: #cc8522; /* Darker shade on hover */
+ }
- .cs-wrapper {
- /* -60px to -140px */
- margin-top: calc(clamp(3.75rem, 10vw, 8.75rem) * -1);
- flex-direction: row;
- justify-content: space-between;
- align-items: stretch;
- }
+ #gridsection1 .sub-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
+ gap: 10px; /* Space between SVG items */
+ margin-bottom: 20px; /* Space between sub-grid and button */
+ }
+
+ #gridsection1 .sub-grid-item {
+ margin-top: 20px;
+
+ border-radius: 1px;
+ padding: 1px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 60%; /* Ensures the item takes up full grid column space */
+ height: 120px;
+ aspect-ratio: 5 / 5; /* Makes the item a square */
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
+ }
+
+ #gridsection1 .sub-grid-item img {
+ width: 60%; /* Adjusts SVG size */
+ height: 40px;
+ display: block;
+ margin-bottom: 10px; /* Space between SVG and title */
+ }
+
+ #gridsection1 .svg-title {
+ font-size: 0.9rem;
+ color: #333;
+ text-align: center; /* Center-align the title */
+ }
- .cs-picture {
- width: 43vw;
- max-width: calc(630 / 16 * 1rem);
- height: auto;
- max-height: 100%;
- /* 252px - 414px */
- min-height: clamp(15.75rem, 30vw, 25.875rem);
- /* prevents flexbox from squishing it */
- flex: none;
- }
+ #gridsection1 .filter-color{
+ filter: invert(71%) sepia(72%) saturate(334%) hue-rotate(359deg) brightness(93%) contrast(91%);
- .cs-review {
- /* 100px - 235px */
- /* pushes up against the container so there's always that gap between the top of the review and the container */
- margin-top: clamp(6.25rem, 20vw, 14.5rem);
- align-self: flex-end;
- }
}
+
}
-
/* Dark Mode */
@media only screen and (min-width: 0rem) {
- body.dark-mode {
- #why-choose-1657 {
- background-color: rgba(0, 0, 0, 0.3);
-
- .cs-title,
- .cs-li-text,
- .cs-review {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-li-text {
- opacity: 0.8;
- }
-
- .cs-wrapper {
- &:before {
- background-color: var(--dark);
- }
- }
- }
+ body.dark-mode #sbsr-1309 .cs-title,
+ body.dark-mode #sbsr-1309 .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #sbsr-1309 .cs-link {
+ color: var(--secondaryLight);
+ }
+ body.dark-mode #sbsr-1309 .cs-text {
+ opacity: 0.8;
+ }
+ body.dark-mode #sbsr-1309 .cs-box {
+ background-color: var(--medium);
}
}
-/*-- -------------------------- -->
-<--- Side By Side Reverse -->
-<--- -------------------------- -*/
-/* Mobile - 360px */
+
@media only screen and (min-width: 0rem) {
- #sbsr-1309 {
+ #sbsr-13091 {
padding: var(--sectionPadding);
overflow: hidden;
+ }
+ #sbsr-13091 .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: 36.5rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: clamp(3rem, 4vw, 4rem);
+ }
+ #sbsr-13091 .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ max-width: 33.875rem;
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ position: relative;
+ z-index: 10;
+ }
+ #sbsr-13091 .cs-text {
+ margin-bottom: 1rem;
+ }
+ #sbsr-13091 .cs-text:last-of-type {
+ margin-bottom: 2rem;
+ }
+ #sbsr-13091 .cs-image-group {
+ width: 100%;
+ max-width: 41.875rem;
+ height: 100vw;
+ max-height: 39.375rem;
+ display: block;
+ position: relative;
+ z-index: 1;
+ }
+ #sbsr-13091 .cs-picture {
+ /* big background image */
+ width: 93%;
+ height: 93%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #sbsr-13091 .cs-picture img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #sbsr-13091 .cs-box {
+ text-align: left;
+ width: 70%;
+ max-width: 19rem;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ /* 20px - 40px */
+ padding: clamp(1.25rem, 4vw, 2.5rem);
+ background-color: #1a1a1a;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 0.5rem;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ }
+ #sbsr-13091 .cs-desc {
+ /* 16px - 31px */
+ font-size: clamp(1rem, 2.5vw, 1.9375rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: inherit;
+ width: 100%;
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ z-index: 10;
+ }
+ #sbsr-13091 .cs-graphic {
+ width: 150%;
+ height: auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ z-index: -1;
+ transform: translate(-50%, -50%);
+ }
+}
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #sbsr-13091 .cs-container {
+ max-width: 80rem;
+ /* set to horizontal arrangement */
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+ #sbsr-13091 .cs-content {
+ width: 40%;
+ padding: 3rem 0;
+ align-self: center;
+ /* prevents flexbox from squishing it */
+ max-width: 71.875rem;
+ flex: none;
+ }
+ #sbsr-13091 .cs-image-group {
+ width: 60%;
+
+ height: auto;
+ max-height: 100%;
+ min-height: 11.875rem;
+ margin-top: 100px;
+ /* sends it to the right in the second position */
+ order: 2;
+ }
+ #sbsr-13091 .cs-picture {
+ width: 93%;
+ height: 94%;
+ right: 0;
+ left: auto;
+ }
+ #sbsr-13091 .cs-box {
+ right: auto;
+ bottom: 0rem;
+ left: 0;
+ }
+ #sbsr-13091 .cs-graphic {
+ max-width: 44.6875rem;
+ right: 8.125rem;
+ left: auto;
+ transform: translateY(-50%);
+ }
- .cs-container {
- width: 100%;
- /* changes to 1280px at desktop */
- max-width: calc(584 / 16 * 1rem);
- margin: auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: clamp(3rem, 4vw, 4rem);
- }
+ #sbsr-13091 .form-container {
+ background-color: #f3f1f1;
+
+ padding: 90px;
+ border-radius: 1px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ max-width:71.23rem;
+ margin: auto;
+ animation: fadeIn 1s ease-in-out;
+ }
- .cs-content {
- /* set text align to left if content needs to be left aligned */
- text-align: left;
- width: 100%;
- max-width: calc(542 / 16 * 1rem);
- display: flex;
- flex-direction: column;
- /* centers content horizontally, set to flex-start to left align */
- align-items: flex-start;
- position: relative;
- z-index: 10;
- }
+ #sbsr-13091 .form-content {
+ display: flex;
+ flex-direction: column;
+ }
- .cs-text {
- margin-bottom: calc(16 / 16 * 1rem);
- &:last-of-type {
- margin-bottom: calc(32 / 16 * 1rem);
- }
- }
+ #sbsr-13091 .form-group {
+ margin-bottom: 15px;
+ animation: slideIn 0.8s ease-in-out;
+ }
- .cs-image-group {
- width: 100%;
- max-width: calc(670 / 16 * 1rem);
- height: 100vw;
- max-height: calc(630 / 16 * 1rem);
- display: block;
- position: relative;
- z-index: 1;
- }
+ #sbsr-13091 .form-group label {
+ margin-bottom: 5px;
+ font-weight: bold;
+ color: #e1b656;
+ }
- .cs-picture {
- /* big background image */
- width: 93%;
- height: 93%;
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- }
- }
+ #sbsr-13091 .form-group input,
+ .form-group select {
+ padding-right: 5px;
+ padding-left: 5px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+
+ border-radius: 2px;
+ border: 1px solid #ccc;
+ width: 100%;
+ transition: border-color 0.3s ease;
+ }
- .cs-box {
- text-align: left;
- width: 70%;
- max-width: calc(304 / 16 * 1rem);
- /* prevents padding and border from affecting height and width */
- box-sizing: border-box;
- /* 20px - 40px */
- padding: clamp(1.25rem, 4vw, 2.5rem);
- background-color: #1a1a1a;
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: calc(8 / 16 * 1rem);
- position: absolute;
- right: 0;
- bottom: 0;
- z-index: 10;
- }
+ #sbsr-13091 .form-group input:focus,
+ .form-group select:focus {
+ border-color: #e1b656;
+ }
- .cs-desc {
- /* 16px - 31px */
- font-size: clamp(1rem, 2.5vw, 1.9375rem);
- font-weight: 700;
- line-height: 1.2em;
- text-align: inherit;
- width: 100%;
- color: var(--bodyTextColorWhite);
- position: relative;
- z-index: 10;
- }
+ #sbsr-13091 .submit-btn {
+ padding: 12px;
+ background-color: #e1b656;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ width: 400px;
+ transition: background-color 0.3s ease, transform 0.2s;
+ }
+ #sbsr-13091 ::placeholder {
+ color: #000;
+ opacity: 1; /* Ensures full opacity */
+ }
+
+ #sbsr-13091 .cs-text{
- .cs-graphic {
- width: 150%;
- height: auto;
- position: absolute;
- top: 50%;
- left: 50%;
- z-index: -1;
- transform: translate(-50%, -50%);
- }
+ font-size: 20px;
+ text-align: left;
}
+
+
+ #sbsr-13091 .svg-wrapper {
+ position: relative;
+ width: 100%; /* Adjust if needed */
+ height: 50px; /* Adjust height to fit the SVG */
+ margin-top: 20px; /* Space above SVG */
+
+ }
+
+ #sbsr-13091 .svg-icon {
+ width: 80px; /* Adjust the size as needed */
+ height: 80px;
+ filter: invert(71%) sepia(72%) saturate(334%) hue-rotate(359deg) brightness(93%) contrast(91%);
}
+#sbsr-13091 .contact {
-/* Desktop - 1024px */
-@media only screen and (min-width: 64rem) {
- #sbsr-1309 {
- .cs-container {
- max-width: calc(1280 / 16 * 1rem);
- /* set to horizontal arrangement */
- flex-direction: row;
- justify-content: space-between;
- align-items: stretch;
- }
+ margin-top: 20px;
+ margin-left: 80px;
+ font-size: 20px; /* Adjust text size as needed */
+ color: #e1b656; /* Text color */
+}
+#sbsr-13091 .cs-button-solid {
+ font-size: 1rem;
+ font-weight: 700;
+ margin-top: 90px;
+ /* 46px - 56px */
+ line-height: clamp(2.875rem, 5.5vw, 3.5rem);
+ text-align: center;
+ text-decoration: none;
+ min-width: 9.375rem;
+
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 3rem;
+ color: #ffffff;
+ background-color: var(--primary);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ transition: color 0.3s;
+}
+#sbsr-13091 .description {
- .cs-content {
- width: 48%;
- padding: calc(48 / 16 * 1rem) 0;
- align-self: center;
- /* prevents flexbox from squishing it */
- flex: none;
- }
+
+ font-size: 16px; /* Adjust text size as needed */
+ color: #000; /* Text color */
+}
+ #sbsr-13091 .submit-btn:hover {
+ background-color: #e1b656;
+ transform: scale(1.05);
+ }
- .cs-image-group {
- width: 55%;
- max-width: calc(670 / 16 * 1rem);
- height: auto;
- max-height: 100%;
- min-height: calc(670 / 16 * 1rem);
- margin: 0;
- /* sends it to the right in the second position */
- order: 2;
- }
+ #sbsr-13091 .highlight {
+ color: #d7b65d; /* Change this to your desired color */
+ font-weight: bold; /* Optional: Make it bold */
+ }
+
+
- .cs-picture {
- width: 93%;
- height: 94%;
- right: 0;
- left: auto;
- }
- .cs-box {
- right: auto;
- bottom: calc(0 / 16 * 1rem);
- left: 0;
- }
- .cs-graphic {
- max-width: calc(715 / 16 * 1rem);
- right: calc(130 / 16 * 1rem);
- left: auto;
- transform: translateY(-50%);
- }
+
+
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
}
-}
+ @keyframes slideIn {
+ from { transform: translateY(20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+ }
+}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
- body.dark-mode {
- #sbsr-1309 {
- .cs-title,
- .cs-text {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-link {
- color: var(--secondaryLight);
- }
-
- .cs-text {
- opacity: 0.8;
- }
-
- .cs-box {
- background-color: var(--medium);
- }
- }
+ body.dark-mode #sbsr-1309 .cs-title,
+ body.dark-mode #sbsr-1309 .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #sbsr-1309 .cs-link {
+ color: var(--secondaryLight);
+ }
+ body.dark-mode #sbsr-1309 .cs-text {
+ opacity: 0.8;
+ }
+ body.dark-mode #sbsr-1309 .cs-box {
+ background-color: var(--medium);
}
}
+
+
+
+
+
+
diff --git a/starter-styles/sass/product.scss b/starter-styles/sass/product.scss
new file mode 100644
index 0000000..6f4be4f
--- /dev/null
+++ b/starter-styles/sass/product.scss
@@ -0,0 +1,367 @@
+/*-- -------------------------- -->
+<--- Interior Page Header -->
+<--- -------------------------- -*/
+
+/* Mobile */
+@media only screen and (min-width: 0em) {
+ #int-hero {
+ min-height: 30vh;
+ padding-top: 9.375rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.7;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
+
+ picture {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ h1 {
+ font-size: 2.13333333rem;
+ text-align: center;
+ width: 96%;
+ max-width: 31.25rem;
+ margin: 0 auto;
+ margin-top: 4.375rem;
+ margin-bottom: 1.875rem;
+ color: #fff;
+ position: relative;
+ }
+
+ p {
+ text-align: center;
+ width: 96%;
+ max-width: 25rem;
+ margin: auto;
+ margin-bottom: 1.875rem;
+ color: #fff;
+ display: block;
+ }
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: 48em) {
+ #int-hero {
+ font-size: 100%;
+
+ h1 {
+ font-size: 4rem;
+ }
+ }
+}
+
+/* Small Desktop */
+@media only screen and (min-width: 64em) {
+ #int-hero {
+ font-size: inherit;
+ height: auto;
+ min-height: 18.75rem;
+ padding-top: 11.25rem;
+ background-attachment: fixed;
+ padding-block-end: 6.25rem;
+ }
+}
+
+/*-- -------------------------- -->
+<--- Product -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #product {
+ padding: var(--sectionPadding);
+ overflow: hidden;
+
+ .cs-container {
+ width: 100%;
+ max-width: 46.875rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: clamp(1.75rem, 5vw, 4rem);
+ }
+
+ .cs-large-image {
+ width: 100%;
+ height: clamp(15.5rem, 70vw, 33.3125rem);
+ display: block;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ background-color: #f7f7f7;
+ display: block;
+ }
+ }
+
+ .cs-h3 {
+ font-size: var(--headerFontSize);
+ font-weight: 900;
+ line-height: 1.2em;
+ margin: 0 0 0.5rem;
+ color: var(--headerColor);
+ }
+
+ .cs-price {
+ font-size: 1.25rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ color: var(--secondary);
+ display: block;
+ }
+
+ .cs-compare-price {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ text-decoration: line-through;
+ color: #767676;
+ display: block;
+ }
+
+ .cs-taxes {
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.5em;
+ color: var(--primary);
+ display: block;
+ }
+
+ .cs-info-text {
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5em;
+ margin: clamp(0.75rem, 2vw, 1rem) 0 0.5rem;
+ color: var(--bodyTextColor);
+ }
+
+ .cs-details {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ width: fit-content;
+ margin-bottom: 1.5rem;
+ color: var(--bodyTextColor);
+ border-bottom: 1px solid var(--bodyTextColor);
+ display: block;
+ }
+
+ .cs-option {
+ font-size: 1.275rem;
+ font-weight: 700;
+ line-height: 0.875em;
+ margin-bottom: 1.5rem;
+ color: var(--bodyTextColor);
+ display: block;
+ }
+
+ .cs-dropdown {
+ width: 100%;
+ max-width: 15rem;
+ height: 3rem;
+ margin-bottom: 1.5rem;
+ padding: 0 1rem;
+ background: #f7f7f7;
+ border: 1px solid #e8e8e8;
+ border-radius: 6.25rem;
+ outline: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ cursor: pointer;
+ }
+
+ .cs-quantity {
+ width: 100%;
+ width: fit-content;
+ max-width: 15rem;
+ height: 3rem;
+ margin-bottom: 1.5rem;
+ padding: 0 1rem;
+ background: #f7f7f7;
+ border: 1px solid #e8e8e8;
+ border-radius: 6.25rem;
+ outline: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ cursor: pointer;
+ }
+
+ .cs-select-icon {
+ display: none;
+ }
+
+ .cs-quantity-increment {
+ font-size: 1.5rem;
+ color: #767676;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .cs-quantity-decrement {
+ font-size: 1.5rem;
+ color: #767676;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .cs-quantity-input {
+ font-size: 1.25rem;
+ line-height: 1.5em;
+ text-align: center;
+ width: 2rem;
+ background-color: transparent;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-quantity-input[type="number"] {
+ margin: 0;
+ -webkit-appearance: none;
+ -moz-appearance: textfield;
+ }
+
+ .cs-button {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ padding: 1rem;
+ background: none;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ flex: 1 0 0;
+ }
+
+ .cs-buy {
+ color: #fff;
+ background-color: var(--primary);
+ cursor: pointer;
+ }
+ }
+
+ .visuallyhidden {
+ white-space: nowrap;
+ width: 1px;
+ height: 1px;
+ position: absolute;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ }
+}
+
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #product {
+ .cs-container {
+ max-width: 80rem;
+ flex-direction: row;
+ align-items: start;
+ }
+
+ .cs-large-image {
+ height: 100%;
+ flex: 0 0 33.75rem;
+ }
+
+ .cs-product-info {
+ flex: 1 0 0;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #product {
+ .cs-h3 {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-info-text {
+ color: var(--bodyTextColorWhite);
+ opacity: 0.8;
+ }
+
+ .cs-details {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-option {
+ color: var(--bodyTextColorWhite);
+ b {
+ color: var(--bodyTextColorWhite);
+ }
+ }
+
+ .cs-box {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-quantity {
+ color: var(--bodyTextColorWhite);
+ background-color: var(--medium);
+ border-color: var(--accent);
+ }
+
+ .cs-cart {
+ color: var(--bodyTextColorWhite);
+ background-color: var(--medium);
+ border-color: var(--accent);
+ }
+
+ .cs-price {
+ color: var(--primaryLight);
+ }
+
+ .cs-taxes {
+ color: var(--secondaryLight);
+ }
+
+ .cs-box-number {
+ background-color: var(--medium);
+ border-color: var(--accent);
+ }
+ }
+ }
+}
diff --git a/starter-styles/sass/root.scss b/starter-styles/sass/root.scss
index efc47dd..ac11eb7 100644
--- a/starter-styles/sass/root.scss
+++ b/starter-styles/sass/root.scss
@@ -2,34 +2,30 @@
<--- Core Styles -->
<--- -------------------------- -*/
@media only screen and (min-width: 0rem) {
- // CS-TODO: Adjust core styles to your liking. It may also be worth adding additional fonts for the header and changing the body font below.
- // This kit has also removed all instances of .cs-button outside of the root sheet, meaning you can change for any of the content flair buttons in one place.
:root {
/* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
- --primary: #ffba19;
+ --primary: #e1b656;
--primaryLight: #ffd675;
- --secondary: #001f3f;
+ --secondary: #e1b656;
--secondaryLight: #001f3f;
- --headerColor: #1a1a1a;
- --bodyTextColor: #4e4b66;
+ --headerColor: #001f3f;
+ --titleColor:#e1b656;
+ --bodyTextColor: #6a6f73;
--bodyTextColorWhite: #fafbfc;
/* 13px - 16px */
- --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
+ --topperFontSize: clamp(2.8125rem, 1.6vw, 1rem);
/* 31px - 49px */
--headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
--bodyFontSize: 1rem;
/* 60px - 100px top and bottom */
--sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
-
- --bodyFontFamily: Arial, Helvetica, sans-serif;
+ --bodyFontFamily: 'Playfair Display', serif;
}
-
body {
font-family: var(--bodyFontFamily);
margin: 0;
padding: 0;
}
-
*,
*:before,
*:after {
@@ -47,7 +43,6 @@
color: var(--primary);
display: block;
}
-
.cs-title {
font-size: var(--headerFontSize);
font-weight: 900;
@@ -58,7 +53,6 @@
color: var(--headerColor);
position: relative;
}
-
.cs-text {
font-size: var(--bodyFontSize);
line-height: 1.5em;
@@ -68,74 +62,61 @@
margin: 0;
color: var(--bodyTextColor);
}
-
.cs-button-solid {
- font-size: calc(16 / 16 * 1rem);
+ font-size: 1rem;
font-weight: 700;
/* 46px - 56px */
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-align: center;
text-decoration: none;
- min-width: calc(150 / 16 * 1rem);
+ min-width: 9.375rem;
margin: 0;
/* prevents padding from adding to the width */
box-sizing: border-box;
- padding: 0 calc(24 / 16 * 1rem);
+ padding: 0 1.5rem;
color: #1a1a1a;
background-color: var(--primary);
display: inline-block;
position: relative;
z-index: 1;
transition: color 0.3s;
-
- &:before {
- content: "";
- width: 0%;
- height: 100%;
- background: #000;
- opacity: 1;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- transition: width 0.3s;
- }
-
- &:hover {
- color: #fff;
- &:before {
- width: 100%;
- }
- }
+ }
+ .cs-button-solid:before {
+ content: "";
+ width: 0%;
+ height: 100%;
+ background: #000;
+ opacity: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ transition: width 0.3s;
+ }
+ .cs-button-solid:hover {
+ color: #fff;
+ }
+ .cs-button-solid:hover:before {
+ width: 100%;
}
}
-
/*-- -------------------------- -->
-<--- Mobile Navigation -->
-<--- -------------------------- -*/
+ <--- Mobile Navigation -->
+ <--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
- body {
- &.cs-open {
- overflow: hidden;
- }
-
- &.scroll {
- #cs-navigation {
- .cs-top-container {
- gap: 0;
- }
-
- .cs-top-social {
- height: 0;
- opacity: 0;
- visibility: hidden;
- overflow: hidden;
- }
- }
- }
- }
-
+ body.cs-open {
+ overflow: hidden;
+ }
+ body.scroll #cs-navigation .cs-top-container {
+ gap: 0;
+ }
+ body.scroll #cs-navigation .cs-top-social {
+ height: 0;
+ opacity: 0;
+ visibility: hidden;
+ overflow: hidden;
+ }
#cs-navigation {
width: 100%;
/* prevents padding and border from affecting height and width */
@@ -144,664 +125,572 @@
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
position: fixed;
z-index: 10000;
-
- &:before {
- content: "";
- width: 100%;
- height: 0vh;
- background: rgba(0, 0, 0, 0.6);
- opacity: 0;
- display: block;
- position: absolute;
- top: 100%;
- right: 0;
- z-index: -1100;
- transition: height 0.5s, opacity 0.5s;
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
- }
-
- &.cs-active {
- &:before {
- height: 150vh;
- opacity: 1;
- }
- .cs-ul-wrapper {
- opacity: 1;
- transform: scaleY(1);
- transition-delay: 0.15s;
- }
-
- .cs-li {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- .cs-top-bar {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .cs-top-container {
- width: 100%;
- /* prevents padding and border from affecting height and width */
- box-sizing: border-box;
- /* 16px - 20px */
- padding: clamp(1rem, 2.5vw, 1.25rem) calc(16 / 16 * 1rem);
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: calc(16 / 16 * 1rem);
- }
-
- .cs-contact-group {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: wrap;
- /* sends it to the right in the 2nd position */
- order: 2;
- gap: calc(40 / 16 * 1rem);
- }
-
- .cs-contact-link {
- display: none;
- }
-
- .cs-container {
- width: 100%;
- /* prevents padding and border from affecting height and width */
- box-sizing: border-box;
- /* 16px - 20px */
- padding: clamp(1rem, 2.5vw, 1.25rem) calc(16 / 16 * 1rem);
- background-color: #1a1a1a;
- display: flex;
- justify-content: space-between;
- align-items: center;
- position: relative;
- }
-
- .cs-logo {
- width: auto;
- /* 24px - 32px */
- height: clamp(1.5rem, 3vw, 2rem);
- margin: 0 auto 0 0;
- /* prevents padding and border from affecting height and width */
- box-sizing: border-box;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- order: 1;
- z-index: 10;
-
- img {
- width: auto;
- height: 100%;
- /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
- object-fit: contain;
- }
- }
-
- .cs-nav {
- order: 2;
- }
-
- .cs-toggle {
- /* 48px - 56px */
- width: clamp(3rem, 7.2vw, 3.5rem);
- height: clamp(3rem, 7.2vw, 3.5rem);
- margin: 0 0 0 auto;
- background-color: #484848;
- border: none;
- display: flex;
- justify-content: center;
- align-items: center;
- transition: transform 0.6s;
-
- &.cs-active {
- transform: rotate(180deg);
- }
- }
-
- .cs-active {
- .cs-line1 {
- top: 50%;
- transform: translate(-50%, -50%) rotate(225deg);
- }
-
- .cs-line2 {
- top: 50%;
- transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
- transform-origin: center;
- }
-
- .cs-line3 {
- opacity: 0;
- bottom: 100%;
- }
- }
-
- .cs-box {
- /* 24px - 28px */
- width: clamp(1.5rem, 2vw, 1.75rem);
- height: calc(16 / 16 * 1rem);
- position: relative;
- }
-
- .cs-line {
- width: 100%;
- height: 2px;
- background-color: #fafbfc;
- border-radius: 2px;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
-
- .cs-line1 {
- top: 0;
- transition: transform 0.5s, top 0.3s, left 0.3s;
- animation-duration: 0.7s;
- animation-timing-function: ease;
- animation-direction: normal;
- animation-fill-mode: forwards;
- transform-origin: center;
- }
-
- .cs-line2 {
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- transition: top 0.3s, left 0.3s, transform 0.5s;
- animation-duration: 0.7s;
- animation-timing-function: ease;
- animation-direction: normal;
- animation-fill-mode: forwards;
- }
-
- .cs-line3 {
- bottom: 0;
- transition: bottom 0.3s, opacity 0.3s;
- }
-
- .cs-ul-wrapper {
- width: 100%;
- height: auto;
- padding-bottom: calc(48 / 16 * 1rem);
- background-color: #fff;
- box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
- opacity: 0;
- position: absolute;
- top: 100%;
- left: 0;
- z-index: -1;
- overflow: hidden;
- transform: scaleY(0);
- transition: transform 0.4s, opacity 0.3s;
- transform-origin: top;
- }
-
- .cs-ul {
- width: 100%;
- height: auto;
- max-height: 65vh;
- margin: 0;
- padding: calc(48 / 16 * 1rem) 0 0 0;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- gap: calc(20 / 16 * 1rem);
- overflow: scroll;
- }
-
- .cs-li {
- text-align: center;
- list-style: none;
- width: 100%;
- margin-right: 0;
- opacity: 0;
- /* transition from these values */
- transform: translateY(-4.375rem);
- transition: transform 0.6s, opacity 0.9s;
-
- &:nth-of-type(1) {
- transition-delay: 0.05s;
- }
- &:nth-of-type(2) {
- transition-delay: 0.1s;
- }
- &:nth-of-type(3) {
- transition-delay: 0.15s;
- }
- &:nth-of-type(4) {
- transition-delay: 0.2s;
- }
- &:nth-of-type(5) {
- transition-delay: 0.25s;
- }
- &:nth-of-type(6) {
- transition-delay: 0.3s;
- }
- &:nth-of-type(7) {
- transition-delay: 0.35s;
- }
- &:nth-of-type(8) {
- transition-delay: 0.4s;
- }
- &:nth-of-type(9) {
- transition-delay: 0.45s;
- }
- &:nth-of-type(10) {
- transition-delay: 0.5s;
- }
- &:nth-of-type(11) {
- transition-delay: 0.55s;
- }
- &:nth-of-type(12) {
- transition-delay: 0.6s;
- }
- &:nth-of-type(13) {
- transition-delay: 0.65s;
- }
- }
-
- .cs-li-link {
- /* 16px - 24px */
- font-size: clamp(1rem, 2.5vw, 1.5rem);
- line-height: 1.2em;
- text-decoration: none;
- margin: 0;
- color: var(--headerColor);
- display: inline-block;
- position: relative;
-
- &.cs-active {
- color: var(--primary);
- }
-
- &:hover {
- color: var(--primary);
- }
- }
-
- .cs-button-solid {
- font-size: calc(16 / 16 * 1rem);
- font-weight: 700;
- /* 46px - 56px */
- line-height: clamp(2.875rem, 5.5vw, 3.5rem);
- text-align: center;
- text-decoration: none;
- min-width: calc(150 / 16 * 1rem);
- margin: 0;
- /* prevents padding from adding to the width */
- box-sizing: border-box;
- padding: 0 calc(24 / 16 * 1rem);
- color: #1a1a1a;
- background-color: var(--primary);
- display: inline-block;
- position: relative;
- z-index: 1;
- transition: color 0.3s;
-
- &:before {
- content: "";
- width: 0%;
- height: 100%;
- background: #000;
- opacity: 1;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- transition: width 0.3s;
- }
-
- &:hover {
- color: #fff;
- &:before {
- width: 100%;
- }
- }
- }
-
- .cs-button-solid {
- margin: 0;
- display: none;
- }
-
- .cs-call {
- text-decoration: none;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- gap: calc(16 / 16 * 1rem);
- position: relative;
-
- &:before {
- /* light green circle that animates on hover */
- content: "";
- width: calc(48 / 16 * 1rem);
- height: calc(48 / 16 * 1rem);
- background: #eff1f0;
- opacity: 1;
- border-radius: calc(24 / 16 * 1rem);
- display: block;
- position: absolute;
- top: 50%;
- left: 0;
- z-index: -1;
- transform: translateY(-50%);
- transition: width 0.3s, height 0.3s, border-radius 0.3s;
- }
-
- .cs-wrapper {
- width: calc(56 / 16 * 1rem);
- height: calc(56 / 16 * 1rem);
- background-color: var(--primary);
- display: flex;
- justify-content: center;
- align-items: center;
- transition: transform 0.3s;
- /* prevents flexbox from squishing it */
- flex: none;
- }
-
- .cs-icon {
- width: calc(24 / 16 * 1rem);
- height: auto;
- display: block;
- transition: transform 0.3s;
- }
-
- .cs-info {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
-
- .cs-header {
- font-size: calc(14 / 16 * 1rem);
- font-weight: 400;
- line-height: 1.2em;
- margin: 0;
- color: var(--bodyTextColorWhite);
- display: block;
- }
-
- .cs-link-content {
- font-size: calc(20 / 16 * 1rem);
- font-weight: 700;
- line-height: 1.2em;
- margin: 0;
- color: var(--bodyTextColorWhite);
- display: block;
- }
- }
+ }
+ #cs-navigation:before {
+ content: "";
+ width: 100%;
+ height: 0vh;
+ background: rgba(0, 0, 0, 0.6);
+ opacity: 0;
+ display: block;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ z-index: -1100;
+ transition: height 0.5s, opacity 0.5s;
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ }
+ #cs-navigation.cs-active:before {
+ height: 150vh;
+ opacity: 1;
+ }
+ #cs-navigation.cs-active .cs-ul-wrapper {
+ opacity: 1;
+ transform: scaleY(1);
+ transition-delay: 0.15s;
+ }
+ #cs-navigation.cs-active .cs-li {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ #cs-navigation .cs-top-bar {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ #cs-navigation .cs-top-container {
+ width: 100%;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ /* 16px - 20px */
+ padding: clamp(1rem, 2.5vw, 1.25rem) 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ }
+ #cs-navigation .cs-contact-group {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ flex-wrap: wrap;
+ /* sends it to the right in the 2nd position */
+ order: 2;
+ gap: 2.5rem;
+ }
+ #cs-navigation .cs-contact-link {
+ display: none;
+ }
+ #cs-navigation .cs-container {
+ width: 100%;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ /* 16px - 20px */
+ padding: clamp(1rem, 2.5vw, 1.25rem) 1rem;
+ background-color: #1a1a1a;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+ #cs-navigation .cs-logo {
+ width: auto;
+ /* 24px - 32px */
+ height: clamp(1.5rem, 3vw, 2rem);
+ margin: 0 auto 0 0;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ order: 1;
+ z-index: 10;
+ }
+ #cs-navigation .cs-logo img {
+ width: auto;
+ height: 100%;
+ /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
+ object-fit: contain;
+ }
+ #cs-navigation .cs-nav {
+ order: 2;
+ }
+ #cs-navigation .cs-toggle {
+ /* 48px - 56px */
+ width: clamp(3rem, 7.2vw, 3.5rem);
+ height: clamp(3rem, 7.2vw, 3.5rem);
+ margin: 0 0 0 auto;
+ background-color: #484848;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: transform 0.6s;
+ }
+ #cs-navigation .cs-toggle.cs-active {
+ transform: rotate(180deg);
+ }
+ #cs-navigation .cs-active .cs-line1 {
+ top: 50%;
+ transform: translate(-50%, -50%) rotate(225deg);
+ }
+ #cs-navigation .cs-active .cs-line2 {
+ top: 50%;
+ transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
+ transform-origin: center;
+ }
+ #cs-navigation .cs-active .cs-line3 {
+ opacity: 0;
+ bottom: 100%;
+ }
+ #cs-navigation .cs-box {
+ /* 24px - 28px */
+ width: clamp(1.5rem, 2vw, 1.75rem);
+ height: 1rem;
+ position: relative;
+ }
+ #cs-navigation .cs-line {
+ width: 100%;
+ height: 2px;
+ background-color: #fafbfc;
+ border-radius: 2px;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ #cs-navigation .cs-line1 {
+ top: 0;
+ transition: transform 0.5s, top 0.3s, left 0.3s;
+ animation-duration: 0.7s;
+ animation-timing-function: ease;
+ animation-direction: normal;
+ animation-fill-mode: forwards;
+ transform-origin: center;
+ }
+ #cs-navigation .cs-line2 {
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ transition: top 0.3s, left 0.3s, transform 0.5s;
+ animation-duration: 0.7s;
+ animation-timing-function: ease;
+ animation-direction: normal;
+ animation-fill-mode: forwards;
+ }
+ #cs-navigation .cs-line3 {
+ bottom: 0;
+ transition: bottom 0.3s, opacity 0.3s;
+ }
+ #cs-navigation .cs-ul-wrapper {
+ width: 100%;
+ height: auto;
+ padding-bottom: 3rem;
+ background-color: #fff;
+ box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
+ opacity: 0;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: -1;
+ overflow: hidden;
+ transform: scaleY(0);
+ transition: transform 0.4s, opacity 0.3s;
+ transform-origin: top;
+ }
+ #cs-navigation .cs-ul {
+ width: 100%;
+ height: auto;
+ max-height: 65vh;
+ margin: 0;
+ padding: 3rem 0 0 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 1.25rem;
+ overflow: scroll;
+ }
+ #cs-navigation .cs-li {
+ text-align: center;
+ list-style: none;
+ width: 100%;
+ margin-right: 0;
+ opacity: 0;
+ /* transition from these values */
+ transform: translateY(-4.375rem);
+ transition: transform 0.6s, opacity 0.9s;
+ }
+ #cs-navigation .cs-li:nth-of-type(1) {
+ transition-delay: 0.05s;
+ }
+ #cs-navigation .cs-li:nth-of-type(2) {
+ transition-delay: 0.1s;
+ }
+ #cs-navigation .cs-li:nth-of-type(3) {
+ transition-delay: 0.15s;
+ }
+ #cs-navigation .cs-li:nth-of-type(4) {
+ transition-delay: 0.2s;
+ }
+ #cs-navigation .cs-li:nth-of-type(5) {
+ transition-delay: 0.25s;
+ }
+ #cs-navigation .cs-li:nth-of-type(6) {
+ transition-delay: 0.3s;
+ }
+ #cs-navigation .cs-li:nth-of-type(7) {
+ transition-delay: 0.35s;
+ }
+ #cs-navigation .cs-li:nth-of-type(8) {
+ transition-delay: 0.4s;
+ }
+ #cs-navigation .cs-li:nth-of-type(9) {
+ transition-delay: 0.45s;
+ }
+ #cs-navigation .cs-li:nth-of-type(10) {
+ transition-delay: 0.5s;
+ }
+ #cs-navigation .cs-li:nth-of-type(11) {
+ transition-delay: 0.55s;
+ }
+ #cs-navigation .cs-li:nth-of-type(12) {
+ transition-delay: 0.6s;
+ }
+ #cs-navigation .cs-li:nth-of-type(13) {
+ transition-delay: 0.65s;
+ }
+ #cs-navigation .cs-li-link {
+ /* 16px - 24px */
+ font-size: clamp(1rem, 2.5vw, 1.5rem);
+ line-height: 1.2em;
+ text-decoration: none;
+ margin: 0;
+ color: var(--headerColor);
+ display: inline-block;
+ position: relative;
+ }
+ #cs-navigation .cs-li-link.cs-active {
+ color: var(--primary);
+ }
+ #cs-navigation .cs-li-link:hover {
+ color: var(--primary);
+ }
+ #cs-navigation .cs-button-solid {
+ font-size: 1rem;
+ font-weight: 700;
+ /* 46px - 56px */
+ line-height: clamp(2.875rem, 5.5vw, 3.5rem);
+ text-align: center;
+ text-decoration: none;
+ min-width: 9.375rem;
+ margin: 0;
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 1.5rem;
+ color: #1a1a1a;
+ background-color: var(--primary);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ transition: color 0.3s;
+ }
+ #cs-navigation .cs-button-solid:before {
+ content: "";
+ width: 0%;
+ height: 100%;
+ background: #000;
+ opacity: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ transition: width 0.3s;
+ }
+ #cs-navigation .cs-button-solid:hover {
+ color: #fff;
+ }
+ #cs-navigation .cs-button-solid:hover:before {
+ width: 100%;
+ }
+ #cs-navigation .cs-button-solid {
+ margin: 0;
+ display: none;
+ }
+ #cs-navigation .cs-call {
+ text-decoration: none;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 1rem;
+ position: relative;
+ }
+ #cs-navigation .cs-call:before {
+ /* light green circle that animates on hover */
+ content: "";
+ width: 3rem;
+ height: 3rem;
+ background: #eff1f0;
+ opacity: 1;
+ border-radius: 1.5rem;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ z-index: -1;
+ transform: translateY(-50%);
+ transition: width 0.3s, height 0.3s, border-radius 0.3s;
+ }
+ #cs-navigation .cs-call .cs-wrapper {
+ width: 3.5rem;
+ height: 3.5rem;
+ background-color: var(--primary);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: transform 0.3s;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+ #cs-navigation .cs-call .cs-icon {
+ width: 1.5rem;
+ height: auto;
+ display: block;
+ transition: transform 0.3s;
+ }
+ #cs-navigation .cs-call .cs-info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ #cs-navigation .cs-call .cs-header {
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ display: block;
+ }
+ #cs-navigation .cs-call .cs-link-content {
+ font-size: 1.25rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ display: block;
}
}
-
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
- #cs-navigation {
- .cs-button-solid {
- display: block;
- }
+ #cs-navigation .cs-button-solid {
+ display: block;
}
}
-
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
- body.dark-mode {
- #cs-navigation {
- background-color: var(--dark);
-
- .cs-logo {
- /* makes it white */
- filter: grayscale(1) brightness(1000%);
- }
-
- .cs-ul-wrapper {
- background-color: var(--dark);
- }
-
- .cs-li-link {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-container {
- background-color: rgba(0, 0, 0, 0.5);
- }
- }
+ body.dark-mode #cs-navigation {
+ background-color: var(--dark);
+ }
+ body.dark-mode #cs-navigation .cs-logo {
+ /* makes it white */
+ filter: grayscale(1) brightness(1000%);
+ }
+ body.dark-mode #cs-navigation .cs-ul-wrapper {
+ background-color: var(--dark);
+ }
+ body.dark-mode #cs-navigation .cs-li-link {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #cs-navigation .cs-container {
+ background-color: rgba(0, 0, 0, 0.5);
}
}
-
/*-- -------------------------- -->
-<--- Navigation Dropdown -->
-<--- -------------------------- -*/
+ <--- Navigation Dropdown -->
+ <--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
- #cs-navigation {
- .cs-li {
- text-align: center;
- width: 100%;
- display: block;
- }
-
- .cs-dropdown {
- color: var(--bodyTextColorWhite);
- position: relative;
-
- &.cs-active {
- .cs-drop-ul {
- height: auto;
- margin: calc(12 / 16 * 1rem) 0 0 0;
- padding: calc(12 / 16 * 1rem) 0;
- opacity: 1;
- visibility: visible;
- }
-
- .cs-drop-link {
- opacity: 1;
- }
- }
-
- .cs-li-link {
- position: relative;
- transition: opacity 0.3s;
- }
- }
-
- .cs-drop-icon {
- width: calc(15 / 16 * 1rem);
- height: auto;
- position: absolute;
- top: 50%;
- right: calc(-20 / 16 * 1rem);
- transform: translateY(-50%);
- }
-
- .cs-drop-ul {
- width: 100%;
- height: 100%;
- margin: calc(16 / 16 * 1rem) 0 0 0;
- padding: 0;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- gap: calc(12 / 16 * 1rem);
- overflow: hidden;
- }
-
- .cs-drop-li {
- list-style: none;
- }
-
- .cs-li-link {
- &.cs-drop-link {
- color: var(--headerColor);
- }
- }
+ #cs-navigation .cs-li {
+ text-align: center;
+ width: 100%;
+ display: block;
+ }
+ #cs-navigation .cs-dropdown {
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ }
+ #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
+ height: auto;
+ margin: 0.75rem 0 0 0;
+ padding: 0.75rem 0;
+ opacity: 1;
+ visibility: visible;
+ }
+ #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
+ opacity: 1;
+ }
+ #cs-navigation .cs-dropdown .cs-li-link {
+ position: relative;
+ transition: opacity 0.3s;
+ }
+ #cs-navigation .cs-drop-icon {
+ width: 0.9375rem;
+ height: auto;
+ position: absolute;
+ top: 50%;
+ right: -1.25rem;
+ transform: translateY(-50%);
+ }
+ #cs-navigation .cs-drop-ul {
+ width: 100%;
+ height: 100%;
+ margin: 1rem 0 0 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 0.75rem;
+ overflow: hidden;
+ }
+ #cs-navigation .cs-drop-li {
+ list-style: none;
+ }
+ #cs-navigation .cs-li-link.cs-drop-link {
+ color: var(--headerColor);
}
}
-
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
- #cs-navigation {
- .cs-dropdown {
- position: relative;
- &:hover {
- cursor: pointer;
- .cs-drop-ul {
- opacity: 1;
- visibility: visible;
- transform: scaleY(1);
- }
-
- .cs-drop-li {
- opacity: 1;
- transform: translateY(0);
- }
- }
- }
-
- .cs-drop-icon {
- width: calc(15 / 16 * 1rem);
- height: auto;
- display: inline-block;
- }
-
- .cs-drop-ul {
- min-width: calc(200 / 16 * 1rem);
- margin: 0;
- padding: 0;
- background-color: #fff;
- box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
- opacity: 0;
- border-bottom: 5px solid var(--primary);
- visibility: hidden;
- /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
- // columns: 2;
- position: absolute;
- top: 100%;
- z-index: -100;
- overflow: hidden;
- transform: scaleY(0);
- transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
- transform-origin: top;
- }
-
- .cs-drop-li {
- font-size: calc(16 / 16 * 1rem);
- text-decoration: none;
- list-style: none;
- width: 100%;
- height: auto;
- opacity: 0;
- display: block;
- transform: translateY(-0.625rem);
- transition: opacity 0.6s, transform 0.6s;
-
- &:nth-of-type(1) {
- transition-delay: 0.05s;
- }
- &:nth-of-type(2) {
- transition-delay: 0.1s;
- }
- &:nth-of-type(3) {
- transition-delay: 0.15s;
- }
- &:nth-of-type(4) {
- transition-delay: 0.2s;
- }
- &:nth-of-type(5) {
- transition-delay: 0.25s;
- }
- &:nth-of-type(6) {
- transition-delay: 0.3s;
- }
- &:nth-of-type(7) {
- transition-delay: 0.35s;
- }
- &:nth-of-type(8) {
- transition-delay: 0.4s;
- }
- &:nth-of-type(9) {
- transition-delay: 0.45s;
- }
- &:nth-of-type(10) {
- transition-delay: 0.5s;
- }
- &:nth-of-type(11) {
- transition-delay: 0.55s;
- }
- &:nth-of-type(12) {
- transition-delay: 0.6s;
- }
- &:nth-of-type(13) {
- transition-delay: 0.65s;
- }
- }
-
- .cs-li-link {
- &.cs-drop-link {
- font-size: calc(16 / 16 * 1rem);
- line-height: 1.5em;
- text-transform: capitalize;
- text-decoration: none;
- white-space: nowrap;
- width: 100%;
- /* prevents padding and border from affecting height and width */
- box-sizing: border-box;
- padding: calc(12 / 16 * 1rem);
- color: var(--bodyTextColor);
- display: block;
- transition: color 0.3s, background-color 0.3s;
-
- &:hover {
- color: var(--primary);
- background-color: #f7f7f7;
- }
-
- &:before {
- display: none;
- }
- }
- }
+ #cs-navigation .cs-dropdown {
+ position: relative;
+ }
+ #cs-navigation .cs-dropdown:hover {
+ cursor: pointer;
+ }
+ #cs-navigation .cs-dropdown:hover .cs-drop-ul {
+ opacity: 1;
+ visibility: visible;
+ transform: scaleY(1);
+ }
+ #cs-navigation .cs-dropdown:hover .cs-drop-li {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ #cs-navigation .cs-drop-icon {
+ width: 0.9375rem;
+ height: auto;
+ display: inline-block;
+ }
+ #cs-navigation .cs-drop-ul {
+ min-width: 12.5rem;
+ margin: 0;
+ padding: 0;
+ background-color: #fff;
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
+ opacity: 0;
+ border-bottom: 5px solid var(--primary);
+ visibility: hidden;
+ /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
+ position: absolute;
+ top: 100%;
+ z-index: -100;
+ overflow: hidden;
+ transform: scaleY(0);
+ transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
+ transform-origin: top;
+ }
+ #cs-navigation .cs-drop-li {
+ font-size: 1rem;
+ text-decoration: none;
+ list-style: none;
+ width: 100%;
+ height: auto;
+ opacity: 0;
+ display: block;
+ transform: translateY(-0.625rem);
+ transition: opacity 0.6s, transform 0.6s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(1) {
+ transition-delay: 0.05s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(2) {
+ transition-delay: 0.1s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(3) {
+ transition-delay: 0.15s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(4) {
+ transition-delay: 0.2s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(5) {
+ transition-delay: 0.25s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(6) {
+ transition-delay: 0.3s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(7) {
+ transition-delay: 0.35s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(8) {
+ transition-delay: 0.4s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(9) {
+ transition-delay: 0.45s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(10) {
+ transition-delay: 0.5s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(11) {
+ transition-delay: 0.55s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(12) {
+ transition-delay: 0.6s;
+ }
+ #cs-navigation .cs-drop-li:nth-of-type(13) {
+ transition-delay: 0.65s;
+ }
+ #cs-navigation .cs-li-link.cs-drop-link {
+ font-size: 1rem;
+ line-height: 1.5em;
+ text-transform: capitalize;
+ text-decoration: none;
+ white-space: nowrap;
+ width: 100%;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ padding: 0.75rem;
+ color: var(--bodyTextColor);
+ display: block;
+ transition: color 0.3s, background-color 0.3s;
+ }
+ #cs-navigation .cs-li-link.cs-drop-link:hover {
+ color: var(--primary);
+ background-color: #f7f7f7;
+ }
+ #cs-navigation .cs-li-link.cs-drop-link:before {
+ display: none;
}
}
-
/* Dark Mode */
@media only screen and (min-width: 64rem) {
- body.dark-mode {
- #cs-navigation {
- .cs-drop-ul {
- background-color: var(--dark);
- }
-
- .cs-li-link {
- &.cs-drop-link {
- color: var(--bodyTextColorWhite);
- &:hover {
- background-color: rgba(255, 255, 255, 0.2);
- }
-
- &:before {
- display: none;
- }
- }
- }
- }
+ body.dark-mode #cs-navigation .cs-drop-ul {
+ background-color: var(--dark);
+ }
+ body.dark-mode #cs-navigation .cs-li-link.cs-drop-link {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:before {
+ display: none;
}
}
-
/*-- -------------------------- -->
-<--- Desktop Navigation -->
-<--- -------------------------- -*/
+ <--- Desktop Navigation -->
+ <--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#cs-navigation {
@@ -810,377 +699,319 @@
box-sizing: border-box;
padding: 0;
background-color: #fff;
- box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+
position: fixed;
z-index: 10000;
-
- .cs-top-bar {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .cs-top-container {
- width: 100%;
- max-width: calc(1280 / 16 * 1rem);
- /* prevents padding and border from affecting height and width */
- box-sizing: border-box;
- padding: calc(16 / 16 * 1rem);
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: calc(24 / 16 * 1rem);
- }
-
- .cs-contact-group {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- gap: calc(24 / 16 * 1rem);
- }
-
- .cs-contact-link {
- text-decoration: none;
- padding-right: calc(30 / 16 * 1rem);
- display: flex;
- justify-content: flex-start;
- align-items: center;
- gap: calc(16 / 16 * 1rem);
- position: relative;
- transform-style: preserve-3d;
- perspective: 200px;
-
- &:nth-of-type(2) {
- display: none;
- }
-
- &:hover {
- .cs-wrapper {
- transform: rotateY(180deg);
- }
- }
- }
-
- .cs-wrapper {
- width: calc(56 / 16 * 1rem);
- height: calc(56 / 16 * 1rem);
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- z-index: 1;
- transition: transform 0.6s;
- /* prevents flexbox from squishing it */
- flex: none;
-
- &:before {
- /* backgorund color in pseudo so we can use the primary color variable and use opacity */
- content: "";
- width: 100%;
- height: 100%;
- background-color: var(--primary);
- opacity: 0.1;
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- }
- }
-
- .cs-icon {
- width: calc(24 / 16 * 1rem);
- height: auto;
- display: block;
- transition: transform 0.3s;
- }
-
- .cs-info {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: calc(4 / 16 * 1rem);
- }
-
- .cs-header {
- font-size: calc(16 / 16 * 1rem);
- font-weight: 700;
- line-height: 1.2em;
- margin: 0;
- color: var(--headerColor);
- display: block;
- }
-
- .cs-link-content {
- font-size: calc(14 / 16 * 1rem);
- font-weight: 400;
- line-height: 1.2em;
- margin: 0;
- color: var(--bodyTextColor);
- display: block;
- }
-
- .cs-button-solid {
- font-size: calc(16 / 16 * 1rem);
- font-weight: 700;
- /* 46px - 56px */
- line-height: clamp(2.875rem, 5.5vw, 3.5rem);
- text-align: center;
- text-decoration: none;
- min-width: calc(150 / 16 * 1rem);
- margin: 0;
- /* prevents padding from adding to the width */
- box-sizing: border-box;
- padding: 0 calc(48 / 16 * 1rem);
- color: #1a1a1a;
- background-color: var(--primary);
- display: inline-block;
- position: relative;
- z-index: 1;
- transition: color 0.3s;
-
- &:before {
- content: "";
- width: 0%;
- height: 100%;
- background: #000;
- opacity: 1;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- transition: width 0.3s;
- }
-
- &:hover {
- color: #fff;
- &:before {
- width: 100%;
- }
- }
- }
-
- .cs-bottom-bar {
- width: 100%;
- background-color: #1a1a1a;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .cs-container {
- width: 100%;
- max-width: calc(1280 / 16 * 1rem);
- margin: auto;
- /* prevents padding from affectin gheight */
- box-sizing: border-box;
- padding: 0 calc(16 / 16 * 1rem);
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: calc(24 / 16 * 1rem);
- position: relative;
- }
-
- .cs-toggle {
- display: none;
- }
-
- .cs-logo {
- width: 18.4%;
- max-width: calc(197 / 16 * 1rem);
- height: calc(60 / 16 * 1rem);
- /* margin-right auto pushes everything away from it to the right */
- margin: 0 auto 0 0;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 100;
-
- img {
- width: 100%;
- height: 100%;
- /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
- object-fit: contain;
- }
- }
-
- .cs-ul {
- width: 100%;
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- gap: calc(36 / 16 * 1rem);
- }
-
- .cs-li {
- list-style: none;
- padding: calc(36 / 16 * 1rem) 0;
- /* prevent flexbox from squishing it */
- flex: none;
- }
-
- .cs-li-link {
- font-size: calc(16 / 16 * 1rem);
- line-height: 1.5em;
- text-transform: uppercase;
- text-decoration: none;
- margin: 0;
- color: var(--bodyTextColorWhite);
- display: block;
- position: relative;
- transition: color 0.3s;
-
- &:hover {
- color: var(--primary);
- }
-
- &.cs-active {
- font-weight: 700;
- color: var(--primary);
- }
- }
-
- .cs-call {
- text-decoration: none;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- gap: calc(16 / 16 * 1rem);
- position: relative;
- transform-style: preserve-3d;
- perspective: 200px;
-
- &:hover {
- &:hover {
- .cs-wrapper {
- transform: rotateY(180deg);
- }
- }
- }
-
- .cs-wrapper {
- width: calc(56 / 16 * 1rem);
- height: calc(56 / 16 * 1rem);
- background-color: var(--primary);
- display: flex;
- justify-content: center;
- align-items: center;
- transition: transform 0.6s;
- /* prevents flexbox from squishing it */
- flex: none;
- }
-
- .cs-icon {
- width: calc(24 / 16 * 1rem);
- height: auto;
- display: block;
- transition: transform 0.3s;
- }
-
- .cs-info {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
-
- .cs-header {
- font-size: calc(14 / 16 * 1rem);
- font-weight: 400;
- line-height: 1.2em;
- margin: 0;
- color: var(--bodyTextColorWhite);
- display: block;
- }
-
- .cs-link-content {
- font-size: calc(20 / 16 * 1rem);
- font-weight: 700;
- line-height: 1.2em;
- margin: 0;
- color: var(--bodyTextColorWhite);
- display: block;
- }
- }
+ background: transparent;
+ position: absolute;
+ }
+ #cs-navigation .cs-top-bar {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ #cs-navigation .cs-top-container {
+ width: 100%;
+ max-width: 80rem;
+ /* prevents padding and border from affecting height and width */
+ box-sizing: border-box;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1.5rem;
+ }
+ #cs-navigation .cs-contact-group {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 1.5rem;
+ }
+ #cs-navigation .cs-contact-link {
+ text-decoration: none;
+ padding-right: 1.875rem;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 1rem;
+ position: relative;
+ transform-style: preserve-3d;
+ perspective: 200px;
+ }
+ #cs-navigation .cs-contact-link:nth-of-type(2) {
+ display: none;
+ }
+ #cs-navigation .cs-contact-link:hover .cs-wrapper {
+ transform: rotateY(180deg);
+ }
+ #cs-navigation .cs-wrapper {
+ width: 3.5rem;
+ height: 3.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+ transition: transform 0.6s;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+ #cs-navigation .cs-wrapper:before {
+ /* backgorund color in pseudo so we can use the primary color variable and use opacity */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background-color: var(--primary);
+ opacity: 0.1;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #cs-navigation .cs-icon {
+ width: 1.5rem;
+ height: auto;
+ display: block;
+ transition: transform 0.3s;
+ }
+ #cs-navigation .cs-info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.25rem;
+ }
+ #cs-navigation .cs-header {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--headerColor);
+ display: block;
+ }
+ #cs-navigation .cs-link-content {
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--bodyTextColor);
+ display: block;
+ }
+ #cs-navigation .cs-button-solid {
+ font-size: 1rem;
+ font-weight: 700;
+ /* 46px - 56px */
+ line-height: clamp(2.875rem, 5.5vw, 3.5rem);
+ text-align: center;
+ text-decoration: none;
+ min-width: 9.375rem;
+ margin: 0;
+ /* prevents padding from adding to the width */
+ box-sizing: border-box;
+ padding: 0 3rem;
+ color: #1a1a1a;
+ background-color: var(--primary);
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ transition: color 0.3s;
+ }
+ #cs-navigation .cs-button-solid:before {
+ content: "";
+ width: 0%;
+ height: 100%;
+ background: #000;
+ opacity: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ transition: width 0.3s;
+ }
+ #cs-navigation .cs-button-solid:hover {
+ color: #fff;
+ }
+ #cs-navigation .cs-button-solid:hover:before {
+ width: 100%;
+ }
+ #cs-navigation .cs-bottom-bar {
+ width: 100%;
+ background-color: #1a1a1a;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ #cs-navigation .cs-container {
+ width: 100%;
+ max-width: 80rem;
+
+ /* prevents padding from affectin gheight */
+ box-sizing: border-box;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1.5rem;
+ position: relative;
+ }
+ #cs-navigation .cs-toggle {
+ display: none;
+ }
+ #cs-navigation .cs-logo {
+ width: 18.4%;
+ max-width: 12.3125rem;
+ height: 3.75rem;
+ /* margin-right auto pushes everything away from it to the right */
+ margin: 0 auto 0 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 100;
+ }
+ #cs-navigation .cs-logo img {
+ width: 100%;
+ height: 100%;
+ /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
+ object-fit: contain;
+ }
+ #cs-navigation .cs-ul {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 2.25rem;
+ }
+ #cs-navigation .cs-li {
+ list-style: none;
+ padding: 2.25rem 0;
+ /* prevent flexbox from squishing it */
+ flex: none;
+ }
+ #cs-navigation .cs-li-link {
+ font-size: 1rem;
+ line-height: 1.5em;
+ text-transform: uppercase;
+ text-decoration: none;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ display: block;
+ position: relative;
+ transition: color 0.3s;
+ }
+ #cs-navigation .cs-li-link:hover {
+ color: var(--primary);
+ }
+ #cs-navigation .cs-li-link.cs-active {
+ font-weight: 700;
+ color: var(--primary);
+ }
+ #cs-navigation .cs-call {
+ text-decoration: none;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 1rem;
+ position: relative;
+ transform-style: preserve-3d;
+ perspective: 200px;
+ }
+ #cs-navigation .cs-call:hover:hover .cs-wrapper {
+ transform: rotateY(180deg);
+ }
+ #cs-navigation .cs-call .cs-wrapper {
+ width: 3.5rem;
+ height: 3.5rem;
+ background-color: var(--primary);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: transform 0.6s;
+ /* prevents flexbox from squishing it */
+ flex: none;
+ }
+ #cs-navigation .cs-call .cs-icon {
+ width: 1.5rem;
+ height: auto;
+ display: block;
+ transition: transform 0.3s;
+ }
+ #cs-navigation .cs-call .cs-info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ #cs-navigation .cs-call .cs-header {
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ display: block;
+ }
+ #cs-navigation .cs-call .cs-link-content {
+ font-size: 1.25rem;
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ display: block;
}
}
-
/* Large Desktop - 1300px */
@media only screen and (min-width: 75rem) {
- #cs-navigation {
- .cs-contact-link {
- &:nth-of-type(2) {
- display: flex;
- }
- }
+ #cs-navigation .cs-contact-link:nth-of-type(2) {
+ display: flex;
}
}
-
/* Larger Desktop - 1200px */
@media only screen and (min-width: 100rem) {
#cs-navigation {
- .cs-donate {
- margin-left: auto;
- display: flex;
- }
-
- .cs-nav-button {
- margin: 0;
- }
+ background: transparent;
+ }
+ #cs-navigation .cs-donate {
+ margin-left: auto;
+ display: flex;
+ }
+ #cs-navigation .cs-nav-button {
+ margin: 0;
}
}
-
/* Dark Mode */
@media only screen and (min-width: 64rem) {
- body.dark-mode {
- #cs-navigation {
- background-color: var(--dark);
-
- .cs-header,
- .cs-link-content {
- color: var(--bodyTextColorWhite);
- }
-
- .cs-wrapper {
- &:before {
- background-color: #fff;
- }
- }
-
- .cs-call {
- .cs-header {
- opacity: 0.8;
- }
-
- .cs-link-content {
- opacity: 1;
- }
- }
-
- .cs-link-content {
- opacity: 0.8;
- }
-
- .cs-bottom-bar {
- background-color: rgba(0, 0, 0, 0.4);
- }
-
- .cs-logo,
- .cs-link-icon {
- /* turns it white */
- filter: grayscale(1) brightness(1000%);
- }
- }
+ body.dark-mode #cs-navigation {
+ background-color: var(--dark);
+ }
+ body.dark-mode #cs-navigation .cs-header,
+ body.dark-mode #cs-navigation .cs-link-content {
+ color: var(--bodyTextColorWhite);
+ }
+ body.dark-mode #cs-navigation .cs-wrapper:before {
+ background-color: #fff;
+ }
+ body.dark-mode #cs-navigation .cs-call .cs-header {
+ opacity: 0.8;
+ }
+ body.dark-mode #cs-navigation .cs-call .cs-link-content {
+ opacity: 1;
+ }
+ body.dark-mode #cs-navigation .cs-link-content {
+ opacity: 0.8;
+ }
+ body.dark-mode #cs-navigation .cs-bottom-bar {
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+ body.dark-mode #cs-navigation .cs-logo,
+ body.dark-mode #cs-navigation .cs-link-icon {
+ /* turns it white */
+ filter: grayscale(1) brightness(1000%);
}
}
-
/*-- -------------------------- -->
-<--- Footer -->
-<--- -------------------------- -*/
-
+ <--- Footer -->
+ <--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#footer-1390 {
@@ -1188,177 +1019,151 @@
background-color: #1a1a1a;
position: relative;
z-index: 1;
-
- .cs-container {
- width: 100%;
- max-width: calc(1280 / 16 * 1rem);
- margin: auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .cs-top {
- width: 100%;
- margin-bottom: calc(40 / 16 * 1rem);
- /* 24px - 64px */
- padding-bottom: clamp(1.5rem, 5vw, 4rem);
- border-bottom: 1px solid #484848;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- /* 24px - 40px */
- gap: clamp(1.25rem, 4vw, 2.5rem);
- }
-
- .cs-ul {
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- /* 24px - 36px */
- column-gap: clamp(1.5rem, 4vw, 2.25rem);
- row-gap: calc(8 / 16 * 1rem);
- }
-
- .cs-li {
- list-style: none;
- }
-
- .cs-link {
- /* 14px - 16px */
- font-size: clamp(0.875rem, 1.5vw, 1rem);
- line-height: 1.5em;
- text-decoration: none;
- margin: 0;
- color: #bababa;
- display: block;
- transition: color 0.3s;
-
- &:hover {
- color: var(--primary);
- }
- }
-
- .cs-logo {
- width: 100%;
- max-width: calc(209 / 16 * 1rem);
- height: auto;
- display: block;
- }
-
- .cs-logo-img {
- width: 100%;
- height: auto;
- display: block;
- }
-
- .cs-bottom {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: calc(16 / 16 * 1rem);
- }
-
- .cs-social {
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: calc(8 / 16 * 1rem);
- }
-
- .cs-social-li {
- list-style: none;
- }
-
- .cs-social-link {
- width: calc(32 / 16 * 1rem);
- height: calc(32 / 16 * 1rem);
- background-color: #484848;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- transition: background-color 0.3s;
- &:hover {
- background-color: var(--primary);
-
- .cs-social-icon {
- opacity: 1;
- filter: grayscale(1) brightness(1000%);
- }
- }
- }
-
- .cs-social-icon {
- width: calc(12 / 16 * 1rem);
- height: auto;
- opacity: 0.6;
- display: block;
- transition: opacity 0.3s;
- }
-
- .cs-copyright {
- font-size: calc(16 / 16 * 1rem);
- line-height: 1.5em;
- margin: 0;
- color: #bababa;
- display: block;
- }
-
- .cs-copyright-link,
- .cs-separater {
- font-size: calc(16 / 16 * 1rem);
- text-decoration: none;
- color: #bababa;
- transition: color 0.3s;
-
- &:hover {
- color: var(--primary);
- }
- }
-
- .cs-separater {
- margin: 0 calc(16 / 16 * 1rem);
- display: inline-block;
- }
+ }
+ #footer-1390 .cs-container {
+ width: 100%;
+ max-width: 80rem;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ #footer-1390 .cs-top {
+ width: 100%;
+ margin-bottom: 2.5rem;
+ /* 24px - 64px */
+ padding-bottom: clamp(1.5rem, 5vw, 4rem);
+ border-bottom: 1px solid #484848;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ /* 24px - 40px */
+ gap: clamp(1.25rem, 4vw, 2.5rem);
+ }
+ #footer-1390 .cs-ul {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ /* 24px - 36px */
+ column-gap: clamp(1.5rem, 4vw, 2.25rem);
+ row-gap: 0.5rem;
+ }
+ #footer-1390 .cs-li {
+ list-style: none;
+ }
+ #footer-1390 .cs-link {
+ /* 14px - 16px */
+ font-size: clamp(0.875rem, 1.5vw, 1rem);
+ line-height: 1.5em;
+ text-decoration: none;
+ margin: 0;
+ color: #bababa;
+ display: block;
+ transition: color 0.3s;
+ }
+ #footer-1390 .cs-link:hover {
+ color: var(--primary);
+ }
+ #footer-1390 .cs-logo {
+ width: 100%;
+ max-width: 13.0625rem;
+ height: auto;
+ display: block;
+ }
+ #footer-1390 .cs-logo-img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+ #footer-1390 .cs-bottom {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ }
+ #footer-1390 .cs-social {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ #footer-1390 .cs-social-li {
+ list-style: none;
+ }
+ #footer-1390 .cs-social-link {
+ width: 2rem;
+ height: 2rem;
+ background-color: #484848;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: background-color 0.3s;
+ }
+ #footer-1390 .cs-social-link:hover {
+ background-color: var(--primary);
+ }
+ #footer-1390 .cs-social-link:hover .cs-social-icon {
+ opacity: 1;
+ filter: grayscale(1) brightness(1000%);
+ }
+ #footer-1390 .cs-social-icon {
+ width: 0.75rem;
+ height: auto;
+ opacity: 0.6;
+ display: block;
+ transition: opacity 0.3s;
+ }
+ #footer-1390 .cs-copyright {
+ font-size: 1rem;
+ line-height: 1.5em;
+ margin: 0;
+ color: #bababa;
+ display: block;
+ }
+ #footer-1390 .cs-copyright-link,
+ #footer-1390 .cs-separater {
+ font-size: 1rem;
+ text-decoration: none;
+ color: #bababa;
+ transition: color 0.3s;
+ }
+ #footer-1390 .cs-copyright-link:hover,
+ #footer-1390 .cs-separater:hover {
+ color: var(--primary);
+ }
+ #footer-1390 .cs-separater {
+ margin: 0 1rem;
+ display: inline-block;
}
}
-
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
- #footer-1390 {
- .cs-top {
- align-items: flex-start;
- }
-
- .cs-bottom {
- flex-direction: row;
- justify-content: center;
- }
-
- .cs-flex {
- margin: 0 auto;
- }
-
- .cs-social {
- /* sends it to the right in the 3rd position */
- order: 3;
- }
+ #footer-1390 .cs-top {
+ align-items: flex-start;
+ }
+ #footer-1390 .cs-bottom {
+ flex-direction: row;
+ justify-content: center;
+ }
+ #footer-1390 .cs-flex {
+ margin: 0 auto;
+ }
+ #footer-1390 .cs-social {
+ /* sends it to the right in the 3rd position */
+ order: 3;
}
}
-
/* Dark Mode */
@media only screen and (min-width: 0rem) {
- body.dark-mode {
- #footer-1390 {
- background-color: rgba(0, 0, 0, 0.6);
- }
+ body.dark-mode #footer-1390 {
+ background-color: rgba(0, 0, 0, 0.6);
}
}
diff --git a/starter-styles/sass/shop.scss b/starter-styles/sass/shop.scss
new file mode 100644
index 0000000..43e58e3
--- /dev/null
+++ b/starter-styles/sass/shop.scss
@@ -0,0 +1,724 @@
+/*-- -------------------------- -->
+<--- Banner -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #banner-1400 {
+ padding: var(--sectionPadding);
+ /* 190px - 268px */
+ padding-top: calc(270 / 16 * 1rem);
+ padding-bottom: calc(100 / 16 * 1rem);
+ position: relative;
+ z-index: 1;
+ /* clips the line from causing overflow issues for going off screen */
+ overflow: hidden;
+
+ .cs-container {
+ text-align: center;
+ width: 100%;
+ max-width: calc(1280 / 16 * 1rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ /* 8px - 12px */
+ gap: clamp(0.5rem, 1vw, 0.75rem);
+ }
+
+ .cs-int-title {
+ /* 39px - 61px */
+ font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
+ font-weight: 900;
+ line-height: 1.2em;
+ text-align: inherit;
+ margin: 0;
+ color: var(--bodyTextColorWhite);
+ position: relative;
+ }
+
+ .cs-breadcrumbs {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-link {
+ font-size: calc(16 / 16 * 1rem);
+ line-height: 1.2em;
+ text-decoration: none;
+ color: var(--bodyTextColorWhite);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ &:last-of-type {
+ /* remove the chevron on the last list item */
+ &::after {
+ display: none;
+ }
+ }
+
+ &:after {
+ /* chevron */
+ content: "";
+ width: calc(7 / 16 * 1rem);
+ height: calc(12 / 16 * 1rem);
+ margin: 0 calc(16 / 16 * 1rem);
+ background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/white-chev.svg");
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ display: block;
+ position: relative;
+ }
+
+ &.cs-active {
+ color: var(--primary);
+ }
+ }
+
+ .cs-background {
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ &:before {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.4;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ &:after {
+ /* gradient overlay */
+ content: "";
+ width: 100%;
+ height: 40%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ top,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ /* Makes img tag act as a background image */
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #banner-1400 {
+ .cs-background {
+ &:before {
+ width: 50%;
+ height: 100%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(rgba(0, 0, 0, 1)),
+ to(rgba(0, 0, 0, 0))
+ );
+ background: -o-linear-gradient(
+ left,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ background: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Side By Side -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #sbs-297 {
+ padding: var(--sectionPadding);
+
+ .cs-container {
+ width: 100%;
+ /* changes to 1280px at desktop */
+ max-width: calc(550 / 16 * 1rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: center;
+ width: 100%;
+ max-width: calc(522 / 16 * 1rem);
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: center;
+ }
+
+ .cs-text {
+ margin-bottom: calc(16 / 16 * 1rem);
+ &:last-of-type {
+ margin-bottom: calc(32 / 16 * 1rem);
+ }
+ }
+
+ .cs-link {
+ font-size: calc(20 / 16 * 1rem);
+ font-weight: 700;
+ text-decoration: none;
+ color: var(--primary);
+ }
+
+ .cs-image-group {
+ width: 100%;
+ max-width: calc(550 / 16 * 1rem);
+ /* 78px - 108px */
+ margin: 0 auto clamp(4.875rem, 16.5vw, 6.75rem);
+ display: block;
+ position: relative;
+ /* width divided by height */
+ aspect-ratio: 328/363;
+ }
+
+ .cs-picture {
+ /* big background image */
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-box {
+ /* 204px - 326px & changes at desktop */
+ width: clamp(12.75rem, 50vw, 20.375rem);
+ height: clamp(12.75rem, 50vw, 20.375rem);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ /* 38px - 60px - wrapped in a calc function to make clamp values negative */
+ bottom: calc(clamp(2.375rem, 7.9vw, 3.75rem) * -1);
+ left: 50%;
+ z-index: 10;
+ overflow: hidden;
+ transform: translateX(-50%);
+ }
+
+ .cs-box-picture {
+ /* Background image for cs-box */
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ /* clips img corners and bg corners */
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.65;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-number {
+ /* 75px - 100px */
+ font-size: clamp(4.6875rem, 8vw, 6.25rem);
+ font-weight: 900;
+ line-height: 1em;
+ margin-bottom: calc(8 / 16 * 1rem);
+ color: var(--headerColor);
+ display: block;
+ z-index: 10;
+ /* creates the transparent clipping text */
+ mix-blend-mode: screen;
+
+ &:before {
+ /* opaque white box - For mix-blend-mode to work, we need the
+ white box inside the .cs-number, so we use a pseudo element.
+ We DON'T add a position to the cs-number so the pseudo positions
+ itself relative to the .cs-box, which has position relative. This
+ allows us to center to .cs-number pseudo inside the .cs-box */
+ content: "";
+ /* 184px - 294px & changes at desktop */
+ width: clamp(11.5rem, 45vw, 18.375rem);
+ height: clamp(11.5rem, 45vw, 18.375rem);
+ background-color: #fff;
+ opacity: 1;
+ display: block;
+ position: absolute;
+ /* these next 3 properties are an old school way to center an absolutely
+ positioned element inside a relative position parent */
+ top: 50%;
+ left: 50%;
+ z-index: -1;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ .cs-desc {
+ /* 16px - 25px */
+ font-size: clamp(1rem, 4vw, 1.5625rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ text-align: center;
+ text-transform: lowercase;
+ width: 80%;
+ color: var(--headerColor);
+ position: relative;
+ z-index: 10;
+ }
+ }
+}
+
+/* Desktop - 1024px */
+@media only screen and (min-width: 64rem) {
+ #sbs-297 {
+ /* aligns the button */
+ text-align: left;
+ .cs-container {
+ max-width: calc(1280 / 16 * 1rem);
+ /* set to horizontal arrangement */
+ flex-direction: row;
+ justify-content: space-between;
+ gap: calc(160 / 16 * 1rem);
+ }
+
+ .cs-content {
+ text-align: left;
+ align-items: flex-start;
+ }
+
+ .cs-image-group {
+ width: 40vw;
+ max-width: calc(521 / 16 * 1rem);
+ /* 520px - 672px */
+ height: clamp(32.5rem, 51.9vw, 42rem);
+ margin: 0;
+ }
+
+ .cs-box {
+ /* 251px - 325px */
+ width: clamp(15.6875rem, 24.5vw, 20.3125rem);
+ height: clamp(15.6875rem, 24.5vw, 20.3125rem);
+ /* -52px to -102px */
+ right: calc(clamp(3.25rem, 5.5vw + 1.6rem, 6.375rem) * -1);
+ /* 62px - 80px */
+ bottom: clamp(3.875rem, 6.2vw, 5rem);
+ left: auto;
+ transform: none;
+ }
+
+ .cs-number {
+ &:before {
+ /* 226px - 293px */
+ width: clamp(14.125rem, 22.7vw, 18.3125rem);
+ height: clamp(14.125rem, 22.7vw, 18.3125rem);
+ }
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #sbs-297 {
+ .cs-topper {
+ color: var(--secondaryLight);
+ }
+
+ .cs-title,
+ .cs-text {
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-link {
+ color: var(--secondaryLight);
+ }
+
+ .cs-text {
+ opacity: 0.8;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Stats -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #stats-1642 {
+ padding: var(--sectionPadding);
+
+ .cs-container {
+ width: 100%;
+ max-width: calc(1280 / 16 * 1rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+
+ .cs-content {
+ /* set text align to right if content needs to be right aligned */
+ text-align: left;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* left aligns content */
+ align-items: flex-start;
+ }
+
+ .cs-title {
+ max-width: 20ch;
+ /* 28px - 64px */
+ margin: 0 0 clamp(1.75rem, 7vw, 4rem) 0;
+ }
+
+ .cs-picture {
+ width: 100%;
+ height: 95vw;
+ max-height: calc(400 / 16 * 1rem);
+ display: block;
+ position: relative;
+ z-index: 1;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-quote {
+ width: calc(74 / 16 * 1rem);
+ height: auto;
+ opacity: 0.5;
+ position: relative;
+ top: calc(24 / 16 * 1rem);
+ z-index: -1;
+ }
+
+ .cs-text {
+ margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0;
+ }
+
+ .cs-stats-group {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ /* 28px - 40px */
+ }
+
+ .cs-card-group {
+ width: 100%;
+ /* 550px - 630px */
+ max-width: clamp(34.375rem, 50vw, 39.375rem);
+ margin: 0;
+ padding: 0;
+ display: grid;
+ align-items: center;
+ gap: calc(24 / 16 * 1rem);
+ }
+
+ .cs-item {
+ list-style: none;
+ /* prevents padding from affecting height and width */
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: calc(8 / 16 * 1rem);
+ }
+
+ .wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ gap: calc(10 / 16 * 1rem);
+ }
+
+ .cs-item-number {
+ font-size: calc(20 / 16 * 1rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--primary);
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: calc(8 / 16 * 1rem);
+ }
+
+ .cs-h3 {
+ font-size: calc(20 / 16 * 1rem);
+ font-weight: 700;
+ line-height: 1.2em;
+ margin: 0;
+ color: var(--headerColor);
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: calc(8 / 16 * 1rem);
+ }
+
+ .cs-item-text {
+ font-size: calc(16 / 16 * 1rem);
+ line-height: 1.5em;
+ margin: 0;
+ color: var(--bodyTextColor);
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #stats-1642 {
+ .cs-container {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .cs-content {
+ justify-content: stretch;
+ /* sends it to the right in the 2nd position */
+ order: 2;
+ }
+
+ .cs-picture {
+ height: 100%;
+ max-height: 100%;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #stats-1642 {
+ .cs-title,
+ .cs-text,
+ .cs-item-text,
+ .cs-h3 {
+ color: var(--bodyTextColorWhite);
+ }
+ .cs-text,
+ .cs-item-text {
+ opacity: 0.8;
+ }
+ }
+ }
+}
+
+/*-- -------------------------- -->
+<--- Side By Side -->
+<--- -------------------------- -*/
+
+/* Mobile - 360px */
+@media only screen and (min-width: 0rem) {
+ #sbs-1640 {
+ padding: var(--sectionPadding);
+ background-color: #111926;
+ overflow: hidden;
+
+ .cs-container {
+ width: 100%;
+ /* changes to 1280px at tablet */
+ max-width: calc(584 / 16 * 1rem);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* 48px - 64px */
+ gap: clamp(3rem, 6vw, 4rem);
+ }
+
+ .cs-content {
+ /* set text align to left if content needs to be left aligned */
+ text-align: left;
+ width: 100%;
+ max-width: calc(630 / 16 * 1rem);
+ display: flex;
+ flex-direction: column;
+ /* centers content horizontally, set to flex-start to left align */
+ align-items: flex-start;
+ position: relative;
+ z-index: 10;
+ }
+
+ .cs-title {
+ margin: 0 0 calc(40 / 16 * 1rem) 0;
+ color: var(--bodyTextColorWhite);
+ }
+
+ .cs-text {
+ margin-bottom: calc(16 / 16 * 1rem);
+ color: var(--bodyTextColorWhite);
+ opacity: 0.8;
+
+ &:last-of-type {
+ margin-bottom: calc(32 / 16 * 1rem);
+ }
+ }
+
+ .cs-picture {
+ width: 100%;
+ height: auto;
+ min-height: calc(420 / 16 * 1rem);
+ display: block;
+ position: relative;
+ z-index: 1;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .cs-stats-group {
+ width: 100%;
+ max-width: calc(570 / 16 * 1rem);
+ display: flex;
+ flex-direction: column;
+ }
+ }
+}
+
+/* Tablet - 768px */
+@media only screen and (min-width: 48rem) {
+ #sbs-1640 {
+ .cs-container {
+ max-width: calc(1280 / 16 * 1rem);
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .cs-stats-group {
+ /* 52px - 90px */
+ margin-bottom: clamp(3.25rem, 7vw, 5.625rem);
+ /* 60px - 120px */
+ padding-top: clamp(3.75rem, 10vw, 7.5rem);
+ /* 60px - 80px */
+ padding-bottom: clamp(3.75rem, 8vw, 5rem);
+ position: relative;
+ z-index: 1;
+
+ &:before {
+ content: "";
+ width: 200vw;
+ height: 100%;
+ background: #fff;
+ opacity: 1;
+ display: block;
+ position: absolute;
+ top: 100%;
+ left: -100%;
+ z-index: -1;
+ transform: translateX(-50%);
+ }
+ }
+
+ .cs-picture {
+ height: 100%;
+ }
+ }
+}
+
+/* Dark Mode */
+@media only screen and (min-width: 0rem) {
+ body.dark-mode {
+ #sbs-1640 {
+ background-color: rgba(0, 0, 0, 0.6);
+
+ .cs-stats-group {
+ &:before {
+ background-color: var(--dark);
+ }
+ }
+ }
+ }
+}
- 
+ 
+ 
+ 
+ 
- 
+ 
- 
+ 
- 
+ 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ XXX-XXXX-XXXX
+
+ 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
-