diff --git a/hugo.toml b/hugo.toml index de9db0f..9df9a24 100644 --- a/hugo.toml +++ b/hugo.toml @@ -4,89 +4,90 @@ title = "Bellas Keys" theme = "agnes-hugo-theme" [params] - dateFormat = "Jan 2, 2023" - authorName = "Bella" - Title = "Bellas Keys" - Description = "Your Website Description" - Image = "https://example.com/image.jpg" - Favicon = "https://example.com/favicon.png" - -[menu] - [[menu.external]] - name = "Contact" - url = "#" - weight = 1 +dateFormat = "Jan 2, 2023" +authorName = "Bella" +Title = "Bellas Keys" +Description = "Your Website Description" +Image = "https://example.com/image.jpg" +Favicon = "https://example.com/favicon.png" + +[menu] +[[menu.external]] +name = "Contact" +url = "#" +weight = 1 + +[[menu.external]] +name = "About us" +url = "#" +weight = 2 - [[menu.external]] - name = "About us" - url = "#" - weight = 2 - [params.social] - TwitterURL = "http://google.com" - GoogleURL = "http://google.com" - FacebookURL = "http://google.com" - +TwitterURL = "http://google.com" +GoogleURL = "http://google.com" +FacebookURL = "http://google.com" + [params.content] - LeadTitle = "Bellas Keys" - LeadDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet lacus et felis porttitor ultrices ut nec urna. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." - ButtonCaption = "Pricing & Plans" - ButtonURL = "#pricing" +LeadTitle = "Bellas Keys" +LeadDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet lacus et felis porttitor ultrices ut nec urna. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." +ButtonCaption = "Pricing & Plans" +ButtonURL = "#pricing" ################### Feature Columns #################### [[params.feature]] - FeatureTitle = "Feature 1" - FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." - FeatureImage = "images/feature-1.png" - -[[params.feature]] - FeatureTitle = "Feature 2" - FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." - FeatureImage = "images/feature-2.png" +FeatureTitle = "Feature 1" +FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." +FeatureIcon = "fas fa-code" [[params.feature]] - FeatureTitle = "Feature 3" - FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." - FeatureImage = "images/feature-3.png" - -[[params.feature]] - FeatureTitle = "Feature 4" - FeatureDescription = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." - FeatureImage = "images/feature-4.png" +FeatureTitle = "Feature 2" +FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." +FeatureIcon = "fas fa-chart-line" -################### Quote #################### +[[params.feature]] +FeatureTitle = "Feature 3" +FeatureDescription = "Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." +FeatureIcon = "fas fa-cog" + +[[params.feature]] +FeatureTitle = "Feature 4" +FeatureDescription = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Proin neque velit, molestie et interdum vitae, feugiat vitae erat. Integer imperdiet quis." +FeatureIcon = "fas fa-chart-pie" + +################### Sold Brands #################### [[params.sold]] - [[params.sold.Icon]] - LogoURL = "https://seeklogo.com/images/X/xbox-logo-30362ED98F-seeklogo.com.png" - CSS = "" - [[params.sold.Icon]] - LogoURL = "https://seeklogo.com/images/G/gamestop-logo-AB1F19187B-seeklogo.com.png" - CSS = "inverted" - [[params.sold.Icon]] - LogoURL = "https://seeklogo.com/images/P/playstation-logo-6D0C7C9B30-seeklogo.com.png" - CSS = "inverted" - [[params.sold.Icon]] - LogoURL = "https://seeklogo.com/images/G/google-play-logo-E0550702F1-seeklogo.com.png" - CSS = "" +[[params.sold.Icon]] +LogoURL = "https://seeklogo.com/images/X/xbox-logo-30362ED98F-seeklogo.com.png" +CSS = "" +[[params.sold.Icon]] +LogoURL = "https://seeklogo.com/images/G/gamestop-logo-AB1F19187B-seeklogo.com.png" +CSS = "inverted" +[[params.sold.Icon]] +LogoURL = "https://seeklogo.com/images/P/playstation-logo-6D0C7C9B30-seeklogo.com.png" +CSS = "inverted" +[[params.sold.Icon]] +LogoURL = "https://seeklogo.com/images/G/google-play-logo-E0550702F1-seeklogo.com.png" +CSS = "" ################### Pricing Columns #################### [[params.pricing]] - PricingTitle = "Etiam sit amet" - PricingDesc = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus finibus quam ac gravida. Etiam sit amet mi sapien. Nam viverra congue quam nec condimentum." - ButtonText = "Download" - ButtonURL = "https://example.com/" - [[params.pricing.Features]] - Description = "Lorem ipsum dolor sit amet" - [[params.pricing.Features]] - Description = "consectetur adipiscing elit" - [[params.pricing.Features]] - Description = "Etiam faucibus finibus" - [[params.pricing.Features]] - Description = "Etiam sit amet mi sapien" +PricingTitle = "Etiam sit amet" +PricingDesc = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus finibus quam ac gravida. Etiam sit amet mi sapien. Nam viverra congue quam nec condimentum." +ButtonText = "Download" +ButtonURL = "#" +[[params.pricing.Features]] +Description = "Lorem ipsum dolor sit amet" +[[params.pricing.Features]] +Description = "consectetur adipiscing elit" +[[params.pricing.Features]] +Description = "Etiam faucibus finibus" +[[params.pricing.Features]] +Description = "Etiam sit amet mi sapien" +################### Contact Buttons #################### [[params.buttons]] label = "Button 1" @@ -101,8 +102,9 @@ icon = "fa-brands fa-skype" [[params.buttons]] label = "Button 3" url = "#" -icon = "fa-solid fa-envelope-open-text" +icon = "fa-solid fa-envelope" +################### Contact Form #################### [[params.contact_forms]] name = "contact_form" @@ -110,5 +112,5 @@ fields = [ { name = "Name", type = "text", required = true }, { name = "Email", type = "email", required = true }, { name = "Phone #", type = "tel", required = false, class = "full-width" }, - { name = "Message", type = "textarea", required = true, class = "full-width" } + { name = "Message", type = "textarea", required = true, class = "full-width" }, ] diff --git a/themes/agnes-hugo-theme/layouts/index.html b/themes/agnes-hugo-theme/layouts/index.html index baa5bba..e05c24f 100644 --- a/themes/agnes-hugo-theme/layouts/index.html +++ b/themes/agnes-hugo-theme/layouts/index.html @@ -37,7 +37,7 @@
{{ range site.Params.feature }}
- +

