mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
5b0360b517
Changes: - Added an "Articles" label to the community dropdown in the website's navigation menu (Mobile and desktop) - Updated the `z-index` value of the mobile navigation menu to prevent the website's footer fro being visible when the menu is open on small pages.
467 lines
10 KiB
Plaintext
Vendored
467 lines
10 KiB
Plaintext
Vendored
@footer-height: 254px;
|
|
@container-md-max-width: 1100px;
|
|
|
|
[v-cloak] { display: none; }
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
[purpose='page-wrap'] {
|
|
height: 100%;
|
|
height: auto !important;//lesshint-disable-line importantRule,duplicateProperty
|
|
min-height: 100%;
|
|
position: relative;
|
|
padding-bottom: @footer-height;
|
|
background: linear-gradient(180deg, #E8F1F6 0%, #FFFFFF 200px);
|
|
background-position: center 40px;
|
|
}
|
|
|
|
[purpose='header-background'] {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
}
|
|
|
|
// Styles for the page header
|
|
[purpose='header-container'] {
|
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
|
|
border-bottom: 1px solid #FFFFFF;
|
|
// rules for sticky nav transitions
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 199;
|
|
position: sticky;
|
|
position: -webkit-sticky; //lesshint-disable-line duplicateProperty
|
|
top: 0;
|
|
transition-property: transform, bottom;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 500ms;
|
|
}
|
|
|
|
[purpose='header-ribbon-cta'] {
|
|
background-color: #7487C2;
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #fff;
|
|
}
|
|
a {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
[purpose='page-header'] {
|
|
max-width: 1200px;
|
|
height: 80px;
|
|
[purpose='header-logo'] {
|
|
max-width: 118px;
|
|
img {
|
|
height: 41px;
|
|
width: 118px;
|
|
}
|
|
}
|
|
|
|
[purpose='glass-header-btn'] {
|
|
color: #FFFFFF;
|
|
height: 32px;
|
|
position: relative;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
padding: 16px;
|
|
box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24);
|
|
border-radius: 4px;
|
|
background-color: @core-vibrant-red;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[purpose='glass-header-btn']::before {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
opacity: 1;
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -5px;
|
|
width: 60%;
|
|
height: 100%;
|
|
transform: skew(-10deg);
|
|
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
|
}
|
|
[purpose='glass-header-btn']:hover:before {
|
|
opacity: 0;
|
|
left: 160px;
|
|
width: 110%;
|
|
}
|
|
|
|
[purpose='mobile-nav-toggle-btn'] {
|
|
color: #192147;
|
|
cursor: unset;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
font-family: @navigation-font;
|
|
font-weight: @bold;
|
|
height: 100%;
|
|
img {
|
|
width: 16px;
|
|
}
|
|
}
|
|
[purpose='mobile-nav'] {
|
|
[purpose='mobile-header-logo'] {
|
|
img {
|
|
height: 92px;
|
|
width: 162px;
|
|
}
|
|
}
|
|
position: fixed;
|
|
min-height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
background-color: #ffffff;
|
|
a:not(.btn) {
|
|
width: 100%;
|
|
padding: 8px 24px 8px 0px;
|
|
margin-bottom: 4px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
cursor: pointer;
|
|
}
|
|
hr {
|
|
margin-top: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
[purpose='mobile-nav-close-btn'] {
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
img {
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
[purpose='mobile-dropdown-toggle'] {
|
|
font-weight: 700;
|
|
color: @core-fleet-black;
|
|
margin-bottom: 0px;
|
|
&[aria-expanded='true'] {
|
|
color: #6a67fe;
|
|
outline: none;
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
[purpose='mobile-nav-btn'] {
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
[purpose='mobile-dropdown'] {
|
|
[purpose='beta-label'] {
|
|
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
text-transform: uppercase;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
span {
|
|
display: inline-flex;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
line-height: 24px;
|
|
color: @core-fleet-black-50;
|
|
margin-bottom: 4px;
|
|
}
|
|
a {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
padding: 8px 24px 8px 0px;
|
|
font-weight: 400;
|
|
color: #212529;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
}
|
|
a:hover {
|
|
color: #6a67fe;
|
|
text-decoration: none;
|
|
}
|
|
[purpose='beta-label'] {
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
[purpose='header-nav'] {
|
|
[purpose='glass-header-btn'] {
|
|
color: #FFFFFF;
|
|
height: 32px;
|
|
position: relative;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
padding: 16px;
|
|
box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24);
|
|
border-radius: 4px;
|
|
background-color: @core-vibrant-red;
|
|
text-decoration: none;
|
|
}
|
|
[purpose='header-nav-btn'][aria-expanded='true'] {
|
|
font-weight: 700;
|
|
outline: none;
|
|
color: #192147;
|
|
}
|
|
[purpose='header-nav-btn']:before {
|
|
display: block;
|
|
content: attr(button-text);
|
|
font-weight: bold;
|
|
height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
[purpose='header-nav-btn'] {
|
|
color: #192147;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
[purpose='header-nav-btn']:hover {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
&:focus {
|
|
outline-color: none;
|
|
}
|
|
.current-section {
|
|
font-weight: 700;
|
|
svg {
|
|
path {
|
|
fill: #6a67fe;
|
|
}
|
|
}
|
|
}
|
|
[purpose='logout-btn'] {
|
|
color: @core-fleet-black;
|
|
text-decoration: none;
|
|
line-height: 23px;
|
|
}
|
|
&:hover {
|
|
font-weight: 700;
|
|
}
|
|
[purpose='header-dropdown'] {
|
|
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
|
|
border-radius: 8px;
|
|
a {
|
|
color: @core-fleet-black;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
a:hover {
|
|
color: #6a67fe;
|
|
text-decoration: none;
|
|
}
|
|
[purpose='beta-label'] {
|
|
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
text-transform: uppercase;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
[purpose='admin-nav'] {
|
|
justify-content: center;
|
|
a {
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
color: @core-fleet-black-75;
|
|
&:hover {
|
|
color: @core-fleet-black;
|
|
}
|
|
}
|
|
span {
|
|
color: @core-fleet-black;
|
|
font-weight: 600;
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
|
|
// Footer styles
|
|
[purpose='page-footer'] {
|
|
background-color: #FFF;
|
|
color: #515774;
|
|
height: @footer-height;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
a {
|
|
color: #515774;
|
|
}
|
|
[purpose='footer-logo'] {
|
|
width: 118px;
|
|
height: 41px;
|
|
}
|
|
[purpose='footer-container'] {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
padding-bottom: 32px;
|
|
padding-top: 40px;
|
|
max-width: 1248px;
|
|
position: relative;
|
|
z-index: 198;
|
|
}
|
|
[purpose='footer-nav'] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
[purpose='footer-bottom'] {
|
|
background-color: #FFF;
|
|
padding-left: 40px;
|
|
padding-right: 70px;
|
|
}
|
|
[purpose='legal-and-social-nav'] {
|
|
max-width: 1248px;
|
|
[purpose='legal-section'] {
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
img {
|
|
width: 80px;
|
|
height: 15px;
|
|
}
|
|
[purpose='legal-links'] {
|
|
a {
|
|
padding-left: 16px;
|
|
display: inline;
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
[purpose='footer-socials'] {
|
|
img {
|
|
height: 20px;
|
|
width: auto;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
// Landing page footer styles
|
|
[purpose='landing-footer'] {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
color: #FFFF;
|
|
background-color: #182147;
|
|
height: 60px;
|
|
}
|
|
|
|
body.detected-mobile {
|
|
// Above and beyond the media queries below, this selector (which relies on
|
|
// `parasails` automatically attaching this class, if appropriate) contains
|
|
// styles intended to be activated specifically when loaded from a recognized
|
|
// mobile device, regardless of viewport dimensions. This includes tablet
|
|
// devices (like the iPad) as well as handset devices (like the iPhone).
|
|
// …
|
|
}
|
|
@media (max-width: 992px) {
|
|
.homepage-cta-banner+.homepage-header-top {
|
|
top: 72px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
[purpose='page-wrap'] {
|
|
padding-bottom: 264px;
|
|
|
|
[purpose='page-footer'] {
|
|
height: 264px;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 605px) {
|
|
.homepage-cta-banner + .homepage-header-top {
|
|
top: 92px;
|
|
}
|
|
}
|
|
@media (max-width: 575px) {
|
|
[purpose='page-wrap'] {
|
|
padding-bottom: 371px;
|
|
[purpose='page-footer'] {
|
|
height: 371px;
|
|
}
|
|
}
|
|
// For hiding the hubspot chat widget on mobile devices.
|
|
#hubspot-messages-iframe-container iframe[aria-label='Chat Widget'] {
|
|
display: none !important;//lesshint-disable-line importantRule
|
|
}
|
|
html.hs-messages-widget-open, html.hs-messages-mobile.hs-messages-widget-open {// Shows the hubspot chat widget when the widget is opened from a "Talk to an expert" button.
|
|
#hubspot-messages-iframe-container iframe[aria-label='Chat Widget'] {
|
|
display: initial !important;//lesshint-disable-line importantRule
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 490px) {
|
|
[purpose='header-ribbon-cta'] {
|
|
p {
|
|
width: 220px;
|
|
}
|
|
}
|
|
[purpose='page-wrap'] {
|
|
padding-bottom: 581px;
|
|
|
|
[purpose='page-footer'] {
|
|
height: 581px;
|
|
|
|
[purpose='footer-nav'] {
|
|
display: block;
|
|
}
|
|
[purpose='legal-nav'] {
|
|
padding-left: 0px;
|
|
display: block;
|
|
}
|
|
}
|
|
// Landing page footer styles
|
|
[purpose='landing-footer'] {
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 393px) {
|
|
.homepage-cta-banner + .homepage-header-top {
|
|
top: 112px;
|
|
}
|
|
}
|
|
@media (max-width: 330px) {
|
|
.homepage-cta-banner + .homepage-header-top {
|
|
top: 132px;
|
|
}
|
|
}
|
|
|
|
// Some utilities for the sticky nav behaviour.
|
|
// Note: this will not be applied if a navigation menu open.
|
|
.translate-y-0 {
|
|
transform: translateY(-235px);
|
|
}
|