/* ====================================================================== * marketing.css — the public feature page (/how-we-help). * * Standalone: this file is the whole design, and app.css is NOT loaded beside * it (see views/layouts/marketing.php for why). Bootstrap is not loaded either * — only the icon font — so nothing here may lean on a .btn, a .row or a * Bootstrap CSS variable. * * The palette is the brand's: BG Blue #00317c, the lighter #004499 it * gradients to, and Light Blue #00c8ff as the accent, which is the same * scheme the auth hero uses so the page a visitor arrives from and this one * look like one product. * * The layout rule for the middle of the page: every feature is one .mk-row, * a two-column grid of copy and a picture of the thing. Odd rows put the copy * left, even rows swap it (.mk-row:nth-child(even)), which is what stops six * of them reading as a list. Below 900px they all stack copy-first — a * picture above its own explanation is a picture of nothing. * ====================================================================== */ :root { --mk-navy: #00317c; --mk-navy-2: #004499; --mk-navy-deep: #001c47; --mk-accent: #00c8ff; --mk-ink: #17233a; --mk-muted: #5b6b85; --mk-line: #dfe6f1; --mk-bg: #f6f9fd; --mk-card: #ffffff; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.mk-page { margin: 0; /* The reveal below starts each half of a row 38px outside its column, and a row still waiting to be scrolled to would otherwise widen the page and give a phone a sideways scroll. Clipping here is the fix; `hidden` first for browsers without `clip`, and neither creates a scroll container that could break the sticky top bar (body's overflow propagates to the viewport while stays visible). */ overflow-x: hidden; overflow-x: clip; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--mk-ink); background: var(--mk-card); line-height: 1.6; -webkit-font-smoothing: antialiased; } .mk-page h1, .mk-page h2, .mk-page h3 { font-family: Fraunces, Georgia, serif; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 .6rem; } .mk-page h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 700; } .mk-page h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; } .mk-page h3 { font-size: 1.15rem; font-weight: 600; } .mk-page p { margin: 0 0 1rem; } .mk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; } .mk-eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mk-accent); margin-bottom: .7rem; } .mk-section { padding: 4.5rem 0; } .mk-section--tint { background: var(--mk-bg); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); } .mk-lead { font-size: 1.08rem; color: var(--mk-muted); max-width: 62ch; } /* ---- Buttons --------------------------------------------------------- Two only, and they mean different things: primary is "register", ghost is "not yet". Every primary on the page goes to the same place, which is the point of the page. */ .mk-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.5rem; border-radius: .7rem; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } .mk-btn i { transition: transform .18s ease; } .mk-btn:hover i { transform: translateX(3px); } .mk-btn--primary { background: var(--mk-accent); color: var(--mk-navy-deep); box-shadow: 0 10px 26px rgba(0, 200, 255, .3); } .mk-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 200, 255, .42); } .mk-btn--ghost { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .45); } .mk-btn--ghost:hover { background: rgba(255, 255, 255, .12); } /* On a white section the ghost has to invert or it disappears. */ .mk-btn--onlight { color: var(--mk-navy); border-color: var(--mk-line); background: #fff; } .mk-btn--onlight:hover { background: var(--mk-bg); } /* ---- Top bar --------------------------------------------------------- Sticky, because the page is long and the register button is the only exit that matters. Translucent over the hero, solid once it has left it (.is-stuck is set by marketing.js). */ .mk-topbar { position: sticky; top: 0; z-index: 50; background: rgba(0, 28, 71, .0); border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .mk-topbar.is-stuck { background: rgba(0, 28, 71, .94); border-bottom-color: rgba(255, 255, 255, .12); box-shadow: 0 8px 26px rgba(0, 20, 50, .28); backdrop-filter: blur(8px); } .mk-topbar .mk-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; } .mk-topbar img { height: 36px; width: auto; display: block; } .mk-topbar-actions { display: flex; align-items: center; gap: 1rem; } .mk-topbar-actions a.mk-link { color: #dbeafe; text-decoration: none; font-size: .92rem; font-weight: 500; } .mk-topbar-actions a.mk-link:hover { color: #ffffff; } .mk-topbar-actions .mk-btn { padding: .55rem 1.05rem; font-size: .92rem; } /* ---- Hero ------------------------------------------------------------ The topbar sits ON the hero (negative margin), so the hero pays for the 68px itself. */ .mk-hero { margin-top: -68px; padding: 10rem 0 5.5rem; background: radial-gradient(120% 100% at 80% 0%, rgba(0, 200, 255, .22), transparent 55%), linear-gradient(150deg, var(--mk-navy-deep) 0%, var(--mk-navy) 55%, var(--mk-navy-2) 100%); color: #ffffff; position: relative; overflow: hidden; } .mk-hero h1 { color: #ffffff; max-width: 18ch; } .mk-hero p.mk-lead { color: #cfe3f7; } .mk-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; } /* Scoped to the section so it beats `.mk-page p`'s margin, which is one class plus an element and would otherwise win and close this gap to nothing. */ .mk-hero .mk-hero-note { margin: 1.6rem 0 0; font-size: .88rem; color: #9fc4e8; } /* The hero is two columns like every feature row below it — copy left, one picture right — so the page's shape is set before the first row explains it. The strip of four sits under BOTH, in its own .mk-wrap. */ .mk-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; } .mk-hero-art { position: relative; } /* The card drifts, gently and forever. It is the only thing on the page that moves without being scrolled to, which is the point: a hero that is completely still reads as a screenshot. */ .mk-art--float { animation: mk-float 7s ease-in-out infinite alternate; } @keyframes mk-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -14px, 0); } } /* Overlapping badge, half off the card's bottom-left corner — the detail that stops the column looking like a pasted-in rectangle. */ .mk-art-flag { position: absolute; left: -14px; bottom: -18px; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: .6rem; background: var(--mk-accent); color: var(--mk-navy-deep); font-size: .8rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } .mk-art-flag b { font-weight: 700; } /* The follow-up list inside the hero card. */ .mk-todo { display: grid; } .mk-todo-row { display: flex; align-items: center; gap: .65rem; padding: .6rem 0; border-top: 1px dashed var(--mk-line); font-size: .84rem; } .mk-todo-row:first-child { border-top: 0; } .mk-todo-row > i { color: var(--mk-navy-2); font-size: 1rem; flex: none; } .mk-todo-row > span { display: block; min-width: 0; color: var(--mk-muted); line-height: 1.35; } .mk-todo-row b { display: block; color: var(--mk-ink); font-weight: 600; } .mk-todo-row em { margin-left: auto; flex: none; font-style: normal; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; } .mk-todo-row em.now { background: #fdeaec; color: #b02a37; } .mk-todo-row em.today { background: #fff1e5; color: #b45309; } .mk-todo-row em.ok { background: #e7f5ee; color: #15803d; } .mk-todo-row.done b, .mk-todo-row.done span { color: #94a3b8; } .mk-todo-row.done > i { color: #16a34a; } /* The soft moving glow behind the hero copy. Purely decoration — it is the first thing prefers-reduced-motion turns off at the bottom of this file. */ .mk-hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 200, 255, .28), transparent 62%); animation: mk-drift 14s ease-in-out infinite alternate; } @keyframes mk-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-60px, 50px, 0) scale(1.12); } } /* ---- Numbers strip ---------------------------------------------------- */ .mk-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 4rem; position: relative; /* above the hero's drifting glow */ z-index: 1; } .mk-strip div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: .85rem; padding: 1rem 1.15rem; } .mk-strip b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.5rem; color: #ffffff; line-height: 1.1; } .mk-strip span { font-size: .84rem; color: #bcd8f3; } /* ---- Feature rows ----------------------------------------------------- */ .mk-rows { display: grid; gap: 4.5rem; } .mk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } /* The swap that stops six rows reading as a list. Only the picture moves — the copy stays in source order so a screen reader hears heading then text. */ .mk-row:nth-child(even) .mk-row-art { order: -1; } .mk-row-copy h2 { margin-bottom: .8rem; } .mk-row-copy p { color: var(--mk-muted); } .mk-row-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; } .mk-row-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; } .mk-row-list i { color: var(--mk-navy-2); font-size: 1.05rem; line-height: 1.5; flex: none; } .mk-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-navy-2); margin-bottom: .6rem; } /* ---- The little pictures --------------------------------------------- Every .mk-art is drawn in CSS from the real interface's vocabulary (a timeline, a board column, an opportunity pill, a canvas node). They are illustrations, not screenshots, and are aria-hidden — nothing in them is information the copy beside them does not already carry. */ .mk-art { background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: 1rem; padding: 1.35rem; box-shadow: 0 24px 50px rgba(0, 40, 96, .12); } .mk-art-title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: .92rem; color: var(--mk-navy); margin-bottom: 1rem; } .mk-art-title span { font-size: .76rem; font-weight: 500; color: var(--mk-muted); } .mk-line { height: 9px; border-radius: 999px; background: #e9eff8; } .mk-line.w80 { width: 80%; } .mk-line.w60 { width: 60%; } .mk-line.w40 { width: 40%; } /* timeline */ .mk-tl { list-style: none; margin: 0; padding: 0 0 0 1.15rem; border-left: 2px solid var(--mk-line); display: grid; gap: 1rem; } .mk-tl li { position: relative; font-size: .86rem; color: var(--mk-muted); } .mk-tl li::before { content: ""; position: absolute; left: -1.55rem; top: .35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--mk-accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--mk-navy-2); } .mk-tl b { display: block; color: var(--mk-ink); font-weight: 600; } /* board columns */ .mk-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; } .mk-board-col { background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: .6rem; padding: .6rem; } .mk-board-col h4 { margin: 0 0 .5rem; font: 700 .68rem/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); } .mk-chip { background: #fff; border: 1px solid var(--mk-line); border-radius: .45rem; padding: .45rem .5rem; margin-bottom: .4rem; font-size: .76rem; font-weight: 600; color: var(--mk-ink); } .mk-chip small { display: block; font-weight: 500; color: var(--mk-muted); } /* opportunity pill — the real one is split: type colour | chance tone */ .mk-opp { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-top: 1px dashed var(--mk-line); font-size: .85rem; } .mk-opp:first-of-type { border-top: 0; } .mk-pill { display: inline-flex; border-radius: 999px; overflow: hidden; font-size: .7rem; font-weight: 700; } .mk-pill span { padding: .18rem .55rem; } .mk-pill .a { background: #00317c; color: #fff; } .mk-pill .b { background: #d8f3e2; color: #14653b; } .mk-pill.warm .a { background: #7c3aed; } .mk-pill.warm .b { background: #fff0d6; color: #96591a; } /* workflow canvas */ .mk-canvas { display: grid; gap: .5rem; justify-items: center; } .mk-node { width: 100%; max-width: 230px; border: 1px solid var(--mk-line); border-radius: .6rem; padding: .55rem .7rem; font-size: .8rem; font-weight: 600; color: var(--mk-ink); background: #fff; display: flex; align-items: center; gap: .5rem; box-shadow: 0 4px 12px rgba(0, 40, 96, .07); } .mk-node i { color: var(--mk-navy-2); } .mk-node.trigger { background: var(--mk-navy); color: #fff; border-color: var(--mk-navy); } .mk-node.trigger i { color: var(--mk-accent); } .mk-node.wait { background: var(--mk-bg); } .mk-connector { width: 2px; height: 16px; background: var(--mk-line); } /* email preview */ .mk-mail-head { background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: .55rem .55rem 0 0; padding: .6rem .8rem; font-size: .8rem; color: var(--mk-muted); } .mk-mail-body { border: 1px solid var(--mk-line); border-top: 0; border-radius: 0 0 .55rem .55rem; padding: .9rem .8rem; font-size: .84rem; } .mk-mail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; text-align: center; } .mk-mail-stats div { background: var(--mk-bg); border-radius: .5rem; padding: .5rem; } .mk-mail-stats b { display: block; font-family: Fraunces, serif; font-size: 1.15rem; color: var(--mk-navy); } .mk-mail-stats span { font-size: .7rem; color: var(--mk-muted); } /* form mock */ .mk-form { display: grid; gap: .55rem; } .mk-input { border: 1px solid #cbd7e6; border-radius: .5rem; padding: .55rem .7rem; font-size: .82rem; color: #93a3b8; background: #fff; } .mk-submit { background: var(--mk-navy); color: #fff; text-align: center; font-weight: 700; font-size: .84rem; border-radius: .5rem; padding: .6rem; } /* ---- "Everything else" grid ------------------------------------------- */ .mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.5rem; } .mk-card { background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: .9rem; padding: 1.3rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .mk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 40, 96, .12); border-color: #c6d6ec; } .mk-card i { font-size: 1.4rem; color: var(--mk-navy-2); } .mk-card h3 { margin: .7rem 0 .35rem; font-size: 1.02rem; } .mk-card p { margin: 0; font-size: .89rem; color: var(--mk-muted); } /* ---- Steps ------------------------------------------------------------ */ .mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; counter-reset: mk-step; } .mk-step { padding-top: 1.2rem; border-top: 3px solid var(--mk-line); } .mk-step::before { counter-increment: mk-step; content: counter(mk-step); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--mk-navy); color: #fff; font-family: Fraunces, serif; font-weight: 700; margin-bottom: .8rem; } .mk-step h3 { font-size: 1.05rem; } .mk-step p { font-size: .92rem; color: var(--mk-muted); margin: 0; } /* ---- Closing call to action ------------------------------------------- */ /* Follows a full section, so it brings no padding of its own to the party — .mk-section--tight is the one that carries it. */ .mk-section--tight { padding-top: 0; } .mk-cta { background: radial-gradient(100% 120% at 15% 0%, rgba(0, 200, 255, .22), transparent 60%), linear-gradient(140deg, var(--mk-navy) 0%, var(--mk-navy-deep) 100%); color: #fff; border-radius: 1.4rem; padding: 3.5rem 3rem; text-align: center; } .mk-cta h2 { color: #fff; } .mk-cta p { color: #cfe3f7; max-width: 58ch; margin: 0 auto 1.6rem; } /* The footer is three lines in descending weight: the phone number, who built this and where else to go, then the copyright. The number is the only one anybody is looking for, so it is the only one at body size. */ .mk-footer { padding: 2.5rem 0 1rem; text-align: center; color: var(--mk-muted); } .mk-footer a { color: var(--mk-navy-2); } .mk-footer .mk-footer-call { margin: 0 0 .5rem; font-size: 1rem; color: var(--mk-ink); } .mk-footer .mk-footer-call i { color: var(--mk-navy-2); margin-right: .35rem; } .mk-footer .mk-footer-call a { font-weight: 700; text-decoration: none; white-space: nowrap; /* a phone number split across two lines is unreadable */ } .mk-footer .mk-footer-call a:hover { text-decoration: underline; } .mk-footer .mk-footer-meta { margin: 0 0 .4rem; font-size: .85rem; } .mk-footer .mk-footer-copy { margin: 0; font-size: .78rem; color: #8698b3; } /* ---- Reveal on scroll ------------------------------------------------- marketing.js adds .is-in when an element enters the viewport. The starting state is set here rather than in JS so it cannot flash unstyled — but ONLY under .js-reveal, which the script puts on the moment it runs. With no JavaScript nothing is ever hidden. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); will-change: opacity, transform; } /* A feature row's two halves come in from their own sides and meet — the direction is the whole reason the alternating layout reads as movement rather than as a list scrolling past. */ .js-reveal [data-reveal="left"] { transform: translate3d(-38px, 12px, 0); } .js-reveal [data-reveal="right"] { transform: translate3d(38px, 12px, 0); } .js-reveal [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); } @media (max-width: 900px) { .mk-row { grid-template-columns: 1fr; gap: 2rem; } /* Copy first, always: a picture above its own explanation explains nothing. This undoes the desktop swap. */ .mk-row:nth-child(even) .mk-row-art { order: 0; } .mk-grid, .mk-steps, .mk-strip { grid-template-columns: repeat(2, 1fr); } .mk-hero { padding: 8rem 0 4rem; } .mk-hero-grid { grid-template-columns: 1fr; gap: 2.75rem; } .mk-strip { margin-top: 3rem; } .mk-section { padding: 3.25rem 0; } .mk-cta { padding: 2.5rem 1.5rem; } } @media (max-width: 620px) { .mk-grid, .mk-steps, .mk-strip { grid-template-columns: 1fr; } .mk-topbar-actions .mk-link { display: none; } .mk-board { grid-template-columns: 1fr; } } /* Motion is decoration here, all of it. Turned off in one place. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mk-hero::after { animation: none; } .mk-art--float { animation: none; } .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .mk-btn, .mk-card, .mk-btn i { transition: none; } .mk-btn:hover, .mk-card:hover { transform: none; } }