New Destinations
+
+ So what are you waiting for? Start exploring our site today
+
+ and get ready for the adventure of a lifetime!
+
diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg new file mode 100644 index 00000000..ba0b0bf6 --- /dev/null +++ b/assets/icons/arrow-left.svg @@ -0,0 +1,3 @@ + diff --git a/assets/styles/components/card.scss b/assets/styles/components/card.scss new file mode 100644 index 00000000..ec8d6375 --- /dev/null +++ b/assets/styles/components/card.scss @@ -0,0 +1,86 @@ +.card { + &__media { + display: inline-block; + overflow: hidden; + border-radius: 8px; + height: 350px; + background: linear-gradient(360deg, rgb(0, 0, 0) 100%, #ffffff 100%); + + &-image { + @extend .main-content-image; + width: 380px; + cursor: initial; + height: 350px; + object-fit: cover; + border-radius: 10px; + position: relative; + cursor: initial; + opacity: 0.5; + } + } + &__body { + position: relative; + } + + &__body-location { + position: absolute; + bottom: 45px; + align-items: center; + left: 10%; + color: $color-base-white; + + &::before { + content: url(../icons/map-pin.svg); + margin-right: 0.5em; + } + } + &__body-label { + position: absolute; + bottom: 120px; + align-items: center; + left: 10%; + color: white; + } + &__body-title { + position: absolute; + bottom: 80px; + left: 10%; + color: $color-base-white; + } +} +.card__media .card__media-image { + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + vertical-align: middle; +} +.card__media .card__media-image:hover { + -webkit-transform: scale(1.03); /* Safari and Chrome */ + -moz-transform: scale(1.03); /* Firefox */ + -ms-transform: scale(1.03); /* IE 9 */ + -o-transform: scale(1.03); /* Opera */ + transform: scale(1.03); + border-radius: 15px; +} + +.card:nth-child(1) .card__body-label { + background-color: $color-secondary-400; + padding: 7px 10px; + color: $color-secondary-700; + font-weight: 700; + border-radius: 4px; +} +.card:nth-child(2) .card__body-label { + background-color: $color-primary-100; + padding: 7px 10px; + color: $color-primary-700; + border-radius: 4px; +} +.card:nth-child(3) .card__body-label { + background-color: $color-neutrals-100; + padding: 7px 10px; + color: $color-neutrals-700; + border-radius: 4px; +} diff --git a/assets/styles/components/cta.scss b/assets/styles/components/cta.scss new file mode 100644 index 00000000..97ca8eb5 --- /dev/null +++ b/assets/styles/components/cta.scss @@ -0,0 +1,43 @@ +.cta { + display: flex; + justify-content: space-between; + align-items: center; + width: 1440px; + max-width: 80%; + + &__title { + color: $color-neutrals-900; + font-size: $sizes-md-desktop; + font-weight: 700; + } + &__subtitle { + margin: 1em 0; + color: $color-neutrals-900; + line-height: 1.4; + font-size: $sizes-sm-desktop; + } + &__button { + display: inline-block; + margin-bottom: 5.5em; + + padding: 10px 35px 10px 20px; + text-align: center; + + background: none; + border: 1px solid grey; + cursor: pointer; + border-radius: 8px; + color: $color-neutrals-700; + &::after { + content: url(../icons/arrow-left.svg); + margin-left: 0.3em; + margin-top: 0.1em; + position: absolute; + color: $color-neutrals-800; + } + &:hover { + color: $color-base-black; + border: 1px solid $color-base-black; + } + } +} diff --git a/assets/styles/components/listing.scss b/assets/styles/components/listing.scss new file mode 100644 index 00000000..e7dcf5e1 --- /dev/null +++ b/assets/styles/components/listing.scss @@ -0,0 +1,13 @@ +.listing__inner { + @extend .main-content-ol; + @extend .main-content-link; + + max-width: $breakpoints-desktop; + display: flex; + justify-content: space-around; + align-items: center; + width: 1440px; + gap: 1em; + max-width: 80%; + margin: auto; +} diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 4796dff1..7a85920f 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -9,7 +9,7 @@ html { } body { - font-family: 'Plus Jakarta Sans', sans-serif; + font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; background-color: slot(page, background); @@ -40,8 +40,8 @@ body { width: 100%; margin: 0 auto; - @include responsive-slot('padding-top', page, spacing); - @include responsive-slot('padding-bottom', page, spacing); + @include responsive-slot("padding-top", page, spacing); + @include responsive-slot("padding-bottom", page, spacing); overflow: hidden; } @@ -50,11 +50,15 @@ body { width: 100%; margin: 0 auto; - @include responsive-slot('margin-top', component, spacing); - @include responsive-slot('margin-bottom', component, spacing); + @include responsive-slot("margin-top", component, spacing); + @include responsive-slot("margin-bottom", component, spacing); - &:first-child { margin-top: 0; } - &:last-child { margin-bottom: 0; } + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } } .main-content-ol { diff --git a/assets/styles/index.scss b/assets/styles/index.scss index 4a20f6b2..f5fc04ab 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -6,4 +6,8 @@ @import "components/info-box.scss"; +@import "components/listing.scss"; +@import "components/card.scss"; + +@import "components/cta.scss"; diff --git a/assets/styles/mono/tokens.scss b/assets/styles/mono/tokens.scss index f80b39ac..612c5bea 100644 --- a/assets/styles/mono/tokens.scss +++ b/assets/styles/mono/tokens.scss @@ -1,4 +1,3 @@ - /** * Do not edit directly * Generated on Fri, 12 May 2023 13:30:24 GMT @@ -25,299 +24,707 @@ $breakpoints-desktop: 90rem !default; $breakpoints-tablet: 48rem !default; $breakpoints-tablet-wide: 64rem !default; $breakpoints-default: 23.4375rem !default; -$radius-desktop-custom: ("smoothing": 0, "topLeft": 48, "topRight": 16, "bottomLeft": 16, "bottomRight": 48) !default; -$radius-custom-default: ("smoothing": 0, "topLeft": 32, "topRight": 12, "bottomLeft": 12, "bottomRight": 32) !default; -$radius-lg-default: ("smoothing": 0, "topLeft": 20, "topRight": 20, "bottomLeft": 20, "bottomRight": 20) !default; -$radius-lg-desktop: ("smoothing": 0, "topLeft": 24, "topRight": 24, "bottomLeft": 24, "bottomRight": 24) !default; -$radius-md-desktop: ("smoothing": 0, "topLeft": 16, "topRight": 16, "bottomLeft": 16, "bottomRight": 16) !default; -$radius-md-default: ("smoothing": 0, "topLeft": 12, "topRight": 12, "bottomLeft": 12, "bottomRight": 12) !default; -$radius-sm-desktop: ("smoothing": 0, "topLeft": 8, "topRight": 8, "bottomLeft": 8, "bottomRight": 8) !default; -$radius-sm-default: ("smoothing": 0, "topLeft": 6, "topRight": 6, "bottomLeft": 6, "bottomRight": 6) !default; -$radius-xs-default: ("smoothing": 0, "topLeft": 3, "topRight": 3, "bottomLeft": 3, "bottomRight": 3) !default; -$radius-xs-desktop: ("smoothing": 0, "topLeft": 4, "topRight": 4, "bottomLeft": 4, "bottomRight": 4) !default; -$color-primary-25: hsla(210,100%,98%,1.0) !default; -$color-primary-50: hsla(206,100%,97%,1.0) !default; -$color-primary-100: hsla(209,100%,91%,1.0) !default; -$color-primary-200: hsla(206,100%,85%,1.0) !default; -$color-primary-300: hsla(206,100%,76%,1.0) !default; -$color-primary-400: hsla(207,98%,66%,1.0) !default; -$color-primary-600: hsla(215,87%,51%,1.0) !default; -$color-primary-700: hsla(218,80%,46%,1.0) !default; -$color-primary-800: hsla(220,75%,38%,1.0) !default; -$color-primary-900: hsla(218,68%,31%,1.0) !default; -$color-primary-500: hsla(211,95%,58%,1.0) !default; -$color-secondary-25: hsla(252,100%,99%,1.0) !default; -$color-secondary-50: hsla(250,100%,98%,1.0) !default; -$color-secondary-100: hsla(249,91%,95%,1.0) !default; -$color-secondary-200: hsla(251,95%,92%,1.0) !default; -$color-secondary-300: hsla(252,95%,85%,1.0) !default; -$color-secondary-400: hsla(254,93%,76%,1.0) !default; -$color-secondary-600: hsla(261,84%,58%,1.0) !default; -$color-secondary-700: hsla(262,71%,50%,1.0) !default; -$color-secondary-800: hsla(262,70%,42%,1.0) !default; -$color-secondary-900: hsla(262,69%,35%,1.0) !default; -$color-secondary-500: hsla(257,91%,66%,1.0) !default; -$color-neutrals-25: hsla(0,0%,99%,1.0) !default; -$color-neutrals-50: hsla(0,0%,98%,1.0) !default; -$color-neutrals-100: hsla(0,0%,96%,1.0) !default; -$color-neutrals-200: hsla(240,6%,90%,1.0) !default; -$color-neutrals-300: hsla(240,6%,83%,1.0) !default; -$color-neutrals-400: hsla(240,6%,65%,1.0) !default; -$color-neutrals-600: hsla(235,6%,34%,1.0) !default; -$color-neutrals-700: hsla(240,5%,26%,1.0) !default; -$color-neutrals-800: hsla(228,6%,16%,1.0) !default; -$color-neutrals-900: hsla(240,6%,10%,1.0) !default; -$color-neutrals-500: hsla(240,5%,46%,1.0) !default; -$color-base-black: hsla(0,0%,0%,1.0) !default; -$color-base-white: hsla(0,0%,100%,1.0) !default; -$color-error-25: hsla(12,100%,99%,1.0) !default; -$color-error-50: hsla(5,87%,97%,1.0) !default; -$color-error-100: hsla(4,94%,94%,1.0) !default; -$color-error-200: hsla(3,96%,89%,1.0) !default; -$color-error-300: hsla(4,96%,80%,1.0) !default; -$color-error-400: hsla(4,92%,69%,1.0) !default; -$color-error-600: hsla(4,74%,49%,1.0) !default; -$color-error-700: hsla(4,76%,40%,1.0) !default; -$color-error-800: hsla(4,72%,33%,1.0) !default; -$color-error-900: hsla(8,65%,29%,1.0) !default; -$color-error-500: hsla(4,86%,58%,1.0) !default; -$color-warning-25: hsla(42,100%,98%,1.0) !default; -$color-warning-50: hsla(45,100%,96%,1.0) !default; -$color-warning-100: hsla(44,96%,89%,1.0) !default; -$color-warning-200: hsla(44,98%,77%,1.0) !default; -$color-warning-300: hsla(42,99%,65%,1.0) !default; -$color-warning-400: hsla(39,98%,56%,1.0) !default; -$color-warning-600: hsla(28,97%,44%,1.0) !default; -$color-warning-700: hsla(22,92%,37%,1.0) !default; -$color-warning-800: hsla(19,84%,31%,1.0) !default; -$color-warning-900: hsla(18,80%,27%,1.0) !default; -$color-warning-500: hsla(34,94%,50%,1.0) !default; -$color-success-25: hsla(142,80%,98%,1.0) !default; -$color-success-50: hsla(142,80%,96%,1.0) !default; -$color-success-100: hsla(140,80%,90%,1.0) !default; -$color-success-200: hsla(144,78%,80%,1.0) !default; -$color-success-300: hsla(148,74%,67%,1.0) !default; -$color-success-400: hsla(150,66%,52%,1.0) !default; -$color-success-600: hsla(153,96%,30%,1.0) !default; -$color-success-700: hsla(155,97%,24%,1.0) !default; -$color-success-800: hsla(155,90%,20%,1.0) !default; -$color-success-900: hsla(156,88%,16%,1.0) !default; -$color-success-500: hsla(152,82%,39%,1.0) !default; -$grid-page-grid-desktop: ("pattern": columns, "gutterSize": 24, "alignment": stretch, "count": 12, "offset": 112) !default; -$grid-main-desktop: ("pattern": columns, "gutterSize": 24, "alignment": stretch, "count": 12, "offset": 32) !default; -$grid-main-tablet: ("pattern": columns, "gutterSize": 20, "alignment": stretch, "count": 6, "offset": 20) !default; -$grid-main-mobile: ("pattern": columns, "gutterSize": 20, "alignment": stretch, "count": 4, "offset": 10) !default; -$font-desktop-heading-2xl: ("fontSize": 62, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 77.5, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-heading-xl: ("fontSize": 48, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 60, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-heading-lg: ("fontSize": 40, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 50, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-heading-md: ("fontSize": 32, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 40, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-heading-sm: ("fontSize": 24, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 30, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-heading-xs: ("fontSize": 20, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 25, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-lable-lg: ("fontSize": 18, "textDecoration": underline, "fontFamily": Plus Jakarta Sans, "fontWeight": 600, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 22.5, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-label-md: ("fontSize": 16, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 600, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 20, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-label-sm: ("fontSize": 14, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 600, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 17.5, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-desktop-text-xl: ("fontSize": 20, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 500, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 32, "paragraphIndent": 0, "paragraphSpacing": 20, "textCase": none) !default; -$font-desktop-text-lg: ("fontSize": 18, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0.36, "lineHeight": 28.8, "paragraphIndent": 0, "paragraphSpacing": 18, "textCase": none) !default; -$font-desktop-text-md: ("fontSize": 16, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0.32, "lineHeight": 25.6, "paragraphIndent": 0, "paragraphSpacing": 16, "textCase": none) !default; -$font-desktop-text-sm: ("fontSize": 14, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0.28, "lineHeight": 22.4, "paragraphIndent": 0, "paragraphSpacing": 14, "textCase": none) !default; -$font-desktop-label-xs: ("fontSize": 12, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 600, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 15, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-heading-2xl: ("fontSize": 48, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 60, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-heading-xl: ("fontSize": 40, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 50, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-heading-lg: ("fontSize": 34, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 42.5, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-heading-md: ("fontSize": 28, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 35, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-heading-sm: ("fontSize": 24, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 30, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-heading-xs: ("fontSize": 20, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 700, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 25, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-lable-lg: ("fontSize": 18, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 500, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 27, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-label-md: ("fontSize": 16, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 600, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 24, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-label-sm: ("fontSize": 14, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 500, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 21, "paragraphIndent": 0, "paragraphSpacing": 0, "textCase": none) !default; -$font-mobile-text-xl: ("fontSize": 20, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 30, "paragraphIndent": 0, "paragraphSpacing": 20, "textCase": none) !default; -$font-mobile-text-lg: ("fontSize": 18, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 27, "paragraphIndent": 0, "paragraphSpacing": 18, "textCase": none) !default; -$font-mobile-text-md: ("fontSize": 16, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 24, "paragraphIndent": 0, "paragraphSpacing": 16, "textCase": none) !default; -$font-mobile-text-sm: ("fontSize": 14, "textDecoration": none, "fontFamily": Plus Jakarta Sans, "fontWeight": 400, "fontStyle": normal, "fontStretch": normal, "letterSpacing": 0, "lineHeight": 21, "paragraphIndent": 0, "paragraphSpacing": 14, "textCase": none) !default; +$radius-desktop-custom: ( + "smoothing": 0, + "topLeft": 48, + "topRight": 16, + "bottomLeft": 16, + "bottomRight": 48, +) !default; +$radius-custom-default: ( + "smoothing": 0, + "topLeft": 32, + "topRight": 12, + "bottomLeft": 12, + "bottomRight": 32, +) !default; +$radius-lg-default: ( + "smoothing": 0, + "topLeft": 20, + "topRight": 20, + "bottomLeft": 20, + "bottomRight": 20, +) !default; +$radius-lg-desktop: ( + "smoothing": 0, + "topLeft": 24, + "topRight": 24, + "bottomLeft": 24, + "bottomRight": 24, +) !default; +$radius-md-desktop: ( + "smoothing": 0, + "topLeft": 16, + "topRight": 16, + "bottomLeft": 16, + "bottomRight": 16, +) !default; +$radius-md-default: ( + "smoothing": 0, + "topLeft": 12, + "topRight": 12, + "bottomLeft": 12, + "bottomRight": 12, +) !default; +$radius-sm-desktop: ( + "smoothing": 0, + "topLeft": 8, + "topRight": 8, + "bottomLeft": 8, + "bottomRight": 8, +) !default; +$radius-sm-default: ( + "smoothing": 0, + "topLeft": 6, + "topRight": 6, + "bottomLeft": 6, + "bottomRight": 6, +) !default; +$radius-xs-default: ( + "smoothing": 0, + "topLeft": 3, + "topRight": 3, + "bottomLeft": 3, + "bottomRight": 3, +) !default; +$radius-xs-desktop: ( + "smoothing": 0, + "topLeft": 4, + "topRight": 4, + "bottomLeft": 4, + "bottomRight": 4, +) !default; +$color-primary-25: hsla(210, 100%, 98%, 1) !default; +$color-primary-50: hsla(206, 100%, 97%, 1) !default; +$color-primary-100: hsla(209, 100%, 91%, 1) !default; +$color-primary-200: hsla(206, 100%, 85%, 1) !default; +$color-primary-300: hsla(206, 100%, 76%, 1) !default; +$color-primary-400: hsla(207, 98%, 66%, 1) !default; +$color-primary-600: hsla(215, 87%, 51%, 1) !default; +$color-primary-700: hsla(218, 80%, 46%, 1) !default; +$color-primary-800: hsla(220, 75%, 38%, 1) !default; +$color-primary-900: hsla(218, 68%, 31%, 1) !default; +$color-primary-500: hsla(211, 95%, 58%, 1) !default; +$color-secondary-25: hsla(252, 100%, 99%, 1) !default; +$color-secondary-50: hsla(250, 100%, 98%, 1) !default; +$color-secondary-100: hsla(249, 91%, 95%, 1) !default; +$color-secondary-200: hsla(251, 95%, 92%, 1) !default; +$color-secondary-300: hsla(252, 95%, 85%, 1) !default; +$color-secondary-400: hsla(254, 93%, 76%, 1) !default; +$color-secondary-600: hsla(261, 84%, 58%, 1) !default; +$color-secondary-700: hsla(262, 71%, 50%, 1) !default; +$color-secondary-800: hsla(262, 70%, 42%, 1) !default; +$color-secondary-900: hsla(262, 69%, 35%, 1) !default; +$color-secondary-500: hsla(257, 91%, 66%, 1) !default; +$color-neutrals-25: hsla(0, 0%, 99%, 1) !default; +$color-neutrals-50: hsla(0, 0%, 98%, 1) !default; +$color-neutrals-100: hsla(0, 0%, 96%, 1) !default; +$color-neutrals-200: hsla(240, 6%, 90%, 1) !default; +$color-neutrals-300: hsla(240, 6%, 83%, 1) !default; +$color-neutrals-400: hsla(240, 6%, 65%, 1) !default; +$color-neutrals-600: hsla(235, 6%, 34%, 1) !default; +$color-neutrals-700: hsla(240, 5%, 26%, 1) !default; +$color-neutrals-800: hsla(228, 6%, 16%, 1) !default; +$color-neutrals-900: hsla(240, 6%, 10%, 1) !default; +$color-neutrals-500: hsla(240, 5%, 46%, 1) !default; +$color-base-black: hsla(0, 0%, 0%, 1) !default; +$color-base-white: hsla(0, 0%, 100%, 1) !default; +$color-error-25: hsla(12, 100%, 99%, 1) !default; +$color-error-50: hsla(5, 87%, 97%, 1) !default; +$color-error-100: hsla(4, 94%, 94%, 1) !default; +$color-error-200: hsla(3, 96%, 89%, 1) !default; +$color-error-300: hsla(4, 96%, 80%, 1) !default; +$color-error-400: hsla(4, 92%, 69%, 1) !default; +$color-error-600: hsla(4, 74%, 49%, 1) !default; +$color-error-700: hsla(4, 76%, 40%, 1) !default; +$color-error-800: hsla(4, 72%, 33%, 1) !default; +$color-error-900: hsla(8, 65%, 29%, 1) !default; +$color-error-500: hsla(4, 86%, 58%, 1) !default; +$color-warning-25: hsla(42, 100%, 98%, 1) !default; +$color-warning-50: hsla(45, 100%, 96%, 1) !default; +$color-warning-100: hsla(44, 96%, 89%, 1) !default; +$color-warning-200: hsla(44, 98%, 77%, 1) !default; +$color-warning-300: hsla(42, 99%, 65%, 1) !default; +$color-warning-400: hsla(39, 98%, 56%, 1) !default; +$color-warning-600: hsla(28, 97%, 44%, 1) !default; +$color-warning-700: hsla(22, 92%, 37%, 1) !default; +$color-warning-800: hsla(19, 84%, 31%, 1) !default; +$color-warning-900: hsla(18, 80%, 27%, 1) !default; +$color-warning-500: hsla(34, 94%, 50%, 1) !default; +$color-success-25: hsla(142, 80%, 98%, 1) !default; +$color-success-50: hsla(142, 80%, 96%, 1) !default; +$color-success-100: hsla(140, 80%, 90%, 1) !default; +$color-success-200: hsla(144, 78%, 80%, 1) !default; +$color-success-300: hsla(148, 74%, 67%, 1) !default; +$color-success-400: hsla(150, 66%, 52%, 1) !default; +$color-success-600: hsla(153, 96%, 30%, 1) !default; +$color-success-700: hsla(155, 97%, 24%, 1) !default; +$color-success-800: hsla(155, 90%, 20%, 1) !default; +$color-success-900: hsla(156, 88%, 16%, 1) !default; +$color-success-500: hsla(152, 82%, 39%, 1) !default; +$grid-page-grid-desktop: ( + "pattern": columns, + "gutterSize": 24, + "alignment": stretch, + "count": 12, + "offset": 112, +) !default; +$grid-main-desktop: ( + "pattern": columns, + "gutterSize": 24, + "alignment": stretch, + "count": 12, + "offset": 32, +) !default; +$grid-main-tablet: ( + "pattern": columns, + "gutterSize": 20, + "alignment": stretch, + "count": 6, + "offset": 20, +) !default; +$grid-main-mobile: ( + "pattern": columns, + "gutterSize": 20, + "alignment": stretch, + "count": 4, + "offset": 10, +) !default; +$font-desktop-heading-2xl: ( + "fontSize": 62, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 77.5, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-heading-xl: ( + "fontSize": 48, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 60, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-heading-lg: ( + "fontSize": 40, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 50, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-heading-md: ( + "fontSize": 32, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 40, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-heading-sm: ( + "fontSize": 24, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 30, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-heading-xs: ( + "fontSize": 20, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 25, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-lable-lg: ( + "fontSize": 18, + "textDecoration": underline, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 600, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 22.5, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-label-md: ( + "fontSize": 16, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 600, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 20, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-label-sm: ( + "fontSize": 14, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 600, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 17.5, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-desktop-text-xl: ( + "fontSize": 20, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 500, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 32, + "paragraphIndent": 0, + "paragraphSpacing": 20, + "textCase": none, +) !default; +$font-desktop-text-lg: ( + "fontSize": 18, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0.36, + "lineHeight": 28.8, + "paragraphIndent": 0, + "paragraphSpacing": 18, + "textCase": none, +) !default; +$font-desktop-text-md: ( + "fontSize": 16, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0.32, + "lineHeight": 25.6, + "paragraphIndent": 0, + "paragraphSpacing": 16, + "textCase": none, +) !default; +$font-desktop-text-sm: ( + "fontSize": 14, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0.28, + "lineHeight": 22.4, + "paragraphIndent": 0, + "paragraphSpacing": 14, + "textCase": none, +) !default; +$font-desktop-label-xs: ( + "fontSize": 12, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 600, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 15, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-heading-2xl: ( + "fontSize": 48, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 60, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-heading-xl: ( + "fontSize": 40, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 50, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-heading-lg: ( + "fontSize": 34, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 42.5, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-heading-md: ( + "fontSize": 28, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 35, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-heading-sm: ( + "fontSize": 24, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 30, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-heading-xs: ( + "fontSize": 20, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 700, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 25, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-lable-lg: ( + "fontSize": 18, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 500, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 27, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-label-md: ( + "fontSize": 16, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 600, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 24, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-label-sm: ( + "fontSize": 14, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 500, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 21, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": none, +) !default; +$font-mobile-text-xl: ( + "fontSize": 20, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 30, + "paragraphIndent": 0, + "paragraphSpacing": 20, + "textCase": none, +) !default; +$font-mobile-text-lg: ( + "fontSize": 18, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 27, + "paragraphIndent": 0, + "paragraphSpacing": 18, + "textCase": none, +) !default; +$font-mobile-text-md: ( + "fontSize": 16, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 24, + "paragraphIndent": 0, + "paragraphSpacing": 16, + "textCase": none, +) !default; +$font-mobile-text-sm: ( + "fontSize": 14, + "textDecoration": none, + "fontFamily": Plus Jakarta Sans, + "fontWeight": 400, + "fontStyle": normal, + "fontStretch": normal, + "letterSpacing": 0, + "lineHeight": 21, + "paragraphIndent": 0, + "paragraphSpacing": 14, + "textCase": none, +) !default; $tokens: ( - 'sizes': ( - 'xxs': ( - 'desktop': $sizes-xxs-desktop, - 'default': $sizes-xxs-default + "sizes": ( + "xxs": ( + "desktop": $sizes-xxs-desktop, + "default": $sizes-xxs-default, + ), + "xs": ( + "desktop": $sizes-xs-desktop, + "default": $sizes-xs-default, ), - 'xs': ( - 'desktop': $sizes-xs-desktop, - 'default': $sizes-xs-default + "sm": ( + "desktop": $sizes-sm-desktop, + "default": $sizes-sm-default, ), - 'sm': ( - 'desktop': $sizes-sm-desktop, - 'default': $sizes-sm-default + "md": ( + "desktop": $sizes-md-desktop, + "default": $sizes-md-default, ), - 'md': ( - 'desktop': $sizes-md-desktop, - 'default': $sizes-md-default + "lg": ( + "desktop": $sizes-lg-desktop, + "default": $sizes-lg-default, ), - 'lg': ( - 'desktop': $sizes-lg-desktop, - 'default': $sizes-lg-default + "xl": ( + "desktop": $sizes-xl-desktop, + "default": $sizes-xl-default, ), - 'xl': ( - 'desktop': $sizes-xl-desktop, - 'default': $sizes-xl-default + "xxl": ( + "desktop": $sizes-xxl-desktop, + "default": $sizes-xxl-default, ), - 'xxl': ( - 'desktop': $sizes-xxl-desktop, - 'default': $sizes-xxl-default + "grid": ( + "main": ( + "default": $sizes-grid-main-desktop, + "tablet": $sizes-grid-main-desktop, + "desktop": $sizes-grid-main-desktop, + ), ), - 'grid': ( - 'main': ( - 'default': $sizes-grid-main-desktop, - 'tablet': $sizes-grid-main-desktop, - 'desktop': $sizes-grid-main-desktop, - ) - ) ), - 'breakpoints': ( - 'desktop': $breakpoints-desktop, - 'tablet': $breakpoints-tablet, - 'default': $breakpoints-default + "breakpoints": ( + "desktop": $breakpoints-desktop, + "tablet": $breakpoints-tablet, + "default": $breakpoints-default, ), - 'radius': ( - 'lg': ( - 'default': $radius-lg-default, - 'desktop': $radius-lg-desktop + "radius": ( + "lg": ( + "default": $radius-lg-default, + "desktop": $radius-lg-desktop, ), - 'md': ( - 'desktop': $radius-md-desktop, - 'default': $radius-md-default + "md": ( + "desktop": $radius-md-desktop, + "default": $radius-md-default, ), - 'sm': ( - 'desktop': $radius-sm-desktop, - 'default': $radius-sm-default + "sm": ( + "desktop": $radius-sm-desktop, + "default": $radius-sm-default, + ), + "xs": ( + "default": $radius-xs-default, + "desktop": $radius-xs-desktop, ), - 'xs': ( - 'default': $radius-xs-default, - 'desktop': $radius-xs-desktop - ) ), - 'color': ( - 'primary': ( - '25': $color-primary-25, - '50': $color-primary-50, - '100': $color-primary-100, - '200': $color-primary-200, - '300': $color-primary-300, - '400': $color-primary-400, - '600': $color-primary-600, - '700': $color-primary-700, - '800': $color-primary-800, - '900': $color-primary-900, - '500*': $color-primary-500 + "color": ( + "primary": ( + "25": $color-primary-25, + "50": $color-primary-50, + "100": $color-primary-100, + "200": $color-primary-200, + "300": $color-primary-300, + "400": $color-primary-400, + "600": $color-primary-600, + "700": $color-primary-700, + "800": $color-primary-800, + "900": $color-primary-900, + "500*": $color-primary-500, + ), + "secondary": ( + "25": $color-secondary-25, + "50": $color-secondary-50, + "100": $color-secondary-100, + "200": $color-secondary-200, + "300": $color-secondary-300, + "400": $color-secondary-400, + "600": $color-secondary-600, + "700": $color-secondary-700, + "800": $color-secondary-800, + "900": $color-secondary-900, + "500*": $color-secondary-500, ), - 'secondary': ( - '25': $color-secondary-25, - '50': $color-secondary-50, - '100': $color-secondary-100, - '200': $color-secondary-200, - '300': $color-secondary-300, - '400': $color-secondary-400, - '600': $color-secondary-600, - '700': $color-secondary-700, - '800': $color-secondary-800, - '900': $color-secondary-900, - '500*': $color-secondary-500 + "neutrals": ( + "25": $color-neutrals-25, + "50": $color-neutrals-50, + "100": $color-neutrals-100, + "200": $color-neutrals-200, + "300": $color-neutrals-300, + "400": $color-neutrals-400, + "600": $color-neutrals-600, + "700": $color-neutrals-700, + "800": $color-neutrals-800, + "900": $color-neutrals-900, + "500*": $color-neutrals-500, ), - 'neutrals': ( - '25': $color-neutrals-25, - '50': $color-neutrals-50, - '100': $color-neutrals-100, - '200': $color-neutrals-200, - '300': $color-neutrals-300, - '400': $color-neutrals-400, - '600': $color-neutrals-600, - '700': $color-neutrals-700, - '800': $color-neutrals-800, - '900': $color-neutrals-900, - '500*': $color-neutrals-500 + "base": ( + "black": $color-base-black, + "white": $color-base-white, ), - 'base': ( - 'black': $color-base-black, - 'white': $color-base-white + "error": ( + "25": $color-error-25, + "50": $color-error-50, + "100": $color-error-100, + "200": $color-error-200, + "300": $color-error-300, + "400": $color-error-400, + "600": $color-error-600, + "700": $color-error-700, + "800": $color-error-800, + "900": $color-error-900, + "500*": $color-error-500, ), - 'error': ( - '25': $color-error-25, - '50': $color-error-50, - '100': $color-error-100, - '200': $color-error-200, - '300': $color-error-300, - '400': $color-error-400, - '600': $color-error-600, - '700': $color-error-700, - '800': $color-error-800, - '900': $color-error-900, - '500*': $color-error-500 + "warning": ( + "25": $color-warning-25, + "50": $color-warning-50, + "100": $color-warning-100, + "200": $color-warning-200, + "300": $color-warning-300, + "400": $color-warning-400, + "600": $color-warning-600, + "700": $color-warning-700, + "800": $color-warning-800, + "900": $color-warning-900, + "500*": $color-warning-500, ), - 'warning': ( - '25': $color-warning-25, - '50': $color-warning-50, - '100': $color-warning-100, - '200': $color-warning-200, - '300': $color-warning-300, - '400': $color-warning-400, - '600': $color-warning-600, - '700': $color-warning-700, - '800': $color-warning-800, - '900': $color-warning-900, - '500*': $color-warning-500 + "success": ( + "25": $color-success-25, + "50": $color-success-50, + "100": $color-success-100, + "200": $color-success-200, + "300": $color-success-300, + "400": $color-success-400, + "600": $color-success-600, + "700": $color-success-700, + "800": $color-success-800, + "900": $color-success-900, + "500*": $color-success-500, ), - 'success': ( - '25': $color-success-25, - '50': $color-success-50, - '100': $color-success-100, - '200': $color-success-200, - '300': $color-success-300, - '400': $color-success-400, - '600': $color-success-600, - '700': $color-success-700, - '800': $color-success-800, - '900': $color-success-900, - '500*': $color-success-500 - ) ), - 'grid': ( - 'main': ( - 'desktop': $grid-main-desktop, - 'tablet': $grid-main-tablet, - 'default': $grid-main-mobile - ) + "grid": ( + "main": ( + "desktop": $grid-main-desktop, + "tablet": $grid-main-tablet, + "default": $grid-main-mobile, + ), ), - 'font': ( - 'desktop': ( - 'heading 2xl': $font-desktop-heading-2xl, - 'heading xl': $font-desktop-heading-xl, - 'heading lg': $font-desktop-heading-lg, - 'heading md': $font-desktop-heading-md, - 'heading sm': $font-desktop-heading-sm, - 'heading xs': $font-desktop-heading-xs, - 'lable lg': $font-desktop-lable-lg, - 'label md': $font-desktop-label-md, - 'label sm': $font-desktop-label-sm, - 'text xl': $font-desktop-text-xl, - 'text lg': $font-desktop-text-lg, - 'text md': $font-desktop-text-md, - 'text sm': $font-desktop-text-sm, - 'label xs': $font-desktop-label-xs + "font": ( + "desktop": ( + "heading 2xl": $font-desktop-heading-2xl, + "heading xl": $font-desktop-heading-xl, + "heading lg": $font-desktop-heading-lg, + "heading md": $font-desktop-heading-md, + "heading sm": $font-desktop-heading-sm, + "heading xs": $font-desktop-heading-xs, + "lable lg": $font-desktop-lable-lg, + "label md": $font-desktop-label-md, + "label sm": $font-desktop-label-sm, + "text xl": $font-desktop-text-xl, + "text lg": $font-desktop-text-lg, + "text md": $font-desktop-text-md, + "text sm": $font-desktop-text-sm, + "label xs": $font-desktop-label-xs, + ), + "default": ( + "heading 2xl": $font-mobile-heading-2xl, + "heading xl": $font-mobile-heading-xl, + "heading lg": $font-mobile-heading-lg, + "heading md": $font-mobile-heading-md, + "heading sm": $font-mobile-heading-sm, + "heading xs": $font-mobile-heading-xs, + "lable lg": $font-mobile-lable-lg, + "label md": $font-mobile-label-md, + "label sm": $font-mobile-label-sm, + "text xl": $font-mobile-text-xl, + "text lg": $font-mobile-text-lg, + "text md": $font-mobile-text-md, + "text sm": $font-mobile-text-sm, ), - 'default': ( - 'heading 2xl': $font-mobile-heading-2xl, - 'heading xl': $font-mobile-heading-xl, - 'heading lg': $font-mobile-heading-lg, - 'heading md': $font-mobile-heading-md, - 'heading sm': $font-mobile-heading-sm, - 'heading xs': $font-mobile-heading-xs, - 'lable lg': $font-mobile-lable-lg, - 'label md': $font-mobile-label-md, - 'label sm': $font-mobile-label-sm, - 'text xl': $font-mobile-text-xl, - 'text lg': $font-mobile-text-lg, - 'text md': $font-mobile-text-md, - 'text sm': $font-mobile-text-sm - ) - ) + ), ); diff --git a/index.html b/index.html index c344cc04..478ea659 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,17 @@
+ So what are you waiting for? Start exploring our site today
+
+ and get ready for the adventure of a lifetime!
+