/*
Theme Name: FocusMe
Theme URI: https://focusme.com/
Description: The FocusMe website theme. Standalone since 11 September 2026 - it began as a child of hello-elementor and no longer depends on it.
Author: FocusMe (Reclaim Time Ltd)
Author URI: https://focusme.com/
Version: 2.0.0
Text Domain: focusme
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/
/* --------------------------------------------------------------------------
Baseline resets the child theme must not rely on the parent for.
On 8 September 2026 a failed theme update left wp-content/themes/hello-elementor
an empty directory. Its assets/css/reset.css carries img{max-width:100%;height:auto},
and without it the 2328px home hero image rendered at natural size, overflowed its
grid column and gave the whole page a horizontal scrollbar. Bootstrap 5 does not
make images fluid (that was Bootstrap 3/4), so nothing else caught it.
Duplicating a couple of rules is cheaper than the site breaking the next time the
parent goes missing.
-------------------------------------------------------------------------- */
img,
svg,
video {
max-width: 100%;
height: auto;
}
/*
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);
}
.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/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/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/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/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:not(.fme-btn) {
color: var(--fme-color-primary);
font-weight: var(--fme-font-weight-semibold);
text-decoration: none;
}
.fme-thanks-steps__item a:not(.fme-btn):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;
}
.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;
}
/* Hover states for the two solid buttons that have none of their own. Everything else
defines its own - and most buttons on the site are close, toggle, play or link-styled
controls that must not take a solid fill. A blanket `button:hover` with !important was
forcing one onto all of them, and overriding .fme-lifetime-card__btn's own hover. */
.fme-trial-modal__form button:hover,
.fme-trial-modal__form button:focus {
background: var(--fme-color-primary-dark);
}
/* Carries its colour inline, so darken whatever it is rather than naming a new one. */
#pdfSubmit:hover,
#pdfSubmit:focus {
filter: brightness(0.93);
}
/* ===== 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 {
flex-direction: column;
gap: 8px;
}
.fme-home-hero__checks li {
font-size: 13px;
}
.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;
}
/* ==========================================================================
Android Page
========================================================================== */
.fme-android-hero {
background: var(--fme-color-surface);
padding: 80px 0 96px;
text-align: center;
overflow: hidden;
}
.fme-android-hero__layout {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
}
.fme-android-hero__phone img {
width: 220px;
height: auto;
border-radius: 24px;
box-shadow: var(--fme-shadow-md);
}
.fme-android-hero__phone--left {
transform: rotate(-3deg);
}
.fme-android-hero__phone--right {
transform: rotate(3deg);
}
.fme-android-hero__inner {
max-width: 640px;
flex-shrink: 0;
}
.fme-android-hero__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--fme-color-primary-soft);
color: var(--fme-color-primary-dark);
font-size: var(--fme-font-size-caption);
font-weight: var(--fme-font-weight-semibold);
padding: 6px 14px;
border-radius: var(--fme-radius-pill);
margin-bottom: 24px;
}
.fme-android-hero h1 {
font-size: var(--fme-font-size-h1);
line-height: var(--fme-line-height-h1);
font-weight: var(--fme-font-weight-bold);
color: var(--fme-color-ink);
margin: 0 0 16px;
}
.fme-android-hero__lead {
font-size: var(--fme-font-size-body-lg);
line-height: var(--fme-line-height-body-lg);
color: var(--fme-color-ink-muted);
margin: 0 0 40px;
}
.fme-android-hero__actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.fme-android-hero__actions .fme-btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.fme-android-hero__note {
font-size: var(--fme-font-size-caption);
color: var(--fme-color-dark-gray);
margin: 0;
}
.fme-android-section-title {
font-size: var(--fme-font-size-h2);
line-height: var(--fme-line-height-h2);
font-weight: var(--fme-font-weight-bold);
color: var(--fme-color-ink);
text-align: center;
margin: 0 0 48px;
}
.fme-android-features {
padding: var(--fme-section-padding-y) 0;
}
.fme-android-features__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.fme-android-feature {
text-align: left;
}
.fme-android-feature__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--fme-color-primary-soft);
color: var(--fme-color-primary);
border-radius: var(--fme-radius-lg);
font-size: 22px;
margin-bottom: 16px;
}
.fme-android-feature h3 {
font-size: var(--fme-font-size-ui);
font-weight: var(--fme-font-weight-semibold);
color: var(--fme-color-ink);
margin: 0 0 8px;
}
.fme-android-feature p {
font-size: var(--fme-font-size-caption);
line-height: 1.6;
color: var(--fme-color-ink-muted);
margin: 0;
}
.fme-android-browsers {
padding: var(--fme-section-padding-y) 0;
background: var(--fme-color-surface);
}
.fme-android-browsers__inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.fme-android-browsers__lead {
font-size: var(--fme-font-size-body);
color: var(--fme-color-ink-muted);
margin: -32px 0 32px;
}
.fme-android-browsers__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.fme-android-browsers__list li {
background: var(--fme-color-white);
border: 1px solid var(--fme-color-border);
border-radius: var(--fme-radius-md);
padding: 14px 16px;
font-size: var(--fme-font-size-caption);
font-weight: var(--fme-font-weight-medium);
color: var(--fme-color-ink);
}
.fme-android-cta__buttons {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 24px;
}
.fme-android-cta__buttons .fme-btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (max-width: 1199px) {
.fme-android-hero__phone img {
width: 180px;
}
.fme-android-hero__layout {
gap: 32px;
}
}
@media (max-width: 991px) {
.fme-android-hero__phone {
display: none;
}
.fme-android-hero__inner {
margin: 0 auto;
}
.fme-android-hero h1 {
font-size: var(--fme-font-size-h2);
line-height: var(--fme-line-height-h2);
}
.fme-android-hero__lead {
font-size: var(--fme-font-size-body);
line-height: var(--fme-line-height-body);
}
.fme-android-features__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.fme-android-hero {
padding: 48px 0 64px;
}
.fme-android-hero h1 {
font-size: var(--fme-font-size-h3);
line-height: 1.3;
}
.fme-android-hero__lead {
font-size: var(--fme-font-size-ui);
}
.fme-android-section-title {
font-size: var(--fme-font-size-h3);
line-height: 1.3;
margin-bottom: 32px;
}
.fme-android-features {
padding: 64px 0;
}
.fme-android-features__grid {
grid-template-columns: 1fr;
gap: 24px;
}
.fme-android-browsers__list {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
Blog posts rendered without Elementor.
Scoped to .fme-hardcoded-template, a class only the hardcoded header adds,
so none of this reaches posts while Elementor is still rendering them. It
becomes live at the moment the post template switches over.
.fme-faq is left unscoped deliberately - the element only exists in repaired
post_content, so it is inert until that content is both saved and rendered.
Part of the Elementor removal - see inc/elementor-transform.php.
========================================================================== */
.fme-hardcoded-template .post.type-post .page-content {
margin: 24px auto 0;
max-width: 1200px;
padding: 0 20px;
}
/* The hero's bottom padding was sized around the share buttons that used to sit under
the byline. They moved below the article, so it was leaving ~130px of dead space
between the byline and the first line of the piece. */
.fme-hardcoded-template main.site-main.post section.section-first {
padding-bottom: 20px;
}
/* Hold the text to a readable measure, but keep its left edge on the same line
as the post title above, which sits in a 1200px container. */
.fme-hardcoded-template .post.type-post .page-content > * {
max-width: 820px;
}
/* Reading rhythm - Elementor's per-post CSS used to supply all of this. */
.fme-hardcoded-template .post.type-post .page-content p {
margin: 0 0 1.4em;
}
.fme-hardcoded-template .post.type-post .page-content h2 {
margin: 2em 0 0.6em;
}
.fme-hardcoded-template .post.type-post .page-content h3,
.fme-hardcoded-template .post.type-post .page-content h4 {
margin: 1.6em 0 0.5em;
}
.fme-hardcoded-template .post.type-post .page-content ul,
.fme-hardcoded-template .post.type-post .page-content ol {
margin: 0 0 1.4em;
padding-left: 1.4em;
}
.fme-hardcoded-template .post.type-post .page-content li {
margin-bottom: 0.5em;
}
.fme-hardcoded-template .post.type-post .page-content img {
height: auto;
margin: 1.6em 0;
max-width: 100%;
}
/* The trial CTA, which Elementor had flattened to a plain text link. */
.fme-hardcoded-template .post.type-post .page-content .fme-btn {
margin: 1em 0 2em;
text-decoration: none;
}
/* FAQ, rebuilt from the flattened accordion into the theme's existing
.fme-landing-faq component. Only the alignment differs here: the landing pages
centre it at 720px, the blog needs it flush with the body text. */
.fme-hardcoded-template .post.type-post .page-content .fme-landing-faq {
margin-left: 0;
max-width: 820px;
}
/* The hero's top padding was sized for the old Elementor header, which was tall and in
flow: 200px, and 150px on a phone. The hardcoded header is compact, and below 991px it
is fixed with body already carrying a 64px offset for it - so the phone was showing
214px of empty space before the article. */
.fme-hardcoded-template main.site-main.post section.section-first {
padding-top: 72px;
}
@media screen and (max-width: 991px) {
.fme-hardcoded-template main.site-main.post section.section-first {
padding-top: 24px;
}
}
/* Contents list on blog posts, replacing Elementor's JavaScript-built widget. Kept plain
on purpose: a label, a hairline, and the section links. */
.fme-toc {
border-left: 2px solid var(--fme-color-border);
margin: 0 0 2.4em;
padding: 2px 0 2px 18px;
}
.fme-toc__label {
color: var(--fme-color-ink-muted);
font-family: var(--fme-font-family-base);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
margin: 0 0 8px;
text-transform: uppercase;
}
.fme-toc__list {
list-style: none;
margin: 0;
padding: 0;
}
.fme-toc__list li {
margin: 0 0 6px;
}
.fme-toc__list a {
color: var(--fme-color-ink);
font-family: var(--fme-font-family-base);
font-size: 15px;
line-height: 1.45;
text-decoration: none;
}
.fme-toc__list a:hover,
.fme-toc__list a:focus-visible {
color: var(--fme-color-primary);
text-decoration: underline;
}
html { scroll-behavior: smooth; }
/* Anchors must clear the header, which is fixed below 991px. */
.fme-hardcoded-template .post.type-post .page-content h2 { scroll-margin-top: 88px; }
/* ==========================================================================
Related articles, for posts rendered without Elementor.
The existing block gives the three cards article-sized headings that compete
with the post you just read, ragged bottoms wherever titles wrap to different
line counts, and a short stub rule under a centred h1. This keeps the same
markup and makes it behave like a set: one grid, one image ratio, quieter
titles, aligned tops.
========================================================================== */
.fme-hardcoded-template .related-articles {
margin: 88px auto 0;
max-width: 1200px;
padding: 0 20px;
}
.fme-hardcoded-template .related-articles h1.title {
border-bottom: 0;
color: var(--fme-color-ink);
font-size: 28px;
letter-spacing: -0.01em;
margin: 0 0 36px;
padding: 0;
text-align: center;
width: auto;
}
.fme-hardcoded-template .related-articles .articles {
display: grid;
gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
justify-content: initial;
}
.fme-hardcoded-template .related-articles .articles .article {
max-width: none;
margin-bottom: 0;
}
.fme-hardcoded-template .related-articles .articles .article a {
display: block;
text-decoration: none;
}
.fme-hardcoded-template .related-articles .articles .article img {
aspect-ratio: 16 / 10;
border-radius: 10px;
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
.fme-hardcoded-template .related-articles .articles .article h2 {
color: var(--fme-color-ink);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.35;
margin: 14px 0 0;
/* Three lines keeps the row of cards even without cropping most titles. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.fme-hardcoded-template .related-articles .articles .article a:hover h2,
.fme-hardcoded-template .related-articles .articles .article a:focus-visible h2 {
color: var(--fme-color-primary);
}
@media screen and (max-width: 768px) {
.fme-hardcoded-template .related-articles {
margin-top: 56px;
}
.fme-hardcoded-template .related-articles h1.title {
font-size: 24px;
margin-bottom: 28px;
}
.fme-hardcoded-template .related-articles .articles {
gap: 26px;
}
}
/* Share block for posts rendered without Elementor. Sits after the article, because that
is when someone decides to share, and reads as a small utility rather than three
competing call-to-action buttons. Bootstrap Icons is already enqueued site-wide. */
.fme-post-share {
align-items: center;
border-top: 1px solid var(--fme-color-border);
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 2.6em 0 0;
max-width: 820px;
padding-top: 20px;
}
.fme-post-share__label {
color: var(--fme-color-ink-muted);
font-family: var(--fme-font-family-base);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.fme-post-share__list {
display: flex;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.fme-post-share__btn {
align-items: center;
border: 1px solid var(--fme-color-border);
border-radius: 50%;
color: var(--fme-color-ink-muted);
display: inline-flex;
font-size: 17px;
height: 40px;
justify-content: center;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
width: 40px;
}
.fme-post-share__btn:hover,
.fme-post-share__btn:focus-visible {
background: var(--fme-color-primary);
border-color: var(--fme-color-primary);
color: var(--fme-color-white);
}
@media (prefers-reduced-motion: reduce) {
.fme-post-share__btn { transition: none; }
}
/* ==========================================================================
Better Than Yesterday influencer landing page (page-bty.php).
Replaces the Elementor build. Layout only - colours, buttons and the pricing
table come from the existing component styles.
========================================================================== */
.fme-bty__hero {
background: var(--fme-color-surface, #F1F5F8);
padding: 56px 0 64px;
text-align: center;
}
.fme-bty__hero h1 {
font-size: clamp(28px, 4vw, 44px);
margin: 0 0 32px;
}
.fme-bty__quote {
align-items: center;
display: flex;
gap: 28px;
justify-content: center;
margin: 0 auto 40px;
max-width: 900px;
text-align: left;
}
.fme-bty__quote img { flex: 0 0 auto; height: auto; width: 120px; }
.fme-bty__quote blockquote { margin: 0; }
.fme-bty__quote blockquote p {
font-size: clamp(17px, 2vw, 22px);
font-style: italic;
line-height: 1.45;
margin: 0 0 10px;
}
.fme-bty__quote footer {
color: var(--fme-color-primary);
font-weight: 600;
}
.fme-bty__hero-split {
align-items: center;
display: grid;
gap: 40px;
grid-template-columns: 1fr 1fr;
text-align: left;
}
.fme-bty__hero-copy p { margin: 0 0 24px; }
/* 16:9 without a wrapper div per video */
.fme-bty__video {
aspect-ratio: 16 / 9;
background: #000;
border-radius: 10px;
overflow: hidden;
width: 100%;
}
.fme-bty__video iframe { border: 0; display: block; height: 100%; width: 100%; }
.fme-bty__band { background: var(--fme-color-surface, #F1F5F8); }
.fme-bty__pillars {
display: grid;
gap: 36px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
text-align: center;
}
.fme-bty__pillar img { height: 72px; margin: 0 auto 14px; width: 72px; }
.fme-bty__pillar h3 { font-size: 20px; margin: 0 0 8px; }
.fme-bty__pillar p { color: var(--fme-color-ink-muted); margin: 0; }
.fme-bty__pullquote {
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.6;
margin: 0 auto 24px;
max-width: 760px;
text-align: center;
}
.fme-bty__pullquote footer { font-weight: 600; margin-top: 12px; }
.fme-bty__rating {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0 0 28px;
}
.fme-bty__rating img { height: 18px; width: auto; }
.fme-bty__center { text-align: center; }
.fme-bty__press,
.fme-bty__strip {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
list-style: none;
margin: 0 0 40px;
padding: 0;
}
.fme-bty__press img {
filter: grayscale(1);
height: auto;
max-height: 34px;
opacity: 0.65;
width: auto;
}
.fme-bty__strip { gap: 0; margin: 0; }
.fme-bty__strip li { flex: 1 1 180px; }
.fme-bty__strip img {
aspect-ratio: 3 / 2;
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
.fme-bty__split {
align-items: center;
display: grid;
gap: 48px;
grid-template-columns: 1fr 1fr;
}
.fme-bty__split-media img { border-radius: 10px; height: auto; width: 100%; }
.fme-bty__split-copy h2 { margin: 0 0 18px; }
.fme-bty__split-copy p { margin: 0 0 14px; }
.fme-bty__stat {
color: var(--fme-color-primary);
font-size: 20px;
font-weight: 700;
}
.fme-bty__reviews {
display: grid;
gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin: 0 0 44px;
}
.fme-bty__review {
background: #fff;
border: 1px solid var(--fme-color-border);
border-radius: 12px;
padding: 26px 28px;
}
.fme-bty__review h3 { font-size: 19px; margin: 0 0 14px; }
.fme-bty__review p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.fme-bty__review footer {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
font-weight: 600;
gap: 12px;
justify-content: space-between;
margin-top: 18px;
}
.fme-bty__review footer img { height: 20px; width: auto; }
.fme-bty__videos {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin: 0 0 40px;
}
@media screen and (max-width: 860px) {
.fme-bty__hero-split,
.fme-bty__split { grid-template-columns: 1fr; }
.fme-bty__quote { flex-direction: column; gap: 18px; text-align: center; }
.fme-bty__press { gap: 26px; }
}
/* Plans link on the BTY page, in place of a second pricing table. */
.fme-bty__plans-note {
color: var(--fme-color-ink-muted);
font-size: 15px;
margin: 14px 0 0;
}
/* ==========================================================================
NoFap landing page (templates/page-nofap.php).
========================================================================== */
.fme-nofap__signs,
.fme-nofap__checks {
display: grid;
gap: 14px;
list-style: none;
margin: 28px auto 24px;
max-width: 780px;
padding: 0;
}
.fme-nofap__signs li,
.fme-nofap__checks li {
padding-left: 34px;
position: relative;
}
.fme-nofap__signs li > i,
.fme-nofap__checks li > i {
color: var(--fme-color-primary);
font-size: 18px;
left: 0;
line-height: 1.5;
position: absolute;
top: 0;
}
/* Headings after a run of prose need room; the shared rule only spaces the first. */
.fme-landing-prose h2 { margin-top: 1.8em; }
.fme-landing-prose > h2:first-child { margin-top: 0; }
.fme-nofap__reviews {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin: 32px 0 24px;
}
.fme-nofap__review {
background: #fff;
border: 1px solid var(--fme-color-border);
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 26px;
}
.fme-nofap__review p {
font-size: 15px;
line-height: 1.6;
margin: 0 0 16px;
}
.fme-nofap__review footer {
color: var(--fme-color-ink-muted);
font-weight: 600;
}
.fme-nofap__rating {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0;
}
.fme-nofap__rating img { height: 18px; width: auto; }
.fme-nofap__cta { margin-top: 32px; text-align: center; }
/* ==========================================================================
Parents landing page (templates/page-parents.php).
========================================================================== */
/* The hero list reads as a list, not as centred hero copy. */
.fme-parents__ticks {
margin-left: auto;
margin-right: auto;
max-width: 560px;
text-align: left;
}
.fme-parents__ticks,
.fme-parents__risks {
display: grid;
gap: 14px;
list-style: none;
margin: 24px 0;
padding: 0;
}
.fme-parents__risks {
margin: 28px auto 0;
max-width: 820px;
}
.fme-parents__ticks li,
.fme-parents__risks li {
padding-left: 34px;
position: relative;
}
.fme-parents__ticks li > i,
.fme-parents__risks li > i {
color: var(--fme-color-primary);
font-size: 18px;
left: 0;
line-height: 1.5;
position: absolute;
top: 0;
}
.fme-parents__press-label {
color: var(--fme-color-ink-muted);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
margin: 0 0 20px;
text-align: center;
text-transform: uppercase;
}
.fme-parents__press {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 48px;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.fme-parents__press img {
filter: grayscale(1);
height: auto;
max-height: 32px;
opacity: 0.6;
width: auto;
}
.fme-landing-cards--two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fme-parents__cta,
.fme-parents__end-cta { margin-top: 32px; text-align: center; }
.fme-parents__end-cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.fme-parents__faq-more { margin: 26px 0 0; text-align: center; }
@media screen and (max-width: 860px) {
.fme-parents__press { gap: 28px; }
}
/* ==========================================================================
Students landing page (templates/page-students.php).
========================================================================== */
.fme-students__eyebrow {
color: var(--fme-color-primary);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0 0 12px;
text-transform: uppercase;
}
.fme-students__reviews {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin: 0 0 28px;
}
.fme-students__review {
background: #fff;
border: 1px solid var(--fme-color-border);
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 26px;
}
.fme-students__review h3 { font-size: 17px; margin: 0 0 12px; }
.fme-students__review p { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.fme-students__review footer { color: var(--fme-color-ink-muted); font-weight: 600; }
.fme-students__rating {
align-items: center;
color: var(--fme-color-ink-muted);
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0;
}
.fme-students__rating img { height: 18px; width: auto; }
/* Form */
.fme-students__form {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin: 32px auto 0;
max-width: 820px;
}
.fme-students__field { display: flex; flex-direction: column; }
.fme-students__field--wide { grid-column: 1 / -1; }
.fme-students__field label {
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
.fme-students__field label span { color: var(--fme-color-danger); }
.fme-students__field input,
.fme-students__field select,
.fme-students__field textarea {
background: #fff;
border: 1px solid var(--fme-color-border);
border-radius: var(--fme-radius-sm);
font: inherit;
font-size: 15px;
padding: 11px 14px;
width: 100%;
}
.fme-students__field input:focus-visible,
.fme-students__field select:focus-visible,
.fme-students__field textarea:focus-visible {
border-color: var(--fme-color-primary);
outline: 2px solid var(--fme-color-primary);
outline-offset: 1px;
}
.fme-students__field input[aria-invalid="true"],
.fme-students__field select[aria-invalid="true"] {
border-color: var(--fme-color-danger);
}
/* Off-screen rather than display:none - hidden fields are ignored by some bots. */
.fme-students__honeypot {
height: 1px;
left: -9999px;
overflow: hidden;
position: absolute;
width: 1px;
}
.fme-students__submit { grid-column: 1 / -1; text-align: center; }
.fme-students__form-status {
margin: 14px 0 0;
min-height: 1.4em;
}
.fme-students__form-status.is-error { color: var(--fme-color-danger); }
.fme-students__form-status.is-ok { color: var(--fme-color-primary); font-weight: 600; }
.fme-students__smallprint {
color: var(--fme-color-ink-muted);
font-size: 13px;
margin: 24px auto 0;
max-width: 820px;
text-align: center;
}
.fme-students__cta,
.fme-students__faq-more { margin-top: 32px; text-align: center; }
/* -------------------------------------------------------------------------
Comparison pages (FocusMe vs X)
Rendered by templates/page-comparison.php. Most of the page reuses the
fme-landing-* components; only the table, the review cards and the
correction form need anything of their own.
------------------------------------------------------------------------- */
.fme-cmp-hero__eyebrow {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .8125rem;
font-weight: 700;
color: var(--fme-primary, #4b8bf5);
margin: 0 0 .75rem;
}
.fme-cmp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.fme-cmp-table-wrap table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: .9375rem;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.fme-cmp-table-wrap thead th {
background: var(--fme-primary, #4b8bf5);
color: #fff;
font-weight: 700;
text-align: left;
padding: 1rem 1.25rem;
white-space: nowrap;
}
.fme-cmp-table-wrap thead th + th {
text-align: center;
}
.fme-cmp-table-wrap td {
padding: .875rem 1.25rem;
border-top: 1px solid #eef1f6;
vertical-align: top;
}
.fme-cmp-table-wrap tbody tr:nth-child(odd) {
background: #fafbfd;
}
/* The first column names the feature; the rest are yes/no answers. */
.fme-cmp-table-wrap td:first-child {
font-weight: 600;
color: #101828;
}
.fme-cmp-reviews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
align-items: start;
}
.fme-cmp-reviews__lead {
grid-column: 1 / -1;
margin: 0 0 .5rem;
color: #475467;
}
.fme-cmp-review {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 12px;
padding: 1.5rem;
}
.fme-cmp-review p {
margin: 0 0 .75rem;
}
.fme-cmp-review p:last-child {
margin-bottom: 0;
font-size: .875rem;
color: #667085;
}
.fme-cmp-close__inner {
text-align: center;
max-width: 40rem;
margin: 0 auto;
}
.fme-cmp-close__inner h2 {
margin-top: 0;
}
/* The "See something wrong?" correction form, rendered by inc/comparison-feedback.php. */
.fme-cmp-correction__box {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 12px;
margin: 0 auto;
max-width: 52rem;
padding: 2rem;
}
.fme-cmp-correction__box h3 {
margin-top: 0;
}
.fme-cmp-correction__form {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
.fme-cmp-correction__form input[type="text"],
.fme-cmp-correction__form input[type="email"] {
border: 1px solid #d0d5dd;
border-radius: 8px;
flex: 1;
font: inherit;
min-width: 11rem;
padding: .625rem .875rem;
}
.fme-cmp-correction__form input[name="correction"] {
flex: 2;
min-width: 15rem;
}
/* Wide enough that the "Your email (optional)" placeholder is not clipped. */
.fme-cmp-correction__form input[name="email"] {
min-width: 13rem;
}
.fme-cmp-correction__form button {
background: var(--fme-color-primary, #4F97F0);
border: 0;
border-radius: 8px;
color: #fff;
cursor: pointer;
font: inherit;
font-weight: 600;
padding: .625rem 1.5rem;
}
.fme-cmp-correction__form button:hover {
background: var(--fme-color-primary-dark, #2E6BD9);
}
.fme-cmp-correction__form button[disabled] {
background: var(--fme-color-primary-disabled, #BBD7FB);
cursor: default;
}
/* Honeypot: present for bots, never shown to or reachable by a person. */
.fme-cmp-correction__hp {
height: 0;
margin: 0;
overflow: hidden;
position: absolute;
width: 0;
}
.fme-cmp-correction__status {
flex: 1 0 100%;
font-size: .875rem;
margin: 0;
}
.fme-cmp-correction__status.is-error {
color: #b42318;
}
.fme-cmp-correction__status.is-ok {
color: #067647;
}
@media (max-width: 600px) {
.fme-cmp-correction__form {
flex-direction: column;
}
.fme-cmp-correction__form input,
.fme-cmp-correction__form button {
width: 100%;
}
}
/* Cards size to their own content rather than stretching to the tallest in the row. */
.fme-cmp .fme-landing-cards {
align-items: start;
}
/* .fme-landing-faq hides the native disclosure marker and never replaced it, so an
accordion reads as a plain list of rows with no hint it opens. Applies everywhere the
component is used: the comparison pages, the landing pages and blog posts. */
.fme-landing-faq__item summary {
align-items: center;
display: flex;
gap: 1rem;
justify-content: space-between;
}
.fme-landing-faq__item summary::after {
border-bottom: 2px solid currentColor;
border-right: 2px solid currentColor;
content: "";
flex: none;
height: .5rem;
opacity: .5;
transform: rotate(45deg);
transform-origin: center;
transition: transform .18s ease;
width: .5rem;
}
.fme-landing-faq__item[open] summary::after {
transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
.fme-landing-faq__item summary::after {
transition: none;
}
}
/* -------------------------------------------------------------------------
AI Productivity Coach page
The content carries .cards/.card markup of its own (from code-snippets
#121). Bring it in line with the fme-landing card components rather than
restating the markup in the template.
------------------------------------------------------------------------- */
.fme-aic__eyebrow {
color: var(--fme-color-primary, #4F97F0);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .08em;
margin: 0 0 .75rem;
text-transform: uppercase;
}
.fme-aic .cards {
align-items: start;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin: 0;
padding: 0;
}
.fme-aic .card {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 12px;
padding: 1.5rem;
}
.fme-aic .card h3 {
margin-top: 0;
}
.fme-aic .card p:last-child {
margin-bottom: 0;
}
/* -------------------------------------------------------------------------
Community prompt at the end of a post
Sits where the comments used to. Deliberately quieter than the trial CTA -
it is an invitation, not the page's primary action.
------------------------------------------------------------------------- */
.fme-post-community {
background: var(--fme-color-surface, #F8FAFC);
border: 1px solid var(--fme-color-border, #E2E8F0);
border-radius: 12px;
margin: 48px auto 0;
max-width: 820px;
padding: 32px;
}
.fme-post-community__inner {
margin: 0 auto;
max-width: 44rem;
}
.fme-post-community__eyebrow {
color: var(--fme-color-primary, #4F97F0);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .08em;
margin: 0 0 .5rem;
text-transform: uppercase;
}
.fme-post-community h2 {
font-size: 22px;
line-height: 30px;
margin: 0 0 .5rem;
}
.fme-post-community p:not(.fme-post-community__eyebrow) {
color: var(--fme-color-ink-muted, #475569);
font-size: 15px;
line-height: 24px;
margin: 0 0 20px;
}
@media (max-width: 600px) {
.fme-post-community {
padding: 24px 20px;
}
}