/* ============================================================ kaamfu.css Single stylesheet for all Kaamfu Elementor HTML widgets: - Evidence Carousel - Pricing Section - Get Started Section Load once in the page : ============================================================ */ /* ── Reset ──────────────────────────────────────────────────── */ .kaamfu-car-wrap *, .kaamfu-car-wrap *::before, .kaamfu-car-wrap *::after, .kf-pricing *, .kf-pricing *::before, .kf-pricing *::after, .kf-start *, .kf-start *::before, .kf-start *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Design tokens ──────────────────────────────────────────── */ :root { --kf-border: #0000001A; --kf-check-bg: #e6f4ea; --kf-check-stroke: #22c55e; --kf-tag-bg: #f3f3f3; --kf-tag-text: #444444; } .elementor .kaamfu-h2-p { font-size: .95rem !important; } .elementor .kaamfu-h3-p { font-size: .875rem !important; line-height: 1.6 !important; } /* ── Section label ──────────────────────────────────────────── */ .section-label { font-size: 14px; font-weight: 400; text-transform: uppercase; color: #000; text-align: center; margin-bottom: 7px; } /* ── Check icon ─────────────────────────────────────────────── */ .kf-check-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } /* ── Checklist ──────────────────────────────────────────────── */ .kf-checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; padding-left: 0 !important; } .kf-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: #000; line-height: 1.55; font-weight: 400; } /* ── Shared footer ──────────────────────────────────────────── */ .kf-pricing__footer { text-align: center; } .kf-pricing__footer-text { color: #000; font-weight: 600 !important; } /* ============================================================= CAROUSEL ============================================================= */ .kaamfu-car-wrap { overflow: hidden; background: transparent; } .kaamfu-car-label { text-align: center; padding-bottom: 20px; } .kaamfu-car-outer { overflow: hidden; position: relative; margin-bottom: 20px; } /* Fade edges — update hex if section background isn't white */ .kaamfu-car-outer::before, .kaamfu-car-outer::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; } .kaamfu-car-outer::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); } .kaamfu-car-outer::after { right: 0; background: linear-gradient(to left, #ffffff, transparent); } .kaamfu-car-track { display: flex; gap: 16px; width: max-content; animation: kaamfu-scroll 44s linear infinite; } .kaamfu-car-track:hover { animation-play-state: paused; } @keyframes kaamfu-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .kaamfu-car-card { width: 268px; flex-shrink: 0; border: 1px solid #e8e8e5; border-radius: 12px; background: #ffffff; padding: 26px 22px 20px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; cursor: default; transition: border-color 0.2s; } .kaamfu-car-card:hover { border-color: #ccc; } .kaamfu-car-stat { font-size: 38px; font-weight: 500; color: #111; line-height: 1; letter-spacing: -0.02em; margin: 0; } .kaamfu-car-stat.is-quote { font-size: 15px; font-weight: 400; font-style: italic; line-height: 1.5; color: #111; letter-spacing: 0; } .kaamfu-car-body { font-size: 16px; color: #595959; flex: 1; margin: 0; } .kaamfu-car-footer { border-top: 1px solid #f0efe9; padding-top: 12px; display: flex; flex-direction: column; gap: 2px; } .kaamfu-car-firm { font-size: 14px; font-weight: 600; color: #000; letter-spacing: 0.04em; margin: 0; } .kaamfu-car-source { font-size: 12px; color: #595959; margin: 0; } /* ============================================================= PRICING ============================================================= */ .kf-pricing { width: 100%; display: flex; flex-direction: column; align-items: center; } .kf-pricing__header { text-align: center; margin-bottom: 30px; } .kf-pricing__subtitle { font-size: 18px; color: #595959; font-weight: 300; padding-top: 20px; } .kf-pricing__box { width: 100%; max-width: 1200px; background: #fff; border: 1px solid var(--kf-border); border-radius: 10px; display: flex !important; flex-wrap: nowrap !important; overflow: hidden; margin-bottom: 20px; } .kf-tier { flex: 1 1 0%; min-width: 0; padding: 30px; } .kf-tier:not(:last-child) { border-right: 1px solid var(--kf-border); } .kf-tier__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #000; background: var(--kf-tag-bg); padding: 6px 14px; border-radius: 6px; width: fit-content; margin-bottom: 20px; display: inline-block; } .kf-tier__price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .kf-tier__price { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #000; } .kf-tier__price-unit { font-size: 0.85rem; color: #000; font-weight: 500; } .kf-tier__desc { font-size: 16px; color: #595959; margin: 18px 0 28px; min-height: 85px; } .kf-tier__divider { width: 100%; height: 1px; background: var(--kf-border); margin-bottom: 24px; } @media (max-width: 767px) { .kf-pricing__box { flex-wrap: wrap !important; } .kf-tier { flex: 1 1 100% !important; padding: 28px 22px; } .kf-tier:not(:last-child) { border-right: none; border-bottom: 1px solid var(--kf-border); } } @media (min-width: 768px) and (max-width: 1100px) { .kf-tier { padding: 32px 22px; } .kf-tier__price { font-size: 1.85rem; } .kf-tier__price-unit { font-size: 0.78rem; } .kf-tier__desc { font-size: 0.82rem; } .kf-tier__label { font-size: 0.62rem; } .kf-checklist li { font-size: 0.8rem; } } /* ============================================================= GET STARTED ============================================================= */ .kf-start { width: 100%; display: flex; flex-direction: column; align-items: center; } .kf-start h2 { text-align: center; } .kf-start .subhead { font-size: 18px; color: #696969; text-align: center; margin-bottom: 30px; max-width: 480px; padding-top: 20px; } .kf-start__paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 880px; } .kf-path { border-radius: 10px; padding: 40px 36px; display: flex; flex-direction: column; } .kf-path--light { background: #fff; border: 1px solid var(--kf-border); } .kf-path--dark { background: #111; border: 1px solid #111; } .kf-path__badge { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 10px; margin-bottom: 20px; width: fit-content; } .kf-path--light .kf-path__badge { background: #f0f0ee; color: #666; } .kf-path--dark .kf-path__badge { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); } .kf-path__title { font-size: 22px; font-weight: 500; margin-bottom: 16px; line-height: 1.2; } .kf-path--light .kf-path__title { color: #111; } .kf-path--dark .kf-path__title { color: #fff; } .kf-path__desc { font-size: 16px; margin-bottom: 32px; flex: 1; } .kf-path--light .kf-path__desc { color: #666; } .kf-path--dark .kf-path__desc { color: rgba(255,255,255,0.6); } .kf-path__features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 36px; padding-left: 0 !important; } .kf-path__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; line-height: 1.55; } .kf-path--light .kf-path__features li { color: #444; } .kf-path--dark .kf-path__features li { color: rgba(255,255,255,0.75); } .kf-path__features .kf-check-icon { width: 16px; height: 16px; } .kf-path__divider { width: 100%; height: 1px; margin-bottom: 28px; } .kf-path--light .kf-path__divider { background: var(--kf-border); } .kf-path--dark .kf-path__divider { background: rgba(255,255,255,0.1); } .kf-path__price-line { margin-bottom: 24px; } .kf-path__price { font-size: 28px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; } .kf-path--light .kf-path__price { color: #111; } .kf-path--dark .kf-path__price { color: #fff; } .kf-path__cta { display: block; width: 100%; padding: 14px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; text-align: center; text-decoration: none; border: none; transition: opacity 0.15s ease; } .kf-path__cta:hover { opacity: 0.85; } .kf-path--light .kf-path__cta { background: #111; color: #fff; } .kf-path--dark .kf-path__cta { background: #fff; color: #111; } .kf-path--light .kf-path__cta:hover { color: #fff !important; } .kf-path__cta-sub { font-size: 11px; text-align: center; margin-top: 12px; } .kf-path--light .kf-path__cta-sub { color: #bbb; } .kf-path--dark .kf-path__cta-sub { color: rgba(255,255,255,0.3); } @media (max-width: 767px) { .kf-start__paths { grid-template-columns: 1fr; } .kf-path { padding: 28px 24px; } } /* ============================================================= STAGES (Race to Autonomy) ============================================================= */ .kf-stages { display: flex; width: 100%; border-radius: 12px; overflow: hidden; } .kf-stage { flex: 1 1 0%; padding: 36px 28px; display: flex; flex-direction: column; gap: 10px; } /* ── Graduated backgrounds ── */ .kf-stage--1 { background: #f0f0eb; } .kf-stage--2 { background: #c6c7b9; } .kf-stage--3 { background: #878b7b; } .kf-stage--4 { background: #484c42; } .kf-stage--5 { background: #2b2e28; } /* ── Step number ── */ .kf-stage__num { font-size: 14px; font-weight: 400; letter-spacing: 0.02em; } .kf-stage--1 .kf-stage__num, .kf-stage--2 .kf-stage__num { color: #888; } .kf-stage--3 .kf-stage__num, .kf-stage--4 .kf-stage__num, .kf-stage--5 .kf-stage__num { color: rgba(255,255,255,0.45); } /* ── Title ── */ .kf-stage__title { font-size: 22px; font-weight: 700; line-height: 1.15; margin: 0; } .kf-stage--1 .kf-stage__title, .kf-stage--2 .kf-stage__title { color: #1a1a1a; } .kf-stage--3 .kf-stage__title, .kf-stage--4 .kf-stage__title, .kf-stage--5 .kf-stage__title { color: #ffffff; } /* ── Body ── */ .kf-stage__body { font-size: 15px; line-height: 1.6; margin: 0; } .kf-stage--1 .kf-stage__body, .kf-stage--2 .kf-stage__body { color: #444; } .kf-stage--3 .kf-stage__body, .kf-stage--4 .kf-stage__body, .kf-stage--5 .kf-stage__body { color: rgba(255,255,255,0.65); } /* ── Responsive ── */ @media (max-width: 767px) { .kf-stages { flex-direction: column; border-radius: 10px; } } /* ============================================================= STAT CARD (dark hero stat block) ============================================================= */ .kf-stat-card { display: flex; flex-direction: column; gap: 10px; max-width: 400px; border: 1px solid var(--kf-border); border-radius: 10px; padding:20px; } .kf-stat-card__label { font-size: 10px; font-weight: 600; text-transform: uppercase; color: #595959; margin: 0; } .kf-stat-card__number { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #000; margin: 0; } .kf-stat-card__body { font-size: 14px; font-weight: 400; line-height: 1.55; color: #333; margin: 0; } .kf-stat-card__source { font-size: 11px; color: #595959; margin: 0; padding-top: 4px; }