:root { --ink: #221c16; --muted: #6b6157; --line: #e4dbd0; --paper: #fdfaf6; --card: #ffffff; --brand: #b4291f; --brand-dark: #8d1f17; --good: #177a3e; } * { box-sizing: border-box; } /* A screenshot wider than the column would otherwise push the whole page sideways on a phone. height:auto keeps the proportions when width/height attributes are given. */ img { max-width: 100%; height: auto; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; } a { color: var(--brand-dark); } header { border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 5; } header .wrap { display: flex; align-items: center; gap: 18px; height: 66px; } .logo { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } .logo span { color: var(--brand); } /* The logo is a link home - on a phone, with the header no longer sticky, it is the way back to the top - and must not look like body-text link. */ a.logo { color: var(--ink); text-decoration: none; } nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; } nav a { color: var(--muted); text-decoration: none; font-size: 15px; } nav a:hover { color: var(--ink); } /* Text on the left, the till itself on the right. The screenshot is the same screen in whichever language the page is written in, so a shopkeeper sees their own words before they read a line of ours. */ .hero { /* Top and bottom only: the shorthand used to reset the side padding this element inherits from .wrap, which nobody saw while the page was wide enough to centre itself with margins to spare - and put the headline against the glass on a phone. */ padding-top: 68px; padding-bottom: 54px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 34px; align-items: center; } .hero-shot { margin: 0; } .hero-shot img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(34, 28, 22, .13); } .hero h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 16px; letter-spacing: -0.025em; } .hero p.lead { font-size: 19px; color: var(--muted); max-width: 62ch; margin: 0 0 28px; } .badge { display: inline-block; background: #fdeeec; color: var(--brand-dark); border: 1px solid #f3cfca; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; margin-bottom: 20px; } .btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; padding: 13px 24px; border-radius: 8px; font-weight: 600; margin: 0 10px 10px 0; } .btn:hover { background: var(--brand-dark); } .btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); } section { padding: 52px 0; border-top: 1px solid var(--line); } /* Without this the sticky header covers the heading the reader just asked for. */ section[id] { scroll-margin-top: 78px; } h2 { font-size: 28px; margin: 0 0 10px; letter-spacing: -0.02em; } h2 + p.sub { color: var(--muted); margin: 0 0 30px; max-width: 65ch; } .grid { display: grid; gap: 20px; /* min() so a 320px phone gets one column instead of a page that scrolls sideways: minmax(255px, 1fr) alone insists on 255px it does not have. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .card h3 { margin: 0 0 8px; font-size: 17px; } .card p { margin: 0; color: var(--muted); font-size: 15px; } table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); } th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } td.price { font-weight: 700; white-space: nowrap; } /* A promoted price shows what it was above what it is, stacked rather than side by side so the column stays narrow enough for a phone. */ td.price .was { display: block; text-decoration: line-through; color: var(--muted); font-weight: 400; font-size: 12.5px; } td.price .now { color: var(--brand); } .promo { background: #fdeeec; border: 1px solid #f3cfca; border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; color: var(--brand-dark); font-size: 15px; } section h3 { font-size: 19px; margin: 34px 0 12px; } .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Below this width the cells wrap word by word - "up to 3" over two lines - which is harder to read than swiping the table sideways. */ .scroll table { min-width: 430px; } .scroll td, .scroll th { white-space: nowrap; } .dl { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .dl .card { display: flex; flex-direction: column; } .dl .meta { color: var(--muted); font-size: 14px; margin: 10px 0 16px; } .hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); word-break: break-all; background: #f6f1ea; border-radius: 6px; padding: 8px 10px; margin-top: auto; } .note { background: #fffaf0; border: 1px solid #f0e2c4; border-radius: 10px; padding: 16px 18px; font-size: 15px; color: #6a5726; } ol.steps { padding-left: 20px; color: var(--muted); } ol.steps li { margin-bottom: 10px; } /* The note box is padded and bordered, so inside a step it has to be its own block: as an inline span its padding drew over the line above rather than moving it. */ ol.steps .note { display: block; margin: 8px 0 0; padding: 10px 12px; font-size: 14px; } ol.steps code, .card code { background: #f6f1ea; padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--ink); /* A download URL is one long word: without this it runs out past the card it sits in, which on a narrow screen is a line of text disappearing off the page. */ word-break: break-all; overflow-wrap: anywhere; display: inline-block; max-width: 100%; } footer { border-top: 1px solid var(--line); padding: 34px 0 48px; color: var(--muted); font-size: 14px; } footer a { color: var(--muted); } /* One column before the two get too narrow to read: the screenshot follows the words rather than fighting them for space. And at the same width the navigation moves under the logo: six links, four languages and the logo need more room than a tablet has, and wrapped inside a 66px header they spilled out of the bottom of it. The header also stops being sticky here, because two rows of chrome permanently occupying a fifth of a small screen cost more than they give. */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 28px; } header { position: static; } header .wrap { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 11px; padding-bottom: 11px; } section[id] { scroll-margin-top: 12px; } nav { order: 3; width: 100%; margin-left: 0; gap: 7px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } nav::-webkit-scrollbar { display: none; } nav a { white-space: nowrap; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; } } /* Phones. The navigation used to be hidden outright below 640px, which left a customer holding a phone - most of the traffic this site will get - with no way to reach Pricing or Download except by scrolling the whole page and hoping. It now sits under the logo as a strip that scrolls sideways, and the header stops being sticky, because two rows of chrome permanently occupying a fifth of a small screen cost more than they give. */ @media (max-width: 640px) { .wrap { padding: 0 16px; } section { padding: 40px 0; } .hero { padding-top: 34px; padding-bottom: 30px; } /* 33px ran into the right edge at 320px on "Retail and hospitality." */ .hero h1 { font-size: clamp(26px, 8vw, 33px); } .hero p.lead { font-size: 17px; } .btn { padding: 14px 22px; } h2 { font-size: 24px; } /* The browser default indent costs a tenth of a 320px screen. */ ul, ol.steps { padding-left: 20px; } /* Tighter, so the four columns fit a phone outright: at the desktop size the price column - the one nobody should have to swipe for - fell off the right edge. The rows still refuse to wrap, so where a language needs more width than the screen has, the table scrolls instead of stacking "up to 3" over two lines. */ .scroll table { min-width: 0; font-size: 13.5px; } th, td { padding: 9px 6px; } th { font-size: 11.5px; } /* The plan name may wrap - "Caisse supplémentaire" is two words and no worse for it - while the numbers beside it may not, which is what keeps the price on screen in every language rather than only in English. */ .scroll th:first-child, .scroll td:first-child { white-space: normal; } } /* Language switcher. It sits outside