/* ============================================================================ Markly motion kit (motion.css) Paste at the end of site.css, or load it after site.css. Pairs with motion.js. Everything uses your existing variables (--acc, --acc-soft, --ink, --bg, --line) so light and dark mode work untouched. Notes: - motion.js adds .mk-js to only when the visitor allows motion, so with JS off, or reduced motion on, nothing is ever hidden. - var(--spring, ...) falls back to the Markly curve if site.css lacks it. - Each numbered section ends with its own reduced-motion fallback. ============================================================================ */ /* == 1. HERO CHART FINALE == */ [data-mk-chart] { position: relative; } [data-mk-chart] [data-mk-line] { transition: stroke-dashoffset 1.5s cubic-bezier(.3, .08, .24, 1); } [data-mk-chart] .mk-pt { fill: var(--card, #fff); stroke: var(--acc); stroke-width: 2; transition: opacity .3s ease; } :where(html.mk-js) [data-mk-chart] .mk-pt { opacity: 0; } [data-mk-chart].mk-drawing .mk-pt, [data-mk-chart].mk-done .mk-pt { opacity: 1; } [data-mk-chart] .mk-dot-end { fill: var(--acc); transform-box: fill-box; transform-origin: center; transition: transform .4s var(--spring, cubic-bezier(.22, .9, .24, 1)); } :where(html.mk-js) [data-mk-chart] .mk-dot-end { transform: scale(0); } [data-mk-chart].mk-done .mk-dot-end { transform: scale(1); } [data-mk-chart] .mk-dot-pulse { fill: none; stroke: var(--acc); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; } [data-mk-chart].mk-done .mk-dot-pulse { animation: mk-pulse 2s ease-out .35s 3; } @keyframes mk-pulse { 0% { opacity: .5; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(2.1); } } /* one hairline sweeps with the draw head, then lets go */ [data-mk-chart]::after { content: ""; position: absolute; top: 8%; bottom: 16%; left: 5%; width: 1px; background: var(--acc); opacity: 0; pointer-events: none; } [data-mk-chart].mk-drawing::after { animation: mk-sweep 1.5s cubic-bezier(.3, .08, .24, 1) forwards; } @keyframes mk-sweep { 0% { left: 5%; opacity: .28; } 80% { opacity: .16; } 100% { left: 91%; opacity: 0; } } .mk-chip { position: absolute; top: 15%; right: 3%; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; font-weight: 600; color: var(--acc-deep, var(--acc)); background: var(--acc-soft); border-radius: 7px; padding: 4px 10px; transition: opacity .4s ease .35s, transform .55s cubic-bezier(.3, 1.36, .4, 1) .35s; } :where(html.mk-js) [data-mk-chart] .mk-chip { opacity: 0; transform: translateY(9px) scale(.9); } [data-mk-chart].mk-done .mk-chip { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { [data-mk-chart] [data-mk-line] { transition: none; } [data-mk-chart] .mk-pt { opacity: 1; transition: none; } [data-mk-chart] .mk-dot-end { transform: scale(1); transition: none; } [data-mk-chart].mk-done .mk-dot-pulse { animation: none; } [data-mk-chart].mk-drawing::after { animation: none; } [data-mk-chart] .mk-chip, [data-mk-chart].mk-done .mk-chip { opacity: 1; transform: none; animation: none; transition: none; } } /* == 2. DIAGNOSIS TEASER == */ .mk-diag { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px 6px; } .mk-diag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; } .mk-diag-sub { font-family: var(--display, inherit); font-weight: 700; font-size: 15.5px; color: var(--ink); } .mk-diag-cap { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--muted, #697076); } .mk-diag-rows { list-style: none; margin: 0; padding: 0; transition: opacity .3s ease; } .mk-diag-rows.mk-swap { opacity: 0; } .mk-row { display: grid; grid-template-columns: minmax(140px, 210px) 1fr 46px max-content; gap: 14px; align-items: center; height: 48px; border-top: 1px solid var(--line); transition: transform .55s var(--spring, cubic-bezier(.22, .9, .24, 1)); } .mk-row-name { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-row-bar { height: 8px; border-radius: 4px; background: var(--soft2, var(--line)); overflow: hidden; } .mk-row-fill { display: block; height: 100%; border-radius: 4px; background: var(--acc); transition: width .85s var(--spring, cubic-bezier(.22, .9, .24, 1)); } .mk-row:nth-child(2) .mk-row-fill { transition-delay: .07s; } .mk-row:nth-child(3) .mk-row-fill { transition-delay: .14s; } .mk-row:nth-child(4) .mk-row-fill { transition-delay: .21s; } .mk-row:nth-child(5) .mk-row-fill { transition-delay: .28s; } .mk-row-val { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--muted, #697076); text-align: right; font-variant-numeric: tabular-nums; } .mk-row-tag { font-size: 11px; font-weight: 600; color: var(--acc-deep, var(--acc)); background: var(--acc-soft); border-radius: 6px; padding: 3px 9px; justify-self: end; opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .35s var(--spring, cubic-bezier(.22, .9, .24, 1)); } .mk-row.mk-top .mk-row-tag { opacity: 1; transform: scale(1); } @media (max-width: 560px) { .mk-row { grid-template-columns: minmax(0, 1fr) 74px 40px max-content; } } @media (prefers-reduced-motion: reduce) { .mk-diag-rows, .mk-row, .mk-row-fill, .mk-row-tag { transition: none; } } /* == 3. HOVER PHYSICS, PRICING CARDS AND PRIMARY BUTTONS == */ .mk-lift { transition: transform .28s var(--spring, cubic-bezier(.22, .9, .24, 1)), border-color .2s ease, box-shadow .28s ease; } .mk-lift:hover, .mk-lift:focus-within { transform: translateY(-3px); border-color: var(--acc); box-shadow: var(--lift-sh, 0 2px 4px rgba(42, 46, 53, .05), 0 10px 26px -14px rgba(42, 46, 53, .16)); } .mk-mag { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .18s var(--spring, cubic-bezier(.22, .9, .24, 1)); } .mk-mag:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); } .mk-mag .mk-arrow { display: inline-block; transition: transform .18s var(--spring, cubic-bezier(.22, .9, .24, 1)); } .mk-mag:hover .mk-arrow { transform: translateX(2px); } @media (prefers-reduced-motion: reduce) { .mk-lift, .mk-mag, .mk-mag .mk-arrow { transition: none; } .mk-lift:hover, .mk-lift:focus-within { transform: none; } .mk-mag, .mk-mag:active { transform: none; } .mk-mag:hover .mk-arrow { transform: none; } } /* == 4. MINI CTA AFTER PRICING == */ .mk-minicta { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 12px 18px; box-shadow: var(--lift-sh, 0 2px 4px rgba(42, 46, 53, .05), 0 10px 26px -14px rgba(42, 46, 53, .16)); opacity: 0; transform: translateY(calc(100% + 32px)); pointer-events: none; transition: transform .45s var(--spring, cubic-bezier(.22, .9, .24, 1)), opacity .25s ease; } .mk-minicta.mk-on { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (min-width: 720px) { .mk-minicta { left: auto; right: 20px; max-width: 440px; } } .mk-minicta-copy { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--body, inherit); } .mk-minicta-copy strong { color: var(--ink); } .mk-minicta-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--muted, #697076); font-size: 17px; line-height: 1; font-family: inherit; } .mk-minicta-x:hover { background: var(--soft2, var(--acc-soft)); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .mk-minicta { transition: opacity .15s ease; transform: translateY(0); } .mk-minicta:not(.mk-on) { visibility: hidden; } } /* == 5. REVEAL RHYTHM, STAGGER AND UNDERLINE SWEEP == */ .mk-reveal { transition: opacity .5s ease, transform .6s var(--spring, cubic-bezier(.22, .9, .24, 1)); } :where(html.mk-js) .mk-reveal { opacity: 0; transform: translateY(14px); } .mk-reveal.in { opacity: 1; transform: none; } [data-stagger] > * { transition: opacity .45s ease, transform .55s var(--spring, cubic-bezier(.22, .9, .24, 1)); } :where(html.mk-js) [data-stagger] > * { opacity: 0; transform: translateY(12px); } [data-stagger].in > * { opacity: 1; transform: none; } [data-stagger].in > *:nth-child(2) { transition-delay: .07s; } [data-stagger].in > *:nth-child(3) { transition-delay: .14s; } [data-stagger].in > *:nth-child(4) { transition-delay: .21s; } [data-stagger].in > *:nth-child(5) { transition-delay: .28s; } [data-stagger].in > *:nth-child(6) { transition-delay: .35s; } [data-stagger].in > *:nth-child(7) { transition-delay: .42s; } [data-stagger].in > *:nth-child(n+8) { transition-delay: .49s; } .mk-u { position: relative; } .mk-u::after { content: ""; position: absolute; left: 2px; bottom: -9px; width: 46px; height: 3px; border-radius: 2px; background: var(--acc); transform-origin: left; transition: transform .55s var(--spring, cubic-bezier(.22, .9, .24, 1)) .1s; } :where(html.mk-js) .mk-u::after { transform: scaleX(0); } .mk-u.in::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .mk-reveal, [data-stagger] > *, .mk-u::after { opacity: 1; transform: none; transition: none; } }