diff --git a/gatsby-node.js b/gatsby-node.js index c0b9b3b74..58a9c5cd0 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -119,6 +119,10 @@ exports.sourceNodes = async ({ actions }) => { path: `${baseUrl}/submenu-products-developer-tools`, name: "ProductsDevTools" }, + { + path: `${baseUrl}/submenu-pricing-primary`, + name: "PricingPrimary" + }, { path: `${baseUrl}/submenu-community-primary`, name: "CommunityPrimary" diff --git a/src/components/2_molecules/navigation/communityFeatured.js b/src/components/2_molecules/navigation/communityFeatured.js new file mode 100644 index 000000000..55d99fcc0 --- /dev/null +++ b/src/components/2_molecules/navigation/communityFeatured.js @@ -0,0 +1,51 @@ +import React from "react"; + +const styles = { + color: '#ffffff' +}; + +const CommunityFeaturedNav = () => ( +
+
Featured
+ + + +
+
+ New One Click App:
+ Nextcloud +
+
Open source productivity and storage management platform.
+ + Deploy App + +
+ +
+); + +export default CommunityFeaturedNav; diff --git a/src/components/2_molecules/navigation/communityMenus.js b/src/components/2_molecules/navigation/communityMenus.js index 6eb92d5bd..d2e965130 100644 --- a/src/components/2_molecules/navigation/communityMenus.js +++ b/src/components/2_molecules/navigation/communityMenus.js @@ -1,5 +1,6 @@ import React from "react"; +import CommunityFeatured from "./CommunityFeatured"; import CommunityPrimary from "./communityPrimary"; import CommunityServices from "./communityServices"; @@ -7,13 +8,13 @@ const CommunityMenus = () => (
- +
- +
- +
diff --git a/src/components/2_molecules/navigation/pricingFeatured.js b/src/components/2_molecules/navigation/pricingFeatured.js new file mode 100644 index 000000000..2b6a52592 --- /dev/null +++ b/src/components/2_molecules/navigation/pricingFeatured.js @@ -0,0 +1,43 @@ +import React from "react"; +const styles = { + borderWidth: 2, + borderColor: '#ededf4' +}; + +const PricingFeaturedNav = () => ( +
+
Featured
+ + +
+
+ Total Cost of Ownership Calculator +
+
+ Migrating from on-premises or between cloud providers for hosting, cloud storage, or cloud computing? +
+ + Launch Calculator + +
+ +
+); + +export default PricingFeaturedNav; diff --git a/src/components/2_molecules/navigation/pricingMenus.js b/src/components/2_molecules/navigation/pricingMenus.js new file mode 100644 index 000000000..632ef70f3 --- /dev/null +++ b/src/components/2_molecules/navigation/pricingMenus.js @@ -0,0 +1,19 @@ +import React from "react"; + +import PricingFeatured from "./pricingFeatured"; +import PricingPrimary from "./pricingPrimary"; + +const PricingMenus = () => ( +
+
+
+ +
+
+ +
+
+
+); + +export default PricingMenus; diff --git a/src/components/2_molecules/navigation/pricingPrimary.js b/src/components/2_molecules/navigation/pricingPrimary.js new file mode 100644 index 000000000..92e868d21 --- /dev/null +++ b/src/components/2_molecules/navigation/pricingPrimary.js @@ -0,0 +1,46 @@ +import React from "react"; +import { StaticQuery, graphql } from "gatsby"; +import Col from "./col"; + +const PricingPrimary = ({ data }) => { + return ( + + {data.allPricingPrimary.edges.map((link, i) => { + const node = link.node; + return ( +
  • + + + {node.title} + + +
    • + ); + })} + + ); +}; + +export default props => ( + } + /> +); diff --git a/src/components/2_molecules/navigation/primaryNav.js b/src/components/2_molecules/navigation/primaryNav.js index e7e6564a7..8eab89024 100644 --- a/src/components/2_molecules/navigation/primaryNav.js +++ b/src/components/2_molecules/navigation/primaryNav.js @@ -123,9 +123,9 @@ class MainSiteNav extends React.Component { -
  • - - +
  • + + Pricing @@ -144,13 +144,6 @@ class MainSiteNav extends React.Component {
    • -
  • - - - Search - - -
  • diff --git a/src/components/2_molecules/navigation/productsFeatured.js b/src/components/2_molecules/navigation/productsFeatured.js index a6b3e8ee1..7bd26d6e4 100644 --- a/src/components/2_molecules/navigation/productsFeatured.js +++ b/src/components/2_molecules/navigation/productsFeatured.js @@ -1,64 +1,50 @@ import React from "react"; -import { StaticQuery, graphql } from "gatsby"; -import Col from "./col"; - -const _ = require("lodash"); - -const ProductsFeaturedNav = ({ data }) => { - return ( - - {data.allProductsFeatured.edges.map((link, i) => { - const node = link.node; - return ( -
  • - - {node.title} - - {node.title} - - {node.description} - - - -
    • - ); - })} - - ); +const styles1 = { + borderWidth: 2, + borderColor: '#ededf4' +}; +const styles2 = { + alignSelf: 'flex-end', + marginBottom: -24, + marginLeft: -24, + marginRight: -24, + maxWidth: '50%' }; -export default props => ( - } - /> +const ProductsFeaturedNav = () => ( + +
    +
    Featured
    + + +
    +
    + GPUs have landed in Mumbai! +
    +
    + On-demand GPUs for machine learning, scientific computing, and video processing. +
    + + Try Today + +
    +     +
    ); + +export default ProductsFeaturedNav; diff --git a/src/components/2_molecules/navigation/productsMenus.js b/src/components/2_molecules/navigation/productsMenus.js index 036fe6fb1..a8453e56f 100644 --- a/src/components/2_molecules/navigation/productsMenus.js +++ b/src/components/2_molecules/navigation/productsMenus.js @@ -1,5 +1,6 @@ import React from "react"; +import ProductsFeatured from "./ProductsFeatured"; import ProductsCompute from "./productsCompute"; import ProductsStorage from "./productsStorage"; import ProductsServices from "./productsServices"; @@ -9,6 +10,14 @@ import ProductsDevTools from "./productsDevTools"; const ProductMenus = () => (
    +
    @@ -18,18 +27,6 @@ const ProductMenus = () => (
    -
    - -
    -
    -
    ); diff --git a/src/components/2_molecules/navigation/utilityNav.js b/src/components/2_molecules/navigation/utilityNav.js index 616420f2b..e9c2e3b5e 100644 --- a/src/components/2_molecules/navigation/utilityNav.js +++ b/src/components/2_molecules/navigation/utilityNav.js @@ -11,6 +11,18 @@ const MainSiteGlobalMenu = ({ data }) => { className="o-menu__list" aria-expanded="false" > +
  • + + + Search + + +
    • {data.allHeaderUtility.edges.map(link => { const node = link.node; return ( diff --git a/src/components/2_molecules/navigation/whyFeatured.js b/src/components/2_molecules/navigation/whyFeatured.js new file mode 100644 index 000000000..0ef6a69a7 --- /dev/null +++ b/src/components/2_molecules/navigation/whyFeatured.js @@ -0,0 +1,45 @@ +import React from "react"; + +const styles = { + color: '#ffffff' +}; + +const WhyFeaturedNav = () => ( +
    +
    Featured
    + + +
    +
    + Craft of Code: +
    + Cloudnet +
    +
    + Reliability Allows Customers (and Cloudnet) To Do What They Love +
    + + Read Cloudnet's Story + +
    +     +
    +); + +export default WhyFeaturedNav; diff --git a/src/components/2_molecules/navigation/whyMenus.js b/src/components/2_molecules/navigation/whyMenus.js index 29e15100c..281722a48 100644 --- a/src/components/2_molecules/navigation/whyMenus.js +++ b/src/components/2_molecules/navigation/whyMenus.js @@ -1,5 +1,5 @@ import React from "react"; - +import WhyFeatured from "./WhyFeatured"; import WhyPrimary from "./whyPrimary"; import WhyServices from "./whyServices"; @@ -7,13 +7,13 @@ const whyMenus = () => (
    - +
    - +
    - +
    diff --git a/src/components/3_organisms/footer-nav.js b/src/components/3_organisms/footer-nav.js index ee30902da..d3a3ebc62 100644 --- a/src/components/3_organisms/footer-nav.js +++ b/src/components/3_organisms/footer-nav.js @@ -349,14 +349,21 @@ const FooterNav = () => (
  • - Pricing + Pricing List
  • - Pricing Estimator + Cloud Estimator + + +
    • +
  • + + + TCO Calculator
    • @@ -442,6 +449,13 @@ const FooterNav = () => ( +
  • + + + Beta Program + + +
  • diff --git a/src/components/3_organisms/header.js b/src/components/3_organisms/header.js index e6745cb9e..a7f420fef 100644 --- a/src/components/3_organisms/header.js +++ b/src/components/3_organisms/header.js @@ -6,6 +6,7 @@ import UtilityMobile from "../2_molecules/navigation/utilityMobile"; import WhyMenus from "../2_molecules/navigation/whyMenus"; import ProductsMenus from "../2_molecules/navigation/productsMenus"; +import PricingMenus from "../2_molecules/navigation/pricingMenus"; import CommunityMenus from "../2_molecules/navigation/communityMenus"; const Header = () => ( @@ -39,6 +40,7 @@ const Header = () => ( +
    diff --git a/src/css/components/3_organisms/footer.css b/src/css/components/3_organisms/footer.css new file mode 100644 index 000000000..dbe3a1bd3 --- /dev/null +++ b/src/css/components/3_organisms/footer.css @@ -0,0 +1,246 @@ +/* ========================================================================== + FOOTER CSS STYLES + USES INUITCSS... see in theme /node_modules/inuitcss + ========================================================================== */ + #consent_blackbar { + bottom: 0; + left: 0; + position: fixed; + right: 0; + z-index: 999; + } + + #consent_blackbar #truste-consent-track { + background-color: transparent; + margin: 0; + padding: 0; + } + + #consent_blackbar #truste-consent-content { + border: none; + border-top: 1px solid #ededf4; + background-color: white; + padding: 16px; + } + + #consent_blackbar #truste-consent-text { + font-size: 14px; + line-height: 1.42857; + font-family: "Source Sans Pro", sans-serif; + font-weight: 400; + letter-spacing: 0; + color: #32363b; + margin-bottom: 8px; + } + + #consent_blackbar a { + color: #02b159; + } + + #consent_blackbar #truste-consent-buttons { + text-align: right; + } + + #consent_blackbar #truste-consent-buttons button, + #consent_blackbar #truste-consent-buttons a { + border: 0 solid; + border-radius: 4px; + cursor: pointer; + display: inline-block; + font-size: 13px; + font-weight: 600; + line-height: 1.307692308; + padding: 0.846153846em 20px; + text-align: center; + text-decoration: none; + } + + #consent_blackbar #truste-consent-buttons button, #consent_blackbar #truste-consent-buttons button:visited, + #consent_blackbar #truste-consent-buttons a, + #consent_blackbar #truste-consent-buttons a:visited { + background-color: transparent; + border-color: #D9DBE1; + color: #5E6065; + } + + #consent_blackbar #truste-consent-buttons button:hover, + #consent_blackbar #truste-consent-buttons a:hover { + background-color: transparent; + border-color: #02b159; + color: #02b159; + } + + #consent_blackbar #truste-consent-buttons button + button, + #consent_blackbar #truste-consent-buttons button + a, + #consent_blackbar #truste-consent-buttons a + button, + #consent_blackbar #truste-consent-buttons a + a { + margin-left: 12px; + } + + #consent_blackbar #truste-consent-buttons #truste-consent-button, #consent_blackbar #truste-consent-buttons #truste-consent-button:visited { + background-color: #02b159; + border-color: #02b159; + color: white; + } + + #consent_blackbar #truste-consent-buttons #truste-consent-button:hover { + background-color: #32363b; + border-color: #32363b; + color: white; + } + + .c-site-footer { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 18px; + line-height: 1.33333; + font-family: "Source Sans Pro", sans-serif; + font-weight: 400; + letter-spacing: 0; + background-color: white; + color: #32363b; + } + + .c-site-footer a { + color: inherit; + } + + .c-site-footer__primary { + font-size: 14px; + line-height: 1.28571; + background-color: white; + color: #65686c; + padding-top: 24px; + padding-bottom: 56px; + } + + .c-site-footer__primary .c-identity { + margin-top: 32px; + } + + @media (max-width: 47.99em) { + .c-site-footer__primary .c-identity__link { + text-align: center; + } + .c-site-footer__primary .c-identity__image { + display: inline-block; + max-width: 144px; + } + } + + @media (max-width: 47.99em) { + .c-site-footer__primary .c-copyright { + text-align: center; + } + } + + .c-site-footer__primary .o-menu__heading { + font-family: "Source Sans Pro", sans-serif; + font-size: 18px; + line-height: 1.33333; + font-weight: 600; + color: var(--h6-color, var(--heading-color)); + letter-spacing: -0.25px; + color: #32363b; + margin: 32px 0 6px; + } + + @media (max-width: 47.99em) { + .c-site-footer__primary .o-menu__heading { + font-size: 14px; + line-height: 1.57143; + } + } + + .c-site-footer__primary .o-menu__item { + margin-top: 10px; + } + + .c-site-footer__primary .o-menu__link:hover { + text-decoration: underline; + } + + .c-site-footer__primary .o-menu__link:hover * { + text-decoration: inherit; + } + + .c-site-footer__primary .c-social ul { + list-style-type: none; + margin-left: 0; + padding-left: 0; + } + + .c-site-footer__primary .c-social a { + align-items: center; + display: flex; + } + + .c-site-footer__primary .c-social a:hover { + text-decoration: none; + } + + .c-site-footer__primary .c-social a:hover .o-menu__title { + text-decoration: underline; + } + + .c-site-footer__primary .c-social svg { + color: #32363b; + flex: none; + } + + .c-site-footer__primary .o-layout__col:first-child .c-social { + display: none; + } + + .c-site-footer__primary .o-layout__col:first-child .o-menu__heading { + border: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 1px !important; + } + + @media (max-width: 47.99em) { + .c-site-footer__primary .o-layout__col:first-child .c-social { + display: block; + } + .c-site-footer__primary .o-layout__col:nth-child(n+2) { + display: none; + } + .c-site-footer__primary .c-social { + font-size: 24px; + } + .c-site-footer__primary .c-social ul { + display: flex; + justify-content: center; + } + .c-site-footer__primary .c-social li { + margin: 0; + padding: 0; + } + .c-site-footer__primary .c-social a { + padding: 8px 12px; + } + .c-site-footer__primary .c-social .o-menu__title { + border: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 1px !important; + } + .c-site-footer__primary .c-social i, .c-site-footer__primary .c-social svg { + margin: 0; + } + } diff --git a/src/css/components/3_organisms/header-footer.css b/src/css/components/3_organisms/header.css similarity index 76% rename from src/css/components/3_organisms/header-footer.css rename to src/css/components/3_organisms/header.css index 2836245cb..44998559f 100644 --- a/src/css/components/3_organisms/header-footer.css +++ b/src/css/components/3_organisms/header.css @@ -1,5 +1,5 @@ /* ========================================================================== - HEADER + FOOTER CSS STYLES + HEADER CSS STYLES USES INUITCSS... see in theme /node_modules/inuitcss ========================================================================== */ .o-layout__row { @@ -41,7 +41,6 @@ .o-menu__title { display: inline-block; - white-space: nowrap; } .o-menu__caret { @@ -68,93 +67,6 @@ column-count: 2; } - #consent_blackbar { - bottom: 0; - left: 0; - position: fixed; - right: 0; - z-index: 999; - } - - #consent_blackbar #truste-consent-track { - background-color: transparent; - margin: 0; - padding: 0; - } - - #consent_blackbar #truste-consent-content { - border: none; - border-top: 1px solid #ededf4; - background-color: white; - padding: 16px; - } - - #consent_blackbar #truste-consent-text { - font-size: 14px; - line-height: 1.42857; - font-family: "Source Sans Pro", sans-serif; - font-weight: 400; - letter-spacing: 0; - color: #32363b; - margin-bottom: 8px; - } - - #consent_blackbar a { - color: #02b159; - } - - #consent_blackbar #truste-consent-buttons { - text-align: right; - } - - #consent_blackbar #truste-consent-buttons button, - #consent_blackbar #truste-consent-buttons a { - border: 0 solid; - border-radius: 4px; - cursor: pointer; - display: inline-block; - font-size: 13px; - font-weight: 600; - line-height: 1.307692308; - padding: 0.846153846em 20px; - text-align: center; - text-decoration: none; - } - - #consent_blackbar #truste-consent-buttons button, #consent_blackbar #truste-consent-buttons button:visited, - #consent_blackbar #truste-consent-buttons a, - #consent_blackbar #truste-consent-buttons a:visited { - background-color: transparent; - border-color: #D9DBE1; - color: #5E6065; - } - - #consent_blackbar #truste-consent-buttons button:hover, - #consent_blackbar #truste-consent-buttons a:hover { - background-color: transparent; - border-color: #02b159; - color: #02b159; - } - - #consent_blackbar #truste-consent-buttons button + button, - #consent_blackbar #truste-consent-buttons button + a, - #consent_blackbar #truste-consent-buttons a + button, - #consent_blackbar #truste-consent-buttons a + a { - margin-left: 12px; - } - - #consent_blackbar #truste-consent-buttons #truste-consent-button, #consent_blackbar #truste-consent-buttons #truste-consent-button:visited { - background-color: #02b159; - border-color: #02b159; - color: white; - } - - #consent_blackbar #truste-consent-buttons #truste-consent-button:hover { - background-color: #32363b; - border-color: #32363b; - color: white; - } - li.weglot-hide, .weglot-hide { display: none !important; @@ -365,16 +277,12 @@ transform: none; } - @media (max-width: 47.99em) { + @media (max-width: 61.99em) { .c-site-header { top: 0; } } - .c-site-header .o-layout__colset { - max-width: none; - } - .c-site-header a, .c-site-header a:hover, .c-site-header a:focus { color: inherit; text-decoration: none; @@ -392,6 +300,10 @@ z-index: 998; } + body.admin-bar .c-site-header { + top: -5px; + } + .c-site-header__primary { font-size: 16px; line-height: 1.25; @@ -410,6 +322,7 @@ align-items: center; display: flex; flex-wrap: nowrap; + max-width: none; } .c-site-header__primary .o-layout__col { @@ -438,7 +351,7 @@ justify-content: flex-end; } - @media (max-width: 47.99em) { + @media (max-width: 61.99em) { .c-site-header__primary .o-menu__item { display: none; } @@ -452,12 +365,6 @@ position: relative; } - @media (min-width: 48em) and (max-width: 61.99em) { - .c-site-header__primary .o-menu__link { - margin: 0 5px; - } - } - .c-site-header__primary .o-menu__link[href^="#"]:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='far' data-icon='angle-down' role='img' viewBox='0 0 320 512' class='svg-inline--fa fa-angle-down fa-w-10 fa-7x'%3E%3Cpath fill='rgba(50,54,59)' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z' class=''%3E%3C/path%3E%3C/svg%3E"); background-position: center; @@ -476,6 +383,7 @@ border-width: 2px 0; font-weight: 600; padding: 10px 0; + white-space: nowrap; } .c-site-header__primary .o-menu__link.current .o-menu__title, @@ -505,21 +413,6 @@ border-width: 0; } - .c-site-header__primary .o-menu__item--search .o-menu__link { - overflow: hidden; - white-space: nowrap; - width: 23px; - } - - .c-site-header__primary .o-menu__item--search .o-menu__link::before { - background-image: url("data:image/svg+xml;utf8,Icon / Search"); - content: ''; - flex: none; - height: 23px; - vertical-align: middle; - width: 23px; - } - .c-site-header__primary .o-menu__item--mobile { display: none; } @@ -573,7 +466,7 @@ width: 1px !important; } - @media (max-width: 47.99em) { + @media (max-width: 61.99em) { .c-site-header__primary .o-menu__item--mobile { display: initial; } @@ -589,8 +482,7 @@ transform: translateY(-100px); transition: opacity .175s ease-out, transform .25s ease-out; will-change: position, transform; - padding: 0; - padding-top: 101px; + padding-top: 108px; } .c-sub-menu.active, .c-sub-menu:focus-within { @@ -603,16 +495,31 @@ transform: translateY(0px); } + .c-sub-menu:after { + border-top: 1px solid #ededf4; + content: ''; + display: block; + height: 0; + margin: 0 -16px; + } + .c-sub-menu .o-layout__colset { - border-bottom: 1px solid #ededf4; + grid-template-columns: 46% 27% 27%; } .c-sub-menu .o-layout__col { + border-left: 1px solid #ededf4; padding: 16px; + grid-row: 2 / -1; } - .c-sub-menu .o-layout__col + .o-layout__col { - border-left: 1px solid #ededf4; + .c-sub-menu .o-layout__col:first-child { + border-left: none; + padding-left: 0; + } + + .c-sub-menu .o-layout__module + .o-layout__module { + margin-top: 32px; } .c-sub-menu h6 { @@ -623,7 +530,7 @@ letter-spacing: 0; color: #999b9d; letter-spacing: 2px; - margin: 32px 0 16px; + margin: 16px 0; text-transform: uppercase; } @@ -689,57 +596,102 @@ margin-top: 24px; } - .c-sub-menu .o-link--arrow { + .c-sub-menu .c-featured { align-items: center; + border: var(--c-featured-border-width, 0) solid var(--c-featured-border-color, transparent); + border-radius: 8px; + color: var(--c-featured-color, #32363b); display: flex; - font-weight: 600; + max-width: 565px; + overflow: hidden; + padding: 16px 24px 24px; + position: relative; } - .c-sub-menu .o-link--arrow:after { - content: url("data:image/svg+xml;utf8,"); - display: inline-block; + .c-sub-menu .c-featured__background { + height: 100%; + left: 0; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center center; + object-position: center center; + position: absolute; + top: 0; + width: 100%; + z-index: 0; + } + + .c-sub-menu .c-featured__image { + flex: none; height: auto; - margin-left: .5em; - width: 7px; + max-width: 33%; + order: 1; + padding-left: 24px; + position: relative; + width: 100%; } - .c-sub-menu .c-post-preview .c-post-preview__permalink { - display: block; + .c-sub-menu .c-featured__text { + flex: 1 1 100%; + order: 0; + position: relative; + width: 100%; } - .c-sub-menu .c-post-preview__image { - border-radius: 8px; + .c-sub-menu .c-featured__headline { + font-family: "Source Sans Pro", sans-serif; + font-size: 32px; + line-height: 1.125; margin-bottom: 8px; - overflow: auto; - position: static; } - .c-sub-menu .c-post-preview__image:before { - display: none; + .c-sub-menu .c-featured__excerpt { + font-size: 14px; + line-height: 1.42857; + font-family: "Source Sans Pro", sans-serif; + font-weight: 400; + letter-spacing: 0; + margin-bottom: 16px; } - .c-sub-menu .c-post-preview__image img { - display: block; - height: auto; - position: static; - width: 100%; + .c-sub-menu .c-featured__button { + background-color: #02b159; + border-radius: 4px; + border: 0 solid; + color: white; + cursor: pointer; + display: inline-block; + font-size: 13px; + font-weight: 600; + line-height: 1.538461538; + padding: 10px 20px; + text-align: center; + white-space: nowrap; + width: auto; } - .c-sub-menu .c-post-preview__title { - font-family: "Source Sans Pro", sans-serif; - font-size: 18px; - line-height: 1.33333; + .c-sub-menu .c-featured:hover, .c-sub-menu .c-featured:visited { + color: var(--c-featured-color, #32363b); + } + + .c-sub-menu .o-link--arrow { + align-items: center; + display: flex; font-weight: 600; - color: var(--h6-color, var(--heading-color)); - letter-spacing: -0.25px; - font-weight: 400; } - @media (max-width: 47.99em) { - .c-sub-menu .c-post-preview__title { - font-size: 14px; - line-height: 1.57143; - } + .c-sub-menu .o-link--arrow:after { + content: url("data:image/svg+xml;utf8,"); + display: inline-block; + height: auto; + margin-left: .5em; + width: 7px; + } + + .c-sub-menu--pricing .o-layout__colset { + grid-template-columns: 46% -webkit-max-content; + grid-template-columns: 46% max-content; + justify-content: center; } .c-sub-menu--mobile { @@ -752,6 +704,7 @@ .c-sub-menu--mobile .o-layout__colset { border-bottom: 0; + grid-template-columns: 1fr; } .c-sub-menu--mobile .o-layout__module { @@ -864,19 +817,19 @@ color: #8c8e90; } - @media (max-width: 47.99em) { + @media (max-width: 61.99em) { .c-sub-menu { padding-top: 57px; } } - body.fixed-header .c-sub-menu { - padding-top: 64px; + body.admin-bar .c-sub-menu { + padding-top: 140px; } - @media (max-width: 47.99em) { - body.fixed-header .c-sub-menu { - padding-top: 57px; + @media (max-width: 61.99em) { + body.admin-bar .c-sub-menu { + padding-top: 103px; } } @@ -889,7 +842,7 @@ position: relative; } - @media (max-width: 47.99em) { + @media (max-width: 61.99em) { .c-site-header__topbar { display: none; } @@ -899,6 +852,7 @@ align-items: center; display: flex; flex-wrap: nowrap; + max-width: none; } .c-site-header__topbar .o-layout__col { @@ -968,6 +922,22 @@ .c-site-header__topbar .o-menu__title { font-weight: 600; padding: 8px 0; + white-space: nowrap; + } + + .c-site-header__topbar .o-menu__item--search .o-menu__link { + overflow: hidden; + white-space: nowrap; + width: 16px; + } + + .c-site-header__topbar .o-menu__item--search .o-menu__link::before { + background-image: url("data:image/svg+xml;utf8,Icon / Search"); + content: ''; + flex: none; + height: 16px; + vertical-align: middle; + width: 16px; } .c-site-header__topbar .c-weglot-nav { @@ -1040,159 +1010,3 @@ content: none !important; display: none !important; } - - .c-site-footer { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-size: 18px; - line-height: 1.33333; - font-family: "Source Sans Pro", sans-serif; - font-weight: 400; - letter-spacing: 0; - background-color: white; - color: #32363b; - } - - .c-site-footer a { - color: inherit; - } - - .c-site-footer__primary { - font-size: 14px; - line-height: 1.28571; - background-color: white; - color: #65686c; - padding-top: 24px; - padding-bottom: 56px; - } - - .c-site-footer__primary .c-identity { - margin-top: 32px; - } - - @media (max-width: 47.99em) { - .c-site-footer__primary .c-identity__link { - text-align: center; - } - .c-site-footer__primary .c-identity__image { - display: inline-block; - max-width: 144px; - } - } - - @media (max-width: 47.99em) { - .c-site-footer__primary .c-copyright { - text-align: center; - } - } - - .c-site-footer__primary .o-menu__heading { - font-family: "Source Sans Pro", sans-serif; - font-size: 18px; - line-height: 1.33333; - font-weight: 600; - color: var(--h6-color, var(--heading-color)); - letter-spacing: -0.25px; - color: #32363b; - margin: 32px 0 6px; - } - - @media (max-width: 47.99em) { - .c-site-footer__primary .o-menu__heading { - font-size: 14px; - line-height: 1.57143; - } - } - - .c-site-footer__primary .o-menu__item { - margin-top: 10px; - } - - .c-site-footer__primary .o-menu__link:hover { - text-decoration: underline; - } - - .c-site-footer__primary .o-menu__link:hover * { - text-decoration: inherit; - } - - .c-site-footer__primary .c-social ul { - list-style-type: none; - margin-left: 0; - padding-left: 0; - } - - .c-site-footer__primary .c-social a { - align-items: center; - display: flex; - } - - .c-site-footer__primary .c-social a:hover { - text-decoration: none; - } - - .c-site-footer__primary .c-social a:hover .o-menu__title { - text-decoration: underline; - } - - .c-site-footer__primary .c-social svg { - color: #32363b; - flex: none; - } - - .c-site-footer__primary .o-layout__col:first-child .c-social { - display: none; - } - - .c-site-footer__primary .o-layout__col:first-child .o-menu__heading { - border: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(50%) !important; - clip-path: inset(50%) !important; - height: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 1px !important; - } - - @media (max-width: 47.99em) { - .c-site-footer__primary .o-layout__col:first-child .c-social { - display: block; - } - .c-site-footer__primary .o-layout__col:nth-child(n+2) { - display: none; - } - .c-site-footer__primary .c-social { - font-size: 24px; - } - .c-site-footer__primary .c-social ul { - display: flex; - justify-content: center; - } - .c-site-footer__primary .c-social li { - margin: 0; - padding: 0; - } - .c-site-footer__primary .c-social a { - padding: 8px 12px; - } - .c-site-footer__primary .c-social .o-menu__title { - border: 0 !important; - clip: rect(0 0 0 0) !important; - -webkit-clip-path: inset(50%) !important; - clip-path: inset(50%) !important; - height: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 1px !important; - } - .c-site-footer__primary .c-social i, .c-site-footer__primary .c-social svg { - margin: 0; - } - } \ No newline at end of file