{{ .FeatureTitle }}

{{ .FeatureDescription }}

diff --git a/themes/agnes-hugo-theme/static/css/style.css b/themes/agnes-hugo-theme/static/css/style.css index 23287e7..e2771b2 100644 --- a/themes/agnes-hugo-theme/static/css/style.css +++ b/themes/agnes-hugo-theme/static/css/style.css @@ -1,127 +1,127 @@ :root { - --background-color: #0D161E; - --accent-1: linear-gradient(45deg, #0559B0, #BE528A); - --accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0B2D4F); - --accent-3: linear-gradient(45deg, #BE528A, #762a51); - --font-color: #d2d2d2; - --font-color-dark: #1f1f1f + --background-color: #0d161e; + --accent-1: linear-gradient(45deg, #0559b0, #be528a); + --accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0b2d4f); + --accent-3: linear-gradient(45deg, #be528a, #762a51); + --font-color: #d2d2d2; + --font-color-dark: #1f1f1f; } .font-color-dark { - color: var(--font-color-dark) !important + color: var(--font-color-dark) !important; } html { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - scroll-behavior: smooth; - font-family: 'Open Sans', sans-serif; - transform: scale(0.90); - transform-origin: 0 0; - width: 111%; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + scroll-behavior: smooth; + font-family: "Open Sans", sans-serif; + transform: scale(0.9); + transform-origin: 0 0; + width: 111%; } body { - margin: 0; - background-color: var(--background-color); - color: var(--font-color); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + margin: 0; + background-color: var(--background-color); + color: var(--font-color); + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } footer, header, section { - display: block + display: block; } h1 { - font-size: 2em; - margin: .67em 0 + font-size: 2em; + margin: 0.67em 0; } a { - background-color: transparent; - -webkit-text-decoration-skip: objects + background-color: transparent; + -webkit-text-decoration-skip: objects; } img { - border-style: none + border-style: none; } svg:not(:root) { - overflow: hidden + overflow: hidden; } ::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit + -webkit-appearance: button; + font: inherit; } html { - box-sizing: border-box + box-sizing: border-box; } *, :after, :before { - box-sizing: inherit + box-sizing: inherit; } body { - background-color: var(--background-color); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased + background-color: var(--background-color); + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } ul { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } ul { - list-style: disc + list-style: disc; } img { - height: auto; - max-width: 100%; - vertical-align: middle + height: auto; + max-width: 100%; + vertical-align: middle; } img, svg { - display: block + display: block; } html { - font-size: 18px; - line-height: 27px + font-size: 18px; + line-height: 27px; } -@media (min-width:641px) { - html { - font-size: 20px; - line-height: 30px; - letter-spacing: -.1px - } +@media (min-width: 641px) { + html { + font-size: 20px; + line-height: 30px; + letter-spacing: -0.1px; + } } body { - color: var(--font-color); - font-size: 1rem + color: var(--font-color); + font-size: 1rem; } a { - color: inherit; - text-decoration: underline + color: inherit; + text-decoration: underline; } a:active, a:hover { - outline: 0; - text-decoration: none + outline: 0; + text-decoration: none; } .h2, @@ -129,700 +129,698 @@ a:hover { h1, h2, h4 { - clear: both; - color: var(--font-color); - font-weight: 500 + clear: both; + color: var(--font-color); + font-weight: 500; } h1 { - font-size: 42px; - line-height: 52px; - letter-spacing: -.1px + font-size: 42px; + line-height: 52px; + letter-spacing: -0.1px; } -@media (min-width:641px) { - h1 { - font-size: 56px; - line-height: 66px; - letter-spacing: -.1px - } +@media (min-width: 641px) { + h1 { + font-size: 56px; + line-height: 66px; + letter-spacing: -0.1px; + } } .h2, h2 { - font-size: 36px; - line-height: 46px; - letter-spacing: -.1px + font-size: 36px; + line-height: 46px; + letter-spacing: -0.1px; } -@media (min-width:641px) { - - .h2, - h2 { - font-size: 42px; - line-height: 52px; - letter-spacing: -.1px - } +@media (min-width: 641px) { + .h2, + h2 { + font-size: 42px; + line-height: 52px; + letter-spacing: -0.1px; + } } .h4, h4 { - font-size: 20px; - line-height: 30px; - letter-spacing: -.1px + font-size: 20px; + line-height: 30px; + letter-spacing: -0.1px; } -@media (min-width:641px) { - - .h4, - h4 { - font-size: 24px; - line-height: 34px; - letter-spacing: -.1px - } +@media (min-width: 641px) { + .h4, + h4 { + font-size: 24px; + line-height: 34px; + letter-spacing: -0.1px; + } } -@media (max-width:640px) { - .h2-mobile { - font-size: 36px; - line-height: 46px; - letter-spacing: -.1px - } +@media (max-width: 640px) { + .h2-mobile { + font-size: 36px; + line-height: 46px; + letter-spacing: -0.1px; + } - .h3-mobile { - font-size: 24px; - line-height: 34px; - letter-spacing: -.1px - } + .h3-mobile { + font-size: 24px; + line-height: 34px; + letter-spacing: -0.1px; + } } .text-light { - color: var(--font-color) + color: var(--font-color); } .text-light a { - color: var(--font-color) + color: var(--font-color); } .text-sm { - font-size: 18px; - line-height: 27px; - letter-spacing: -.1px + font-size: 18px; + line-height: 27px; + letter-spacing: -0.1px; } .text-xs { - font-size: 16px; - line-height: 24px; - letter-spacing: -.1px + font-size: 16px; + line-height: 24px; + letter-spacing: -0.1px; } .h2, h1, h2 { - margin-top: 48px; - margin-bottom: 16px + margin-top: 48px; + margin-bottom: 16px; } .h4, h4 { - margin-top: 24px; - margin-bottom: 4px + margin-top: 24px; + margin-bottom: 4px; } p { - margin-top: 0; - margin-bottom: 24px + margin-top: 0; + margin-bottom: 24px; } .container { - width: 100%; - margin: 0 auto; - padding-left: 16px; - padding-right: 16px + width: 100%; + margin: 0 auto; + padding-left: 16px; + padding-right: 16px; } .contact { - padding-top: 2.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + padding-top: 2.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .contact-flex { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 25px; - width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 25px; + width: 100%; } .contact-form { - display: flex; - flex-direction: column; - gap: 25px; - width: 100%; + display: flex; + flex-direction: column; + gap: 25px; + width: 100%; } -.form-group input, textarea { - width: 100%; - padding: 5px; - border-radius: 10px; +.form-group input, +textarea { + width: 100%; + padding: 5px; + border-radius: 10px; } .form-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; } .full-width { - grid-column: span 2; - } + grid-column: span 2; +} .form-group label { - font-size: 16px; - font-weight: 700; - color:#1f2b35 + font-size: 16px; + font-weight: 700; + color: #1f2b35; } .form-group { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } -@media (min-width:481px) { - .container { - padding-left: 24px; - padding-right: 24px - } +@media (min-width: 481px) { + .container { + padding-left: 24px; + padding-right: 24px; + } } .container { - max-width: 1128px + max-width: 1128px; } .screen-reader-text { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - word-wrap: normal !important + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + word-wrap: normal !important; } .screen-reader-text:focus { - border-radius: 2px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); - clip: auto !important; - display: block; - font-size: 16px; - letter-spacing: -.1px; - font-weight: 500; - line-height: 16px; - text-transform: uppercase; - text-decoration: none; - background-color: #fff; - color: #0081f6 !important; - border: none; - height: auto; - left: 8px; - padding: 16px 32px; - top: 8px; - width: auto; - z-index: 100000 + border-radius: 2px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + display: block; + font-size: 16px; + letter-spacing: -0.1px; + font-weight: 500; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + background-color: #fff; + color: #0081f6 !important; + border: none; + height: auto; + left: 8px; + padding: 16px 32px; + top: 8px; + width: auto; + z-index: 100000; } .list-reset { - list-style: none; - padding: 0 + list-style: none; + padding: 0; } .text-center { - text-align: center + text-align: center; } .has-top-divider { - position: relative + position: relative; } .has-top-divider::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - display: block; - height: 1px; - background: #e2e8ed + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + display: block; + height: 1px; + background: #e2e8ed; } .m-0 { - margin: 0 + margin: 0; } .mt-0 { - margin-top: 0 + margin-top: 0; } .mb-8 { - margin-bottom: 8px + margin-bottom: 8px; } .mt-24 { - margin-top: 24px + margin-top: 24px; } .mb-24 { - margin-bottom: 24px + margin-bottom: 24px; } .mb-32 { - margin-bottom: 32px + margin-bottom: 32px; } .pb-24 { - padding-bottom: 24px + padding-bottom: 24px; } .button { - display: inline-flex; - font-size: 16px; - letter-spacing: -.1px; - font-weight: 700; - line-height: 16px; - text-decoration: none !important; - background: var(--accent-2); - color: #efefef !important; - border: none; - border-radius: 4px; - cursor: pointer; - justify-content: center; - padding: 16px 32px; - height: 48px; - text-align: center; - white-space: nowrap + display: inline-flex; + font-size: 16px; + letter-spacing: -0.1px; + font-weight: 700; + line-height: 16px; + text-decoration: none !important; + background: var(--accent-2); + color: #efefef !important; + border: none; + border-radius: 4px; + cursor: pointer; + justify-content: center; + padding: 16px 32px; + height: 48px; + text-align: center; + white-space: nowrap; } .button i { - transform: scale(1.5); - padding-right: 15px; + transform: scale(1.5); + padding-right: 15px; } .button:active { - outline: 0 + outline: 0; } .button::before { - border-radius: 4px + border-radius: 4px; } -.button-primary, .button-primary-dark { - background: var(--accent-1); - color: #fff !important; - transition: .3s ease +.button-primary, +.button-primary-dark { + background: var(--accent-1); + color: #fff !important; + transition: 0.3s ease; } .button-pricing { - background: var(--accent-3) !important + background: var(--accent-3) !important; } .button-primary:hover { - box-shadow: 2px 4px 10px rgba(255, 255, 255, .25); - transition: .3s ease + box-shadow: 2px 4px 10px rgba(255, 255, 255, 0.25); + transition: 0.3s ease; } .button-primary-dark:hover { - box-shadow: 2px 4px 10px rgba(0, 0, 0, .45); - transition: .3s ease + box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45); + transition: 0.3s ease; } .site-header { - position: relative; - padding: 24px 0 + position: relative; + padding: 24px 0; } .site-header-inner { - position: relative; - display: flex; - justify-content: space-between; - align-items: center + position: relative; + display: flex; + justify-content: space-between; + align-items: center; } .hero { - position: relative; - text-align: center; - padding-top: 40px + position: relative; + text-align: center; + padding-top: 40px; } .hero-inner { - position: relative + position: relative; } .hero-title { - font-weight: 700 + font-weight: 700; } .hero-paragraph { - margin-bottom: 32px + margin-bottom: 32px; } -@media (min-width:641px) { - .hero { - text-align: left; - padding-top: 92px; - padding-bottom: 80px - } +@media (min-width: 641px) { + .hero { + text-align: left; + padding-top: 92px; + padding-bottom: 80px; + } - .hero-inner { - display: flex - } + .hero-inner { + display: flex; + } - .hero-copy { - padding-right: 48px; - min-width: 512px - } + .hero-copy { + padding-right: 48px; + min-width: 512px; + } } -@media (min-width:1025px) { - .hero-copy { - padding-right: 88px; - min-width: 552px - } +@media (min-width: 1025px) { + .hero-copy { + padding-right: 88px; + min-width: 552px; + } } .features-wrap { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 24px; - justify-content: center; - margin-right: -12px; - margin-left: -12px + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + justify-content: center; + margin-right: -12px; + margin-left: -12px; } .features-wrap:first-child { - margin-top: -12px + margin-top: -12px; } .features-wrap:last-child { - margin-bottom: -12px + margin-bottom: -12px; } .feature { - padding: 12px; - flex-grow: 1 + padding: 12px; + flex-grow: 1; } .feature-inner { - height: 100%; - display: flex; - gap: 1.5rem + height: 100%; + display: flex; } @media (max-width: 768px) { - .feature-inner { - flex-direction: column; - } + .feature-inner { + flex-direction: column; + } } .contact-inner { - height: 100%; - display: flex; - flex-direction: row; - gap: 1.5rem; - justify-content: space-between; + height: 100%; + display: flex; + flex-direction: row; + gap: 1.5rem; + justify-content: space-between; } .contact-inner a { - width: 100%; + width: 100%; } .feature-icon { - width: 3rem; - height: 3rem; - border-radius: 5px; - border: 2px solid #fff + margin: 0.6rem; + margin-right: 1.2rem; + font-size: 2.8rem; + display: flex; } .feature-title { - margin-top: 12px; - margin-bottom: 8px + margin-top: 12px; + margin-bottom: 8px; } -@media (min-width:641px) { - .features { - position: relative - } +@media (min-width: 641px) { + .features { + position: relative; + } } .feature-description { - display: flex; - flex-direction: column + display: flex; + flex-direction: column; } .sold-section { - background-color: #1f2b35; - justify-content: center; - display: flex; + background-color: #1f2b35; + justify-content: center; + display: flex; } .sold-image-container { - padding: 1.5rem; - display: flex; - flex-direction: row; - gap: 1.5rem; - justify-content: space-around; - width: 1050px; - flex-wrap: wrap; + padding: 1.5rem; + display: flex; + flex-direction: row; + gap: 1.5rem; + justify-content: space-around; + width: 1050px; + flex-wrap: wrap; } .sold-image { - filter: grayscale(100%) brightness(250%); - opacity: 0.5; - max-height: 1.5rem; - width: auto; + filter: grayscale(100%) brightness(250%); + opacity: 0.5; + max-height: 1.5rem; + width: auto; } .inverted { - filter: invert(100%) grayscale(100%) brightness(250%) !important; + filter: invert(100%) grayscale(100%) brightness(250%) !important; } - .pricing { - position: relative; - overflow: hidden + position: relative; + overflow: hidden; } .pricing::before { - content: ''; - position: absolute; - top: calc(100% - 200px); - left: 0; - width: 100%; - height: 200px; - background: #1f2b35; - overflow: hidden + content: ""; + position: absolute; + top: calc(100% - 200px); + left: 0; + width: 100%; + height: 200px; + background: #1f2b35; + overflow: hidden; } .pricing .section-title { - margin-bottom: 48px + margin-bottom: 48px; } .pricing-tables-wrap:last-child { - margin-bottom: -12px + margin-bottom: -12px; } .pricing-table-inner { - position: relative; - display: flex; - flex-direction: row; - background: #fff; - padding: 25px; - height: 100%; - border-radius: 10px; + position: relative; + display: flex; + flex-direction: row; + background: #fff; + padding: 25px; + height: 100%; + border-radius: 10px; } .contact-table { - position: relative; - display: flex; - flex-direction: row; - background: #fff; - padding: 25px; - height: 100%; - border-radius: 10px; + position: relative; + display: flex; + flex-direction: row; + background: #fff; + padding: 25px; + height: 100%; + border-radius: 10px; } @media (max-width: 768px) { - .pricing-table-inner { - flex-direction: column; - gap: 25px; - } + .pricing-table-inner { + flex-direction: column; + gap: 25px; + } } -.pricing-table-inner>* { - position: relative; - width: 100% +.pricing-table-inner > * { + position: relative; + width: 100%; } -@supports (-ms-ime-align:auto) { - .pricing-table-inner::before { - box-shadow: 0 16px 48px rgba(31, 43, 53, .12) - } +@supports (-ms-ime-align: auto) { + .pricing-table-inner::before { + box-shadow: 0 16px 48px rgba(31, 43, 53, 0.12); + } } .pricing-table-header { - position: relative; - display: flex; - flex-direction: column; - padding-right: 2.5rem; + position: relative; + display: flex; + flex-direction: column; + padding-right: 2.5rem; } @media (max-width: 768px) { - .pricing-table-header { - padding-right: 0; - } + .pricing-table-header { + padding-right: 0; + } } .pricing-table-header::after { - content: ''; - position: absolute; - bottom: 0; - right: 1.2rem; - height: 100%; - display: block; - width: 2px; - background: #e2e8ed + content: ""; + position: absolute; + bottom: 0; + right: 1.2rem; + height: 100%; + display: block; + width: 2px; + background: #e2e8ed; } @media (max-width: 768px) { - .pricing-table-header::after { - display: none; - } + .pricing-table-header::after { + display: none; + } } .pricing-table-title { - color: #1f2b35; - font-size: 20px; - font-weight: 700; + color: #1f2b35; + font-size: 20px; + font-weight: 700; } .pricing-table-collection { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; } .pricing-table-features { - width: 40%; - min-width: 13.5rem; - display: flex; - flex-direction: column; - justify-content: space-between; + width: 40%; + min-width: 13.5rem; + display: flex; + flex-direction: column; + justify-content: space-between; } @media (max-width: 768px) { - .pricing-table-features { - display: none; - } + .pricing-table-features { + display: none; + } } .pricing-table-features li:not(:last-child) { - display: flex; - align-items: center; - margin-bottom: 14px; + display: flex; + align-items: center; + margin-bottom: 14px; } .pricing-table-features li .list-icon { - display: inline-flex; - width: 16px; - height: 12px; - margin-right: 12px + display: inline-flex; + width: 16px; + height: 12px; + margin-right: 12px; } -@media (min-width:641px) { - .pricing .section-title { - margin-bottom: 64px - } +@media (min-width: 641px) { + .pricing .section-title { + margin-bottom: 64px; + } } .section-inner { - position: relative; - padding-top: 48px; - padding-bottom: 48px + position: relative; + padding-top: 48px; + padding-bottom: 48px; } -@media (min-width:641px) { - .section-inner { - padding-top: 80px; - padding-bottom: 80px - } +@media (min-width: 641px) { + .section-inner { + padding-top: 80px; + padding-bottom: 80px; + } } .site-footer { - font-size: 14px; - line-height: 20px; - letter-spacing: 0; - background: #1f2b35 + font-size: 14px; + line-height: 20px; + letter-spacing: 0; + background: #1f2b35; } .site-footer a { - text-decoration: none + text-decoration: none; } .site-footer a:active, .site-footer a:hover { - color: #6f8394; - text-decoration: underline + color: #6f8394; + text-decoration: underline; } .site-footer-inner { - position: relative; - display: flex; - flex-wrap: wrap; - padding-top: 40px; - padding-bottom: 40px + position: relative; + display: flex; + flex-wrap: wrap; + padding-top: 40px; + padding-bottom: 40px; } .site-footer-inner.has-top-divider::before { - background: rgba(255, 255, 255, .08) + background: rgba(255, 255, 255, 0.08); } .footer-brand, .footer-copyright, .footer-links, .footer-social-links { - flex: none; - width: 100%; - display: inline-flex; + flex: none; + width: 100%; + display: inline-flex; } .footer-brand, .footer-links, .footer-social-links { - margin-bottom: 24px + margin-bottom: 24px; } .footer-links { - gap: 25px; + gap: 25px; } -.footer-social-links li+li { - margin-left: 16px +.footer-social-links li + li { + margin-left: 16px; } .footer-social-links li { - display: inline-flex + display: inline-flex; } .footer-social-links li a { - padding: 8px + padding: 8px; } -@media (min-width:641px) { - .site-footer-inner { - justify-content: space-between - } +@media (min-width: 641px) { + .site-footer-inner { + justify-content: space-between; + } - .footer-brand, - .footer-copyright, - .footer-links, - .footer-social-links { - flex: 50% - } + .footer-brand, + .footer-copyright, + .footer-links, + .footer-social-links { + flex: 50%; + } - .footer-brand, - .footer-copyright { - justify-content: flex-start - } + .footer-brand, + .footer-copyright { + justify-content: flex-start; + } - .footer-links, - .footer-social-links { - justify-content: flex-end - } + .footer-links, + .footer-social-links { + justify-content: flex-end; + } - .footer-links { - order: 1; - margin-bottom: 0 - } -} \ No newline at end of file + .footer-links { + order: 1; + margin-bottom: 0; + } +}