/* ============================================================================ FormNX Marketing Design Refresh (lp2.css) ---------------------------------------------------------------------------- HOW IT WORKS - Loaded AFTER lp.css in external_pages/layout.blade.php. The marketing carries class="lp2" and every rule below is scoped under it, so nothing here can leak into the dashboard or the form-render pages (they never load this file and never have the class). - Components rebuilt in this design phase were REMOVED from lp.css and live here as their single source of truth: buttons, section typography, pills, icon tiles, cards, steps, FAQ accordion, CTA band, trust strip and comparison-table win/loss cells. - Palette and radii deliberately mirror the bundled Tabler/Bootstrap theme (vendor.css, --formnx-* vars, primary #066fd1). We reuse plain Bootstrap conventions (.5rem / .75rem / 1rem radii) instead of importing the full design-system token sheet. Visual spec: public/design-system/component-library.html ========================================================================== */ /* Global horizontal-overflow guard for every landing page. Individual sections occasionally spill a few px past the viewport (Bootstrap .row negative margins, wide logo marquees, decorative bleeds), which widened the page and made the width:100% position:fixed header drift/shift on scroll — only on the pages that happened to contain such a section. Clipping the shared content wrapper removes the spill for all of them in one place. overflow-x: CLIP (not hidden) is deliberate: clip does NOT establish a scroll container, so it cannot spawn a nested vertical scrollbar or break position:sticky, and only the x-axis is clipped (dropdowns opening downward are untouched). The viewport-fixed header and mobile-menu overlay are unaffected — a fixed element's containing block is the viewport, not this wrapper. NOTE: must NOT be moved to html/body — those are the scroll root, and clipping them kills vertical scrolling entirely (verified). */ body.lp2 .main-content { overflow-x: clip; } /* ------------------------------------------------------------------ * * 0 - TOKENS (kept minimal, everything else uses Bootstrap defaults) * ------------------------------------------------------------------ */ body.lp2 { --lp2-primary: var(--formnx-primary, #066fd1); --lp2-primary-rgb: 6, 111, 209; --lp2-primary-hover: #0559a8; --lp2-primary-subtle: #eaf2fb; --lp2-primary-border: #cde2f6; /* Warm amber, eyebrows/highlights only. Was #b5730d, which sat at 3.51:1 on --lp2-accent-subtle inside the eyebrow pills (AA fail at 13px). Now 5.0:1 on white, 4.53:1 on the pill. */ --lp2-accent: #9c6309; --lp2-accent-subtle: #faf3e6; --lp2-accent-border: #f0e0c2; --lp2-success: #2fb344; --lp2-success-subtle: #daf0de; --lp2-success-ink: #1d7a2e; --lp2-warning: #f76707; --lp2-danger: #d63939; --lp2-danger-subtle: #fbe9e9; /* TEXT RAMP — every step passes WCAG AA (4.5:1) on every surface it is actually used on: white, --lp2-bg-section (#f6f8fb), --lp2-primary-subtle (#eaf2fb) and the table head tint (#dbe9f8). ink 15.7:1 on white body 7.4:1 muted 5.8:1 white / 5.4 section / 5.1 primary-subtle / 4.7 table head faint 4.9:1 white / 4.6 section muted and faint were previously #6c7a91 (4.35:1) and #8a97ab (2.96:1) — both failed AA, and faint failed even the 3:1 large-text bar despite being used for real copy (.check-item__pts, .score-ring__outof, .tool-muted, .alt-cell-loss). Darkened rather than reassigned so no component had to move up a step and flatten the hierarchy. */ --lp2-ink: #182433; --lp2-body: #49566c; --lp2-muted: #5a6779; --lp2-faint: #647287; /* ON-INK text (footer, CTA band, any --lp2-ink surface). A LIGHT value, so it must never be confused with --lp2-faint: the two used to be the same token, which meant darkening faint for AA on white silently pushed the footer links down to 3.2:1 on the dark band. Separate tokens, opposite directions. on-ink #b8c4d4 -> 8.6:1 on #182433 on-ink-mute #97a5b8 -> 5.8:1 on #182433 */ --lp2-on-ink: #b8c4d4; --lp2-on-ink-mute: #97a5b8; /* BLUE INK — brand blue as *text on a blue-tinted surface*. --lp2-primary (#066fd1) is only 4.42:1 on --lp2-primary-subtle: fine as a fill, an AA fail as text. Use this whenever blue text sits on a blue tint (6.2:1). */ --lp2-primary-ink: #0559a8; /* Bootstrap paints .text-muted and .btn-outline-secondary off these Tabler vars, which ship gray-500 (#6c7a91 — 4.09:1 on the section band, an AA fail). Repointed at the AA-safe muted so the whole Bootstrap text surface agrees with the ramp. --formnx-gray-500 is deliberately NOT touched: it is also used for borders and dividers, where the lighter value is correct. */ --formnx-secondary: var(--lp2-muted); --formnx-muted: var(--lp2-muted); /* .text-muted resolves through the *-rgb triplet, not the hex var above, so both have to be set or the override silently does nothing. */ --formnx-muted-rgb: 90, 103, 121; /* #5a6779 */ --formnx-secondary-rgb: 90, 103, 121; /* .text-secondary reads the triplet too */ --formnx-secondary-color: var(--lp2-muted); --lp2-border: #dce1e7; --lp2-border-light: #eef1f5; --lp2-bg-section: #f6f8fb; /* ELEVATION — a 4-step ramp, and nothing else. Shadows are tinted with the ink color at low alpha, never with brand blue (a blue glow reads as a highlight state, not as height). Previously 16 distinct values were in play across the two stylesheets. */ --lp2-shadow-xs: 0 1px 2px rgba(24, 36, 51, .06); --lp2-shadow-sm: 0 1px 3px rgba(24, 36, 51, .08); --lp2-shadow-md: 0 8px 24px rgba(24, 36, 51, .10); --lp2-shadow-lg: 0 16px 40px rgba(24, 36, 51, .12); /* Kept as the names the rest of the sheet already uses (27 call sites). */ --lp2-shadow-card: var(--lp2-shadow-sm); --lp2-shadow-hover: var(--lp2-shadow-md); /* Focus is a ring, not an elevation — its own token so it never gets collapsed into the ramp above. */ --lp2-focus-ring: 0 0 0 3px rgba(6, 111, 209, .15); /* RADIUS — 4 steps. (50% stays available for circles; that's a shape, not a step on the scale.) Previously 12 distinct numeric radii were in play. */ --lp2-r-xs: .25rem; /* 4px — badges, inline marks */ --lp2-r-sm: .5rem; /* 8px — inputs, small surfaces */ --lp2-r-md: .75rem; /* 12px — cards, icon tiles */ --lp2-r-lg: 1rem; /* 16px — media frames, nav bar */ --lp2-r-full: 999px; /* pills */ /* Tabler/Bootstrap paints .dropdown-menu, .card and .form-control off this, and ships 4px — which put square corners on the 16px-rounded floating nav. Point it at the small step so the whole Bootstrap surface agrees. */ --formnx-border-radius: var(--lp2-r-sm); /* Tabler's dropdown shadow is a 3-layer pure-black stack (0 16px 24px 2px rgba(0,0,0,.07) + 0 6px 30px 5px + 0 8px 10px -5px) — the last oversized shadow left on the marketing site. Onto the ramp. */ --formnx-box-shadow-dropdown: var(--lp2-shadow-md); --lp2-transition: all .2s ease; --lp2-ease: cubic-bezier(.4, 0, .2, 1); /* Alternatives + solution page clusters read the FormNX brand accent through var(--formnx-success, #10b981). Retire the emerald default by pointing the var at brand blue. Genuine yes/included check semantics keep real green via --lp2-success below. */ --formnx-success: var(--lp2-primary); --formnx-gray-800: var(--lp2-ink); /* vendor.css sets font-family DIRECTLY on .btn/.form-control (from --formnx-font-sans-serif, a system stack). A direct declaration beats the inherited body font, so every CTA and input rendered in Segoe UI/SF while the copy beside it rendered Inter. Re-point the var so the whole Bootstrap surface inherits the marketing face. */ --formnx-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* DISPLAY FACE. Inter carries body + every piece of UI (so marketing still rhymes with the Tabler app), but "Inter 700 at -.02em" is the single most common templated-SaaS headline signature going. Bricolage Grotesque is the display cut: visibly not-Inter, still product-confident rather than editorial, and narrower than Inter — which helps the long H1s. Variable 400..800, so one file covers H1/H2/H3 and the eyebrows. Applied ONLY to the display selectors in section 1 — never to body, buttons, or UI. */ --lp2-font-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* vendor.css ships the dashboard's dense-UI type (14px / 1.43). Marketing is display-scale: 17px / 1.6. Anything without an explicit size (list items, prose paragraphs, table cells) reads off these. */ --formnx-body-font-size: 1.0625rem; --formnx-body-line-height: 1.6; color: var(--lp2-ink); } /* Template-theme buttons on alternative detail pages must hover to the blue hover shade now that the theme color reads brand blue */ body.lp2 .alternative-detail-page { --template-theme-color: var(--lp2-primary); --template-theme-hover: var(--lp2-primary-hover); } /* ------------------------------------------------------------------ * * 1 - TYPOGRAPHY (900 weight retired, calmer display scale) * ------------------------------------------------------------------ */ body.lp2 h1, body.lp2 h2, body.lp2 h3, body.lp2 h4, body.lp2 h5 { color: var(--lp2-ink); } body.lp2 .hero__title { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(2.25rem, 5vw, 3.5rem); } body.lp2 .hero__paragraph { font-size: clamp(1rem, 2vw, 1.1875rem); line-height: 1.6; color: var(--lp2-body); opacity: 1; } body.lp2 .block__header { margin-bottom: 4rem; } body.lp2 .block__title, body.lp2 .block__title--big, body.lp2 .cta-card__title { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } body.lp2 .block__title { font-size: clamp(1.75rem, 3vw, 2.25rem); } body.lp2 .block__title--big { font-size: clamp(1.875rem, 3.5vw, 2.375rem); line-height: 1.15; } body.lp2 .cta-card__title { font-size: clamp(1.75rem, 3vw, 2.375rem); } body.lp2 .block__paragraph { font-size: 1.0625rem; line-height: 1.6; color: var(--lp2-body); opacity: 1; } @media (min-width: 992px) { body.lp2 .block__paragraph--big { font-size: 1.2rem; line-height: 1.6; } } /* Eyebrow above section titles: warm accent, uppercase */ body.lp2 .block__pre-title { color: var(--lp2-accent); font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } body.lp2 .highlight { color: var(--lp2-primary); } /* ------------------------------------------------------------------ * * 2 - BUTTONS (4 variants, scale() hover retired) * ------------------------------------------------------------------ */ body.lp2 .btn { font-size: .87rem; font-weight: 600; padding: .8rem 1.6rem; border: none; border-radius: var(--lp2-r-sm); transition: var(--lp2-transition); } @media (min-width: 992px) { body.lp2 .btn { padding: .8rem 2rem; } } body.lp2 .btn, body.lp2 .btn:hover, body.lp2 .btn:focus { border: none; outline: none; } body.lp2 .btn:hover, body.lp2 .btn:focus { transform: translateY(-1px); /* replaces scale(1.05) */ } body.lp2 .btn-primary, body.lp2 .cta-card .btn-primary { background: var(--lp2-primary); color: #fff; box-shadow: var(--lp2-shadow-sm); } body.lp2 .btn-primary:hover, body.lp2 .btn-primary:focus { background: var(--lp2-primary-hover); color: #fff; box-shadow: var(--lp2-shadow-hover); } body.lp2 .btn-secondary { background: var(--lp2-ink); color: #fff; } body.lp2 .btn-secondary:hover, body.lp2 .btn-secondary:focus { background: #0e1722; color: #fff; } body.lp2 .btn-book-demo, body.lp2 .btn-book-demo:focus { background: transparent; border: 1.5px solid var(--lp2-primary) !important; /* base .btn strips borders */ color: var(--lp2-primary); } body.lp2 .btn-book-demo:hover { background: var(--lp2-primary-subtle); color: var(--lp2-primary); /* no solid-fill flip */ } /* Sticky nav keeps the same button skins */ body.lp2 .hero-nav--is-sticky .btn-book-demo { background: transparent; color: var(--lp2-primary); } body.lp2 .hero-nav--is-sticky .btn-book-demo:hover, body.lp2 .hero-nav--is-sticky .btn-book-demo:focus { background: var(--lp2-primary-subtle); color: var(--lp2-primary); } body.lp2 .btn-primary--empty, body.lp2 .btn-primary--empty:hover, body.lp2 .btn-primary--empty:focus { color: var(--lp2-primary); background: transparent; } body.lp2 .btn-sm { padding: .8rem; } /* Tool pages + CTA bands (second gradient system retired, solid brand) */ body.lp2 .cta-button { background: var(--lp2-primary); color: #fff; padding: 15px 40px; border-radius: var(--lp2-r-sm); font-weight: 600; font-size: 1.1rem; text-decoration: none; display: inline-flex; align-items: center; border: none; box-shadow: var(--lp2-shadow-sm); transition: var(--lp2-transition); } body.lp2 .cta-button:hover { background: var(--lp2-primary-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--lp2-shadow-hover); } body.lp2 .cta-button svg { margin-left: 8px; transition: transform .3s ease; } body.lp2 .cta-button:hover svg { transform: translateX(3px); } body.lp2 .cta-button--secondary { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: none; margin-left: 12px; } body.lp2 .cta-button--secondary:hover { background: rgba(255, 255, 255, .08); border-color: #fff; } @media (max-width: 768px) { body.lp2 .cta-button--secondary { margin-left: 0; margin-top: 12px; } } /* Tool widgets: kill the 50px pill */ body.lp2 .btn-custom { border-radius: var(--lp2-r-sm); background: var(--lp2-primary); color: #fff; } body.lp2 .btn-custom:hover { background: var(--lp2-primary-hover); } /* ------------------------------------------------------------------ * * 3 - PILLS & BADGES * ------------------------------------------------------------------ */ body.lp2 .hero-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: var(--lp2-r-full); font-size: .875rem; font-weight: 500; background: var(--lp2-primary-subtle); border: none; color: var(--lp2-primary-hover); transition: var(--lp2-transition); } body.lp2 .hero-pill svg, body.lp2 .hero-pill i { color: var(--lp2-primary); } body.lp2 .hero-pill:hover { background: var(--lp2-primary-border); color: var(--lp2-primary-hover); transform: translateY(-1px); } body.lp2 .hero-pill--more { background: #fff; border: 1px solid #c9d6e4; color: var(--lp2-body); font-weight: 600; } /* Warm-accent eyebrow pill (also gives .hero-badge a real definition, it never had CSS and was riding inherited styles) */ body.lp2 .hero-badge, body.lp2 .mk-eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--lp2-accent-subtle); border: 1px solid var(--lp2-accent-border); color: var(--lp2-accent); font-size: .8125rem; font-weight: 600; padding: 6px 15px; border-radius: var(--lp2-r-full); } /* Status badges */ body.lp2 .winner-badge, body.lp2 .mk-badge-success { display: inline-flex; align-items: center; gap: 5px; background: var(--lp2-success-subtle); color: var(--lp2-success-ink); font-size: .8125rem; font-weight: 600; padding: 4px 12px; border-radius: var(--lp2-r-full); } body.lp2 .mk-badge-popular { display: inline-flex; align-items: center; gap: 5px; background: var(--lp2-primary); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: var(--lp2-r-full); letter-spacing: .02em; } body.lp2 .ribbon, body.lp2 .mk-badge-limited { background: var(--lp2-accent-subtle); color: var(--lp2-accent); font-weight: 700; border-radius: var(--lp2-r-full); letter-spacing: .04em; } /* Check pills (alternatives hero) */ body.lp2 .mk-pill-check { display: inline-flex; align-items: center; gap: 7px; background: var(--lp2-success-subtle); color: var(--lp2-success-ink); font-size: .875rem; font-weight: 500; padding: 7px 15px; border-radius: var(--lp2-r-full); } /* ------------------------------------------------------------------ * * 4 - ICON TILES * ------------------------------------------------------------------ */ body.lp2 .fr-icon { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; height: 2.5rem; width: 2.5rem; border-radius: var(--lp2-r-md); background: var(--lp2-primary-subtle); color: var(--lp2-primary); margin-bottom: 1.5rem; transition: var(--lp2-transition); } /* The 1.5rem bottom margin above is for VERTICAL icon cards, where the tile sits above the copy. In the horizontal `.card-2.d-flex` the tile lives in its own column BESIDE the text, so that margin silently inflates the icon column (48px tile -> 72px column) and leaves a band of dead space under the tile - worst on title-only cards, where nothing else is tall enough to absorb it. */ body.lp2 .card-2.d-flex .fr-icon { margin-bottom: 0; } body.lp2 .fr-icon--medium { font-size: 1.5rem; height: 3rem; width: 3rem; } body.lp2 .fr-icon--large { font-size: 1.2rem; height: 3.25rem; width: 3.25rem; } @media (min-width: 992px) { body.lp2 .fr-icon--large { height: 3.8rem; width: 3.8rem; font-size: 1.9rem; } } /* Feature-detail hero icon: purple gradient badge becomes a soft tile */ body.lp2 .feature-icon { background: var(--lp2-primary-subtle); border: none; box-shadow: var(--lp2-shadow-card); border-radius: var(--lp2-r-lg); } body.lp2 .feature-icon svg { color: var(--lp2-primary); filter: none; } /* ------------------------------------------------------------------ * * 5 - CARDS * ------------------------------------------------------------------ */ /* card-2 (homepage form-fields mini cards): now a real bordered card */ body.lp2 .card-2 { background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); padding: 1.25rem; margin-bottom: 1rem; transition: var(--lp2-transition); } body.lp2 .card-2:hover { box-shadow: var(--lp2-shadow-hover); border-color: #b9cde2; transform: translateY(-2px); } body.lp2 .card-2:last-child { margin-bottom: 0; } body.lp2 .card-2__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--lp2-ink); } body.lp2 .card-2__paragraph { font-size: .9375rem; line-height: 1.55; color: var(--lp2-body); opacity: 1; margin: 0; } /* card-2 is a title+paragraph card. Some pages (feature-detail "Why use X?" benefits, whose data is a plain string rather than {title, description}) render it with a title only, leaving a paragraph's worth of dead space under the heading and a badly unbalanced icon. When there is no paragraph, collapse the card to a single centred row. */ body.lp2 .card-2:not(:has(.card-2__paragraph)) { align-items: center; padding: 1rem 1.25rem; } body.lp2 .card-2:not(:has(.card-2__paragraph)) .card-2__title { margin-bottom: 0 !important; } /* card-3 / enhanced-card / icon-card share the same card grammar. display:block is load-bearing: .icon-card is an on the solution pages, so without it the card renders as an inline box — the border hugs the first line and the copy spills outside it. (h-100 also needs a block box.) */ body.lp2 .card-3, body.lp2 .enhanced-card, body.lp2 .icon-card { display: block; background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); padding: 1.75rem; transition: var(--lp2-transition); } body.lp2 .card-3:hover, body.lp2 .enhanced-card:hover, body.lp2 .icon-card:hover { transform: translateY(-2px); box-shadow: var(--lp2-shadow-hover); border-color: #b9cde2; } /* Generic 48px icon tile used inside icon cards (library icon-card pattern) */ body.lp2 .mk-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--lp2-primary-subtle); color: var(--lp2-primary); border-radius: var(--lp2-r-md); margin-bottom: 18px; } body.lp2 .icon-card__title { font-size: 1.125rem; font-weight: 600; color: var(--lp2-ink); margin: 0 0 8px; } body.lp2 .icon-card__desc { font-size: .9375rem; line-height: 1.6; color: var(--lp2-body); margin: 0; } body.lp2 .icon-card__desc a { color: inherit; } /* Privacy facts strip (security section): compact hard-commitment rows */ body.lp2 .mk-privacy-fact { display: flex; align-items: center; gap: 12px; background: var(--lp2-bg-section); border: 1px solid var(--lp2-border-light); border-radius: var(--lp2-r-md); padding: 14px 16px; height: 100%; } body.lp2 .mk-privacy-fact__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; background: #fff; border: 1px solid var(--lp2-border-light); color: var(--lp2-primary); border-radius: var(--lp2-r-md); } body.lp2 .mk-privacy-fact strong { display: block; font-size: .9375rem; color: var(--lp2-ink); line-height: 1.3; } body.lp2 .mk-privacy-fact small { font-size: .8125rem; color: var(--lp2-muted); } body.lp2 .card-3 { text-align: center; } body.lp2 .card-3__title { font-size: 1.125rem; font-weight: 600; line-height: 1.5; } body.lp2 .card-3__paragraph { font-size: .95rem; line-height: 1.6; color: var(--lp2-body); opacity: 1; } /* enhanced-card extras: gradient top bar and glow retired, icon tile calmed */ body.lp2 .enhanced-card { height: 100%; box-shadow: var(--lp2-shadow-card); position: relative; overflow: hidden; } body.lp2 .enhanced-card::before, body.lp2 .enhanced-card .icon-wrapper::after { display: none; } body.lp2 .enhanced-card .icon-wrapper { width: 64px; height: 64px; border-radius: var(--lp2-r-md); background: var(--lp2-primary-subtle); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } body.lp2 .enhanced-card .icon-wrapper svg { width: 32px; height: 32px; color: var(--lp2-primary); } body.lp2 .enhanced-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--lp2-ink); margin-bottom: .75rem; } body.lp2 .enhanced-card p { color: var(--lp2-body); line-height: 1.6; font-size: .95rem; } /* Pain cards: semantic danger accent (replaces one-off #dc2626) */ body.lp2 .pain-card { background: #fff; border: 1px solid var(--lp2-border); border-left: 3px solid var(--lp2-danger); border-radius: var(--lp2-r-md); padding: 1.75rem 1.5rem; height: 100%; transition: var(--lp2-transition); } body.lp2 .pain-card:hover { box-shadow: var(--lp2-shadow-hover); transform: translateY(-2px); } body.lp2 .pain-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--lp2-danger-subtle); color: var(--lp2-danger); border-radius: var(--lp2-r-md); margin-bottom: 1rem; } body.lp2 .pain-card__icon svg { width: 24px; height: 24px; } body.lp2 .pain-card__title { font-size: 1.1rem; font-weight: 600; color: var(--lp2-ink); margin: 0 0 .5rem 0; line-height: 1.4; } body.lp2 .pain-card__desc { font-size: .95rem; color: var(--lp2-body); line-height: 1.65; margin: 0; } /* Tool-page "real limitations" warning cards */ body.lp2 .problem { background: #fff; border: 1px solid var(--lp2-border); border-left: 3px solid var(--lp2-warning); border-radius: var(--lp2-r-md); padding: 16px 20px; margin-bottom: 14px; } body.lp2 .problem h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: .4rem; color: var(--lp2-ink); } body.lp2 .problem p { font-size: .95rem; color: var(--lp2-body); margin: 0; line-height: 1.6; } body.lp2 .problem p .hl { color: #b02a37; font-weight: 600; background: rgba(192, 57, 43, .06); padding: 0 3px; border-radius: var(--lp2-r-xs); } /* Testimonial card: layered ::before normalized to a plain bordered card */ body.lp2 .testimonial-card-1 { padding: 2.2rem; border-radius: var(--lp2-r-md); position: relative; display: flex; flex-direction: column; z-index: 0; transition: var(--lp2-transition); } body.lp2 .testimonial-card-1::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; opacity: 1; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); box-shadow: var(--lp2-shadow-card); } body.lp2 .testimonial-card-1:hover { transform: translateY(-2px); } body.lp2 .testimonial-card-1:hover::before { box-shadow: var(--lp2-shadow-hover); } body.lp2 .testimonial-card-1 * { position: relative; z-index: 2; } body.lp2 .testimonial-card-1__paragraph { flex-grow: 1; font-size: .9375rem; line-height: 1.65; color: var(--lp2-ink); opacity: 1; padding-bottom: 1.5rem; } body.lp2 .flex-testimonials-block-person { display: flex; align-items: center; margin-top: -1rem; } body.lp2 .flex-testimonials-block-person__avatar { width: 56px; height: 56px; border-radius: var(--lp2-r-full); } body.lp2 .flex-testimonials-block-person__name { font-size: .87rem; font-weight: 600; color: var(--lp2-ink); } body.lp2 .flex-testimonials-block-person__info { font-size: .87rem; color: var(--lp2-muted); opacity: 1; } /* Review carousel: one scroll-snap row, 3-up desktop with the centered card in the spotlight, 2-up tablet, 1-up mobile. Cards read top-down: stars, quoted title, body, person pinned to the bottom. Controls (chevrons + dots) sit below the track, Youform style. */ body.lp2 .mk-review-carousel { position: relative; } body.lp2 .mk-review-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 4px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.lp2 .mk-review-track::-webkit-scrollbar { display: none; } body.lp2 .mk-review-track .testimonial-card-1 { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; margin-bottom: 0; } @media (max-width: 991.98px) { body.lp2 .mk-review-track .testimonial-card-1 { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 767.98px) { body.lp2 .mk-review-track .testimonial-card-1 { flex-basis: 100%; } } /* Card anatomy (order flips the legacy markup: person block was on top) */ body.lp2 .mk-review-track .mk-review-stars { order: 0; display: flex; gap: 3px; color: #f59f00; margin-bottom: .9rem; } body.lp2 .mk-review-track .mk-review-stars svg { width: 18px; height: 18px; } body.lp2 .mk-review-track .testimonial-card-1 h3 { order: 1; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--lp2-ink); margin: 0 0 .75rem; } body.lp2 .mk-review-track .testimonial-card-1 h3::before { content: '\201C'; } body.lp2 .mk-review-track .testimonial-card-1 h3::after { content: '\201D'; } body.lp2 .mk-review-track .testimonial-card-1 p { order: 2; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } body.lp2 .mk-review-track .flex-testimonials-block-person { order: 3; margin-top: auto; padding-top: 1.1rem; } /* Spotlight: the card nearest the track center gets the featured ring */ body.lp2 .mk-review-track .testimonial-card-1.is-spotlight { transform: translateY(-8px); } body.lp2 .mk-review-track .testimonial-card-1.is-spotlight::before { border: 2px solid var(--lp2-primary); box-shadow: var(--lp2-shadow-md); } /* Controls row: minimal chevrons flanking pagination dots */ body.lp2 .mk-review-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: .75rem; } body.lp2 .mk-review-nav { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; color: var(--lp2-muted); transition: var(--lp2-transition); padding: 0; } body.lp2 .mk-review-nav:hover { background: var(--lp2-primary-subtle); color: var(--lp2-primary); } body.lp2 .mk-review-dots { display: flex; align-items: center; gap: 8px; } body.lp2 .mk-review-dot { width: 8px; height: 8px; border-radius: var(--lp2-r-full); background: #cfd8e3; border: none; padding: 0; transition: var(--lp2-transition); } body.lp2 .mk-review-dot:hover { background: var(--lp2-faint); } body.lp2 .mk-review-dot.is-active { width: 28px; background: var(--lp2-ink); } /* Homepage + PDF templates overlay card (block-10) */ body.lp2 .block-10 { background: var(--lp2-bg-section); color: var(--lp2-ink); /* Own stacking context, pinned BELOW the fixed nav (z-index 1030). The filtered backdrop below gets promoted to its own composited layer; without this the layer can paint over / tear across the sticky nav while scrolling (the section has no z-index of its own, so ordering was left to the compositor). isolation keeps the whole section self-contained. */ position: relative; z-index: 0; isolation: isolate; } /* The backdrop asset (img/templates.png) is a screenshot of the old purple product UI; mute it to a neutral texture until the asset is retaken */ body.lp2 .block-10__image-column { filter: grayscale(1) contrast(.9); /* keep the promoted layer strictly inside the section's stacking context */ position: relative; z-index: 0; } body.lp2 .block-10__card { border-radius: var(--lp2-r-lg); box-shadow: var(--lp2-shadow-hover); border: 1px solid var(--lp2-border); } body.lp2 .block-10__li-icon, body.lp2 .block-10__li .fr-icon { background: var(--lp2-primary-subtle); color: var(--lp2-primary); border-radius: var(--lp2-r-md); } /* Solution page rows (green check circles keep semantic success) */ body.lp2 .what-is-step { border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); transition: var(--lp2-transition); } body.lp2 .what-is-step:hover { box-shadow: var(--lp2-shadow-hover); border-color: #b9cde2; } /* Tool-page inline CTA card. Several tool pages ship their own `.cta-card { background: navy-gradient; color: #fff }`; this layer wins on background, so it must also win on text color or white-on-white results. */ body.lp2 .cta-card { background: #fff; color: var(--lp2-ink); border: 1px solid var(--lp2-primary-border); border-radius: var(--lp2-r-lg); box-shadow: var(--lp2-shadow-card); } body.lp2 .cta-card h1, body.lp2 .cta-card h2, body.lp2 .cta-card h3, body.lp2 .cta-card h4 { color: var(--lp2-ink); } /* The old navy cards used a white .cta-card__btn; on the white card that button (and its links) must flip to the primary button grammar */ body.lp2 .cta-card .cta-card__btn { background: var(--lp2-primary); color: #fff; border: none; box-shadow: var(--lp2-shadow-sm); } body.lp2 .cta-card .cta-card__btn:hover, body.lp2 .cta-card .cta-card__btn:focus { background: var(--lp2-primary-hover); color: #fff; } body.lp2 .cta-card .cta-card__small { color: var(--lp2-muted); opacity: 1; } body.lp2 .cta-card .cta-card__small a { color: var(--lp2-primary); } /* Split text+media rows (library "feature media" pattern): step badge, heading, paragraph, checklist; rows alternate left/right */ body.lp2 .mk-step-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--lp2-primary-subtle); border: 1px solid var(--lp2-primary-border); color: var(--lp2-primary-hover); font-size: .8125rem; font-weight: 600; padding: 6px 14px; border-radius: var(--lp2-r-full); margin-bottom: 14px; } body.lp2 .mk-check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .55rem; } body.lp2 .mk-check-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .9375rem; line-height: 1.5; color: var(--lp2-body); } body.lp2 .mk-check-list svg { color: var(--lp2-success); flex: 0 0 auto; margin-top: 3px; } /* Media frame: videos/screenshots sit inside a padded soft frame (design library "feature media" pattern: 16px frame, #f6f8fb fill) */ body.lp2 .feature-block-video__video, body.lp2 .mk-media-frame { border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-lg); padding: 10px; background: var(--lp2-bg-section); box-shadow: none; } /* ------------------------------------------------------------------ * * 6 - STEPS (.the-step) * ------------------------------------------------------------------ */ body.lp2 .the-step { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 1rem; margin-bottom: 2rem; position: relative; } body.lp2 .the-step__content { padding: 0 1.4rem; text-align: center; } @media (min-width: 992px) { body.lp2 .the-step__symbol-container { margin-bottom: 1.2rem; } } body.lp2 .the-step__symbol { display: flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 700; background: var(--lp2-primary-subtle); color: var(--lp2-primary); border-radius: var(--lp2-r-md); } body.lp2 .the-step__title { font-size: 1.2rem; font-weight: 600; color: var(--lp2-ink); margin-bottom: 1rem; } @media (min-width: 992px) { body.lp2 .the-step__title { font-size: 1.5rem; line-height: 1.5; } } body.lp2 .the-step__paragraph { font-size: 1rem; line-height: 1.6; color: var(--lp2-body); opacity: 1; margin: 0; } body.lp2 .the-step__arrow { display: none; color: var(--lp2-faint); } @media (min-width: 992px) { body.lp2 .the-step__arrow { display: block; position: absolute; top: 17px; right: 0; left: auto; bottom: 0; font-size: 2rem; transform: translateX(32px); width: 50px; } body.lp2 .the-step:last-of-type .the-step__arrow { display: none; } } /* ------------------------------------------------------------------ * * 7 - FAQ ACCORDION * ------------------------------------------------------------------ */ /* Section: white question cards on the soft alt background */ body.lp2 .faq-accordion-block { background: var(--lp2-bg-section); } body.lp2 .faq-accordion__list { padding-left: 0; list-style: none; } body.lp2 .faq-accordion__section { background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); padding: 0 22px; margin-bottom: 12px; } body.lp2 .faq-accordion { display: flex; align-items: center; font-weight: 600; font-size: 1.0625rem; line-height: 1.5; opacity: 1; border-top: none; padding: 18px 0; cursor: pointer; position: relative; } body.lp2 .faq-accordion__title { font-weight: 600; font-size: 1.0625rem; line-height: 1.5; color: var(--lp2-ink); opacity: 1; margin: 0; padding-right: 40px; } @media (min-width: 992px) { body.lp2 .faq-accordion { font-size: 1.125rem; } /* was 1.5rem, calmer */ body.lp2 .faq-accordion__title { font-size: 1.125rem; } } body.lp2 .faq-accordion__paragraph { font-size: .9375rem; line-height: 1.65; color: var(--lp2-body); opacity: 1; padding: 0 40px 1.25rem 0; margin: 0; border-bottom: none; } body.lp2 .faq-accordion-block-accordion .faq-accordion__section--open .faq-accordion .faq-accordion__icon { transform: rotate(180deg); } body.lp2 .faq-accordion .faq-accordion__icon { position: absolute; right: 0; width: 20px; height: 20px; display: flex; align-items: center; color: var(--lp2-primary); fill: currentColor; /* the inline svg ships fill="#000000"; CSS fill wins */ transition: .3s all; } body.lp2 .faq-accordion__content { max-height: 0; overflow: hidden; transition: .4s all; } /* ------------------------------------------------------------------ * * 8 - CTA BAND (.cta-section): gradients + radial noise retired * ------------------------------------------------------------------ */ body.lp2 .cta-section { background: var(--lp2-ink); /* inherited color set on the band so unclassed text never renders ink-on-ink */ color: var(--lp2-on-ink); padding: 80px 0; position: relative; overflow: hidden; } body.lp2 .cta-content { position: relative; z-index: 2; } body.lp2 .cta-title { color: #fff; font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.75rem, 3.5vw, 2.375rem); text-align: center; margin-bottom: 1rem; } body.lp2 .cta-subtitle { color: var(--lp2-on-ink); /* .cta-section is a dark ink band */ font-size: 1.05rem; text-align: center; margin-bottom: 2.5rem; } /* ------------------------------------------------------------------ * * 9 - TRUST STRIP (logo carousel) * ------------------------------------------------------------------ */ body.lp2 .trusted-companies-section { background: var(--lp2-bg-section); overflow: hidden; border-top: 1px solid var(--lp2-border-light); border-bottom: 1px solid var(--lp2-border-light); } /* --- Signal row: label + G2/PH ratings + GDPR/uptime assurances --- * Desktop keeps all four signals on one line. Below 768px the strip breaks at * the seam between the two groups (ratings / assurances) so each gets its own * row. Every leaf item is nowrap + no-shrink, which is what stops the star * spans from collapsing and re-wrapping into stacked clumps on a phone. */ body.lp2 .mk-trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; } body.lp2 .mk-trust-strip__label { color: var(--lp2-muted, #6c7a91); font-size: 0.8125rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } body.lp2 .mk-trust-strip__signals { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; } body.lp2 .mk-trust-strip__group { display: flex; flex-wrap: wrap; /* last-resort break on very narrow phones (<340px) */ align-items: center; justify-content: center; gap: 0.75rem 1rem; } body.lp2 .mk-trust-strip__item { display: flex; align-items: center; flex-shrink: 0; /* never let a rating squeeze and wrap mid-way */ gap: 0.375rem; white-space: nowrap; text-decoration: none; color: inherit; } body.lp2 a.mk-trust-strip__item:hover .mk-trust-strip__value { color: var(--lp2-primary); } body.lp2 a.mk-trust-strip__item:hover .mk-trust-strip__logo { opacity: 1 !important; } body.lp2 .mk-trust-strip__logo { height: 20px; width: auto; flex-shrink: 0; } body.lp2 .mk-trust-strip__item svg { color: var(--lp2-primary); flex-shrink: 0; } body.lp2 .mk-trust-strip__stars { color: #f59f00; font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; } body.lp2 .mk-trust-strip__value { color: var(--lp2-body); font-size: 0.875rem; font-weight: 500; transition: color .15s ease; } body.lp2 .mk-trust-strip__vr { height: 20px; width: 1px; flex-shrink: 0; background-color: var(--lp2-border); opacity: 1; } @media (max-width: 767.98px) { /* Label owns its own row; the two groups stack beneath it. */ body.lp2 .mk-trust-strip { gap: 0.625rem; } body.lp2 .mk-trust-strip__label { flex: 0 0 100%; text-align: center; letter-spacing: 1.5px; } body.lp2 .mk-trust-strip__signals { flex: 0 0 100%; flex-direction: column; gap: 0.5rem; } body.lp2 .mk-trust-strip__vr--label, body.lp2 .mk-trust-strip__vr--seam { display: none; } } body.lp2 .logo-scroll-wrapper { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); } body.lp2 .logo-scroll-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: logoScroll 60s linear infinite; } body.lp2 .logo-scroll-track:hover { animation-play-state: paused; } body.lp2 .logo-scroll-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 60px; min-width: 100px; max-width: 200px; } body.lp2 .logo-scroll-item img { max-height: 45px; max-width: 180px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%) opacity(.55); transition: filter .3s ease; } body.lp2 .logo-scroll-item img:hover { filter: grayscale(0) opacity(1); transform: none; } @keyframes logoScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 768px) { body.lp2 .logo-scroll-item { height: 45px; min-width: 80px; max-width: 160px; padding: 4px 8px; } body.lp2 .logo-scroll-item img { max-height: 40px; max-width: 140px; } body.lp2 .logo-scroll-track { gap: 2rem; animation-duration: 45s; } } /* ------------------------------------------------------------------ * * 10 - COMPARISON TABLES (win/loss cells) * ------------------------------------------------------------------ */ body.lp2 .table { --bs-table-border-color: var(--lp2-border-light); } body.lp2 .table thead th { font-size: .8125rem; font-weight: 600; color: var(--lp2-muted); background: var(--lp2-bg-section); } /* FormNX column (2nd) = brand blue; competitor column (3rd) = neutral grey. These were emerald in lp.css and had to be moved here: they carry !important (to beat Bootstrap's --bs-table-bg) so a non-important lp2 rule could never override them in place. */ body.lp2 table.alt-comparison-table > thead > tr > th:nth-child(2), body.lp2 table.alt-comparison-table > tbody > tr > td:nth-child(2) { background-color: var(--lp2-primary-subtle) !important; border-left: 2px solid var(--lp2-primary-border) !important; border-right: 2px solid var(--lp2-primary-border) !important; --bs-table-bg: var(--lp2-primary-subtle); } body.lp2 table.alt-comparison-table > thead > tr > th:nth-child(2) { background-color: #dbe9f8 !important; border-top: 2px solid var(--lp2-primary-border) !important; } body.lp2 table.alt-comparison-table > thead > tr > th:nth-child(3), body.lp2 table.alt-comparison-table > tbody > tr > td:nth-child(3) { background-color: rgba(108, 122, 145, .04) !important; --bs-table-bg: rgba(108, 122, 145, .04); } body.lp2 table.alt-comparison-table > thead > tr > th:nth-child(3) { background-color: rgba(108, 122, 145, .10) !important; } /* Set 'formnx_class' => 'alt-cell-win' / 'competitor_class' => 'alt-cell-loss' in __alternativesData() rows to highlight decisive rows */ body.lp2 table.alt-comparison-table tbody td.alt-cell-win { color: var(--lp2-primary) !important; font-weight: 600; } body.lp2 table.alt-comparison-table tbody td.alt-cell-loss { color: var(--lp2-faint) !important; } /* "An Honest Recommendation" cards (alternatives/partials/_choose_if). The accent rail is brand IDENTITY (which product this card is about), not yes/included semantics, so FormNX reads brand blue rather than green. */ body.lp2 .alt-choose-card { border-left-width: 4px !important; } body.lp2 .alt-choose-card .card-2__title { margin-left: 0; } body.lp2 .alt-choose-card--formnx { border-left-color: var(--lp2-primary) !important; } body.lp2 .alt-choose-card--formnx .alt-choose-card__tick { color: var(--lp2-primary); } body.lp2 .alt-choose-card--competitor { border-left-color: var(--lp2-muted) !important; } body.lp2 .alt-choose-card--competitor .alt-choose-card__tick { color: var(--lp2-muted); } /* ------------------------------------------------------------------ * * 11 - NAV * ------------------------------------------------------------------ */ body.lp2 .hero-nav__link { color: var(--lp2-body); opacity: 1; font-weight: 500; } body.lp2 .hero-nav__link:hover, body.lp2 .hero-nav__link:focus { color: var(--lp2-primary); } body.lp2 .hero-nav--is-sticky::before { box-shadow: var(--lp2-shadow-md); } /* The sticky bar is `position: fixed` (lp.css) but never sets `top`, so it falls back to `top: auto` — the browser pins it to its STATIC in-flow position, a fractional value that shifts by a few px on mobile as the URL bar collapses and the visual viewport resizes. That drift pushed the bar slightly above the viewport top, clipping the My Forms button. Pin it explicitly to the top edge so it stays put on every device and scroll position. */ body.lp2 .hero-nav--is-sticky { top: 0; } /* Library nav bar: contained white card with hairline border, 15px links, compact CTA. Sticky state keeps the existing full-width bar. */ body.lp2 .hero-nav__item { font-size: .9375rem; } body.lp2 .hero-nav .dropdown-toggle::after { opacity: .55; } @media (min-width: 992px) { body.lp2 .hero-nav:not(.hero-nav--is-sticky) { background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-lg); box-shadow: var(--lp2-shadow-card); margin-top: 14px; height: 72px; padding: 0 20px; } body.lp2 .hero-nav__item { margin: 0 .8rem; } body.lp2 .hero-nav .btn { padding: 9px 18px; font-size: .9375rem; } body.lp2 .hero-nav__logo { height: 36px; } } @media (max-width: 991.98px) { body.lp2 .hero-nav__logo { height: 44px; } /* The nav bar was locked to a fixed 100px height at every breakpoint, but the mobile logo is only 44px (36px below 768px). That left ~28px of dead space under the logo before page content, which read as an oversized gap between the nav and the first heading. Bring the bar to a modern mobile height so headings sit closer to the nav. The value drives .hero-nav, the reserved .fixed-nav-container height and the sticky offset together, so they stay in sync. */ body.lp2 .hero { --hero-nav-height: 68px; } /* Two things were eating horizontal room in the mobile bar: 1. `.hero-nav__item { margin: auto }` (lp.css) is only overridden at >=992px, so below lg the logo's

takes AUTO side margins and absorbs the row's free space - roughly 30px on each side, which pushed the logo inward and pulled the hamburger away from the right edge. 2. The bar is a Bootstrap `.container`, so from 576px up it inherits a max-width (540px / 720px). With `position: fixed; left:0; right:0; margin:auto` the content box then centres inside the viewport, insetting the logo/hamburger even further (100px+ each side at 760px). Below lg the bar is a plain full-bleed header (the contained-card treatment starts at 992px), so let it span and let its own 1rem padding - and nothing else - set the edge spacing. Zeroing the auto margins alone would collapse the logo AND the My Forms + hamburger group together at the left, so the row also has to justify its two in-flow groups to opposite ends. (The middle

is the off-canvas menu - position: fixed, so it is out of flow and takes no part in this.) */ body.lp2 .hero-nav__item { margin-left: 0; margin-right: 0; } body.lp2 .hero-nav > ul.nav { justify-content: space-between; } body.lp2 .hero-nav--is-sticky { max-width: none; width: 100%; } } /* ------------------------------------------------------------------ * * 12 - NEW COMPONENTS (no legacy CSS existed): mk-* classes * ------------------------------------------------------------------ */ /* Breadcrumbs */ body.lp2 .mk-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: var(--lp2-muted); list-style: none; padding: 0; } body.lp2 .mk-breadcrumbs a { color: var(--lp2-muted); text-decoration: none; } body.lp2 .mk-breadcrumbs a:hover { color: var(--lp2-primary); } body.lp2 .mk-breadcrumbs .mk-breadcrumbs__current { color: var(--lp2-ink); font-weight: 600; } body.lp2 .mk-breadcrumbs__sep { color: var(--lp2-faint); } /* Stats band (homepage users/forms/submissions) */ body.lp2 .mk-stats-band { background: var(--lp2-primary); border-radius: var(--lp2-r-lg); padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; } body.lp2 .mk-stats-band__num { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; color: #fff; } body.lp2 .mk-stats-band__label { font-size: .9375rem; color: #cfe3fa; margin-top: 4px; } /* Money-back guarantee card (pulse animation + oversized icon retired) */ body.lp2 .guarantee-card, body.lp2 .mk-guarantee { display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--lp2-primary-border); border-radius: var(--lp2-r-lg); padding: 28px; box-shadow: var(--lp2-shadow-card); animation: none; } body.lp2 .mk-guarantee__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--lp2-success-subtle); color: var(--lp2-success); border-radius: 50%; font-size: 34px; } /* Guarantee icons: the legacy markup paints an emerald GRADIENT tile with a WHITE glyph on it - white-on-light-green is barely legible, and gradients were retired system-wide. Swap to the site's icon-tile grammar: soft tile, strong glyph. The big shield keeps success-green (it IS the guarantee); the three supporting facts use the primary-blue tile used everywhere else. */ body.lp2 .guarantee-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; background: var(--lp2-success-subtle) !important; background-image: none !important; color: var(--lp2-success-ink, #1d7a2e) !important; border-radius: 50%; box-shadow: none !important; animation: none; } body.lp2 .guarantee-icon-wrapper svg { width: 38px; height: 38px; } body.lp2 .guarantee-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; background: var(--lp2-primary-subtle) !important; background-image: none !important; color: var(--lp2-primary) !important; border-radius: var(--lp2-r-md); box-shadow: none !important; font-size: 1rem; } body.lp2 .guarantee-feature__content h4 { font-size: 1rem; font-weight: 600; color: var(--lp2-ink); margin-bottom: 2px; } body.lp2 .guarantee-feature__content span { font-size: .875rem; color: var(--lp2-muted); } /* Remaining legacy emerald (#22c55e tints + a green gradient wash) neutralised; the three facts sit on one row instead of wrapping 2 + 1. */ body.lp2 .guarantee-section { background: var(--lp2-bg-section); background-image: none !important; } /* Two emerald gradients hide in pseudo-elements: a radial wash on the section and a 4px green->blue bar across the card's top edge. Gradients are retired system-wide, so both go. */ body.lp2 .guarantee-section::before, body.lp2 .guarantee-card::before { content: none !important; } body.lp2 .guarantee-features { display: grid !important; grid-template-columns: 1fr; gap: 12px; width: 100%; } @media (min-width: 768px) { body.lp2 .guarantee-features { grid-template-columns: repeat(3, 1fr) !important; } } body.lp2 .guarantee-feature { display: flex; align-items: center; gap: 12px; background: #fff !important; border: 1px solid var(--lp2-border-light) !important; border-radius: var(--lp2-r-md); padding: 14px; } body.lp2 .guarantee-card__content { flex: 1 1 auto; } body.lp2 .guarantee-card__title { font-size: 1.375rem; font-weight: 700; color: var(--lp2-ink); margin-bottom: .5rem; } body.lp2 .guarantee-card__description { font-size: .9375rem; color: var(--lp2-body); margin-bottom: 1.25rem; } /* Mobile: the shield-left / text-right row leaves the copy squeezed into a narrow column that reads off-centre against the card. Stack the shield above the content instead so the (already centred) title and description sit on the card's true centre line. Desktop keeps the side-by-side row. */ @media (max-width: 767.98px) { body.lp2 .guarantee-card, body.lp2 .mk-guarantee { flex-direction: column; } body.lp2 .guarantee-card__content { width: 100%; } } /* ------------------------------------------------------------------ * * 18 - PRICING PAGE * The plan cards come from user/subscription/partials/packages (shared * with the in-app upgrade modal), so everything here is scoped to * body.lp2 - the app pages never carry that class and stay untouched. * ------------------------------------------------------------------ */ body.lp2 .mk-price-hero { padding: 3rem 0 2.5rem; } @media (min-width: 992px) { body.lp2 .mk-price-hero { padding: 4rem 0 3rem; } } /* Inline reassurance row under the hero promise */ body.lp2 .mk-price-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 1.25rem; font-size: .9375rem; color: var(--lp2-body); } body.lp2 .mk-price-hero__trust span { display: inline-flex; align-items: center; gap: 6px; } body.lp2 .mk-price-hero__trust svg { color: var(--lp2-success); } /* Free-plan feature checks: compact rows, NOT tall cards. The old markup put each feature in a .card-2 (a title+paragraph card) with no paragraph, so every check carried a card's worth of empty height. */ body.lp2 .mk-price-checks { display: grid; grid-template-columns: 1fr; gap: 10px 28px; max-width: 900px; } @media (min-width: 576px) { body.lp2 .mk-price-checks { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { body.lp2 .mk-price-checks { grid-template-columns: repeat(3, 1fr); } } body.lp2 .mk-price-check { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; color: var(--lp2-ink); } body.lp2 .mk-price-check svg { flex: 0 0 auto; color: var(--lp2-success); } /* --- Plan cards (shared partial, restyled for the marketing page) --- */ body.lp2 .mk-plans-section { background: #fff; } /* Mobile gutter: the partial's #pricing_card > .card-body has padding:0 (correct on desktop, where the plan columns align to the section's full width), so on a phone the stacked cards run edge-to-edge. Inset the whole section below the md breakpoint. Scoped to .mk-plans-section (marketing only) so the shared dashboard packages partial is untouched. */ @media (max-width: 767.98px) { body.lp2 .mk-plans-section { padding-left: 1rem; padding-right: 1rem; } } /* The partial wraps everything in an outer .card; the page section already provides the surface, so flatten it */ body.lp2 .mk-plans-section #pricing_card { border: 0; box-shadow: none; background: transparent; } body.lp2 .mk-plans-section #pricing_card > .card-header { border: 0 !important; background: transparent; padding-bottom: 1.5rem; } body.lp2 .mk-plans-section #pricing_card > .card-body { padding: 0; } /* Individual plan card: design-system surface + lift, popular card ringed */ body.lp2 .mk-plans-section .card.on_hover { border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-lg); box-shadow: var(--lp2-shadow-card); /* NOT `all`: transitioning every property makes the legacy hover rule below animate border-WIDTH, which reflows the card contents by a pixel */ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* app.css ships `.on_hover:hover { border: solid 2px var(--bs-success) !important; box-shadow: 0 0 25px rgba(35,35,35,.3) }` - a green 2px border and a heavy dark shadow. Against lp2's blue card shadow that read as a blue->navy colour flicker on hover, plus a 1px->2px border jump. Neutralised here (matching !important, and the border width is kept identical to the resting state). */ body.lp2 .mk-plans-section .card.on_hover:hover { transform: translateY(-2px); /* standard card lift */ border: 1px solid #b9cde2 !important; box-shadow: var(--lp2-shadow-hover) !important; } body.lp2 .mk-plans-section .card.border-primary, body.lp2 .mk-plans-section .card.border-primary:hover { border: 2px solid var(--lp2-primary) !important; } body.lp2 .mk-plans-section .card.border-primary { box-shadow: var(--lp2-shadow-md); } body.lp2 .mk-plans-section .card.border-primary:hover { box-shadow: var(--lp2-shadow-lg) !important; } /* Inner header/footer must follow the card's 1rem radius, else their own corners (Tabler ships 4px + a solid white footer background) paint over the rounded card corners and flatten them into square edges. overflow:hidden on the card is NOT an option: the "Most Popular" and "Save 30%" badges are positioned outside its box and would be clipped. */ body.lp2 .mk-plans-section .card.on_hover > .card-header { border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0; } body.lp2 .mk-plans-section .card.on_hover > .card-footer { border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px); } body.lp2 .mk-plans-section .card-header { background: transparent; padding: 1.5rem 1.25rem 1rem; } body.lp2 .mk-plans-section .card-title { font-size: 1.125rem; font-weight: 600; color: var(--lp2-ink); } body.lp2 .mk-plans-section .card-body { padding: 1rem 1.25rem; } body.lp2 .mk-plans-section .card-footer { border-top: 0; padding: 1rem 1.25rem 1.5rem; } /* Plan CTA follows the site's primary button, not bootstrap green */ body.lp2 .mk-plans-section .card-footer .btn-success, body.lp2 .mk-plans-section .card-footer .btn-outline-success { background: var(--lp2-primary); border-color: var(--lp2-primary); color: #fff; } body.lp2 .mk-plans-section .card-footer .btn-outline-success { background: transparent; color: var(--lp2-primary); } body.lp2 .mk-plans-section .card-footer .btn-success:hover, body.lp2 .mk-plans-section .card-footer .btn-outline-success:hover { background: var(--lp2-primary-hover); border-color: var(--lp2-primary-hover); color: #fff; } /* NOTE: the "Save 30%" pill (.mk-save-flash) is deliberately NOT defined here. It lives in resources/sass/app.scss (-> public/css/app.css) so the same badge renders inside the app too (upgrade modal + /user/subscriptions), which extend layouts.app and never carry the body.lp2 class this file is scoped to. */ /* Trust signals row that ships inside the packages partial */ body.lp2 .trust-signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; } body.lp2 .trust-signal { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--lp2-body); } /* Glyph matches its tile (blue), like every other icon tile on the site. A green glyph on a blue tile was the "still looks green" report. */ body.lp2 .trust-signal__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--lp2-primary) !important; background: var(--lp2-primary-subtle) !important; background-image: none !important; border-radius: var(--lp2-r-sm); width: 34px; height: 34px; flex: 0 0 auto; box-shadow: none !important; } body.lp2 .trust-signal__icon svg { width: 18px; height: 18px; } body.lp2 .trust-signal__text { color: var(--lp2-body); } /* On mobile app.css stacks the signals into a column, so the box shrinks to the width of its longest line and sits as a narrow card floating mid-page. Let it fill the container instead — the wrapper is a centering flexbox, so the child needs an explicit width to stretch. Desktop keeps the shrink-to-fit row. */ @media (max-width: 768px) { body.lp2 .trust-signals { width: 100%; } } /* Bootstrap-collapse FAQ (pricing page). The homepage accordion is a different, JS-driven widget scoped to #faq-accordion-block. */ body.lp2 .faq-accordion__body { font-size: .9375rem; line-height: 1.65; color: var(--lp2-body); padding: 0 40px 1.25rem 0; } body.lp2 .faq-accordion[aria-expanded="true"] .faq-accordion__icon { transform: rotate(180deg); } body.lp2 button.faq-accordion { background: transparent; border: 0; justify-content: space-between; } /* ------------------------------------------------------------------ * * 19 - TEMPLATE / PDF FEATURE HEROES * `.templates-hero-section` (vendor.css) paints a 4px full-bleed * `border-top: var(--template-theme-color)` - directly beneath the floating * rounded nav that reads as a stray rule / rendering artifact rather than a * brand accent. Dropped on marketing pages; these pages already carry their * identity through the section tint and their CTA colour. * ------------------------------------------------------------------ */ body.lp2 .templates-hero-section { border-top: 0 !important; padding-top: 2rem; } /* PDF feature pages keep the red identity (round 4), so the hero icon tile follows it too - a blue tile on a red page read as a leftover. The .pdf-theme hook exists because .feature-detail-page / .features-listing-page are SHARED with the (blue) form-feature pages. */ body.lp2 .pdf-theme .feature-icon, body.lp2 .pdf-theme .icon-wrapper, body.lp2 .pdf-theme .fr-icon { background: #fef2f2; color: var(--lp2-danger); } body.lp2 .pdf-theme .feature-icon svg, body.lp2 .pdf-theme .icon-wrapper svg, body.lp2 .pdf-theme .fr-icon svg { color: var(--lp2-danger); } /* the icon hover on cards flips the tile to solid; keep it red on PDF pages */ body.lp2 .pdf-theme .enhanced-card:hover .icon-wrapper, body.lp2 .pdf-theme .card-2:hover .fr-icon { background: var(--lp2-danger); color: #fff; } body.lp2 .pdf-theme .enhanced-card:hover .icon-wrapper svg, body.lp2 .pdf-theme .card-2:hover .fr-icon svg { color: #fff; } /* ------------------------------------------------------------------ * * 20 - TOOLS INDEX * The old cards used raw 100px black line-art icons floated beside the * copy (off-system, and the icon column forced the odd card heights). * ------------------------------------------------------------------ */ body.lp2 .mk-tool-card { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 1.5rem; background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); box-shadow: var(--lp2-shadow-card); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body.lp2 .mk-tool-card:hover { transform: translateY(-2px); /* standard card lift */ box-shadow: var(--lp2-shadow-hover); border-color: #b9cde2; text-decoration: none; } body.lp2 .mk-tool-card .mk-icon-tile { margin-bottom: 1rem; } body.lp2 .mk-tool-card:hover .mk-icon-tile { background: var(--lp2-primary); color: #fff; } body.lp2 .mk-tool-card__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--lp2-ink); margin-bottom: .5rem; } body.lp2 .mk-tool-card__desc { font-size: .9375rem; line-height: 1.55; color: var(--lp2-body); margin-bottom: 1rem; } /* pinned to the bottom so the link sits on one line across a mixed-height row */ body.lp2 .mk-tool-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: .9375rem; font-weight: 600; color: var(--lp2-primary); } body.lp2 .mk-tool-card:hover .mk-tool-card__link svg { transform: translateX(3px); } body.lp2 .mk-tool-card__link svg { transition: transform .2s ease; } /* Inline mid-page CTA used on tool pages (bridge from the free tool into the product). Soft card so it stands out without a second dark band. */ body.lp2 .mk-tool-cta { margin: 2.5rem auto 0; padding: 2rem; text-align: center; background: var(--lp2-primary-subtle); border: 1px solid var(--lp2-primary-border, #cfe0f5); border-radius: var(--lp2-r-lg); } body.lp2 .mk-tool-cta__title { font-size: 1.5rem; font-weight: 700; color: var(--lp2-ink); margin-bottom: .75rem; } body.lp2 .mk-tool-cta__body { font-size: .9375rem; line-height: 1.65; color: var(--lp2-body); margin-bottom: 1.25rem; } /* ------------------------------------------------------------------ * * 21 - "ASK AN AI" BLOCK (partials/ask_ai.blade.php) * Deep-links to ChatGPT / Claude / Perplexity / Google AI Mode with a * prefilled prompt about FormNX - a second opinion for the visitor who * is nearly convinced but wants outside validation. * ------------------------------------------------------------------ */ body.lp2 .mk-ask-ai { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; padding: 2rem; background: var(--lp2-primary-subtle); border: 1px solid var(--lp2-primary-border, #cfe0f5); border-radius: var(--lp2-r-lg); } @media (min-width: 992px) { body.lp2 .mk-ask-ai { flex-direction: row; justify-content: space-between; text-align: left; padding: 2.25rem 2.5rem; } } body.lp2 .mk-ask-ai__copy { flex: 1 1 auto; } body.lp2 .mk-ask-ai__title { font-size: 1.5rem; font-weight: 700; color: var(--lp2-ink); margin-bottom: .35rem; } @media (min-width: 992px) { body.lp2 .mk-ask-ai__title { font-size: 1.75rem; } } body.lp2 .mk-ask-ai__subtitle { font-size: .9375rem; color: var(--lp2-body); margin: 0; } body.lp2 .mk-ask-ai__actions { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; flex: 0 0 auto; } body.lp2 .mk-ask-ai__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); font-size: .9375rem; font-weight: 600; color: var(--lp2-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body.lp2 .mk-ask-ai__btn:hover { transform: translateY(-2px); box-shadow: var(--lp2-shadow-hover); border-color: #b9cde2; color: var(--lp2-ink); text-decoration: none; } body.lp2 .mk-ask-ai__logo { display: inline-flex; align-items: center; line-height: 0; } /* Section background alternation helper */ body.lp2 .mk-section-alt { background: var(--lp2-bg-section); } /* On gray bands, media frames flip to white so they still pop */ body.lp2 .mk-section-alt .mk-media-frame, body.lp2 .mk-section-alt .feature-block-video__video { background: #fff; } /* Single-review strip as a gray band needs real breathing room (its stock padding assumes it blends into surrounding white) */ body.lp2 .alt-review-section.mk-section-alt { padding: 56px 0; } /* Full-bleed ink section (mid-page rhythm break). Generic dark band: headings flip white, body copy flips light, section-head pill goes white-alpha. Used by the homepage stats section. */ body.lp2 .mk-band-ink { background: var(--lp2-ink); color: var(--lp2-on-ink); } body.lp2 .mk-band-ink .block__title, body.lp2 .mk-band-ink .block__title--big { color: #fff; } body.lp2 .mk-band-ink .block__paragraph, body.lp2 .mk-band-ink .text-muted { color: var(--lp2-on-ink) !important; opacity: 1; } body.lp2 .mk-band-ink .mk-section-head .block__pre-title { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #cfe3fa; } /* Inside an ink band the blue stats card dissolves into the band: numbers sit directly on the ink, separated by hairline dividers */ body.lp2 .mk-band-ink .mk-stats-band { background: transparent; border-radius: 0; padding-left: 0; padding-right: 0; } @media (min-width: 992px) { body.lp2 .mk-band-ink .mk-stats-band > div + div { border-left: 1px solid rgba(255, 255, 255, .12); } } /* Centered section-header eyebrow helper (wraps block__pre-title). Per the library, centered section eyebrows are blue pill badges; the bare amber uppercase text stays for left-aligned headers. */ body.lp2 .mk-section-head { text-align: center; } body.lp2 .mk-section-head .block__pre-title { display: inline-flex; align-items: center; gap: 7px; background: var(--lp2-primary-subtle); border: 1px solid var(--lp2-primary-border); color: var(--lp2-primary-hover); font-size: .8125rem; font-weight: 600; letter-spacing: normal; text-transform: none; padding: 6px 14px; border-radius: var(--lp2-r-full); margin-bottom: 14px; } /* Final CTA as a dark ink band: add "mk-cta-band" to the section wrapper, content markup stays as-is */ body.lp2 .mk-cta-band { background: var(--lp2-ink); /* Set the inherited color on the BAND, not only on .text-muted/.block__paragraph. Previously any unclassed element inside it kept body.lp2's ink color and rendered ink-on-ink — the No credit card required · Cancel anytime under the pricing CTA was literally invisible (1.0:1). */ color: var(--lp2-on-ink); } body.lp2 .mk-cta-band .block__title--big, body.lp2 .mk-cta-band h2, body.lp2 .mk-cta-band h3, body.lp2 .mk-cta-band strong { color: #fff; } body.lp2 .mk-cta-band .block__paragraph, body.lp2 .mk-cta-band .text-muted { color: var(--lp2-on-ink) !important; opacity: 1; } body.lp2 .mk-cta-band .btn-primary { background: var(--lp2-primary); color: #fff; } body.lp2 .mk-cta-band .btn-primary:hover { background: var(--lp2-primary-hover); } /* The eyebrow pill needs an on-ink treatment (the default light-surface pill is invisible on the dark band). Lives here rather than as an inline style= on each page so every CTA band stays in sync. */ body.lp2 .mk-cta-band .mk-eyebrow-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #e8c98a; } /* Hero eyebrow pill sits centered above the H1 in the flex-column hero */ body.lp2 .hero__body .mk-eyebrow-pill { margin-bottom: 1.25rem; } /* Hero proof row: overlapping reviewer avatars + G2 stars + live count, one compact line under the primary CTA */ body.lp2 .mk-hero-proof { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; font-size: .9375rem; color: var(--lp2-body); } body.lp2 .mk-hero-proof__avatars { display: inline-flex; } body.lp2 .mk-hero-proof__avatars img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; box-shadow: var(--lp2-shadow-sm); } body.lp2 .mk-hero-proof__avatars img:first-child { margin-left: 0; } body.lp2 .mk-hero-proof__stars { color: #f59f00; font-size: .75rem; letter-spacing: 1.5px; } body.lp2 .mk-hero-proof__text strong { color: var(--lp2-ink); font-weight: 700; } /* Rating source link: reads as text, not a button (the CTA above owns the clicks) */ body.lp2 .mk-hero-proof__source { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } body.lp2 .mk-hero-proof__source:hover { border-bottom-color: var(--lp2-border); } body.lp2 .mk-hero-proof__source img { vertical-align: -2px; } /* ------------------------------------------------------------------ * * 13 - MISC CLEANUP * ------------------------------------------------------------------ */ body.lp2 .affiliate-ref-message { background: var(--lp2-ink); box-shadow: var(--lp2-shadow-hover); animation: none; /* infinite fade loop retired */ } body.lp2 .signup-form { border-radius: var(--lp2-r-lg); box-shadow: var(--lp2-shadow-hover); } body.lp2 .signup-form__input { border-radius: var(--lp2-r-sm); } body.lp2 .signup-form__input:focus { border-color: var(--lp2-primary); background: #fff; box-shadow: var(--lp2-focus-ring); } /* ------------------------------------------------------------------ * * 14 - FOOTER (block-41): dark ink treatment from the design library * ------------------------------------------------------------------ */ body.lp2 .block-41 { background: var(--lp2-ink); color: var(--lp2-faint); border-top: none !important; } body.lp2 .block-41__logo { filter: brightness(0) invert(1); /* light-on-dark wordmark from the existing asset */ } body.lp2 .block-41__li-heading { color: #fff; } body.lp2 .block-41__li-link, body.lp2 .block-41__extra-link { color: var(--lp2-on-ink); transition: color .2s ease; } body.lp2 .block-41__li-link:hover, body.lp2 .block-41__li-link:focus, body.lp2 .block-41__extra-link:hover, body.lp2 .block-41__extra-link:focus { color: #fff; text-decoration: none; } body.lp2 .block-41__divider { color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); opacity: 1; } body.lp2 .block-41__copyrights { color: #8a97ab; } /* Brand echo: giant low-contrast wordmark cropped at the page's bottom edge. Pure decoration (aria-hidden in markup); real text so it costs nothing. */ body.lp2 .block-41 { overflow: hidden; } body.lp2 .mk-footer-wordmark { font-size: clamp(5rem, 20vw, 20rem); font-weight: 800; letter-spacing: .1em; /* tracked out to span ~85% of the footer width */ text-indent: .1em; /* offsets the trailing letter-space so it stays centered */ line-height: 1; text-align: center; white-space: nowrap; color: rgba(255, 255, 255, .05); user-select: none; pointer-events: none; margin: 3rem auto -0.34em; /* negative bottom crops the wordmark at the page edge */ } /* Letters filled with a halftone dot grid (echoes the dotted logomark). Solid rgba fill above stays as the fallback where text-clip is missing. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { body.lp2 .mk-footer-wordmark { color: transparent; background-image: radial-gradient(circle, rgba(255, 255, 255, .15) 1.7px, transparent 2.2px); background-size: 9px 9px; -webkit-background-clip: text; background-clip: text; } } /* Nudge the footer wordmark up a hair on desktop so it clears the page edge cleanly. Kept to >=992px per request; a translate leaves the -0.34em crop math untouched. */ @media (min-width: 992px) { body.lp2 .mk-footer-wordmark { transform: translateY(-3px); } } /* Verified review card: old-emerald tints move to the system success tones (verified = genuine semantics, stays green, but the right green) */ body.lp2 .alt-final-review { box-shadow: var(--lp2-shadow-card); } body.lp2 .alt-final-review__verify { background: var(--lp2-success-subtle); border-color: rgba(47, 179, 68, .35); color: var(--lp2-success-ink); } body.lp2 .alt-final-review__verify:hover { background: #cdeed3; color: var(--lp2-success-ink); } /* Focus visibility site-wide (accessibility) */ body.lp2 a:focus-visible, body.lp2 button:focus-visible, body.lp2 .btn:focus-visible { outline: 2px solid var(--lp2-primary); outline-offset: 2px; } /* ------------------------------------------------------------------ * * 17 - HOVER PERSONALITY (Option H) * Micro-interactions on hover: icon tiles dip to solid primary, avatars ring, * CTA arrows nudge, FAQ questions tint. Restrained by design — one lift * distance (-2px for cards, -1px for buttons), one easing (--lp2-ease), no * rotation, no scale, no overshoot. * ------------------------------------------------------------------ */ /* Icon tiles: colour dip only (subtle blue -> solid primary). The tilt is deliberately gone: `rotate(-5deg) scale(1.06)` on an overshoot easing read as toy-like next to the rest of the system. The dip alone is enough of a signal, and it costs no layout movement. */ body.lp2 .mk-icon-tile, body.lp2 .fr-icon, body.lp2 .enhanced-card .icon-wrapper, body.lp2 .the-step__symbol, body.lp2 .pain-card__icon { transition: background-color .15s var(--lp2-ease), color .15s var(--lp2-ease); } body.lp2 .icon-card:hover .mk-icon-tile, body.lp2 .card-2:hover .fr-icon, body.lp2 .block-10__li:hover .fr-icon, body.lp2 .enhanced-card:hover .icon-wrapper { background: var(--lp2-primary); color: #fff; } body.lp2 .enhanced-card:hover .icon-wrapper svg { color: #fff; } /* Testimonial cards: avatar gets a soft brand ring when the card lifts */ body.lp2 .testimonial-card-1 .flex-testimonials-block-person__avatar { transition: box-shadow .2s ease; } body.lp2 .testimonial-card-1:hover .flex-testimonials-block-person__avatar { box-shadow: 0 0 0 3px var(--lp2-primary-subtle), 0 0 0 4px var(--lp2-primary-border); } /* CTA arrows nudge forward with the button hover */ body.lp2 .btn .fa-long-arrow-alt-right { display: inline-block; transition: transform .2s ease; } body.lp2 .btn:hover .fa-long-arrow-alt-right { transform: translateX(4px); } /* FAQ rows: question tints brand blue, closed chevron dips. The dip is scoped to CLOSED items only so it never overwrites the open-state rotate(180deg) transform. */ body.lp2 .faq-accordion:hover .faq-accordion__title { color: var(--lp2-primary); } body.lp2 .faq-accordion__title { transition: color .2s ease; } body.lp2 .faq-accordion__section:not(.faq-accordion__section--open) .faq-accordion:hover .faq-accordion__icon { transform: translateY(2px); } /* ------------------------------------------------------------------ * * 16 - SIGNATURE MOTIF (Option E) * Oversized form-field line art (input skeleton, checkbox, toggle) * peeking from the hero edges and the dark CTA band. Pure CSS pseudo * elements with inline SVG, so no markup changes; desktop only. * Scoped to .hero__body (homepage-style heroes only) - nav dropdowns * live outside it, so overflow:hidden here can never clip menus. * ------------------------------------------------------------------ */ @media (min-width: 992px) { /* Shapes anchor to the FULL-WIDTH header (not .hero__body, which sits inside the 1140px container and made the hero read as a boxed card with dead gutters). :has(.hero__body) keeps the coverage identical to the old .hero__body scoping - homepage-style heroes only. No overflow:hidden here (nav dropdowns live inside .hero); the body's own overflow-x:hidden absorbs the negative edge offsets. Pseudos are z-index:0 with the hero copy lifted above, so they paint over the hero's white background but never over text. The lift MUST go on .hero__body, never on .hero__content: the sticky nav is a descendant of .hero__content, so a stacking context there traps the nav's z-index:1030 inside a z-index:1 box. Later sections that also use z-index:1 (e.g. .mk-cta-band > .container) then win the tie and paint their buttons and text OVER the sticky nav. .hero__body is the nav's SIBLING, so lifting it is safe. */ body.lp2 .hero .hero__body { position: relative; z-index: 1; } /* clip (not hidden) = no scroll container, vertical stays visible, so nav dropdowns can never be cut off */ body.lp2 .hero:has(.hero__body) { overflow-x: clip; } body.lp2 .hero:has(.hero__body)::before, body.lp2 .hero:has(.hero__body)::after, body.lp2 .mk-cta-band::before, body.lp2 .mk-cta-band::after { content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; pointer-events: none; } /* Hero left: radio group + star-rating fragment inside a soft blue glow. Mirrors the right cluster with different form elements so the pair reads as one motif, not a copy-paste. (The old left twin was removed for the live-demo split hero; that split is gone, so the left side earned its shapes back.) */ body.lp2 .hero:has(.hero__body)::before { width: 520px; height: 460px; left: -140px; top: 27%; transform: rotate(-7deg); z-index: 0; opacity: .75; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' fill='none' stroke='%23dce1e7' stroke-width='2'%3E%3Ccircle cx='38' cy='38' r='26'/%3E%3Ccircle cx='38' cy='38' r='11' fill='%23dce1e7' stroke='none'/%3E%3Cline x1='88' y1='38' x2='250' y2='38' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='38' cy='106' r='26'/%3E%3Cline x1='88' y1='106' x2='210' y2='106' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3Cg transform='translate(8 190) scale(4)' stroke-width='.6' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23dce1e7' fill-opacity='.45'/%3E%3C/g%3E%3Cg transform='translate(112 190) scale(4)' stroke-width='.6' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(closest-side at 40% 52%, rgba(6, 111, 209, .06), transparent 80%); background-size: 280px 300px, 100% 100%; background-position: 70px 90px, 0 0; } /* Hero right: checked checkbox and an "on" toggle peeking from the edge. */ body.lp2 .hero:has(.hero__body)::after { width: 290px; height: 310px; right: -70px; top: 22%; transform: rotate(7deg); z-index: 0; opacity: .75; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' fill='none' stroke='%23dce1e7' stroke-width='2'%3E%3Crect x='10' y='10' width='84' height='84' rx='20'/%3E%3Cpath d='M32 52l16 16 34-34' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='118' y1='52' x2='288' y2='52' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3Crect x='10' y='170' width='150' height='72' rx='36'/%3E%3Ccircle cx='124' cy='206' r='24'/%3E%3Cline x1='184' y1='206' x2='288' y2='206' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); } /* Dark CTA band: same shapes as white ghosts */ body.lp2 .mk-cta-band { position: relative; overflow: hidden; } body.lp2 .mk-cta-band .container { position: relative; z-index: 1; } body.lp2 .mk-cta-band::before { width: 230px; height: 160px; left: -60px; bottom: -30px; transform: rotate(8deg); opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 250' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cline x1='14' y1='34' x2='134' y2='34' stroke-width='12' stroke-linecap='round' opacity='.7'/%3E%3Crect x='9' y='70' width='342' height='96' rx='18'/%3E%3Cline x1='40' y1='98' x2='40' y2='138' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='14' y1='206' x2='94' y2='206' stroke-width='12' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E"); } /* .cta-section (tool/alternative page CTA bands) shares the right-side ghost via ::after; its ::before stays reserved for killing the legacy radial overlay in section 8, and lp.css pins that pseudo full-bleed. */ body.lp2 .cta-section::after { content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; pointer-events: none; } body.lp2 .mk-cta-band::after, body.lp2 .cta-section::after { width: 180px; height: 192px; right: -46px; top: -20px; transform: rotate(-7deg); opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='10' y='10' width='84' height='84' rx='20'/%3E%3Cpath d='M32 52l16 16 34-34' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='118' y1='52' x2='288' y2='52' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3Crect x='10' y='170' width='150' height='72' rx='36'/%3E%3Ccircle cx='124' cy='206' r='24'/%3E%3Cline x1='184' y1='206' x2='288' y2='206' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); } /* Corner ghosts: ultra-faint motif marks for long white sections. Add .mk-ghost-tr (top-right checkbox/toggle) or .mk-ghost-bl (bottom-left input skeleton) to a section wrapper. isolation:isolate keeps the z-index:-1 pseudo above the section's own white background but under every card and heading; overflow:hidden stops the edge shapes from causing horizontal scroll. */ body.lp2 .mk-ghost-tr, body.lp2 .mk-ghost-bl { position: relative; isolation: isolate; overflow: hidden; } body.lp2 .mk-ghost-tr::after, body.lp2 .mk-ghost-bl::after { content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: -1; opacity: .45; } body.lp2 .mk-ghost-tr::after { width: 210px; height: 225px; right: -50px; top: 28px; transform: rotate(-7deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' fill='none' stroke='%23dce1e7' stroke-width='2'%3E%3Crect x='10' y='10' width='84' height='84' rx='20'/%3E%3Cpath d='M32 52l16 16 34-34' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='118' y1='52' x2='288' y2='52' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3Crect x='10' y='170' width='150' height='72' rx='36'/%3E%3Ccircle cx='124' cy='206' r='24'/%3E%3Cline x1='184' y1='206' x2='288' y2='206' stroke-width='12' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); } body.lp2 .mk-ghost-bl::after { width: 230px; height: 160px; left: -55px; bottom: 24px; transform: rotate(8deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 250' fill='none' stroke='%23dce1e7' stroke-width='2'%3E%3Cline x1='14' y1='34' x2='134' y2='34' stroke-width='12' stroke-linecap='round' opacity='.7'/%3E%3Crect x='9' y='70' width='342' height='96' rx='18'/%3E%3Cline x1='40' y1='98' x2='40' y2='138' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='14' y1='206' x2='94' y2='206' stroke-width='12' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E"); } } /* ------------------------------------------------------------------ * * 15 - SCROLL REVEAL (Option G) * The reveal script in external_pages/layout.blade.php adds .mk-reveal * ONLY to elements below the fold, then swaps in .mk-reveal--in as they * enter the viewport and removes both classes once the transition ends. * No JS = no classes = nothing ever hidden (crawler/no-script safe). * ------------------------------------------------------------------ */ html.mk-reveal-on .mk-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; } html.mk-reveal-on .mk-reveal--in { opacity: 1; transform: translateY(0); } /* Checkmark lists draw themselves once their container reveals. The dash hiding is scoped to .mk-reveal containers only, so lists that load inside the initial viewport are never hidden. */ html.mk-reveal-on .mk-reveal .mk-check-list svg path { stroke-dasharray: 24; stroke-dashoffset: 24; } html.mk-reveal-on .mk-reveal--in .mk-check-list svg path { animation: mkDrawCheck .5s ease forwards; } html.mk-reveal-on .mk-reveal--in .mk-check-list li:nth-child(1) svg path { animation-delay: .30s; } html.mk-reveal-on .mk-reveal--in .mk-check-list li:nth-child(2) svg path { animation-delay: .44s; } html.mk-reveal-on .mk-reveal--in .mk-check-list li:nth-child(3) svg path { animation-delay: .58s; } html.mk-reveal-on .mk-reveal--in .mk-check-list li:nth-child(n+4) svg path { animation-delay: .72s; } @keyframes mkDrawCheck { to { stroke-dashoffset: 0; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { body.lp2 * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ------------------------------------------------------------------ * * 20 - SOLUTION PAGES (.solution-page) * ------------------------------------------------------------------ * Ported from partials/_solution_page_styles.blade.php (deleted), which was a * 152-line inline "shadow design system" powering 7 pages on hardcoded Tailwind * greys that matched no lp2 token. Everything below is the same layout on real * tokens. The visible change: .card-icon tiles were grey (#f3f4f6 / #6b7280) on * 154 instances and now read brand blue, matching .mk-icon-tile / .fr-icon on * the homepage. * Pages: ai-form-builder, no-code-form-builder, online-survey-builder, * online-quiz-maker, contact-form, job-application-form-builder, * wordpress-form-builder * ------------------------------------------------------------------ */ /* Icon tile inside .icon-card — same spec as .mk-icon-tile */ body.lp2 .solution-page .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--lp2-r-md); background: var(--lp2-primary-subtle); color: var(--lp2-primary); margin-bottom: 1rem; transition: var(--lp2-transition); } /* .icon-card base + hover already live in section 3; nothing to re-declare. */ /* "Why FormNX" numbered cards */ body.lp2 .solution-page .why-card { position: relative; padding: 2rem 1.5rem 1.5rem; background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); height: 100%; overflow: hidden; } body.lp2 .solution-page .why-card__num { position: absolute; top: .5rem; right: 1rem; font-size: 3.5rem; font-weight: 700; /* was 800 + Georgia serif — both retired */ line-height: 1; letter-spacing: -.05em; color: rgba(var(--lp2-primary-rgb), .12); } body.lp2 .solution-page .why-card__icon { color: var(--lp2-primary); margin-bottom: .75rem; } body.lp2 .solution-page .why-card__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: .5rem; color: var(--lp2-ink); } body.lp2 .solution-page .why-card__body { color: var(--lp2-body); font-size: .9375rem; line-height: 1.6; margin: 0; } body.lp2 .solution-page .why-card__body a { color: var(--lp2-primary); text-decoration: underline; text-decoration-color: rgba(var(--lp2-primary-rgb), .3); } /* "What is…" step strip */ body.lp2 .solution-page .what-is-step { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--lp2-border); border-radius: var(--lp2-r-md); margin-bottom: .75rem; } body.lp2 .solution-page .what-is-step:last-child { margin-bottom: 0; } body.lp2 .solution-page .what-is-step__num { flex: 0 0 32px; height: 32px; background: var(--lp2-primary); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8125rem; } body.lp2 .solution-page .what-is-step__icon { color: var(--lp2-muted); flex-shrink: 0; } body.lp2 .solution-page .what-is-step__label { font-weight: 600; font-size: .9375rem; } /* Comparison table (FormNX vs custom build / vs competitor) */ body.lp2 .solution-page .compare-table { border-collapse: separate; border-spacing: 0; } body.lp2 .solution-page .compare-table th, body.lp2 .solution-page .compare-table td { vertical-align: middle; padding: 1rem; border-bottom: 1px solid var(--lp2-border-light); } body.lp2 .solution-page .compare-table thead th { background: var(--lp2-bg-section); font-weight: 600; font-size: .8125rem; color: var(--lp2-muted); } body.lp2 .solution-page .compare-table .col-formnx { background: var(--lp2-primary-subtle); border-left: 2px solid var(--lp2-primary-border); border-right: 2px solid var(--lp2-primary-border); } body.lp2 .solution-page .compare-table thead .col-formnx { border-top: 2px solid var(--lp2-primary-border); } body.lp2 .solution-page .compare-table tbody tr:last-child .col-formnx { border-bottom: 2px solid var(--lp2-primary-border); } body.lp2 .solution-page .compare-cell { display: flex; align-items: flex-start; gap: .55rem; font-size: .9375rem; line-height: 1.5; } body.lp2 .solution-page .compare-cell svg { flex-shrink: 0; margin-top: 2px; } /* Genuine yes/no/partial semantics keep their real colors */ body.lp2 .solution-page .compare-cell--yes { color: var(--lp2-success-ink); } body.lp2 .solution-page .compare-cell--yes svg { color: var(--lp2-success); } body.lp2 .solution-page .compare-cell--no { color: var(--lp2-muted); } body.lp2 .solution-page .compare-cell--no svg { color: var(--lp2-danger); } body.lp2 .solution-page .compare-cell--partial { color: #92400e; } body.lp2 .solution-page .compare-cell--partial svg { color: var(--lp2-warning); } body.lp2 .solution-page .compare-dimension { font-weight: 600; color: var(--lp2-ink); } body.lp2 .solution-page .winner-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--lp2-primary); color: #fff; font-size: .65rem; font-weight: 600; padding: .25rem .5rem; border-radius: var(--lp2-r-xs); margin-left: .5rem; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; } /* AI form builder page extras (ported out of an inline