/* =========================================================
BOSS SHADES
GLOBAL TYPOGRAPHY - LATO
Paste into: GHL Page Settings > Custom CSS
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&display=swap');
/* =========================================================
ROOT COLORS
========================================================= */
:root {
--boss-navy: #132F5B;
--boss-dark-navy: #0D2345;
--boss-yellow: #FFB800;
--boss-white: #FFFFFF;
--boss-light: #F5F7FA;
--boss-text: #25364D;
--boss-muted: #68788E;
}
/* =========================================================
BODY / NORMAL TEXT
========================================================= */
html,
body {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
body,
p,
span,
li,
label,
small,
strong,
b,
em,
blockquote,
td,
th {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
/* =========================================================
HEADINGS
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
color: var(--boss-dark-navy);
}
h1 {
font-weight: 900 !important;
line-height: 1.08 !important;
letter-spacing: -0.8px;
}
h2 {
font-weight: 900 !important;
line-height: 1.15 !important;
letter-spacing: -0.5px;
}
h3 {
font-weight: 700 !important;
line-height: 1.25 !important;
}
h4,
h5,
h6 {
font-weight: 700 !important;
}
/* =========================================================
PARAGRAPHS
========================================================= */
p {
font-weight: 400 !important;
line-height: 1.65 !important;
}
/* =========================================================
LINKS
========================================================= */
a {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
/* =========================================================
BUTTONS
========================================================= */
button,
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
input[type="button"] {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
}
/* =========================================================
FORMS
========================================================= */
input,
textarea,
select,
option {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
input::placeholder,
textarea::placeholder {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
/* =========================================================
GHL TEXT ELEMENTS
========================================================= */
.hl_page-preview--content,
.hl_page-preview--content p,
.hl_page-preview--content span,
.hl_page-preview--content a,
.hl_page-preview--content li,
.hl_page-preview--content label {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
.hl_page-preview--content h1,
.hl_page-preview--content h2,
.hl_page-preview--content h3,
.hl_page-preview--content h4,
.hl_page-preview--content h5,
.hl_page-preview--content h6 {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
/* =========================================================
NAVIGATION
========================================================= */
nav,
nav a,
.menu a,
.nav-menu a,
.navigation a,
.header-menu a,
[class*="menu"] a {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
}
/* =========================================================
FAQ
========================================================= */
.faq,
.faq p,
.faq span,
.faq a,
.faq-item,
.faq-item p,
.faq-item span,
[class*="faq"] p,
[class*="faq"] span,
[class*="faq"] a,
[class*="faq"] button {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
[class*="faq"] button,
[class*="faq"] h3,
[class*="faq"] h4 {
font-weight: 700 !important;
}
/* =========================================================
BOSS SHADES EYEBROW
Example:
WHY BOSS SHADES
========================================================= */
.boss-eyebrow {
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
font-size: 13px;
line-height: 1.2;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--boss-yellow);
}
/* =========================================================
PRIMARY BUTTON
========================================================= */
.boss-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 15px 28px;
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
font-size: 15px;
line-height: 1;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--boss-dark-navy) !important;
background-color: var(--boss-yellow);
border: 0;
border-radius: 8px;
text-decoration: none !important;
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
filter 0.25s ease;
}
.boss-btn:hover {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow: 0 8px 20px rgba(13, 35, 69, 0.15);
}
/* =========================================================
DARK BUTTON
========================================================= */
.boss-btn-dark {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 15px 28px;
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
font-size: 15px;
line-height: 1;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #FFFFFF !important;
background-color: var(--boss-navy);
border: 0;
border-radius: 8px;
text-decoration: none !important;
cursor: pointer;
transition:
transform 0.25s ease,
background-color 0.25s ease,
box-shadow 0.25s ease;
}
.boss-btn-dark:hover {
transform: translateY(-2px);
background-color: var(--boss-dark-navy);
box-shadow: 0 8px 20px rgba(13, 35, 69, 0.18);
}
/* =========================================================
KEEP ICON FONTS WORKING
========================================================= */
i,
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
[class^="fa-"],
[class*=" fa-"],
.material-icons,
.material-symbols-outlined {
font-family: inherit;
}
/* Font Awesome protection */
.fa,
.fas {
font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
}
.far {
font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
}
.fab {
font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 767px) {
h1 {
line-height: 1.12 !important;
letter-spacing: -0.4px;
}
h2 {
line-height: 1.18 !important;
letter-spacing: -0.3px;
}
p {
line-height: 1.6 !important;
}
.boss-btn,
.boss-btn-dark {
width: 100%;
padding: 15px 20px;
}
}