/* * These styles apply ONLY to the header and footer assets. */ /*OOB FOOTER CSS start * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 124px; height: 27px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } OOB FOOTER CSS END */ /*# sourceMappingURL=styles.css.map */ /*GNav styles */ #global-navigation{ z-index: 100; } /* CUSTOM FOOTER CSS START */ /* * The Typekit service used to deliver this font or fonts for use on websites * is provided by Adobe and is subject to these Terms of Use * http://www.adobe.com/products/eulas/tou_typekit. For font license * information, see the list below. * * proxima-nova: * - http://typekit.com/eulas/00000000000000003b9b093b * - http://typekit.com/eulas/00000000000000003b9b093a * - http://typekit.com/eulas/00000000000000003b9b0939 * - http://typekit.com/eulas/00000000000000003b9b0938 * - http://typekit.com/eulas/00000000000000003b9b0934 * - http://typekit.com/eulas/00000000000000003b9b0935 * - http://typekit.com/eulas/00000000000000003b9b0936 * - http://typekit.com/eulas/00000000000000003b9b0937 * * © 2009-2022 Adobe Systems Incorporated. All Rights Reserved. */ /*{"last_published":"2018-07-26 18:06:00 UTC"}*/ @import url("https://p.typekit.net/p.css?s=1&k=mpv7lfl&ht=tk&f=139.140.173.174.175.176.25136.25137&a=14898271&app=typekit&e=css"); @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/71f83c/00000000000000003b9b093b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/71f83c/00000000000000003b9b093b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/71f83c/00000000000000003b9b093b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/86b539/00000000000000003b9b093a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/86b539/00000000000000003b9b093a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/86b539/00000000000000003b9b093a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:700;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/27776b/00000000000000003b9b0939/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/27776b/00000000000000003b9b0939/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/27776b/00000000000000003b9b0939/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/256534/00000000000000003b9b0938/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/256534/00000000000000003b9b0938/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/256534/00000000000000003b9b0938/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:600;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/6aec08/00000000000000003b9b0935/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/6aec08/00000000000000003b9b0935/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/6aec08/00000000000000003b9b0935/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/3331e6/00000000000000003b9b0936/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/3331e6/00000000000000003b9b0936/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/3331e6/00000000000000003b9b0936/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; } @font-face { font-family:"proxima-nova"; src:url("https://use.typekit.net/af/1cd3b2/00000000000000003b9b0937/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/1cd3b2/00000000000000003b9b0937/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/1cd3b2/00000000000000003b9b0937/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; } .tk-proxima-nova { font-family: "proxima-nova","Helvetica Neue","Helvetica","Arial",sans-serif; } h1, h2, h3, h4, h5, h6, p,ul,li,a { color: #242d48; font-family: "proxima-nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 100%; font-style: normal; font-weight: normal; line-height: 1.5; } /*** Footer *** */ footer { background-color: #0b2265; color: white; display: flex; flex-flow: row wrap; padding-top: 20px; width: 100%; } footer .footer-top { display: flex; flex-flow: column wrap; padding: 20px 20px 0px 20px; justify-content: space-between; } footer .footer-top .links { display: flex; flex-flow: row wrap; width: 100%; color: white; justify-content: space-between; } footer .footer-top .links .link { display: flex; flex-flow: column nowrap; color: white; font-size: 14px; padding: 10px 15px 10px 0px; width: 50%; } footer .footer-top .links .link a { text-decoration: none; color: white; } footer .footer-top .footer-logo { display: flex; width: 80%; } footer .footer-top .footer-logo img { width: 180px; } footer .footer-bottom { align-items: right; background-color: #0b2265; display: flex; flex-flow: column no wrap; width: 100%; color:white; } footer .footer-bottom .copyrights-and-terms-conditions { display: flex; align-items: center; flex-flow: row nowrap; white-space: nowrap; padding: 20px; } footer .footer-bottom .copyrights-and-terms-conditions ul { display: flex; flex-flow: row wrap; font-size: 16px; line-height: 1.5; width: 100%; } footer .footer-bottom .copyrights-and-terms-conditions ul li { border-left: 1px solid white; list-style: none; padding-right: 10px; padding-left: 10px; white-space: nowrap; color:white } footer .footer-bottom .copyrights-and-terms-conditions ul li:first-child { border-left: 0px; } footer .footer-bottom .copyrights-and-terms-conditions ul li a { display: flex; text-decoration: none; color: white; } footer .footer-top .links .link.japan { white-space: nowrap; } @media screen and (max-width: 1200px) { footer .footer-bottom .copyrights-and-terms-conditions{ padding-left:10px; } footer .footer-bottom .copyrights-and-terms-conditions ul{ padding-left: 0px; font-size: 14px; } } @media screen and (min-width: 1200px) { footer { flex-flow: column; justify-content: flex-start; } footer .footer-top { flex-flow: row nowrap; align-items: center; justify-content: space-between; } footer .footer-top .links { flex-flow: row nowrap; justify-content: flex-end; width: 100%; } footer .footer-top .links .link { flex-flow: row nowrap; font-size: 16px; width: fit-content; } footer .footer-bottom { justify-content: flex-end; } footer .footer-bottom .copyrights-and-terms-conditions ul { flex-flow: row nowrap; font-size: 16px; padding-left:0px; } } /* CUSTOM FOOTER CSS end */

Planual: Chapter 3 - UX Principles

3.02-01 Gestalt Principle

The mind tends to group items together to simplify input. Grouping your pages together visually helps the user to make sense of what they’re seeing, and find what they’re looking for quicker

Best Practice article
Top 5 Design Best Practices for UX—Desktop and Mobile

Questions on this topic? See 3.02-01 Gestalt Principle in our Planual forum.