/* invoice.rocks marketing site (home / features / pricing) Light-first; dark via .dark on (ir-theme localStorage). Design rules: no glows, depth via borders + soft shadows, Inter, 12-16px radius. */ :root { --mk-oxford: #192338; --mk-cadet: #1E2E4F; --mk-yinmn: #31487A; --mk-jordy: #8FB3E2; --mk-lavender: #D9E1F1; --mk-gradient: linear-gradient(135deg, #1E2E4F 0%, #31487A 50%, #8FB3E2 100%); --mk-bg: #f6f6f4; --mk-surface: #ffffff; --mk-surface-2: #fbfbfa; --mk-elevated: #ffffff; --mk-border: #e4e4e0; --mk-border-strong: #d2d2cc; --mk-text: #1a1d23; --mk-text-2: #4b5563; --mk-text-3: #8a919e; --mk-accent: #31487A; --mk-accent-hover: #1E2E4F; --mk-on-accent: #ffffff; --mk-accent-soft: #eef2f9; --mk-good: #2e7d4f; --mk-good-soft: #e7f3ec; --mk-bad: #b3423a; --mk-bad-soft: #f9ecea; --mk-info-soft: #e8eef8; --mk-gradient-text: linear-gradient(120deg, #192338 0%, #1E2E4F 55%, #31487A 100%); --mk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07); --mk-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.09); --mk-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.13); --mk-nav-bg: rgba(246, 246, 244, 0.85); color-scheme: light; } html.dark { --mk-bg: #16181d; --mk-surface: #1e2126; --mk-surface-2: #1a1d22; --mk-elevated: #262b31; --mk-border: #2c3138; --mk-border-strong: #3b414b; --mk-text: #e8eaed; --mk-text-2: #a6adba; --mk-text-3: #868d9a; --mk-accent: #8FB3E2; --mk-accent-hover: #D9E1F1; --mk-on-accent: #16181d; --mk-accent-soft: #232a36; --mk-good: #6fbf8f; --mk-good-soft: #1e2b24; --mk-bad: #e08a83; --mk-bad-soft: #2e2020; --mk-info-soft: #212836; --mk-gradient-text: linear-gradient(120deg, #31487A 0%, #8FB3E2 55%, #D9E1F1 100%); --mk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --mk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --mk-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --mk-nav-bg: rgba(22, 24, 29, 0.85); color-scheme: dark; } /* Suppress transitions while flipping theme so the switch is atomic */ .theme-switching, .theme-switching * { transition: none !important; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--mk-bg); } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--mk-bg); color: var(--mk-text); line-height: 1.6; -webkit-font-smoothing: antialiased; font-size: 16px; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } .mk-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .mk-num { font-variant-numeric: tabular-nums; } /* ---------- Nav ---------- */ .mk-nav { position: sticky; top: 0; z-index: 50; background: var(--mk-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--mk-border); } .mk-nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; } .mk-logo { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; } .mk-logo span { font-weight: 400; color: var(--mk-text-2); } .mk-nav-links { display: flex; gap: 22px; margin-right: auto; } .mk-nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--mk-text-2); transition: color 0.15s; } .mk-nav-links a:hover, .mk-nav-links a.active { color: var(--mk-text); } .mk-nav-actions { display: flex; align-items: center; gap: 10px; } .mk-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--mk-text-2); border: 1px solid transparent; transition: all 0.15s; } .mk-iconbtn:hover { color: var(--mk-text); border-color: var(--mk-border); background: var(--mk-surface); } .mk-iconbtn svg { width: 18px; height: 18px; } html.dark .mk-only-light { display: none; } html:not(.dark) .mk-only-dark { display: none; } /* Language dropdown */ .mk-lang { position: relative; } .mk-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: var(--mk-text-2); border: 1px solid transparent; transition: all 0.15s; } .mk-lang-btn:hover { border-color: var(--mk-border); background: var(--mk-surface); color: var(--mk-text); } .mk-lang-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--mk-elevated); border: 1px solid var(--mk-border); border-radius: 12px; box-shadow: var(--mk-shadow-md); padding: 6px; min-width: 150px; } .mk-lang.open .mk-lang-menu { display: block; } .mk-lang-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; color: var(--mk-text-2); } .mk-lang-menu a:hover { background: var(--mk-accent-soft); color: var(--mk-text); } .mk-lang-menu a.active { color: var(--mk-accent); font-weight: 600; } /* ---------- Buttons ---------- */ .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s; } .mk-btn svg { width: 16px; height: 16px; } .mk-btn-primary { background: var(--mk-gradient); color: #ffffff; box-shadow: var(--mk-shadow-sm); } .mk-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--mk-shadow-md); } .mk-btn-ghost { border: 1px solid var(--mk-border-strong); color: var(--mk-text); background: var(--mk-surface); } .mk-btn-ghost:hover { border-color: var(--mk-accent); } .mk-btn-sm { padding: 9px 18px; font-size: 0.88rem; } /* ---------- Hero ---------- */ .mk-hero { padding: 84px 0 40px; text-align: center; position: relative; overflow: hidden; } .mk-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 46% at 50% 0%, rgba(143, 179, 226, 0.16) 0%, transparent 65%); } .mk-hero > .mk-container { position: relative; } .mk-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--mk-surface); border: 1px solid var(--mk-border); color: var(--mk-text-2); box-shadow: var(--mk-shadow-sm); margin-bottom: 26px; } .mk-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-good); } .mk-h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; } .mk-h1 .grad { background: var(--mk-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .mk-hero-sub { max-width: 540px; margin: 20px auto 30px; color: var(--mk-text-2); font-size: 1.08rem; } .mk-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .mk-hero-stats { display: flex; gap: 0; justify-content: center; margin-top: 40px; } .mk-hero-stat { padding: 0 28px; text-align: center; } .mk-hero-stat + .mk-hero-stat { border-left: 1px solid var(--mk-border); } .mk-hero-stat b { display: block; font-size: 1.05rem; font-weight: 700; } .mk-hero-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mk-text-3); } /* Hero visual composite */ .mk-hero-visual { position: relative; max-width: 880px; margin: 56px auto 0; text-align: left; } .mk-hero-visual .mk-doc { position: absolute; right: -12px; bottom: -34px; width: 300px; transform: rotate(2.5deg); z-index: 2; box-shadow: var(--mk-shadow-lg); } @media (max-width: 760px) { .mk-hero-visual .mk-doc { display: none; } } /* ---------- Browser frame (mockup shell) ---------- */ .mk-frame { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 16px; overflow: hidden; box-shadow: var(--mk-shadow-lg); } .mk-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--mk-border); background: var(--mk-surface-2); } .mk-frame-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; opacity: 0.85; } .mk-frame-bar i:nth-child(1) { background: #e0655a; } .mk-frame-bar i:nth-child(2) { background: #e0b23e; } .mk-frame-bar i:nth-child(3) { background: #59b26b; } .mk-frame-bar em { font-style: normal; font-size: 0.72rem; color: var(--mk-text-3); margin: 0 auto; } /* ---------- Mockup: dashboard (M1) ---------- */ .mk-dash { display: grid; grid-template-columns: 168px 1fr; min-height: 330px; font-size: 0.78rem; } .mk-dash-side { border-right: 1px solid var(--mk-border); padding: 14px 10px; background: var(--mk-surface-2); } .mk-dash-side b { display: block; font-size: 0.78rem; padding: 0 8px 10px; letter-spacing: -0.01em; } .mk-dash-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--mk-text-2); } .mk-dash-item svg { width: 13px; height: 13px; } .mk-dash-item.on { background: var(--mk-gradient); color: #fff; box-shadow: var(--mk-shadow-sm); } .mk-dash-main { padding: 16px; } .mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .mk-kpi { border: 1px solid var(--mk-border); border-radius: 12px; padding: 10px 12px; background: var(--mk-surface); } .mk-kpi span { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mk-text-3); } .mk-kpi b { font-size: 0.95rem; } .mk-panel { border: 1px solid var(--mk-border); border-radius: 12px; background: var(--mk-surface); } .mk-panel-h { padding: 9px 12px; border-bottom: 1px solid var(--mk-border); font-weight: 600; font-size: 0.74rem; } .mk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--mk-border); } .mk-row:last-child { border-bottom: 0; } .mk-row .grow { flex: 1; min-width: 0; } .mk-muted { color: var(--mk-text-3); } .mk-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; } .mk-chip-info { background: var(--mk-info-soft); color: var(--mk-accent); } .mk-chip-good { background: var(--mk-good-soft); color: var(--mk-good); } .mk-chip-bad { background: var(--mk-bad-soft); color: var(--mk-bad); } .mk-bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; padding: 12px; } .mk-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--mk-accent); opacity: 0.9; display: block; } .mk-bars i.lo { background: var(--mk-jordy); opacity: 0.45; } /* ---------- Mockup: invoice document (M2) ---------- */ .mk-doc { background: #ffffff; color: #1a1d23; border: 1px solid var(--mk-border); border-radius: 12px; padding: 22px; font-size: 0.72rem; position: relative; overflow: hidden; box-shadow: var(--mk-shadow-md); } html.dark .mk-doc { border-color: #3b414b; } .mk-doc-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; } /* nowrap keeps the bullet glued to the wordmark when the sender block is wide */ .mk-doc-logo { font-weight: 800; letter-spacing: 0.06em; font-size: 0.85rem; color: #192338; white-space: nowrap; } .mk-doc-logo i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #e0b23e; border: 2px solid #192338; margin-right: 5px; vertical-align: -1px; } /* padding-right keeps the sender block clear of the rotated PAID ribbon, which overlaps the top-right corner — company names vary in length by region. */ .mk-doc-addr { text-align: right; color: #4b5563; line-height: 1.45; padding-right: 46px; } .mk-doc-addr b { color: #1a1d23; } .mk-doc-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin-bottom: 16px; color: #4b5563; } .mk-doc-meta b { color: #1a1d23; } .mk-doc table { width: 100%; border-collapse: collapse; } .mk-doc th { text-align: left; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8a919e; border-bottom: 1.5px solid #1a1d23; padding: 5px 4px; } .mk-doc td { padding: 7px 4px; border-bottom: 1px solid #e4e4e0; } .mk-doc .r { text-align: right; } .mk-doc-total { display: flex; justify-content: flex-end; gap: 24px; padding-top: 10px; font-weight: 700; } .mk-ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(38deg); background: #2e7d4f; color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; padding: 5px 40px; } /* ---------- Mockup: QR-bill (M3) ---------- */ .mk-qrbill { background: #ffffff; color: #1a1d23; border: 1px solid var(--mk-border); border-radius: 12px; overflow: hidden; font-size: 0.66rem; box-shadow: var(--mk-shadow-md); } .mk-qrbill-cut { display: flex; align-items: center; gap: 8px; color: #8a919e; border-bottom: 1.5px dashed #b9b9b2; padding: 7px 14px; font-size: 0.68rem; } .mk-qrbill-body { display: grid; grid-template-columns: 220px 1fr; } .mk-qrbill-receipt { border-right: 1.5px dashed #b9b9b2; padding: 14px; } .mk-qrbill-pay { padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 14px; } .mk-qrbill h4 { font-size: 0.78rem; margin-bottom: 8px; } .mk-qrbill h5 { font-size: 0.62rem; margin: 7px 0 1px; } .mk-qrbill p { color: #374151; line-height: 1.45; } .mk-qr { width: 118px; height: 118px; position: relative; flex: none; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 1px; } .mk-qr i { background: #111; } .mk-qr i.w { background: transparent; } .mk-qr::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: #111; /* Swiss cross */ background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 12px 3.5px, 3.5px 12px; background-position: center; background-repeat: no-repeat; border: 2px solid #fff; outline: 1px solid #111; } /* ---------- Mockup: timeline (M4) ---------- */ .mk-tl { padding: 14px; font-size: 0.72rem; } .mk-tl-months { display: grid; grid-template-columns: 120px repeat(3, 1fr); gap: 0; color: var(--mk-text-3); font-weight: 600; border-bottom: 1px solid var(--mk-border); padding-bottom: 6px; } .mk-tl-grid { position: relative; } .mk-tl-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--mk-border); } .mk-tl-row:last-child { border-bottom: 0; } .mk-tl-lane { position: relative; height: 22px; } .mk-tl-bar { position: absolute; top: 0; height: 22px; border-radius: 999px; display: flex; align-items: center; padding: 0 10px; font-size: 0.62rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; } .mk-tl-today { position: absolute; top: -6px; bottom: -6px; width: 2px; background: #d0564c; z-index: 2; } .mk-tl-today::before { content: ''; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #d0564c; } .mk-tl-todaylabel { position: absolute; top: -22px; transform: translateX(-50%); font-size: 0.6rem; color: #d0564c; font-weight: 700; } /* ---------- Mockup: client card (M5) ---------- */ .mk-client { padding: 16px; font-size: 0.78rem; } .mk-client-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mk-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--mk-accent-soft); color: var(--mk-accent); font-weight: 800; display: flex; align-items: center; justify-content: center; } .mk-client-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } /* ---------- Mockup: ledger board (M6) ---------- */ .mk-board { padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 0.7rem; } .mk-col { background: var(--mk-surface-2); border: 1px solid var(--mk-border); border-radius: 10px; padding: 8px; } .mk-col h5 { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mk-text-3); padding: 2px 4px 8px; } .mk-card-sm { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; box-shadow: var(--mk-shadow-sm); } .mk-card-sm b { display: block; font-size: 0.7rem; } .mk-card-sm span { color: var(--mk-text-3); font-size: 0.64rem; } /* ---------- Mockup: work report (M7) ---------- */ .mk-report { padding: 16px; font-size: 0.74rem; display: grid; gap: 12px; } .mk-field label { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mk-text-3); margin-bottom: 4px; } .mk-input { border: 1px solid var(--mk-border-strong); border-radius: 8px; padding: 7px 10px; background: var(--mk-surface); } .mk-chips { display: flex; gap: 6px; flex-wrap: wrap; } .mk-chips i { font-style: normal; padding: 4px 11px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; border: 1px solid var(--mk-border-strong); color: var(--mk-text-2); } .mk-chips i.on { background: var(--mk-accent); color: var(--mk-on-accent); border-color: var(--mk-accent); } .mk-slider { display: flex; align-items: center; gap: 10px; } .mk-slider .track { flex: 1; height: 4px; border-radius: 999px; background: var(--mk-border); position: relative; } .mk-slider .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--mk-accent); } .mk-slider .track em { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--mk-accent); transform: translate(-50%, -50%); border: 2px solid var(--mk-surface); } .mk-sig { border-bottom: 1.5px solid var(--mk-border-strong); padding: 4px 8px 2px; } .mk-sig svg { width: 130px; height: 34px; display: block; } .mk-sig svg path { stroke: var(--mk-text); fill: none; stroke-width: 1.6; stroke-linecap: round; } /* ---------- Mockup: emails table (M8) & lang stack (M9) ---------- */ .mk-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; } .mk-table th { text-align: left; padding: 8px 12px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mk-text-3); border-bottom: 1px solid var(--mk-border); } .mk-table td { padding: 9px 12px; border-bottom: 1px solid var(--mk-border); } .mk-table tr:last-child td { border-bottom: 0; } .mk-langstack { display: grid; gap: 8px; padding: 16px; } .mk-langstack .mk-card-sm { display: flex; justify-content: space-between; align-items: center; margin: 0; } .mk-flag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: var(--mk-accent); background: var(--mk-accent-soft); border-radius: 6px; padding: 2px 7px; } /* ---------- Sections ---------- */ .mk-section { padding: 72px 0; } .mk-section-tight { padding: 48px 0; } .mk-kicker { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-accent); background: var(--mk-accent-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .mk-h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; } .mk-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .mk-section-head p { color: var(--mk-text-2); margin-top: 12px; } .mk-section-head-left { text-align: left; max-width: 560px; margin-left: 0; margin-right: 0; margin-bottom: 64px; } /* Feature grid (home) — illustrated icons, no cards */ .mk-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; row-gap: 64px; } .mk-feat { display: block; color: inherit; } .mk-feat h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 10px; transition: color 0.15s; } .mk-feat .lead { font-size: 0.98rem; font-weight: 600; line-height: 1.45; margin-bottom: 8px; color: var(--mk-text); } .mk-feat p { color: var(--mk-text-2); font-size: 0.92rem; line-height: 1.6; } .mk-feat:hover h3 { color: var(--mk-accent); } /* Illustrated icon: strokes/fills follow the marketing tokens so the set re-colors in dark mode instead of shipping baked-in hex values. */ .mk-feat-ic { width: 76px; height: 76px; display: block; margin-bottom: 22px; transition: transform 0.15s; } .mk-feat:hover .mk-feat-ic { transform: translateY(-3px); } .mk-feat-ic .s { stroke: var(--mk-text); } .mk-feat-ic .s3 { stroke: var(--mk-text-3); } .mk-feat-ic .sa { stroke: var(--mk-accent); } .mk-feat-ic .so { stroke: var(--mk-on-accent); } .mk-feat-ic .f { fill: var(--mk-accent-soft); } .mk-feat-ic .fs { fill: var(--mk-surface); } .mk-feat-ic .fa { fill: var(--mk-accent); } .mk-feat-ic .fo { fill: var(--mk-on-accent); } .mk-feat-ic .ft { fill: var(--mk-text); } .mk-feat-ic text { font-family: inherit; font-weight: 700; } .mk-feat-ic .cur { font-size: 12px; } .mk-feat-ic .cur.lg { font-size: 16px; } .mk-feat-ic .mark { font-size: 14px; } .mk-center-link { text-align: center; margin-top: 28px; } .mk-center-link a { font-weight: 600; color: var(--mk-accent); } .mk-center-link a:hover { color: var(--mk-accent-hover); } /* Trust band */ .mk-trust { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--mk-text-3); font-size: 0.88rem; font-weight: 500; } .mk-trust i { width: 4px; height: 4px; border-radius: 50%; background: var(--mk-border-strong); } /* Feature sections (features page) */ .mk-feature { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--mk-border); } .mk-feature:last-of-type { border-bottom: 0; } .mk-feature.flip .mk-feature-copy { order: 2; } .mk-feature-copy h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 10px; } .mk-feature-copy p { color: var(--mk-text-2); } .mk-feature-copy p + p { margin-top: 10px; } .mk-feature-copy .lead { font-weight: 600; color: var(--mk-text); } .mk-feature-copy .mk-feat-ic { width: 64px; height: 64px; margin-bottom: 0; } /* Quick invoice mockup: the sentence someone types, and the draft it becomes. Same CSS-only approach as the other mockups — no screenshots to go stale. */ .mk-prompt { display: grid; gap: 12px; } .mk-prompt-box { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 14px; padding: 15px 17px; box-shadow: var(--mk-shadow-sm); } .mk-prompt-label { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mk-text-3); font-weight: 700; margin-bottom: 7px; } .mk-prompt-text { font-size: 0.92rem; line-height: 1.55; color: var(--mk-text); } .mk-prompt-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--mk-accent); animation: mk-caret 1.1s steps(1) infinite; } @keyframes mk-caret { 50% { opacity: 0; } } .mk-prompt-arrow { display: flex; align-items: center; gap: 10px; color: var(--mk-text-3); font-size: 0.72rem; } .mk-prompt-arrow::before, .mk-prompt-arrow::after { content: ''; flex: 1; height: 1px; background: var(--mk-border); } .mk-prompt-out { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 14px; overflow: hidden; box-shadow: var(--mk-shadow-sm); font-size: 0.8rem; } .mk-prompt-out .mk-row { padding: 8px 12px; } .mk-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--mk-border); background: var(--mk-surface-2); font-weight: 700; font-size: 0.72rem; } .mk-prompt-total { display: flex; justify-content: space-between; padding: 9px 12px; border-top: 1px solid var(--mk-border); font-weight: 700; } .mk-prompt-note { padding: 8px 12px; border-top: 1px solid var(--mk-border); color: var(--mk-text-3); font-size: 0.7rem; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .mk-prompt-caret { animation: none; } } /* CTA band */ .mk-cta { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 20px; text-align: center; padding: 56px 32px; position: relative; overflow: hidden; } .mk-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 50% 0%, rgba(143, 179, 226, 0.14) 0%, transparent 70%); } .mk-cta > * { position: relative; } .mk-cta p { color: var(--mk-text-2); margin: 10px 0 24px; } /* ---------- Pricing ---------- */ .mk-toggle { display: inline-flex; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 999px; padding: 4px; gap: 2px; margin-top: 22px; } .mk-toggle button { padding: 8px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--mk-text-2); } .mk-toggle button.on { background: var(--mk-accent); color: var(--mk-on-accent); } .mk-toggle .save { margin-left: 6px; background: var(--mk-good-soft); color: var(--mk-good); font-size: 0.68rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; } .mk-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 20px; justify-content: center; margin-top: 40px; } .mk-plan { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 20px; padding: 30px; position: relative; } .mk-plan.pro { border-color: var(--mk-accent); box-shadow: var(--mk-shadow-md); } .mk-plan-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--mk-gradient); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .mk-plan h3 { font-size: 1.15rem; font-weight: 800; } .mk-plan .tag { color: var(--mk-text-2); font-size: 0.88rem; margin-top: 2px; } .mk-price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 20px; } .mk-price .cur { font-size: 1.2rem; font-weight: 700; color: var(--mk-text-2); } .mk-price .amt { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .mk-price .per { color: var(--mk-text-3); } .mk-plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; } .mk-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; } .mk-plan li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; } .mk-plan li.yes svg { color: var(--mk-good); } .mk-plan li.no { color: var(--mk-text-3); } .mk-plan li.no svg { color: var(--mk-text-3); } .mk-plan .foot { font-size: 0.8rem; color: var(--mk-text-3); border-top: 1px solid var(--mk-border); padding-top: 14px; margin-top: 20px; } .mk-plan .mk-btn { width: 100%; } /* Comparison table */ .mk-compare { max-width: 780px; margin: 0 auto; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 16px; overflow: hidden; } .mk-compare table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .mk-compare th, .mk-compare td { padding: 13px 18px; border-bottom: 1px solid var(--mk-border); text-align: center; } .mk-compare th:first-child, .mk-compare td:first-child { text-align: left; } .mk-compare tr:last-child td { border-bottom: 0; } .mk-compare thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mk-text-3); background: var(--mk-surface-2); } .mk-compare svg { width: 16px; height: 16px; vertical-align: -3px; } .mk-compare .y svg { color: var(--mk-good); } .mk-compare .n svg { color: var(--mk-text-3); opacity: 0.6; } /* FAQ */ .mk-faq { max-width: 680px; margin: 0 auto; display: grid; gap: 12px; } .mk-faq details { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 14px; overflow: hidden; } .mk-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 0.95rem; } .mk-faq summary::-webkit-details-marker { display: none; } .mk-faq summary::after { content: '+'; font-size: 1.2rem; color: var(--mk-text-3); font-weight: 400; } .mk-faq details[open] summary::after { content: '\2212'; } .mk-faq details p { padding: 0 20px 16px; color: var(--mk-text-2); font-size: 0.92rem; } .mk-faq summary:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: -2px; } /* ---------- Footer ---------- */ .mk-footer { border-top: 1px solid var(--mk-border); background: var(--mk-surface-2); padding: 52px 0 28px; margin-top: 72px; } .mk-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } .mk-footer h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mk-text-3); margin-bottom: 14px; } .mk-footer a { display: block; color: var(--mk-text-2); font-size: 0.9rem; padding: 3px 0; } .mk-footer a:hover { color: var(--mk-text); } .mk-footer-tag { color: var(--mk-text-3); font-size: 0.88rem; margin-top: 8px; max-width: 220px; } .mk-footer-bottom { border-top: 1px solid var(--mk-border); padding-top: 20px; text-align: center; color: var(--mk-text-3); font-size: 0.82rem; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .mk-feat-grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 48px; } } @media (max-width: 900px) { .mk-feature { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; } .mk-feature.flip .mk-feature-copy { order: 0; } .mk-plans { grid-template-columns: 1fr; } .mk-footer-grid { grid-template-columns: 1fr 1fr; } .mk-nav-links { display: none; } .mk-dash { grid-template-columns: 1fr; } .mk-dash-side { display: none; } .mk-qrbill-body { grid-template-columns: 1fr; } .mk-qrbill-receipt { border-right: 0; border-bottom: 1.5px dashed #b9b9b2; } } @media (max-width: 620px) { .mk-feat-grid { grid-template-columns: 1fr; row-gap: 44px; } .mk-section-head-left { margin-bottom: 44px; } .mk-feat-ic { width: 64px; height: 64px; margin-bottom: 16px; } } /* ---------- Cookie banner ---------- */ .mk-cookie { position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 90; max-width: 460px; margin: 0 auto; background: var(--mk-elevated); border: 1px solid var(--mk-border); border-radius: 16px; box-shadow: var(--mk-shadow-lg); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; } .mk-cookie.hidden { display: none; } .mk-cookie-icon { font-size: 1.5rem; line-height: 1; } .mk-cookie h3 { font-size: 0.95rem; margin-bottom: 4px; } .mk-cookie p { font-size: 0.82rem; color: var(--mk-text-2); margin-bottom: 12px; } .mk-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; } .mk-cookie-actions .mk-btn { padding: 7px 16px; font-size: 0.82rem; } /* ---------- Legal modals ---------- */ .mk-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10, 12, 16, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; } .mk-modal-overlay.hidden { display: none; } .mk-modal { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 18px; box-shadow: var(--mk-shadow-lg); width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column; } .mk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--mk-border); } .mk-modal-head h2 { font-size: 1.1rem; font-weight: 800; } .mk-modal-close { width: 32px; height: 32px; border-radius: 9px; font-size: 1.3rem; line-height: 1; color: var(--mk-text-3); display: flex; align-items: center; justify-content: center; } .mk-modal-close:hover { background: var(--mk-accent-soft); color: var(--mk-text); } .mk-modal-body { padding: 20px 24px; overflow-y: auto; font-size: 0.9rem; color: var(--mk-text-2); } .mk-modal-body h4 { color: var(--mk-text); font-size: 0.92rem; margin: 18px 0 6px; } .mk-modal-body ul { margin: 6px 0 6px 20px; display: grid; gap: 4px; } .mk-modal-body a { color: var(--mk-accent); } .mk-modal-foot { padding: 14px 24px; border-top: 1px solid var(--mk-border); text-align: right; } .mk-company-card, .mk-cookieprefs-card { background: var(--mk-surface-2); border: 1px solid var(--mk-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 6px; } .mk-company-card h4, .mk-cookieprefs-card h4 { margin: 0 0 6px; } .mk-company-card p { margin: 0; line-height: 1.5; } .mk-cookieprefs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mk-status-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mk-info-soft); color: var(--mk-text-2); } .mk-status-badge.accepted { background: var(--mk-good-soft); color: var(--mk-good); } .mk-status-badge.declined { background: var(--mk-bad-soft); color: var(--mk-bad); } .mk-cookieprefs-card p { margin: 8px 0 12px; } /* Footer brand logo */ .mk-footer-logo { height: 26px; display: block; opacity: 0.8; transition: opacity 0.15s; margin-top: 2px; } .mk-footer-logo:hover { opacity: 1; } /* ---------- Footer version + changelog ---------- */ .mk-version { font-size: 0.82rem; color: var(--mk-text-3); font-variant-numeric: tabular-nums; } .mk-version:hover { color: var(--mk-accent); } .mk-changelog { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; } .mk-release { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 16px; padding: 24px 28px; } .mk-release-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .mk-release-head h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .mk-release-code { color: var(--mk-text-2); font-weight: 600; font-size: 0.9rem; } .mk-release-date { margin-left: auto; color: var(--mk-text-3); font-size: 0.82rem; } .mk-release-cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mk-accent); margin: 16px 0 6px; } .mk-release-notes { list-style: none; display: grid; gap: 7px; } /* Direct children only: note bodies render markdown, so they can contain their own nested