/* * printService — design system. * * The customer this is built for is standing at a counter in a small town, on * a mid-range Android phone, over metered mobile data. Two consequences run * through everything below: * * No web font. A downloaded typeface costs the customer money and delays the * first paint on exactly the connection this product runs on. The system * stack renders instantly and is what their phone already reads all day. * * Touch targets before density. Nothing interactive is under 44px tall. * * Shops tint this system through --accent, set per shop on the page root. They * never supply CSS, so no shop can break the layout — and --accent-ink is * computed server-side from the accent's luminance, so a pale accent gets dark * text rather than an unreadable button. */ :root { /* Neutrals carry a slight cool cast, so they sit with the accent rather than looking like undecided grey. */ --paper: #F5F7F9; --surface: #FFFFFF; --sunken: #EDF1F4; --ink: #10151C; --ink-soft: #55636F; --ink-faint: #8593A0; --line: #DFE5EA; --line-strong: #C3CDD5; /* A shop overrides these two, inline on . */ --accent: #1D4ED8; --accent-ink: #FFFFFF; /* Semantic, and deliberately not the accent — a shop's brand colour must never be what tells someone their print failed. */ --ok: #15803D; --ok-wash: #EAF6EE; --warn: #92400E; --warn-wash: #FDF4E3; --crit: #B3261E; --crit-wash: #FDECEC; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --shadow-1: 0 1px 2px rgba(16, 21, 28, .05); --shadow-2: 0 6px 24px -8px rgba(16, 21, 28, .18); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tap: 44px; } * { box-sizing: border-box; } /* A class that sets `display` outranks the browser's own [hidden] rule, which is how a "hidden" dialog ends up on screen. Settle it once, here. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } /* Derived from --accent, and declared on `body` rather than `:root` on purpose: a custom property is substituted where it is declared, so a wash defined on :root would resolve against the *default* accent and stay blue however the shop overrides --accent inline on . Declared here, it resolves against whatever body actually carries. */ body { --accent-wash: color-mix(in srgb, var(--accent) 10%, var(--surface)); --accent-edge: color-mix(in srgb, var(--accent) 42%, var(--line)); margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } main { max-width: 780px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); } main.wide { max-width: 1060px; } h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: 27px; font-weight: 700; } h2 { font-size: 19px; font-weight: 650; } h3 { font-size: 16px; font-weight: 650; } p { margin: 0 0 var(--s-3); } a { color: var(--accent); } .muted { color: var(--ink-soft); } .small { font-size: 13px; } .num { font-variant-numeric: tabular-nums; } :where(a, button, input, select, textarea, label.tile):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ── Header ─────────────────────────────────────────────────────────────── */ .site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line); } .brand { font-weight: 700; font-size: 16px; text-decoration: none; color: var(--ink); } .site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); } .site-header nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; } .site-header nav a:hover { color: var(--ink); } /* `.site-header nav a` is more specific than `.btn`, so it was overriding the button's own text colour — leaving "Start free trial" in muted grey-blue on a blue fill, effectively unreadable. */ .site-header nav a.btn { color: var(--accent-ink); } /* Which section you are in. An underline rather than a filled pill: the header sits above pages a shop tints, and a filled marker would take the accent. */ .site-header nav a.is-current { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-5); border: 1px solid transparent; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); } .btn:disabled { background: var(--sunken); color: var(--ink-faint); cursor: default; filter: none; transform: none; border-color: var(--line); } .btn-block { width: 100%; } .btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn-danger { background: var(--crit); color: #fff; } .btn-small { min-height: 34px; padding: 0 var(--s-3); font-size: 13px; border-radius: var(--r-sm); } .btn-link { background: none; border: 0; padding: 0; color: var(--ink-soft); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } .btn-link:hover { color: var(--crit); } /* ── Surfaces ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); margin-bottom: var(--s-4); box-shadow: var(--shadow-1); } .card > h2 { margin-bottom: var(--s-3); } .section-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s-2); } /* ── Forms ──────────────────────────────────────────────────────────────── */ .form { max-width: 420px; } .form label { display: block; margin-bottom: var(--s-4); font-weight: 600; font-size: 14px; } .form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="number"], .form input[type="tel"], .form select { display: block; width: 100%; margin-top: var(--s-1); min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; background: var(--surface); color: var(--ink); } .form label.checkbox, .form label.radio { font-weight: 400; display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-2); line-height: 1.4; } /* A radio or checkbox is a small target inside a big label; keep it aligned with the first line of text rather than centred against a wrapped one. */ .form label.checkbox input, .form label.radio input { margin-top: 3px; flex: none; } /* Section headings inside a form card need air above them; `.card > h2` only sets space below, which is right for a heading that opens a card. */ .form h2 { margin-top: var(--s-5); margin-bottom: var(--s-3); } .form fieldset { margin-bottom: var(--s-5); } .form fieldset .muted { margin: var(--s-2) 0 0; } .form > .btn { margin-top: var(--s-2); } fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); margin: 0 0 var(--s-4); } legend { font-weight: 650; font-size: 14px; padding: 0 var(--s-2); } .inline-form { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); } /* ── Theme picker ───────────────────────────────────────────────────────── */ /* * Shops pick a colour from a palette rather than typing one, because every * swatch here has been checked against the text `Shop.ink_for` puts on it. The * free field is still there for a shop with its own brand colour — the server * validates that one the same way before it reaches a stylesheet. */ .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 0 0 var(--s-4); } .swatch { position: relative; display: block; cursor: pointer; } /* Visually hidden, not display:none — the radio still has to be focusable and reachable by keyboard and screen reader. */ .swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .swatch-chip { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: var(--r-sm); background: var(--sw); color: var(--sw-ink); font-weight: 700; font-size: 14px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(16, 21, 28, .08); transition: transform .12s ease; } .swatch-name { display: block; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); margin-top: 3px; } .swatch:hover .swatch-chip { transform: translateY(-1px); } /* The ring is the neutral ink, not the swatch's own colour — a border in the same hue as the fill is invisible, which is exactly the state that has to be obvious. */ .swatch input:checked + .swatch-chip { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset, var(--shadow-1); } .swatch input:checked ~ .swatch-name { color: var(--ink); font-weight: 650; } .swatch input:focus-visible + .swatch-chip { outline: 2px solid var(--ink); outline-offset: 2px; } /* ── Theme preview ──────────────────────────────────────────────────────── */ /* The customer's page in miniature. A row of paint chips does not tell an owner what their shop will look like; this does. */ .theme-preview { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); padding: var(--s-4); margin: 0 0 var(--s-5); } .theme-preview .tp-tile, .theme-preview .tp-btn { background-color: var(--surface); } .theme-preview .tp-btn { background-color: var(--accent); } .tp-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); } .tp-head b { display: block; font-size: 15px; } .tp-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-md); flex: none; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .tp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-4); } .tp-tile { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } .tp-tile b { color: var(--ink); font-size: 14px; } .tp-tile.is-on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .tp-tile.is-on b { color: var(--accent); } .tp-btn { display: flex; align-items: center; justify-content: center; min-height: var(--tap); border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-weight: 600; } /* ── Notices ────────────────────────────────────────────────────────────── */ .notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin: 0 0 var(--s-4); font-size: 14.5px; } .notice-bad { background: var(--crit-wash); color: var(--crit); } .notice-warn { background: var(--warn-wash); color: var(--warn); } .notice-ok { background: var(--ok-wash); color: var(--ok); } .field-error { color: var(--crit); font-size: 13px; margin: var(--s-2) 0 0; } .flashes { list-style: none; padding: 0; margin: 0 0 var(--s-4); } .flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-2); } .flash-error { background: var(--crit-wash); color: var(--crit); } .flash-success { background: var(--ok-wash); color: var(--ok); } .flash-warning { background: var(--warn-wash); color: var(--warn); } /* ── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--sunken); color: var(--ink-soft); white-space: nowrap; } .badge-printed { background: var(--ok-wash); color: var(--ok); } .badge-failed, .badge-cancelled { background: var(--crit-wash); color: var(--crit); } .badge-partly_printed, .badge-pending_confirmation { background: var(--warn-wash); color: var(--warn); } .badge-queued, .badge-printing { background: var(--accent-wash); color: var(--accent); } /* ── Shop header (customer-facing) ──────────────────────────────────────── */ .shop-head { margin-bottom: var(--s-5); } .shop-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; flex: none; } .shop-id { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); } .shop-tagline { color: var(--ink-soft); font-size: 14.5px; margin: 0; } .shop-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: 13px; color: var(--ink-soft); margin-top: var(--s-2); } .shop-facts .dot { color: var(--line-strong); } .live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; } .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .live.off { color: var(--ink-faint); } .live.off::before { background: var(--ink-faint); } /* ── Order status (customer-facing) ─────────────────────────── */ .order-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-4); } /* Where the customer goes next. An order that is over leaves them on a page with nothing to do, so the way back to the shop is a real button by then. */ .status-next { margin-top: var(--s-5); display: grid; gap: var(--s-3); justify-items: start; } .status-next .btn { justify-self: stretch; } .status-next p { margin: 0; } /* ── How it works ────────────────────────────────────── */ /* * A customer who has just scanned a QR code has never seen this page. The * panel teaches the four steps before they touch anything. * * The drawing is inline SVG driven by CSS keyframes — no image, no video, no * library, nothing extra fetched over metered mobile data. It is an aid to the * text, never a replacement for it: the global prefers-reduced-motion rule at * the foot of this file stops every animation here, and the four steps still * read perfectly as a numbered list. * * One cycle is 10.4s, four scenes of 2.6s. The scenes are offset by negative * delays on a single shared keyframe rather than four separate ones, so the * timing cannot drift apart when one of them is edited. */ .how { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin-bottom: var(--s-4); padding: 0 var(--s-4); } .how > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) 0; cursor: pointer; list-style: none; user-select: none; } .how > summary::-webkit-details-marker { display: none; } .how-title { font-weight: 650; } .how-hint { margin-left: auto; } /* The chevron is the only thing that says this panel closes. */ .how > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: var(--s-2); border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .how[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .how-body { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line); } .how-film { width: 96px; height: auto; flex: none; } .how-phone { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.5; } .how-screen { fill: var(--surface); } .how-notch { fill: var(--line-strong); } .how-drop { fill: var(--accent-wash); stroke: var(--accent-edge); stroke-width: 1.5; stroke-dasharray: 5 4; } .how-doc { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; } .how-fold { fill: var(--line-strong); } .how-rule { fill: var(--line-strong); } .how-label { fill: var(--sunken); } .how-tile { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; } .how-tile.is-on { fill: var(--accent-wash); stroke: var(--accent); } .how-total { fill: var(--accent); } .how-money { fill: var(--accent-ink); font: 650 11px var(--font); font-variant-numeric: tabular-nums; } .how-qr-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; } .how-qr rect { fill: var(--ink); } .how-sheet { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; } .how-printer { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.5; } .how-slot { fill: var(--ink-faint); } .how-led { fill: var(--ok); } /* Four scenes on one timeline. Each is opaque for its own quarter. */ @keyframes how-scene { 0%, 21% { opacity: 1; } 25%, 96% { opacity: 0; } 100% { opacity: 1; } } .how-scene { opacity: 0; animation: how-scene 10.4s linear infinite; } .how-scene-1 { animation-delay: 0s; } .how-scene-2 { animation-delay: -7.8s; } .how-scene-3 { animation-delay: -5.2s; } .how-scene-4 { animation-delay: -2.6s; } /* The document the customer picks, falling into the dropzone. */ @keyframes how-drop { 0% { transform: translateY(-26px); } 11%, 100% { transform: translateY(0); } } .how-doc-drop { animation: how-drop 10.4s ease-out infinite; } /* The printed page coming out of the shop's machine. It starts behind the printer body, which is drawn after it, so the slot hides where it begins. */ @keyframes how-emerge { 0%, 3% { transform: translateY(36px); } 20%, 100% { transform: translateY(0); } } .how-sheet-out { animation: how-emerge 10.4s ease-out infinite; animation-delay: -2.6s; } @keyframes how-blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .25; } } .how-led { animation: how-blink 1.3s steps(1, end) infinite; } /* The step being drawn is the step being read. */ @keyframes how-step { 0%, 21% { background: var(--accent-wash); } 25%, 96% { background: transparent; } 100% { background: var(--accent-wash); } } .how-steps { margin: 0; padding: 0 0 0 var(--s-4); display: grid; gap: 2px; font-size: 13px; line-height: 1.4; } .how-steps li { padding: 5px var(--s-2); border-radius: var(--r-sm); animation: how-step 10.4s linear infinite; } .how-steps li::marker { color: var(--ink-faint); font-size: 12px; } .how-steps li b { display: block; font-size: 14px; font-weight: 650; } /* Qualified with .how-steps on purpose: the `animation` shorthand above sets animation-delay too, and at (0,1,1) it outranks a bare .how-step-2 — which left every step at time zero and highlighted all four at once. */ .how-steps .how-step-1 { animation-delay: 0s; } .how-steps .how-step-2 { animation-delay: -7.8s; } .how-steps .how-step-3 { animation-delay: -5.2s; } .how-steps .how-step-4 { animation-delay: -2.6s; } /* ── Dropzone ───────────────────────────────────────────────────────────── */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-height: 128px; padding: var(--s-5) var(--s-4); text-align: center; cursor: pointer; border: 2px dashed var(--line-strong); border-radius: var(--r-md); background: var(--sunken); } .dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-wash); } .dropzone-main { font-weight: 650; } .dropzone-sub { color: var(--ink-soft); font-size: 13px; } /* ── File cards ─────────────────────────────────────────────────────────── */ .file-list { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); } .file-row { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .file-row.is-pending { opacity: .6; } .file-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; } .file-name { font-weight: 650; word-break: break-word; flex: 1 1 auto; min-width: 0; font-size: 15px; } .file-sum { color: var(--ink-soft); font-size: 12.5px; display: block; font-weight: 400; margin-top: 1px; } .file-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .file-body { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-4); } /* Option tiles carry their own rate, so the price of a choice is visible at the moment of choosing rather than in a table further up the page. */ .tiles { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); } .tiles.three { grid-template-columns: repeat(3, 1fr); } .tile { position: relative; display: block; } .tile input { position: absolute; opacity: 0; width: 0; height: 0; } .tile > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tap); padding: var(--s-2) var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; text-align: center; } .tile b { font-size: 13.5px; font-weight: 650; } .tile em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* What the choice feels like in the hand. Both double-sided modes cost the same, so the hint is what the customer is actually choosing between. */ .tile i { font-style: normal; font-size: 10.5px; line-height: 1.25; color: var(--ink-faint); text-wrap: balance; } .tile input:checked + span i { color: var(--ink-soft); } .tile input:checked + span { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); } .tile input:checked + span em { color: var(--accent); } .tile input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .opt-line { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .opt-line > * { flex: 0 0 auto; } .opt-field { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--ink-soft); } .opt-field input, .opt-field select { min-height: 38px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); } .opt-field input[type="number"] { width: 64px; text-align: center; } .opt-field .range { width: 120px; } .opt-grow { flex: 1 1 auto; } /* ── Total ──────────────────────────────────────────────────────────────── */ .total-card { position: sticky; bottom: var(--s-3); box-shadow: var(--shadow-2); } .total-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .total-label { color: var(--ink-soft); font-size: 14px; } .total-value { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; } .pay-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: var(--s-2) 0 0; } .is-busy { cursor: progress; } .is-busy .file-body, .is-busy .dropzone { opacity: .5; pointer-events: none; } /* ── Payment sheet ──────────────────────────────────────────────────────── */ .pay-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(16, 21, 28, .55); display: flex; align-items: flex-end; justify-content: center; } .pay-panel { background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s-5) var(--s-4) var(--s-6); width: 100%; max-width: 440px; text-align: center; max-height: 92vh; overflow-y: auto; } .pay-panel h2 { margin-bottom: var(--s-4); font-size: 21px; } .upi-qr { width: 216px; height: 216px; display: block; margin: 0 auto var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: var(--s-2); } .upi-vpa { font-size: 14px; margin-bottom: var(--s-4); } .upi-vpa code { background: var(--sunken); padding: 2px 8px; border-radius: 5px; font-size: 13px; } .upi-help { font-size: 13px; color: var(--ink-soft); margin: var(--s-3) 0 var(--s-4); } .pay-panel .btn { margin-bottom: var(--s-2); } /* ── Tables (dashboard, admin) ──────────────────────────────────────────── */ .t-wrap { overflow-x: auto; margin-bottom: var(--s-4); } table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 14.5px; } th, td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .rates { max-width: 460px; border: 1px solid var(--line); border-radius: var(--r-md); } .file-line { font-size: 13.5px; margin-bottom: 2px; } /* ── Stats (dashboard, admin) ───────────────────────────────────────────── */ .stat-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); } .stat { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); } .stat-value { display: block; font-size: 23px; font-weight: 700; line-height: 1.15; } .stat-value.ok { color: var(--ok); } .stat-value.bad { color: var(--crit); } .stat-label { color: var(--ink-soft); font-size: 12.5px; } .status { font-weight: 600; } .status-printed { color: var(--ok); } .status-failed, .status-past_due, .status-cancelled { color: var(--crit); } .status-partly_printed, .status-pending_confirmation { color: var(--warn); } .ok { color: var(--ok); } .bad { color: var(--crit); } /* ── Marketing ──────────────────────────────────────── */ /* * The landing page reads to a shop owner, not to a customer mid-order, so it * gets more room and more contrast than the app does. It still spends the same * tokens: no second palette, no web font, no stock photography. What makes it * feel different is scale and full-width bands, which cost nothing to load. */ :root { --ground: #0C1220; /* the dark bands */ --ground-ink: #EEF2F7; --ground-soft: #9FB0C4; --ground-line: #24304A; } /* The app sits in a reading column; the landing page breaks out of it. */ main.bleed { max-width: none; padding: 0; } .band { padding: var(--s-7) var(--s-4); } .band-inner { max-width: 1080px; margin: 0 auto; } .band-quiet { background: var(--sunken); } .band-dark { background: var(--ground); color: var(--ground-ink); } .band-dark h2 { color: var(--ground-ink); } .band-dark a:not(.btn) { color: #9FC0FF; } .eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: var(--s-2); } .eyebrow-on-dark { color: #7FA8FF; } .lede-on-dark { color: var(--ground-soft); font-size: 16.5px; max-width: 52ch; } .band-title { font-size: 27px; margin-bottom: var(--s-2); } .band-sub { color: var(--ink-soft); font-size: 16px; max-width: 56ch; margin-bottom: var(--s-5); } .band-foot { margin: var(--s-5) 0 0; font-size: 13px; } .btn-lg { min-height: 52px; padding: 0 var(--s-5); font-size: 16px; border-radius: var(--r-md); } /* Hero */ .band-hero { padding-top: var(--s-6); } .hero-grid { display: grid; gap: var(--s-6); align-items: center; } .hero-title { font-size: clamp(30px, 7.5vw, 50px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: var(--s-4); } .hero-lede { font-size: 17.5px; color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--s-5); } .hero-lede strong { color: var(--ink); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); } .hero-cta .btn { flex: 1 1 auto; } .hero-micro { margin: var(--s-3) 0 0; font-size: 13px; color: var(--ink-faint); } .hero-figure { margin: 0; } .hero-figure svg { width: 100%; height: auto; color: var(--ink-faint); } /* The hero diagram gets its own palette hooks, so the drawing stays legible without borrowing colours that mean something else in the app. */ .d-frame { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.5; } .d-screen { fill: var(--surface); } .d-mark { fill: var(--accent); } .d-line { fill: var(--line-strong); } .d-faint { fill: var(--line); } .d-row { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; } .d-cta { fill: var(--accent); } .d-queue { fill: var(--accent); } .d-sheet { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; } .d-printer { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.5; } .d-slot { fill: var(--ink-faint); } .d-led { fill: var(--ok); } .d-arrow { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; } .d-money { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 4 3; } .d-ok-fill { fill: var(--ok); } .d-hair { fill: var(--line); } .d-doc { fill: var(--line-strong); } /* The pay button is green, not the accent: it is the first step of the money path, and the eye should follow it to the bank card at the other end. */ .d-pay { fill: var(--ok); } .d-ui { fill: #fff; font: 650 7.5px var(--font); } .d-printer-top { fill: var(--line-strong); } .d-panel { fill: var(--ink-faint); opacity: .5; } .d-tray { fill: var(--sunken); stroke: var(--line-strong); stroke-width: 1.5; } .d-card { fill: var(--surface); stroke: var(--ok); stroke-width: 1.5; } .d-rupee-bg { fill: var(--ok-wash); } .d-rupee { fill: var(--ok); font: 700 11px var(--font); } .d-card-line { fill: var(--line-strong); } .d-card-faint { fill: var(--line); } .d-cap { fill: var(--ink-soft); font: 600 9px var(--font); } .d-edge { fill: var(--ink-soft); font: 500 8.5px var(--font); } .d-faint-t { fill: var(--ink-faint); } .d-ok-t { fill: var(--ok); font-weight: 600; } /* The hero flow, on one 7s timeline. * * The order and the payment leave the customer together and never meet again: * the grey packet goes through the shop's PC to the printer, the green line * goes straight to the bank. That separation is the page's whole argument, so * the diagram performs it rather than asserting it. * * Everything that moves rests where the still diagram had it. The packet, the * tap ripple, the drawn payment line and the card flash are all invisible at * rest; the printed sheet rests in its finished position. app.css stops every * animation under prefers-reduced-motion, and what remains is the static * picture exactly as it was. */ .hero-figure svg { --flow: 7s; } /* The customer taps Pay. */ @keyframes hf-tap { 0% { opacity: .55; transform: scale(.35); } 9% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } } .hf-tap { fill: none; stroke: var(--ok); stroke-width: 2; opacity: 0; transform-origin: 48px 128px; animation: hf-tap var(--flow) ease-out infinite; } /* The order crosses the internet to the PC on the counter. */ @keyframes hf-packet { 0%, 5% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } /* Fades over the last stretch rather than stopping dead on the arrowhead, which read as a blob sitting on the tip. */ 19% { opacity: 1; } 24%, 100% { opacity: 0; transform: translateX(68px); } } .hf-packet { fill: var(--accent); opacity: 0; animation: hf-packet var(--flow) cubic-bezier(.4, 0, .3, 1) infinite; } /* It lands in the queue. */ @keyframes hf-job { 0%, 25% { fill: var(--surface); stroke: var(--line); } 30%, 52% { fill: var(--accent-wash); stroke: var(--accent); } 60%, 100% { fill: var(--surface); stroke: var(--line); } } .hf-job { animation: hf-job var(--flow) linear infinite; } @keyframes hf-job-line { 0%, 25% { fill: var(--line); } 30%, 52% { fill: var(--accent); } 60%, 100% { fill: var(--line); } } .hf-job-line { animation: hf-job-line var(--flow) linear infinite; } /* The page comes out of the shop's own printer. */ @keyframes hf-sheet { 0%, 46% { transform: translateY(38px); } 62%, 100% { transform: translateY(0); } } .hf-sheet { animation: hf-sheet var(--flow) cubic-bezier(.25, .9, .3, 1) infinite; } @keyframes hf-led { 0%, 44% { opacity: .3; } 48%, 50% { opacity: 1; } 54%, 56% { opacity: .3; } 60% { opacity: 1; } 70%, 100% { opacity: 1; } } .hf-led { animation: hf-led var(--flow) steps(1, end) infinite; } /* The money, meanwhile, goes nowhere near any of that. `pathLength="100"` in the markup normalises the curve, so this dash maths is independent of its real length. */ @keyframes hf-money { 0%, 10% { stroke-dashoffset: 100; opacity: 1; } 40% { stroke-dashoffset: 0; opacity: 1; } 74% { stroke-dashoffset: 0; opacity: 1; } 82%, 100% { stroke-dashoffset: 0; opacity: 0; } } .hf-money-draw { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: hf-money var(--flow) ease-in-out infinite; } /* It arrives. */ @keyframes hf-card { 0%, 38% { opacity: 0; } 44% { opacity: .5; } 58%, 100% { opacity: 0; } } .hf-card-flash { fill: var(--ok-wash); opacity: 0; animation: hf-card var(--flow) ease-out infinite; } /* Assurances */ .assurances { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); } .assurances li { display: grid; gap: 2px; padding-left: var(--s-5); position: relative; } .assurances li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 8px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); } .assurances b { font-size: 15px; } .assurances span { color: var(--ink-soft); font-size: 14px; } /* The money band */ .money-band { display: grid; gap: var(--s-6); align-items: center; } .money-band h2 { font-size: clamp(24px, 5vw, 34px); letter-spacing: -0.02em; margin-bottom: var(--s-4); line-height: 1.15; } .money-contrast { display: grid; gap: var(--s-3); } .money-row { padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--ground-line); display: grid; gap: 4px; } .money-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ground-soft); } .money-flow { font-size: 18px; font-weight: 650; } .money-row-bad .money-flow { color: #F2A5A0; } .money-row-bad s { opacity: .8; } .money-row-good { border-color: var(--ok); background: rgba(21, 128, 61, .16); } .money-row-good .money-flow { color: #7BE0A0; } .money-note { color: var(--ground-soft); font-size: 13.5px; margin: var(--s-1) 0 0; } /* Steps */ .steps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); } /* `align-content: start` matters here: the cards stretch to the tallest one in the row, and without it the grid rows stretch too — so a short card's title drifted down the card and nothing lined up across the four. */ .steps-grid li { display: grid; align-content: start; gap: 3px; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; margin-bottom: var(--s-1); } .steps-grid b { font-size: 15.5px; } .steps-grid .muted { font-size: 14px; } /* Features */ .feature-grid { display: grid; gap: var(--s-4); } .feature-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); } .feature-grid b { display: block; font-size: 15.5px; margin-bottom: var(--s-1); } .feature-grid p { margin: 0; font-size: 14px; } /* Requirements */ .need-band { display: grid; gap: var(--s-5); } .need-list { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-3); color: var(--ink-soft); font-size: 15px; } .need-list b { color: var(--ink); } /* Plans */ .plan-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); position: relative; display: grid; align-content: start; gap: var(--s-2); } .plan-card-lead { border-color: var(--accent); box-shadow: var(--shadow-2); } .plan-flag { position: absolute; top: -11px; left: var(--s-5); background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px; } .price { font-size: 34px; font-weight: 750; margin: 0; letter-spacing: -0.02em; } .price span { font-size: 14px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; } .plan-limit { margin: 0; color: var(--ink-soft); font-size: 14px; } .plan-points { list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); font-size: 14px; color: var(--ink-soft); } .plan-points li { padding-left: var(--s-4); position: relative; } .plan-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); } /* FAQ */ .faq { display: grid; gap: var(--s-2); max-width: 720px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s-4); } .faq summary { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; cursor: pointer; font-weight: 650; font-size: 15px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq details p { margin: 0 0 var(--s-4); color: var(--ink-soft); font-size: 14.5px; max-width: 60ch; } /* Close */ .band-close { text-align: center; } .band-close h2 { font-size: clamp(24px, 5.5vw, 36px); letter-spacing: -0.02em; margin-bottom: var(--s-3); } .band-close .lede-on-dark { margin: 0 auto var(--s-5); } .close-contact { margin: var(--s-5) 0 0; color: var(--ground-soft); font-size: 14px; } code { background: var(--sunken); padding: 2px 6px; border-radius: 5px; font-size: 13px; } .site-footer { border-top: 1px solid var(--line); padding: var(--s-5); text-align: center; color: var(--ink-faint); font-size: 13px; } .todo { color: var(--ink-faint); font-style: italic; } @media (min-width: 640px) { .how-body { grid-template-columns: 120px 1fr; gap: var(--s-5); } .how-film { width: 120px; } .how-steps { font-size: 13.5px; } .band { padding: var(--s-7) var(--s-5); } .assurances { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .steps-grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .hero-cta .btn { flex: 0 0 auto; } .pay-sheet { align-items: center; } .pay-panel { border-radius: var(--r-lg); } .total-card { position: static; box-shadow: var(--shadow-1); } h1 { font-size: 31px; } } @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-7); } .money-band { grid-template-columns: 1.1fr .9fr; gap: var(--s-7); } .need-band { grid-template-columns: .9fr 1.1fr; gap: var(--s-7); } .steps-grid { grid-template-columns: repeat(4, 1fr); } .feature-grid { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .btn:active { transform: none; } /* The scenes are stacked and hidden by default, revealed in turn by the animation. Kill the animation and every one of them stays at opacity 0 — an empty phone. Show the first scene instead: the four steps beside it were always the thing carrying the meaning. */ .how-scene-1 { opacity: 1; } .how-doc-drop, .how-sheet-out { transform: none; } /* The hero's moving parts are decorative and rest invisible, except the printed sheet, which rests where the animation would have left it. */ .hf-sheet { transform: none; } .hf-led { opacity: 1; } }