/* ============================================================ eRacuni.ai — Marketing landing Self-contained. Served by propshaft via stylesheet_link_tag "marketing". Scoped under .mk-page so it never collides with the app's tailwind/DaisyUI. The tokens below mirror the app's :root layer — see DESIGN.md ("The Ledger Desk"), which is the authority for this system. No external template. ============================================================ */ /* ---------- Tokens ---------- */ .mk-page{ --bg: oklch(0.992 0.003 95); --bg-2: oklch(0.972 0.005 95); --surface: oklch(1 0 0); --surface-2: oklch(0.978 0.005 95); /* ink-3 carries every piece of body prose here and ink-4 carries real text (ticker labels, footer headings, captions), so both are set to clear 4.5:1 on the two grounds they sit on — paper (--bg) and white. */ --ink: oklch(0.225 0.03 286); --ink-2: oklch(0.44 0.022 286); --ink-3: oklch(0.495 0.021 286); --ink-4: oklch(0.545 0.018 286); --line: oklch(0.918 0.006 286); --line-2: oklch(0.872 0.008 286); --violet: oklch(0.545 0.19 283); --violet-deep: oklch(0.45 0.17 283); --violet-ink: oklch(0.34 0.13 283); --violet-soft: oklch(0.962 0.022 285); --violet-tint: oklch(0.905 0.05 284); --magenta: oklch(0.575 0.205 266); --income: oklch(0.62 0.135 162); --income-soft: oklch(0.955 0.04 162); /* --income/--expense are tuned as fills and icon colours; as small text they land at 3.0–3.4:1. These are the same hues carried to AA for text use. */ --income-ink: oklch(0.505 0.125 162); --expense-ink: oklch(0.505 0.17 18); --expense: oklch(0.605 0.185 18); --expense-soft:oklch(0.962 0.03 22); --amber: oklch(0.76 0.145 78); --amber-soft: oklch(0.962 0.05 85); --grad: linear-gradient(135deg, var(--violet) 0%, var(--magenta) 100%); --grad-soft: linear-gradient(135deg, oklch(0.97 0.02 285) 0%, oklch(0.965 0.022 280) 100%); --display: 'Manrope', system-ui, -apple-system, sans-serif; --ui: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --mono: 'Fragment Mono', ui-monospace, 'SF Mono', monospace; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(30,20,55,.05), 0 2px 8px -3px rgba(30,20,55,.06); --sh-md: 0 2px 6px -2px rgba(30,20,55,.07), 0 14px 34px -14px rgba(30,20,55,.16); --sh-lg: 0 10px 30px -16px rgba(38,24,72,.22), 0 40px 80px -34px rgba(38,24,72,.34); --sh-violet: 0 14px 34px -12px oklch(0.545 0.19 283 / .42); --ease: cubic-bezier(.69,.02,.39,.98); --wrap: 1240px; background: var(--bg); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Reset (scoped) ---------- */ .mk-page *, .mk-page *::before, .mk-page *::after{ box-sizing: border-box; } .mk-page h1,.mk-page h2,.mk-page h3,.mk-page h4,.mk-page p,.mk-page figure{ margin: 0; } .mk-page a{ color: inherit; text-decoration: none; } .mk-page img,.mk-page svg{ display: block; max-width: 100%; } .mk-page button{ font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } .mk-page ul{ margin: 0; padding: 0; list-style: none; } /* Pre-reveal transforms ([data-reveal="left"|"right"] translate ±34px) pushed content past a 375px viewport and the page slid sideways. Clipped on the section rather than on .mk-page, because overflow on propagates to the viewport instead of clipping there. `clip` not `hidden` so no scroll container is created and the sticky rail inside .mk-why still works. */ .mk-section{ overflow-x: clip; } /* The system's focus ring. Without this every control fell back to the UA default, which on the amber pill was amber-on-amber. */ .mk-page :focus-visible{ outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; } .mk-page .mk-cta :focus-visible{ outline-color: #fff; } .mk-wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } .mk-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); } .mk-eyebrow i{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .mk-eyebrow--chip{ padding: 7px 14px 7px 11px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); color: var(--ink-2); } .mk-eyebrow--chip i{ width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); } .mk-eyebrow--chip b{ color: var(--violet); font-weight: 600; } .mk-section{ padding-block: clamp(64px, 9vw, 130px); position: relative; } .mk-section__head{ max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } .mk-section__head .mk-eyebrow{ margin-bottom: 18px; } .mk-h2{ font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(2rem, 4.4vw, 3.25rem); color: var(--ink); } .mk-sub{ margin-top: 18px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; color: var(--ink-3); } .mk-section__head .mk-sub{ margin-inline: auto; max-width: 600px; } /* ---------- Squiggle underline ---------- */ .mk-squiggle{ position: relative; color: var(--violet); white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 16 3 28 3 42 8 S 70 14 84 8 110 3 118 7' stroke='%237c5cff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); /* A 0.5em band anchored 2px under the line box rode up through the glyph bodies, so the headline's payload phrase read as struck through. Sit the wave just below the baseline instead: short band, small negative offset. */ background-repeat: no-repeat; background-position: left bottom -0.02em; /* Drawn by default; the draw-on is an enhancement, same as every other reveal state here. Both rules below are scoped under .mk-anim so the is-in selector still outranks the pre-reveal one. */ background-size: 100% 0.22em; transition: background-size .85s var(--ease) .25s; } .mk-page.mk-anim .mk-squiggle{ background-size: 0% 0.22em; } .mk-page.mk-anim .mk-squiggle.is-in{ background-size: 100% 0.22em; } /* ---------- Buttons ---------- */ .mk-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding-inline: 24px; border-radius: var(--r-pill); font-family: var(--ui); font-weight: 600; font-size: .96rem; letter-spacing: -.01em; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; } .mk-btn__t{ display: inline-flex; align-items: center; gap: 8px; } .mk-btn svg{ width: 17px; height: 17px; } /* Scoped with .mk-page rather than !important: the reset's `.mk-page a{ color: inherit }` is (0,1,1), so a bare `.mk-btn--primary` (0,1,0) lost and someone reached for !important — which then beat the inverted `.mk-cta` variant below and rendered that button's label white on white. Specificity, not force, so variants can still override. The label span simply inherits, as it does on --ghost. */ .mk-page .mk-btn--primary{ background: var(--violet); color: #fff; box-shadow: var(--sh-violet); } .mk-page .mk-btn--primary:hover{ background: var(--violet-deep); transform: translateY(-2px); box-shadow: 0 18px 40px -12px oklch(0.545 0.19 283 / .55); } .mk-btn--ghost{ background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-sm); } .mk-btn--ghost:hover{ border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-md); } .mk-btn--lg{ height: 56px; padding-inline: 30px; font-size: 1rem; } .mk-btn--block{ width: 100%; } .mk-btn--dark{ background: var(--ink); color: #fff; } .mk-btn--dark:hover{ background: oklch(0.18 0.03 286); transform: translateY(-2px); } /* ============================================================ NAV — floating pill ============================================================ */ .mk-nav{ position: sticky; top: 16px; z-index: 60; padding-top: 16px; } .mk-nav__inner{ display: flex; align-items: center; gap: 18px; max-width: var(--wrap); margin-inline: auto; padding: 9px 9px 9px 20px; border-radius: var(--r-pill); background: oklch(1 0 0 / .78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--line); box-shadow: var(--sh-md); transition: box-shadow .4s var(--ease), background .4s; } .mk-nav.is-stuck .mk-nav__inner{ box-shadow: var(--sh-lg); background: oklch(1 0 0 / .9); } .mk-logo{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em; color: var(--ink); } .mk-logo__mark{ width: 32px; height: 32px; flex: none; display: grid; place-items: center; } .mk-logo__mark::after{ content: none; } .mk-logo__mark svg{ width: 32px; height: 32px; } /* margin-right only: the left gap is the logo's, and a symmetric auto margin would fight the actions' own auto margin for the free space. */ .mk-nav__links{ display: flex; align-items: center; gap: 4px; margin-inline: auto 0; } .mk-nav__links a{ padding: 9px 14px; border-radius: var(--r-pill); font-size: .92rem; font-weight: 500; color: var(--ink-2); transition: background .25s, color .25s; } .mk-nav__links a:hover{ background: var(--violet-soft); color: var(--violet-ink); } /* margin-left:auto, not relying on .mk-nav__links{margin-inline:auto} to do the pushing: when the links hide below 860px that spacer goes with them and the CTA and burger bunch up against the logo with dead space to the right. */ .mk-nav__actions{ display: flex; align-items: center; gap: 8px; margin-left: auto; } .mk-nav__actions .mk-signin{ padding: 9px 14px; font-size: .92rem; font-weight: 500; color: var(--ink-2); border-radius: var(--r-pill); transition: color .25s, background .25s; } .mk-nav__actions .mk-signin:hover{ color: var(--violet-ink); background: var(--violet-soft); } .mk-nav__actions .mk-btn{ height: 42px; padding-inline: 18px; font-size: .92rem; } .mk-nav__menu{ display: none; } .mk-nav__burger{ display: none; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--surface-2); align-items: center; justify-content: center; } .mk-nav__burger span{ position: relative; width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .mk-nav__burger span::before,.mk-nav__burger span::after{ content:''; position:absolute; left:0; width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); } .mk-nav__burger span::before{ top: -5.5px; } .mk-nav__burger span::after{ top: 5.5px; } .mk-page.nav-open .mk-nav__burger span{ background: transparent; } .mk-page.nav-open .mk-nav__burger span::before{ transform: translateY(5.5px) rotate(45deg); } .mk-page.nav-open .mk-nav__burger span::after{ transform: translateY(-5.5px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .mk-hero{ position: relative; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(40px, 6vw, 80px); overflow: hidden; } .mk-hero::before{ content:''; position: absolute; inset: -10% -10% auto -10%; height: 620px; z-index: 0; pointer-events: none; background: radial-gradient(60% 80% at 50% -8%, oklch(0.93 0.06 285 / .9), transparent 62%), radial-gradient(40% 60% at 82% 6%, oklch(0.93 0.05 268 / .55), transparent 60%); } .mk-hero__inner{ position: relative; z-index: 1; text-align: center; max-width: 900px; margin-inline: auto; } .mk-hero h1{ font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; font-size: clamp(2.6rem, 6.4vw, 5rem); color: var(--ink); margin-top: 26px; text-wrap: balance; } .mk-page .mk-hero__sub{ margin: 26px auto 0; max-width: 620px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.58; color: var(--ink-3); text-wrap: balance; } .mk-hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } /* Replaced the five-star row: there is no rating behind it, and an anonymous star strip reads as a fake review widget to the exact audience this page needs to convince. */ .mk-hero__note{ max-width: 54ch; margin: 26px auto 0; font-size: .9rem; line-height: 1.6; color: var(--ink-3); } /* Hero product stage */ .mk-hero__stage{ position: relative; z-index: 1; margin-top: clamp(44px, 6vw, 76px); perspective: 1800px; } .mk-hero__dots{ position: absolute; inset: -40px -40px 30% -40px; z-index: 0; background-image: radial-gradient(oklch(0.55 0.1 285 / .14) 1.3px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 65% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(70% 65% at 50% 40%, #000, transparent 78%); } /* ---------- Mock product UI (BankSense dashboard) ---------- */ .mk-app{ position: relative; z-index: 1; width: min(980px, 100%); margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; } .mk-app__bar{ display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .mk-app__dots{ display: flex; gap: 6px; } .mk-app__dots i{ width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); } .mk-app__dots i:nth-child(1){ background: oklch(0.72 0.17 25); } .mk-app__dots i:nth-child(2){ background: oklch(0.82 0.15 85); } .mk-app__dots i:nth-child(3){ background: oklch(0.78 0.14 150); } .mk-app__url{ margin-left: 10px; font-family: var(--mono); font-size: .76rem; color: var(--ink-4); } .mk-app__body{ display: grid; grid-template-columns: 200px 1fr; min-height: 420px; } .mk-app__side{ border-right: 1px solid var(--line); padding: 18px 14px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); } .mk-app__brand{ display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.03em; margin-bottom: 22px; } .mk-app__brand .mk-logo__mark{ width: 26px; height: 26px; border-radius: 8px; } .mk-app__brand .mk-logo__mark svg{ width: 26px; height: 26px; } .mk-app__nav{ display: flex; flex-direction: column; gap: 3px; } .mk-app__nav span{ display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: .85rem; font-weight: 500; color: var(--ink-3); } .mk-app__nav span.on{ background: var(--violet-soft); color: var(--violet-ink); font-weight: 600; } .mk-app__nav span i{ width: 7px; height: 7px; border-radius: 3px; background: currentColor; opacity: .55; } .mk-app__main{ padding: 22px; } .mk-app__row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .mk-app__row h4{ font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; } .mk-app__pill{ font-family: var(--mono); font-size: .72rem; padding: 5px 11px; border-radius: var(--r-pill); background: var(--violet-soft); color: var(--violet-ink); } .mk-kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .mk-kpi{ border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface); } .mk-kpi span{ font-size: .74rem; color: var(--ink-4); display: block; margin-bottom: 6px; } .mk-kpi b{ font-family: var(--mono); font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; } .mk-kpi.in b{ color: var(--income-ink); } .mk-kpi.out b{ color: var(--expense-ink); } .mk-kpi.vat b{ color: var(--violet); } .mk-chartcard{ border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--surface); } .mk-chartcard__h{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mk-chartcard__h strong{ font-size: .9rem; font-weight: 600; } .mk-chartcard__h small{ font-family: var(--mono); font-size: .7rem; color: var(--ink-4); } .mk-spark{ width: 100%; height: 96px; } /* Drawn by default, undrawn only while the animation system is armed — same rule as every other reveal here, so the hero mockup is a chart with a line in it rather than an empty box when the animation cannot run. */ .mk-spark path.line{ fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 0; } .mk-page.mk-anim .mk-spark path.line{ stroke-dashoffset: 1200; } .mk-page.mk-anim .mk-app.is-in .mk-spark path.line{ stroke-dashoffset: 0; animation: mkDraw 1.6s var(--ease) .4s backwards; } .mk-spark path.line.v{ stroke: var(--violet); } .mk-spark path.line.g{ stroke: var(--line-2); animation-delay: .55s; } .mk-spark path.area{ fill: url(#mkgrad); opacity: 1; } .mk-page.mk-anim .mk-spark path.area{ opacity: 0; } .mk-page.mk-anim .mk-app.is-in .mk-spark path.area{ opacity: 1; animation: mkFade .8s ease 1.1s backwards; } /* floating mini cards on hero */ /* 190px, not 210px, and pulled outward: the gutter between the dashboard (max 980px, centred) and the stage edge is 130px, so a 210px card anchored at the edge buried 94px of the mockup — the left one sat on the sidebar's nav items, the right one across the chart. At -24px the overlap is a deliberate ~36px, enough to read as layered depth without covering content. The hero clips its own overflow, so the negative offset cannot introduce a horizontal scrollbar. */ .mk-float{ position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 13px 15px; width: 190px; } .mk-float small{ font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); } .mk-float b{ display: block; font-family: var(--mono); font-size: 1.2rem; margin: 4px 0 2px; letter-spacing: -.02em; } .mk-float p{ font-size: .76rem; color: var(--ink-3); line-height: 1.4; } .mk-float--l{ left: -24px; top: 26%; } .mk-float--r{ right: -24px; top: 58%; } .mk-float .tag{ display: inline-block; font-family: var(--mono); font-size: .66rem; padding: 3px 8px; border-radius: var(--r-pill); background: var(--violet-soft); color: var(--violet-ink); } .mk-float--anim{ animation: mkFloat 6s ease-in-out infinite; } .mk-float--r.mk-float--anim{ animation-delay: -3s; } /* ============================================================ MARQUEE (keyword wordmarks) ============================================================ */ .mk-ticker{ padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } /* Scoped under .mk-page to outrank the `.mk-page p{ margin: 0 }` reset on line 73 — unscoped, this rule's margin-bottom lost that specificity fight (0,1,0 vs 0,1,1) and the label sat directly on the moving strip with a 0px gap, reading as a collision. */ .mk-page .mk-ticker__label{ text-align: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 22px; } .mk-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .mk-marquee__track{ display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); width: max-content; animation: mkMarquee 34s linear infinite; } /* The controller wraps the real items in one group and appends an aria-hidden twin; both must lay out exactly like the track did before. */ .mk-marquee__group{ display: flex; align-items: center; gap: inherit; } .mk-marquee--rev .mk-marquee__track{ animation-direction: reverse; animation-duration: 40s; } /* focus-within too, so a keyboard user landing inside a moving strip can stop it. Touch has no hover, so the strips do not stop there — reduced-motion halts them entirely (see the block at the end of this file). */ .mk-marquee:hover .mk-marquee__track, .mk-marquee:focus-within .mk-marquee__track{ animation-play-state: paused; } .mk-word{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.4rem); letter-spacing: -.02em; color: var(--ink-4); white-space: nowrap; } .mk-word__sep{ width: 5px; height: 5px; border-radius: 50%; background: var(--violet-tint); flex: none; } /* ============================================================ FEATURES (icon grid + tilted shot) ============================================================ */ .mk-features__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); } .mk-feature{ text-align: left; } .mk-feature__ic{ width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); margin-bottom: 16px; border: 1px solid var(--violet-tint); } .mk-feature__ic svg{ width: 24px; height: 24px; } .mk-feature h3{ font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: 8px; } .mk-feature p{ font-size: .95rem; line-height: 1.55; color: var(--ink-3); } .mk-features__shot{ margin-top: clamp(40px, 5vw, 70px); max-width: 780px; margin-inline: auto; perspective: 1700px; } /* flat app shell (no sidebar) + double-entry ledger */ .mk-app--flat .mk-app__body{ grid-template-columns: 1fr; min-height: auto; } .mk-ledger{ width: 100%; border-collapse: collapse; font-size: .86rem; } .mk-ledger th{ text-align: left; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); padding: 0 10px 10px; font-weight: 400; } .mk-ledger th.r, .mk-ledger td.r{ text-align: right; } .mk-ledger td{ padding: 11px 10px; border-top: 1px solid var(--line); color: var(--ink-2); } .mk-ledger td.code{ font-family: var(--mono); color: var(--violet); font-weight: 500; } .mk-ledger td.amt{ font-family: var(--mono); } .mk-ledger td.muted{ color: var(--ink-4); } .mk-ledger tr.tot td{ border-top: 2px solid var(--line-2); font-weight: 700; color: var(--ink); } .mk-ledger .bal{ color: var(--income-ink); } /* ============================================================ WHY / BENEFITS (sticky menu + blocks) ============================================================ */ .mk-why{ display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .mk-why__menu{ position: sticky; top: 110px; } .mk-why__menu .mk-eyebrow{ margin-bottom: 18px; } .mk-why__menu h2{ font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 26px; } .mk-why__nav{ display: flex; flex-direction: column; gap: 4px; } .mk-why__nav button{ display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r); text-align: left; color: var(--ink-3); font-weight: 600; font-size: 1rem; transition: background .3s, color .3s; } .mk-why__nav button .n{ font-family: var(--mono); font-size: .8rem; opacity: .6; } .mk-why__nav button.on{ background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); border: 1px solid var(--line); } .mk-why__nav button.on .n{ color: var(--violet); opacity: 1; } .mk-why__blocks{ display: flex; flex-direction: column; gap: clamp(20px, 3vw, 36px); } .mk-benefit{ border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-md); overflow: hidden; } .mk-benefit__top{ padding: clamp(22px, 3vw, 34px); } .mk-benefit__top h3{ font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.025em; margin-bottom: 10px; } .mk-benefit__top p{ font-size: 1rem; line-height: 1.6; color: var(--ink-3); max-width: 46ch; } .mk-benefit__viz{ padding: clamp(18px, 2.6vw, 30px); padding-top: 0; } /* benefit viz: forecast (typewriter) */ .mk-viz{ border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); padding: clamp(18px, 2.4vw, 26px); position: relative; overflow: hidden; } .mk-viz--violet{ background: linear-gradient(160deg, oklch(0.965 0.025 285), oklch(0.95 0.03 278)); } .mk-forecast{ display: flex; flex-direction: column; gap: 12px; } .mk-forecast__ask{ font-family: var(--mono); font-size: .82rem; color: var(--ink-3); } .mk-forecast__ans{ font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.03em; color: var(--ink); min-height: 1.2em; } .mk-caret{ display: inline-block; width: 2px; height: 1em; background: var(--violet); margin-left: 2px; vertical-align: -2px; animation: mkBlink 1s steps(1) infinite; } .mk-forecast__bars{ display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 6px; } .mk-forecast__bars i{ flex: 1; background: var(--violet-tint); border-radius: 6px 6px 0 0; height: var(--h, 40%); transform-origin: bottom; transform: scaleY(0); transition: transform .7s var(--ease); } .mk-benefit.is-in .mk-forecast__bars i{ transform: scaleY(1); } .mk-forecast__bars i:last-child{ background: var(--violet); } /* benefit viz: reminder card */ .mk-remind{ display: flex; flex-direction: column; gap: 10px; } .mk-remind__card{ display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); } .mk-remind__ic{ width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; } .mk-remind__ic svg{ width: 20px; height: 20px; } .mk-remind__ic.v{ background: var(--violet-soft); color: var(--violet); } .mk-remind__ic.a{ background: var(--amber-soft); color: oklch(0.55 0.12 70); } .mk-remind__ic.g{ background: var(--income-soft); color: var(--income); } .mk-remind__card div{ flex: 1; } .mk-remind__card strong{ display: block; font-size: .92rem; font-weight: 600; } .mk-remind__card small{ font-size: .8rem; color: var(--ink-4); } .mk-remind__card .mk-amt{ font-family: var(--mono); font-size: .92rem; } /* benefit viz: konto accuracy */ .mk-konto{ display: grid; gap: 8px; } .mk-konto__row{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .mk-konto__code{ font-family: var(--mono); font-size: .9rem; font-weight: 500; color: var(--violet); } .mk-konto__desc{ font-size: .88rem; color: var(--ink-2); } .mk-konto__ok{ display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--income-ink); font-family: var(--mono); } .mk-konto__ok svg{ width: 15px; height: 15px; } /* ============================================================ PROCESS (3 steps) ============================================================ */ .mk-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); position: relative; } .mk-step{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px); box-shadow: var(--sh-sm); position: relative; } .mk-step__n{ font-family: var(--mono); font-size: .82rem; color: var(--violet); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--violet-tint); margin-bottom: 18px; } .mk-step h3{ font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 9px; } .mk-step p{ font-size: .95rem; line-height: 1.55; color: var(--ink-3); } .mk-step__ic{ position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px); color: var(--violet-tint); } .mk-step__ic svg{ width: 28px; height: 28px; } /* ============================================================ INTEGRATIONS (two chip marquees + connector) ============================================================ */ .mk-integ{ position: relative; } .mk-integ__rows{ display: flex; flex-direction: column; gap: 18px; position: relative; } .mk-chip{ display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); font-weight: 600; font-size: .95rem; color: var(--ink-2); white-space: nowrap; } .mk-chip__ic{ width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); flex: none; } .mk-chip__ic svg{ width: 15px; height: 15px; } .mk-chip--konto .mk-chip__ic{ background: var(--income-soft); color: var(--income); } .mk-integ__core{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; box-shadow: var(--sh-lg); } .mk-integ__core .mk-logo__mark{ width: 26px; height: 26px; border-radius: 8px; } .mk-integ__core .mk-logo__mark svg{ width: 26px; height: 26px; } /* ============================================================ TESTIMONIAL ============================================================ */ /* ============================================================ FAQ ============================================================ */ .mk-faq{ max-width: 800px; margin-inline: auto; } .mk-faq__item{ border-bottom: 1px solid var(--line); } .mk-faq__q{ display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 22px 4px; text-align: left; font-family: var(--display); font-weight: 600; font-size: clamp(1.02rem, 1.6vw, 1.18rem); letter-spacing: -.02em; color: var(--ink); } .mk-faq__q .ic{ flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; } .mk-faq__q .ic svg{ width: 16px; height: 16px; } .mk-faq__item.is-open .mk-faq__q .ic{ transform: rotate(45deg); background: var(--violet); color: #fff; } .mk-faq__a{ overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); } .mk-faq__a p{ padding: 0 4px 24px; font-size: .98rem; line-height: 1.6; color: var(--ink-3); max-width: 64ch; } /* ============================================================ CTA ============================================================ */ .mk-cta__panel{ position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px); text-align: center; background: linear-gradient(150deg, oklch(0.5 0.18 285) 0%, var(--violet) 42%, var(--magenta) 100%); color: #fff; box-shadow: var(--sh-lg); } .mk-cta__panel::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); } .mk-cta__panel > *{ position: relative; z-index: 1; } .mk-cta__panel .mk-eyebrow{ color: rgba(255,255,255,.85); } .mk-cta__panel .mk-eyebrow i{ background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); } .mk-cta h2{ font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 16px auto 0; max-width: 16ch; } .mk-cta p{ margin: 18px auto 0; max-width: 50ch; font-size: 1.08rem; line-height: 1.55; color: rgba(255,255,255,.85); } .mk-cta__cta{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; } /* Inverted variant on the gradient panel: white pill, iris label. Scoped to .mk-page so it outranks the base variant explicitly rather than by source order. */ .mk-page .mk-cta .mk-btn--primary{ background: #fff; color: var(--violet-ink); box-shadow: 0 14px 34px -12px rgba(0,0,0,.3); } .mk-page .mk-cta .mk-btn--primary:hover{ background: #fff; color: var(--violet-deep); } .mk-cta .mk-btn--ghost{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; } .mk-cta .mk-btn--ghost:hover{ background: rgba(255,255,255,.18); } /* ============================================================ FOOTER ============================================================ */ .mk-footer{ border-top: 1px solid var(--line); background: var(--surface); padding-block: clamp(48px, 6vw, 80px) 32px; } .mk-footer__top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); } .mk-footer__brand .mk-logo{ margin-bottom: 16px; } .mk-footer__brand p{ font-size: .95rem; line-height: 1.6; color: var(--ink-3); max-width: 34ch; margin-bottom: 18px; } .mk-footer__col h4{ font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 16px; } /* padding 6px 0 gave a 31.5px row — below the 44px touch target. */ .mk-footer__col a{ display: flex; align-items: center; min-height: 44px; font-size: .94rem; color: var(--ink-3); padding: 4px 0; transition: color .2s; } .mk-footer__col a:hover{ color: var(--violet); } .mk-footer__contact{ margin-top: 18px; font-size: .94rem; color: var(--ink-3); } .mk-footer__contact a{ color: var(--violet-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--violet-tint); } .mk-footer__contact a:hover{ color: var(--violet); } .mk-footer__legal-link{ color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); } .mk-footer__legal-link:hover{ color: var(--violet); } .mk-footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-4); } /* ============================================================ Reveal / animation base states Every hidden state below is gated behind `.mk-anim`, which the marketing Stimulus controller adds to once it has connected and confirmed motion is wanted. The content is therefore VISIBLE by default and the animation is a pure enhancement. It used to be the other way round: `opacity: 0` applied unconditionally and only an IntersectionObserver callback could undo it. That makes the entire page's legibility depend on a callback firing — and when it did not (a throttled observer in a backgrounded tab, a JS error, a fast scroll past the trigger band) the visitor got a blank sheet with a nav bar on top. The