/* ============================================================================ Koovira — Merchant intro pages (one shared stylesheet for every business type) ---------------------------------------------------------------------------- Self-contained. No CDN, no framework, no gradients, ONE accent. TYPE SCALE (px) 12.5 · 14 · 16 · 18 · 22 · 28 · clamp(28→40) SPACING SCALE (px) 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 (--s1 … --s8) TAP TARGET min 44px on every link, button and control BREAKPOINTS mobile-first; 640px (2-col), 1024px (3-col + rail) ========================================================================= */ .kmi { /* one accent, everything else neutral */ --kmi-accent: #4a3aff; --kmi-accent-ink: #3527c9; --kmi-accent-soft: #eeecff; --kmi-ink: #14142b; --kmi-ink-2: #3d3d5c; --kmi-muted: #5f5f7a; --kmi-line: #e4e4ef; --kmi-line-2: #f0f0f7; --kmi-bg: #ffffff; --kmi-soft: #f7f7fb; --kmi-warn: #8a5a00; --kmi-warn-bg:#fdf5e6; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --fs-xs: 12.5px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: clamp(28px, 6vw, 40px); --r-sm: 10px; --r-md: 14px; --r-lg: 20px; font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--kmi-ink); background: var(--kmi-bg); font-size: var(--fs-md); line-height: 1.6; -webkit-text-size-adjust: 100%; } .kmi *, .kmi *::before, .kmi *::after { box-sizing: border-box; } .kmi img, .kmi svg { max-width: 100%; } .kmi p { margin: 0 0 var(--s3); } .kmi h1, .kmi h2, .kmi h3, .kmi h4 { margin: 0 0 var(--s3); line-height: 1.22; font-weight: 700; letter-spacing: -.01em; } .kmi ul { margin: 0; padding: 0; list-style: none; } .kmi a { color: var(--kmi-accent-ink); } /* page must never scroll sideways ------------------------------------------ */ html.kmi-html, body.kmi-body { max-width: 100%; overflow-x: hidden; margin: 0; } /* A global output-buffer filter in config/common_includes.php injects a decorative "Koovira character" layer into every page. Its own CSS is scoped to #kt_app_main > .kv-app-main-characters — these pages deliberately do not use the Metronic app shell, so the layer lands unstyled on and floats a 220px image over the header. Suppressed HERE ONLY (scoped to .kmi-body); the global injector is left completely untouched for every other page on the site. */ body.kmi-body > .kv-app-main-characters { display: none !important; } .kmi-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s4); } @media (min-width: 1024px) { .kmi-wrap { padding: 0 var(--s5); } } .kmi-sec { padding: var(--s7) 0; } .kmi-sec--soft { background: var(--kmi-soft); } .kmi-sec > .kmi-wrap > .kmi-eyebrow { margin-bottom: var(--s2); } .kmi-eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kmi-accent-ink); margin: 0 0 var(--s2); } .kmi-h2 { font-size: var(--fs-2xl); max-width: 22ch; } .kmi-sub { font-size: var(--fs-md); color: var(--kmi-muted); max-width: 62ch; margin-bottom: var(--s6); } /* ---- header --------------------------------------------------------------- */ .kmi-head { border-bottom: 1px solid var(--kmi-line); background: #fff; } .kmi-head .kmi-wrap { display: flex; align-items: center; gap: var(--s4); min-height: 64px; flex-wrap: wrap; } .kmi-logo { display: inline-flex; align-items: center; min-height: 44px; } .kmi-logo img { height: 26px; width: auto; display: block; } .kmi-head nav { margin-left: auto; display: flex; gap: var(--s1); flex-wrap: wrap; } .kmi-head nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); font-size: var(--fs-sm); font-weight: 600; color: var(--kmi-ink-2); text-decoration: none; border-radius: var(--r-sm); } .kmi-head nav a:hover { background: var(--kmi-soft); color: var(--kmi-ink); } /* ---- buttons -------------------------------------------------------------- */ .kmi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: var(--s3) var(--s5); font-size: var(--fs-md); font-weight: 700; line-height: 1.2; border-radius: var(--r-sm); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; text-align: center; } .kmi-btn--primary { background: var(--kmi-accent); color: #fff; } .kmi-btn--primary:hover { background: var(--kmi-accent-ink); color: #fff; } .kmi-btn--ghost { background: #fff; color: var(--kmi-ink); border-color: var(--kmi-line); } .kmi-btn--ghost:hover { border-color: var(--kmi-ink-2); } .kmi-btn:focus-visible { outline: 3px solid var(--kmi-accent); outline-offset: 2px; } .kmi-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); } .kmi-ctas .kmi-btn { flex: 1 1 240px; } @media (min-width: 640px) { .kmi-ctas .kmi-btn { flex: 0 0 auto; } } /* ---- hero ----------------------------------------------------------------- */ .kmi-hero { padding: var(--s6) 0 var(--s7); border-bottom: 1px solid var(--kmi-line); } .kmi-hero-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: center; } @media (min-width: 1024px) { .kmi-hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s7); } } .kmi-hero h1 { font-size: var(--fs-3xl); max-width: 16ch; } .kmi-hero .kmi-promise { font-size: var(--fs-lg); color: var(--kmi-ink-2); max-width: 54ch; margin-bottom: var(--s5); } .kmi-hero-note { font-size: var(--fs-xs); color: var(--kmi-muted); margin-top: var(--s4); max-width: 56ch; } .kmi-who { display: flex; gap: var(--s3); align-items: flex-start; background: var(--kmi-soft); border: 1px solid var(--kmi-line); border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s5); font-size: var(--fs-sm); color: var(--kmi-ink-2); } .kmi-who svg { flex: 0 0 auto; } .kmi-hero-art { display: flex; justify-content: center; } .kmi-hero-art svg { width: 100%; height: auto; max-width: 420px; } /* ---- pain / answer cards -------------------------------------------------- */ .kmi-pains { display: grid; gap: var(--s4); grid-template-columns: 1fr; } @media (min-width: 640px) { .kmi-pains { grid-template-columns: repeat(2, 1fr); } } .kmi-pain { background: #fff; border: 1px solid var(--kmi-line); border-radius: var(--r-md); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .kmi-pain-on { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--kmi-muted); } .kmi-pain-txt { font-size: var(--fs-md); font-weight: 600; color: var(--kmi-ink); margin: 0; } .kmi-pain-rule { display: flex; align-items: center; gap: var(--s3); color: var(--kmi-accent); } .kmi-pain-rule::before, .kmi-pain-rule::after { content: ""; height: 1px; background: var(--kmi-line); flex: 1; } .kmi-pain-fix { font-size: var(--fs-sm); color: var(--kmi-ink-2); margin: 0; } .kmi-pain-tool { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); font-weight: 700; color: var(--kmi-accent-ink); background: var(--kmi-accent-soft); border-radius: 999px; padding: var(--s2) var(--s3); align-self: flex-start; line-height: 1.35; } /* ---- step rail (systematic flow) ------------------------------------------ */ .kmi-steps { display: grid; gap: var(--s4); grid-template-columns: 1fr; counter-reset: kmistep; } @media (min-width: 640px) { .kmi-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kmi-steps { grid-template-columns: repeat(5, 1fr); gap: var(--s3); } } .kmi-step { position: relative; background: #fff; border: 1px solid var(--kmi-line); border-radius: var(--r-md); padding: var(--s5) var(--s4) var(--s4); } .kmi-step-n { width: 34px; height: 34px; border-radius: 999px; background: var(--kmi-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 800; margin-bottom: var(--s3); } .kmi-step h3 { font-size: var(--fs-md); margin-bottom: var(--s2); } .kmi-step p { font-size: var(--fs-sm); color: var(--kmi-muted); margin: 0; } /* connector only where the row is truly horizontal */ @media (min-width: 1024px) { .kmi-step::after { content: ""; position: absolute; top: calc(var(--s5) + 17px); right: calc(var(--s3) * -1); width: var(--s3); height: 2px; background: var(--kmi-line); } .kmi-step:last-child::after { display: none; } } /* ---- tool groups ---------------------------------------------------------- */ .kmi-tools { display: grid; gap: var(--s4); grid-template-columns: 1fr; } @media (min-width: 640px) { .kmi-tools { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kmi-tools { grid-template-columns: repeat(4, 1fr); } } .kmi-toolgroup { background: #fff; border: 1px solid var(--kmi-line); border-radius: var(--r-md); padding: var(--s5); } .kmi-toolgroup > h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--kmi-accent-ink); margin-bottom: var(--s4); } .kmi-toolgroup li + li { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--kmi-line-2); } .kmi-tool-n { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--kmi-ink); } .kmi-tool-d { display: block; font-size: var(--fs-sm); color: var(--kmi-muted); margin-top: var(--s1); } /* ---- platform grid -------------------------------------------------------- */ .kmi-plat { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 640px) { .kmi-plat { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kmi-plat { grid-template-columns: repeat(3, 1fr); } } .kmi-plat-item { display: flex; gap: var(--s4); align-items: flex-start; } .kmi-plat-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--kmi-accent-soft); color: var(--kmi-accent-ink); display: inline-flex; align-items: center; justify-content: center; } .kmi-plat-item h3 { font-size: var(--fs-md); margin-bottom: var(--s1); } .kmi-plat-item p { font-size: var(--fs-sm); color: var(--kmi-muted); margin: 0; } /* ---- fee / pricing strip -------------------------------------------------- */ .kmi-fee { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; background: #fff; border: 1px solid var(--kmi-line); border-radius: var(--r-lg); padding: var(--s5); } /* `flex: 0 1 auto` + min-width:0, NOT `0 0 auto`: a non-shrinking badge overflowed its container on narrow viewports and the caption was clipped by the page's overflow guard (reproduced at 375px on marketplace_merchant_intro.php — the activation-fee badge measured 376px wide inside a 375px viewport). Badges must be allowed to shrink and wrap. */ .kmi-fee-badge { flex: 0 1 auto; min-width: 0; max-width: 100%; border: 1.5px solid var(--kmi-accent); border-radius: var(--r-md); padding: var(--s3) var(--s5); text-align: center; color: var(--kmi-accent-ink); } .kmi-fee-badge b { display: block; font-size: var(--fs-xl); line-height: 1.2; } .kmi-fee-badge span { display: block; font-size: var(--fs-xs); color: var(--kmi-muted); font-weight: 600; } .kmi-fee-badge--secondary { border-color: var(--kmi-line); color: var(--kmi-ink-2); } .kmi-fee-badge--secondary b { font-size: var(--fs-lg); } .kmi-fee p { flex: 1 1 320px; font-size: var(--fs-sm); color: var(--kmi-ink-2); margin: 0; } /* ---- caveat --------------------------------------------------------------- */ .kmi-caveat { display: flex; gap: var(--s3); align-items: flex-start; background: var(--kmi-warn-bg); border: 1px solid #eddcb8; border-radius: var(--r-md); padding: var(--s4); font-size: var(--fs-sm); color: var(--kmi-warn); margin-top: var(--s5); } .kmi-caveat svg { flex: 0 0 auto; } .kmi-caveat b { display: block; margin-bottom: var(--s1); } /* ---- closing CTA ---------------------------------------------------------- */ .kmi-close { border: 1px solid var(--kmi-line); border-radius: var(--r-lg); padding: var(--s6) var(--s5); background: #fff; } .kmi-close h2 { font-size: var(--fs-2xl); max-width: 20ch; } .kmi-close p { font-size: var(--fs-md); color: var(--kmi-muted); max-width: 56ch; margin-bottom: var(--s5); } /* ---- other types ---------------------------------------------------------- */ .kmi-types { display: grid; gap: var(--s3); grid-template-columns: 1fr; } @media (min-width: 640px) { .kmi-types { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kmi-types { grid-template-columns: repeat(3, 1fr); } } .kmi-type { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border: 1px solid var(--kmi-line); border-radius: var(--r-md); text-decoration: none; color: var(--kmi-ink); background: #fff; } .kmi-type:hover { border-color: var(--kmi-accent); } .kmi-type[aria-current="page"] { border-color: var(--kmi-accent); background: var(--kmi-accent-soft); } .kmi-type-ico { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--kmi-accent-ink); } .kmi-type b { display: block; font-size: var(--fs-sm); } .kmi-type span { display: block; font-size: var(--fs-xs); color: var(--kmi-muted); } /* ---- footer --------------------------------------------------------------- */ .kmi-foot { border-top: 1px solid var(--kmi-line); padding: var(--s6) 0; margin-top: var(--s7); } .kmi-foot .kmi-wrap { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; } .kmi-foot p { font-size: var(--fs-xs); color: var(--kmi-muted); margin: 0; } .kmi-foot nav { display: flex; flex-wrap: wrap; gap: var(--s1); } .kmi-foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); font-size: var(--fs-xs); font-weight: 600; color: var(--kmi-ink-2); text-decoration: none; } /* ---- hub page ------------------------------------------------------------- */ .kmi-hub { display: grid; gap: var(--s4); grid-template-columns: 1fr; } @media (min-width: 640px) { .kmi-hub { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kmi-hub { grid-template-columns: repeat(3, 1fr); } } .kmi-hubcard { display: flex; flex-direction: column; gap: var(--s2); border: 1px solid var(--kmi-line); border-radius: var(--r-md); padding: var(--s5); background: #fff; text-decoration: none; color: var(--kmi-ink); min-height: 44px; } .kmi-hubcard:hover { border-color: var(--kmi-accent); } .kmi-hubcard .kmi-plat-ico { margin-bottom: var(--s2); } .kmi-hubcard b { font-size: var(--fs-lg); } .kmi-hubcard span { font-size: var(--fs-sm); color: var(--kmi-muted); } .kmi-hubcard em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--kmi-accent-ink); margin-top: auto; padding-top: var(--s3); } @media print { .kmi-head nav, .kmi-ctas { display: none; } } /* ---- FAQ (optional section; renders only for a type that configures one) ---- */ .kmi-faq { display: grid; gap: var(--s3); grid-template-columns: 1fr; max-width: 80ch; } .kmi-faq-item { border: 1px solid var(--kmi-line); border-radius: var(--r-md); background: #fff; overflow: hidden; } .kmi-faq-item[open] { border-color: var(--kmi-accent); } .kmi-faq-item > summary { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; min-height: 44px; padding: var(--s4) var(--s5); font-size: var(--fs-md); font-weight: 650; color: var(--kmi-ink); cursor: pointer; list-style: none; } .kmi-faq-item > summary::-webkit-details-marker { display: none; } .kmi-faq-item > summary:hover { color: var(--kmi-accent-ink); } .kmi-faq-item > summary:focus-visible { outline: 2px solid var(--kmi-accent); outline-offset: -2px; } /* transform-box/-origin are REQUIRED here: an inline

worked while the