/* =========================================================================
SPIN MODERN — CUSTOM CSS
Divi → Theme Options → General → Custom CSS
Cleaned up and organized 2026-10-09
-------------------------------------------------------------------------
CONTENTS
YOUR SITE CSS
01 Brand colors & fonts (:root)
02 Global (Divi buttons, menu dropdowns, white outline button, form fields)
03 Home — hero banner
04 Home — hero contact form (Gravity Forms + Amelia booking)
05 Statistics & number counters
06 Case studies
07 Agency page — team cards
08 Contact page
09 Landing pages — challenges / solutions
10 Web design landing page
11 Portfolio
12 Reviews badge
13 LEGACY — old header menu (safe to delete later)
14 LEGACY — old Industries carousel (safe to delete later)
CODE WE WROTE TOGETHER
15 Glass nav + mega menu
16 Arrow text button
17 Pill buttons
18 Service card hover
Each section keeps its own phone/tablet rules right under it,
in a "Responsive" block.
========================================================================= */
/* =========================================================================
01. BRAND COLORS & FONTS
-------------------------------------------------------------------------
Every color and font below this point reads from these variables.
Change a value here and the whole site follows.
========================================================================= */
:root {
--charcoal: #0f1620;
--graphite: #1a2030;
--deep-navy: #0d2040;
--slate: #232e3f;
--steel-blue: #3a5068;
--steel-light: #5b7a96;
--matte-gold: #a8906a;
--silver: #8fa3b4;
--light-blue: #007ffd;
--grey: #f1f3f8;
--bg: #000;
--text: #f5f5f7;
--muted: #6e6e73;
--accent: #2997ff;
--card-radius: 18px;
--card-width: 1080px;
--card-gap: 16px;
/* Fonts */
--main-font: "Archivo", sans-serif; /* body, buttons, nav */
--heading-font: "Anton", sans-serif; /* big headlines */
--mono-font: "Space Mono", monospace; /* eyebrows and labels */
}
/* =========================================================================
02. GLOBAL (site-wide Divi tweaks)
========================================================================= */
/* Smooth hover on every Divi button */
body #page-container .et_pb_section .et_pb_button {
transition: all ease-in-out 0.5s;
}
/* Hide dropdowns on Divi Menu modules (the glass nav below turns its own back on) */
.et_pb_menu .et_pb_menu__menu > nav > ul > li > ul {
display: none;
}
/* White outline button: white fill + blue text on hover (also the footer CTA) */
body #page-container .et_pb_section .et_pb_button.white-outline:hover,
body #page-container .et_pb_section .et_pb_button_0_tb_footer.footer-cta:hover {
background-color: #fff;
border-color: #fff;
color: var(--light-blue);
}
/* ---------- Form fields (all forms) ---------- */
input.text,
input.title,
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"],
select,
textarea {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--silver);
border-radius: 4px;
}
input.text:focus,
input.title:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
border-color: var(--charcoal);
}
input[type="submit"] {
background-color: var(--light-blue);
color: #fff;
padding: 10px 15px;
border: 2px solid var(--light-blue);
font-weight: 600;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color: var(--charcoal);
border-color: var(--charcoal);
}
/* =========================================================================
03. HOME — HERO BANNER
========================================================================= */
#landing-header {
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: transparent;
z-index: 99999999;
}
/* Dark overlay on the web design and AI ad heroes */
.hero-banner.web-design-banner:after,
.hero-banner.ai-ad-hero:after {
content: "";
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
}
/* ---------- Glass info boxes in the hero ---------- */
.hero-banner-box {
display: flex;
flex-direction: row;
gap: 10px;
width: 100%;
height: auto;
border-radius: 7px;
border: 1px solid rgba(91, 122, 150, 0.5);
padding: 14px;
background-color: rgba(58, 80, 104, 0.3);
backdrop-filter: blur(16px);
color: #fff;
transition: all ease-in-out 0.3s;
}
.hero-banner-box:hover {
background-color: rgba(58, 80, 104, 0.6);
backdrop-filter: blur(32px);
}
.eight-width {
width: 75%;
}
.hero-banner-box .two-width {
width: 25%;
}
.hero-banner-box img {
display: block;
width: 100%;
height: auto;
border-radius: 7px;
max-width: 150px;
}
.hero-banner-box h6 {
display: block;
position: relative;
font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
color: #fff;
font-weight: 600;
letter-spacing: 0;
font-size: 18px;
}
.hero-banner-box p {
display: block;
font-size: 12px;
line-height: 1.2;
font-weight: 500;
margin: 0 0 5px 0;
}
.hero-banner-box a,
.hero-banner-box a:visited,
a.white {
color: #fff;
}
/* ---------- Text button that rolls up on hover (.btn > .btn-inner > .btn-label) ---------- */
.btn br {
display: none;
}
.btn {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
height: 28px;
font-weight: 600;
letter-spacing: 0.1em;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
outline: none;
}
.btn-inner {
display: flex;
flex-direction: column;
height: 200%;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.btn:hover .btn-inner {
transform: translateY(-50%);
}
.btn-label {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
padding: 0;
transition: opacity 0.35s ease;
white-space: nowrap;
}
.btn .et-pb-icon {
font-size: 14px;
}
/* ---------- No gap between stacked modules in the hero column ---------- */
#home-hero .et_flex_column {
--vertical-gap: 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
.hero-banner h1 {
font-size: 48px !important;
}
}
@media (max-width: 768px) {
.hero-banner h1 {
font-size: 36px !important;
}
}
/* =========================================================================
04. HOME — HERO CONTACT FORM (Gravity Forms + Amelia booking)
-------------------------------------------------------------------------
Dark theme for the form card in the home hero (#home-form).
========================================================================= */
#home-hero #home-form.home-contact-form {
width: 100%;
height: auto;
padding: 15px 20px;
background-color: rgba(143, 163, 180, 0.4);
backdrop-filter: blur(3px);
border-radius: 7px;
color: #fff;
}
#home-hero #home-form.home-contact-form h5 {
color: #fff;
letter-spacing: 0;
font-size: 24px;
}
#home-hero #home-form.home-contact-form p {
font-size: 16px;
margin: 0 0 10px 0;
font-weight: 400;
}
#home-hero #home-form.home-contact-form .gform_wrapper {
padding: 15px;
background-color: var(--charcoal);
border-radius: 7px;
}
#home-hero #home-form.home-contact-form input,
#home-hero #home-form.home-contact-form textarea {
background-color: var(--graphite);
border: 1px solid var(--slate);
}
#home-hero #home-form.home-contact-form input::placeholder,
#home-hero #home-form.home-contact-form textarea::placeholder {
color: var(--steel-blue);
font-size: 14px;
}
#home-hero #home-form.home-contact-form .ginput_counter.gfield_description {
display: none;
}
#home-hero #home-form.home-contact-form button[type="submit"],
#landing-footer-form.landing-footer-form button[type="submit"] {
padding: 10px 15px;
border: 2px solid var(--light-blue);
background-color: var(--light-blue);
color: #fff !important;
transition: all 0.3s ease;
border-radius: 7px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}
#home-hero #home-form.home-contact-form button[type="submit"]:hover {
background-color: transparent;
color: var(--light-blue);
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper {
margin: 10px auto;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__main {
background-color: var(--graphite);
backdrop-filter: blur(4px);
color: var(--silver);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container
.m-phone-number-input__input
.m-input-wrapper-input
input {
font-size: 14px;
color: #8fa3b4 !important;
border: none;
background-color: transparent;
padding: 14px 8px 8px;
margin: 0;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-fs__main-heading-inner-title {
font-family: "Montserrat", sans-serif;
color: #fff;
font-size: 16px;
font-weight: 600;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-fs__main
.am-progress-bar
.am-step {
background-color: var(--steel-blue);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-fs__main
.am-progress-bar
.am-step.am-current-step {
background-color: var(--light-blue);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-select
.el-select__wrapper {
background-color: var(--graphite);
border: 1px solid var(--silver);
color: var(--silver);
box-shadow: none;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-select
.el-select__suffix
[class^="am-icon"] {
color: var(--silver);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-select
.el-select__wrapper.is-hovering:hover {
border: 1px solid var(--light-blue) !important;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-select
.el-select__selected-item.el-select__placeholder
span {
color: var(--silver) !important;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc__header
.am-button {
color: var(--silver);
background-color: transparent;
border: 1px solid var(--silver);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc__header
.am-button:hover {
background-color: var(--silver);
color: var(--graphite);
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-advsc__time-zone {
justify-content: right;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-advsc__time-zone span {
color: var(--silver);
font-size: 12px;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
th.am-advsc__dayGridMonth-header-cell
.fc-col-header-cell-cushion {
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
td.am-advsc__dayGridMonth-cell
.fc-daygrid-day-frame {
background-color: transparent;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-disabled
.fc-daygrid-day-number {
color: var(--steel-blue);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
td.am-advsc__dayGridMonth-cell
.fc-daygrid-day-frame {
border: none;
border-radius: 10px;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
td.am-advsc__dayGridMonth-cell
.fc-daygrid-day-bg
.fc-bg-event
.am-advsc__slot-wrapper {
background-color: var(--steel-blue);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
td.am-advsc__dayGridMonth-cell
.fc-daygrid-day-frame:hover {
background-color: var(--steel-blue);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc.fc-theme-standard
td.am-advsc__dayGridMonth-cell
.fc-daygrid-day-number {
color: #fff;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-advsc__slots-heading {
color: #fff;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc__slots-item__inner {
background-color: transparent;
border: 1px solid var(--silver);
color: var(--silver);
transition: all 0.3s ease-in-out;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc__slots-item__selected
.am-advsc__slots-item__inner {
background-color: var(--steel-blue);
border: var(--steel-blue);
color: #fff;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-advsc__slots-item__inner:hover {
background-color: var(--steel-blue);
border: 1px solid var(--steel-blue);
color: #fff;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-button-continue {
background-color: var(--charcoal);
border: 1px solid var(--steel-blue);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-button-continue
.am-button__inner {
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-fs__main-heading-inner
.am-heading-prev {
color: var(--silver);
border: 1px solid var(--silver);
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-fs__main-heading-inner
.am-heading-prev:hover {
background-color: var(--steel-blue);
color: #fff;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__info-form__label {
color: var(--silver);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container
.am-input-wrapper
.am-input
.el-input__wrapper {
background-color: transparent;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container
.am-input-phone-wrapper
.m-phone-number-input__input {
background-color: transparent;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container
.am-input-wrapper
.am-input
.el-input__inner {
color: var(--silver);
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb-atc {
background-color: var(--graphite);
background-image: none;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-info {
background-color: var(--charcoal);
color: #fff;
}
#home-hero
#home-form.home-contact-form
.amelia-v2-booking
#amelia-container.am-fs__wrapper
.am-fs__congrats-info-customer
div
span {
color: #fff;
}
#home-hero #home-form.home-contact-form .amelia-v2-booking #amelia-container .am-fs__main-footer {
box-shadow: none;
border-top: 1px solid var(--slate);
}
/* ---------- Responsive ---------- */
@media (max-width: 768px) {
/*calendar on mobile*/
#home-form .amelia-v2-booking #amelia-container .am-advsc__header {
flex-direction: row;
}
#home-form .amelia-v2-booking #amelia-container .am-select-wrapper {
width: 33.333%;
}
}
/* =========================================================================
05. STATISTICS & NUMBER COUNTERS
========================================================================= */
/* Blue gradient label pill under each stat */
.stat-label {
display: block;
position: relative;
width: 95%;
padding: 5px 25px;
text-align: center;
background-color: var(--slate);
background: linear-gradient(90deg, rgba(71, 147, 221, 1) 0%, rgba(59, 87, 129, 0.7) 50%, rgba(59, 87, 129, 1) 100%);
color: #fff;
border-radius: 30px;
}
/* Dotted circle around Divi Number Counter values */
.et_pb_number_counter .percent {
display: flex;
position: relative;
width: 250px;
height: 250px;
margin: 15px auto;
border: 3px dotted var(--light-blue);
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* =========================================================================
06. CASE STUDIES (section, grid and single pages)
========================================================================= */
/* Short blue underline under headings (.underline.blue) */
.underline:after {
display: block;
content: "";
width: 100px;
height: 2px;
margin: 10px 0;
}
.underline.blue:after {
background-color: var(--light-blue);
}
/* ---------- Case studies grid ---------- */
.case-studies-grid .et_pb_text_inner h3 {
transition: all 0.3s ease-in-out;
}
.case-studies-grid .et_pb_text_inner h3:hover {
color: var(--light-blue) !important;
}
.learn-more-btn {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
font-size: 12px !important;
color: #fff !important;
}
.learn-more-btn:hover {
color: var(--light-blue) !important;
}
.learn-more-btn:after {
font-family: "ETmodules" !important;
content: "\24"; /* Code for Divi's standard right arrow */
font-size: 14px;
}
/* ---------- Case study rows: underline + arrow slide in on hover ---------- */
.et_pb_row.et_flex_row.et_clickable.casestudy-wrapper {
transition: all 0.3s ease-in-out;
}
.et_pb_row.et_flex_row.et_clickable.casestudy-wrapper h2.case-study-title {
transition: all 0.3s ease-in-out;
}
.et_pb_row.et_flex_row.et_clickable.casestudy-wrapper:hover {
border-bottom: 3px solid #fff;
}
.et_pb_row.et_flex_row.et_clickable.casestudy-wrapper:hover h2.case-study-title {
color: #fff !important;
}
.et_pb_row.et_flex_row.casestudy-wrapper .et-pb-icon {
transition: all 0.3s ease-in-out;
opacity: 0;
transform: translatex(-15px);
}
.et_pb_row.et_flex_row.et_clickable.casestudy-wrapper:hover .et-pb-icon {
color: #fff;
opacity: 100%;
transform: translatex(0);
}
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.case-studies-grid .et_pb_text_inner h3 {
font-size: 28px !important;
}
}
@media (max-width: 768px) {
.et_pb_row.et_flex_row.casestudy-wrapper .et-pb-icon {
display: none;
}
}
/* =========================================================================
07. AGENCY PAGE — TEAM CARDS
-------------------------------------------------------------------------
Bio slides up over the photo on hover. On phones it sits under the photo.
========================================================================= */
.et_pb_team_member.staff-card .et_pb_team_member_description {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
padding: 15px;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
align-items: flex-start;
justify-content: flex-end;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
opacity: 0;
}
.et_pb_team_member.staff-card:hover .et_pb_team_member_description {
opacity: 100%;
}
.et_pb_team_member.staff-card .et_pb_team_member_description .et_pb_module_header,
.et_pb_team_member.staff-card .et_pb_team_member_description .et_pb_member_position,
.et_pb_team_member.staff-card .et_pb_team_member_description .et_pb_team_member_description_content {
transform: translatey(30px);
}
.et_pb_team_member.staff-card .et_pb_module_header {
animation-delay: 0.1s;
transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.et_pb_team_member.staff-card .et_pb_member_position {
animation-delay: 0.2s;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
margin-bottom: 15px;
}
.et_pb_team_member.staff-card .et_pb_team_member_description_content {
animation-delay: 0.4s;
transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}
.et_pb_team_member.staff-card:hover .et_pb_module_header {
transform: translatey(0);
}
.et_pb_team_member.staff-card:hover .et_pb_team_member_description .et_pb_member_position {
transform: translatey(0);
}
.et_pb_team_member.staff-card:hover .et_pb_team_member_description .et_pb_team_member_description_content {
transform: translatey(0);
}
/* ---------- Responsive ---------- */
@media (max-width: 768px) {
/*Agency page mobile*/
.et_pb_team_member.staff-card .et_pb_team_member_image {
margin: 0 !important;
padding: 0;
}
.et_pb_team_member.staff-card {
gap: 0px 0px;
}
.et_pb_team_member.staff-card .et_pb_team_member_description {
position: relative;
opacity: 100%;
background-image: none;
background-color: var(--charcoal);
margin: 0;
}
.et_pb_team_member.staff-card .et_pb_team_member_description .et_pb_module_header,
.et_pb_team_member.staff-card .et_pb_team_member_description .et_pb_member_position,
.et_pb_team_member.staff-card .et_pb_team_member_description .et_pb_team_member_description_content {
transform: translatey(0px);
}
}
/* =========================================================================
08. CONTACT PAGE
========================================================================= */
.contact-row {
justify-content: flex-start !important;
align-items: flex-start !important;
}
.contact-row .amelia-v2-booking #amelia-container.am-fs__wrapper {
margin: 0 !important;
}
#gform_submit_button_1 {
background-color: var(--light-blue);
font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
/* =========================================================================
09. LANDING PAGES — CHALLENGES / SOLUTIONS
========================================================================= */
.challenges-section .challenges-row .et_pb_column .et_pb_icon_wrap {
width: 90px;
height: 90px;
background-color: rgba(58, 80, 104, 0.4);
border-radius: 10px;
backdrop-filter: blur(10px);
}
.challenges-section .challenges-row .et_pb_column .et_pb_icon_wrap span {
font-size: 48px;
color: var(--charcoal);
line-height: 90px;
}
.challenges-section.solutions .challenges-row .et_pb_column .et_pb_icon_wrap span {
font-size: 24px;
color: var(--charcoal);
line-height: 60px;
}
.challenges-section.solutions .challenges-row .et_pb_column .et_pb_icon_wrap {
width: 60px;
height: 60px;
}
.block-line {
display: block;
padding: 10px 0 5px 0;
border-bottom: 0.5px dotted var(--steel-blue);
font-weight: 700;
}
.benefit-list br {
display: none;
}
/* =========================================================================
10. WEB DESIGN LANDING PAGE
========================================================================= */
.carousel-label {
text-align: center;
color: var(--charcoal);
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
font-family: var(--main-font);
font-weight: 700;
}
.logos-section.dark-mode .carousel-label {
color: var(--silver);
}
.vertical {
display: inline-block;
position: relative;
transform: rotate(-90deg);
transform-origin: 100% 100%;
}
.high-light {
display: inline-block;
position: relative;
}
.high-light:after {
display: inline-block;
position: absolute;
height: 5px;
width: 100%;
content: "";
background-color: var(--light-blue);
bottom: 0px;
left: 0;
}
.blue-text {
color: var(--light-blue);
}
.inline-cta {
display: inline-block;
position: relative;
width: auto;
overflow: hidden;
}
.inline-cta:after {
display: inline-block;
position: relative;
font-family: "ETMODULES";
content: "\28";
font-size: 28px;
margin-left: 7px;
vertical-align: top;
}
.inline-cta:before {
display: block;
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
content: "";
background-color: var(--light-blue);
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.inline-cta:hover:before {
transform: translateX(0%);
}
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.vertical {
transform: none;
}
}
/* =========================================================================
11. PORTFOLIO
========================================================================= */
.work-img {
overflow: hidden;
display: block;
position: relative;
margin: 0;
padding: 0;
}
.work-img a img {
transition: all 0.3s ease-in-out;
display: block;
position: relative;
}
.work-img figcaption {
display: flex;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-family: var(--main-font);
font-size: 24px;
opacity: 0;
transform: translateY(5px);
transition: all 0.3s ease-in-out;
background-color: rgba(0, 0, 0, 0);
text-align: center;
padding: 25px;
}
.work-img:hover img {
transform: scale(110%);
}
.work-img:hover figcaption {
opacity: 1;
transform: translatey(0);
background-color: rgba(0, 0, 0, 0.8);
}
/* =========================================================================
12. REVIEWS BADGE
========================================================================= */
.rpi-name {
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-weight: 700;
color: #222222;
}
.rpi-based {
font-family: "Montserrat", sans-serif;
}
.rpi-stars {
font-family: "Montserrat", sans-serif !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
/* dark theme */
#spin-reviews.spin-reviews .rpi-header .rpi-name,
#spin-reviews.spin-reviews .rpi-header .rpi-scale {
color: #fff;
}
}
/* =========================================================================
13. LEGACY — OLD HEADER MENU (before the glass nav)
-------------------------------------------------------------------------
The old Divi menu, old mega menu (.dm-mega-menu) and old hamburger
menu. The glass nav in section 15 overrides all of this.
Safe to delete this whole section once you've confirmed no page
still uses the old header. Kept for now so nothing changes.
========================================================================= */
@media (max-width: 1400px) {
.dm-mega-menu .mega-title-title p {
font-size: 14px !important;
line-height: 100%;
}
.dm-mega-menu .et_pb_text_inner p,
.et_pb_text ul.nav-links-list li a,
body #page-container .dm-mega-menu .sub-panel-row .et_pb_button_module_wrapper .et_pb_button {
font-size: 14px !important;
}
body #page-container .dm-mega-menu .left-column .light-blue-cta {
font-size: 14px !important;
letter-spacing: 0;
}
}
@media (max-width: 1200px) {
.dm-mega-menu .left-column {
display: none;
}
.dm-mega-menu .Sub-panels {
width: 100%;
}
.dm-mega-menu .sub-panel-row {
width: 100%;
}
.et_pb_menu .et-menu > li {
padding-left: 5px !important;
padding-right: 5px !important;
}
.et_pb_menu_0_tb_header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap {
max-width: 200px !important;
}
.et_pb_menu--style-left_aligned .et_pb_menu__logo {
margin-right: 0;
}
}
@media (max-width: 980px) {
/*mobile menu*/
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
color: #fff !important;
}
.et_pb_menu_0_tb_header .mobile_nav.opened .mobile_menu_bar {
z-index: 99999999;
position: fixed;
top: 30px;
right: 30px;
}
.et_pb_menu_0_tb_header .mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
z-index: 99999;
}
.menu-item-has-children > a:first-child:after {
content: "\33";
font-family: ETmodules !important;
speak: none;
font-style: normal;
font-weight: 400;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0 0;
direction: ltr;
position: absolute;
right: 5%;
}
.et_pb_menu .et_mobile_menu li ul.sub-menu {
transition: all 0.4s ease-in-out;
overflow: hidden;
transform: scale(100%, 0);
transform-origin: center top;
height: 0;
}
.et_pb_menu .et_mobile_menu li.open-sub-nav-mobile a.icon-switch + ul.sub-menu {
height: auto;
overflow: visible;
transform: scale(100%, 100%);
}
#mobile_menu1.et_mobile_menu {
background-color: var(--charcoal);
border-top: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 80px;
overflow-y: scroll;
}
.et_mobile_menu li {
width: 100%;
border-bottom: 1px solid var(--steel-light);
}
.et_mobile_menu li ul li {
border-bottom: 1px dotted var(--steel-blue);
}
.et_mobile_menu li ul li a {
font-size: 21px;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li a {
font-size: 21px;
padding: 15px 0;
}
.et_pb_menu .et_mobile_menu li ul.sub-menu li a {
font-size: 16px;
}
}
/* =========================================================================
14. LEGACY — OLD INDUSTRIES CAROUSEL
-------------------------------------------------------------------------
Replaced by the SM Industries Carousel plugin ([sm_industries]).
Safe to delete this whole section once no page uses the old
hand-coded carousel. Kept for now so nothing changes.
========================================================================= */
.industries-section {
padding: 50px 0;
}
#industries-section.industries-section .industries-header-wrapper.et_pb_row {
max-width: 1440px;
}
/* Title + controls row */
.industries-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0;
margin-bottom: 40px;
gap: 24px;
}
.section-title {
font-weight: 800;
color: #e4e4e4 !important;
font-size: 42px;
letter-spacing: 0px;
text-align: center;
}
/* Arrow buttons */
.carousel-controls {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.ctrl-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--light-blue);
background: transparent;
color: var(--light-blue);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
font-size: 0.9rem;
}
.ctrl-btn:hover {
background-color: var(--light-blue);
color: #fff;
}
.ctrl-btn:disabled {
opacity: 0.3;
cursor: default;
}
/* ─── SCROLL TRACK ─── */
.carousel-track-wrap {
position: relative;
}
.carousel-track {
display: flex;
gap: var(--card-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 60px;
}
.carousel-track::-webkit-scrollbar {
display: none;
}
/* ─── CARD ─── */
.industry-card {
flex: 0 0 var(--card-width);
scroll-snap-align: start;
border-radius: var(--card-radius);
overflow: hidden;
background: #1d1d1f;
cursor: grab;
user-select: none;
}
.industry-card:active {
cursor: grabbing;
}
/* Visual area */
.card-visual {
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card-visual .card-img,
.card-visual .card-img img {
display: block;
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.card-1 .card-visual {
background: linear-gradient(135deg, #0a0f1a, #0d1f3c, #0a2a5e);
}
.card-2 .card-visual {
background: linear-gradient(135deg, #0f0f0a, #1c1a0d, #2a2510);
}
.card-3 .card-visual {
background: linear-gradient(135deg, #0a1520, #0d2535, #083050);
}
.card-4 .card-visual {
background: linear-gradient(135deg, #0a0f0a, #0d1f0d, #0a300a);
}
.card-5 .card-visual {
background: linear-gradient(135deg, #1a0a00, #2e1500, #3d1c00);
}
.glow {
position: absolute;
border-radius: 50%;
filter: blur(70px);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.45;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(1.2);
}
}
.card-1 .glow {
width: 260px;
height: 260px;
background: #2997ff;
top: -30px;
right: -30px;
}
.card-2 .glow {
width: 300px;
height: 300px;
background: #ffd60a;
bottom: -50px;
left: 20%;
animation-delay: 1s;
}
.card-3 .glow {
width: 240px;
height: 240px;
background: #40c8e0;
top: 20%;
right: 10%;
animation-delay: 0.5s;
}
.card-4 .glow {
width: 280px;
height: 280px;
background: #30d158;
bottom: -30px;
right: -10px;
animation-delay: 1.5s;
}
.card-5 .glow {
width: 320px;
height: 320px;
background: #ff9f0a;
top: -40px;
left: 30%;
animation-delay: 2s;
}
.card-icon {
position: relative;
z-index: 1;
font-size: 5rem;
filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.12));
}
/* Caption */
.industry-icon {
display: inline-flex;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #fff;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 5px 0 0;
}
.industry-icon img {
display: inline-block;
position: relative;
width: 25px;
height: 25px;
}
.card-caption {
display: block;
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
padding: 100px 70px;
}
.card-label {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
margin-bottom: 8px;
}
.card-label a {
color: #fff;
}
.card-text {
font-size: 0.95rem;
font-weight: 400;
color: #fff;
line-height: 1.3;
letter-spacing: -0.01em;
max-width: 320px;
margin: 0 0 10px 0;
}
.card-text strong {
font-weight: 600;
}
/* ─── DOT INDICATORS ─── */
.carousel-dots {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 36px;
}
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--silver);
transition: all ease-in-out 0.3s;
cursor: pointer;
border: none;
}
.dot.active {
background: var(--light-blue);
transform: scale(1.3);
}
/* ---------- Responsive ---------- */
@media (max-width: 768px) {
:root {
--card-width: 100vw;
}
.industries-header-wrapper.et_pb_row {
width: 100%;
margin: 0;
padding: 0;
}
.industries-header {
padding: 0 24px;
}
.industries-header .section-title {
text-align: left;
font-size: 30px;
}
.carousel-track {
padding: 0 24px;
}
.carousel-track {
-webkit-mask-image: linear-gradient(
to right,
transparent 0px,
black 24px,
black calc(100% - 24px),
transparent 100%
);
mask-image: linear-gradient(to right, transparent 0px, black 24px, black calc(100% - 24px), transparent 100%);
}
.card-caption {
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 50px 30px;
background-color: rgba(0, 0, 0, 0.6);
}
.industry-icon {
width: 30px;
height: 30px;
}
.industry-icon img {
width: 15px;
height: auto;
}
.card-caption .card-text {
max-width: 90%;
}
}
/* =========================================================================
15–18. SPIN MODERN — CODE WE WROTE TOGETHER
-------------------------------------------------------------------------
Everything below is the Spin Modern component library. Keep it at the
bottom so it wins over older rules above.
15. Glass nav + mega menu (Theme Builder header: sm-header, sm-nav, sm-nav-cta)
16. Arrow text button (sm-btn-arrow)
17. Pill buttons (sm-pill, sm-pill--outline / --white / --dark / --arrow / --sm / --lg)
18. Service card hover (row sm-services, columns sm-service-card)
Lives elsewhere, not in this file:
- Page curtain, text reveal (sm-text-lines, sm-text-fade, sm-reveal-block,
sm-text-delay-1..5) and count-up (sm-count): Integration → head + body boxes
- Industries, Case Studies, Reviews: their plugins load their own CSS
========================================================================= */
/* #########################################################################
15. GLASS NAV + MEGA MENU
######################################################################### */
/* =========================================================================
SPIN MODERN — GLASS NAV + MEGA MENU (Divi Theme Builder + WordPress menu)
-------------------------------------------------------------------------
SETUP
1. Appearance → Menus (Screen Options → tick "CSS Classes"):
Services ← CSS class: mega-menu
Marketing ← column heading (link to /marketing/ or "#")
SEO / AEO / GEO, Social Media Management, …
Advertising
Google Ads Management / PPC, …
Creative
Website Design & Development, …
Industries ← normal dropdown
Aerospace & Defense, …
About
Case Studies
Get In Touch ← CSS class: sm-menu-cta (shows in the mobile menu only)
2. Divi → Theme Builder → Global Header:
Section → CSS class: sm-header
Row → 3/4 + 1/4 columns, CSS class: sm-header-row
Column 1 → Menu module, CSS class: sm-nav (pick the menu, upload the logo)
Column 2 → Button module, CSS class: sm-nav-cta (text "Get In Touch", link /contact/)
3. Paste this file into Divi → Theme Options → Custom CSS (or your stylesheet).
4. For tap-to-expand on phones, add sm-nav-mobile.html to the Global Header too.
========================================================================= */
:root {
--sm-nav-blue: var(--light-blue, #007FFD); /* hover + active color (was #4a9ff0) */
--sm-nav-ink: #111318;
--sm-nav-glass: rgba(255, 255, 255, .8);
--sm-nav-radius: 20px;
--sm-nav-height: 84px;
--sm-nav-gap: 24px; /* space between the nav pill and the CTA pill */
--sm-nav-drop: 12px; /* space between the nav and its dropdowns */
--sm-nav-ease: cubic-bezier(.22, 1, .36, 1);
--sm-row-w: min(90vw, 1320px); /* header width */
--sm-cta-w: clamp(220px, calc(var(--sm-row-w) * .21), 306px); /* Get In Touch pill width */
}
/* ---------- Header floats over the hero ---------- */
.et-l--header {
position: fixed; /* stays at the top while you scroll */
top: 0;
left: 0;
right: 0;
z-index: 9990;
}
.admin-bar .et-l--header { top: 32px; }
@media (max-width: 782px) { .admin-bar .et-l--header { top: 46px; } }
.et-l--header .sm-header.et_pb_section {
background: transparent !important;
padding: 28px 0 0 !important;
}
/* After scrolling (sm-scrolled is added by sm-nav-mobile.html):
the header tucks up closer to the top, the pills get a little shorter
and pick up a soft shadow so they read over light sections too. */
.et-l--header .sm-header.et_pb_section { transition: padding .45s var(--sm-nav-ease); }
html.sm-scrolled .et-l--header .sm-header.et_pb_section { padding-top: 14px !important; }
html.sm-scrolled { --sm-nav-height: 70px; }
.et-l--header .sm-nav.et_pb_menu,
.et-l--header .sm-header .sm-nav-cta.et_pb_button {
transition: height .45s var(--sm-nav-ease), min-height .45s var(--sm-nav-ease), box-shadow .45s ease, color .45s var(--sm-nav-ease) !important;
}
html.sm-scrolled .et-l--header .sm-nav.et_pb_menu,
html.sm-scrolled .et-l--header .sm-header .sm-nav-cta.et_pb_button {
box-shadow: 0 12px 34px rgba(5, 10, 30, .14) !important;
}
/* ---------- Row: nav pill + CTA pill side by side ---------- */
.et-l--header .sm-header .sm-header-row {
position: relative !important; /* the mega menu lines up with this row */
display: flex !important;
align-items: stretch;
gap: var(--sm-nav-gap);
width: var(--sm-row-w) !important;
max-width: none !important;
padding: 0 !important;
}
.et-l--header .sm-header .sm-header-row::after { display: none !important; }
.et-l--header .sm-header-row > .et_pb_column {
position: static !important;
width: auto !important;
margin: 0 !important;
}
.et-l--header .sm-header-row > .et_pb_column:first-child { flex: 1 1 auto; min-width: 0; }
.et-l--header .sm-header-row > .et_pb_column:last-child {
flex: 0 0 auto;
width: var(--sm-cta-w) !important;
display: flex;
flex-direction: column;
}
/* ---------- The glass nav pill ---------- */
.et-l--header .sm-nav.et_pb_menu {
position: relative !important; /* dropdowns are positioned from the nav pill */
display: flex;
align-items: center;
height: var(--sm-nav-height);
margin: 0 !important;
padding: 0 clamp(24px, 3.4vw, 56px) !important;
background: var(--sm-nav-glass) !important;
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .55);
border-radius: var(--sm-nav-radius);
}
.et-l--header .sm-nav .et_pb_menu_inner_container {
position: static !important;
display: flex !important;
align-items: center;
width: 100%;
height: 100%;
}
.et-l--header .sm-nav .et_pb_menu__logo-wrap { flex: 0 0 auto; margin: 0 !important; }
.et-l--header .sm-nav .et_pb_menu__logo { margin: 0 !important; }
.et-l--header .sm-nav .et_pb_menu__logo img {
display: block;
height: 40px !important;
width: auto !important;
max-height: none !important;
}
.et-l--header .sm-nav .et_pb_menu__wrap {
position: static !important;
display: flex !important;
justify-content: flex-end;
flex: 1 1 auto;
height: 100%;
margin: 0 !important;
}
.et-l--header .sm-nav .et_pb_menu__menu,
.et-l--header .sm-nav .et-menu-nav {
position: static !important;
display: flex;
align-items: center;
height: 100%;
}
.et-l--header .sm-nav .et-menu-nav > ul.et-menu {
position: static !important;
display: flex !important;
align-items: center;
gap: clamp(18px, 2.2vw, 34px);
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.et-l--header .sm-nav .et-menu-nav > ul > li {
position: relative !important;
display: flex !important;
align-items: center;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu { position: static !important; }
/* Services only opens the mega menu; it isn't a link (see sm-nav-mobile.html) */
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu > a { cursor: default; }
/* Top-level links */
.et-l--header .sm-nav .et-menu-nav > ul > li > a {
display: inline-flex !important;
align-items: center;
gap: .4em;
padding: 0 !important;
font-family: 'Archivo', sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
position: relative !important;
color: var(--sm-nav-ink) !important;
opacity: 1 !important;
transition: color .25s ease;
}
.et-l--header .sm-nav .et-menu-nav > ul > li:hover > a,
.et-l--header .sm-nav .et-menu-nav > ul > li.et-hover > a,
.et-l--header .sm-nav .et-menu-nav > ul > li:focus-within > a,
.et-l--header .sm-nav .et-menu-nav > ul > li.current-menu-item > a,
.et-l--header .sm-nav .et-menu-nav > ul > li.current-menu-ancestor > a {
color: var(--sm-nav-blue) !important;
}
/* Chevron on items with a dropdown (replaces Divi's icon font arrow) */
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children > a { padding-right: 0 !important; }
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children > a::after {
content: "" !important;
position: static !important;
display: inline-block !important;
width: .8em;
height: .8em;
margin: 0 !important;
font-family: inherit !important;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .35s var(--sm-nav-ease);
}
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children:hover > a::after,
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children.et-hover > a::after,
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children:focus-within > a::after {
transform: rotate(180deg);
}
/* ---------- Dropdown panels (shared) ---------- */
.et-l--header .sm-nav .et-menu-nav > ul > li > ul.sub-menu {
--sm-dd-x: -50%;
position: absolute !important;
top: calc(100% + var(--sm-nav-drop)) !important;
left: 50% !important;
z-index: 9999;
width: 290px !important;
margin: 0 !important;
padding: 14px !important;
background: #fff !important;
border: 0 !important;
border-radius: var(--sm-nav-radius);
box-shadow: 0 30px 70px rgba(5, 10, 30, .28) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
transform: translateX(var(--sm-dd-x)) translateY(10px);
transition:
opacity .3s ease,
transform .45s var(--sm-nav-ease),
visibility 0s linear .45s !important;
animation: none !important;
}
/* Invisible bridge across the gap, so the menu doesn't close on the way down */
.et-l--header .sm-nav .et-menu-nav > ul > li > ul.sub-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(-1 * var(--sm-nav-drop) - 4px);
height: calc(var(--sm-nav-drop) + 4px);
}
.et-l--header .sm-nav .et-menu-nav > ul > li:hover > ul.sub-menu,
.et-l--header .sm-nav .et-menu-nav > ul > li.et-hover > ul.sub-menu,
.et-l--header .sm-nav .et-menu-nav > ul > li:focus-within > ul.sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto;
transform: translateX(var(--sm-dd-x)) translateY(0);
transition:
opacity .3s ease,
transform .45s var(--sm-nav-ease),
visibility 0s linear 0s !important;
}
/* Normal dropdown items (Industries) */
.et-l--header .sm-nav .et-menu-nav > ul > li:not(.mega-menu) > ul.sub-menu {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 270px !important;
padding: 28px 32px !important;
}
.et-l--header .sm-nav .et-menu-nav > ul > li:not(.mega-menu) > ul.sub-menu li {
display: block;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.et-l--header .sm-nav .et-menu-nav > ul > li:not(.mega-menu) > ul.sub-menu a {
display: inline-block !important;
width: auto !important;
padding: 0 !important;
font-family: 'Archivo', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: var(--sm-nav-ink) !important;
opacity: 1 !important;
background: none !important;
transition: color .25s ease;
}
.et-l--header .sm-nav .et-menu-nav > ul > li:not(.mega-menu) > ul.sub-menu a:hover,
.et-l--header .sm-nav .et-menu-nav > ul > li:not(.mega-menu) > ul.sub-menu a:focus-visible {
color: var(--sm-nav-blue) !important;
}
/* ---------- Mega menu (Services) ---------- */
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu > ul.sub-menu {
--sm-dd-x: 0px;
/* spans the nav pill AND the Get In Touch pill */
left: -1px !important;
right: calc(-1px - var(--sm-cta-w) - var(--sm-nav-gap)) !important;
width: auto !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: clamp(36px, 3.6vw, 56px) 0 clamp(40px, 4vw, 64px) !important;
}
/* Columns */
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu > ul.sub-menu > li {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 clamp(28px, 3.8vw, 64px) !important;
border-left: 1px solid #e3e6ec;
opacity: 0;
transform: translateY(8px);
transition: opacity .4s ease, transform .5s var(--sm-nav-ease);
}
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu > ul.sub-menu > li:first-child { border-left: 0; }
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu:hover > ul.sub-menu > li,
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu.et-hover > ul.sub-menu > li,
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu:focus-within > ul.sub-menu > li {
opacity: 1;
transform: none;
}
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu > ul.sub-menu > li:nth-child(2) { transition-delay: .05s; }
.et-l--header .sm-nav .et-menu-nav > ul > li.mega-menu > ul.sub-menu > li:nth-child(3) { transition-delay: .1s; }
/* Column headings (Marketing / Advertising / Creative) */
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > a {
display: inline-block !important;
width: auto !important;
padding: 0 !important;
margin: 0 0 26px !important;
background: none !important;
font-family: 'Archivo', sans-serif !important;
font-size: clamp(24px, 2.1vw, 32px) !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: -.01em !important;
color: var(--sm-nav-ink) !important;
opacity: 1 !important;
transition: color .2s ease;
}
/* Headings are labels, not links (see sm-nav-mobile.html) */
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > a,
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > a:hover { color: var(--sm-nav-ink) !important; cursor: default; }
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > a::before { display: none !important; }
/* No Divi arrows inside the mega menu */
.et-l--header .sm-nav .et-menu-nav li.mega-menu li > a::after { display: none !important; }
/* Service lists under each heading (always visible inside the panel) */
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu {
position: static !important;
float: none !important; /* Divi floats the last column's list next to its heading */
left: auto !important;
right: auto !important;
display: flex !important;
flex-direction: column;
gap: 22px;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
animation: none !important;
}
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu li {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu a {
display: inline-block !important;
width: auto !important;
padding: 0 !important;
background: none !important;
font-family: 'Archivo', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: var(--sm-nav-ink) !important;
opacity: 1 !important;
transition: color .25s ease;
}
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu a:hover,
.et-l--header .sm-nav .et-menu-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu a:focus-visible {
color: var(--sm-nav-blue) !important;
}
/* ---------- Wipe underline on hover (same motion as .sm-btn-arrow) ----------
Draws in from the left on hover, exits to the right on mouse-out.
Stays on for the page you're on. */
.et-l--header .sm-nav .et-menu-nav ul.sub-menu a { position: relative !important; }
.et-l--header .sm-nav .et-menu-nav > ul > li > a::before,
.et-l--header .sm-nav .et-menu-nav ul.sub-menu a::before {
content: "" !important;
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
pointer-events: none;
transform: scaleX(0);
transform-origin: right center;
transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
.et-l--header .sm-nav .et-menu-nav > ul > li > a::before { bottom: -7px; }
/* under the word only, not the chevron */
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children > a::before { width: calc(100% - 1.2em); }
.et-l--header .sm-nav .et-menu-nav > ul > li:hover > a::before,
.et-l--header .sm-nav .et-menu-nav > ul > li.et-hover > a::before,
.et-l--header .sm-nav .et-menu-nav > ul > li:focus-within > a::before,
.et-l--header .sm-nav .et-menu-nav > ul > li.current-menu-item > a::before,
.et-l--header .sm-nav .et-menu-nav > ul > li.current-menu-ancestor > a::before,
.et-l--header .sm-nav .et-menu-nav ul.sub-menu a:hover::before,
.et-l--header .sm-nav .et-menu-nav ul.sub-menu a:focus-visible::before,
.et-l--header .sm-nav .et-menu-nav ul.sub-menu li.current-menu-item > a::before {
transform: scaleX(1);
transform-origin: left center;
}
.et-l--header .sm-nav .et-menu-nav ul.sub-menu li.current-menu-item > a { color: var(--sm-nav-blue) !important; }
/* "Get In Touch" item is for the mobile menu only */
.et-l--header .sm-nav .et-menu-nav li.sm-menu-cta { display: none !important; }
/* ---------- "Get In Touch" glass pill (Button module) ---------- */
.et-l--header .sm-header-row .et_pb_button_module_wrapper {
flex: 1 1 auto;
height: 100%;
margin: 0 !important;
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button {
--sm-cta-fill: var(--light-blue, #2EA3F2); /* curtain color on hover */
position: relative !important;
isolation: isolate; /* keeps the curtain behind the text */
overflow: hidden !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: .4em;
width: 100%;
height: 100%;
min-height: var(--sm-nav-height);
padding: 0 28px !important;
border: 0 !important;
border-radius: var(--sm-nav-radius) !important;
background: #fff !important;
color: var(--sm-nav-ink) !important;
font-family: 'Archivo', sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: color .45s var(--sm-nav-ease), min-height .45s var(--sm-nav-ease), box-shadow .45s ease !important;
}
/* The blue curtain: rises from the bottom on hover, exits through the top */
.et-l--header .sm-header .sm-nav-cta.et_pb_button::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
width: auto !important;
height: auto !important;
margin: 0 !important;
border-radius: inherit;
background: var(--sm-cta-fill) !important;
opacity: 1 !important;
transform: scaleY(0);
transform-origin: center top;
transition: transform .6s cubic-bezier(.76, 0, .24, 1) !important;
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button:hover::before,
.et-l--header .sm-header .sm-nav-cta.et_pb_button:focus-visible::before {
transform: scaleY(1);
transform-origin: center bottom;
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button::after {
content: "→" !important;
position: static !important;
display: inline-block !important;
margin: 0 !important;
font-family: 'Archivo', sans-serif !important;
font-size: 1em !important;
line-height: 1 !important;
color: inherit !important;
opacity: 1 !important;
transition: transform .45s var(--sm-nav-ease);
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button:hover,
.et-l--header .sm-header .sm-nav-cta.et_pb_button:focus-visible {
padding: 0 28px !important; /* stop Divi's hover padding shift */
background: #fff !important;
border: 0 !important;
color: #fff !important;
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button:hover::after { transform: translateX(4px); }
/* ---------- Divi 5 fixes (flex layout) ---------- */
.et-l--header .sm-nav.et_pb_menu .et_pb_menu_inner_container { flex: 1 1 auto !important; }
.et-l--header .sm-nav.et_pb_menu .et_pb_menu__wrap { flex: 1 1 auto !important; }
.et-l--header .sm-header-row .et_pb_button_module_wrapper { display: flex !important; }
.et-l--header .sm-header .sm-nav-cta.et_pb_button {
max-width: none !important;
flex-direction: row !important;
text-transform: none !important;
white-space: nowrap !important;
}
/* ---------- Overrides for older menu/button CSS on the site ---------- */
/* Divi adds a faint bottom border to dropdown links */
.et-l--header .sm-nav .et-menu-nav ul.sub-menu a {
border: 0 !important;
box-shadow: none !important;
}
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children > a::after {
top: auto !important;
transform: none !important;
}
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children:hover > a::after,
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children.et-hover > a::after,
.et-l--header .sm-nav .et-menu-nav > ul > li.menu-item-has-children:focus-within > a::after {
transform: rotate(180deg) !important;
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button::after {
top: auto !important;
transform: none !important;
}
.et-l--header .sm-header .sm-nav-cta.et_pb_button:hover::after { transform: translateX(4px) !important; }
/* ---------- Smaller desktops ---------- */
@media (max-width: 1200px) {
.et-l--header .sm-nav .et-menu-nav > ul > li > a { font-size: 15px !important; }
.et-l--header .sm-header .sm-nav-cta.et_pb_button { font-size: 17px !important; }
}
/* ---------- Tablet & phone (Divi switches to the hamburger at 980px) ---------- */
@media (max-width: 980px) {
:root { --sm-nav-height: 68px; }
html.sm-scrolled { --sm-nav-height: 60px; }
html.sm-scrolled .et-l--header .sm-header.et_pb_section { padding-top: 10px !important; }
.et-l--header .sm-header.et_pb_section { padding-top: 16px !important; }
.et-l--header .sm-header .sm-header-row { width: calc(100% - 32px) !important; }
.et-l--header .sm-header-row > .et_pb_column:first-child { width: 100% !important; }
.et-l--header .sm-header-row > .et_pb_column:last-child { display: none !important; } /* CTA moves into the menu */
.et-l--header .sm-nav.et_pb_menu { padding: 0 18px 0 22px !important; }
.et-l--header .sm-nav .et_pb_menu__logo img { height: 32px !important; }
/* Swap the desktop links for the hamburger */
.et-l--header .sm-nav .et_pb_menu__menu { display: none !important; }
.et-l--header .sm-nav .et_mobile_nav_menu {
display: flex !important;
align-items: center;
float: none;
margin: 0 !important;
}
.et-l--header .sm-nav .mobile_nav { position: static !important; }
/* Hamburger that turns into an X (replaces Divi's icon font) */
.et-l--header .sm-nav .mobile_menu_bar {
position: relative;
display: block;
width: 44px;
height: 44px;
border-radius: 12px;
cursor: pointer;
transition: background-color .25s ease;
}
.et-l--header .sm-nav .mobile_nav.opened .mobile_menu_bar { background: rgba(17, 19, 24, .06); }
.et-l--header .sm-nav .mobile_menu_bar::before,
.et-l--header .sm-nav .mobile_menu_bar::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 12px !important;
width: 20px;
height: 2px;
margin: 0 !important;
border-radius: 2px;
background: var(--sm-nav-ink);
font-size: 0 !important;
transition: transform .4s var(--sm-nav-ease);
}
.et-l--header .sm-nav .mobile_menu_bar::before { transform: translateY(-4px); }
.et-l--header .sm-nav .mobile_menu_bar::after { transform: translateY(4px); }
.et-l--header .sm-nav .mobile_nav.opened .mobile_menu_bar::before { transform: rotate(45deg); }
.et-l--header .sm-nav .mobile_nav.opened .mobile_menu_bar::after { transform: rotate(-45deg); }
.et-l--header .sm-nav .et_mobile_menu {
top: calc(100% + var(--sm-nav-drop)) !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding: 12px 16px 18px !important;
background: #fff !important;
border: 0 !important;
border-radius: var(--sm-nav-radius);
box-shadow: 0 30px 70px rgba(5, 10, 30, .3) !important;
}
.et-l--header .sm-nav .et_mobile_menu ul { padding: 0 !important; }
.et-l--header .sm-nav .et_mobile_menu li li { padding-left: 0 !important; }
.et-l--header .sm-nav .et_mobile_menu li { border: 0 !important; }
.et-l--header .sm-nav .et_mobile_menu > li:not(.sm-menu-cta) { border-bottom: 1px solid #eef0f4 !important; }
.et-l--header .sm-nav .et_mobile_menu li a {
display: block;
padding: 11px 6px !important;
border: 0 !important;
background: none !important;
font-family: 'Archivo', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: var(--sm-nav-ink) !important;
opacity: 1 !important;
}
/* Top-level items: Services, Industries, About, Case Studies */
.et-l--header .sm-nav .et_mobile_menu > li > a {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 18px 6px !important;
font-size: 19px !important;
font-weight: 600 !important;
transition: color .25s ease;
}
.et-l--header .sm-nav .et_mobile_menu > li.sm-open > a { color: var(--sm-nav-blue) !important; }
/* Chevron on items that expand */
.et-l--header .sm-nav .et_mobile_menu > li.menu-item-has-children > a::after {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .4s var(--sm-nav-ease);
}
.et-l--header .sm-nav .et_mobile_menu > li.sm-open > a::after { transform: rotate(180deg); }
/* Collapsed sub menus (only once sm-nav-mobile script is running) */
html.sm-nav-acc .et-l--header .sm-nav .et_mobile_menu > li.menu-item-has-children > ul.sub-menu {
display: block !important;
max-height: 0;
overflow: hidden;
transition: max-height .45s var(--sm-nav-ease);
}
.et-l--header .sm-nav .et_mobile_menu > li > ul.sub-menu > li:last-child { padding-bottom: 14px !important; }
/* Marketing / Advertising / Creative as small labels */
.et-l--header .sm-nav .et_mobile_menu li.mega-menu > ul > li > a {
padding: 16px 6px 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .1em;
text-transform: uppercase;
color: #8a909c !important;
}
.et-l--header .sm-nav .et_mobile_menu li.mega-menu > ul > li:first-child > a { padding-top: 4px !important; }
.et-l--header .sm-nav .et_mobile_menu li.mega-menu > ul > li > a { cursor: default; }
/* Override older mobile-menu CSS on the site */
.et-l--header .sm-nav .et_mobile_menu {
position: absolute !important;
height: auto !important;
bottom: auto !important;
overflow-y: auto !important;
}
.et-l--header .sm-nav .mobile_nav.opened .mobile_menu_bar {
position: relative !important;
top: auto !important;
right: auto !important;
z-index: auto !important;
}
.et-l--header .sm-nav .et_mobile_menu ul.sub-menu {
transform: none !important;
height: auto !important;
overflow: visible;
}
html.sm-nav-acc .et-l--header .sm-nav .et_mobile_menu > li.menu-item-has-children > ul.sub-menu {
overflow: hidden !important;
}
/* Open / close animation for the mobile panel */
.et-l--header .sm-nav .et_mobile_menu {
transform-origin: top center;
transition: opacity .3s ease, transform .4s var(--sm-nav-ease);
}
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu {
animation: smMenuIn .6s var(--sm-nav-ease) backwards;
}
.et-l--header .sm-nav .mobile_nav.closed .et_mobile_menu {
opacity: 0;
transform: translateY(-8px) scale(.98);
}
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li {
animation: smMenuItemIn .55s var(--sm-nav-ease) backwards;
}
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li:nth-child(1) { animation-delay: .10s; }
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li:nth-child(2) { animation-delay: .15s; }
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li:nth-child(3) { animation-delay: .20s; }
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li:nth-child(4) { animation-delay: .25s; }
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li:nth-child(5) { animation-delay: .30s; }
.et-l--header .sm-nav .mobile_nav.opened .et_mobile_menu > li:nth-child(n+6) { animation-delay: .35s; }
/* Get In Touch as a blue pill at the bottom */
.et-l--header .sm-nav .et_mobile_menu li.sm-menu-cta { display: block !important; }
.et-l--header .sm-nav .et_mobile_menu li.sm-menu-cta a {
display: block !important;
margin-top: 18px;
padding: 16px !important;
border-radius: 999px;
background: var(--sm-nav-blue) !important;
color: #fff !important;
font-weight: 600 !important;
text-align: center;
}
}
/* Mobile panel wipes down like a small curtain, then the items rise in */
@keyframes smMenuIn {
from { opacity: 0; clip-path: inset(0 0 100% 0 round var(--sm-nav-radius)); transform: translateY(-6px); }
to { opacity: 1; clip-path: inset(0 0 0 0 round var(--sm-nav-radius)); transform: none; }
}
@keyframes smMenuItemIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.et-l--header .sm-nav .et-menu-nav ul.sub-menu,
.et-l--header .sm-nav .et-menu-nav ul.sub-menu > li,
.et-l--header .sm-nav .et-menu-nav a,
.et-l--header .sm-nav .et-menu-nav a::after,
.et-l--header .sm-nav .et-menu-nav a::before,
.et-l--header .sm-nav .et_mobile_menu ul.sub-menu,
.et-l--header .sm-header .sm-nav-cta.et_pb_button::before,
.et-l--header .sm-header .sm-nav-cta.et_pb_button::after {
transition: none !important;
}
.et-l--header .sm-nav .et_mobile_menu,
.et-l--header .sm-nav .et_mobile_menu > li {
animation: none !important;
transition: none !important;
}
}
/* #########################################################################
16. ARROW TEXT BUTTON
######################################################################### */
/* =========================================================
SPIN MODERN — ARROW TEXT BUTTON ("Rev Up Your Growth ↗")
---------------------------------------------------------
Usage in Divi: add a Button module, then under
Advanced → CSS ID & Classes → CSS Class, enter: sm-btn-arrow
(Leave the module's own button styling at defaults; this
CSS overrides it.)
Also works on any plain link: Rev Up Your Growth
========================================================= */
.sm-btn-arrow,
.et_pb_button.sm-btn-arrow,
.sm-btn-arrow .et_pb_button {
--sm-btn-color: var(--light-blue, #007FFD); /* text + circle color (follows your :root blue) */
/* arrow color is set inside the SVG below (%230d0d0f = #0d0d0f) */
--sm-btn-size: 18px; /* text size */
--sm-btn-circle: 1.5em; /* circle size, relative to the text */
--sm-btn-gap: .45em; /* space between text and circle */
--sm-btn-line: 2px; /* underline thickness */
position: relative !important;
display: inline-flex !important;
align-items: center;
gap: var(--sm-btn-gap);
padding: 0 !important;
margin: 0;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(--sm-btn-color) !important;
font-family: 'Archivo', sans-serif !important;
font-size: var(--sm-btn-size) !important;
font-weight: 600 !important;
line-height: 1.1 !important;
letter-spacing: -.01em;
text-decoration: none !important;
cursor: pointer;
}
/* Underline that draws in from left to right on hover.
(This replaces Divi's default button icon, which also uses ::before.) */
.sm-btn-arrow::before,
.et_pb_button.sm-btn-arrow::before,
.sm-btn-arrow .et_pb_button::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
right: auto !important;
top: auto !important;
bottom: -.14em !important;
width: calc(100% - var(--sm-btn-gap) - var(--sm-btn-circle)) !important; /* under the text only */
height: var(--sm-btn-line) !important;
margin: 0 !important;
background: currentColor !important;
opacity: 1 !important;
transform: scaleX(0);
transform-origin: right center; /* on mouse-out it exits to the right */
transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
.sm-btn-arrow:hover::before,
.sm-btn-arrow:focus-visible::before,
.et_pb_button.sm-btn-arrow:hover::before,
.sm-btn-arrow .et_pb_button:hover::before,
.sm-btn-arrow .et_pb_button:focus-visible::before {
transform: scaleX(1);
transform-origin: left center; /* on hover it draws in from the left */
}
/* The circle with the arrow */
.sm-btn-arrow::after,
.et_pb_button.sm-btn-arrow::after,
.sm-btn-arrow .et_pb_button::after {
content: "" !important;
position: static !important;
display: inline-block !important;
flex: 0 0 auto;
width: var(--sm-btn-circle) !important;
height: var(--sm-btn-circle) !important;
margin: 0 !important;
border-radius: 50%;
/* arrow (dark) on a colored circle */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 15.5 15.5 8.5M10 8.5h5.5V14' fill='none' stroke='%230d0d0f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% 62% no-repeat,
var(--sm-btn-color) !important;
opacity: 1 !important;
font-size: inherit !important;
line-height: 1 !important;
transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* Hover: the arrow turns to point straight ahead and nudges forward,
following the line */
.sm-btn-arrow:hover::after,
.et_pb_button.sm-btn-arrow:hover::after,
.sm-btn-arrow .et_pb_button:hover::after {
transform: translateX(.18em) rotate(45deg);
}
.sm-btn-arrow:hover,
.et_pb_button.sm-btn-arrow:hover,
.sm-btn-arrow .et_pb_button:hover {
padding: 0 !important; /* stop Divi's hover padding shift */
background: none !important;
}
.sm-btn-arrow:focus-visible,
.sm-btn-arrow .et_pb_button:focus-visible {
outline: 2px solid var(--sm-btn-color);
outline-offset: 6px;
}
/* Smaller on phones */
@media (max-width: 767px) {
.sm-btn-arrow,
.et_pb_button.sm-btn-arrow,
.sm-btn-arrow .et_pb_button {
--sm-btn-size: 26px;
}
}
@media (prefers-reduced-motion: reduce) {
.sm-btn-arrow::before,
.sm-btn-arrow::after,
.sm-btn-arrow .et_pb_button::before,
.sm-btn-arrow .et_pb_button::after { transition: none; }
}
/* Text link without the arrow: sm-btn-arrow sm-btn-arrow--plain */
.sm-btn-arrow.sm-btn-arrow--plain::before,
.et_pb_button.sm-btn-arrow--plain::before,
.sm-btn-arrow--plain .et_pb_button::before {
width: 100% !important;
}
.sm-btn-arrow.sm-btn-arrow--plain::after,
.et_pb_button.sm-btn-arrow--plain::after,
.sm-btn-arrow--plain .et_pb_button::after {
display: none !important;
}
/* Phone link: sm-btn-arrow sm-btn-arrow--phone */
.sm-btn-arrow.sm-btn-arrow--phone,
.et_pb_button.sm-btn-arrow--phone,
.sm-btn-arrow--phone .et_pb_button {
--sm-btn-size: 30px;
--sm-btn-circle: 1.25em;
--sm-btn-gap: .4em;
}
.sm-btn-arrow.sm-btn-arrow--phone::after,
.et_pb_button.sm-btn-arrow--phone::after,
.sm-btn-arrow--phone .et_pb_button::after {
order: -1;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d0d0f' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 50% 50% no-repeat,
var(--sm-btn-color) !important;
}
.sm-btn-arrow.sm-btn-arrow--phone::before,
.et_pb_button.sm-btn-arrow--phone::before,
.sm-btn-arrow--phone .et_pb_button::before {
left: calc(var(--sm-btn-circle) + var(--sm-btn-gap)) !important;
}
.sm-btn-arrow.sm-btn-arrow--phone:hover::after,
.et_pb_button.sm-btn-arrow--phone:hover::after,
.sm-btn-arrow--phone .et_pb_button:hover::after {
animation: smPhoneRing .6s ease-in-out;
transform: none;
}
@keyframes smPhoneRing {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-14deg); }
40% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(4deg); }
}
@media (max-width: 767px) {
.sm-btn-arrow.sm-btn-arrow--phone,
.et_pb_button.sm-btn-arrow--phone,
.sm-btn-arrow--phone .et_pb_button { --sm-btn-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.sm-btn-arrow--phone:hover::after,
.sm-btn-arrow--phone .et_pb_button:hover::after { animation: none; }
}
/* #########################################################################
17. PILL BUTTONS
######################################################################### */
/* =========================================================================
SPIN MODERN — PILL BUTTONS WITH CURTAIN HOVER
-------------------------------------------------------------------------
Same motion as the "Get In Touch" header button: on hover a color
"curtain" rises from the bottom, and on mouse-out it carries on up
and exits through the top.
HOW TO USE (Divi)
Button module → Advanced → CSS ID & Classes → CSS Class, add:
sm-pill Blue button → white curtain, blue text
sm-pill sm-pill--outline White outline → white curtain, dark text (for dark sections)
sm-pill sm-pill--white White button → blue curtain, white text
sm-pill sm-pill--dark Dark outline → dark curtain, white text (for light sections)
sm-pill sm-pill--charcoal Solid charcoal → blue curtain, white text
Optional extras (add after the others):
sm-pill--arrow Adds a → after the text that nudges on hover
sm-pill--sm / sm-pill--lg Smaller / larger size
Example: "Get Your Free Audit" → sm-pill
"Explore Our Services" → sm-pill sm-pill--outline
Leave the Button module's own design settings at default; this CSS
overrides them. Also works on plain links: …
Uses your :root variables (--light-blue, --charcoal, --main-font),
so keep that :root block above this in your Custom CSS.
Paste into Divi → Theme Options → Custom CSS (below the nav CSS).
========================================================================= */
/* ---------- Colors and size for each style ---------- */
:is(.sm-pill) {
--sm-pill-bg: var(--light-blue); /* resting background */
--sm-pill-fg: #ffffff; /* resting text */
--sm-pill-border: var(--light-blue);
--sm-pill-fill: #ffffff; /* curtain color on hover */
--sm-pill-fill-fg: var(--light-blue); /* text color on hover */
--sm-pill-font-size: 18px;
--sm-pill-height: 56px;
--sm-pill-pad-x: 34px;
}
.sm-pill--outline {
--sm-pill-bg: transparent;
--sm-pill-fg: #ffffff;
--sm-pill-border: #ffffff;
--sm-pill-fill: #ffffff;
--sm-pill-fill-fg: var(--charcoal);
}
.sm-pill--white {
--sm-pill-bg: #ffffff;
--sm-pill-fg: var(--charcoal);
--sm-pill-border: #ffffff;
--sm-pill-fill: var(--light-blue);
--sm-pill-fill-fg: #ffffff;
}
.sm-pill--dark {
--sm-pill-bg: transparent;
--sm-pill-fg: var(--charcoal);
--sm-pill-border: var(--charcoal);
--sm-pill-fill: var(--charcoal);
--sm-pill-fill-fg: #ffffff;
}
.sm-pill--charcoal {
--sm-pill-bg: var(--charcoal);
--sm-pill-fg: #ffffff;
--sm-pill-border: var(--charcoal);
--sm-pill-fill: var(--light-blue); /* blue curtain on hover */
--sm-pill-fill-fg: #ffffff;
}
.sm-pill--sm { --sm-pill-font-size: 15px; --sm-pill-height: 46px; --sm-pill-pad-x: 24px; }
.sm-pill--lg { --sm-pill-font-size: 20px; --sm-pill-height: 64px; --sm-pill-pad-x: 40px; }
@media (max-width: 767px) {
.sm-pill:not(.sm-pill--sm):not(.sm-pill--lg) { --sm-pill-font-size: 16px; --sm-pill-height: 52px; --sm-pill-pad-x: 28px; }
.sm-pill--lg { --sm-pill-font-size: 18px; --sm-pill-height: 58px; --sm-pill-pad-x: 32px; }
}
/* ---------- The button ----------
The long selector is there to win over Divi's per-button styles. */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill),
html body :is(a.sm-pill, button.sm-pill) {
position: relative !important;
isolation: isolate; /* keeps the curtain behind the text */
overflow: hidden !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: .5em;
min-height: var(--sm-pill-height);
margin: 0;
padding: 0 var(--sm-pill-pad-x) !important;
border: 2px solid var(--sm-pill-border) !important;
border-radius: 999px !important;
background: var(--sm-pill-bg) !important;
color: var(--sm-pill-fg) !important;
font-family: var(--main-font) !important;
font-size: var(--sm-pill-font-size) !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition:
color .45s cubic-bezier(.22, 1, .36, 1),
border-color .45s cubic-bezier(.22, 1, .36, 1) !important;
}
/* The curtain */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill)::before,
html body :is(a.sm-pill, button.sm-pill)::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
width: auto !important;
height: auto !important;
margin: 0 !important;
border-radius: inherit;
background: var(--sm-pill-fill) !important;
opacity: 1 !important;
transform: scaleY(0);
transform-origin: center top; /* on mouse-out it exits through the top */
transition: transform .6s cubic-bezier(.76, 0, .24, 1) !important;
}
/* Hover */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill):is(:hover, :focus-visible),
html body :is(a.sm-pill, button.sm-pill):is(:hover, :focus-visible) {
padding: 0 var(--sm-pill-pad-x) !important; /* stop Divi's hover padding shift */
background: var(--sm-pill-bg) !important;
border-color: var(--sm-pill-fill) !important;
color: var(--sm-pill-fill-fg) !important;
}
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill):is(:hover, :focus-visible)::before,
html body :is(a.sm-pill, button.sm-pill):is(:hover, :focus-visible)::before {
transform: scaleY(1);
transform-origin: center bottom; /* rises from the bottom */
}
/* No Divi icon by default */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill)::after,
html body :is(a.sm-pill, button.sm-pill)::after {
display: none !important;
}
/* Optional arrow: sm-pill--arrow */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill).sm-pill--arrow::after,
html body :is(a.sm-pill, button.sm-pill).sm-pill--arrow::after {
content: "→" !important;
display: inline-block !important;
position: static !important;
margin: 0 !important;
font-family: var(--main-font) !important;
font-size: 1em !important;
line-height: 1 !important;
color: inherit !important;
opacity: 1 !important;
transform: none;
transition: transform .45s cubic-bezier(.22, 1, .36, 1) !important;
}
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill).sm-pill--arrow:is(:hover, :focus-visible)::after,
html body :is(a.sm-pill, button.sm-pill).sm-pill--arrow:is(:hover, :focus-visible)::after {
transform: translateX(4px);
}
/* Keyboard focus ring */
html body :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill):focus-visible {
outline: 2px solid var(--light-blue);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
html body :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill),
html body :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill)::before,
html body :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill)::after {
transition: none !important;
}
}
/* #########################################################################
18. SERVICE CARD HOVER
######################################################################### */
/* =========================================================================
SPIN MODERN — SERVICE CARD HOVER (Marketing / Advertising / Creative)
-------------------------------------------------------------------------
Adds hover effects to the service cards you built in Divi, without
changing your layout:
- the photo zooms in slowly
- a dark gradient keeps the text readable, and deepens on hover
- the card lifts slightly and its corners stay rounded
- the "Explore" arrow link draws its underline and turns its arrow
when you hover anywhere on the card (if it uses sm-btn-arrow)
HOW TO SET UP (Divi)
1. Row with the three cards → Advanced → CSS Class: sm-services
2. Each of the three Columns → Advanced → CSS Class: sm-service-card
3. Keep the photo as the Column's background image (Background → Image).
An Image module inside the column works too.
The gradient comes from this CSS, so turn off any Divi gradient on
the columns (Background → Gradient). Adjust it with --sm-card-shade.
4. Optional: make the whole card clickable with the Column's
Link setting (Content → Link → Column Link URL).
5. Paste this file into Divi → Theme Options → Custom CSS,
below sm-arrow-button.css. Save and clear the cache.
Speed: only transform and opacity animate, so it stays smooth.
========================================================================= */
.sm-services {
--sm-card-radius: 16px; /* corner rounding */
--sm-card-zoom: 1.07; /* how far the photo zooms */
--sm-card-ease: cubic-bezier(.22, 1, .36, 1); /* same settle as the reveals */
--sm-card-shade: .92; /* gradient strength before hover (0–1) */
--sm-card-tint: var(--light-blue, #007FFD); /* the blue the photo fades into */
}
/* The card */
.sm-services .sm-service-card {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--sm-card-radius);
transform: translateY(0);
transition: transform .7s var(--sm-card-ease), box-shadow .7s var(--sm-card-ease);
will-change: transform;
}
/* The photo: a copy of the column's own background that can zoom.
(It covers the original, so nothing else changes.) */
.sm-services .sm-service-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: inherit;
background-size: cover;
background-position: center;
border-radius: inherit;
transform: scale(1.001);
transition: transform 1.1s var(--sm-card-ease);
will-change: transform;
}
/* Divi parallax backgrounds and Image modules zoom the same way */
.sm-services .sm-service-card .et_parallax_bg,
.sm-services .sm-service-card .et_pb_image img {
transition: transform 1.1s var(--sm-card-ease);
will-change: transform;
}
.sm-services .sm-service-card .et_pb_image .et_pb_image_wrap { overflow: hidden; display: block; }
/* Blue gradient over the photo: a light navy tint at the top that fades
into solid --light-blue at the bottom, so the text stays readable.
It sits at --sm-card-shade normally and deepens to full on hover.
(No Divi gradient needed: turn off the column's Background → Gradient.) */
.sm-services .sm-service-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* fallback for older browsers (fixed #007FFD) */
background:
linear-gradient(to bottom, rgba(0, 127, 253, 0) 0%, rgba(0, 127, 253, .3) 40%, rgba(0, 127, 253, .78) 75%, rgba(0, 127, 253, .95) 100%),
linear-gradient(to bottom, rgba(13, 32, 64, .45) 0%, rgba(13, 32, 64, .35) 55%, rgba(13, 32, 64, .15) 100%);
/* follows your --light-blue variable */
background:
linear-gradient(to bottom,
color-mix(in srgb, var(--sm-card-tint) 0%, transparent) 0%,
color-mix(in srgb, var(--sm-card-tint) 30%, transparent) 40%,
color-mix(in srgb, var(--sm-card-tint) 78%, transparent) 75%,
color-mix(in srgb, var(--sm-card-tint) 95%, transparent) 100%),
linear-gradient(to bottom, rgba(13, 32, 64, .45) 0%, rgba(13, 32, 64, .35) 55%, rgba(13, 32, 64, .15) 100%);
opacity: var(--sm-card-shade);
transition: opacity .7s ease;
}
/* The arrow link is white on the blue (your sm-btn-arrow, recolored here only) */
.sm-services .sm-service-card .sm-btn-arrow,
.sm-services .sm-service-card .sm-btn-arrow .et_pb_button,
.sm-services .sm-service-card .et_pb_button.sm-btn-arrow {
--sm-btn-color: #fff;
}
/* ---------- Hover (and keyboard focus) ---------- */
@media (hover: hover) {
.sm-services .sm-service-card:hover,
.sm-services .sm-service-card:focus-within {
transform: translateY(-6px);
box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55);
}
.sm-services .sm-service-card:hover::before,
.sm-services .sm-service-card:focus-within::before,
.sm-services .sm-service-card:hover .et_parallax_bg,
.sm-services .sm-service-card:focus-within .et_parallax_bg,
.sm-services .sm-service-card:hover .et_pb_image img,
.sm-services .sm-service-card:focus-within .et_pb_image img {
transform: scale(var(--sm-card-zoom));
}
.sm-services .sm-service-card:hover::after,
.sm-services .sm-service-card:focus-within::after {
opacity: 1;
}
/* The arrow link reacts to hovering anywhere on the card */
.sm-services .sm-service-card:hover .sm-btn-arrow::before,
.sm-services .sm-service-card:hover .sm-btn-arrow .et_pb_button::before {
transform: scaleX(1);
transform-origin: left center;
}
.sm-services .sm-service-card:hover .sm-btn-arrow::after,
.sm-services .sm-service-card:hover .sm-btn-arrow .et_pb_button::after {
transform: translateX(.18em) rotate(45deg);
}
}
/* Visitors who turn off motion: no zoom or lift (phones have no hover, so they never get it) */
@media (prefers-reduced-motion: reduce) {
.sm-services .sm-service-card,
.sm-services .sm-service-card::before,
.sm-services .sm-service-card .et_parallax_bg,
.sm-services .sm-service-card .et_pb_image img {
transition: none !important;
transform: none !important;
}
}
/* ===== SPIN MODERN — FOOTER MARQUEE ===== */
.sm-marquee {
--sm-marquee-size: clamp(64px, 10.4vw, 200px);
--sm-marquee-speed: 45s; /* one full loop; bigger = slower */
--sm-marquee-gap: .45em;
--sm-marquee-color: #fff;
--sm-marquee-dot: var(--light-blue, #007FFD);
position: relative;
overflow: hidden;
width: 100%;
padding: .06em 0 .1em;
font-size: var(--sm-marquee-size);
user-select: none;
}
.sm-marquee__track {
display: flex;
width: max-content;
animation: smMarquee var(--sm-marquee-speed) linear infinite;
will-change: transform;
}
.sm-marquee__group {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: var(--sm-marquee-gap);
padding-right: var(--sm-marquee-gap);
margin: 0;
}
.sm-marquee .sm-marquee__text {
margin: 0;
padding: 0;
color: var(--sm-marquee-color);
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif !important;
font-size: 1em !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -.01em;
text-transform: uppercase;
white-space: nowrap;
}
/* blue dot between repeats (delete this rule for no dot) */
.sm-marquee__dot {
display: none;
}
@keyframes smMarquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 767px) {
.sm-marquee { --sm-marquee-speed: 26s; }
}
@media (prefers-reduced-motion: reduce) {
.sm-marquee__track { animation: none; }
}
/* =========================================================================
SPIN MODERN — FOOTER (Theme Builder → Global Footer)
-------------------------------------------------------------------------
Styles the footer from sm-footer-divi-layout.json:
row 1 the "SPIN MODERN AD AGENCY" marquee (needs sm-footer-marquee.css)
row 2 Address + Phone · Explore links · Say Hello form
row 3 logo · copyright links
Works on the layout file AND on a footer you built yourself: just add
these classes in Divi (Advanced → CSS ID & Classes → CSS Class).
Divi classes used:
Section sm-footer · Rows sm-footer__marquee-row / sm-footer__main /
sm-footer__bottom · Address text sm-footer__info · Explore text (a
bulleted list) sm-footer__explore · form module sm-footer__form (Divi
Contact Form or Gravity Forms) · logo image sm-footer__logo · copyright
text sm-footer__legal
Paste at the bottom of Custom-style.css, after sm-footer-marquee.css.
========================================================================= */
.sm-footer {
--sm-footer-bg: #13151a;
--sm-footer-line: #262a33;
--sm-footer-muted: var(--silver, #8FA3B4);
background: var(--sm-footer-bg) !important;
color: #fff;
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif;
padding: 28px 0 0 !important;
}
/* ---------- Row 1: marquee runs edge to edge ---------- */
.sm-footer .sm-footer__marquee-row {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
}
/* ---------- Row 2: three columns ---------- */
.sm-footer .sm-footer__main {
width: min(90%, 1180px) !important;
max-width: none !important;
padding: clamp(40px, 5vw, 70px) 0 clamp(36px, 4vw, 56px) !important;
}
.sm-footer :is(h2, h3, h4, h5, h6) {
margin: 0 0 .5em;
padding: 0;
color: #fff;
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif !important;
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
}
.sm-footer p,
.sm-footer li,
.sm-footer a {
color: #fff;
font-size: 18px;
line-height: 1.6;
}
.sm-footer p { padding: 0; margin: 0; }
.sm-footer .sm-footer__info p + :is(h2, h3, h4, h5, h6) { margin-top: 1.1em; }
.sm-footer .sm-footer__phone a,
.sm-footer .sm-footer__info a[href^="tel:"] {
font-size: clamp(22px, 1.9vw, 27px);
font-weight: 600;
letter-spacing: .01em;
}
/* Explore links: two columns, underline draws in on hover */
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 22px clamp(40px, 6vw, 110px);
margin: 0;
padding: 0 !important;
list-style: none !important;
}
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) li { padding: 0; margin: 0; list-style: none; }
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) li::before { display: none; }
.sm-footer a { text-decoration: none; }
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) a,
.sm-footer .sm-footer__legal a {
position: relative;
transition: color .25s ease;
}
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) a::after,
.sm-footer .sm-footer__legal a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: right center;
transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) a:hover,
.sm-footer .sm-footer__phone a:hover { color: var(--light-blue, #007FFD); }
.sm-footer :is(ul.sm-footer__links, .sm-footer__explore ul) a:hover::after,
.sm-footer .sm-footer__legal a:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
/* Any other link list in the main row (e.g. service lists): one clean column */
.sm-footer .sm-footer__main ul:not(.sm-footer__links):not(.sm-footer__explore ul) {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0 !important;
list-style: none !important;
}
.sm-footer .sm-footer__main ul:not(.sm-footer__links):not(.sm-footer__explore ul) li { padding: 0; margin: 0; list-style: none; }
.sm-footer .sm-footer__main ul:not(.sm-footer__links):not(.sm-footer__explore ul) a:hover { color: var(--light-blue, #007FFD); }
/* Social links in a row (text module with class sm-footer__social) */
.sm-footer .sm-footer__social :is(p, ul) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
gap: 10px 26px !important;
}
.sm-footer .sm-footer__social a:hover { color: var(--light-blue, #007FFD); }
/* ---------- Say Hello form (Divi Contact Form module) ---------- */
.sm-footer .sm-footer__form .et_pb_contact_form {
display: flex;
flex-wrap: wrap;
gap: 28px 28px;
margin: 0 !important;
}
.sm-footer .sm-footer__form .et_pb_contact_field {
flex: 1 1 100%;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.sm-footer .sm-footer__form .et_pb_contact_field_half { flex: 1 1 calc(50% - 14px); }
.sm-footer .sm-footer__form .et_pb_contact_form_label { display: none; }
.sm-footer .sm-footer__form input.input,
.sm-footer .sm-footer__form textarea.input {
width: 100%;
padding: 18px 28px !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff !important;
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif !important;
font-size: 17px !important;
transition: border-color .25s ease;
}
.sm-footer .sm-footer__form .input::placeholder { color: var(--sm-footer-muted); opacity: 1; }
.sm-footer .sm-footer__form .input:focus { border-color: var(--light-blue, #007FFD) !important; outline: none; }
.sm-footer .sm-footer__form .et_contact_bottom_container {
flex: 1 1 100%;
display: flex;
justify-content: flex-start;
margin: 0 !important;
padding: 0 !important;
}
/* Captcha ("3 + 9 =") sits on the same line as Submit */
.sm-footer .sm-footer__form .et_contact_bottom_container {
align-items: center;
flex-wrap: wrap;
gap: 18px 28px;
}
.sm-footer .sm-footer__form .et_pb_contact_right {
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sm-footer .sm-footer__form .et_pb_contact_right p {
display: flex;
align-items: center;
gap: 10px;
margin: 0 !important;
color: #fff;
font-size: 18px;
}
.sm-footer .sm-footer__form .et_pb_contact_captcha_question { color: #fff; font-weight: 600; }
.sm-footer .sm-footer__form input.input.et_pb_contact_captcha {
width: 64px !important;
padding: 12px 10px !important;
text-align: center;
}
/* Submit: blue pill with the same curtain hover as sm-pill */
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: .5em;
margin: 0 !important;
padding: 13px 30px !important;
border: 2px solid var(--light-blue, #007FFD) !important;
border-radius: 999px !important;
background: var(--light-blue, #007FFD) !important;
color: #fff !important;
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif !important;
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
transition: color .45s cubic-bezier(.22, 1, .36, 1) !important;
}
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
display: block !important;
margin: 0 !important;
border-radius: inherit;
background: #fff;
opacity: 1 !important;
transform: scaleY(0);
transform-origin: center top;
transition: transform .6s cubic-bezier(.76, 0, .24, 1) !important;
}
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button::after {
content: "→" !important;
position: static !important;
display: inline-block !important;
margin: 0 !important;
font-family: inherit !important;
font-size: 1em !important;
line-height: 1 !important;
opacity: 1 !important;
transition: transform .45s cubic-bezier(.22, 1, .36, 1) !important;
}
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button:hover {
padding: 13px 30px !important;
color: var(--light-blue, #007FFD) !important;
background: var(--light-blue, #007FFD) !important;
border-color: #fff !important;
}
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button:hover::before {
transform: scaleY(1);
transform-origin: center bottom;
}
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button:hover::after { transform: translateX(4px); }
.sm-footer .sm-footer__form .et-pb-contact-message { color: #fff; }
/* ---------- Say Hello form: Gravity Forms version ----------
Same look when the form is a Gravity Form (give its Code/Text module
or the Gravity Forms module the class sm-footer__form). */
.sm-footer .sm-footer__form .gform_wrapper { margin: 0 !important; padding: 0 !important; background: none !important; }
.sm-footer .sm-footer__form .gform_wrapper .gform_heading,
.sm-footer .sm-footer__form .gform_wrapper .gform_required_legend,
.sm-footer .sm-footer__form .gform_wrapper .gfield_description:not(.validation_message) { display: none !important; }
.sm-footer .sm-footer__form .gform_wrapper .gfield_label {
position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.sm-footer .sm-footer__form .gform_wrapper .gform_fields { column-gap: 28px !important; row-gap: 28px !important; }
.sm-footer .sm-footer__form .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
width: 100% !important;
padding: 18px 28px !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #fff !important;
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif !important;
font-size: 17px !important;
line-height: 1.2 !important;
transition: border-color .25s ease;
}
.sm-footer .sm-footer__form .gform_wrapper :is(input, textarea)::placeholder { color: var(--sm-footer-muted); opacity: 1; }
.sm-footer .sm-footer__form .gform_wrapper :is(input, textarea):focus { border-color: var(--light-blue, #007FFD) !important; outline: none !important; }
.sm-footer .sm-footer__form .gform_wrapper .gform_footer { margin: 28px 0 0 !important; padding: 0 !important; }
html body .sm-footer .sm-footer__form .gform_wrapper .gform_footer :is(button, input[type="submit"]) {
display: inline-flex;
align-items: center;
gap: .5em;
margin: 0 !important;
padding: 13px 30px !important;
border: 2px solid var(--light-blue, #007FFD) !important;
border-radius: 999px !important;
background: var(--light-blue, #007FFD) !important;
box-shadow: none !important;
color: #fff !important;
font-family: var(--main-font, "Archivo"), "Archivo", sans-serif !important;
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
cursor: pointer;
transition: background-color .45s cubic-bezier(.22, 1, .36, 1), color .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease !important;
}
html body .sm-footer .sm-footer__form .gform_wrapper .gform_footer :is(button, input[type="submit"]):hover {
background: #fff !important;
border-color: #fff !important;
color: var(--light-blue, #007FFD) !important;
}
/* ---------- Row 3: bottom bar ---------- */
.sm-footer .sm-footer__bottom {
position: relative;
width: min(90%, 1180px) !important;
max-width: none !important;
padding: 26px 0 30px !important;
align-items: center;
}
/* full-width line above the bottom bar */
.sm-footer .sm-footer__bottom::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 1px;
background: var(--sm-footer-line);
transform: translateX(-50%);
}
.sm-footer .sm-footer__logo img { display: block; width: auto; max-height: 34px; }
.sm-footer .sm-footer__legal p {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px clamp(18px, 3vw, 44px);
font-size: 18px;
font-weight: 500;
}
.sm-footer .sm-footer__legal span { color: #fff; }
/* ---------- Tablet & phone ---------- */
@media (max-width: 980px) {
.sm-footer .sm-footer__main .et_pb_column { margin-bottom: 44px !important; }
.sm-footer .sm-footer__main .et_pb_column:last-child { margin-bottom: 0 !important; }
.sm-footer .sm-footer__legal p { justify-content: flex-start; }
.sm-footer .sm-footer__logo { margin-bottom: 18px !important; }
}
@media (max-width: 767px) {
.sm-footer .sm-footer__form .et_pb_contact_field_half { flex-basis: 100%; }
.sm-footer p, .sm-footer li, .sm-footer a, .sm-footer .sm-footer__legal p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.sm-footer a::after,
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button,
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button::before,
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button::after { transition: none !important; }
}
/* =========================================================================
FOOTER FIXES (2026-10-09, from Khai's live screenshot)
========================================================================= */
/* 1. Wider content area, like the design (columns were squeezed to ~1070px) */
.sm-footer .sm-footer__main,
.sm-footer .sm-footer__bottom {
width: min(88%, 1460px) !important;
}
/* 2. Less empty space under the marquee */
.sm-footer .sm-footer__marquee-row .et_pb_module { margin-bottom: 0 !important; }
.sm-footer .sm-footer__main { padding-top: clamp(32px, 4vw, 64px) !important; }
/* 3. Same spacing between every module in a column (Divi 4 margins and Divi 5 gaps) */
.sm-footer .sm-footer__main .et_pb_column { --vertical-gap: 20px; }
.sm-footer .sm-footer__main .et_pb_column > .et_pb_module { margin-bottom: 20px !important; }
.sm-footer .sm-footer__main .et_pb_column > .et_pb_module:last-child { margin-bottom: 0 !important; }
/* 4. Explore links: two even columns that line up, works for a bulleted
list or a Divi Menu module with the class sm-footer__explore */
.sm-footer .sm-footer__explore :is(ul, ul.et-menu) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px 32px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.sm-footer .sm-footer__explore li {
float: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.sm-footer .sm-footer__explore li a {
display: inline-block;
padding: 0 !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #fff !important;
}
.sm-footer .sm-footer__explore li a:hover { color: var(--light-blue, #007FFD) !important; }
/* Divi Menu module: keep the links (not a hamburger) on every screen size */
.sm-footer .sm-footer__explore .et_pb_menu__wrap { justify-content: flex-start !important; margin: 0 !important; }
.sm-footer .sm-footer__explore .et_pb_menu__menu,
.sm-footer .sm-footer__explore .et-menu-nav { display: block !important; width: 100%; }
.sm-footer .sm-footer__explore .et_mobile_nav_menu { display: none !important; }
.sm-footer .sm-footer__explore.et_pb_menu { background: none !important; padding: 0 !important; }
/* 5. Form: every row the same width and the same gap, Cloudflare check
on its own row, button underneath */
.sm-footer .sm-footer__form :is(.cf-turnstile, .gfield--type-turnstile, .et_pb_contact_field--turnstile) {
flex: 1 1 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
.sm-footer .sm-footer__form .gform_wrapper .gform_fields { row-gap: 24px !important; column-gap: 24px !important; }
.sm-footer .sm-footer__form .et_pb_contact_form { gap: 24px !important; }
.sm-footer .sm-footer__form .gform_wrapper .gform_footer { margin-top: 24px !important; }
/* Phones: columns stack, Explore keeps two columns */
@media (max-width: 980px) {
.sm-footer .sm-footer__main,
.sm-footer .sm-footer__bottom { width: calc(100% - 40px) !important; }
}
/* =========================================================================
SPIN MODERN — NEEDLE ICON (replaces the arrows)
-------------------------------------------------------------------------
Swaps the arrow for the Spin Modern needle everywhere:
- sm-btn-arrow links needle inside the colored circle
- sm-pill--arrow buttons ring + dot + needle after the text (follows the text color)
- header "Get In Touch" needle after the text
- footer Submit needle after the text
Circle buttons: the needle pivots on the circle's center, top-left at
rest, 130° clockwise on hover. Text arrows swing level (24°) and nudge forward.
The phone link (sm-btn-arrow--phone) keeps its phone icon.
Paste at the very bottom of Custom-style.css, after all the button,
nav and footer CSS, so it wins over the old arrows.
========================================================================= */
:root {
/* the needle, dark (inside the colored circle) */
--sm-needle-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath d='M14.93 98.47 91.34 63.88' fill='none' stroke='%23231f20' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M62.74 48.37 83.46 67.45 84.12 95.6 129.4 46.64z' fill='%23231f20'/%3E%3C/svg%3E");
/* the needle as a stencil (takes the text color) */
--sm-needle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath d='M14.93 98.47 91.34 63.88' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M62.74 48.37 83.46 67.45 84.12 95.6 129.4 46.64z' fill='%23000'/%3E%3C/svg%3E");
--sm-needle-turn: 24deg; /* how far it swings to point straight ahead */
}
/* ---------- 1. sm-btn-arrow: needle in the circle ----------
Outline circle + small center dot + needle, all in --sm-btn-color.
The needle's tail sits on the center dot. At rest it points
top-left (35° above level); on hover it swings 130° clockwise around the
center to point right. */
:root {
--sm-needle-pivot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Ccircle cx='72' cy='72' r='68.5' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cg transform='translate(72 72) rotate(-20.64) scale(0.430) translate(-14.93 -98.47)'%3E%3Cpath d='M14.93 98.47 91.34 63.88' fill='none' stroke='%23000' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M62.74 48.37 83.46 67.45 84.12 95.6 129.4 46.64z'/%3E%3C/g%3E%3Ccircle cx='72' cy='72' r='10'/%3E%3C/svg%3E");
--sm-needle-circle: 1.8em; /* circle size (was 1.5em) */
--sm-needle-rest: -100deg; /* top-left, 35° above level */
--sm-needle-hover: 30deg; /* 130° clockwise from rest: right, 15° above level */
}
.sm-btn-arrow:not(.sm-btn-arrow--phone)::after,
.et_pb_button.sm-btn-arrow:not(.sm-btn-arrow--phone)::after,
.sm-btn-arrow .et_pb_button::after {
width: var(--sm-needle-circle) !important;
height: var(--sm-needle-circle) !important;
border-radius: 0;
background: var(--sm-btn-color) !important;
-webkit-mask: var(--sm-needle-pivot) center / contain no-repeat;
mask: var(--sm-needle-pivot) center / contain no-repeat;
transform: rotate(var(--sm-needle-rest));
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.sm-btn-arrow:not(.sm-btn-arrow--phone):is(:hover, :focus-visible)::after,
.et_pb_button.sm-btn-arrow:not(.sm-btn-arrow--phone):is(:hover, :focus-visible)::after,
.sm-btn-arrow .et_pb_button:is(:hover, :focus-visible)::after {
transform: rotate(var(--sm-needle-hover));
}
/* keep the wipe underline under the text only */
.sm-btn-arrow:not(.sm-btn-arrow--phone, .sm-btn-arrow--plain)::before,
.et_pb_button.sm-btn-arrow:not(.sm-btn-arrow--phone, .sm-btn-arrow--plain)::before,
.sm-btn-arrow .et_pb_button::before {
width: calc(100% - var(--sm-btn-gap) - var(--sm-needle-circle)) !important;
}
/* hovering a whole card (service cards, Industries, Case Studies) */
:is(.sm-service-card, .sm-industry, .sm-case) :is(.sm-btn-arrow:not(.sm-btn-arrow--phone), .sm-btn-arrow .et_pb_button)::after {
transform: rotate(var(--sm-needle-rest)) !important;
}
:is(.sm-service-card, .sm-industry, .sm-case):hover :is(.sm-btn-arrow:not(.sm-btn-arrow--phone), .sm-btn-arrow .et_pb_button)::after {
transform: rotate(var(--sm-needle-hover)) !important;
}
/* ---------- 2. Text arrows → needle (pills, header CTA, footer Submit) ---------- */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill).sm-pill--arrow::after,
html body :is(a.sm-pill, button.sm-pill).sm-pill--arrow::after,
.et-l--header .sm-header .sm-nav-cta.et_pb_button::after,
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button::after {
content: "" !important;
width: 1.15em !important;
height: 1.15em !important;
margin: -.1em 0 !important;
flex: 0 0 auto;
background: currentColor !important;
-webkit-mask: var(--sm-needle-mask) center / contain no-repeat;
mask: var(--sm-needle-mask) center / contain no-repeat;
}
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill).sm-pill--arrow:is(:hover, :focus-visible)::after,
html body :is(a.sm-pill, button.sm-pill).sm-pill--arrow:is(:hover, :focus-visible)::after,
.et-l--header .sm-header .sm-nav-cta.et_pb_button:hover::after,
html body #page-container .sm-footer .sm-footer__form .et_pb_contact_submit.et_pb_button:hover::after {
transform: translateX(4px) rotate(var(--sm-needle-turn)) !important;
}
/* ---------- 3. Pill buttons: ring + dot + needle (same as the circle links) ----------
Follows the pill's text color. Rests top-left, swings 130° clockwise on hover. */
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill).sm-pill--arrow::after,
html body :is(a.sm-pill, button.sm-pill).sm-pill--arrow::after {
width: 1.45em !important;
height: 1.45em !important;
margin: -.3em -.35em -.3em 0 !important;
-webkit-mask: var(--sm-needle-pivot) center / contain no-repeat;
mask: var(--sm-needle-pivot) center / contain no-repeat;
transform: rotate(var(--sm-needle-rest)) !important;
transition: transform .6s cubic-bezier(.22, 1, .36, 1), color .45s cubic-bezier(.22, 1, .36, 1) !important;
}
html body #page-container :is(.et_pb_button.sm-pill, a.sm-pill, button.sm-pill).sm-pill--arrow:is(:hover, :focus-visible)::after,
html body :is(a.sm-pill, button.sm-pill).sm-pill--arrow:is(:hover, :focus-visible)::after {
transform: rotate(var(--sm-needle-hover)) !important;
}
@media (prefers-reduced-motion: reduce) {
.sm-btn-arrow::after,
.sm-btn-arrow .et_pb_button::after { transition: none !important; }
}
/* =========================================================================
SPIN MODERN — BLOG PAGE ("The Modern Take")
-------------------------------------------------------------------------
Restyles the Divi Blog module into the Spin Modern card grid:
- newest post as a big featured card (page 1 only)
- the rest as cards in a 3-column grid (2 on tablets, 1 on phones)
- category tag, date, title, 2-line excerpt, "Read article" with the needle
- posts without a featured image show SEO.jpg as a placeholder photo
- hover: card lifts, photo zooms, needle swings (same as the buttons)
Only transform and opacity animate.
HOW TO SET UP (Divi page /blog/)
1. Hero section: CSS Class sm-blog-hero
Text module 1 (small label): sm-blog-hero__eyebrow e.g. "Insights"
Heading module: sm-blog-hero__title "The Modern Take"
Text module 2 (subtitle): sm-blog-hero__intro
2. Posts section: CSS Class sm-blog-section
Blog module → Advanced → CSS Class: sm-blog
Blog module → Content: Posts per page 10 (1 featured + 9)
Blog module → Design → Layout: Fullwidth (the CSS turns it into the grid,
and keeps the posts in date order)
Blog module → Elements: Featured Image ON, Excerpt ON, Read More ON,
Date ON, Categories ON, Author OFF, Comment count OFF,
Pagination ON
Blog module → Content → Excerpt length: 140
3. Paste this CSS at the bottom of Custom-style.css (after the needle CSS,
it uses --sm-needle-pivot / -rest / -hover from there).
========================================================================= */
.sm-blog,
.sm-blog-hero,
.sm-blog-section {
--sm-blog-bg: #f3f4f7;
--sm-blog-card: #ffffff;
--sm-blog-ink: var(--charcoal, #0F1620);
--sm-blog-muted: #5b6573;
--sm-blog-line: #e2e6ec;
--sm-blog-accent: var(--light-blue, #007FFD);
--sm-blog-radius: var(--card-radius, 18px);
--sm-blog-gap: clamp(20px, 2.2vw, 32px);
/* Photo for posts without a featured image. Swap the URL to change it,
or set it to none to show the blue Spin Modern needle placeholder
(that blue version also shows if the photo ever fails to load). */
--sm-blog-placeholder: url("https://spinmodern.com/wp-content/uploads/2026/10/SEO.jpg");
--sm-blog-placeholder-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144' fill='%23fff'%3E%3Ccircle cx='72' cy='72' r='68.5' fill='none' stroke='%23fff' stroke-width='7'/%3E%3Cg transform='translate(72 72) rotate(-20.64) scale(0.430) translate(-14.93 -98.47)'%3E%3Cpath d='M14.93 98.47 91.34 63.88' fill='none' stroke='%23fff' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M62.74 48.37 83.46 67.45 84.12 95.6 129.4 46.64z'/%3E%3C/g%3E%3Ccircle cx='72' cy='72' r='10'/%3E%3C/svg%3E");
}
/* ---------- Hero ---------- */
.sm-blog-hero {
background: var(--sm-blog-bg) !important;
padding: clamp(140px, 14vw, 210px) 0 clamp(40px, 5vw, 72px) !important;
}
/* Small blue label with a line in front. Works on a Text or Heading module,
and wins over colors set in the module's Design tab. */
html body .sm-blog-hero .sm-blog-hero__eyebrow {
display: flex !important;
align-items: center;
gap: .7em;
margin: 0 0 18px !important;
color: var(--sm-blog-accent) !important;
}
html body .sm-blog-hero .sm-blog-hero__eyebrow::before {
content: "";
flex: 0 0 28px;
height: 2px;
background: currentColor;
}
html body .sm-blog-hero .sm-blog-hero__eyebrow,
html body .sm-blog-hero .sm-blog-hero__eyebrow :is(.et_pb_text_inner, p, h1, h2, h3, h4, h5, h6, span, a) {
margin: 0 !important;
padding: 0 !important;
color: var(--sm-blog-accent) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
html body .sm-blog-hero .sm-blog-hero__eyebrow { margin-bottom: 18px !important; }
.sm-blog-hero .sm-blog-hero__title,
.sm-blog-hero .sm-blog-hero__title :is(h1, h2) {
margin: 0 !important;
padding: 0 !important;
color: var(--sm-blog-ink) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: clamp(52px, 8.4vw, 150px) !important;
font-weight: 700 !important;
line-height: .92 !important;
letter-spacing: -.035em;
text-transform: uppercase;
}
.sm-blog-hero .sm-blog-hero__intro,
.sm-blog-hero .sm-blog-hero__intro p {
max-width: 34ch;
margin: 24px 0 0 !important;
padding: 0 !important;
color: var(--sm-blog-muted) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: clamp(18px, 1.5vw, 22px) !important;
line-height: 1.45 !important;
}
/* ---------- Posts section ---------- */
.sm-blog-section {
background: var(--sm-blog-bg) !important;
padding: 0 0 clamp(80px, 9vw, 140px) !important;
}
/* The grid (Blog module in Fullwidth layout: the posts sit side by side in date order) */
.sm-blog .et_pb_ajax_pagination_container {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sm-blog-gap);
align-items: stretch;
}
.sm-blog .et_pb_ajax_pagination_container > :not(article) { grid-column: 1 / -1; }
/* ---------- Card ---------- */
.sm-blog article.et_pb_post {
position: relative;
display: flex !important;
flex-direction: column;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border: 1px solid var(--sm-blog-line) !important;
border-radius: var(--sm-blog-radius) !important;
background: var(--sm-blog-card) !important;
box-shadow: 0 1px 2px rgba(15, 22, 32, .04);
transition:
transform .55s cubic-bezier(.22, 1, .36, 1),
box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}
.sm-blog article.et_pb_post:is(:hover, :focus-within) {
transform: translateY(-6px);
box-shadow: 0 24px 48px -24px rgba(15, 22, 32, .28);
}
/* Photo */
.sm-blog .et_pb_post > :is(.et_pb_image_container, a.entry-featured-image-url) {
order: -1;
display: block;
margin: 0 !important;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--sm-blog-ink);
}
.sm-blog .et_pb_post .et_pb_image_container a.entry-featured-image-url { display: block; height: 100%; margin: 0 !important; }
.sm-blog .et_pb_post .entry-featured-image-url img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
transform: scale(1.001);
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.sm-blog .et_pb_post:is(:hover, :focus-within) .entry-featured-image-url img { transform: scale(1.06); }
/* Date + category line (sits above the title) */
.sm-blog .et_pb_post .post-meta {
order: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 0; /* column spacing comes from the tag's margin */
margin: 0 !important;
padding: 26px 28px 0 !important;
color: var(--sm-blog-muted) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: 0 !important; /* hides Divi's " | " separators */
line-height: 1 !important;
}
.sm-blog .et_pb_post .post-meta :is(.author, .comments-number) { display: none !important; }
.sm-blog .et_pb_post .post-meta .published {
order: 2;
font-size: 14px !important;
color: var(--sm-blog-muted) !important;
}
.sm-blog .et_pb_post .post-meta a[rel~="tag"] {
order: 1;
display: inline-flex;
align-items: center;
height: 28px;
margin-right: 12px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--sm-blog-accent) 35%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--sm-blog-accent) 7%, transparent);
color: var(--sm-blog-accent) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .06em;
text-transform: uppercase;
position: relative;
z-index: 2; /* stays clickable above the card link */
}
.sm-blog .et_pb_post .post-meta a[rel~="tag"] ~ a[rel~="tag"] { display: none; } /* first category only */
/* Title (its link covers the whole card, so the full card is clickable) */
.sm-blog .et_pb_post .entry-title {
order: 1;
margin: 0 !important;
padding: 16px 28px 0 !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: clamp(20px, 1.55vw, 24px) !important;
font-weight: 600 !important;
line-height: 1.22 !important;
letter-spacing: -.01em;
}
.sm-blog .et_pb_post .entry-title a {
color: var(--sm-blog-ink) !important;
text-decoration: none;
}
.sm-blog .et_pb_post .entry-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Excerpt + Read article */
.sm-blog .et_pb_post .post-content {
order: 2;
display: flex;
flex: 1;
flex-direction: column;
padding: 12px 28px 28px !important;
}
.sm-blog .et_pb_post .post-content-inner,
.sm-blog .et_pb_post .post-content > p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0 0 22px !important;
padding: 0 !important;
color: var(--sm-blog-muted) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: 16px !important;
line-height: 1.55 !important;
}
.sm-blog .et_pb_post .post-content-inner p { margin: 0 !important; padding: 0 !important; }
/* "Read more" → "Read article" with the needle */
.sm-blog .et_pb_post .more-link {
display: inline-flex !important;
align-items: center;
margin-top: auto !important;
align-self: flex-start;
color: var(--sm-blog-accent) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: 0 !important; /* hides "read more" */
font-weight: 600 !important;
text-decoration: none;
}
.sm-blog .et_pb_post .more-link::before {
content: "Read article";
font-size: 16px;
}
.sm-blog .et_pb_post .more-link::after {
content: "";
width: 27px;
height: 27px;
margin-left: 10px;
background: currentColor;
-webkit-mask: var(--sm-needle-pivot) center / contain no-repeat;
mask: var(--sm-needle-pivot) center / contain no-repeat;
transform: rotate(var(--sm-needle-rest, -100deg));
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.sm-blog .et_pb_post:is(:hover, :focus-within) .more-link::after {
transform: rotate(var(--sm-needle-hover, 30deg));
}
/* ---------- Placeholder for posts without a featured image ---------- */
.sm-blog article.et_pb_post:not(:has(> .entry-featured-image-url, > .et_pb_image_container))::before {
content: "";
order: -1;
display: block;
aspect-ratio: 16 / 10;
background:
var(--sm-blog-placeholder) center / cover no-repeat,
var(--sm-blog-placeholder-mark) center / 22% no-repeat,
radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--sm-blog-accent) 70%, transparent), transparent 55%),
linear-gradient(135deg, var(--sm-blog-ink) 0%, var(--deep-navy, #0D2040) 55%, var(--sm-blog-accent) 130%);
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type:not(:has(> .entry-featured-image-url, > .et_pb_image_container))::before {
grid-area: img;
aspect-ratio: auto;
min-height: 460px;
background-size: cover, 16%, auto, auto;
}
/* ---------- Featured: the newest post on page 1 ---------- */
body:not(.paged) .sm-blog article.et_pb_post:first-of-type {
grid-column: 1 / -1;
display: grid !important;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
grid-template-areas:
"img meta"
"img title"
"img body";
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type > :is(.et_pb_image_container, a.entry-featured-image-url) {
grid-area: img;
aspect-ratio: auto;
min-height: 460px;
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type .post-meta {
grid-area: meta;
padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 !important;
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type .entry-title {
grid-area: title;
padding: 22px clamp(28px, 4vw, 56px) 0 !important;
font-size: clamp(28px, 2.8vw, 44px) !important;
line-height: 1.1 !important;
letter-spacing: -.02em;
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type .post-content {
grid-area: body;
padding: 18px clamp(28px, 4vw, 56px) clamp(32px, 4vw, 56px) !important;
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type :is(.post-content-inner, .post-content > p) {
-webkit-line-clamp: 4;
font-size: 18px !important;
}
/* ---------- Pagination (Older / Newer entries) ---------- */
.sm-blog .pagination {
display: flex !important;
justify-content: center;
gap: 16px;
margin-top: clamp(16px, 2vw, 32px);
padding: 0 !important;
}
.sm-blog .pagination::after { display: none !important; }
.sm-blog .pagination :is(.alignleft, .alignright) { float: none !important; }
.sm-blog .pagination a {
display: inline-flex;
align-items: center;
height: 52px;
padding: 0 28px;
border: 2px solid var(--sm-blog-ink);
border-radius: 999px;
color: var(--sm-blog-ink) !important;
font-family: var(--main-font), "Archivo", sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
transition: background-color .35s ease, color .35s ease;
}
.sm-blog .pagination a:is(:hover, :focus-visible) {
background: var(--sm-blog-ink);
color: #fff !important;
}
/* ---------- Tablets and phones ---------- */
@media (max-width: 980px) {
.sm-blog .et_pb_ajax_pagination_container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.paged) .sm-blog article.et_pb_post:first-of-type {
grid-template-columns: 1fr;
grid-template-areas: "img" "meta" "title" "body";
}
body:not(.paged) .sm-blog article.et_pb_post:first-of-type > :is(.et_pb_image_container, a.entry-featured-image-url),
body:not(.paged) .sm-blog article.et_pb_post:first-of-type::before {
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
}
}
@media (max-width: 767px) {
.sm-blog .et_pb_ajax_pagination_container { grid-template-columns: 1fr; }
.sm-blog .et_pb_post :is(.post-meta) { padding: 22px 22px 0 !important; }
.sm-blog .et_pb_post .entry-title { padding: 14px 22px 0 !important; }
.sm-blog .et_pb_post .post-content { padding: 10px 22px 24px !important; }
body:not(.paged) .sm-blog article.et_pb_post:first-of-type .post-meta { padding: 24px 22px 0 !important; }
body:not(.paged) .sm-blog article.et_pb_post:first-of-type .entry-title { padding: 16px 22px 0 !important; }
body:not(.paged) .sm-blog article.et_pb_post:first-of-type .post-content { padding: 12px 22px 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
.sm-blog article.et_pb_post,
.sm-blog .et_pb_post .entry-featured-image-url img,
.sm-blog .et_pb_post .more-link::after { transition: none !important; }
.sm-blog article.et_pb_post:is(:hover, :focus-within) { transform: none; }
}