/*
Theme Name: Hello Elementor FocusMe
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-focusme
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/*
Add your custom styles here
*/
:root {
/* Brand */
--fme-color-primary: #4F97F0;
--fme-color-primary-dark: #2E6BD9;
--fme-color-primary-disabled: #BBD7FB;
--fme-color-success: #16A34A;
--fme-color-warning: #F9BE0B;
--fme-color-warning-ink: #8A5A00;
--fme-color-danger: #EF4444;
/* Neutrals */
--fme-color-ink: #0F172A;
--fme-color-ink-muted: #475569;
--fme-color-dark-gray: #9D9D9D;
--fme-color-border: #E2E8F0;
--fme-color-surface: #F8FAFC;
--fme-color-white: #FFFFFF;
/* Semantic surfaces */
--fme-color-primary-soft: rgba(79, 151, 240, 0.10);
--fme-color-success-soft: #EAF8EF;
--fme-color-warning-soft: #FFF8E6;
--fme-color-danger-soft: #FDECEC;
--fme-color-neutral-soft: #EEF2F6;
/* Typography */
--fme-font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--fme-font-weight-regular: 400;
--fme-font-weight-medium: 500;
--fme-font-weight-semibold: 600;
--fme-font-weight-bold: 700;
--fme-font-size-h1: 64px;
--fme-font-size-h2: 42px;
--fme-font-size-h3: 28px;
--fme-font-size-body-lg: 21px;
--fme-font-size-body: 18px;
--fme-font-size-ui: 16px;
--fme-font-size-caption: 14px;
--fme-line-height-h1: 80px;
--fme-line-height-h2: 51px;
--fme-line-height-body-lg: 39px;
--fme-line-height-body: 26px;
--fme-line-height-ui: 24px;
/* Layout */
--fme-container-max-width: 1600px;
--fme-container-padding-x: 16px;
--fme-section-padding-y: 96px;
/* Shape and depth */
--fme-radius-xs: 4px;
--fme-radius-sm: 6px;
--fme-radius-md: 8px;
--fme-radius-lg: 12px;
--fme-radius-pill: 999px;
--fme-shadow-sm: 0 6px 14px rgba(15, 23, 42, 0.08);
--fme-shadow-md: 0 14px 32px rgba(15, 23, 42, 0.12);
/* Bootstrap bridge */
--bs-body-font-family: var(--fme-font-family-base);
--bs-body-color: var(--fme-color-ink);
--bs-body-bg: var(--fme-color-white);
--bs-primary: var(--fme-color-primary);
--bs-success: var(--fme-color-success);
--bs-warning: var(--fme-color-warning);
--bs-danger: var(--fme-color-danger);
--bs-border-color: var(--fme-color-border);
--bs-border-radius: var(--fme-radius-md);
}
html {
font-family: var(--fme-font-family-base);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--fme-color-white);
color: var(--fme-color-ink);
font-family: var(--fme-font-family-base);
font-size: var(--fme-font-size-body);
font-weight: var(--fme-font-weight-regular);
letter-spacing: -0.31px;
line-height: var(--fme-line-height-body);
}
a {
color: var(--fme-color-primary-dark);
}
a:hover {
color: var(--fme-color-primary);
}
body.fme-hardcoded-template a,
body.fme-hardcoded-template button,
body.fme-hardcoded-template [role="button"],
body.fme-hardcoded-template summary,
body.fme-hardcoded-template input[type="button"],
body.fme-hardcoded-template input[type="submit"],
body.fme-hardcoded-template input[type="reset"],
body.fme-hardcoded-template .btn,
body.fme-hardcoded-template .fme-btn {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
h1,
.h1,
.fme-text-h1 {
color: var(--fme-color-ink);
font-family: var(--fme-font-family-base);
font-size: var(--fme-font-size-h1);
font-weight: var(--fme-font-weight-bold);
letter-spacing: -1.677px;
line-height: var(--fme-line-height-h1);
}
h2,
.h2,
.fme-text-h2 {
color: var(--fme-color-ink);
font-family: var(--fme-font-family-base);
font-size: var(--fme-font-size-h2);
font-weight: var(--fme-font-weight-semibold);
line-height: var(--fme-line-height-h2);
}
h3,
.h3,
.fme-text-h3 {
color: var(--fme-color-ink);
font-family: var(--fme-font-family-base);
font-size: var(--fme-font-size-h3);
font-weight: var(--fme-font-weight-bold);
letter-spacing: 0;
line-height: normal;
}
p,
.fme-text-body {
font-size: var(--fme-font-size-body);
line-height: var(--fme-line-height-body);
color: var(--fme-color-ink-muted);
}
/* ELementor overrides */
.elementor p,
.elementor li,
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6,
.elementor .elementor-widget-container {
font-family: var(--fme-font-family-base) !important;
}
/*
.elementor p,
.elementor li {
color: var(--fme-color-ink-muted) !important;
}*/
.elementor-button.elementor-button-link.elementor-size-sm {
padding: 13px 20px !important;
}
.elementor .elementor-button {
font-family: "Inter", Sans-serif !important;
font-size: 21px;
font-weight: 700;
text-transform: capitalize !important;
text-shadow: none !important;
padding: 12px 100px !important;
border-radius: var(--fme-radius-md) !important;
min-height: 64px;
background: var(--fme-color-primary) !important;
border-color: var(--fme-color-primary) !important;
box-shadow: var(--fme-shadow-sm) !important;
line-height: 37px;
color: #FFF !important;
}
.fme-text-body-lg {
font-size: var(--fme-font-size-body-lg);
letter-spacing: 0.07px;
line-height: var(--fme-line-height-body-lg);
}
.fme-text-ui {
font-size: var(--fme-font-size-ui);
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
}
.fme-text-caption {
font-size: var(--fme-font-size-caption);
letter-spacing: 0;
line-height: normal;
}
.fme-section {
padding-bottom: var(--fme-section-padding-y);
padding-top: var(--fme-section-padding-y);
}
.btn,
.fme-btn {
align-items: center;
border-radius: var(--fme-radius-sm);
display: inline-flex;
font-family: var(--fme-font-family-base);
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-medium);
gap: 10px;
justify-content: center;
line-height: var(--fme-line-height-ui);
min-height: 54px;
padding: 12px 24px;
text-decoration: none;
}
.btn-primary,
.fme-btn--primary {
background: var(--fme-color-primary);
border-color: var(--fme-color-primary);
box-shadow: var(--fme-shadow-sm);
color: var(--fme-color-white);
}
.btn-primary:hover,
.fme-btn--primary:hover {
background: var(--fme-color-primary-dark);
border-color: var(--fme-color-primary-dark);
color: var(--fme-color-white);
}
.btn-outline-primary,
.fme-btn--secondary {
background: var(--fme-color-white);
border-color: var(--fme-color-border);
color: var(--fme-color-ink);
}
.btn-danger,
.fme-btn--danger {
background: var(--fme-color-danger);
border-color: var(--fme-color-danger);
color: var(--fme-color-white);
}
.btn-sm,
.fme-btn--sm {
font-size: 14px;
min-height: 40px;
padding: 8px 18px;
}
.btn-lg,
.fme-btn--lg {
min-height: 64px;
padding: 18px 64px;
}
.fme-btn--xxl {
min-height: 72px;
min-width: 520px;
padding: 22px 80px;
}
.btn:disabled,
.btn.disabled,
.fme-btn:disabled,
.fme-btn.is-disabled {
background: var(--fme-color-primary-disabled);
border-color: var(--fme-color-primary-disabled);
box-shadow: none;
color: var(--fme-color-white);
cursor: not-allowed;
opacity: 1;
}
.badge,
.fme-badge {
border-radius: var(--fme-radius-sm);
line-height: 1;
padding: 4px 20px;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.449px;
margin-bottom: 16px;
display: table;
}
.fme-badge--primary {
background: var(--fme-color-primary-soft);
color: var(--fme-color-primary-dark);
}
.fme-badge--success {
background: var(--fme-color-success-soft);
color: var(--fme-color-success);
}
.fme-badge--warning {
background: var(--fme-color-warning-soft);
color: var(--fme-color-warning-ink);
}
.fme-badge--danger {
background: var(--fme-color-danger-soft);
color: var(--fme-color-danger);
}
.fme-pill {
background: var(--fme-color-primary-soft);
border-radius: var(--fme-radius-pill);
color: var(--fme-color-primary);
display: inline-flex;
font-size: var(--fme-font-size-body-lg);
font-weight: var(--fme-font-weight-semibold);
letter-spacing: 0.07px;
line-height: var(--fme-line-height-body-lg);
padding: 6px 16px;
}
.card,
.fme-card {
background: var(--fme-color-white);
border: 1px solid var(--fme-color-border);
border-radius: var(--fme-radius-md);
box-shadow: var(--fme-shadow-sm);
color: var(--fme-color-ink);
}
.form-control,
.form-select,
.fme-input {
border-color: var(--fme-color-border);
border-radius: var(--fme-radius-sm);
color: var(--fme-color-ink);
font-family: var(--fme-font-family-base);
font-size: var(--fme-font-size-ui);
min-height: 58px;
padding: 14px 16px;
}
.form-control:focus,
.form-select:focus,
.fme-input:focus {
border-color: var(--fme-color-primary);
box-shadow: 0 0 0 4px rgba(79, 151, 240, 0.16);
}
.form-label {
color: var(--fme-color-ink);
font-size: 14px;
font-weight: var(--fme-font-weight-medium);
}
.form-check-input {
border-color: var(--fme-color-primary);
}
.form-check-input:checked {
background-color: var(--fme-color-primary);
border-color: var(--fme-color-primary);
}
.fme-alert {
border-left: 4px solid var(--fme-color-primary);
border-radius: var(--fme-radius-sm);
padding: 18px 20px;
}
.fme-alert--success {
background: var(--fme-color-success-soft);
border-left-color: var(--fme-color-success);
}
.fme-alert--info {
background: var(--fme-color-primary-soft);
border-left-color: var(--fme-color-primary);
}
.fme-alert--warning {
background: var(--fme-color-warning-soft);
border-left-color: var(--fme-color-warning);
}
.fme-alert--danger {
background: var(--fme-color-danger-soft);
border-left-color: var(--fme-color-danger);
}
.fme-check-list {
display: grid;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.fme-check-list li {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
font-weight: var(--fme-font-weight-semibold);
gap: 12px;
}
.fme-check-list li::before {
align-items: center;
border: 2px solid var(--fme-color-primary);
border-radius: 50%;
color: var(--fme-color-primary);
content: "✓";
display: inline-flex;
flex: 0 0 24px;
font-size: 14px;
height: 24px;
justify-content: center;
width: 24px;
}
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
--bs-gutter-x: calc(var(--fme-container-padding-x) * 2);
}
.fme-site-header {
background: var(--fme-color-white);
position: relative;
top: 0;
z-index: 100;
}
.fme-site-header.fixed {
position: fixed;
left: 0;
right: 0;
width: 100%;
}
.fme-site-header__inner {
align-items: center;
display: flex;
gap: 16px;
height: 64px;
justify-content: space-between;
margin: 0 auto;
max-width: calc(var(--fme-container-max-width) + 32px);
padding: 0 16px;
}
.fme-site-footer__inner {
align-items: center;
display: flex;
gap: 28px;
margin: 0 auto;
max-width: var(--fme-container-max-width);
padding: 18px var(--fme-container-padding-x);
}
.fme-site-header__brand {
align-items: center;
color: var(--fme-color-ink);
display: inline-flex;
flex: 0 0 auto;
font-weight: var(--fme-font-weight-bold);
gap: 8px;
text-decoration: none;
}
.fme-site-header__logo,
.fme-site-header__logo svg {
display: block;
}
.fme-site-header__brand-word {
color: var(--fme-color-ink-muted);
font-size: 19px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.31px;
line-height: 24px;
}
.fme-site-header__brand-word span:first-child {
color: var(--fme-color-primary);
}
.fme-site-header__nav {
align-items: center;
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.fme-site-header__menu,
.fme-site-footer__menu {
display: flex;
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
}
.fme-site-header__menu a,
.fme-site-footer__menu a {
color: var(--fme-color-ink);
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-regular);
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
text-decoration: none;
}
.fme-site-header__menu a {
align-items: center;
display: inline-flex;
min-height: 48px;
}
.fme-site-header__menu a:hover,
.fme-site-footer__menu a:hover {
color: var(--fme-color-primary-dark);
}
.fme-site-header__menu a.fme-site-header__menu-link--active,
body.fme-hardcoded-template .fme-site-header .fme-site-header__menu a.fme-site-header__menu-link--active {
color: var(--fme-color-primary);
font-weight: var(--fme-font-weight-bold);
}
.fme-site-header__cta {
align-items: center;
background: var(--fme-color-primary);
border-radius: var(--fme-radius-sm);
color: var(--fme-color-white);
flex: 0 0 auto;
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-medium);
justify-content: center;
min-height: 48px;
min-width: 166px;
padding: 12px 24px;
text-decoration: none;
}
.fme-site-header__cta:visited { color: var(--fme-color-white);}
.fme-site-header__cta:hover {
background: var(--fme-color-primary-dark);
color: var(--fme-color-white);
}
body.fme-hardcoded-template .fme-site-header a {
color: var(--fme-color-ink);
}
body.fme-hardcoded-template .fme-site-header a:hover,
body.fme-hardcoded-template .fme-site-header a:focus {
color: var(--fme-color-primary-dark);
}
body.fme-hardcoded-template .fme-site-header .fme-site-header__menu a.fme-site-header__menu-link--active,
body.fme-hardcoded-template .fme-site-header .fme-site-header__menu a.fme-site-header__menu-link--active:hover,
body.fme-hardcoded-template .fme-site-header .fme-site-header__menu a.fme-site-header__menu-link--active:focus {
color: var(--fme-color-primary);
font-weight: var(--fme-font-weight-bold);
}
body.fme-hardcoded-template .fme-site-header .fme-site-header__brand-word {
color: var(--fme-color-ink-muted);
}
body.fme-hardcoded-template .fme-site-header .fme-site-header__brand-word span:first-child {
color: var(--fme-color-primary);
}
body.fme-hardcoded-template .fme-site-header .fme-site-header__cta,
body.fme-hardcoded-template .fme-site-header .fme-site-header__cta:visited,
body.fme-hardcoded-template .fme-site-header .fme-site-header__cta:focus,
body.fme-hardcoded-template .fme-site-header .fme-site-header__cta:active,
body.fme-hardcoded-template .fme-site-header .fme-site-header__cta:hover,
body.fme-hardcoded-template .fme-btn.fme-btn--primary.fme-home-hero__primary-btn,
body.fme-hardcoded-template .fme-site-header .fme-btn.fme-btn--primary.fme-home-hero__primary-btn:hover {
color: var(--fme-color-white);
}
.fme-site-header__toggle {
align-items: center;
background: transparent;
border: 0;
flex-direction: column;
gap: 4px;
height: 44px;
justify-content: center;
padding: 0;
width: 44px;
}
.fme-site-header__toggle span {
background: var(--fme-color-primary);
border-radius: var(--fme-radius-pill);
display: block;
height: 4px;
width: 28px;
}
.fme-mobile-menu {
--bs-offcanvas-width: min(391px, 100vw);
background: var(--fme-color-primary);
border: 0;
color: var(--fme-color-white);
max-width: 100vw;
}
.fme-mobile-menu__header {
align-items: center;
display: flex;
height: 80px;
justify-content: space-between;
padding: 0 20px;
}
.fme-mobile-menu__brand,
.fme-mobile-menu__brand:hover {
color: var(--fme-color-white);
}
.fme-mobile-menu__brand .fme-site-header__brand-word,
.fme-mobile-menu__brand .fme-site-header__brand-word span:first-child {
color: var(--fme-color-white);
font-size: 16px;
line-height: 24px;
}
.fme-mobile-menu__close {
background: transparent;
border: 0;
height: 44px;
position: relative;
width: 44px;
}
.fme-mobile-menu__close::before,
.fme-mobile-menu__close::after {
background: var(--fme-color-white);
content: "";
display: block;
height: 2px;
left: 10px;
position: absolute;
top: 21px;
width: 25px;
}
.fme-mobile-menu__close::before {
transform: rotate(45deg);
}
.fme-mobile-menu__close::after {
transform: rotate(-45deg);
}
.fme-mobile-menu__nav {
display: flex;
flex-direction: column;
}
.fme-mobile-menu__link {
align-items: center;
background: transparent;
border: 0;
color: var(--fme-color-white);
display: flex;
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-regular);
justify-content: space-between;
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
min-height: 48px;
padding: 12px 20px;
text-align: left;
text-decoration: none;
width: 100%;
}
.fme-mobile-menu__link:hover,
.fme-mobile-menu__link:focus {
color: var(--fme-color-white);
background-color: var(--fme-color-neutral-soft);
}
body.fme-hardcoded-template .fme-mobile-menu a.fme-mobile-menu__link:hover,
body.fme-hardcoded-template .fme-mobile-menu a.fme-mobile-menu__link:focus {
background-color: var(--fme-color-neutral-soft);
color: var(--fme-color-primary-dark);
}
.fme-mobile-menu__link--active,
.fme-mobile-menu__section {
background: var(--fme-color-primary-dark);
}
.fme-mobile-menu__link.fme-mobile-menu__link--active,
body.fme-hardcoded-template .fme-mobile-menu a.fme-mobile-menu__link--active {
background-color: var(--fme-color-neutral-soft);
color: var(--fme-color-primary-dark);
}
.fme-mobile-menu__submenu {
display: grid;
gap: 16px;
padding: 8px 20px 20px 36px;
}
.fme-mobile-menu__submenu a {
color: var(--fme-color-white);
font-size: 12px;
line-height: 18px;
text-decoration: none;
}
.fme-mobile-menu__footer {
padding: 68px 20px 20px;
}
.fme-mobile-menu__cta {
align-items: center;
background: var(--fme-color-white);
border-radius: var(--fme-radius-sm);
color: var(--fme-color-primary);
display: inline-flex;
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-regular);
justify-content: center;
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
min-height: 52px;
min-width: 164px;
padding: 14px 24px;
text-decoration: none;
}
.fme-mobile-menu__cta:hover {
color: var(--fme-color-primary-dark);
}
.modal.fme-trial-modal {
background: transparent;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
height: 100%;
left: 0;
max-width: none;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0 !important;
position: fixed;
top: 0;
width: 100%;
z-index: 1055;
}
.modal.fme-trial-modal.show {
display: block;
}
.fme-trial-modal .modal-dialog {
max-width: 600px;
}
.fme-trial-modal .modal-content {
align-items: center;
border: 0;
border-radius: 16px;
min-height: 603px;
padding: 32px 48px 48px;
position: relative;
}
.fme-trial-modal__close {
background: transparent;
border: 0;
height: 40px;
padding: 0;
position: absolute;
right: 24px;
top: 24px;
width: 40px;
}
.fme-trial-modal__close::before,
.fme-trial-modal__close::after {
background: #8A8A8A;
content: "";
display: block;
height: 2px;
left: 4px;
position: absolute;
top: 19px;
width: 34px;
}
.fme-trial-modal__close::before {
transform: rotate(45deg);
}
.fme-trial-modal__close::after {
transform: rotate(-45deg);
}
.fme-trial-modal__icon {
align-items: center;
background: #D5E6FD;
border-radius: 50%;
color: var(--fme-color-primary);
display: flex;
font-size: 55px;
height: 100px;
justify-content: center;
margin: 46px auto 32px;
width: 100px;
}
.fme-trial-modal h2 {
color: #000;
font-size: 40px;
font-weight: var(--fme-font-weight-bold);
line-height: 1.15;
margin: 0;
text-align: center;
}
.fme-trial-modal p {
color: var(--fme-color-primary);
font-size: 20px;
font-weight: var(--fme-font-weight-semibold);
line-height: 1.35;
margin: 18px 0 0;
text-align: center;
}
.fme-trial-modal__form {
display: grid;
gap: 16px;
margin-top: 32px;
width: 100%;
}
.fme-trial-modal__form input {
border: 1px solid #D9E2EF;
border-radius: 8px;
color: var(--fme-color-ink);
font-size: 18px;
height: 60px;
line-height: 1.35;
padding: 0 24px;
width: 100%;
}
.fme-trial-modal__form input::placeholder {
color: #465874;
opacity: 1;
}
.fme-trial-modal__form button {
align-items: center;
background: var(--fme-color-primary);
border: 0;
border-radius: 8px;
box-shadow: 0 14px 22px rgba(79, 151, 240, 0.24);
color: var(--fme-color-white);
display: inline-flex;
font-size: 18px;
font-weight: var(--fme-font-weight-regular);
gap: 16px;
height: 61px;
justify-content: center;
line-height: 1.35;
margin-top: 8px;
padding: 0 24px;
width: 100%;
}
.fme-trial-modal__form button i {
font-size: 28px;
line-height: 1;
}
.fme-trial-modal .fme-trial-modal__privacy {
align-items: center;
color: #465874;
display: flex;
font-size: 16px;
font-weight: var(--fme-font-weight-regular);
gap: 18px;
line-height: 1.35;
margin-top: 32px;
}
.fme-trial-modal__privacy i {
color: #465874;
flex: 0 0 auto;
font-size: 18px;
}
body.fme-hardcoded-template .fme-mobile-menu a,
body.fme-hardcoded-template .fme-mobile-menu button {
color: var(--fme-color-white);
}
body.fme-hardcoded-template .fme-mobile-menu .fme-mobile-menu__cta {
color: var(--fme-color-primary);
}
body.fme-hardcoded-template .fme-mobile-menu .fme-mobile-menu__cta:hover {
color: var(--fme-color-primary-dark);
}
.fme-site-footer {
background: var(--fme-color-ink);
color: rgba(255, 255, 255, 0.72);
overflow: hidden;
position: relative;
}
.fme-site-footer__inner {
align-items: center;
display: flex;
flex-direction: column;
gap: 32px;
margin: 0 auto;
max-width: 1280px;
padding: 32px 24px;
position: relative;
z-index: 1;
}
.fme-site-footer__top {
display: grid;
gap: 32px;
}
.fme-site-footer__brand {
text-align: center;
}
.fme-site-footer__logo {
align-items: center;
color: var(--fme-color-white);
display: inline-flex;
font-size: 42px;
font-weight: var(--fme-font-weight-bold);
gap: 10px;
letter-spacing: -0.8px;
line-height: 1;
text-decoration: none;
}
.fme-site-footer__logo:hover {
color: var(--fme-color-white);
}
.fme-site-footer__logo-mark {
color: var(--fme-color-white);
display: block;
}
.fme-site-footer__logo-mark svg {
display: block;
}
.fme-site-footer__brand p,
.fme-site-footer__brand address,
.fme-site-footer__copyright {
color: rgba(255, 255, 255, 0.72);
font-size: var(--fme-font-size-ui);
font-style: normal;
letter-spacing: -0.31px;
line-height: 28px;
margin: 0;
}
.fme-site-footer__brand p {
margin: 24px auto 0;
max-width: 420px;
}
.fme-site-footer__brand address {
margin-top: 24px;
}
.fme-site-footer__nav {
display: grid;
gap: 28px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fme-site-footer__nav-group h2 {
color: var(--fme-color-white);
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
margin: 0 0 18px;
}
.fme-site-footer__nav-group ul,
.fme-site-footer__socials {
list-style: none;
margin: 0;
padding: 0;
}
.fme-site-footer__nav-group ul {
display: grid;
gap: 8px;
}
.fme-site-footer__nav-group a {
color: rgba(255, 255, 255, 0.72);
font-size: var(--fme-font-size-ui);
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
text-decoration: none;
}
.fme-site-footer__nav-group a:hover {
color: var(--fme-color-white);
}
.fme-site-footer__socials {
align-items: center;
display: flex;
gap: 34px;
justify-content: space-between;
}
.fme-site-footer__socials a {
align-items: center;
color: rgba(79, 151, 240, 0.5);
display: inline-flex;
height: 32px;
justify-content: center;
text-decoration: none;
width: 32px;
}
.fme-site-footer__socials a:hover {
color: var(--fme-color-primary);
}
.fme-site-footer__socials svg {
fill: currentColor;
height: 25px;
width: 25px;
}
.fme-site-footer__rule {
background: rgba(226, 232, 240, 0.22);
height: 1px;
width: 100%;
}
.fme-site-footer__copyright {
text-align: center;
}
body.fme-hardcoded-template .fme-site-footer a {
color: rgba(255, 255, 255, 0.72);
}
body.fme-hardcoded-template .fme-site-footer a:hover,
body.fme-hardcoded-template .fme-site-footer .fme-site-footer__logo {
color: var(--fme-color-white);
}
body.fme-hardcoded-template .fme-site-footer .fme-site-footer__socials a {
color: rgba(79, 151, 240, 0.5);
}
body.fme-hardcoded-template .fme-site-footer .fme-site-footer__socials a:hover {
color: var(--fme-color-primary);
}
.fme-home-page {
--fme-home-hero-image: none;
}
.fme-home-hero {
background: url(img/hero-text-background.svg) calc(20% - 100px) center no-repeat var(--fme-color-white);
overflow: hidden;
padding: 48px 0 56px;
}
.fme-home-hero__grid {
display: grid;
gap: 36px;
position: relative;
}
.fme-home-hero__content {
position: relative;
z-index: 1;
}
.fme-home-hero h1 span {
display: block;
}
.fme-home-hero__lead {
color: var(--fme-color-ink-muted);
font-size: 16px;
letter-spacing: -0.31px;
line-height: 26px;
margin: 16px 0 0;
max-width: 620px;
}
.fme-home-hero__actions {
display: grid;
gap: 16px;
margin-top: 24px;
}
.fme-home-hero__primary-btn,
.fme-home-hero__secondary-btn {
border-radius: var(--fme-radius-md);
min-height: 64px;
}
.fme-home-hero__primary-btn {
box-shadow: 0 10px 15px -3px rgba(79, 151, 240, 0.35);
}
.fme-home-hero__secondary-btn {
border-radius: 8px;
border: 1px solid var(--Border, #E2E8F0);
background: var(--White, #FFF);
box-shadow: 0 10px 15px -3px rgba(195, 195, 195, 0.20);
color: var(--Ink, #0F172A);
text-align: center;
padding-top: 20px;
}
.fme-home-hero__checks {
display: grid;
gap: 12px;
list-style: none;
margin: 24px 0 0;
padding: 0;
display: flex;
gap: 32px;
margin-top: 24px;
}
.fme-home-hero__checks li {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
font-size: 16px;
font-weight: var(--fme-font-weight-semibold);
gap: 12px;
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
}
.fme-home-hero__checks li i {
color: var(--fme-color-primary);;
}
.fme-home-hero__checks li i:before {
font-size: 25px;1922
}
.fme-home-hero__visual {
display: grid;
gap: 24px;
}
.fme-home-hero__flow {
align-items: center;
display: grid;
gap: 12px;
justify-items: center;
}
.fme-home-hero__status-card {
border-radius: var(--fme-radius-lg);
display: grid;
font-size: 13px;
line-height: 18px;
min-height: 82px;
padding: 16px;
width: min(100%, 226px);
}
.fme-home-hero__status-card strong {
font-size: 15px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: 0;
line-height: 18px;
}
.fme-home-hero__status-card--danger {
background: rgba(239, 68, 68, 0.05);
border: 1px solid var(--fme-color-danger);
color: var(--fme-color-danger);
gap: 12px;
}
.fme-home-hero__status-card--danger ul {
color: var(--fme-color-ink);
display: grid;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.fme-home-hero__status-card--danger li {
align-items: center;
display: grid;
gap: 8px;
grid-template-columns: 16px 1fr auto;
}
.fme-home-hero__app-icon {
align-items: center;
border-radius: 50%;
color: var(--fme-color-white);
display: inline-flex;
font-size: 10px;
font-weight: var(--fme-font-weight-bold);
height: 15px;
justify-content: center;
width: 15px;
}
.fme-home-hero__app-icon--youtube {
background: var(--fme-color-danger);
}
.fme-home-hero__app-icon--youtube::before {
content: "▶";
font-size: 8px;
}
.fme-home-hero__app-icon--reddit {
background: #FF4500;
}
.fme-home-hero__app-icon--reddit::before {
content: "r";
}
.fme-home-hero__app-icon--x {
background: transparent;
color: var(--fme-color-ink);
font-size: 15px;
}
.fme-home-hero__app-icon--instagram {
background: linear-gradient(135deg, #F9BE0B, #EF4444 50%, #8B5CF6);
}
.fme-home-hero__app-icon--instagram::before {
content: "◎";
}
.fme-home-hero__arrow {
color: var(--fme-color-ink);
font-size: 34px;
line-height: 1;
}
.fme-home-hero__status-card--primary,
.fme-home-hero__status-card--success {
align-items: center;
display: flex;
gap: 12px;
justify-content: center;
}
.fme-home-hero__status-card--primary {
background: rgba(79, 151, 240, 0.1);
border: 1px solid var(--fme-color-primary);
color: var(--fme-color-primary-dark);
}
.fme-home-hero__status-card--success {
background: rgba(22, 163, 74, 0.1);
border: 1px solid var(--fme-color-success);
color: var(--fme-color-success);
}
.fme-home-hero__shield,
.fme-home-hero__target {
align-items: center;
display: inline-flex;
flex: 0 0 32px;
font-size: 28px;
height: 32px;
justify-content: center;
width: 32px;
}
.fme-home-hero__image {
background-image: var(--fme-home-hero-image);
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
min-height: 300px;
position: relative;
}
.fme-home-hero__image-placeholder {
align-items: center;
aspect-ratio: 1 / 0.72;
background: linear-gradient(180deg, rgba(79, 151, 240, 0.12), rgba(79, 151, 240, 0.03));
border: 1px dashed rgba(79, 151, 240, 0.35);
border-radius: 48% 48% 8px 8px;
color: rgba(71, 85, 105, 0.7);
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 520px;
min-height: 280px;
text-align: center;
}
.fme-home-stats {
background: var(--fme-color-white);
padding: 40px 0;
}
.fme-home-stats__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fme-home-stats__item {
align-items: center;
background: var(--fme-color-white);
border-radius: var(--fme-radius-lg);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
color: var(--fme-color-primary);
display: flex;
gap: 16px;
min-height: 104px;
padding: 20px 18px;
}
.fme-home-stats__item--success,
.fme-home-stats__item--trustpilot {
color: var(--fme-color-success);
}
.fme-home-stats__icon {
align-items: center;
display: inline-flex;
flex: 0 0 76px;
height: 76px;
width: 76px;
justify-content: center;
}
.fme-home-stats__icon.trustpilot svg {
display: block;
fill: currentColor;
height: 76px;
width: 76px;
}
.fme-home-stats__icon svg {
display: block;
fill: currentColor;
height: 60px;
width: 60px;
}
.fme-home-stats__content {
color: var(--fme-color-ink);
display: grid;
gap: 2px;
min-width: 0;
}
.fme-home-stats__content strong {
color: currentColor;
font-size: 28px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.8px;
line-height: 32px;
}
.fme-home-stats__content span {
color: var(--fme-color-ink);
font-size: var(--fme-font-size-ui);
letter-spacing: -0.31px;
line-height: var(--fme-line-height-ui);
}
.fme-home-stats__item--trustpilot .fme-home-stats__content strong {
color: var(--fme-color-ink);
}
.fme-home-stats__item--trustpilot .fme-home-stats__content span {
color: var(--fme-color-ink);
font-size: 13px;
line-height: 18px;
}
.fme-home-attention {
--fme-home-attention-image: none;
background: var(--fme-color-white);
padding: 64px 0 80px;
}
.fme-home-attention__grid {
display: grid;
gap: 36px;
}
.fme-home-attention p + p {
margin-top: 18px;
}
.fme-home-attention__graphic {
background-image: var(--fme-home-attention-image);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.fme-home-attention__graphic-placeholder {
align-items: center;
aspect-ratio: 1.78 / 1;
background: linear-gradient(180deg, rgba(79, 151, 240, 0.08), rgba(79, 151, 240, 0.02));
border: 1px dashed rgba(79, 151, 240, 0.35);
border-radius: var(--fme-radius-lg);
color: rgba(71, 85, 105, 0.7);
display: flex;
height: 100%;
justify-content: center;
min-height: 260px;
text-align: center;
width: 100%;
}
.fme-home-attention__mobile-cards {
margin-top: 8px;
}
.fme-home-attention__mobile-cards.d-block {
display: none !important;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fme-home-attention-card {
background: var(--fme-color-white);
border: 1px solid var(--fme-color-border);
border-radius: 12px;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
min-height: 166px;
padding: 16px;
}
.fme-home-attention-card__icon {
display: block;
height: 38px;
margin-bottom: 14px;
width: 38px;
}
.fme-home-attention-card h3 {
color: var(--fme-color-ink);
font-size: 16px;
font-weight: var(--fme-font-weight-semibold);
line-height: 19px;
margin: 0 0 12px;
}
.fme-home-attention-card p {
color: var(--fme-color-ink-muted);
font-size: 12px;
font-weight: var(--fme-font-weight-regular);
line-height: 21px;
margin: 0;
}
.fme-home-feature {
padding: 24px 0;
}
.fme-home-feature.fme-home-feature--coach {
padding: 55px;
}
.fme-home-feature--enforced > .container,
.fme-home-focus-way > .container {
background: var(--fme-color-primary-soft);
border-radius: 16px;
}
.fme-home-feature--coach {
background: var(--fme-color-white);
}
.fme-home-feature__grid {
display: grid;
gap: 36px;
}
.fme-home-feature__media {
background-image: var(--fme-home-feature-image, none);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
min-height: 300px;
}
.fme-home-feature__media-placeholder {
align-items: center;
aspect-ratio: 1.5 / 1;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34));
border: 1px dashed rgba(79, 151, 240, 0.4);
border-radius: var(--fme-radius-lg);
color: rgba(71, 85, 105, 0.72);
display: flex;
height: 100%;
justify-content: center;
min-height: 300px;
text-align: center;
width: 100%;
}
.fme-home-feature__content {
align-self: center;
order: -1;
}
.fme-home-feature__eyebrow {
margin-bottom: 16px;
}
.fme-home-feature__benefits {
display: grid;
gap: 18px;
list-style: none;
margin: 36px 0 0;
padding: 0;
}
.fme-home-feature__benefits li {
align-items: center;
color: var(--fme-color-ink);
display: flex;
gap: 14px;
}
.fme-home-feature__benefits span {
align-items: center;
color: var(--fme-color-primary);
display: inline-flex;
flex: 0 0 32px;
height: 36px;
justify-content: center;
width: 36px;
}
.fme-home-feature__benefits svg {
display: block;
height: 36px;
width: 36px;
}
.fme-home-feature__benefits strong {
color: var(--Ink, #0F172A);
font-size: 18px;
font-weight: 600;
line-height: 24px;
}
.fme-home-focus-way {
padding: 64px 0;
}
.fme-home-focus-way__inner {
display: grid;
gap: 36px;
padding: 70px 0 30px;
}
.fme-home-focus-way__header {
display: grid;
gap: 28px;
}
.fme-home-focus-way__modes-scroll {
position: relative;
max-width: calc(100vw - 32px);
}
.fme-home-focus-way__modes-scroll::before,
.fme-home-focus-way__modes-scroll::after {
opacity: 0;
pointer-events: none;
}
.fme-home-focus-way__modes {
display: flex;
gap: 14px;
list-style: none;
margin: 0 calc(var(--fme-container-padding-x) * -1);
overflow-x: auto;
padding: 0 var(--fme-container-padding-x) 8px;
scrollbar-width: none;
}
.fme-home-focus-way__modes::-webkit-scrollbar {
display: none;
}
.fme-home-focus-way__modes li {
border-radius: 12px;
border: 1px solid var(--Border, #E2E8F0);
background: var(--White, #FFF);
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
display: flex;
padding: 20px 22px;
align-items: center;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
}
.fme-home-focus-way__modes span {
align-items: center;
color: var(--fme-color-primary);
display: inline-flex;
flex: 0 0 28px;
height: 28px;
justify-content: center;
width: 28px;
}
.fme-home-focus-way__modes li:nth-child(2) span {
color: var(--fme-color-success);
}
.fme-home-focus-way__modes li:nth-child(3) span {
color: #8B5CF6;
}
.fme-home-focus-way__modes li:nth-child(4) span {
color: var(--fme-color-danger);
}
.fme-home-focus-way__modes svg {
display: block;
height: 28px;
width: 28px;
}
.fme-home-focus-way__modes strong {
font-size: 13px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.12px;
line-height: 16px;
}
.fme-home-focus-way__media {
background-image: var(--fme-home-focus-way-image, none);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
min-height: 300px;
}
.fme-home-focus-way__media-placeholder {
align-items: center;
aspect-ratio: 1.62 / 1;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42));
border: 1px dashed rgba(79, 151, 240, 0.4);
border-radius: var(--fme-radius-lg);
color: rgba(71, 85, 105, 0.72);
display: flex;
height: 100%;
justify-content: center;
min-height: 300px;
text-align: center;
width: 100%;
}
.fme-home-testimonials {
background: var(--fme-color-white);
padding: 64px 0;
}
.fme-home-testimonials__inner {
display: grid;
gap: 32px;
}
.fme-home-testimonials h2 {
text-align: center;
}
.fme-home-testimonials__grid {
display: grid;
gap: 20px;
}
.fme-home-testimonials__slides,
.fme-home-testimonials__slides-wrapper {
display: contents;
}
.fme-home-testimonials__pagination {
display: none;
}
.fme-home-testimonial-card {
display: flex;
padding: 32px;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--Border, #E2E8F0);
background: var(--White, #FFF);
}
.fme-home-stars {
display: flex;
align-items: flex-start;
gap: 4px;
align-self: stretch;
}
.fme-home-testimonial-card h3 {
color: var(--Ink, #0F172A);
font-size: 18px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.439px;
}
.fme-home-testimonial-card footer {
color: var(--Ink-muted, #475569);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: -0.312px;
margin-top: 18px;
}
.fme-home-trustpilot {
align-content: start;
display: grid;
justify-items: start;
}
.fme-home-trustpilot__brand {
align-items: center;
display: inline-flex;
gap: 4px;
}
.fme-home-trustpilot__brand span {
color: var(--fme-color-success);
font-size: 34px;
line-height: 1;
}
.fme-home-trustpilot__brand strong {
color: var(--fme-color-ink);
font-size: 24px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.31px;
line-height: 30px;
}
.fme-home-trustpilot__boxes {
display: flex;
gap: 3px;
}
.fme-home-trustpilot__boxes span {
align-items: center;
background: var(--fme-color-success);
color: var(--fme-color-white);
display: inline-flex;
font-size: 18px;
height: 24px;
justify-content: center;
line-height: 1;
width: 24px;
}
.fme-home-trustpilot p {
color: var(--fme-color-ink);
line-height: 24px;
font-size: 22px;
font-style: normal;
line-height: 28px; /* 127.273% */
padding-left: 16px;
}
.fme-home-final-cta {
background: linear-gradient(90deg, rgba(237, 245, 253, 0.00) 37.7%, #EDF5FD 56.67%), url(img/desktop_footer.webp) left center no-repeat;
background-size: auto, contain;
}
.fme-home-final-cta__inner {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
gap: 32px;
margin: 0 calc(var(--fme-container-padding-x) * -1);
min-height: 560px;
padding: 64px var(--fme-container-padding-x);
}
.fme-home-final-cta__art {
min-height: 220px;
}
.fme-home-final-cta__content {
align-self: center;
display: grid;
justify-items: stretch;
max-width: 670px;
}
.fme-home-final-cta__form {
display: grid;
gap: 26px;
margin-top: 26px;
max-width: 500px;
}
.fme-home-final-cta__form input {
background: var(--fme-color-white);
border: 1px solid var(--fme-color-border);
border-radius: var(--fme-radius-sm);
color: var(--fme-color-ink);
font: inherit;
height: 54px;
padding: 0 16px;
width: 100%;
}
.fme-home-final-cta__form input::placeholder {
color: var(--fme-color-ink-muted);
}
.fme-home-final-cta__form .fme-btn {
justify-content: center;
width: 100%;
}
.fme-home-final-cta__checks {
display: grid;
gap: 14px;
list-style: none;
margin: 28px 0 0;
padding: 0;
}
.fme-home-final-cta__checks li {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
font-size: 15px;
font-weight: var(--fme-font-weight-medium);
gap: 12px;
line-height: 24px;
}
.fme-home-final-cta__checks li::before {
align-items: center;
border: 2px solid var(--fme-color-primary);
border-radius: 50%;
color: var(--fme-color-primary);
content: "✓";
display: inline-flex;
flex: 0 0 22px;
font-size: 14px;
height: 22px;
justify-content: center;
line-height: 1;
width: 22px;
}
.fme-hardcoded-page {
margin: 0 auto;
max-width: var(--fme-container-max-width);
padding: 56px var(--fme-container-padding-x);
}
main.site-main.post section.section-first {
background: url(/wp-content/themes/hello-elementor-focusme/img/grey_bg.png);
padding-top: 200px;
background-repeat: no-repeat;
background-size: 100% 95%;
background-position: top center;
margin-bottom: 0;
padding-bottom: 50px;
}
body:not([class*=elementor-page-]) main.site-main {
max-width: 100%;
}
.post.type-post .page-content{
margin-top: 60px;
}
.site-main .section-first .post-categories {
margin-bottom: 15px;
}
.site-main .section-first .post-categories a {
font-family: "Camphor Pro", sans-serif;
text-transform: uppercase;
font-size: 18px;
text-decoration: underline;
}
.site-main.post .page-title {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
justify-content: space-between;
}
.site-main.post .title-wrap{
width: 52%;
padding-right: 30px;
}
.site-main.post .image-wrap {
width: 43%;
}
.site-main.post .title-wrap h1 {
border-bottom: solid 2px #b5d4e6;
padding-bottom: 40px;
margin-bottom: 35px;
color: #231f20;
font-family: "Camphor Std", sans-serif;
font-size: 48px;
font-weight: 700;
}
.site-main.post .title-wrap .share-btn {
color: #fff;
padding: 10px 16px;
font-family: "Camphor Pro", sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.share-btn {
display: inline-flex;
justify-content: center;
min-width: 120px;
padding: 10px;
}
.site-main.post .share-btn.twitter{
background: #26a9e1;
}
.site-main.post .share-btn.facebook {
background: #04306f;
}
.site-main.post .share-btn.linkedin {
background: #1a75bb;
}
.site-main.post .author-and-share {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.site-main.post .author-and-share .author {
color: #404041;
font-family: "Camphor Pro", sans-serif;
font-size: 18px;
font-weight: 400;
}
.site-main.post .title-wrap a {
color: #3b66dd;
}
.related-articles {
max-width: 1200px;
margin: 100px auto 0 auto;
}
.related-articles h1 {
text-align: center;
border-bottom: 3px solid #b5d4e6;
display: block;
margin: 0 auto 75px;
width: max-content;
padding: 0 20px 40px;
color: #231f20;
font-family: "Camphor Std",sans-serif;
font-size: 32px;
font-weight: bold;
}
.related-articles .articles {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.related-articles .articles .article {
max-width: 30%;
}
.related-articles .articles .article img {
height: 300px;
object-fit: cover;
width: 100%;
}
.post-last-section .subscribe-block {
text-align: center;
max-width: 850px;
margin: 0 auto;
padding: 70px 60px;
box-shadow: 0 4px 34px 4px rgba(22, 145, 214, 0.1);
border-radius: 15px;
background: #fff;
}
.post-last-section form {
display: flex;
flex-wrap: wrap;
margin: 30px 0;
}
.post-last-section form input {
max-width: 60%;
margin-right: 20px;
border: solid 1px #b5d4e6;
padding: 29px;
}
.post-last-section form input::placeholder {
color: #404041;
font-family: "Camphor Pro", sans-serif;
font-size: 21px;
}
.post-last-section form .submit-btn {
flex: 1;
background: #3360dd;
border-color: #3360dd;
text-transform: uppercase;
color: #ffffff;
font-family: "Camphor Pro", sans-serif;
font-size: 21px;
margin: 0;
}
.post-last-section .subscribe-block .title {
color: #231f20;
font-family: "Camphor Std", sans-serif;
font-size: 32px;
font-weight: 700;
}
.post-last-section .subscribe-block a {
color: #3b66dd;
text-decoration: underline;
}
main.site-main.post section.section-last {
background: url(/wp-content/themes/hello-elementor-focusme/img/blue_bg.png);
background-size: auto;
background-repeat: no-repeat;
margin-top: 110px;
padding-bottom: 120px;
background-position: bottom;
}
.site-main.post section:not(.elementor-element) {
padding: 0 30px;
}
.site-main .page-header {
position: relative;
top: 130px;
z-index: 9;
left: 0;
width: 100%;
right: 0;
margin: 0 auto 30px auto;
max-width: 1220px;
/*padding-left: 10px;*/
}
.site-main .page-header .entry-title {
max-width: 1120px;
margin: 0 auto;
font-family: "CamphorStd", sans-serif;
}
/* Blog Page */
.blog-page {
padding-top: 145px;
/*background-image: url(/wp-content/themes/hello-elementor-focusme/img/blog-first-bg.png);*/
/*background-size: auto;*/
/*background-repeat: no-repeat;*/
}
.blog-page .first-bg {
position: absolute;
top: 0;
z-index: -1;
height: 1080px;
}
.blog-page .blog-title {
text-align: center;
color: #486c9d;
font-family: "CamphorStd", sans-serif;
font-size: 50px;
font-weight: 700;
margin-bottom: 95px;
}
.blog-page .first-section {
max-width: 1220px;
margin: 0 auto 50px auto;
display: flex;
flex-wrap: wrap;
}
.blog-page .first-section h3 {
color: #002b49;
font-family: "CamphorStd", sans-serif;
font-size: 37px;
font-weight: 700;
margin: 0 0 40px;
}
.blog-page .first-section .featured-posts {
width: 65%;
}
.blog-page .first-section .featured-post {
display: flex;
border-radius: 10px;
overflow: hidden;
}
.blog-page .first-section .featured-post > a{
/*max-width: 350px;*/
/*max-height: 550px;*/
max-width: 350px;
max-height: 550px;
}
.blog-page .first-section .featured-post a img {
object-fit: cover;
height: 100%;
}
.blog-page .first-section .featured-post .title a{
color: #231f20;
font-family: "CamphorStd", sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 44px;
}
.blog-page .first-section .featured-post .title {
margin: 30px 0;
}
.blog-page .first-section .featured-post .desc{
color: #231f20;
font-family: "CamphorPro", sans-serif;
font-size: 19px;
font-weight: 400;
line-height: 29px;
margin-bottom: 50px;
}
.blog-page .first-section .featured-post .content{
background: #fff;
padding: 50px 40px;
flex: 1;
}
.blog-page .first-section .featured-posts .categories {
text-decoration: underline;
color: #3360dc;
}
.blog-page .first-section .featured-posts .categories a{
color: #3360dc;
font-family: "CamphorPro", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 31px;
text-transform: uppercase;
}
.blog-page .first-section .featured-post .author-date {
color: #404041;
font-family: "CamphorStd", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 31px;
}
.blog-page .first-section .featured-post .author-date a {
color: #3360dc;
}
.blog-page .first-section .swiper-wrapper {
padding-bottom: 50px;
}
.blog-page .first-section .swiper-container .swiper-pagination-bullet{
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #486c9d;
background-color: transparent;
opacity: 1;
}
.blog-page .first-section .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active{
border: 1px solid #486c9d;
background: #486c9d;
opacity: 1;
}
.blog-page .first-section .trending-posts {
flex: 1;
margin-left: 35px;
}
.blog-page .first-section .trending-post {
margin-bottom: 60px;
}
.blog-page .first-section .trending-post .date{
color: #404041;
font-family: "CamphorPro", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 31px;
margin-bottom: 20px;
}
.blog-page .first-section .trending-post .title a{
color: #486c9d;
font-family: "CamphorStd", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 30px;
}
.wb_ps_text p,
p.wb_ps_meta_items{
font-size: 18px;
font-family: "Camphor Pro", sans-serif;
}
.post-filter {
max-width: 1220px;
margin: 0 auto 25px auto;
display: flex;
border-bottom: solid 1px #b3d4e7;
padding-bottom: 15px;
}
.post-filter ul {
padding: 0;
list-style: none;
text-align: center;
}
.post-filter ul li {
display: inline-block;
margin-right: 35px;
}
.post-filter ul li a, .post-filter .filter-by {
color: #231f20;
font-family: "CamphorStd", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 44px;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.post-filter ul li a.active, .post-filter ul li a:hover{
color: #3360dc;
}
.post-filter .filter-by {
margin-right: 100px;
}
.post-filter .filter-cat {
flex: 1;
}
.posts-list {
max-width: 1200px;
margin: 0 auto 120px auto;
}
.posts-list .items-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.posts-list .items-wrap .item-post {
max-width: 30%;
margin: 50px 0;
}
.posts-list .items-wrap .item-post img {
height: 210px;
object-fit: cover;
width: 100%;
border-radius: 10px;
margin-bottom: 40px;
}
.posts-list .items-wrap .item-post .categories {
margin-bottom: 30px;
}
.posts-list .items-wrap .item-post .categories,
.posts-list .items-wrap .item-post .categories a {
font-family: "CamphorPro", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 18px;
text-transform: uppercase;
color: #3360dc;
}
.posts-list .items-wrap .item-post .title{
margin-bottom: 25px;
}
.posts-list .items-wrap .item-post .title a {
color: #231f20;
font-family: "CamphorPro", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 28px;
}
.posts-list .items-wrap .item-post .desc{
color: #231f20;
font-family: "CamphorPro", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 29px;
margin-bottom: 30px;
}
.posts-list .items-wrap .item-post .author-date{
color: #404041;
font-family: "CamphorStd", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 31px;
}
.posts-list .items-wrap .item-post .author-date a {
color: #3360dc;
}
.posts-list .btn-wrap {
text-align: center;
margin-top: 80px;
display: none;
}
.posts-list .btn-wrap a{
color: #ffffff;
font-family: "CamphorPro", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-transform: uppercase;
background: #486c9d;
padding: 25px 115px;
border-radius: 35px;
display: inline-block;
}
/* Loader */
.lds-default {
display: inline-block;
width: 80px;
height: 80px;
position: fixed;
top: 150px;
left: calc(50% - 40px);
z-index: 1;
visibility: hidden;
}
.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: #486c9d;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1){
animation-delay: 0s;
top: 37px;
left: 66px;
}
.lds-default div:nth-child(2) {
animation-delay: -.1s;
top: 22px;
left: 62px;
}
.lds-default div:nth-child(3){
animation-delay: -.2s;
top: 11px;
left: 52px;
}
.lds-default div:nth-child(4){
animation-delay: -.3s;
top: 7px;
left: 37px;
}
.lds-default div:nth-child(5){
animation-delay: -.4s;
top: 11px;
left: 22px;
}
.lds-default div:nth-child(6){
animation-delay: -.5s;
top: 22px;
left: 11px;
}
.lds-default div:nth-child(7){
animation-delay: -.6s;
top: 37px;
left: 7px;
}
.lds-default div:nth-child(8){
animation-delay: -.7s;
top: 52px;
left: 11px;
}
.lds-default div:nth-child(9){
animation-delay: -.8s;
top: 62px;
left: 22px;
}
.lds-default div:nth-child(10){
animation-delay: -.9s;
top: 66px;
left: 37px;
}
.lds-default div:nth-child(11){
animation-delay: -1s;
top: 62px;
left: 52px;
}
.lds-default div:nth-child(12){
animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}}
body.loader .lds-default {
visibility: visible;
top: calc(50% - 40px);
z-index: 10;
}
body.loader:before {
background: rgba(255,255,255,.7);
width: 100%;
height: 100%;
content: '';
top: 0;
position: fixed;
z-index: 9;
}
.section-subscribe {
background-image: url(/wp-content/themes/hello-elementor-focusme/img/blog-last-bg.png);
padding-bottom: 150px;
background-repeat: no-repeat;
background-position: bottom;
}
.section-subscribe .subscribe-wrap {
max-width: 850px;
margin: 0 auto;
padding: 75px 100px;
box-shadow: 0 4px 34px 4px rgba(22, 145, 214, 0.1);
background: #fff;
border-radius: 10px;
}
.section-subscribe .subscribe-wrap h3 {
color: #231f20;
font-family: "CamphorStd", sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 38px;
margin: 0 0 35px;
text-align: center;
}
/*.section-subscribe .subscribe-wrap form {*/
/* !*display: flex;*!*/
/*}*/
.section-subscribe .subscribe-wrap input[type=email]{
max-width: 420px;
padding: 30px;
margin-right: 15px;
border: 1px solid #c4ddec;
border-radius: 5px;
}
.section-subscribe .subscribe-wrap input[type=email]::placeholder{
color: #404041;
font-family: "CamphorPro", sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 33px;
}
.section-subscribe .subscribe-wrap input[type=submit]{
flex: 1;
background: #3360dc;
color: #ffffff;
font-family: "CamphorPro", sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 33px;
text-transform: uppercase;
border: 1px solid #3360dc;
border-radius: 5px;
}
.section-subscribe .subscribe-wrap .input-wrap {
display: flex;
}
.section-subscribe .subscribe-wrap .privacy-policy{
text-align: center;
margin: 30px 0 0;
color: #231f20;
font-family: "CamphorPro", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 42px;
}
.section-subscribe .subscribe-wrap .privacy-policy a{
text-decoration: underline;
color: #3360dc;
}
/*radio*/
/* Hide the browser's default radio button */
/* Create a custom radio button */
.checkmark {
position: absolute;
top: calc(50% - 12.5px);
left: 20px;
height: 25px;
width: 25px;
background: #fff;
border: solid 1px #486c9d;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
/* When the radio button is checked, add a blue background */
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
/* Style the indicator (dot/circle) */
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.custom-checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: transparent;
border-radius: unset;
}
.custom-checkbox{
padding-left: 34px;
cursor: pointer;
}
/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
background-color: transparent;
}
/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark,
.custom-checkbox input:checked ~ label .checkmark{
background-color: #486c9d;
}
/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after,
.custom-checkbox input:checked ~ label .checkmark:after{
display: block;
}
/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*.payment_box .form-row {*/
/*}*/
.comments-area {
max-width: 1200px;
margin: 70px auto 0 auto;
}
/* account style*/
body.single-post main .section-content {
max-width: 1260px;
margin: 0 auto 25px auto;
}
.error404 #primary {
padding: 200px 15px 50px 15px;
max-width: 1200px;
margin: 0 auto;
}
.jck-sfr-container {
padding-top: 130px;
}
#modalPdf {
padding: 30px;
}
#modalPdf .thx-wrap{
display: none;
text-align: center;
}
#modalPdf form{
margin-top: 20px;
}
#modalPdf form input[type=email] {
border-radius: 20px;
border-color: #999;
}
#modalPdf form input[type=submit] {
width: 100%;
border-radius: 20px;
background: #26a9e0;
color: #fff;
margin-top: 10px;
}
#modalPdf form input[type=submit]:hover {
background: #fff;
color: #26a9e0;
}
#modalPdf .form-wrap > p {
text-align: center;
}
#modalPdf .form-wrap form label {
margin-top: 15px;
font-size: 14px;
color: #555;
line-height: 15px;
display: flex;
align-items: center;
cursor: pointer;
}
#modalPdf .form-wrap form label input{
margin-right: 10px;
cursor: pointer;
}
.cpt_feature_requests-post-type .site-main .page-header{
display: none;
}
.jck-sfr-pagination {
margin-bottom: 40px;
}
.jck-sfr-pagination ul.page-numbers {
list-style: none;
padding: 0;
}
.jck-sfr-pagination .page-numbers li {
display: inline-block;
}
.jck-sfr-pagination a.page-numbers, .jck-sfr-pagination span.page-numbers {
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.jck-sfr-pagination span.page-numbers.current {
background: #26a9e0;
color: #fff;
}
.delete-user-account-container {
margin-top: 70px;
text-align: center;
}
.delete-user-account-container button#delete-my-account{
border-radius: 25px;
font-family: "CamphorPro", sans-serif;
font-size: 16px;
font-weight: 400;
padding: 15px 30px;
line-height: 1;
}
.sweet-alert button {
border-radius: 25px;
font-family: CamphorPro, sans-serif;
font-size: 16px;
font-weight: 400;
padding: 15px 30px;
line-height: 1;
}
/* Pricing page */
.fme-pricing-hero {
align-items: center;
background: var(--fme-color-white);
display: flex;
min-height: 520px;
overflow: hidden;
padding: 72px 0 48px;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 51%, rgba(255,255,255,1) 100% ), url('img/pricing_hero_bg.webp') center center / cover no-repeat;
}
.fme-pricing-hero__inner {
margin: 0 auto;
max-width: 960px;
text-align: center;
}
.fme-pricing-hero__eyebrow {
background: var(--fme-color-primary-soft);
border-radius: var(--fme-radius-pill);
color: var(--fme-color-primary);
display: inline-flex;
font-size: 20px;
font-weight: var(--fme-font-weight-semibold);
line-height: 28px;
margin: 0;
padding: 10px 16px;
}
.fme-pricing-hero h1 {
margin: 34px 0 0;
}
.fme-pricing-hero__lead {
color: var(--fme-color-ink-muted);
font-size: 21px;
letter-spacing: 0.07px;
line-height: 32px;
margin: 58px 0 0;
}
.fme-pricing-hero__benefits {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 28px 42px;
justify-content: center;
list-style: none;
margin: 60px 0 0;
padding: 0;
}
.fme-pricing-hero__benefits li {
align-items: center;
color: var(--fme-color-ink-muted);
display: inline-flex;
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
gap: 14px;
line-height: 26px;
}
.fme-pricing-hero__benefits i {
color: var(--fme-color-primary);
flex: 0 0 auto;
font-size: 26px;
line-height: 1;
}
.fme-pricing-plans {
background: var(--fme-color-white);
padding: 32px 0 72px;
}
.fme-pricing-plans__grid {
display: grid;
gap: 30px;
margin: 0 auto;
max-width: 343px;
}
.fme-pricing-card {
background: var(--fme-color-white);
border: 1px solid rgba(226, 232, 240, 0.55);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
color: var(--fme-color-ink);
display: flex;
flex-direction: column;
min-height: 310px;
padding: 16px 30px;
position: relative;
text-align: center;
}
.fme-pricing-card--yearly {
border: 2px solid var(--fme-color-primary);
min-height: 310px;
order: 2;
padding-top: 30px;
}
.fme-pricing-card--monthly {
order: 1;
}
.fme-pricing-card--lifetime {
background-color: #273247;
background-image:
repeating-radial-gradient(circle at 76% 34%, transparent 0 7px, rgba(255, 255, 255, 0.025) 8px 9px),
linear-gradient(135deg, #2d384e 0%, #1f293b 100%);
border: 0;
color: var(--fme-color-white);
min-height: 318px;
order: 3;
}
.fme-pricing-card__popular {
align-items: center;
background: var(--fme-color-primary);
border-radius: 12px 12px 3px 3px;
color: var(--fme-color-white);
display: inline-flex;
font-size: 11px;
font-weight: var(--fme-font-weight-bold);
gap: 10px;
left: 50%;
line-height: 16px;
margin: 0;
padding: 0;
position: absolute;
text-transform: uppercase;
top: -24px;
transform: translateX(-50%);
white-space: nowrap;
}
.fme-pricing-card__popular span.card-container {
background: var(--fme-color-primary);
width: 100%;
padding: 12px 24px;
z-index: 2;
border-radius: 8px;
}
.fme-pricing-card__popular::before {
content: url('data:image/svg+xml,');
position: absolute;
left: -8px;
top: 0;
}
.fme-pricing-card__popular::after {
content: url('data:image/svg+xml,');
position: absolute;
right: -8px;
top: 0;
}
.fme-pricing-card__popular i {
font-size: 16px;
}
.fme-pricing-card__header {
align-items: center;
display: flex;
gap: 16px;
justify-content: center;
}
.fme-pricing-card__icon {
align-items: center;
background: var(--fme-color-primary-soft);
border-radius: 50%;
color: var(--fme-color-primary);
display: inline-flex;
flex: 0 0 56px;
font-size: 26px;
height: 56px;
justify-content: center;
width: 56px;
}
.fme-pricing-card__header h2 {
color: inherit;
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
line-height: 26px;
margin: 0;
}
.fme-pricing-card--lifetime .fme-pricing-card__icon {
background: #3677bc;
color: var(--fme-color-white);
}
.fme-pricing-card__price {
align-items: baseline;
color: inherit;
display: flex;
justify-content: center;
line-height: 1;
min-height: 48px;
margin: 25px 0 0;
}
.fme-pricing-card__price strong {
font-size: 42px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -1px;
}
.fme-pricing-card__currency {
align-self: flex-start;
font-size: 16px;
font-weight: var(--fme-font-weight-semibold);
line-height: 24px;
margin-right: 3px;
}
.fme-pricing-card__period {
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
line-height: 24px;
}
.fme-pricing-card--lifetime .fme-pricing-card__price {
display: grid;
grid-template-columns: auto auto;
margin-top: 24px;
}
.fme-pricing-card--lifetime .fme-pricing-card__currency {
grid-column: 1;
grid-row: 1;
}
.fme-pricing-card--lifetime .fme-pricing-card__price strong {
grid-column: 2;
grid-row: 1;
}
.fme-pricing-card--lifetime .fme-pricing-card__period {
grid-column: 2;
grid-row: 2;
margin-top: -3px;
}
.fme-pricing-card__saving {
align-self: center;
background: var(--fme-color-success-soft);
border-radius: var(--fme-radius-pill);
color: var(--fme-color-success);
font-size: 12px;
font-weight: var(--fme-font-weight-bold);
line-height: 18px;
margin: 5px 0 0;
padding: 1px 16px;
}
.fme-pricing-card__description {
color: var(--fme-color-ink-muted);
font-size: 14px;
font-weight: var(--fme-font-weight-semibold);
line-height: 18px;
margin: 14px 0 0;
}
.fme-pricing-card--monthly .fme-pricing-card__description {
margin-top: 26px;
}
.fme-pricing-card--lifetime .fme-pricing-card__description {
color: var(--fme-color-white);
margin-top: 20px;
}
.fme-pricing-card__button {
align-items: center;
background: var(--fme-color-white);
border: 1px solid var(--fme-color-primary);
border-radius: 8px;
box-shadow: 0 8px 14px rgba(79, 151, 240, 0.15);
display: inline-flex;
font-size: 13px;
font-weight: var(--fme-font-weight-medium);
gap: 14px;
justify-content: center;
line-height: 20px;
margin-top: auto;
min-height: 42px;
padding: 10px 20px;
text-decoration: none;
width: 100%;
}
body.fme-hardcoded-template .fme-pricing-card__button,
body.fme-hardcoded-template .fme-pricing-card__button:hover {
color: var(--fme-color-primary);
}
.fme-pricing-card__button:hover {
background: var(--fme-color-primary-soft);
}
.fme-pricing-card__button--primary {
background: var(--fme-color-primary);
border-color: var(--fme-color-primary);
box-shadow: 0 8px 14px rgba(79, 151, 240, 0.28);
}
body.fme-hardcoded-template .fme-pricing-card__button--primary,
body.fme-hardcoded-template .fme-pricing-card__button--primary:hover {
color: var(--fme-color-white);
}
.fme-pricing-card__button--primary:hover {
background: var(--fme-color-primary-dark);
border-color: var(--fme-color-primary-dark);
}
.fme-pricing-card__trial {
color: var(--fme-color-ink-muted);
font-size: 14px;
line-height: 18px;
margin: 14px 0 0;
}
.fme-pricing-card__trial span {
display: block;
}
.fme-pricing-card--lifetime .fme-pricing-card__trial {
color: rgba(255, 255, 255, 0.9);
}
.fme-pricing-guarantee {
background: #F4F9FF;
border: 1px solid #DCE7F4;
border-radius: 18px;
margin: 38px auto 0;
max-width: 343px;
overflow: hidden;
}
.fme-pricing-guarantee__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 30px 16px 26px;
}
.fme-pricing-guarantee__content {
grid-column: 1 / -1;
text-align: center;
}
.fme-pricing-guarantee__content h2 {
color: var(--fme-color-ink);
font-size: 28px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.4px;
line-height: 36px;
margin: 0;
}
.fme-pricing-guarantee__promise,
.fme-pricing-guarantee__copy {
color: var(--fme-color-ink-muted);
font-size: 13px;
line-height: 21px;
margin: 18px 0 0;
}
.fme-pricing-guarantee__promise strong {
color: var(--fme-color-success);
display: block;
font-weight: var(--fme-font-weight-medium);
}
.fme-pricing-guarantee__copy {
margin-top: 23px;
}
.fme-pricing-guarantee__copy span {
display: block;
}
.fme-pricing-guarantee__visual {
align-items: center;
display: flex;
justify-content: center;
margin-top: 24px;
min-width: 0;
}
.fme-pricing-guarantee__visual img {
display: block;
height: auto;
max-width: 100%;
}
.fme-pricing-guarantee__visual--shield img {
width: 125px;
}
.fme-pricing-guarantee__visual--badge img {
width: 112px;
}
.fme-pricing-extras {
margin: 64px auto 0;
max-width: 1224px;
}
.fme-pricing-extras h2 {
align-items: center;
color: var(--fme-color-ink);
display: flex;
font-size: 28px;
gap: 24px;
justify-content: center;
letter-spacing: -0.5px;
line-height: 1.25;
margin: 0 0 28px;
text-align: center;
}
.fme-pricing-extras h2 span {
color: #9dc9ff;
font-size: 28px;
line-height: 1;
}
.fme-pricing-extras__grid {
display: grid;
gap: 22px;
}
.fme-pricing-extra {
align-items: center;
background: var(--fme-color-white);
border: 1px solid #dbe7f5;
border-radius: 24px;
color: var(--fme-color-ink);
display: grid;
gap: 24px;
grid-template-columns: 82px minmax(0, 1fr) auto;
min-height: 138px;
padding: 26px 28px;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fme-pricing-extra:hover,
.fme-pricing-extra:focus-visible {
border-color: #9dc9ff;
box-shadow: 0 14px 32px rgba(46, 107, 217, 0.11);
color: var(--fme-color-ink);
text-decoration: none;
transform: translateY(-3px);
}
.fme-pricing-extra__icon {
align-items: center;
background: #edf2ff;
border-radius: 50%;
color: #3979e9;
display: flex;
height: 82px;
justify-content: center;
width: 82px;
}
.fme-pricing-extra--lifetime .fme-pricing-extra__icon {
background: #eaf9f0;
color: #27bd6e;
}
.fme-pricing-extra--assistance .fme-pricing-extra__icon {
background: #fff0f2;
color: #ef5b64;
}
.fme-pricing-extra__icon svg {
height: 46px;
width: 46px;
}
.fme-pricing-extra__copy {
display: grid;
gap: 8px;
}
.fme-pricing-extra__copy strong {
color: var(--fme-color-ink);
font-size: 20px;
letter-spacing: -0.3px;
line-height: 1.25;
}
.fme-pricing-extra__copy > span {
color: var(--fme-color-ink-muted);
font-size: 17px;
line-height: 1.45;
}
.fme-pricing-extra > i {
color: #2681f5;
font-size: 28px;
transition: transform .2s ease;
}
.fme-pricing-extra:hover > i,
.fme-pricing-extra:focus-visible > i {
transform: translateX(4px);
}
@media (min-width: 1200px) {
.fme-pricing-extras__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fme-pricing-extra {
gap: 20px;
grid-template-columns: 82px minmax(0, 1fr) auto;
padding: 26px;
}
}
@media (max-width: 767px) {
.fme-pricing-extras {
margin-top: 48px;
}
.fme-pricing-extras h2 {
font-size: 24px;
gap: 12px;
margin-bottom: 24px;
}
.fme-pricing-extras h2 span {
font-size: 20px;
}
.fme-pricing-extras__grid {
gap: 14px;
}
.fme-pricing-extra {
border-radius: 18px;
gap: 16px;
grid-template-columns: 64px minmax(0, 1fr) auto;
min-height: 112px;
padding: 20px 18px;
}
.fme-pricing-extra__icon {
height: 64px;
width: 64px;
}
.fme-pricing-extra__icon svg {
height: 36px;
width: 36px;
}
.fme-pricing-extra__copy strong {
font-size: 17px;
}
.fme-pricing-extra__copy > span {
font-size: 14px;
}
.fme-pricing-extra > i {
font-size: 22px;
}
}
.fme-pricing-features {
background: var(--fme-color-white);
padding: 64px 0 72px;
}
.fme-pricing-features__header {
margin: 0 auto;
text-align: center;
}
.fme-pricing-features__header h2 {
color: var(--fme-color-ink);
font-size: 28px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.4px;
line-height: 36px;
margin: 0;
}
.fme-pricing-features__header p {
color: var(--fme-color-ink-muted);
font-size: 13px;
line-height: 21px;
margin: 20px 0 0;
}
.fme-pricing-features__grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 32px;
}
.fme-pricing-feature {
border: 1px solid #DCE4EF;
border-radius: 16px;
display: flex;
flex-direction: column;
min-height: 188px;
padding: 16px;
}
.fme-pricing-feature img {
width: 100px;
}
.fme-pricing-feature__content h3 {
color: var(--fme-color-ink);
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
line-height: 22px;
margin: 10px 0 0;
}
.fme-pricing-feature__content p {
color: var(--fme-color-ink-muted);
font-size: 13px;
line-height: 21px;
margin: 22px 0 0;
}
.fme-pricing-faq {
background: var(--fme-color-white);
padding: 48px 0 72px;
}
.fme-pricing-faq__panel {
background: url(img/qa_bg.webp) center no-repeat #F4F9FF;
border-radius: 18px;
margin: 0 auto;
max-width: 343px;
padding: 48px 16px 32px;
background-size: cover;
}
.fme-pricing-faq__panel > h2 {
color: var(--fme-color-ink);
font-size: 28px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.4px;
line-height: 36px;
margin: 0;
text-align: center;
}
.fme-pricing-faq__layout {
display: grid;
gap: 32px;
margin-top: 32px;
}
.fme-pricing-faq__items {
display: grid;
gap: 12px;
}
.fme-pricing-faq__item {
background: var(--fme-color-white);
border: 1px solid #DCE4EF;
border-radius: 12px;
overflow: hidden;
}
.fme-pricing-faq__item summary {
align-items: center;
color: var(--fme-color-ink);
cursor: pointer;
display: grid;
font-size: 17px;
font-weight: var(--fme-font-weight-semibold);
gap: 12px;
grid-template-columns: 28px minmax(0, 1fr) 12px;
line-height: 23px;
list-style: none;
min-height: 72px;
padding: 14px 16px;
}
.fme-pricing-faq__item summary::-webkit-details-marker {
display: none;
}
.fme-pricing-faq__question-mark {
align-items: center;
background: var(--fme-color-primary);
border-radius: 50%;
color: var(--fme-color-white);
display: inline-flex;
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
height: 28px;
justify-content: center;
line-height: 1;
width: 28px;
}
.fme-pricing-faq__item summary i {
border-bottom: 1.5px solid var(--fme-color-ink-muted);
border-right: 1.5px solid var(--fme-color-ink-muted);
display: block;
height: 9px;
justify-self: end;
transform: rotate(45deg) translate(-2px, -2px);
width: 9px;
}
.fme-pricing-faq__item[open] summary i {
transform: rotate(225deg) translate(-1px, -1px);
}
.fme-pricing-faq__answer {
padding: 0 46px 18px 56px;
}
.fme-pricing-faq__answer p {
color: var(--fme-color-ink-muted);
font-size: 13px;
line-height: 21px;
margin: 0;
}
.fme-pricing-faq__image-placeholder {
align-items: center;
aspect-ratio: 4 / 3;
border: 1px dashed var(--fme-color-primary-disabled);
border-radius: 16px;
color: var(--fme-color-primary);
display: flex;
font-size: 13px;
justify-content: center;
padding: 20px;
text-align: center;
}
/* Thanks for signing up page */
.fme-thanks-hero {
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%), url('img/pricing_hero_bg.webp') center center / cover no-repeat;
padding: 80px 0 60px;
text-align: center;
}
.fme-thanks-hero__inner {
margin: 0 auto;
max-width: 620px;
}
.fme-thanks-hero__icon {
color: var(--fme-color-success);
font-size: 56px;
line-height: 1;
margin-bottom: 24px;
}
.fme-thanks-page .fme-thanks-hero h1 {
font-size: 36px;
letter-spacing: -0.4px;
line-height: 44px;
margin: 0;
}
.fme-thanks-hero__lead {
color: var(--fme-color-ink-muted);
font-size: 18px;
line-height: 28px;
margin: 20px 0 0;
}
.fme-thanks-hero__btn {
margin-top: 36px;
min-height: 56px;
padding: 14px 36px;
}
.fme-thanks-steps {
background: var(--fme-color-white);
padding: 48px 0 56px;
}
.fme-thanks-steps__inner {
margin: 0 auto;
max-width: 620px;
}
.fme-thanks-steps__item {
display: flex;
gap: 20px;
padding: 20px 0;
}
.fme-thanks-steps__item + .fme-thanks-steps__item {
border-top: 1px solid var(--fme-color-border);
}
.fme-thanks-steps__number {
align-items: center;
background: var(--fme-color-primary-soft);
border-radius: 50%;
color: var(--fme-color-primary);
display: flex;
flex: 0 0 36px;
font-size: 15px;
font-weight: var(--fme-font-weight-bold);
height: 36px;
justify-content: center;
width: 36px;
}
.fme-thanks-steps__item strong {
color: var(--fme-color-ink);
display: block;
font-size: 16px;
font-weight: var(--fme-font-weight-semibold);
line-height: 24px;
}
.fme-thanks-steps__item p {
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 24px;
margin: 4px 0 0;
}
.fme-thanks-resources {
background: var(--fme-color-surface);
padding: 48px 0 56px;
}
.fme-thanks-resources__inner {
margin: 0 auto;
max-width: 620px;
}
.fme-thanks-page .fme-thanks-resources h2 {
font-size: 22px;
font-weight: var(--fme-font-weight-semibold);
line-height: 30px;
margin: 0;
}
.fme-thanks-resources p {
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 26px;
margin: 16px 0 0;
}
.fme-thanks-resources a {
color: var(--fme-color-primary);
font-weight: var(--fme-font-weight-semibold);
text-decoration: none;
}
.fme-thanks-resources a:hover {
text-decoration: underline;
}
.fme-thanks-downloads-title {
font-size: 22px;
font-weight: var(--fme-font-weight-semibold);
line-height: 30px;
margin: 0 0 8px;
text-align: center;
}
.fme-thanks-steps__item a {
color: var(--fme-color-primary);
font-weight: var(--fme-font-weight-semibold);
text-decoration: none;
}
.fme-thanks-steps__item a:hover {
text-decoration: underline;
}
.fme-thanks-steps__hint {
color: var(--fme-color-dark-gray);
font-size: 13px;
line-height: 20px;
margin: 4px 0 0;
}
@media (max-width: 767px) {
.fme-thanks-hero {
padding: 60px 0 44px;
}
.fme-thanks-hero__icon {
font-size: 44px;
}
.fme-thanks-page .fme-thanks-hero h1 {
font-size: 28px;
line-height: 36px;
}
.fme-thanks-hero__lead {
font-size: 16px;
line-height: 26px;
}
}
/* 404 page */
.fme-404-page .fme-thanks-hero {
background: var(--fme-color-surface);
}
.fme-404-icon {
color: var(--fme-color-primary);
font-size: 72px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -2px;
line-height: 1;
margin-bottom: 24px;
opacity: 0.25;
}
@media (max-width: 767px) {
.fme-404-icon {
font-size: 56px;
}
}
/* FAQ page */
.fme-faq-hero {
background: var(--fme-color-surface);
padding: 64px 0 48px;
}
/* SEO landing pages (website-blocker, app-blocker, etc.) */
.fme-landing-hero {
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%), url('img/pricing_hero_bg.webp') center center / cover no-repeat;
padding: 80px 0 64px;
text-align: center;
}
.fme-landing-hero__inner {
margin: 0 auto;
max-width: 720px;
}
.fme-landing-page h1 {
font-size: 40px;
letter-spacing: -0.6px;
line-height: 50px;
margin: 0;
}
.fme-landing-hero__lead {
color: var(--fme-color-ink-muted);
font-size: 18px;
line-height: 28px;
margin: 20px 0 0;
}
.fme-landing-hero__cta {
margin-top: 36px;
}
.fme-landing-hero__bullets {
list-style: none;
margin: 20px 0 0;
padding: 0;
text-align: left;
display: inline-block;
}
.fme-landing-hero__bullets li {
font-size: 16px;
line-height: 28px;
padding-left: 24px;
position: relative;
}
.fme-landing-hero__bullets li::before {
content: "\f26a";
font-family: "bootstrap-icons";
color: var(--fme-color-primary);
position: absolute;
left: 0;
}
.fme-landing-hero__note {
color: var(--fme-color-ink-muted);
font-size: 13px;
line-height: 20px;
margin: 12px 0 0;
}
.fme-landing-section {
padding: 56px 0;
}
.fme-landing-section--surface {
background: var(--fme-color-surface);
}
.fme-landing-section__title {
font-size: 28px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.4px;
line-height: 36px;
margin: 0 0 32px;
text-align: center;
}
.fme-landing-prose {
margin: 0 auto;
max-width: 720px;
}
.fme-landing-prose h2 {
font-size: 26px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.3px;
line-height: 34px;
margin: 0 0 16px;
}
.fme-landing-prose p {
color: var(--fme-color-ink-muted);
font-size: 16px;
line-height: 26px;
margin: 12px 0 0;
}
.fme-landing-prose p:first-of-type {
margin-top: 0;
}
/* Landing page cards (how it works, use cases) */
.fme-landing-cards {
display: grid;
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0 auto;
max-width: 1000px;
}
.fme-landing-cards--four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fme-landing-card {
background: var(--fme-color-white);
border: 1px solid var(--fme-color-border);
border-radius: 16px;
padding: 28px 24px;
}
.fme-landing-card__number {
align-items: center;
background: var(--fme-color-primary-soft);
border-radius: 50%;
color: var(--fme-color-primary);
display: inline-flex;
font-size: 15px;
font-weight: var(--fme-font-weight-bold);
height: 36px;
justify-content: center;
margin-bottom: 16px;
width: 36px;
}
.fme-landing-card h3 {
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
line-height: 24px;
margin: 0 0 8px;
}
.fme-landing-card p {
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 24px;
margin: 0;
}
/* Feature rows */
.fme-landing-features-table {
margin: 0 auto;
max-width: 800px;
}
.fme-landing-feature-row {
border-bottom: 1px solid var(--fme-color-border);
display: grid;
gap: 8px 24px;
grid-template-columns: 260px minmax(0, 1fr);
padding: 16px 0;
}
.fme-landing-feature-row:first-child {
border-top: 1px solid var(--fme-color-border);
}
.fme-landing-feature-row strong {
color: var(--fme-color-ink);
font-size: 15px;
font-weight: var(--fme-font-weight-semibold);
line-height: 24px;
}
.fme-landing-feature-row span {
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 24px;
}
/* Testimonials */
.fme-landing-testimonials {
display: grid;
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0 auto;
max-width: 1000px;
}
.fme-landing-testimonial {
background: var(--fme-color-surface);
border-radius: 16px;
margin: 0;
padding: 28px 24px;
}
.fme-landing-testimonial p {
color: var(--fme-color-ink);
font-size: 15px;
font-style: italic;
line-height: 24px;
margin: 0;
}
.fme-landing-testimonial cite {
color: var(--fme-color-ink-muted);
display: block;
font-size: 13px;
font-style: normal;
margin-top: 16px;
}
.fme-landing-testimonial cite a {
color: var(--fme-color-primary);
text-decoration: none;
}
.fme-landing-testimonial cite a:hover {
text-decoration: underline;
}
/* FAQ accordion */
.fme-landing-faq {
margin: 0 auto;
max-width: 720px;
}
.fme-landing-faq__item {
border-bottom: 1px solid var(--fme-color-border);
}
.fme-landing-faq__item:first-child {
border-top: 1px solid var(--fme-color-border);
}
.fme-landing-faq__item summary {
color: var(--fme-color-ink);
cursor: pointer;
font-size: 16px;
font-weight: var(--fme-font-weight-semibold);
line-height: 24px;
list-style: none;
padding: 18px 0;
}
.fme-landing-faq__item summary::-webkit-details-marker {
display: none;
}
.fme-landing-faq__answer {
padding: 0 0 18px;
}
.fme-landing-faq__answer p {
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 24px;
margin: 0;
}
/* Bottom CTA */
.fme-landing-cta {
background: var(--fme-color-white);
padding: 64px 0;
text-align: center;
}
.fme-landing-cta__inner {
margin: 0 auto;
max-width: 600px;
}
.fme-landing-cta h2 {
font-size: 30px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.4px;
line-height: 38px;
margin: 0 0 24px;
}
.fme-landing-cta__price {
color: var(--fme-color-dark-gray);
font-size: 13px;
line-height: 20px;
margin: 16px 0 0;
}
@media (max-width: 767px) {
.fme-landing-hero {
padding: 60px 0 48px;
}
.fme-landing-page h1 {
font-size: 28px;
line-height: 36px;
}
.fme-landing-hero__lead {
font-size: 16px;
line-height: 26px;
}
.fme-landing-hero__bullets li {
font-size: 15px;
line-height: 26px;
}
.fme-landing-cards {
grid-template-columns: 1fr;
}
.fme-landing-cards--four {
grid-template-columns: 1fr;
}
.fme-landing-feature-row {
grid-template-columns: 1fr;
}
.fme-landing-testimonials {
grid-template-columns: 1fr;
}
.fme-landing-section__title {
font-size: 24px;
line-height: 32px;
}
.fme-landing-prose h2 {
font-size: 22px;
line-height: 30px;
}
.fme-landing-cta h2 {
font-size: 24px;
line-height: 32px;
}
}
/* How It Works page */
.fme-how-hero {
background: var(--fme-color-white);
overflow: hidden;
padding: 48px 0 64px;
}
.fme-how-hero__grid {
display: grid;
gap: 40px;
}
.fme-how-hero h1 {
color: var(--fme-color-ink);
font-size: 42px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.8px;
line-height: 51px;
margin: 0;
}
.fme-how-hero__lead {
color: var(--fme-color-ink-muted);
font-size: 18px;
line-height: 28px;
margin: 28px 0 0;
max-width: 620px;
}
.fme-how-hero__benefits {
display: grid;
gap: 16px;
list-style: none;
margin: 36px 0 0;
padding: 0;
}
.fme-how-hero__benefits li {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
font-size: 16px;
font-weight: var(--fme-font-weight-semibold);
gap: 12px;
line-height: 24px;
}
.fme-how-hero__benefits i {
color: var(--fme-color-primary);
flex: 0 0 auto;
font-size: 24px;
line-height: 1;
}
.fme-how-hero__image-placeholder {
align-items: center;
aspect-ratio: 4 / 3;
background: var(--fme-color-primary-soft);
border: 1px dashed var(--fme-color-primary-disabled);
border-radius: 18px;
color: var(--fme-color-primary);
display: flex;
font-size: 14px;
justify-content: center;
min-height: 320px;
padding: 24px;
text-align: center;
}
.fme-how-blocking {
background: var(--fme-color-white);
padding: 16px 0 32px;
}
.fme-how-blocking__content {
text-align: center;
}
.fme-how-blocking__content > p + p {
margin-top: 0;
}
.fme-how-blocking__flow-placeholder {
aspect-ratio: 2.35 / 1;
margin-top: 24px;
min-height: 126px;
width: 100%;
}
.fme-how-blocking__app-placeholder {
display: none;
}
.fme-how-focus {
background: var(--fme-color-white);
padding: 0 0 48px;
}
.fme-how-focus__panel {
background: #F4F9FF;
border: 1px solid #DCE7F4;
border-radius: 18px;
display: grid;
padding: 16px 0;
}
.fme-how-focus__content {
padding: 0 16px;
text-align: center;
}
.fme-how-focus__image-placeholder {
aspect-ratio: 1.05 / 1;
margin: 32px 16px 0;
min-height: 300px;
}
.fme-how-focus__modes {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 32px;
}
.fme-how-focus-mode {
align-items: center;
background: var(--fme-color-white);
border: 1px solid #E2E8F0;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
justify-content: center;
padding: 27px 32px;
text-align: center;
}
.fme-how-focus-mode > i {
color: var(--fme-color-primary);
font-size: 50px;
line-height: 1;
}
.fme-how-focus-mode--green > i {
color: var(--fme-color-success);
}
.fme-how-focus-mode--purple > i {
color: #8B5CF6;
}
.fme-how-protection {
background: var(--fme-color-white);
padding: 48px 0 64px;
}
.fme-how-protection__content {
text-align: center;
}
.fme-how-protection__content > h2 {
color: var(--fme-color-ink);
font-size: 28px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: -0.4px;
line-height: 36px;
margin: 0;
}
.fme-how-protection__lead {
color: var(--fme-color-ink-muted);
font-size: 16px;
line-height: 24px;
margin: 20px auto 0;
max-width: 360px;
}
.fme-how-protection__features {
display: grid;
gap: 28px 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 32px;
}
.fme-how-protection-feature {
min-width: 0;
text-align: left;
}
.fme-how-protection-feature__icon {
align-items: center;
background: var(--fme-color-primary);
border-radius: 50%;
color: var(--fme-color-white);
display: inline-flex;
font-size: 28px;
height: 56px;
justify-content: center;
width: 56px;
}
.fme-how-protection-feature h3 {
color: var(--fme-color-ink);
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
line-height: 23px;
margin: 14px 0 0;
}
.fme-how-protection-feature p {
color: var(--fme-color-ink-muted);
font-size: 13px;
line-height: 20px;
margin: 8px 0 0;
}
.fme-how-protection__image-placeholder {
aspect-ratio: 1.2 / 1;
margin-top: 40px;
min-height: 320px;
}
.fme-how-schedule {
background: var(--fme-color-white);
padding: 0 0 64px;
}
.fme-how-schedule__panel {
background: #F4F9FF;
border: 1px solid #DCE7F4;
border-radius: 18px;
display: grid;
padding: 32px 16px;
}
.fme-how-schedule__content {
text-align: center;
}
.fme-how-schedule__content p + p {
margin-top: 24px;
}
.fme-how-schedule__screen {
box-shadow: var(--fme-shadow-md);
min-height: 0;
position: absolute;
width: 88%;
}
.fme-how-schedule__screen--back {
height: 230px;
left: 0;
top: 0;
}
.fme-how-schedule__screen--front {
bottom: 0;
height: 250px;
right: 0;
}
.fme-how-goals {
background: var(--fme-color-white);
padding: 48px 0 64px;
}
.fme-how-goals__grid {
display: grid;
}
.fme-how-goals__content {
text-align: center;
}
.fme-how-goals__supporting-screens {
display: grid;
gap: 16px;
margin-top: 32px;
}
.fme-how-weekly {
background: var(--fme-color-white);
padding: 0 0 64px;
}
.fme-how-weekly__panel {
background: #F4F9FF;
border: 1px solid #DCE7F4;
border-radius: 18px;
display: grid;
gap: 24px;
grid-template-areas:
"content"
"dashboard"
"robot";
overflow: hidden;
padding: 32px 16px 0;
}
.fme-how-weekly__content {
grid-area: content;
margin: 0 auto;
max-width: 420px;
text-align: center;
}
.fme-how-weekly__dashboard {
aspect-ratio: .84 / 1;
grid-area: dashboard;
min-height: 420px;
width: 100%
}
.fme-how-devices {
background: var(--fme-color-white);
padding: 24px 0 0;
background-image: url(img/devices_bg.webp);
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
}
.fme-how-devices__inner {
display: grid;
grid-template-areas:
"content"
"media"
"platforms";
overflow: hidden;
}
.fme-how-devices__content {
grid-area: content;
padding: 32px 16px 16px;
text-align: center;
}
.fme-how-devices__media {
background: #F5F5F5;
grid-area: media;
min-height: 260px;
}
.fme-how-devices__platforms {
align-items: center;
display: flex;
gap: 24px;
grid-area: platforms;
justify-content: space-around;
list-style: none;
margin: 0;
padding: 32px 16px;
}
.fme-how-devices__platforms li {
color: #91A9C9;
line-height: 1;
}
.fme-how-devices__platforms i {
font-size: 32px;
}
.fme-how-devices__img {
display: block;
width: 100%;
}
/* Login form styling for /my-account/ */
#loginform {
max-width: 400px;
margin: 0 auto;
padding: 40px;
}
#loginform label {
display: block;
margin-bottom: 5px;
font-family: "Camphor Pro", sans-serif;
font-size: 14px;
color: #231f20;
}
#loginform .input {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: 1px solid #b5d4e6;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
#loginform .button.button-primary {
background: #3360dd;
color: #fff;
border: none;
padding: 12px 30px;
font-family: "Camphor Pro", sans-serif;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
width: 100%;
}
#loginform .button.button-primary:hover {
background: #2850c0;
}
#loginform .login-remember {
margin-bottom: 15px;
}
.fme-site-header__toggle.d-inline-flex.d-lg-none:hover,
.fme-site-header__toggle.d-inline-flex.d-lg-none:focus,
.fme-mobile-menu__close:focus,
.fme-mobile-menu__close:hover {
background-color: transparent !important;
}
.img-icon-mobile {
width: 40px;
margin-bottom: 16px;
}
.fme-how-hero_background {
position: absolute;
right: 0;
z-index: 1;
max-width: 55vw;
max-height: 800px;
overflow: hidden;
}
.fme-how-hero__benefits {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
margin-top: 88px;
}
.fme-how-hero__benefits li {
font-size: 18px;
gap: 14px;
line-height: 26px;
}
.fme-how-hero__benefits i {
font-size: 26px;
}
.logos-container {
display: flex;
padding: 50px 0 130px;
justify-content: space-between;
}
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
background-color: var(--fme-color-primary-dark) !important;
}
/* ===== Features page ===== */
.fme-features-hero {
background: var(--fme-color-white);
padding: 48px 0 0;
text-align: center;
}
.fme-features-hero h1 {
color: var(--fme-color-ink);
font-size: 36px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.8px;
line-height: 1.2;
margin: 0 auto;
max-width: 700px;
}
.fme-features-hero__lead {
color: var(--fme-color-ink-muted);
font-size: 18px;
line-height: 28px;
margin: 20px auto 0;
max-width: 620px;
}
.fme-features-highlights {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
margin: 48px auto 0;
max-width: 1100px;
padding: 0 0 64px;
}
.fme-features-highlight {
background: var(--fme-color-surface);
border-radius: var(--fme-radius-lg);
padding: 32px 28px;
text-align: left;
}
.fme-features-highlight__icon {
align-items: center;
background: var(--fme-color-primary-soft);
border-radius: var(--fme-radius-md);
color: var(--fme-color-primary);
display: inline-flex;
font-size: 22px;
height: 44px;
justify-content: center;
width: 44px;
}
.fme-features-highlight h3 {
color: var(--fme-color-ink);
font-size: 18px;
font-weight: var(--fme-font-weight-semibold);
margin: 16px 0 8px;
}
.fme-features-highlight p {
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 24px;
margin: 0;
}
.fme-features-section {
padding: 64px 0;
}
.fme-features-section--alt {
background: var(--fme-color-surface);
}
.fme-features-section__header {
margin-bottom: 32px;
max-width: 700px;
}
.fme-features-section__header h2 {
color: var(--fme-color-ink);
font-size: 28px;
font-weight: var(--fme-font-weight-bold);
letter-spacing: -0.4px;
margin: 0;
}
.fme-features-section__header p {
color: var(--fme-color-ink-muted);
font-size: 16px;
line-height: 26px;
margin: 12px 0 0;
}
.fme-features-table-wrap {
overflow-x: auto;
}
.fme-features-table {
border-collapse: collapse;
width: 100%;
}
.fme-features-table thead th {
background: var(--fme-color-primary);
color: var(--fme-color-white);
font-size: 14px;
font-weight: var(--fme-font-weight-semibold);
letter-spacing: 0.3px;
padding: 14px 20px;
text-align: left;
text-transform: uppercase;
}
.fme-features-table thead th:first-child {
border-radius: var(--fme-radius-md) 0 0 0;
}
.fme-features-table thead th:last-child {
border-radius: 0 var(--fme-radius-md) 0 0;
}
.fme-features-table tbody td {
border-bottom: 1px solid var(--fme-color-border);
color: var(--fme-color-ink-muted);
font-size: 15px;
line-height: 24px;
padding: 16px 20px;
vertical-align: top;
}
.fme-features-table tbody td:first-child {
white-space: nowrap;
}
.fme-features-table tbody td strong {
color: var(--fme-color-ink);
font-weight: var(--fme-font-weight-semibold);
}
.fme-features-table tbody tr:last-child td {
border-bottom: 0;
}
/* Responsive media queries */
@media (min-width: 992px) {
/* Features page */
.fme-features-highlights {
grid-template-columns: repeat(2, 1fr);
}
.fme-features-hero h1 {
font-size: 42px;
}
.fme-features-table tbody td:first-child {
width: 220px;
}
.fme-site-header__inner {
height: 96px;
}
.fme-site-header.fixed .fme-site-header__inner {
height: 75px;
}
.fme-site-header.fixed .fme-site-header__brand {
width: 145px;
}
.fme-site-header.fixed .fme-site-header__brand img {
width: 100px;
}
.fme-home-attention__content {
gap: 50px;
display: flex;
flex-wrap: wrap;
}
.fme-site-footer__inner {
gap: 48px;
padding-bottom: 64px;
padding-top: 64px;
}
.fme-site-footer__inner::before {
height: 470px;
left: auto;
right: -190px;
top: -2px;
transform: none;
width: 470px;
content: url('data:image/svg+xml,');
position: absolute;
pointer-events: none;
}
.fme-site-footer__top {
align-items: flex-start;
gap: 64px;
grid-template-columns: minmax(280px, 430px) 1fr;
}
.fme-site-footer__brand {
text-align: left;
}
.fme-site-footer__brand p {
margin-left: 0;
margin-right: 0;
}
.fme-site-footer__nav {
gap: 64px;
}
.fme-site-footer__socials {
gap: 52px;
justify-content: center;
}
.fme-home-hero {
padding: 75px 0 40px;
}
.fme-home-hero__grid {
align-items: center;
gap: 70px;
grid-template-columns: minmax(0, 1fr) minmax(520px, 0.95fr);
min-height: 720px;
}
.fme-home-hero__content::before {
border-width: 76px;
height: 620px;
left: 155px;
top: -140px;
transform: none;
width: 620px;
}
.fme-home-hero__content::after {
border-bottom-width: 58px;
border-left-width: 280px;
border-top-width: 58px;
left: 420px;
top: 245px;
}
.fme-home-hero__lead {
font-size: var(--fme-font-size-body-lg);
line-height: var(--fme-line-height-body-lg);
margin-top: 44px;
}
.fme-home-hero__actions {
align-items: center;
display: flex;
gap: 16px;
margin-top: 44px;
}
.fme-home-hero__primary-btn {
width: 274px;
}
.fme-home-hero__secondary-btn {
width: 246px;
}
.fme-home-hero__checks {
display: flex;
gap: 26px;
margin-top: 52px;
}
.fme-home-hero__checks li {
font-size: var(--fme-font-size-body);
}
.fme-home-hero__visual {
align-items: center;
gap: 28px;
grid-template-columns: 1fr;
}
.fme-home-hero__image {
min-height: 520px;
}
.fme-home-hero__image-placeholder {
min-height: 520px;
}
.fme-home-stats {
padding: 40px 0;
}
.fme-home-stats__grid {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1600px;
min-height: 76px;
width: 100%;
padding: 40px 0px;
display: flex;
border-radius: 16px;
background: var(--White, #FFF);
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
}
.fme-home-stats__item {
background: transparent;
border-radius: 0;
box-shadow: none;
flex: 0 0 auto;
min-height: 0;
padding: 0;
}
.fme-home-stats__content strong {
color: var(--Ink, #0F172A);
text-align: left;
font-family: Inter;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 75% */
letter-spacing: -0.312px;
}
.fme-home-attention {
padding: 100px 0;
}
.fme-home-attention__grid {
align-items: center;
gap: 96px;
grid-template-columns: minmax(320px, 490px) 1fr;
margin: 0 auto;
padding-left: 100px;
}
.fme-home-attention__graphic {
min-height: 360px;
}
.fme-home-attention__graphic-placeholder {
min-height: 360px;
}
.fme-home-feature__grid {
align-items: center;
grid-template-columns: minmax(360px, 0.45fr) minmax(360px, 0.65fr);
margin: 0 auto;
}
.fme-home-feature.fme-home-feature--enforced .fme-home-feature__grid {
grid-template-columns: minmax(360px, 0.8fr) minmax(360px, 0.62fr);
}
.fme-home-feature__content {
order: initial;
}
.fme-home-feature__content p {
max-width: 470px;
}
.fme-home-feature__benefits {
align-items: center;
display: flex;
gap: 44px;
margin-top: 50px;
flex-wrap: wrap;
}
.fme-home-focus-way {
padding: 0;
}
.fme-home-focus-way__header {
align-items: center;
display: grid;
gap: 64px;
grid-template-columns: minmax(360px, 430px) 1fr;
padding-left: 70px;
padding-right: 60px;
}
.fme-home-focus-way__modes {
display: flex;
gap: 24px;
margin: 0;
overflow: visible;
padding: 0;
justify-content: space-between;
}
.fme-home-focus-way__modes li {
flex: initial;
min-height: 68px;
}
.fme-home-focus-way__media,
.fme-home-focus-way__media-placeholder {
min-height: 420px;
}
.fme-home-testimonials {
padding: 88px 0 100px;
}
.fme-home-testimonials__grid {
align-items: start;
gap: 56px;
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(140px, 0.7fr);
}
.fme-home-testimonial-card {
min-height: 216px;
}
.fme-home-final-cta__inner {
align-items: center;
margin: 0 auto;
max-width: 1600px;
min-height: 470px;
padding: 80px;
justify-content: end;
}
.fme-home-final-cta__art {
min-height: 300px;
}
.fme-home-final-cta__checks {
align-items: center;
display: flex;
gap: 40px;
justify-content: center;
}
.fme-how-hero {
padding: 0;
}
.fme-how-hero .container {
max-width: 1600px;
}
.fme-how-hero__grid {
gap: 0;
min-height: 804px;
}
.fme-how-hero__content {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 30px 80px 0;
z-index: 2;
}
.fme-how-hero h1 {
font-size: clamp(52px, 4vw, 64px);
letter-spacing: -1.68px;
line-height: 1.25;
}
.fme-how-hero__lead {
font-size: 21px;
line-height: 39px;
margin-top: 58px;
}
.fme-how-hero__image-placeholder {
align-self: end;
aspect-ratio: auto;
border-radius: 0;
font-size: 16px;
height: 736px;
min-height: 0;
width: 100%;
}
.fme-how-blocking {
padding: 90px 0;
}
.fme-how-blocking .container,
.fme-how-focus .container {
max-width: 1600px;
}
.fme-how-blocking__grid {
align-items: center;
display: grid;
gap: 90px;
grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
}
.fme-how-blocking__content {
text-align: left;
}
.fme-how-blocking__flow-placeholder {
margin-top: 34px;
}
.fme-how-blocking__app-placeholder {
display: flex;
min-height: 430px;
}
.fme-how-focus {
padding-bottom: 80px;
}
.fme-how-focus__panel {
align-items: start;
gap: 22px 70px;
grid-template-areas:
"image content"
"image modes";
grid-template-columns: minmax(0, 60%) minmax(320px, 1fr);
min-height: 536px;
padding: 48px 50px;
}
.fme-how-focus__content {
grid-area: content;
padding: 12px 0 0;
text-align: left;
}
.fme-how-focus__image-placeholder {
align-self: stretch;
aspect-ratio: auto;
grid-area: image;
margin: 0;
min-height: 440px;
}
.fme-how-focus__modes {
align-self: start;
gap: 16px;
grid-area: modes;
margin-top: 0;
}
.fme-pricing-card__button.fme-pricing-card__button--primary {
margin-top: 25px;
}
}
@media (min-width: 1200px) {
/* Features page */
.fme-features-highlights {
grid-template-columns: repeat(4, 1fr);
}
.fme-features-hero h1 {
font-size: 48px;
}
.fme-pricing-plans {
padding: 48px 0 80px;
}
.fme-pricing-plans .container {
max-width: 1480px;
}
.fme-pricing-plans__grid {
align-items: center;
gap: 30px;
grid-template-columns: repeat(2, minmax(0, 380px));
justify-content: center;
max-width: none;
}
.fme-pricing-card {
border-radius: 30px;
min-height: 750px;
padding: 48px 44px 30px;
}
.fme-pricing-card--monthly {
order: 1;
}
.fme-pricing-card--yearly {
min-height: 750px;
order: 2;
padding: 68px 22px 30px;
}
.fme-pricing-card--lifetime {
min-height: 750px;
order: 3;
padding: 48px 44px 30px;
}
.fme-pricing-card__popular {
border-radius: 8px;
font-size: 20px;
gap: 12px;
line-height: 28px;
top: -26px;
}
.fme-pricing-card__popular i {
font-size: 24px;
}
.fme-pricing-card__header {
flex-direction: column;
gap: 34px;
}
.fme-pricing-card__icon {
flex-basis: 84px;
font-size: 38px;
height: 84px;
width: 84px;
}
.fme-pricing-card--yearly .fme-pricing-card__icon {
flex-basis: 104px;
font-size: 46px;
height: 104px;
width: 104px;
}
.fme-pricing-card__header h2 {
font-size: 28px;
line-height: 36px;
}
.fme-pricing-card__price {
margin-top: 52px;
}
.fme-pricing-card__price strong {
font-size: 72px;
letter-spacing: -2px;
}
.fme-pricing-card__currency {
font-size: 36px;
line-height: 44px;
margin-right: 6px;
}
.fme-pricing-card__period {
font-size: 26px;
line-height: 34px;
}
.fme-pricing-card__saving {
font-size: 16px;
line-height: 24px;
margin-top: 20px;
padding: 4px 20px;
}
.fme-pricing-card__description {
font-size: 20px;
line-height: 36px;
margin-top: 34px;
}
.fme-pricing-card--monthly .fme-pricing-card__description {
margin-top: 54px;
}
.fme-pricing-card--lifetime .fme-pricing-card__price {
margin-top: 20px;
}
.fme-pricing-card--lifetime .fme-pricing-card__description {
margin-top: 38px;
}
.fme-pricing-card__button {
font-size: 16px;
line-height: 24px;
min-height: 74px;
}
.fme-pricing-card__button i {
display: none;
}
.fme-pricing-card__trial {
font-size: 20px;
line-height: 36px;
margin-top: 40px;
}
.fme-pricing-guarantee {
border-radius: 22px;
margin-top: 70px;
max-width: none;
}
.fme-pricing-guarantee__inner {
align-items: center;
gap: 45px;
grid-template-columns: 240px minmax(0, 1fr) 190px;
min-height: 303px;
padding: 40px 90px;
}
.fme-pricing-guarantee__content {
grid-column: auto;
grid-row: 1;
text-align: left;
}
.fme-pricing-guarantee__content h2 {
font-size: 42px;
letter-spacing: -0.8px;
line-height: 51px;
}
.fme-pricing-guarantee__promise,
.fme-pricing-guarantee__copy {
font-size: 20px;
line-height: 32px;
margin-top: 20px;
}
.fme-pricing-guarantee__promise strong,
.fme-pricing-guarantee__copy span {
display: inline;
}
.fme-pricing-guarantee__promise strong {
font-weight: var(--fme-font-weight-semibold);
}
.fme-pricing-guarantee__copy {
margin-top: 20px;
}
.fme-pricing-guarantee__visual {
grid-row: 1;
margin-top: 0;
}
.fme-pricing-guarantee__visual--shield {
grid-column: 1;
}
.fme-pricing-guarantee__visual--shield img {
width: 260px;
}
.fme-pricing-guarantee__visual--badge {
grid-column: 3;
}
.fme-pricing-guarantee__visual--badge img {
width: 210px;
}
.fme-pricing-features {
padding: 70px 0;
}
.fme-pricing-features .container {
max-width: 1600px;
}
.fme-pricing-features__header h2 {
font-size: 42px;
letter-spacing: -0.8px;
line-height: 51px;
}
.fme-pricing-features__header p {
font-size: 21px;
line-height: 32px;
margin-top: 20px;
}
.fme-pricing-features__grid {
gap: 32px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 100px;
}
.fme-pricing-feature {
align-items: center;
border-radius: 16px;
flex-direction: row;
gap: 32px;
min-height: 200px;
padding: 34px 50px;
}
.fme-pricing-feature__icon {
flex-basis: 100px;
font-size: 12px;
height: 100px;
width: 100px;
}
.fme-pricing-feature__content h3 {
font-size: 28px;
line-height: 34px;
margin-top: 0;
}
.fme-pricing-feature__content p {
font-size: 18px;
line-height: 26px;
margin-top: 22px;
}
.fme-pricing-faq {
padding: 40px 0 110px;
}
.fme-pricing-faq .container {
max-width: 1600px;
}
.fme-pricing-faq__panel {
border-radius: 20px;
max-width: none;
min-height: 804px;
padding: 110px 66px;
}
.fme-pricing-faq__panel > h2 {
font-size: 42px;
letter-spacing: -0.8px;
line-height: 51px;
}
.fme-pricing-faq__layout {
align-items: center;
gap: 40px;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
margin-top: 42px;
}
.fme-pricing-faq__items {
gap: 16px;
}
.fme-pricing-faq__item {
border-radius: 12px;
}
.fme-pricing-faq__item summary {
font-size: 28px;
gap: 16px;
grid-template-columns: 30px minmax(0, 1fr) 16px;
line-height: 36px;
min-height: 100px;
padding: 24px;
}
.fme-pricing-faq__question-mark {
font-size: 20px;
height: 30px;
width: 30px;
}
.fme-pricing-faq__item summary i {
height: 12px;
width: 12px;
}
.fme-pricing-faq__answer {
padding: 0 56px 24px 70px;
}
.fme-pricing-faq__answer p {
font-size: 16px;
line-height: 24px;
}
.fme-pricing-faq__image-placeholder {
aspect-ratio: auto;
font-size: 16px;
min-height: 450px;
}
.fme-how-protection {
padding: 40px 0;
}
.fme-how-protection .container {
max-width: 1600px;
}
.fme-how-protection__grid {
align-items: center;
display: grid;
gap: 40px;
grid-template-columns: minmax(0, 31%) minmax(0, 1fr);
min-height: 778px;
}
.fme-how-protection__content {
text-align: left;
}
.fme-how-protection__content > h2 {
font-size: 42px;
letter-spacing: -0.8px;
line-height: 51px;
}
.fme-how-protection__lead {
font-size: 18px;
line-height: 26px;
margin-left: 0;
margin-right: 0;
max-width: 360px;
}
.fme-how-protection__features {
gap: 28px 32px;
margin-top: 28px;
}
.fme-how-protection-feature__icon {
font-size: 34px;
height: 72px;
width: 72px;
}
.fme-how-protection-feature h3 {
font-size: clamp(22px, 1.75vw, 28px);
line-height: 1.2;
margin-top: 20px;
}
.fme-how-protection-feature p {
font-size: 18px;
line-height: 26px;
margin-top: 8px;
}
.fme-how-protection__image-placeholder {
align-self: stretch;
aspect-ratio: auto;
margin-top: 0;
min-height: 740px;
}
.fme-how-schedule {
padding: 80px 0;
}
.fme-how-schedule .container {
max-width: 1600px;
}
.fme-how-schedule__panel {
align-items: start;
gap: 20px;
grid-template-areas: "screens content";
grid-template-columns: minmax(0, 68%) minmax(0, 1fr);
padding: 50px 20px;
}
.fme-how-schedule__content {
grid-area: content;
padding-top: 20px;
text-align: left;
}
.fme-how-schedule__content p + p {
margin-top: 24px;
}
.fme-how-schedule__screen {
width: 72%;
}
.fme-how-schedule__screen--back {
height: 440px;
}
.fme-how-schedule__screen--front {
height: 440px;
}
.fme-how-goals {
padding: 40px 0;
}
.fme-how-goals .container {
max-width: 1600px;
}
.fme-how-goals__grid {
gap: 0 24px;
grid-template-areas:
"content main"
"supporting main";
grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
grid-template-rows: 390px minmax(0, 1fr);
min-height: 944px;
}
.fme-how-goals__content {
align-self: stretch;
grid-area: content;
padding: 170px 24px 0;
text-align: left;
}
.fme-how-goals__content p {
font-size: 18px;
line-height: 26px;
margin-left: 0;
margin-right: 0;
max-width: 500px;
}
.fme-how-goals__supporting-screens {
align-content: start;
gap: 30px;
grid-area: supporting;
margin-top: 0;
padding: 0 24px;
}
.fme-how-goals__small-screen {
aspect-ratio: auto;
max-width: 400px;
min-height: 155px;
}
.fme-how-goals__small-screen--streak {
min-height: 202px;
}
.fme-how-goals__main-screen {
align-self: stretch;
aspect-ratio: auto;
grid-area: main;
margin: 40px 0;
min-height: 0;
}
.fme-how-weekly {
padding: 40px 0;
}
.fme-how-weekly .container {
max-width: 1600px;
}
.fme-how-weekly__panel {
align-items: center;
gap: 38px;
grid-template-areas: "dashboard content" "dashboard robot";
grid-template-columns: minmax(0, 64%) minmax(360px, 1fr);
padding: 40px 20px;
}
.fme-how-weekly__content {
align-self: end;
margin: 0;
max-width: 440px;
text-align: left;
}
.fme-how-weekly__dashboard {
align-self: stretch;
aspect-ratio: auto;
min-height: 600px;
}
.fme-how-weekly__robot {
align-self: start;
aspect-ratio: auto;
max-width: 460px;
min-height: 300px;
}
.fme-how-devices {
padding-top: 25px;
}
.fme-how-devices .container {
max-width: 1600px;
}
.fme-how-devices__inner {
grid-template-areas:
"content media"
"platforms media";
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
grid-template-rows: 330px minmax(0, 1fr);
min-height: 655px;
}
.fme-how-devices__content {
align-self: end;
padding: 0 20px 20px;
text-align: left;
}
.fme-how-devices__content p {
font-size: 18px;
line-height: 26px;
margin-top: 20px;
}
.fme-how-devices__content p + p {
margin-top: 20px;
}
.fme-how-devices__media {
min-height: 643px;
}
.fme-how-devices__platforms {
align-self: start;
gap: 64px;
justify-content: flex-start;
padding: 20px;
}
.fme-how-devices__platforms i {
font-size: 38px;
}
.fme-how-devices__img {
display: none;
}
}
@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: var(--fme-container-max-width);
}
}
@media screen and (max-width: 1400px) {
.fme-how-devices {
background: transparent;
background-image: none;
}
.fme-how-devices__inner {
grid-template-areas: "content" "image" "platforms";
grid-template-columns: 1fr;
grid-template-rows: auto;
min-height: unset;
}
.fme-how-devices__img {
display: block !important;
grid-area: image;
max-width: 700px;
margin: 0 auto;
}
.fme-how-devices__content {
text-align: center;
}
.fme-how-devices__platforms {
justify-content: center;
}
.fme-home-attention__grid {
align-items: center;
gap: 32px;
padding-left: 0;
}
h1 {
font-size: 56px;
line-height: 1.3;
}
h2 {
font-size: 36px;
}
.fme-home-focus-way__modes {
gap: 16px;
justify-content: flex-start;
flex-wrap: wrap;
}
.fme-home-final-cta__inner {
padding: 24px;
}
.fme-home-final-cta {
background-position-x: right, -200px;
}
.fme-how-hero__grid {
min-height: 680px;
}
.fme-how-hero_background {
max-width: 67vw;
max-height: 870px;
}
h3, .h3, .fme-text-h3 {
font-size: 21px;
}
p, .fme-text-body {
font-size: 16px;
}
.fme-how-focus-mode > i {
font-size: 32px;
}
.fme-how-protection-feature__icon {
font-size: 32px;
height: 60px;
width: 60px;
}
}
@media screen and (max-width: 1366px) {
.site-main.post .title-wrap h1 {
font-size: 36px;
line-height: 40px;
}
}
@media screen and (max-width: 1200px) {
.blog-page .first-section, .blog-page .post-filter, .blog-page .posts-list {
padding: 0 25px;
}
h1 {
font-size: 42px
}
h2 {
font-size: 30px;
line-height: 1.23;
}
p {
font-size: 15px;
line-height: 1.3;
}
.fme-home-feature__benefits strong {
font-size: 15px;
}
.fme-home-feature__benefits {
gap: 24px;
margin-top: 20px;
}
.fme-home-feature__grid {
grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
}
.fme-home-focus-way__modes li {
padding: 14px 16px;
gap: 16px;
}
.fme-home-focus-way__header {
align-items: flex-start;
display: grid;
gap: 24px;
grid-template-columns: minmax(360px, 430px) 1fr;
padding-left: 32px;
padding-right: 32px;
}
.fme-home-testimonial-card {
padding: 16px;
}
.fme-home-testimonials__grid {
gap: 24px;
}
.fme-home-testimonial-card h3 {
font-size: 16px;
}
.fme-how-hero_background {
position: relative;
right: auto;
max-width: 700px;
max-height: unset;
margin: 0 auto;
}
.fme-how-hero h1 {
text-align: center;
}
.fme-how-hero__lead {
text-align: center;
max-width: unset;
}
.fme-how-hero__benefits {
justify-content: center;
}
.fme-how-hero__grid {
min-height: unset;
}
.fme-how-hero__content {
padding: 20px 0;
}
}
@media screen and (max-width: 992px) {
main.site-main.post section.section-first{
padding-bottom: 50px;
}
}
@media screen and (max-width: 991px) {
body {
padding-top: 64px;
}
.fme-site-header__brand img {
width: 95px;
}
.fme-site-header {
position: fixed;
left: 0;
right: 0;
width: 100%;
}
.fme-home-hero__content h1 span {
font-size: 32px;
color: var(--bs-primary);
}
.fme-home-hero__primary-btn {
max-width: 380px;
}
.fme-home-hero {
background: transparent;
}
.fme-home-stats__grid {
gap: 16px;
}
.fme-home-stats__content strong {
font-size: 24px;
}
.fme-home-stats__icon {
flex: 0 0 56px;
height: 56px;
width: 56px;
}
.fme-home-stats__icon.trustpilot svg {
height: 56px;
width: 56px;
}
.fme-home-stats__icon svg {
height: 40px;
width: 40px;
}
.fme-home-feature.fme-home-feature--enforced,
.fme-home-focus-way {
background: var(--fme-color-primary-soft);
}
.fme-home-feature--enforced > .container, .fme-home-focus-way > .container {
background: transparent;
border-radius: 0;
}
.fme-home-focus-way__header {
grid-template-columns: 1fr;
}
.fme-home-focus-way__modes {
justify-content: start;
}
.fme-home-focus-way__modes-scroll::before,
.fme-home-focus-way__modes-scroll::after {
border-color: var(--fme-color-primary);
border-style: solid;
content: "";
height: 16px;
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(45deg);
transition: opacity .2s ease;
width: 16px;
z-index: 2;
}
.fme-home-focus-way__modes-scroll::before {
border-width: 0 0 2px 2px;
left: 3px;
}
.fme-home-focus-way__modes-scroll::after {
border-width: 2px 2px 0 0;
right: 3px;
}
.fme-home-focus-way__modes-scroll.has-scroll-left::before,
.fme-home-focus-way__modes-scroll.has-scroll-right::after {
opacity: 1;
}
.fme-home-focus-way__modes li {
flex: unset;
}
.fme-home-final-cta {
background: url(img/footer_mobile.webp) center bottom no-repeat #7FA5E4;
background-size: contain;
padding-bottom: 40vw;
}
.fme-home-final-cta__content {
justify-items: center;
}
.fme-home-final-cta__form {
width: 100%;
}
.fme-home-stats__icon.trustpilot {
display: flex;
flex-wrap: wrap;
}
.fme-home-attention__mobile-cards.d-block {
display: grid !important;
}
/*.fme-home-final-cta h2,
.fme-home-final-cta p,
.fme-home-hero__checks li,
.fme-home-hero__checks li i {
color: var(--fme-color-white);
}*/
.fme-home-page {
width: 100vw;
overflow-x: hidden;
}
.fme-how-hero_background {
position: relative;
right: auto;
z-index: 1;
max-width: 100%;
max-height: unset;
}
.fme-how-hero h1 {
text-align: center;
}
.fme-how-hero__lead {
text-align: center;
max-width: unset;
}
.fme-how-hero__lead br {
display: none;
}
.fme-how-focus,
.fme-how-schedule,
.fme-how-weekly {
background: #F4F9FF;
}
.fme-how-focus__panel,
.fme-how-schedule__panel,
.fme-how-weekly__panel {
background: transparent;
border: 0;
border-radius: 0;
}
.fme-how-focus__image-placeholder,
.fme-how-protection__image-placeholder,
.fme-how-weekly__dashboard {
aspect-ratio: auto;
margin: 0 0 0 auto;
min-height: unset;
width: 100%;
}
.fme-how-focus__image-placeholder img,
.fme-how-weekly__dashboard img,
.fme-how-protection__image-placeholder img {
width: 90vw;
right: -35px;
position: relative;
}
.fme-how-page {
width: 100vw;
overflow: hidden;
}
.fme-how-protection-feature {
display: grid;
grid-template-columns: 64px 1fr;
grid-template-areas:
"icon title"
"icon text";
gap: 4px 16px;
align-items: start;
}
.fme-how-protection-feature__icon {
grid-area: icon;
}
.fme-how-protection-feature h3 {
grid-area: title;
margin: 0;
}
.fme-how-protection-feature p {
grid-area: text;
margin: 0;
}
.fme-how-schedule__screens {
width: 100%;
position: relative;
}
.fme-how-schedule__screens img {
width: 100%;
}
.fme-how-goals__supporting-screens img {
margin: 0 auto;
}
.fme-how-devices {
background: transparent;
background-image: none;
}
.logos-container {
flex-direction: column;
}
.logos-container img {
margin: 20px auto;
}
}
@media screen and (max-width: 768px) {
.site-main .page-header .entry-title {
padding: 0 10px;
}
main.site-main.post section.section-first {
padding-top: 120px;
background-size: cover;
margin-bottom: 50px;
}
.site-main.post .page-title {
flex-direction: column-reverse;
}
.site-main.post .title-wrap,
.site-main.post .image-wrap {
width: 100%;
}
.site-main.post .image-wrap {
text-align: center;
margin-bottom: 25px;
}
.site-main.post .title-wrap h1 {
font-size: 24px;
}
main.site-main.post section.section-last {
margin-top: 50px;
padding-bottom: 50px;
background-size: cover;
padding-top: 40px;
}
.related-articles .articles .article {
max-width: 100%;
margin-bottom: 40px;
}
.related-articles {
margin: 50px auto 0 auto;
}
.related-articles h1 {
margin: 0 auto 50px;
padding: 0 20px 25px;
}
.post-last-section .subscribe-block {
padding: 35px 30px;
}
.post-last-section .subscribe-block .title {
font-size: 26px;
}
.post-last-section form {
margin: 20px 0;
}
.post-last-section form input {
padding: 20px;
}
.post-last-section form .submit-btn {
font-size: 18px;
}
.post-last-section form input::placeholder {
font-size: 18px;
}
.related-articles h1 {
font-size: 26px;
}
.fme-pricing-hero {
min-height: 480px;
padding: 64px 0 44px;
}
.fme-pricing-hero__eyebrow {
font-size: 16px;
line-height: 24px;
padding: 8px 14px;
}
.fme-pricing-hero h1 {
font-size: 42px;
letter-spacing: -0.8px;
line-height: 51px;
margin-top: 28px;
}
.fme-pricing-hero__lead {
font-size: 18px;
line-height: 28px;
margin-top: 32px;
}
.fme-pricing-hero__benefits {
align-items: flex-start;
gap: 18px;
margin: 36px auto 0;
max-width: 300px;
}
.fme-pricing-hero__benefits li {
font-size: 16px;
gap: 12px;
text-align: left;
}
.fme-pricing-hero__benefits i {
font-size: 24px;
}
.fme-home-feature__grid {
grid-template-columns: 1fr;
}
.fme-home-feature__media,
.fme-home-focus-way__media {
margin-right: -22px;
}
}
@media (max-width: 767px) {
:root {
--fme-font-size-h1: 42px;
--fme-font-size-h2: 32px;
--fme-font-size-h3: 24px;
--fme-line-height-h1: 51px;
--fme-line-height-h2: 40px;
--fme-section-padding-y: 56px;
}
h1,
.h1,
.fme-text-h1 {
letter-spacing: -0.8px;
}
.fme-btn--xxl {
min-width: 100%;
}
.fme-hardcoded-page {
padding-bottom: 36px;
padding-top: 36px;
}
.fme-home-testimonials__slides {
display: block;
overflow: hidden;
padding-bottom: 36px;
position: relative;
}
.fme-home-testimonials__slides-wrapper {
display: flex;
}
.fme-home-testimonials__slides .fme-home-testimonial-card {
flex: 0 0 100%;
height: auto;
width: 100%;
}
.fme-home-testimonials__pagination {
align-items: center;
display: flex;
justify-content: center;
bottom: 0;
left: 0;
margin-top: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.fme-home-testimonials__slides .fme-home-testimonials__pagination .swiper-pagination-bullet {
background: #D9D9D9 !important;
background-color: #D9D9D9 !important;
border-radius: var(--fme-radius-pill);
display: inline-block;
height: 12px !important;
margin: 0 4px !important;
opacity: 1 !important;
transition: width .2s ease, background-color .2s ease;
visibility: visible;
width: 12px !important;
}
.fme-home-testimonials__slides .fme-home-testimonials__pagination .swiper-pagination-bullet-active {
background: var(--fme-color-primary) !important;
background-color: var(--fme-color-primary) !important;
width: 28px !important;
}
.fme-trial-modal .modal-dialog {
height: 100vh;
margin: 0;
max-width: none;
width: 100vw;
}
.fme-trial-modal .modal-content {
border-radius: 0;
height: 100vh;
min-height: 0;
overflow-y: auto;
padding: 16px;
}
.fme-trial-modal__close {
right: 27px;
top: 31px;
}
.fme-trial-modal__icon {
font-size: 50px;
height: 100px;
width: 100px;
}
.fme-trial-modal h2 {
font-size: 24px;
line-height: 1.3;
}
.fme-trial-modal p {
font-size: 16px;
line-height: 1.3;
margin-top: 16px;
}
.fme-trial-modal__form {
gap: 24px;
margin-top: 45px;
}
.fme-trial-modal__form input {
font-size: 16px;
height: 60px;
padding: 0 24px;
}
.fme-trial-modal__form button {
font-size: 16px;
gap: 16px;
height: 60px;
margin-top: 0;
}
.fme-trial-modal .fme-trial-modal__privacy {
align-items: flex-start;
font-size: 14px;
gap: 24px;
margin-top: 44px;
text-align: left;
}
.fme-trial-modal__privacy i {
font-size: 22px;
margin-top: 2px;
}
}
@media screen and (max-width: 480px) {
main.site-main.post section.section-first {
padding-top: 150px;
}
.section-first .share {
margin-top: 25px;
display: flex;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
}
.site-main.post .title-wrap .share-btn {
margin-bottom: 10px;
}
.post-last-section form input {
max-width: 100%;
margin: 0 0 25px;
}
.post-last-section form .submit-btn {
padding: 20px;
}
.site-main.post section:not(.elementor-element) {
padding: 0 15px;
}
.fme-home-hero__lead {
font-size: 14px;
line-height: 21px;
}
.btn, .fme-btn {
font-size: 14px;
gap: 10px;
min-height: 44px;
padding: 8px;
}
.fme-btn.fme-btn--primary.fme-home-hero__primary-btn {
width: 200px;
}
.fme-home-hero__checks li {
font-size: 11px;
}
.fme-home-hero__checks li i::before {
font-size: 16px;
}
.fme-home-hero__visual {
margin-top: -140px;
}
.fme-home-stats {
padding: 0px;
}
.fme-home-hero {
padding: 10px 0;
}
.fme-home-hero__content h1 span {
font-size: 24px;
}
.fme-home-stats__content strong {
font-size: 18px;
}
.fme-home-stats__content span {
font-size: 11px;
line-height: 1;
}
.fme-home-stats__icon.trustpilot svg {
height: 36px;
width: 36px;
}
.fme-home-stats__item {
padding: 16px;
}
.fme-home-stats__icon.trustpilot .label {
font-size: 10px;
line-height: 10px;
}
.fme-home-stats__icon svg {
height: 24px;
width: 24px;
}
.fme-home-stats__icon.trustpilot {
flex: 0 0 40px;
height: 40px;
width: 40px;
}
.fme-home-stats__icon:not(.trustpilot) {
flex: 0 0 30px;
height: 30px;
width: 30px;
}
.fme-home-stats__item {
min-height: 75px;
}
.fme-home-stats__item--trustpilot .fme-home-stats__content span {
font-size: 11px;
line-height: 11px;
}
.fme-home-stats__icon.trustpilot .label {
font-size: 10px;
line-height: 11px;
}
.fme-home-stats__item {
align-items: center;
display: flex;
gap: 14px;
border-radius: 8px;
background: var(--White, #FFF);
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
}
.badge, .fme-badge {
padding: 0px 8px;
font-size: 12px;
}
.fme-home-feature.fme-home-feature--coach,
.fme-home-focus-way {
padding: 24px 0;
}
.fme-home-feature__grid {
gap: 0px;
}
p {
font-size: 12px;
line-height: 21px;
}
.fme-home-focus-way__inner {
gap: 0;
padding: 0;
}
.fme-home-focus-way__header {
gap: 8px;
padding-left: 0;
padding-right: 0;
}
.fme-home-focus-way__modes strong {
font-size: 12px;
font-weight: var(--fme-font-weight-normal);
line-height: 21px;
white-space: nowrap;
}
.fme-home-focus-way__modes strong br{
display: none;
}
.fme-home-focus-way__modes span {
flex: 0 0 16px;
height: 16px;
width: 16px;
}
.fme-home-focus-way__modes li {
padding: 16px;
gap: 8px;
}
.fme-home-focus-way__modes {
gap: 16px;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: scroll;
scroll-behavior: smooth;
}
.fme-home-focus-way__modes li {
box-shadow: none;
flex: 0 0 auto;
}
.fme-home-trustpilot {
grid-template-columns: 1fr 1fr;
}
.fme-home-trustpilot p {
line-height: 24px;
font-size: 18px;
line-height: 19px;
padding-left: 16px;
margin-top: 20px;
}
.fme-how-hero__lead {
font-size: 13px;
line-height: 21px;
margin: 16px 0 0;
}
.fme-how-hero h1 {
font-size: 36px;
}
.fme-how-hero__benefits {
gap: 8px 16px;
margin-top: 16px;
justify-content: center;
}
.fme-how-hero__benefits li {
font-size: 11px;
gap: 12px;
line-height: 20px;
}
.fme-how-hero__benefits i {
font-size: 16px;
}
.fme-how-hero__grid {
min-height: unset;
}
.fme-how-hero__grid {
gap: 5px;
}
.fme-how-hero {
padding: 48px 0;
}
.fme-how-focus__image-placeholder img, .fme-how-weekly__dashboard img, .fme-how-protection__image-placeholder img {
right: -25px;
}
.fme-how-focus-mode {
padding: 16px;
}
h3, .h3, .fme-text-h3 {
font-size: 16px;
}
.fme-how-protection-feature__icon {
font-size: 20px;
height: 40px;
width: 40px;
}
.fme-how-protection-feature {
grid-template-columns: 50px 1fr;
gap: 4px 0px;
}
.fme-how-protection-feature h3 {
font-size: 16px;
line-height: 21px;
}
.fme-how-protection-feature p {
font-size: 12px;
line-height: 21px;
}
.fme-how-schedule__screens img {
width: 100vw !important;
max-width: unset;
left: -33px;
position: relative;
}
.fme-how-schedule__panel {
display: block;
padding: 32px 16px 0;
}
.fme-how-schedule {
padding: 0;
}
.d-block.d-lg-none.fme-how-goals_img2-mobile {
right: -16px;
position: relative;
}
.fme-site-footer__brand p, .fme-site-footer__brand address, .fme-site-footer__copyright {
font-size: 12px;
line-height: 21px;
}
.fme-site-footer__brand address {
margin-top: 12px;
}
.fme-site-footer__nav-group h2 {
font-size: 12px;
line-height: 21px;
}
.fme-site-footer__nav-group a {
font-size: 12px;
letter-spacing: -0.31px;
line-height: 21px;
}
.fme-site-footer__socials a {
height: 21px;
width: 21px;
}
.fme-pricing-hero {
background-size: 150%
}
.fme-pricing-hero__lead {
font-size: 12px;
line-height: 21px;
margin-top: 16px;
}
.fme-pricing-hero {
min-height: 360px;
padding: 44px 0 44px;
}
.fme-pricing-hero__benefits li {
font-size: 11px;
line-height: 20px;
font-weight: normal;
}
.fme-pricing-hero__benefits i {
font-size: 16px;
}
.fme-pricing-guarantee__visual {
order: 2;
}
.fme-pricing-guarantee__content {
order: 1;
}
.fme-pricing-guarantee__visual {
order: 3;
}
.fme-pricing-guarantee__visual--shield img,
.fme-pricing-guarantee__visual--badge img {
width: 100px;
}
.fme-pricing-feature img {
width: 48px;
}
.fme-pricing-feature__content h3 {
font-size: 16px;
line-height: 21px;
}
.fme-pricing-feature__content p {
font-size: 12px;
line-height: 21px;
margin: 18px 0 0;
}
.logos-container img {
margin: 10px auto;
height: 32px;
}
}
.fme-home-video-testimonials {
background: var(--fme-color-white);
padding: 0 0 64px;
}
.fme-home-video-testimonials__inner {
background: linear-gradient(105deg, #eaf3ff 0%, #f7faff 55%, #e8f2ff 100%);
border: 1px solid #dce9fb;
border-radius: 24px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 294px;
overflow: hidden;
position: relative;
}
.fme-home-video-testimonials__media {
align-items: center;
background: rgba(255, 255, 255, 0.28);
border-radius: 16px;
color: #64748b;
display: flex;
justify-content: center;
margin: 18px;
min-height: 256px;
position: relative;
z-index: 1;
overflow: hidden;
}
.fme-home-video-testimonials__media span {
font-size: 14px;
font-weight: 600;
}
.fme-home-video-testimonials__content {
align-items: flex-start;
align-self: center;
display: flex;
gap: 20px;
padding: 48px 64px 48px 40px;
position: relative;
z-index: 1;
}
.fme-home-video-testimonials__icon {
align-items: center;
background: #2e6bd9;
border-radius: 50%;
color: #fff;
display: flex;
flex: 0 0 56px;
height: 56px;
justify-content: center;
width: 56px;
}
.fme-home-video-testimonials__copy h2 {
color: #0f172a;
font-size: 30px;
letter-spacing: -0.6px;
line-height: 1.2;
margin: 0 0 12px;
}
.fme-home-video-testimonials__copy p {
color: #475569;
font-size: 18px;
line-height: 1.55;
margin: 0 0 24px;
max-width: 440px;
}
.fme-home-video-testimonials__copy a {
align-items: center;
color: #2e6bd9;
display: inline-flex;
font-size: 17px;
font-weight: 700;
gap: 8px;
text-decoration: none;
}
.fme-home-video-testimonials__copy a:hover,
.fme-home-video-testimonials__copy a:focus-visible {
color: #1d4ed8;
text-decoration: underline;
}
@media (max-width: 991px) {
.fme-home-video-testimonials__inner {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.fme-home-video-testimonials__content {
gap: 16px;
padding: 36px 28px 36px 20px;
}
.fme-home-video-testimonials__copy h2 {
font-size: 26px;
}
.fme-home-video-testimonials__copy p {
font-size: 16px;
}
}
@media (max-width: 767px) {
.fme-home-video-testimonials {
padding-bottom: 56px;
}
.fme-home-video-testimonials__inner {
grid-template-columns: 1fr;
}
.fme-home-video-testimonials__media {
margin: 16px 16px 0;
min-height: 210px;
}
.fme-home-video-testimonials__content {
gap: 14px;
padding: 28px 20px 32px;
}
.fme-home-video-testimonials__icon {
flex-basis: 48px;
height: 48px;
width: 48px;
}
.fme-home-video-testimonials__icon svg {
height: 24px;
width: 24px;
}
.fme-home-video-testimonials__copy h2 {
font-size: 24px;
margin-bottom: 10px;
}
.fme-home-video-testimonials__copy p {
font-size: 15px;
margin-bottom: 20px;
}
.fme-home-video-testimonials__copy a {
font-size: 15px;
}
}
/* Affordability Help page */
.fme-afford-section {
padding-top: 48px;
}
.fme-afford-form-wrap {
max-width: 560px;
margin: 0 auto;
}
.fme-afford-form__row {
margin-bottom: 20px;
}
.fme-afford-form__row label {
display: block;
font-weight: var(--fme-font-weight-semibold);
font-size: var(--fme-font-size-caption);
margin-bottom: 6px;
color: var(--fme-color-ink);
}
.fme-afford-form__row input[type="text"],
.fme-afford-form__row input[type="email"],
.fme-afford-form__row select,
.fme-afford-form__row textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--fme-color-border);
border-radius: var(--fme-radius-sm);
font-size: 15px;
font-family: var(--fme-font-family-base);
color: var(--fme-color-ink);
background: var(--fme-color-white);
transition: border-color 0.15s;
box-sizing: border-box;
}
.fme-afford-form__row input:focus,
.fme-afford-form__row select:focus,
.fme-afford-form__row textarea:focus {
outline: none;
border-color: var(--fme-color-primary);
box-shadow: 0 0 0 3px var(--fme-color-primary-soft);
}
.fme-afford-form__row textarea {
height: 130px;
resize: vertical;
}
.fme-afford-form__row select {
appearance: auto;
}
.fme-afford-form__two-col {
display: flex;
gap: 16px;
}
.fme-afford-form__two-col > .fme-afford-form__row {
flex: 1;
}
.fme-afford-optional {
font-weight: var(--fme-font-weight-regular);
color: var(--fme-color-dark-gray);
}
.fme-afford-form__row input[type="file"] {
font-size: var(--fme-font-size-caption);
margin-bottom: 0;
}
.fme-afford-form__row input[type="tel"] {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--fme-color-border);
border-radius: var(--fme-radius-sm);
font-size: 15px;
font-family: var(--fme-font-family-base);
color: var(--fme-color-ink);
background: var(--fme-color-white);
transition: border-color 0.15s;
box-sizing: border-box;
}
.fme-afford-form__row input[type="tel"]:focus {
outline: none;
border-color: var(--fme-color-primary);
box-shadow: 0 0 0 3px var(--fme-color-primary-soft);
}
@media (max-width: 500px) {
.fme-afford-form__two-col {
flex-direction: column;
gap: 0;
}
}
.fme-afford-hp {
position: absolute;
left: -9999px;
opacity: 0;
height: 0;
}
.fme-afford-error {
background: var(--fme-color-danger-soft);
color: var(--fme-color-danger);
padding: 12px 16px;
border-radius: var(--fme-radius-sm);
margin-bottom: 24px;
font-size: var(--fme-font-size-caption);
font-weight: var(--fme-font-weight-medium);
}
.fme-afford-success {
text-align: center;
padding: 48px 24px;
}
.fme-afford-success .bi-check-circle {
font-size: 48px;
color: var(--fme-color-success);
display: block;
margin-bottom: 16px;
}
.fme-afford-success h2 {
color: var(--fme-color-success);
font-size: var(--fme-font-size-h3);
margin: 0 0 8px;
}
.fme-afford-success p {
color: var(--fme-color-ink-muted);
font-size: var(--fme-font-size-body);
line-height: 1.6;
margin: 0;
}