.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.contact-template * { box-sizing: border-box; }
.contact-template img { max-width: 100%; height: auto; }
.contact-template a { text-decoration: none; color: inherit; }
/* FluentForm overrides */
.contact-template .fluentform .ff-el-input--label label {
font-family: 'Manrope', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #3e4944 !important;
}
.contact-template .fluentform input[type="text"],
.contact-template .fluentform input[type="email"],
.contact-template .fluentform input[type="tel"],
.contact-template .fluentform textarea,
.contact-template .fluentform select {
border: 1.5px solid #e0e7e5 !important;
border-radius: 14px !important;
padding: 14px 18px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 15px !important;
background: #f9fcfb !important;
transition: all 0.25s !important;
}
.contact-template .fluentform input:focus,
.contact-template .fluentform textarea:focus {
border-color: #8bbcc2 !important;
box-shadow: 0 0 0 3px rgba(0,155,133,0.1) !important;
background: #fff !important;
}
.contact-template .fluentform .ff_submit_btn_wrapper button,
.contact-template .fluentform .ff-btn-submit {
background: linear-gradient(135deg, #8bbcc2, #b5d5d9) !important;
color: #fff !important;
border: none !important;
border-radius: 14px !important;
padding: 16px 32px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.3s !important;
box-shadow: 0 4px 16px rgba(0,155,133,0.2) !important;
}
.contact-template .fluentform .ff_submit_btn_wrapper button:hover,
.contact-template .fluentform .ff-btn-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(0,155,133,0.3) !important;
}
@media (max-width: 1024px) {
/* Shell: 8px above the island, nothing below it. 8 + 56 = 64px, which is
exactly the max-height ak-mobile-polish.php caps the header at, so the
island no longer overflows its own shell. */
html body header.elementor-location-header,
html body header#site-header,
html body .ts-header {
padding: 8px 10px 0 !important;
}
/* One 40px row — logo · account · burger — 8px apart. Dropping the row
from 48px to 40px is the whole height saving: the island's 7px
vertical padding and 1px border are left alone, so 40 + 14 + 2 = 56. */
html body header.elementor-location-header .e-con-inner {
gap: 8px !important;
}
html body header.elementor-location-header nav.ts-nav-menu,
html body header.elementor-location-header ul.ts-nav,
html body header.elementor-location-header li.ts-mobile-menu,
html body header.elementor-location-header .ts-mobile-menu .ts-item-link {
height: 40px !important;
min-height: 40px !important;
}
/* post-2270.css ships the nav item with `margin: 0 8px` and the account
dropdown with `margin-left: 8px`; the 8px rhythm is the flex gap's job
now, so each control is exactly 40px wide with nothing added. */
html body header.elementor-location-header .ts-mobile-menu .ts-item-link {
margin: 0 !important;
}
html body header.elementor-location-header .ak-account-dd {
margin-left: 0 !important;
}
/* header-premium-style.php paints `.ts-mobile-menu` white for the stock
Voxel slide-out; that class is also on the , which printed a white
square behind the round burger. The drawer (ak-mobile-menu.php)
replaced that popup, so the needs no surface of its own — and at
40px the square is exactly the size of the button it sits behind. */
html body header.elementor-location-header li.ts-mobile-menu {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Logo: 24px tall (was 26px on phones, 30px at 768–1024), capped at
28px so no other rule can grow it back. Same image as desktop —
scaled, not swapped. */
html body header.elementor-location-header .elementor-widget-image img,
html body header.elementor-location-header.header-scrolled .elementor-widget-image img {
height: 24px !important;
max-height: 28px !important;
width: auto !important;
}
/* Account: an icon-only 40×40 circle at every width up to the
breakpoint. ak-header-account-dropdown.php only does this ≤767px, so
768–1024 still showed a 66px icon+caret capsule next to a 40px
burger. */
html body header.elementor-location-header .ak-account-dd .ak-account-trigger {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
justify-content: center !important;
}
html body header.elementor-location-header .ak-account-dd .ak-account-caret {
display: none !important;
}
/* header-premium-style.php shrinks the island to 4px padding once the
page is scrolled past 24px. At this size the island is already
compact, and a 6px shrink mid-scroll just shifts the page under the
reader's thumb — so the scrolled state keeps the same box. */
html body header.elementor-location-header.header-scrolled > .elementor-element.e-con-boxed {
padding: 7px 12px 7px 18px !important;
}
html body header.elementor-location-header > .elementor-element.e-con-boxed {
padding: 7px 12px 7px 18px !important;
}
}
/* Heroes that pull up under the header. At ≤860px each template already
uses -64px, which is still exactly the shell height, so nothing to do
there. Between 861px and the breakpoint they keep their desktop -72px,
which was 4px deeper than the old 68px shell and would now be 8px
deeper than the 64px one — so here they pull up by exactly 64px and
the hero top sits flush with the page top. */
@media (min-width: 861px) and (max-width: 1024px) {
html body .akhc-hero,
html body .akps-hero,
html body .akfs-hero,
html body .akgl-hero,
html body .akab-hero,
html body .akfs-top {
margin-top: -64px;
}
}
.ak-map-host .ts-map-defer,.akev-map .ts-map-defer{display:block;width:100%;height:100%}.ts-map-defer,.akfs-map{position:relative}.ak-mapgate{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background-color:#eef3f2;background-image:radial-gradient(#B5D5D9 1.3px,transparent 1.7px);background-size:18px 18px}.ak-mapgate .ak-mapgate-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:12px 22px;min-height:44px;border:1.5px solid rgba(11,19,36,.12);border-radius:9999px;background:#fff;color:#0B1324;font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;font-size:14px;font-weight:800;line-height:1;letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:0 4px 16px rgba(11,19,36,.10);transition:border-color .16s ease,color .16s ease,transform .16s ease}.ak-mapgate .ak-mapgate-btn .ak-ico{width:18px;height:18px;flex:0 0 18px;color:#2A7780}.ak-mapgate .ak-mapgate-btn:hover{border-color:#2A7780;background:#fff;color:#2A7780;transform:translateY(-1px)}.ak-mapgate .ak-mapgate-btn:focus-visible{outline:3px solid #2A7780;outline-offset:3px}.ak-mapgate .ak-mapgate-sub{margin:0;padding:0 8px;border-radius:9999px;background:rgba(238,243,242,.85);font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;font-size:12.5px;font-weight:600;line-height:1.5;color:#56635e}.ak-mapgate.is-loading .ak-mapgate-btn{cursor:progress;opacity:.75;transform:none}@media (prefers-reduced-motion:reduce){.ak-mapgate .ak-mapgate-btn{transition:none}.ak-mapgate .ak-mapgate-btn:hover{transform:none}}
/* every H1: the logo's Fredoka. High specificity + !important to beat the
per-template Plus Jakarta Sans H1 rules (incl. inline + body-injected). */
/* Specificity-proof: templates set their H1 font with a CLASS selector +
!important (e.g. `.ak-guide-single-title`), which outranks a plain
`html body h1 !important`. Enumerating every class meant every NEW template
silently fell back to Plus Jakarta Sans (the guides single page did).
These attribute-selector forms out-specify any single/double class rule
without needing to know the class name. */
html body h1,
html body h1[class],
html body h1[style],
html body [class] h1,
html body [class] [class] h1,
html body [class] [class] [class] h1,
html body h1.elementor-heading-title,
html body h1.akh-h1,
html body h1.akb-h1,
html body h1.akev-h1,
html body h1.akp-h1,
html body .akd-hero h1,
html body .ak-guides-hero h1,
html body .blog-custom-template h1,
html body [data-id="32db6b7"] .elementor-heading-title,
html body [data-id="f74d5c0"] .elementor-heading-title {
font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
letter-spacing: -0.01em !important;
}
picture.ak-webp{display:contents}.akpv-link>picture.ak-webp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.ts-preview.akpv:hover .akpv-link>picture.ak-webp>img{transform:scale(1.05)}.akpa-pop .ts-preview.akpv:hover .akpv-link>picture.ak-webp>img,.akhc-pop .ts-preview.akpv:hover .akpv-link>picture.ak-webp>img{transform:none}@media (prefers-reduced-motion:reduce){.akpv-link>picture.ak-webp>img{transition:none!important}}
@media (max-width: 1024px) {
.contact-template [style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
.contact-template [style*="grid-template-columns: repeat(3"] {
grid-template-columns: 1fr !important;
}
.contact-template .ak-faq-grid {
grid-template-columns: 1fr !important;
}
}
.ak-footer { background: #0B1324; color: #cfd8dc; font-family: 'Plus Jakarta Sans','Manrope',system-ui,sans-serif; margin-top: 0; }
.ak-footer * { box-sizing: border-box; }
.ak-footer a { color: #cfd8dc; text-decoration: none; transition: color .15s; }
.ak-footer a:hover { color: #7AB0B5; }
.ak-footer-inner { max-width: 1200px; margin: 0 auto; padding: 56px 24px 0; }
.ak-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 0.8fr; gap: 36px; padding-bottom: 40px; }
.ak-footer-brand .ak-f-logo img { width: 230px; max-width: 100%; height: auto; display: block; filter: brightness(1.18) drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.ak-footer-brand p { font-size: 14px; line-height: 1.65; color: #9fb0b5; margin: 12px 0 18px; max-width: 300px; }
.ak-f-social { display: flex; gap: 10px; }
.ak-f-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.ak-f-social a:hover { background: #7AB0B5; border-color: #7AB0B5; }
.ak-f-social svg { width: 17px; height: 17px; fill: #fff; }
.ak-f-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #7AB0B5; margin: 4px 0 16px; }
.ak-f-col ul { list-style: none; margin: 0; padding: 0; }
.ak-f-col li { margin: 0 0 11px; font-size: 14.5px; }
.ak-f-col li a { display: inline-flex; align-items: center; gap: 7px; }
.ak-f-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(240,144,144,.18); color: #F09090; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }
.ak-f-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; background: linear-gradient(120deg, rgba(122,176,181,.16), rgba(240,144,144,.12)); border: 1px solid rgba(255,255,255,.10); margin-bottom: 40px; }
.ak-f-cta-txt strong { display: block; color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.ak-f-cta-txt span { font-size: 13.5px; color: #9fb0b5; }
.ak-f-cta a.ak-f-btn { flex-shrink: 0; padding: 13px 26px; border-radius: 999px; background: #ffffff; color: #0B1324 !important; font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 14px rgba(0,0,0,.30); }
.ak-f-cta a.ak-f-btn:hover { background: #7AB0B5; color: #0B1324 !important; transform: translateY(-1px); }
/* D1: the inline form inside the dark footer band. */
.ak-f-cta-form { align-items: flex-start; }
.ak-f-cta-form .ak-f-cta-txt { flex: 1 1 320px; }
.ak-f-nl { flex: 0 1 340px; min-width: 260px; max-width: 100%; }
.ak-f-nl .ak-nl-ff input[type=text], .ak-f-nl .ak-nl-ff input[type=email] { border-color: rgba(255,255,255,.28) !important; }
.ak-f-nl-fine { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #8b9ba0; }
@media (max-width: 700px) { .ak-f-nl { flex-basis: 100%; } }
.ak-footer-bottom { border-top: 1px solid rgba(255,255,255,.10); padding: 20px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #8b9ba0; }
.ak-footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ak-footer-bottom nav a { color: #8b9ba0; }
.ak-footer-bottom nav a:hover { color: #fff; }
/* Affiliate disclosure — must sit with the legal line, never as a footnote
* nobody reads. Same muted colour as the copyright so it reads as fine
* print, not as a claim. */
.ak-f-affil a { color: #75868b; text-decoration: underline; }
.ak-f-affil { display: block; width: 100%; font-size: 12px; line-height: 1.6; color: #75868b; margin: 4px 0 0; }
@media (max-width: 1100px) { .ak-footer-grid { grid-template-columns: 1fr 1fr 1fr; } .ak-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ak-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) {
.ak-footer-grid { grid-template-columns: 1fr; gap: 26px; }
.ak-footer-inner { padding-top: 42px; }
.ak-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* belt & braces: never show the retired Elementor footer template */
.elementor-2269 { display: none !important; }
/* Newsletter sign-up (FluentForm 5) — shared across the single templates.
!important throughout: Tailwind's forms reset and Voxel both style bare inputs. */
.ak-nl-ff { --aknl-accent: #368d96; --aknl-accent-hover: #2a7780; --aknl-ink: #fff; --aknl-radius: 10px; --aknl-field: #f8fafb; }
.ak-nl-ff .ff-el-group { margin: 0 0 10px !important; }
.ak-nl-ff .ff-el-input--label { display: none !important; } /* placeholders carry the labels */
.ak-nl-ff input[type=text], .ak-nl-ff input[type=email] {
width: 100% !important; height: 44px !important;
padding: 10px 14px !important; box-sizing: border-box !important;
border: 1.5px solid #d6e4e6 !important; border-radius: var(--aknl-radius) !important;
background: var(--aknl-field) !important; color: #0b1324 !important;
font: 600 14px/1.4 Manrope, sans-serif !important;
-webkit-appearance: none !important; appearance: none !important;
}
.ak-nl-ff input[type=text]:focus, .ak-nl-ff input[type=email]:focus {
outline: none !important; border-color: var(--aknl-accent) !important; background: #fff !important;
}
.ak-nl-ff input::placeholder { color: #6e7a74 !important; font-weight: 500 !important; opacity: 1 !important; }
/* Every field row full width. A sidebar is ~300px, so the first/last name pair
stacks instead of sharing a row — side by side both placeholders truncate.
(Selectors are FluentForm's current ff-t-* grid, not the legacy ff_columns
ones the places sidebar block still names.) */
.ak-nl-ff .ff-el-group,
.ak-nl-ff .ff-t-container,
.ak-nl-ff .ff-t-cell {
width: 100% !important; max-width: 100% !important;
flex: 1 1 100% !important;
padding-left: 0 !important; padding-right: 0 !important;
}
.ak-nl-ff .ff-name-field-wrapper > .ff-t-container { display: block !important; }
.ak-nl-ff .ff-name-field-wrapper .ff-t-cell { display: block !important; width: 100% !important; }
.ak-nl-ff .ff_name_middle, .ak-nl-ff .ff-name-middle { display: none !important; }
.ak-nl-ff .ff-el-input--content input { width: 100% !important; box-sizing: border-box !important; }
.ak-nl-ff button[type=submit], .ak-nl-ff .ff-btn-submit {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important; height: 46px !important; padding: 0 16px !important;
background: var(--aknl-accent) !important; background-image: none !important;
color: var(--aknl-ink) !important; border: 0 !important; border-radius: var(--aknl-radius) !important;
font: 700 14px/1 'Plus Jakarta Sans', sans-serif !important;
-webkit-appearance: none !important; appearance: none !important;
text-transform: none !important;
transition: background .15s, color .15s, transform .1s !important; cursor: pointer !important;
margin-top: 4px !important;
}
.ak-nl-ff button[type=submit]:hover, .ak-nl-ff .ff-btn-submit:hover {
background: var(--aknl-accent-hover) !important;
color: var(--aknl-ink-hover, var(--aknl-ink)) !important;
transform: translateY(-1px) !important;
}
.ak-nl-ff .ff-message-success {
background: #f0fdf4 !important; color: #166534 !important;
padding: 10px 14px !important; border-radius: 8px !important;
font-size: 13px !important; font-weight: 600 !important;
border: 1px solid #bbf7d0 !important; margin-top: 10px !important;
}
.ak-nl-ff .ff-el-is-error input { border-color: #ef4444 !important; }
.ak-nl-ff .text-danger, .ak-nl-ff .error-text { font-size: 12px !important; }
form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit { background-color:rgba(255, 107, 107, 1);border-color:rgba(255, 107, 107, 1);color:#ffffff; }form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit:hover { background-color:#ffffff;border-color:#409EFF;color:#409EFF; }
/* Hidden by default — JS moves it into the header, then unhides */
.ak-account-dd { display: none; }
.ak-account-dd.ak-mounted { display: inline-block; }
body.logged-in .ak-account-dd { display: none !important; }
/* Hide Voxel's default logged-out trio in the user bar so our single
icon stands alone. Show again for logged-in users. */
body:not(.logged-in) .elementor-widget-ts-user-bar .ts-user-area .ts-comp-actions { display: none !important; }
/* Hide the stand-alone "Sign Up" Elementor button widget in the header
(element 95df272) — our dropdown now owns the signup CTA. Permanent;
another rule already hides it for logged-in users. */
.elementor-element-95df272 { display: none !important; }
.ak-account-dd { position: relative !important; margin-left: 8px !important; }
.ak-account-dd .ak-account-trigger {
display: inline-flex !important; align-items: center !important; gap: 4px !important;
width: auto !important; min-width: 0 !important; height: 40px !important;
padding: 0 10px 0 12px !important;
background: transparent !important;
border: 1px solid rgba(54, 141, 150, 0.2) !important;
border-radius: 999px !important;
color: #368d96 !important; cursor: pointer !important;
box-shadow: none !important; outline: none !important;
font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.ak-account-dd .ak-account-trigger:hover,
.ak-account-dd .ak-account-trigger:focus {
background: rgba(181, 213, 217, 0.18) !important;
border-color: #368d96 !important;
box-shadow: 0 4px 12px rgba(54, 141, 150, 0.12) !important;
}
.ak-account-dd .ak-account-icon { width: 22px !important; height: 22px !important; color: #368d96 !important; }
.ak-account-dd .ak-account-caret { width: 16px !important; height: 16px !important; color: #6e7a74 !important; transition: transform 0.2s ease !important; }
.ak-account-dd[data-open="true"] .ak-account-caret { transform: rotate(180deg) !important; color: #368d96 !important; }
.ak-account-menu {
position: absolute; top: calc(100% + 10px); right: 0;
width: 300px;
background: #fff; border-radius: 14px;
box-shadow: 0 20px 48px rgba(11, 19, 36, 0.18), 0 0 0 1px rgba(181, 213, 217, 0.40);
padding: 8px; z-index: 10000;
opacity: 0; transform: translateY(-8px); pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.ak-account-dd[data-open="true"] .ak-account-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ak-account-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px;
text-decoration: none; color: #0b1324;
font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 14px; font-weight: 600;
transition: background 0.15s ease;
}
.ak-account-item:hover { background: #f4fafb; }
.ak-account-item .ak-ico { width: 20px; height: 20px; color: #6e7a74; flex-shrink: 0; }
/* "List Your Business" handshake — brand turquoise, not orange */
.ak-account-item-icon-orange { color: #368d96 !important; }
.ak-account-item-title { font-size: 14px; font-weight: 700; color: #0b1324; line-height: 1.2; }
.ak-account-item-sub { font-size: 12px; color: #6e7a74; font-weight: 500; margin-top: 2px; }
.ak-account-divider { height: 1px; background: rgba(181, 213, 217, 0.40); margin: 8px 4px; }
.ak-account-section-label {
padding: 8px 14px 6px;
font-family: 'Plus Jakarta Sans', Inter, sans-serif;
font-size: 10px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: #94a3b8;
}
@media (max-width: 767px) {
/* icon-only circle inside the island header (caret overflowed it) */
.ak-account-dd .ak-account-trigger { width: 40px !important; height: 40px !important; padding: 0 !important; justify-content: center !important; }
.ak-account-dd .ak-account-caret { display: none !important; }
.ak-account-menu { right: -8px; width: 260px; }
}
form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style) { background-color: #F56C6C; color: #ffffff; }