/* ChatAI Engine — marketing site
*
* Separate stylesheet from app.css on purpose. The product UI is a dense,
* information-first tool; the marketing site is a wide, typographic, low-density
* page. Sharing one file would mean every landing-page tweak risks the inbox.
* Nothing here is loaded inside the authenticated app.
*
* Every colour derives from the supplied logo: green #0F6E56 and ink #1F211F.
* Class prefix `mk-` throughout so the two systems can never collide.
*/
/* ------------------------------------------------------------------ tokens */
:root {
/* Brand green, sampled from the logo artwork itself. */
--mk-brand: #0F6E56;
--mk-brand-700: #0A5341;
--mk-brand-800: #07402F;
--mk-brand-500: #148A6C;
--mk-brand-300: #7FC0AC;
--mk-brand-100: #DCEDE7;
--mk-brand-50: #F3F9F6;
/* Ink, also sampled from the logo wordmark. */
--mk-ink: #1F211F;
--mk-ink-2: #46504C;
--mk-muted: #6E7873;
--mk-faint: #99A29E;
--mk-line: #E4E9E7;
--mk-line-2: #D2DAD7;
--mk-surface: #FFFFFF;
--mk-surface-2: #F7FAF9;
--mk-canvas: #FFFFFF;
/* Opaque enough that the header stays legible if the blur never composites. */
--mk-header-bg: rgba(255, 255, 255, .88);
/* One accent only. Amber, used for "human" moments against the green
"machine" moments — never decoratively. */
--mk-accent: #B9761C;
--mk-accent-50: #FDF4E7;
--mk-ok: #0F6E56;
--mk-warn: #9A5B12;
--mk-danger: #A1362A;
/* Channel colours, used ONLY on channel chips so a reader can find
"Instagram" by colour. Muted well below brand saturation. */
--mk-fb: #1877F2;
--mk-ig: #C13584;
--mk-wa: #25A566;
--mk-web: #46504C;
--mk-r-sm: 8px;
--mk-r: 14px;
--mk-r-lg: 22px;
--mk-r-pill: 999px;
--mk-shadow-sm: 0 1px 2px rgba(31,33,31,.04), 0 2px 8px -4px rgba(31,33,31,.10);
--mk-shadow: 0 2px 6px rgba(31,33,31,.05), 0 14px 34px -18px rgba(31,33,31,.28);
--mk-shadow-lg: 0 4px 10px rgba(31,33,31,.05), 0 34px 70px -32px rgba(31,33,31,.38);
--mk-ring: 0 0 0 3px rgba(15,110,86,.28);
/* Fluid type. clamp() means no per-breakpoint font-size overrides. */
--mk-t-display: clamp(2.05rem, 1.30rem + 2.9vw, 3.65rem);
--mk-t-h1: clamp(1.95rem, 1.35rem + 2.2vw, 3.00rem);
--mk-t-h2: clamp(1.45rem, 1.15rem + 1.1vw, 2.00rem);
--mk-t-h3: clamp(1.08rem, 1.00rem + 0.3vw, 1.25rem);
--mk-t-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.24rem);
--mk-t-body: 1rem;
--mk-t-sm: 0.9125rem;
--mk-t-xs: 0.8125rem;
--mk-sp: clamp(4.5rem, 3rem + 5vw, 7.5rem); /* vertical section rhythm */
--mk-gut: clamp(1.15rem, 0.7rem + 1.6vw, 2rem);
--mk-max: 1200px;
--mk-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
/* Display face, headlines only. One deliberate pairing rather than the
grotesque-sans-for-everything look most SaaS sites default to: Fraunces
is warm and a little characterful, which suits a product built around
conversation rather than infrastructure. Every body and UI string stays
on --mk-sans; the serif falls back to a real serif, not the sans stack,
so an unloaded font still reads as the intended shape. */
--mk-display: "Fraunces", Georgia, "Times New Roman", serif;
--mk-header-h: 68px;
}
/* Dark theme. Three states, matching the app's existing contract: the default
above is light, prefers-color-scheme covers people who never touch the
toggle, and an explicit [data-theme] on beats both. theme.js (already
shipped) is what sets that attribute, so the toggle works on both sites. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--mk-ink: #EEF3F1;
--mk-ink-2: #B9C4C0;
--mk-muted: #8D9993;
--mk-faint: #6C7772;
--mk-line: #26302C;
--mk-line-2: #33403B;
--mk-surface: #141917;
--mk-surface-2: #101413;
--mk-canvas: #0B0F0E;
--mk-header-bg: rgba(11, 15, 14, .88);
--mk-brand-50: #0E1A16;
--mk-brand-100: #12261F;
--mk-brand-300: #2E6B58;
--mk-accent-50: #241a0C;
--mk-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--mk-shadow: 0 2px 6px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7);
--mk-shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 34px 70px -32px rgba(0,0,0,.8);
}
}
:root[data-theme="dark"] {
--mk-ink: #EEF3F1;
--mk-ink-2: #B9C4C0;
--mk-muted: #8D9993;
--mk-faint: #6C7772;
--mk-line: #26302C;
--mk-line-2: #33403B;
--mk-surface: #141917;
--mk-surface-2: #101413;
--mk-canvas: #0B0F0E;
--mk-header-bg: rgba(11, 15, 14, .88);
--mk-brand-50: #0E1A16;
--mk-brand-100: #12261F;
--mk-brand-300: #2E6B58;
--mk-accent-50: #241a0C;
--mk-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--mk-shadow: 0 2px 6px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7);
--mk-shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 34px 70px -32px rgba(0,0,0,.8);
}
/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.mk {
margin: 0;
font-family: var(--mk-sans);
font-size: var(--mk-t-body);
line-height: 1.6;
color: var(--mk-ink);
background: var(--mk-canvas);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.mk h1, .mk h2, .mk h3, .mk h4 {
margin: 0;
line-height: 1.14;
letter-spacing: -0.022em;
font-weight: 700;
color: var(--mk-ink);
text-wrap: balance;
}
.mk p { margin: 0; text-wrap: pretty; }
.mk img, .mk svg { max-width: 100%; }
.mk img { height: auto; }
/* Buttons are excluded from the generic link colour on purpose. Unscoped,
`.mk a` is specificity (0,1,1) and beats `.mk-btn--primary { color:#fff }`
at (0,1,0) -- which painted every solid button green-on-green, invisible
until :hover (0,2,0) took over and revealed the label.
The exclusion is wrapped in :where() so it adds NO specificity: a bare
:not(.mk-btn) would lift this rule to (0,2,1) and start overriding
`.mk-nav a` and `.mk-footer li a`, turning the nav and footer green. */
.mk a { text-decoration: none; }
.mk a:where(:not(.mk-btn)) { color: var(--mk-brand); }
.mk a:where(:not(.mk-btn)):hover { text-decoration: underline; }
.mk ul { margin: 0; padding: 0; list-style: none; }
/* Focus. Visible on every interactive element, never removed. */
.mk :focus-visible {
outline: 2px solid var(--mk-brand);
outline-offset: 2px;
border-radius: var(--mk-r-sm);
}
.mk-skip {
position: absolute; left: 12px; top: -60px; z-index: 200;
background: var(--mk-brand); color: #fff;
padding: 10px 16px; border-radius: var(--mk-r-sm); font-weight: 600;
transition: top .15s ease;
}
.mk-skip:focus { top: 12px; text-decoration: none; }
.mk-wrap {
width: 100%; max-width: var(--mk-max);
margin-inline: auto;
padding-inline: var(--mk-gut);
}
.mk-section { padding-block: var(--mk-sp); }
.mk-section--tint { background: var(--mk-surface-2); }
.mk-section--edge { border-block: 1px solid var(--mk-line); }
.mk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ------------------------------------------------------- shared components */
.mk-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--mk-t-xs); font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--mk-brand);
margin-bottom: 14px;
}
.mk-eyebrow::before {
content: ""; width: 18px; height: 2px; border-radius: 2px;
background: var(--mk-brand); opacity: .55;
}
.mk-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); }
.mk-head--center { margin-inline: auto; text-align: center; }
.mk-head--center .mk-eyebrow::before { display: none; }
.mk-head h2 { font-family: var(--mk-display); font-size: var(--mk-t-h1); font-weight: 600; letter-spacing: -0.012em; }
.mk-head p {
margin-top: 16px; font-size: var(--mk-t-lead);
color: var(--mk-ink-2); line-height: 1.55;
}
/* Same pair, used where a heading sits outside a .mk-head wrapper (split
layouts with an image alongside). CSP has no 'unsafe-inline', so every
one-off style="" that used to live in landing.php now has a home here. */
.mk-h2 { font-family: var(--mk-display); font-size: var(--mk-t-h1); font-weight: 600; letter-spacing: -0.012em; }
.mk-lead-text {
margin-top: 16px; font-size: var(--mk-t-lead);
color: var(--mk-ink-2); line-height: 1.55;
}
.mk-feat-list { display: grid; gap: 18px; margin-top: 30px; }
.mk-checklist { display: grid; gap: 12px; margin-top: 26px; }
.mk-checklist li {
display: flex; gap: 11px; align-items: flex-start;
font-size: var(--mk-t-sm); color: var(--mk-ink-2);
}
.mk-checklist svg { margin-top: 3px; flex: none; }
.mk-checklist b { color: var(--mk-ink); }
.mk-mt-24 { margin-top: 24px; }
.mk-mt-26 { margin-top: 26px; }
.mk-mt-28 { margin-top: 28px; }
/* Buttons */
.mk-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font: inherit; font-weight: 650; font-size: var(--mk-t-sm);
line-height: 1; text-align: center; white-space: nowrap;
padding: 14px 22px; border-radius: var(--mk-r-pill);
border: 1px solid transparent; cursor: pointer;
transition: background-color .16s ease, border-color .16s ease,
color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mk-btn:hover { text-decoration: none; }
.mk-btn:active { transform: translateY(1px); }
.mk-btn--primary {
background: var(--mk-brand); color: #fff;
box-shadow: 0 1px 2px rgba(7,64,47,.2), 0 10px 22px -12px rgba(7,64,47,.65);
}
.mk-btn--primary:hover { background: var(--mk-brand-700); color: #fff; }
.mk-btn--ghost {
background: var(--mk-surface); color: var(--mk-ink);
border-color: var(--mk-line-2);
}
.mk-btn--ghost:hover { border-color: var(--mk-ink-2); color: var(--mk-ink); }
.mk-btn--onbrand { background: #fff; color: var(--mk-brand-800); }
.mk-btn--onbrand:hover { background: var(--mk-brand-50); color: var(--mk-brand-800); }
.mk-btn--outline-light {
background: transparent; color: #fff; border-color: rgba(255,255,255,.45);
}
.mk-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.mk-btn--sm { padding: 10px 16px; font-size: var(--mk-t-xs); }
.mk-btn--lg { padding: 16px 28px; font-size: var(--mk-t-body); }
.mk-btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* Cards */
.mk-card {
background: var(--mk-surface);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r);
padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
box-shadow: var(--mk-shadow-sm);
height: 100%;
}
.mk-card h3 { font-size: var(--mk-t-h3); margin-bottom: 8px; }
.mk-card p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-grid { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, .4rem + .8vw, 1.1rem); }
/* Split layouts: copy one side, visual the other. */
.mk-split {
display: grid; align-items: center;
gap: clamp(2rem, 1rem + 4vw, 4.5rem);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}
.mk-split--flip > :first-child { order: 2; }
/* Icon tile */
.mk-ico {
width: 42px; height: 42px; border-radius: 11px;
display: grid; place-items: center; margin-bottom: 16px;
background: var(--mk-brand-100); color: var(--mk-brand);
flex: none;
}
.mk-ico svg { width: 21px; height: 21px; }
.mk-ico--accent { background: var(--mk-accent-50); color: var(--mk-accent); }
/* Channel tiles. The five channels are the one place on this page where a
non-brand colour is allowed, because a visitor scans for the Instagram or
WhatsApp mark by its colour. The tile is a faint wash of that platform
colour so the marks sit on something, without competing with the green. */
.mk-ico--ch { background: var(--mk-ch-wash, var(--mk-surface-2)); }
.mk-ico--ch svg { width: 22px; height: 22px; }
.mk-ico--messenger { --mk-ch-wash: color-mix(in srgb, #0084FF 13%, transparent); }
.mk-ico--facebook { --mk-ch-wash: color-mix(in srgb, #1877F2 13%, transparent); }
.mk-ico--instagram { --mk-ch-wash: color-mix(in srgb, #D6249F 13%, transparent); }
.mk-ico--whatsapp { --mk-ch-wash: color-mix(in srgb, #25D366 15%, transparent); }
.mk-ico--webchat { --mk-ch-wash: var(--mk-brand-100); }
/* Status pills. "Live" vs "In development" — the honest labelling used
wherever a capability is not shipped yet. */
.mk-tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--mk-t-xs); font-weight: 650; line-height: 1;
padding: 5px 10px; border-radius: var(--mk-r-pill);
border: 1px solid transparent; white-space: nowrap;
}
.mk-tag--live {
background: var(--mk-brand-100); color: var(--mk-brand-700);
border-color: color-mix(in srgb, var(--mk-brand) 22%, transparent);
}
.mk-tag--soon {
background: var(--mk-accent-50); color: var(--mk-accent);
border-color: color-mix(in srgb, var(--mk-accent) 26%, transparent);
}
.mk-tag--live::before, .mk-tag--soon::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
/* ----------------------------------------------------------------- header */
/* Sticky + backdrop-filter is a known repaint hazard: on several Chrome and
Edge builds the header's children (the Log in / Get started buttons) are not
painted until something forces a repaint, so the buttons appear only once the
pointer enters the area. Three things prevent that here:
1. an opaque-enough background of its own, so the header is legible and
correct even if the blur never composites;
2. its own compositing layer, via translateZ, so it is not re-rasterised
against the scrolling content beneath it;
3. the blur applied only where it is supported, as pure decoration.
`color-mix(... transparent)` is deliberately avoided in this rule -- it was
the other half of the same bug. */
.mk-header {
position: sticky; top: 0; z-index: 60;
background: var(--mk-header-bg);
border-bottom: 1px solid transparent;
transition: border-color .2s ease, box-shadow .2s ease;
transform: translateZ(0);
isolation: isolate;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.mk-header {
backdrop-filter: saturate(1.6) blur(12px);
-webkit-backdrop-filter: saturate(1.6) blur(12px);
}
}
/* The header's own children sit above its background in its stacking context. */
.mk-header__inner, .mk-drawer { position: relative; z-index: 1; }
.mk-header.is-stuck {
border-bottom-color: var(--mk-line);
box-shadow: 0 1px 20px -8px rgba(31,33,31,.22);
}
.mk-header__inner {
height: var(--mk-header-h);
display: flex; align-items: center; gap: 20px;
}
.mk-header__logo { display: flex; align-items: center; flex: none; }
.mk-header__logo img { display: block; }
.mk-header__logo:hover { text-decoration: none; }
.mk-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.mk-nav a {
color: var(--mk-ink-2); font-size: var(--mk-t-sm); font-weight: 550;
padding: 9px 13px; border-radius: var(--mk-r-sm);
transition: color .15s ease, background-color .15s ease;
}
.mk-nav a:hover { color: var(--mk-ink); background: var(--mk-surface-2); text-decoration: none; }
.mk-header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
/* The Login control is deliberately a bordered button, not a text link:
returning customers are the highest-intent traffic on the page and should
not have to hunt for the way back in. */
.mk-header__login {
color: var(--mk-ink); border-color: var(--mk-line-2); background: var(--mk-surface);
}
.mk-burger {
display: none; width: 42px; height: 42px; flex: none;
align-items: center; justify-content: center;
background: var(--mk-surface); border: 1px solid var(--mk-line-2);
border-radius: var(--mk-r-sm); cursor: pointer; color: var(--mk-ink);
}
.mk-burger svg { width: 20px; height: 20px; }
.mk-burger__x { display: none; }
.mk-burger[aria-expanded="true"] .mk-burger__x { display: block; }
.mk-burger[aria-expanded="true"] .mk-burger__bars { display: none; }
/* Mobile drawer */
.mk-drawer {
display: none;
border-top: 1px solid var(--mk-line);
background: var(--mk-canvas);
padding: 14px var(--mk-gut) 22px;
}
.mk-drawer.is-open { display: block; }
.mk-drawer a.mk-drawer__link {
display: block; padding: 13px 4px; font-weight: 600;
color: var(--mk-ink); border-bottom: 1px solid var(--mk-line);
}
.mk-drawer a.mk-drawer__link:hover { text-decoration: none; color: var(--mk-brand); }
.mk-drawer__cta { display: grid; gap: 10px; margin-top: 18px; }
.mk-drawer__cta .mk-btn { width: 100%; }
/* ------------------------------------------------------------------- hero */
.mk-hero {
position: relative;
padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
overflow: hidden;
}
/* One soft brand wash. No gradient stack, no floating blobs. */
.mk-hero::before {
content: ""; position: absolute; inset: -30% 20% auto -10%;
height: 70vh; pointer-events: none; z-index: 0;
background: radial-gradient(60% 55% at 30% 40%,
color-mix(in srgb, var(--mk-brand) 14%, transparent), transparent 72%);
}
/* `position` is required here, not optional: z-index has no effect on a
statically positioned element, so without it the absolutely positioned
::before wash above paints over the hero copy and the CTA buttons. */
.mk-hero > * { position: relative; z-index: 1; }
.mk-hero__grid {
display: grid; align-items: center;
gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
.mk-hero h1 {
font-family: var(--mk-display);
font-size: var(--mk-t-display);
font-weight: 600;
letter-spacing: -0.018em;
line-height: 1.06;
/* balance is inherited from .mk h1, but say it here too: this is the
one heading where an uneven last line is most visible. */
text-wrap: balance;
/* Caps the measure once the hero collapses to one column, where the
heading would otherwise run the full page width. 20ch balances the
45-character headline into three even lines. */
max-width: 20ch;
}
/* The emphasised phrase reads as one unit, so it must not be split over
two lines. Nowrap is safe at every size: it is 13 characters, which
still fits a 320px viewport at the clamp minimum. */
.mk-hero h1 em { font-style: normal; color: var(--mk-brand); white-space: nowrap; }
.mk-hero__lead {
margin-top: 20px; font-size: var(--mk-t-lead);
color: var(--mk-ink-2); max-width: 34rem; line-height: 1.55;
}
.mk-hero__btns { margin-top: 30px; }
.mk-hero__note {
margin-top: 18px; font-size: var(--mk-t-xs); color: var(--mk-muted);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mk-badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 6px 14px 6px 7px; margin-bottom: 22px;
border-radius: var(--mk-r-pill);
background: var(--mk-surface); border: 1px solid var(--mk-line);
box-shadow: var(--mk-shadow-sm);
font-size: var(--mk-t-xs); color: var(--mk-ink-2); font-weight: 550;
}
.mk-badge b {
background: var(--mk-brand); color: #fff; font-weight: 650;
padding: 3px 9px; border-radius: var(--mk-r-pill); font-size: 11px;
letter-spacing: .02em;
}
/* --------------------------------------------------- UI mock (shared frame)
* These are CSS reconstructions of the real product screens, built from the
* same markup vocabulary the app uses. Chosen over screenshots so the page
* stays sharp on every display, weighs nothing, and re-themes with the site.
*/
.mk-mock {
background: var(--mk-surface);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-lg);
box-shadow: var(--mk-shadow-lg);
overflow: hidden;
}
.mk-mock__bar {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px; border-bottom: 1px solid var(--mk-line);
background: var(--mk-surface-2);
}
.mk-mock__dots { display: flex; gap: 6px; }
.mk-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--mk-line-2); }
.mk-mock__title {
font-size: var(--mk-t-xs); color: var(--mk-muted); font-weight: 600;
margin-left: 6px;
}
.mk-mock__body { padding: 14px; }
.mk-mock--tilt {
transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateZ(0);
transform-origin: left center;
}
@media (max-width: 900px) { .mk-mock--tilt { transform: none; } }
/* Inbox mock */
.mk-inbox { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 380px; }
.mk-inbox__list { border-right: 1px solid var(--mk-line); background: var(--mk-surface-2); }
.mk-inbox__filter {
display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--mk-line);
}
.mk-inbox__filter span {
font-size: 11px; font-weight: 650; padding: 4px 9px;
border-radius: var(--mk-r-pill); color: var(--mk-muted);
background: var(--mk-surface); border: 1px solid var(--mk-line);
}
.mk-inbox__filter span.is-on {
background: var(--mk-brand); color: #fff; border-color: var(--mk-brand);
}
.mk-thread {
display: flex; gap: 10px; padding: 12px;
border-bottom: 1px solid var(--mk-line); cursor: default;
}
.mk-thread.is-active { background: var(--mk-surface); box-shadow: inset 3px 0 0 var(--mk-brand); }
.mk-thread__av {
width: 30px; height: 30px; border-radius: 50%; flex: none;
display: grid; place-items: center; color: #fff;
font-size: 11px; font-weight: 700;
background: var(--mk-brand-500);
}
.mk-thread__av--web { background: var(--mk-web); }
.mk-thread__av--ig { background: var(--mk-ig); }
.mk-thread__av--wa { background: var(--mk-wa); }
.mk-thread__meta { min-width: 0; flex: 1; }
.mk-thread__name {
font-size: var(--mk-t-xs); font-weight: 650; color: var(--mk-ink);
display: flex; align-items: center; gap: 6px;
}
.mk-thread__snip {
font-size: 11.5px; color: var(--mk-muted); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Channel chip — the only place channel colour appears. */
.mk-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10.5px; font-weight: 650; line-height: 1;
padding: 3px 7px; border-radius: var(--mk-r-pill);
background: var(--mk-surface-2); color: var(--mk-ink-2);
border: 1px solid var(--mk-line);
}
/* The chip carries the platform mark itself rather than a coloured dot:
a 12px Messenger or WhatsApp glyph is recognised faster than any dot. */
.mk-chip svg { width: 12px; height: 12px; flex: none; }
.mk-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mk-chip--fb { color: var(--mk-fb); }
.mk-chip--ig { color: var(--mk-ig); }
.mk-chip--wa { color: var(--mk-wa); }
.mk-chip--web { color: var(--mk-web); }
.mk-inbox__pane { display: flex; flex-direction: column; min-width: 0; }
.mk-inbox__paneTop {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 14px; border-bottom: 1px solid var(--mk-line);
}
.mk-inbox__who { font-size: var(--mk-t-sm); font-weight: 650; }
.mk-inbox__msgs {
padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
flex: 1; background: var(--mk-surface);
}
/* AI attribution reuses the product's own rule: one colour, only where a
machine acted, so "AI replied" and "a person replied" differ at a glance. */
.mk-bub {
max-width: 78%; padding: 9px 13px; border-radius: 14px;
font-size: var(--mk-t-xs); line-height: 1.45;
}
.mk-bub--in {
align-self: flex-start; background: var(--mk-surface-2);
color: var(--mk-ink); border: 1px solid var(--mk-line);
border-bottom-left-radius: 5px;
}
.mk-bub--ai {
align-self: flex-end; background: var(--mk-brand); color: #fff;
border-bottom-right-radius: 5px;
}
.mk-bub--human {
align-self: flex-end; background: var(--mk-accent-50); color: var(--mk-ink);
border: 1px solid color-mix(in srgb, var(--mk-accent) 30%, transparent);
border-bottom-right-radius: 5px;
}
.mk-bub__by {
display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; opacity: .72; margin-bottom: 3px;
}
.mk-toggle {
display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
font-size: 11px; font-weight: 650; color: var(--mk-brand-700);
background: var(--mk-brand-100); padding: 5px 10px;
border-radius: var(--mk-r-pill);
border: 1px solid color-mix(in srgb, var(--mk-brand) 22%, transparent);
}
.mk-toggle::after {
content: ""; width: 26px; height: 15px; border-radius: var(--mk-r-pill);
background: var(--mk-brand); position: relative; flex: none;
box-shadow: inset -11px 0 0 0 rgba(255,255,255,.92);
}
/* --------------------------------------------------------- channel ribbon */
.mk-ribbon { padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); }
.mk-ribbon__label {
text-align: center; font-size: var(--mk-t-xs); font-weight: 650;
letter-spacing: .09em; text-transform: uppercase; color: var(--mk-muted);
margin-bottom: 22px;
}
.mk-ribbon__row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 10px 12px;
}
.mk-ribbon__item {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 18px; border-radius: var(--mk-r-pill);
border: 1px solid var(--mk-line); background: var(--mk-surface);
font-weight: 650; font-size: var(--mk-t-sm); color: var(--mk-ink);
box-shadow: var(--mk-shadow-sm);
}
.mk-ribbon__item svg { width: 19px; height: 19px; flex: none; }
.mk-ribbon__item small {
font-size: 10.5px; font-weight: 650; color: var(--mk-muted);
padding-left: 9px; margin-left: 3px; border-left: 1px solid var(--mk-line);
}
/* ---------------------------------------------------------------- problem */
/* .mk-prob layout and its left rule live in the problem-cards block near the
end of this file, where the rule is an animated pseudo-element. */
.mk-prob h3 { font-size: var(--mk-t-h3); margin-bottom: 6px; }
.mk-prob p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-prob strong { color: var(--mk-danger); font-weight: 700; }
/* --------------------------------------------------------------- steps */
.mk-steps { counter-reset: step; display: grid; gap: 2px; }
.mk-step {
display: grid; grid-template-columns: 64px minmax(0, 1fr);
gap: 20px; padding: 26px 0; border-top: 1px solid var(--mk-line);
align-items: start;
}
.mk-step:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-step__n {
counter-increment: step;
font-size: 1.5rem; font-weight: 700; color: var(--mk-brand);
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mk-step__n::before { content: "0" counter(step); }
.mk-step h3 { font-size: var(--mk-t-h3); margin-bottom: 6px; }
.mk-step p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); max-width: 44rem; }
/* ------------------------------------------------------------- feature set */
.mk-feat { display: flex; gap: 16px; align-items: flex-start; }
.mk-feat .mk-ico { margin-bottom: 0; }
.mk-feat h3 {
font-size: var(--mk-t-h3); margin-bottom: 6px;
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.mk-feat p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-group { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mk-group:last-child { margin-bottom: 0; }
.mk-group__top {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding-bottom: 14px; margin-bottom: 28px;
border-bottom: 1px solid var(--mk-line);
}
.mk-group__top h3 { font-size: var(--mk-t-h2); }
.mk-group__top p { color: var(--mk-muted); font-size: var(--mk-t-sm); }
/* ------------------------------------------------------------ flow diagram */
.mk-flow { display: grid; gap: 10px; }
.mk-flow__row {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; border-radius: var(--mk-r);
background: var(--mk-surface); border: 1px solid var(--mk-line);
}
.mk-flow__n {
width: 26px; height: 26px; border-radius: 50%; flex: none;
display: grid; place-items: center;
background: var(--mk-brand-100); color: var(--mk-brand-700);
font-size: 11.5px; font-weight: 700;
}
.mk-flow__row p { font-size: var(--mk-t-sm); color: var(--mk-ink-2); }
.mk-flow__row b { color: var(--mk-ink); font-weight: 650; }
.mk-flow__arrow {
width: 1px; height: 14px; margin-left: 32px;
background: var(--mk-line-2);
}
/* --------------------------------------------------------------- pipeline */
.mk-pipe { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-pipe__stage {
flex: 1 1 150px; padding: 16px; border-radius: var(--mk-r);
background: var(--mk-surface); border: 1px solid var(--mk-line);
position: relative;
}
.mk-pipe__stage span {
font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--mk-muted);
}
.mk-pipe__stage b { display: block; margin-top: 6px; font-size: var(--mk-t-h3); }
.mk-pipe__stage::after {
content: ""; position: absolute; inset-block: 0; right: -10px;
width: 10px; background:
linear-gradient(to right, var(--mk-line-2) 0 100%) center / 100% 1px no-repeat;
}
.mk-pipe__stage:last-child::after { display: none; }
@media (max-width: 620px) { .mk-pipe__stage::after { display: none; } }
/* -------------------------------------------------------------- stat tiles */
.mk-stats { display: grid; gap: 1px; background: var(--mk-line);
border: 1px solid var(--mk-line); border-radius: var(--mk-r);
overflow: hidden; grid-template-columns: repeat(4, minmax(0,1fr)); }
/* A second stat row stacked directly under the first, sharing one border
instead of doubling it. */
.mk-stats--stacked { margin-top: 1px; border-top: 0; }
.mk-stat { background: var(--mk-surface); padding: 20px 18px; }
.mk-stat b {
display: block; font-size: 1.65rem; font-weight: 700;
color: var(--mk-ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.mk-stat span { display: block; margin-top: 6px; font-size: var(--mk-t-xs); color: var(--mk-muted); }
/* ------------------------------------------------------------- use cases */
.mk-use {
padding: 20px; border-radius: var(--mk-r);
border: 1px solid var(--mk-line); background: var(--mk-surface);
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mk-use:hover {
border-color: var(--mk-brand-300); transform: translateY(-2px);
box-shadow: var(--mk-shadow);
}
.mk-use h3 { font-size: var(--mk-t-h3); margin-bottom: 6px; }
.mk-use p { font-size: var(--mk-t-sm); color: var(--mk-ink-2); }
/* ---------------------------------------------------------------- pricing */
.mk-price {
display: flex; flex-direction: column;
padding: 26px; border-radius: var(--mk-r);
background: var(--mk-surface); border: 1px solid var(--mk-line);
height: 100%;
}
.mk-price--best {
border-color: var(--mk-brand); box-shadow: var(--mk-shadow);
position: relative;
}
.mk-price__flag {
position: absolute; top: -11px; left: 26px;
background: var(--mk-brand); color: #fff;
font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; padding: 5px 11px; border-radius: var(--mk-r-pill);
}
.mk-price h3 { font-size: var(--mk-t-h3); }
.mk-price__amt {
margin: 14px 0 4px; font-size: 2.3rem; font-weight: 700;
letter-spacing: -.03em; line-height: 1;
}
.mk-price__amt small { font-size: .95rem; font-weight: 600; color: var(--mk-muted); letter-spacing: 0; }
.mk-price__note { margin-top: 8px; font-size: var(--mk-t-xs); color: var(--mk-muted); }
.mk-price ul { margin: 20px 0 26px; display: grid; gap: 10px; }
.mk-price li {
display: flex; gap: 10px; align-items: flex-start;
font-size: var(--mk-t-sm); color: var(--mk-ink-2);
}
.mk-price li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--mk-brand); }
.mk-price .mk-btn { margin-top: auto; width: 100%; }
.mk-note {
margin-top: 26px; padding: 16px 18px;
border: 1px dashed var(--mk-line-2); border-radius: var(--mk-r);
font-size: var(--mk-t-sm); color: var(--mk-ink-2); background: var(--mk-surface-2);
}
.mk-note b { color: var(--mk-ink); }
/* -------------------------------------------------------------------- FAQ */
.mk-faq { max-width: 52rem; margin-inline: auto; }
.mk-faq__item { border-bottom: 1px solid var(--mk-line); }
.mk-faq__q {
width: 100%; display: flex; align-items: center; gap: 16px;
background: none; border: 0; cursor: pointer;
font: inherit; font-weight: 650; font-size: var(--mk-t-h3);
color: var(--mk-ink); text-align: left;
padding: 22px 0; line-height: 1.35;
}
.mk-faq__q:hover { color: var(--mk-brand); }
.mk-faq__ico {
margin-left: auto; flex: none; width: 22px; height: 22px;
position: relative; color: var(--mk-brand);
}
.mk-faq__ico::before, .mk-faq__ico::after {
content: ""; position: absolute; inset: 50% 0 auto;
height: 2px; border-radius: 2px; background: currentColor;
transition: transform .22s ease;
}
.mk-faq__ico::after { transform: rotate(90deg); }
.mk-faq__q[aria-expanded="true"] .mk-faq__ico::after { transform: rotate(0deg); }
.mk-faq__a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .26s ease;
}
.mk-faq__a > div { overflow: hidden; }
.mk-faq__item.is-open .mk-faq__a { grid-template-rows: 1fr; }
.mk-faq__a p {
color: var(--mk-ink-2); font-size: var(--mk-t-sm);
padding-bottom: 24px; max-width: 46rem;
}
/* --------------------------------------------------------------- final CTA */
.mk-cta {
background: var(--mk-brand-800);
background-image:
radial-gradient(70% 120% at 15% 0%, var(--mk-brand) 0%, transparent 62%);
color: #fff; text-align: center;
padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.mk-cta h2 { font-family: var(--mk-display); color: #fff; font-size: var(--mk-t-h1); font-weight: 600; letter-spacing: -0.012em; max-width: 22ch; margin-inline: auto; }
.mk-cta p {
color: rgba(255,255,255,.82); font-size: var(--mk-t-lead);
margin: 18px auto 30px; max-width: 44ch;
}
.mk-cta .mk-btns { justify-content: center; }
/* ------------------------------------------------------------------ footer */
.mk-footer {
background: var(--mk-surface-2);
border-top: 1px solid var(--mk-line);
padding-block: clamp(3rem, 2rem + 2vw, 4rem) 2rem;
}
.mk-footer__grid {
display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.mk-footer__about p {
margin-top: 16px; font-size: var(--mk-t-sm);
color: var(--mk-muted); max-width: 30ch;
}
.mk-footer h4 {
font-size: var(--mk-t-xs); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--mk-ink); margin-bottom: 14px;
}
.mk-footer li { margin-bottom: 10px; }
.mk-footer li a { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-footer li a:hover { color: var(--mk-brand); }
.mk-footer__base {
display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
padding-top: 22px; border-top: 1px solid var(--mk-line);
font-size: var(--mk-t-xs); color: var(--mk-muted);
}
.mk-footer__base p { margin-right: auto; }
/* --------------------------------------------------------------- reveal fx
* One effect, one duration, applied on scroll. Content is visible by default
* and only hidden once JS confirms it can animate it back in, so the page is
* fully readable with JS disabled or broken.
*/
.js .mk-reveal { opacity: 0; transform: translateY(14px); }
.js .mk-reveal.is-in {
opacity: 1; transform: none;
transition: opacity .55s cubic-bezier(.22,.61,.36,1),
transform .55s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
.js .mk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.mk *, .mk *::before, .mk *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
.mk-nav { gap: 0; }
.mk-nav a { padding: 9px 10px; }
}
@media (max-width: 940px) {
.mk-nav, .mk-header__cta { display: none; }
.mk-burger { display: inline-flex; }
.mk-header__logo { margin-right: auto; }
/* Layouts are rebuilt for narrow screens, not shrunk: the hero visual moves
below the copy, and every two-up split becomes a single column. */
.mk-hero__grid, .mk-split { grid-template-columns: minmax(0, 1fr); }
.mk-split--flip > :first-child { order: 0; }
.mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.mk-grid--3, .mk-grid--2 { grid-template-columns: minmax(0, 1fr); }
.mk-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-inbox { grid-template-columns: minmax(0, 1fr); }
.mk-inbox__list { border-right: 0; border-bottom: 1px solid var(--mk-line); }
.mk-thread:nth-child(n+4) { display: none; }
}
@media (max-width: 520px) {
.mk-step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mk-stats { grid-template-columns: minmax(0, 1fr); }
.mk-grid--5 { grid-template-columns: minmax(0, 1fr); }
.mk-btns .mk-btn { width: 100%; }
.mk-hero__btns .mk-btn { width: 100%; }
.mk-feat { flex-direction: column; gap: 12px; }
}
/* Print: nobody prints a landing page, but if they do, drop the chrome. */
@media print {
.mk-header, .mk-drawer, .mk-cta .mk-btns, .mk-footer { display: none; }
.mk-reveal { opacity: 1 !important; transform: none !important; }
}
/* ------------------------------------------------------- theme-aware logo
* brandlockup() emits both artwork files; exactly one is shown. The wordmark
* is near-black, so on a dark header the light artwork is unreadable -- this
* is a legibility rule, not decoration. Same three-state contract as the rest
* of the theme: light default, prefers-color-scheme, explicit [data-theme].
*/
/* The width attribute on the ![]()
is authoritative; height follows from it
via the intrinsic 1262x380 ratio. Do NOT add `width: auto` here -- combined
with the `height: auto` base rule it leaves both dimensions auto and the
browser falls back to the intrinsic 1262x380, rendering a giant logo that
pushes the nav out of the header. */
img.brandlockup { display: block; height: auto; }
img.brandlockup--dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) img.brandlockup--light { display: none; }
:root:not([data-theme="light"]) img.brandlockup--dark { display: block; }
}
:root[data-theme="dark"] img.brandlockup--light { display: none; }
:root[data-theme="dark"] img.brandlockup--dark { display: block; }
/* ==========================================================================
MOTION
--------------------------------------------------------------------------
Rules this section holds itself to:
- Only `transform` and `opacity` are animated, so everything runs on the
compositor and nothing triggers layout.
- Anything that loops forever (the hero replay, the channel marquee) is
paused by JS when it scrolls out of view, so an idle tab does no work.
- Every effect here is switched off wholesale under prefers-reduced-motion
at the end of this file; none of them carry meaning that is lost.
========================================================================== */
/* -------------------------------------------------- directional reveals */
/* Two variants: copy halves slide in from the left, product mocks scale up.
Split sections read better when the two halves
arrive from their own side rather than both rising identically. */
.js .mk-reveal--left { opacity: 0; transform: translate3d(-26px, 0, 0); }
.js .mk-reveal--scale { opacity: 0; transform: scale(.965); }
.js .mk-reveal--left.is-in,
.js .mk-reveal--scale.is-in {
opacity: 1; transform: none;
transition: opacity .6s cubic-bezier(.22,.61,.36,1),
transform .6s cubic-bezier(.22,.61,.36,1);
}
/* ------------------------------------------------------- hero chat replay
The hero mock replays a real conversation: customer asks, AI answers, a
person takes over. It is the product promise acted out, which is worth
more than any abstract animation. */
.mk-inbox__msgs [data-step] { will-change: transform, opacity; }
.js .mk-chat [data-step] {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(.98);
}
.js .mk-chat [data-step].is-shown {
opacity: 1; transform: none;
transition: opacity .38s ease, transform .42s cubic-bezier(.22,1.2,.4,1);
}
/* Typing indicator. Three dots on the same stagger as a real client. */
.mk-typing {
align-self: flex-start;
display: none;
gap: 4px; align-items: center;
padding: 11px 14px; border-radius: 14px;
border-bottom-left-radius: 5px;
background: var(--mk-surface-2); border: 1px solid var(--mk-line);
}
.js .mk-chat .mk-typing.is-shown { display: inline-flex; }
.mk-typing i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--mk-muted);
animation: mk-blink 1.25s infinite ease-in-out;
}
.mk-typing i:nth-child(2) { animation-delay: .18s; }
.mk-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes mk-blink {
0%, 60%, 100% { opacity: .28; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* The AI on/off switch flicks to "human" when the takeover message lands, so
the control model is visible rather than merely described. */
.mk-toggle { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.mk-toggle::after { transition: background-color .3s ease, box-shadow .3s ease; }
.mk-toggle.is-human {
background: var(--mk-accent-50); color: var(--mk-accent);
border-color: color-mix(in srgb, var(--mk-accent) 32%, transparent);
}
.mk-toggle.is-human::after {
background: var(--mk-accent);
box-shadow: inset 11px 0 0 0 rgba(255,255,255,.92);
}
/* The active thread row tints as its message arrives. */
.mk-thread { transition: background-color .3s ease, box-shadow .3s ease; }
.js .mk-thread.is-ping { background: var(--mk-brand-50); }
/* ------------------------------------------------------ hero mock float
A slow drift, 9s, about 7px. Enough to stop the composition feeling like a
screenshot; small enough that nobody watches it. */
@keyframes mk-float {
0%, 100% { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translate3d(0, 0, 0); }
50% { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translate3d(0, -7px, 0); }
}
.mk-mock--float.mk-mock--tilt { animation: mk-float 9s ease-in-out infinite; }
@keyframes mk-float-flat {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -6px, 0); }
}
@media (max-width: 900px) {
.mk-mock--float.mk-mock--tilt { animation: mk-float-flat 9s ease-in-out infinite; }
}
/* ---------------------------------------------------------- channel marquee
The ribbon scrolls continuously. The track is duplicated by JS and shifted
by exactly -50%, so the loop is seamless with no visible jump. */
.mk-marquee {
position: relative;
overflow: hidden;
/* Fade both edges so items enter and leave rather than being clipped. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* No `gap` here on purpose. With gap, the -50% shift lands half a gap out of
register and the loop visibly jumps. A trailing margin on each item makes
the second half a byte-for-byte repeat of the first, so -50% is seamless. */
.mk-marquee__track {
display: flex; flex-wrap: nowrap; width: max-content;
gap: 0; align-items: center;
}
.js .mk-marquee__track.is-running {
animation: mk-scroll var(--mk-marquee-dur, 34s) linear infinite;
}
.mk-marquee:hover .mk-marquee__track,
.mk-marquee:focus-within .mk-marquee__track { animation-play-state: paused; }
@keyframes mk-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.mk-marquee .mk-ribbon__item { flex: none; margin-right: 12px; }
/* ------------------------------------------------------------- flow steps
Rows light up in sequence when the diagram scrolls in, so the eye is walked
through the order instead of meeting five equal boxes at once. */
.mk-flow__row {
transition: border-color .35s ease, background-color .35s ease,
transform .35s cubic-bezier(.22,.61,.36,1);
}
.js .mk-flow__row.is-lit {
border-color: var(--mk-brand-300);
background: var(--mk-brand-50);
transform: translate3d(4px, 0, 0);
}
.mk-flow__n { transition: background-color .35s ease, color .35s ease, transform .35s ease; }
.js .mk-flow__row.is-lit .mk-flow__n {
background: var(--mk-brand); color: #fff; transform: scale(1.08);
}
/* --------------------------------------------------------- hover responses
Interactive elements should answer the pointer. All transform/opacity. */
.mk-card {
transition: transform .22s cubic-bezier(.22,.61,.36,1),
box-shadow .22s ease, border-color .22s ease;
}
.mk-card:hover {
transform: translate3d(0, -3px, 0);
box-shadow: var(--mk-shadow);
border-color: var(--mk-line-2);
}
.mk-card:hover .mk-ico { transform: scale(1.06) rotate(-2deg); }
.mk-ico { transition: transform .28s cubic-bezier(.22,1.2,.4,1); }
/* The arrow in a CTA leans forward on hover. */
.mk-btn svg { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.mk-btn--primary:hover svg,
.mk-btn--onbrand:hover svg { transform: translate3d(3px, 0, 0); }
.mk-btn--primary:hover { transform: translate3d(0, -1px, 0); }
/* Nav links grow an underline from the centre. */
.mk-nav a { position: relative; }
.mk-nav a::after {
content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
height: 2px; border-radius: 2px; background: var(--mk-brand);
transform: scaleX(0); transform-origin: center;
transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
.mk-nav a:hover::after { transform: scaleX(1); }
/* Pipeline stages fill in order as the section arrives. */
.mk-pipe__stage {
transition: border-color .4s ease, background-color .4s ease,
transform .4s cubic-bezier(.22,.61,.36,1);
}
.js .mk-pipe__stage.is-lit {
border-color: var(--mk-brand-300);
background: var(--mk-brand-50);
transform: translate3d(0, -3px, 0);
}
.js .mk-pipe__stage.is-lit b { color: var(--mk-brand-700); }
.mk-pipe__stage b { transition: color .4s ease; }
/* The hero badge gets one slow sheen. Not a loop -- it plays twice as the page
settles and then stops, so it reads as a highlight, not a spinner. */
.mk-badge { position: relative; overflow: hidden; }
.js .mk-badge::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 30%,
color-mix(in srgb, var(--mk-brand) 22%, transparent) 50%, transparent 70%);
transform: translate3d(-120%, 0, 0);
animation: mk-sheen 2.6s ease-in-out .9s 2;
}
@keyframes mk-sheen {
to { transform: translate3d(120%, 0, 0); }
}
/* ------------------------------------------------- reduced motion, absolute
Everything above is decoration. If the visitor has asked for less motion,
all of it stops and every element is shown in its final state. */
@media (prefers-reduced-motion: reduce) {
.js .mk-reveal--left,
.js .mk-reveal--scale { opacity: 1 !important; transform: none !important; }
.js .mk-chat [data-step] { opacity: 1 !important; transform: none !important; }
.mk-typing { display: none !important; }
.mk-mock--float.mk-mock--tilt { animation: none !important; }
.js .mk-marquee__track.is-running { animation: none !important; }
.mk-marquee {
-webkit-mask-image: none; mask-image: none;
overflow-x: auto;
}
.mk-marquee__track { flex-wrap: wrap; width: auto; justify-content: center; gap: 12px; }
.mk-typing i { animation: none !important; }
.js .mk-badge::after { animation: none !important; opacity: 0; }
.mk-card:hover { transform: none; }
.mk-card:hover .mk-ico { transform: none; }
.mk-btn--primary:hover svg, .mk-btn--onbrand:hover svg { transform: none; }
.mk-btn--primary:hover { transform: none; }
}
/* ==========================================================================
INDUSTRY DEMO
An auto-rotating tabbed showcase: one real conversation per line of
business. It is the most dynamic thing on the page, and it earns that by
carrying real content rather than decorating empty space.
Built as a proper ARIA tablist, so arrow keys work and the rotation stops
the moment anyone interacts with it.
========================================================================== */
.mk-demo {
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-lg);
background: var(--mk-surface);
box-shadow: var(--mk-shadow);
overflow: hidden;
}
/* -- tabs -- */
.mk-demo__tabs {
display: flex;
gap: 4px;
padding: 10px;
border-bottom: 1px solid var(--mk-line);
background: var(--mk-surface-2);
overflow-x: auto;
scrollbar-width: none;
}
.mk-demo__tabs::-webkit-scrollbar { display: none; }
.mk-demo__tab {
position: relative;
flex: 1 0 auto;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-size: var(--mk-t-sm); font-weight: 600;
color: var(--mk-muted);
padding: 11px 16px 13px;
background: none; border: 0; border-radius: var(--mk-r-sm);
cursor: pointer; white-space: nowrap;
transition: color .2s ease, background-color .2s ease;
}
.mk-demo__tab svg { width: 17px; height: 17px; flex: none; }
.mk-demo__tab:hover { color: var(--mk-ink); background: var(--mk-surface); }
.mk-demo__tab[aria-selected="true"] {
color: var(--mk-brand); background: var(--mk-surface);
box-shadow: var(--mk-shadow-sm);
}
/* The bar doubles as the rotation timer: it fills over the dwell time, so the
page tells you when it is about to move rather than surprising you. */
.mk-demo__bar {
position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
border-radius: 2px; background: var(--mk-line-2);
transform: scaleX(0); transform-origin: left center;
opacity: 0;
}
.mk-demo__tab[aria-selected="true"] .mk-demo__bar {
opacity: 1; background: var(--mk-brand);
}
.js .mk-demo__tab[aria-selected="true"] .mk-demo__bar.is-timing {
animation: mk-demo-timer var(--mk-demo-dwell, 7s) linear forwards;
}
@keyframes mk-demo-timer {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* -- stage -- */
.mk-demo__stage { position: relative; }
.mk-demo__panel { display: none; }
.mk-demo__panel.is-on { display: grid; }
.mk-demo__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
align-items: center;
}
.mk-demo__side h3 { font-size: var(--mk-t-h2); margin-bottom: 10px; }
.mk-demo__side p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-demo__meta {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.mk-demo__meta span {
font-size: var(--mk-t-xs); font-weight: 600; color: var(--mk-ink-2);
background: var(--mk-surface-2); border: 1px solid var(--mk-line);
padding: 5px 11px; border-radius: var(--mk-r-pill);
}
/* -- conversation -- */
.mk-demo__chat {
background: var(--mk-surface-2);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r);
padding: 14px;
display: flex; flex-direction: column; gap: 9px;
min-height: 340px;
}
.mk-demo__chatTop {
display: flex; align-items: center; gap: 9px;
padding-bottom: 11px; margin-bottom: 3px;
border-bottom: 1px solid var(--mk-line);
}
.mk-demo__who { font-size: var(--mk-t-sm); font-weight: 650; }
/* Each line arrives in sequence when its panel opens. */
.js .mk-demo__panel .mk-bub,
.js .mk-demo__panel .mk-typing {
opacity: 0; transform: translate3d(0, 8px, 0);
}
.js .mk-demo__panel.is-on .mk-bub.is-shown,
.js .mk-demo__panel.is-on .mk-typing.is-shown {
opacity: 1; transform: none;
transition: opacity .34s ease, transform .38s cubic-bezier(.22,1.2,.4,1);
}
@media (max-width: 860px) {
.mk-demo__grid { grid-template-columns: minmax(0, 1fr); }
.mk-demo__tab { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.js .mk-demo__tab[aria-selected="true"] .mk-demo__bar.is-timing { animation: none !important; transform: scaleX(1); }
.js .mk-demo__panel .mk-bub,
.js .mk-demo__panel .mk-typing { opacity: 1 !important; transform: none !important; }
}
/* ---------------------------------------------- demo: attachments & cards
* The bubbles are s, so anything block-level nested inside them has to
* say so explicitly. Without this the product shots and catalog cards have no
* layout of their own and collapse on top of the message text.
*/
.mk-demo__scroll {
display: flex; flex-direction: column; gap: 9px;
/* Deliberately uncapped. See the note above: capping this hid the first
message on the two threads that open with a photo. */
overflow: visible;
}
/* A bubble carrying an attachment or a card becomes a small stack. */
.mk-demo__scroll .mk-bub { display: block; max-width: 86%; }
.mk-demo__scroll .mk-bub--in { align-self: flex-start; }
.mk-demo__scroll .mk-bub--ai,
.mk-demo__scroll .mk-bub--human { align-self: flex-end; }
/* Photo the customer sent. Sits above the message text, like a real client. */
.mk-shot {
display: block;
margin-bottom: 8px;
padding: 10px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--mk-line);
text-align: center;
line-height: 0;
}
.mk-shot svg { display: inline-block; max-width: 100%; height: auto; }
/* Attachment photo: capped so a tall portrait shot cannot run the chat
frame off the page, and rounded to read as an image in a message. */
.mk-shot img { max-width: 100%; max-height: 190px; width: auto; height: auto;
display: inline-block; border-radius: 6px; }
/* The catalog record the AI answered from. Shown inside the reply so the
match is visible rather than merely asserted. */
.mk-pcard {
display: flex; align-items: center; gap: 10px;
margin-top: 9px; padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .22);
}
.mk-pcard__shot {
flex: none; width: 46px; height: 46px;
display: grid; place-items: center;
background: #fff; border-radius: 7px; overflow: hidden;
line-height: 0;
}
.mk-pcard__shot svg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A real photograph is any shape at all. The card thumbnail is a fixed
square, so the image is cropped to fill it rather than letterboxed. */
.mk-pcard__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-pcard__body { min-width: 0; flex: 1; display: block; }
.mk-pcard__body b {
display: block; font-size: var(--mk-t-xs); font-weight: 700; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-pcard__body em {
display: block; font-style: normal; font-size: 11px;
opacity: .82; margin-top: 2px;
}
.mk-pcard__price {
flex: none; font-size: var(--mk-t-xs); font-weight: 700;
white-space: nowrap; align-self: center;
}
/* Message count, so the varying thread lengths are legible at a glance. */
.mk-demo__count {
margin-left: auto; flex: none;
font-size: 11px; font-weight: 600; color: var(--mk-muted);
}
/* ------------------------------------------------------- demo entrance
* The section announces itself: the frame scales up, then the tabs arrive in
* sequence, so a visitor scrolling past notices there is something to use.
*/
.js .mk-demo__tab { opacity: 0; transform: translate3d(0, 8px, 0); }
.js .mk-demo.is-in .mk-demo__tab {
opacity: 1; transform: none;
transition: opacity .4s ease, transform .45s cubic-bezier(.22,1.2,.4,1);
}
.js .mk-demo.is-in .mk-demo__tab:nth-child(1) { transition-delay: .18s; }
.js .mk-demo.is-in .mk-demo__tab:nth-child(2) { transition-delay: .26s; }
.js .mk-demo.is-in .mk-demo__tab:nth-child(3) { transition-delay: .34s; }
.js .mk-demo.is-in .mk-demo__tab:nth-child(4) { transition-delay: .42s; }
.js .mk-demo.is-in .mk-demo__tab:nth-child(5) { transition-delay: .50s; }
/* One ring pulse as it arrives, drawing the eye to the control strip. */
@keyframes mk-demo-attention {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mk-brand) 40%, transparent); }
70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--mk-brand) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mk-brand) 0%, transparent); }
}
.js .mk-demo.is-in { animation: mk-demo-attention 1.6s ease-out .5s 2; }
@media (max-width: 860px) {
.mk-demo__scroll { max-height: none; overflow-y: visible; }
.mk-demo__scroll .mk-bub { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
.js .mk-demo__tab { opacity: 1 !important; transform: none !important; }
.js .mk-demo.is-in { animation: none !important; }
}
/* ------------------------------------------------- demo: click to pause
* The button bar was removed. The conversation itself is the control: click
* anywhere in it to hold the thread and read it, click again to replay.
* Keyboard users get the same via Enter or Space, since the stage carries
* role="button" and a tabindex.
*/
.mk-demo__stage {
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
/* Threads are different lengths on purpose, so the panel height changes
with each sector. JS sets an explicit height and this transitions it,
turning a jump into a settle. Falls back to natural height if the
script never runs. */
overflow: hidden;
transition: height .4s cubic-bezier(.22,.61,.36,1);
}
.mk-demo__stage:focus-visible {
outline: 2px solid var(--mk-brand);
outline-offset: -3px;
border-radius: var(--mk-r);
}
/* A quiet hint, shown only on hover, so the surface advertises itself once
without becoming a permanent label. */
.mk-demo__hint {
position: absolute; top: 12px; right: 14px; z-index: 3;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 11px; border-radius: var(--mk-r-pill);
background: color-mix(in srgb, var(--mk-canvas) 88%, transparent);
border: 1px solid var(--mk-line);
font-size: 11px; font-weight: 650; color: var(--mk-muted);
opacity: 0; transform: translate3d(0, -4px, 0);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.mk-demo__stage:hover .mk-demo__hint,
.mk-demo__stage:focus-visible .mk-demo__hint { opacity: 1; transform: none; }
.mk-demo__hint svg { width: 12px; height: 12px; }
/* Paused: dim the thread slightly and float a play badge over it, so the
state is unmistakable rather than merely "nothing is happening". */
.mk-demo__pausedFlag {
position: absolute; inset: 0; z-index: 4;
display: none; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--mk-canvas) 55%, transparent);
pointer-events: none;
}
.mk-demo.is-paused .mk-demo__pausedFlag { display: flex; }
.mk-demo__pausedFlag span {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px; border-radius: var(--mk-r-pill);
background: var(--mk-surface); border: 1px solid var(--mk-line);
box-shadow: var(--mk-shadow);
font-size: var(--mk-t-xs); font-weight: 700; color: var(--mk-ink);
}
.mk-demo__pausedFlag svg { width: 15px; height: 15px; color: var(--mk-brand); }
/* Freeze the timer bar exactly where it stopped. */
.mk-demo.is-paused .mk-demo__bar.is-timing { animation-play-state: paused; }
/* The tab strip is its own control and must not swallow stage clicks. */
.mk-demo__tabs { position: relative; z-index: 5; }
@media (prefers-reduced-motion: reduce) {
.mk-demo__hint { transition: none; }
.mk-demo__stage { transition: none; }
}
/* ------------------------------------------------- website chat mock
* A shop page with the widget open in the corner.
*
* The skeleton blocks were previously inline `background: var(--mk-surface)`,
* which in dark mode is #141917 against a #101413 body: a two-value difference
* nobody can see, so the page behind the widget simply vanished. Classes let
* the blocks carry their own contrast per theme, which an inline style cannot.
*/
.mk-site { background: var(--mk-surface-2); }
/* Widget-only variant: no storefront blocks behind it, so the widget is
centred in the frame instead of stranded top-right against empty space. */
.mk-site--widget-only {
display: flex; align-items: center; justify-content: center;
min-height: 280px;
}
.mk-site--widget-only .mk-widget { margin-left: 0; width: 100%; }
.mk-site__hero,
.mk-site__card {
border-radius: 10px;
background: var(--mk-surface);
border: 1px solid var(--mk-line-2);
}
.mk-site__hero { height: 78px; margin-bottom: 12px; }
.mk-site__row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px; margin-bottom: 16px;
}
.mk-site__card { height: 54px; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mk-site__hero,
:root:not([data-theme="light"]) .mk-site__card { background: #1B2320; }
}
:root[data-theme="dark"] .mk-site__hero,
:root[data-theme="dark"] .mk-site__card { background: #1B2320; }
/* -- the widget itself -- */
.mk-widget {
max-width: 280px;
margin-left: auto;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--mk-line);
box-shadow: var(--mk-shadow);
background: var(--mk-surface);
}
.mk-widget__head {
display: flex; align-items: center; gap: 8px;
padding: 11px 13px;
background: var(--mk-brand);
color: #fff;
font-size: var(--mk-t-xs); font-weight: 650;
}
.mk-widget__head .brandmark { flex: none; border-radius: 4px; }
.mk-widget__head span { min-width: 0; }
/* Online dot, pushed to the trailing edge. */
.mk-widget__dot {
margin-left: auto; flex: none;
width: 7px; height: 7px; border-radius: 50%;
background: #7FE3C0;
box-shadow: 0 0 0 3px rgba(127, 227, 192, .22);
}
.mk-widget__body {
display: flex; flex-direction: column; gap: 9px;
padding: 13px;
background: var(--mk-surface);
min-height: 150px;
}
/* The bubbles are wider here than in the inbox: the widget is only 280px, so
a 78% cap would wrap almost every line. */
.mk-widget__body .mk-bub { max-width: 90%; }
/* ------------------------------------------- website chat mock: storefront
* The blocks behind the widget carry real content now. They were empty grey
* rectangles, which read as an unfinished layout rather than as a shop.
*/
.mk-site__hero {
height: auto;
min-height: 82px;
padding: 14px 16px;
display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
background:
linear-gradient(120deg,
color-mix(in srgb, var(--mk-brand) 16%, var(--mk-surface)) 0%,
var(--mk-surface) 68%);
}
.mk-site__eyebrow {
font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--mk-brand);
}
.mk-site__hero b {
font-size: var(--mk-t-sm); font-weight: 700; line-height: 1.25;
color: var(--mk-ink);
}
.mk-site__btn {
margin-top: 3px;
font-size: 10px; font-weight: 700; line-height: 1;
padding: 6px 12px; border-radius: var(--mk-r-pill);
background: var(--mk-brand); color: #fff;
}
.mk-site__card {
height: auto;
display: flex; align-items: center; gap: 10px;
padding: 9px 10px;
overflow: hidden;
}
.mk-site__thumb {
flex: none; width: 44px; height: 44px;
display: grid; place-items: center;
background: #fff; border-radius: 7px; overflow: hidden;
line-height: 0;
}
.mk-site__thumb img,
.mk-site__thumb svg {
width: 100%; height: 100%; object-fit: contain; display: block;
}
.mk-site__meta { min-width: 0; display: block; }
.mk-site__meta b {
display: block; font-size: 11px; font-weight: 650; line-height: 1.3;
color: var(--mk-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-site__meta em {
display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
color: var(--mk-brand); margin-top: 2px;
}
/* Content now sets the height, so the reserved minimum only made the panel
look empty below the last message. */
.mk-widget__body { min-height: 0; }
/* ==========================================================================
POLISH PASS
Three additions, each earning its place:
1. A scroll progress line, because this is a long page and a reader
should know where they are in it.
2. Scrollspy on the nav, so the header answers "which section am I in"
without the reader having to work it out.
3. A pointer spotlight on cards, which gives a grid of equal tiles some
life on hover without adding any looping motion.
========================================================================== */
/* --------------------------------------------------------- scroll progress */
.mk-progress {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: var(--mk-brand);
transform: scaleX(var(--mk-scrolled, 0));
transform-origin: left center;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.mk-header.is-stuck .mk-progress { opacity: 1; }
/* ------------------------------------------------------------- scrollspy */
/* The underline already exists for hover; the current section keeps it lit,
so hovering and "you are here" share one visual language. */
.mk-nav a.is-current { color: var(--mk-ink); }
.mk-nav a.is-current::after { transform: scaleX(1); }
.mk-drawer__link.is-current { color: var(--mk-brand); }
/* -------------------------------------------------------- pointer spotlight
* A soft brand-tinted highlight that follows the pointer across a card.
* Pure CSS from two custom properties JS keeps updated; no layout, no paint
* beyond the overlay, and it disappears entirely on touch and under reduced
* motion, where there is no pointer to follow.
*/
.mk-card,
.mk-use,
.mk-price { position: relative; isolation: isolate; }
.mk-card::after,
.mk-use::after,
.mk-price::after {
content: "";
position: absolute; inset: 0; z-index: -1;
border-radius: inherit;
background: radial-gradient(
16rem circle at var(--mk-mx, 50%) var(--mk-my, 0%),
color-mix(in srgb, var(--mk-brand) 13%, transparent),
transparent 62%);
opacity: 0;
transition: opacity .3s ease;
}
.mk-card:hover::after,
.mk-use:hover::after,
.mk-price:hover::after { opacity: 1; }
@media (hover: none) {
.mk-card::after, .mk-use::after, .mk-price::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.mk-card::after, .mk-use::after, .mk-price::after { display: none; }
.mk-progress { transition: none; }
}
/* ------------------------------------------------------------ bento rhythm
* The capability groups were three identical tiles repeated four times, which
* is twelve equal rectangles down the page: accurate, and dull. Each group now
* leads with a wider card so the eye has somewhere to land first, and the
* remaining two sit beside it. Same content, real hierarchy.
*/
.mk-grid--bento {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: dense;
}
.mk-grid--bento > .mk-card--lead {
grid-column: span 2;
display: flex; flex-direction: column; justify-content: center;
}
.mk-grid--bento > .mk-card--lead h3 { font-size: var(--mk-t-h2); }
.mk-grid--bento > .mk-card--lead p { font-size: var(--mk-t-body); max-width: 46ch; }
.mk-grid--bento > .mk-card--lead .mk-ico { width: 48px; height: 48px; }
.mk-grid--bento > .mk-card--lead .mk-ico svg { width: 24px; height: 24px; }
@media (max-width: 940px) {
.mk-grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--bento > .mk-card--lead { grid-column: span 2; }
}
@media (max-width: 760px) {
.mk-grid--bento { grid-template-columns: minmax(0, 1fr); }
.mk-grid--bento > .mk-card--lead { grid-column: span 1; }
.mk-grid--bento > .mk-card--lead h3 { font-size: var(--mk-t-h3); }
.mk-grid--bento > .mk-card--lead p { font-size: var(--mk-t-sm); }
}
/* ---------------------------------------------------------- problem cards
* This section names four things that are costing the reader money, so the
* motion should land that rather than decorate it:
* 1. The rule at the left of each card draws downward, like a ledger line
* being struck, and settles on the danger colour.
* 2. The consequence inside the copy then gets a marker highlight swept
* behind it, so the eye is pulled to the cost, not the description.
* Both key off .is-in, which the existing reveal observer already sets, so
* this adds no JavaScript at all.
*/
.mk-prob {
position: relative;
border-left: 0; /* replaced by the animated rule below */
padding-left: 18px;
}
.mk-prob::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; border-radius: 3px;
background: var(--mk-line-2);
transform: scaleY(0);
transform-origin: top center;
transition: transform .62s cubic-bezier(.22,.61,.36,1),
background-color .45s ease .35s;
}
.js .mk-prob.is-in::before {
transform: scaleY(1);
background: color-mix(in srgb, var(--mk-danger) 62%, var(--mk-line-2));
}
/* The rule draws in the same order the cards arrive. */
.js .mk-prob:nth-child(1).is-in::before { transition-delay: .06s, .41s; }
.js .mk-prob:nth-child(2).is-in::before { transition-delay: .14s, .49s; }
.js .mk-prob:nth-child(3).is-in::before { transition-delay: .22s, .57s; }
.js .mk-prob:nth-child(4).is-in::before { transition-delay: .30s, .65s; }
/* Marker highlight behind the consequence. background-size animates on the
compositor and, unlike a pseudo-element, follows the text across a line
break for free. */
.mk-prob strong {
padding: 0 3px; margin: 0 -3px; border-radius: 3px;
background-image: linear-gradient(
color-mix(in srgb, var(--mk-danger) 15%, transparent),
color-mix(in srgb, var(--mk-danger) 15%, transparent));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: background-size .5s cubic-bezier(.22,.61,.36,1);
}
.js .mk-prob:nth-child(1).is-in strong { background-size: 100% 100%; transition-delay: .46s; }
.js .mk-prob:nth-child(2).is-in strong { background-size: 100% 100%; transition-delay: .54s; }
.js .mk-prob:nth-child(3).is-in strong { background-size: 100% 100%; transition-delay: .62s; }
.js .mk-prob:nth-child(4).is-in strong { background-size: 100% 100%; transition-delay: .70s; }
/* Hovering commits the rule to full danger. Only the rule moves: a transform
on .mk-prob itself would be dead CSS, because `.js .mk-reveal.is-in`
sets `transform: none` at higher specificity and would win. */
.mk-prob:hover::before { background: var(--mk-danger); }
@media (prefers-reduced-motion: reduce) {
.mk-prob::before {
transform: none !important;
transition: none !important;
background: color-mix(in srgb, var(--mk-danger) 62%, var(--mk-line-2));
}
.mk-prob strong {
background-size: 100% 100% !important;
transition: none !important;
}
}