/* Robochat landing page. * * Self-contained: no Tailwind runtime, no icon CDN, no carousel, no jQuery. The previous page fetched the * Tailwind browser compiler, lucide@latest, two Font Awesome versions and Bootstrap twice in two versions * -- see git history. The only remote dependency left is Google Fonts. * * Direction: every inset/padding/border that cares about direction uses a logical property, so the whole * page mirrors from `dir="rtl"` on alone. Arabic is not a stylesheet fork. * * Themes: the bare :root carries the complete light palette; the dark tokens are redefined twice, once * behind prefers-color-scheme (guarded so an explicit light choice wins) and once behind * [data-theme="dark"]. No colour is defined only inside a media query. */ /* ═══ Tokens. Light is the bare :root so the un-stamped "system" state resolves. ══════════════ */ :root { --paper: #F6F5F3; --surface: #FFFFFF; --deep: #12100E; --deep-2: #1D1A16; --ink: #191714; --ink-soft: #4A443C; --muted: #6E675C; --rule: #E2DED7; --accent: #FD7E14; --accent-ink: #8A3D00; --accent-wash:#FFF3E7; --pos: #1B7F4B; --frame: #1F2326; --display: Archivo, "Arial Black", system-ui, sans-serif; --body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #16130F; --surface: #1E1A16; --deep: #0B0908; --deep-2: #14110E; --ink: #F3EFE9; --ink-soft: #C4BCB0; --muted: #8E8579; --rule: #322C25; --accent: #FF9740; --accent-ink: #FFC796; --accent-wash:#2A1B0D; --pos: #4FBE86; --frame: #34393D; } } :root[data-theme="dark"] { --paper: #16130F; --surface: #1E1A16; --deep: #0B0908; --deep-2: #14110E; --ink: #F3EFE9; --ink-soft: #C4BCB0; --muted: #8E8579; --rule: #322C25; --accent: #FF9740; --accent-ink: #FFC796; --accent-wash:#2A1B0D; --pos: #4FBE86; --frame: #34393D; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } [dir="rtl"] body, body[dir="rtl"] { font-family: "IBM Plex Sans Arabic", var(--body); } h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "IBM Plex Sans Arabic", var(--display); letter-spacing: 0; } p { margin: 0; } a { color: inherit; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px; } .on-deep .eyebrow { color: var(--accent); } /* ═══ Nav ═════════════════════════════════════════════════════════════════════════════════════ */ /* Opaque, not translucent-and-blurred. A backdrop-filter on a sticky element re-rasterises a blurred copy of whatever is behind it on every scroll frame, for the whole length of the page -- it was the lag. Opaque also fixes legibility where the nav crosses the deep-ground sections. */ .nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); } .nav-in { display: flex; align-items: center; gap: 28px; height: 66px; } .brand { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; text-decoration: none; } .brand span { color: var(--accent); } .nav-links { display: flex; gap: 22px; margin-inline-start: auto; } .nav-links a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; font-weight: 500; } .nav-links a:hover { color: var(--ink); } /* Sign-in is a text link, not a second button: the nav already carries one primary action and two competing buttons would make neither read as the main one. */ .nav-login { font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; } .nav-login:hover { color: var(--accent-ink); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink); cursor: pointer; } @media (max-width: 900px) { .nav-links { display: none; position: absolute; inset-inline: 0; top: 66px; flex-direction: column; gap: 0; margin: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 24px 16px; } .nav-links.is-open { display: flex; } .nav-links a { padding: 12px 0; border-block-end: 1px solid var(--rule); } .nav-links a:last-child { border-block-end: none; } .nav-toggle { display: inline-flex; } .nav-in { gap: 14px; } .nav-in .btn.btn-primary { padding-inline: 14px; font-size: .86rem; } .nav-login { font-size: .86rem; } } .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: .93rem; padding: 11px 20px; border-radius: 3px; border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; } .btn-primary { background: var(--accent); color: #201000; box-shadow: 0 1px 0 var(--accent-ink); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--accent-ink); } .btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-quiet:hover { border-color: var(--ink); } .on-deep .btn-quiet { color: #F3EFE9; border-color: #3A342C; } .lang { font-family: var(--mono); font-size: .76rem; font-weight: 600; background: none; border: 1px solid var(--rule); color: var(--ink-soft); padding: 7px 11px; border-radius: 3px; cursor: pointer; } .lang:hover { border-color: var(--ink); color: var(--ink); } .btn:focus-visible, .lang:focus-visible, .nav-login:focus-visible, .curr-btn:focus-visible, .nav-links a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ═══ Hero: the thesis is the transformation, so it is the picture ════════════════════════════ */ /* The hero is copy and the calls to action. The proof is the three real screens immediately below it, which is why there is no illustration here -- see the note above .shots. */ .hero { padding: 76px 0 12px; } .hero-copy { max-width: 46rem; } .hero h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.02; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-sub { margin-top: 20px; font-size: 1.1rem; color: var(--ink-soft); max-width: 33em; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-note { margin-top: 18px; font-family: var(--mono); font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 8px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: none; } /* ── The real screens ─────────────────────────────────────────────────────────────────────────── */ /* A counter, not numbers in the markup: the
    already states the order, so writing 1/2/3 by hand would be the same fact twice and could drift from it. */ .shots { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; counter-reset: step; } .shot { counter-increment: step; display: grid; justify-items: start; gap: 4px; } .shot-frame { background: var(--frame); border-radius: 26px; padding: 6px; margin-bottom: 14px; width: 100%; max-width: 292px; justify-self: center; box-shadow: 0 16px 38px rgb(0 0 0 / .22), 0 2px 5px rgb(0 0 0 / .16); } .shot-frame img { display: block; width: 100%; height: auto; border-radius: 21px; } .shot h3 { font-size: 1.06rem; display: flex; align-items: baseline; gap: 9px; } .shot h3::before { content: counter(step); font-family: var(--mono); font-size: .68rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent); border-radius: 999px; min-width: 1.55em; padding: 2px 0; text-align: center; flex: none; } .shot p { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: 30em; } /* Three phones stacked is a long scroll, so they get smaller rather than staying full size. */ @media (max-width: 820px) { .shots { grid-template-columns: 1fr; gap: 32px; } .shot-frame { max-width: 236px; justify-self: start; } } /* ═══ Sections ════════════════════════════════════════════════════════════════════════════════ */ section { padding: 84px 0; } .on-deep { background: var(--deep); color: #F3EFE9; } .on-deep .lead, .on-deep .card-sub { color: #B8B0A4; } .sec-head { max-width: 46rem; margin-bottom: 44px; } .sec-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.1; } .lead { margin-top: 14px; font-size: 1.06rem; color: var(--ink-soft); } /* Products: three, numbered because they are a sequence a merchant adopts in order */ .prod { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .prod-card { background: var(--surface); padding: 30px 26px; display: grid; gap: 10px; align-content: start; } .prod-n { font-family: var(--mono); font-size: .74rem; color: var(--accent-ink); font-weight: 600; } .prod-card h3 { font-size: 1.22rem; } .card-sub { color: var(--ink-soft); font-size: .96rem; } /* Solutions: the ordering one is the anchor, so it is wider */ .sol { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; } @media (max-width: 980px) { .sol { grid-template-columns: 1fr; } } .sol-card { background: var(--deep-2); border: 1px solid #2A241E; border-radius: 4px; padding: 26px 24px; display: grid; gap: 14px; align-content: start; } .sol-card h3 { font-size: 1.12rem; color: #F3EFE9; } .sol-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .sol-card li { position: relative; padding-inline-start: 22px; font-size: .93rem; color: #C0B8AC; } .sol-card li::before { content: "→"; position: absolute; inset-inline-start: 0; color: var(--accent); font-family: var(--mono); } .sol-wide { grid-row: span 2; } @media (max-width: 980px) { .sol-wide { grid-row: auto; } } /* Industries: a dense field, because nineteen of anything is a list not a gallery */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: .88rem; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-soft); } .tag-hot { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); font-weight: 600; } /* Why: numbered claims, mono-labelled */ .why { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px 34px; } .why-item { display: grid; gap: 7px; align-content: start; } .why-k { font-family: var(--mono); font-size: .72rem; color: var(--accent-ink); font-weight: 600; } .why-item p { font-size: .97rem; color: var(--ink-soft); } /* Plans */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } @media (max-width: 980px) { .plans { grid-template-columns: 1fr; } } .plan { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 28px 24px; display: grid; gap: 16px; align-content: start; } .plan-mid { border-color: var(--accent); box-shadow: 0 14px 40px rgb(from var(--accent) r g b / .16); } @media (min-width: 981px) { .plan-mid { margin-top: -14px; padding-block: 36px; } } .plan-badge { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: #201000; padding: 4px 9px; border-radius: 3px; justify-self: start; font-weight: 700; } .plan-name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; } .plan-tag { font-family: var(--mono); font-size: .74rem; color: var(--accent-ink); letter-spacing: .06em; text-transform: uppercase; } .plan-desc { font-size: .95rem; color: var(--ink-soft); } .plan-price { display: flex; align-items: baseline; gap: 6px; } .plan-price b { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--ink); } .plan-price small { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); letter-spacing: .02em; } /* The included branch count belongs with the price, not in the bullet list — it qualifies what the number buys. Pulled up against the price because the card's 16px grid gap reads as a separation here, and these two lines are one statement. */ .plan-branch { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--muted); margin-top: -8px; } .plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 16px; } .plan li { position: relative; padding-inline-start: 20px; font-size: .89rem; color: var(--ink-soft); } .plan li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--pos); font-weight: 700; } .plan li.inherits { color: var(--ink); font-weight: 600; } .plan li.inherits::before { content: "+"; color: var(--accent); } /* Currency switcher: a display convenience over the same USD price, not a second billing currency — the note beside it says so, in both languages, every time it renders. */ .curr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .curr-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; } .curr-btn { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .03em; background: var(--surface); color: var(--ink-soft); border: none; border-inline-end: 1px solid var(--rule); padding: 7px 13px; cursor: pointer; } .curr-btn:last-child { border-inline-end: none; } .curr-btn:hover { color: var(--ink); } .curr-btn.is-active { background: var(--accent); color: #201000; } .curr-note { font-size: .82rem; color: var(--muted); } /* Branch add-on note. It sits between the cards and the comparison table because it qualifies all three prices above it rather than belonging to any one of them, and it carries the same .js-price/.js-period hooks so the currency and cycle switchers move it with the cards. */ .addon-note { margin-top: 28px; padding: 14px 18px; border: 1px dashed var(--rule); border-radius: 4px; background: var(--surface); font-size: .92rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; text-align: center; } .addon-note .addon-price { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink); } .addon-note small { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); letter-spacing: .02em; } /* Tier-independent capabilities. They sit outside the cards on purpose: each card is capped at five outcome bullets to stay scannable, and repeating five identical lines across three cards would spend that budget saying the same thing three times. Stated once, they still get counted. */ .included-strip { margin-top: 22px; } .included-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); text-align: center; margin-bottom: 12px; } .included-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; } .included-list li { position: relative; padding-inline-start: 20px; font-size: .89rem; color: var(--ink-soft); } .included-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--pos); font-weight: 700; } /* Plan comparison table: an overflow-x wrapper because eleven rows across three plans will not fit a narrow phone no matter how the type scales, and the body must never scroll sideways for it. */ .compare-wrap { overflow-x: auto; margin-top: 56px; } .compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; } .compare caption { text-align: start; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; } .compare th, .compare td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--rule); } .compare th:first-child, .compare td:first-child { text-align: start; color: var(--ink-soft); font-weight: 500; } .compare thead th { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink); padding-top: 0; } .compare thead th:first-child { font-family: var(--body); font-weight: 400; font-size: .8rem; color: var(--muted); } .compare tbody tr:hover { background: var(--paper); } .compare .y { color: var(--pos); font-weight: 700; } .compare .n { color: var(--muted); font-weight: 600; } /* FAQ */ .faq { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 52rem; } details { border-bottom: 1px solid var(--rule); } summary { cursor: pointer; padding-block: 19px; padding-inline-end: 34px; font-weight: 600; font-size: 1.02rem; list-style: none; position: relative; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; position: absolute; inset-inline-end: 4px; top: 17px; font-family: var(--mono); color: var(--accent); font-size: 1.25rem; font-weight: 400; } details[open] summary::after { content: "–"; } details p { padding-inline-end: 34px; padding-block-end: 22px; color: var(--ink-soft); font-size: .97rem; max-width: 46em; } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; } @media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } } .form-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 30px 28px; } .field { display: grid; gap: 6px; margin-bottom: 15px; } .field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); } .field input, .field textarea { font: inherit; font-size: .95rem; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); width: 100%; } .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field textarea { min-height: 92px; resize: vertical; } .opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; } .opt { position: relative; } .opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .opt span { display: block; font-size: .86rem; padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; color: var(--ink-soft); } .opt input:checked + span { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; } .opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .addr { display: grid; gap: 12px; font-size: .95rem; color: var(--ink-soft); } .addr-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* CTA + footer */ .cta-band { background: var(--accent); color: #201000; padding: 60px 0; } .cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); } .cta-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .btn-ink { background: #201000; color: #FFF3E7; } footer { background: var(--deep); color: #8E8579; padding: 30px 0; font-size: .85rem; } .foot-in { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* ═══ Added for the Thymeleaf port ══════════════════════════════════════════════════════════════ */ /* Sections that sit on the surface colour rather than the page ground. Was two inline style attributes in the markup. */ .sec-surface { background: var(--surface); border-block: 1px solid var(--rule); } .btn-block { width: 100%; justify-content: center; } /* The language link is an anchor, not a button: it navigates to ?lang=, so it should look and behave like a link that reloads the page. */ a.lang { text-decoration: none; display: inline-flex; align-items: center; } /* Validation. Errors are hidden by the `hidden` attribute and revealed by script, so nothing is announced before the visitor has done anything wrong. */ .err { margin: 0; font-size: .8rem; color: #B42318; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .err { color: #FF9A8D; } } :root[data-theme="dark"] .err { color: #FF9A8D; } .field input.invalid, .field textarea.invalid { border-color: #B42318; } .field-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin: 4px 0 2px; } .opts-fieldset { border: none; padding: 0; margin: 0; min-width: 0; } .opts-fieldset .field-label { display: block; } /* One toast, bottom of the viewport, for the contact form's result. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .toast { position: fixed; inset-inline: 16px; bottom: 16px; margin-inline: auto; max-width: 26rem; z-index: 90; background: var(--deep); color: #F3EFE9; padding: 13px 16px; border-radius: 4px; font-size: .92rem; box-shadow: 0 12px 34px rgb(0 0 0 / .28); } .toast-error { background: #7A1B12; }