/* * PayNote — the product site of an offline expense tracker built on VietQR. * * The app's own design decides this file: * * - ONE action colour. #FA5600 is Z-SOFT's orange and the app's only button * colour. Everything a visitor can press is that orange; nothing that is not * pressable borrows it. * - Green and red mean money, never decoration. In the app, seeing red always * means money going out and green always means money coming in. A red border * for "danger" or a green tick for "included" would break that, so the tick * in the plan list is INK, not green, and only amounts carry the two colours. * - Amounts are set in tabular figures, so a column of them lines up on the * decimal the way it does in the app's ledger. * * Light is the base: the app opens on #FAFAFA with an orange button, and a * product page that opened dark would be introducing a different product. The * app has a dark mode and so does this, and a visitor's own choice wins over * both. */ /* ------------------------------------------------------------------------- * Colour modes — three blocks, and the order is the mechanism. * * The runtime sets `data-theme` on from an inline script in , before * first paint. It does NOT set it on the server: the preference lives in the * visitor's browser and the server has never seen it. So the theme is asked what * to do when the attribute is ABSENT, and the answer has to be "obey the OS". * * 1. `:root` — LIGHT, the base. Applies when nothing else does. * 2. `prefers-color-scheme: dark` — the OS speaking, honoured only while the * visitor has not explicitly chosen light. * 3. `[data-theme="dark"]` — an explicit choice, which beats the OS. * * The dark tokens are written twice, in 2 and 3. Plain CSS cannot name a block of * declarations and apply it under two conditions, so keep the two lists * identical — build.mjs refuses to build when they drift. * ---------------------------------------------------------------------- */ :root { --pn-accent: #fa5600; --pn-accent-2: #ff8a33; --pn-on-accent: #ffffff; --pn-radius: 16px; --pn-radius-sm: 12px; --pn-radius-lg: 24px; --pn-pill: 999px; --pn-header-h: 62px; --pn-band: clamp(48px, 5.2vw, 84px); --pn-band-sm: clamp(28px, 3vw, 44px); --pn-head-gap: clamp(24px, 2.8vw, 36px); --pn-doc-gap: 38px; --pn-bg: #fafafa; --pn-surface: #ffffff; --pn-panel: #ffffff; --pn-panel-2: #f4f5f5; --pn-tint: #f2f2f3; --pn-line: #e5e6e8; --pn-ink: #111111; --pn-muted: #6b7280; --pn-shadow: 0 20px 48px rgba(17, 17, 17, 0.12); --pn-shadow-sm: 0 6px 18px rgba(17, 17, 17, 0.08); --pn-in: #0f8f42; --pn-out: #da2c27; --pn-pending: #d9a62e; --pn-accent-text: #b83f00; --pn-grid: rgba(17, 17, 17, 0.05); --pn-view: #1c1d20; --pn-view-ink: #f4f5f5; } /* ---- DARK, from the OS, while no explicit light choice is in force ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pn-bg: #121212; --pn-surface: #1a1a1a; --pn-panel: #1e1e1e; --pn-panel-2: #2a2a2a; --pn-tint: #171717; --pn-line: #2f2f2f; --pn-ink: #f4f4f5; --pn-muted: #a1a1aa; --pn-shadow: 0 28px 72px rgba(0, 0, 0, 0.6); --pn-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --pn-in: #56c97f; --pn-out: #ff7b75; --pn-pending: #e8bf5c; --pn-accent: #ff6a1a; --pn-on-accent: #180a02; --pn-accent-text: #ff9354; --pn-grid: rgba(220, 220, 230, 0.05); --pn-view: #0d0d0e; --pn-view-ink: #f4f5f5; } } /* ---- DARK, chosen by the visitor. Same list as above. ---- */ :root[data-theme="dark"] { --pn-bg: #121212; --pn-surface: #1a1a1a; --pn-panel: #1e1e1e; --pn-panel-2: #2a2a2a; --pn-tint: #171717; --pn-line: #2f2f2f; --pn-ink: #f4f4f5; --pn-muted: #a1a1aa; --pn-shadow: 0 28px 72px rgba(0, 0, 0, 0.6); --pn-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --pn-in: #56c97f; --pn-out: #ff7b75; --pn-pending: #e8bf5c; --pn-accent: #ff6a1a; --pn-on-accent: #180a02; --pn-accent-text: #ff9354; --pn-grid: rgba(220, 220, 230, 0.05); --pn-view: #0d0d0e; --pn-view-ink: #f4f5f5; } /* ------------------------------------------------------------------------- * Base * ---------------------------------------------------------------------- */ .pn { background: var(--pn-bg); color: var(--pn-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } .pn *, .pn *::before, .pn *::after { box-sizing: border-box; } .pn h1, .pn h2, .pn h3 { margin: 0; line-height: 1.18; letter-spacing: -0.015em; font-weight: 800; } .pn h1 { font-size: clamp(32px, 4.4vw, 52px); } .pn h2 { font-size: clamp(25px, 2.9vw, 36px); } .pn h3 { font-size: 19px; font-weight: 700; } .pn p { margin: 0; } .pn a { color: inherit; } .pn img { max-width: 100%; height: auto; } .pn :focus-visible { outline: 3px solid var(--pn-accent); outline-offset: 2px; border-radius: 6px; } .pn__container { width: min(1180px, 100% - 40px); margin-inline: auto; } .pn__measure { max-width: 760px; } .pn__section { padding-block: var(--pn-band); } /* The header is sticky, so anything an in-page link scrolls to has to clear it — every band with an anchor, every numbered heading on a policy page. */ .pn [id] { scroll-margin-top: calc(var(--pn-header-h) + 16px); } .pn__section--tint { background: var(--pn-tint); } .pn__skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 12px 18px; background: var(--pn-accent); color: var(--pn-on-accent); border-radius: 0 0 var(--pn-radius-sm) 0; text-decoration: none; font-weight: 700; } .pn__skip:focus { left: 0; } /* ------------------------------------------------------------------------- * Type and controls * ---------------------------------------------------------------------- */ .pn__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 26px; border-radius: var(--pn-pill); background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); font-weight: 700; font-size: 16px; text-decoration: none; border: 0; box-shadow: var(--pn-shadow-sm); } .pn__button:hover { filter: brightness(1.05); } .pn__button--ghost { background: transparent; color: var(--pn-ink); border: 1.5px solid var(--pn-line); box-shadow: none; } .pn__button--small { min-height: 42px; padding: 10px 20px; font-size: 15px; } .pn__text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pn-accent-text); font-weight: 700; text-decoration: none; } .pn__text-link:hover { text-decoration: underline; text-underline-offset: 3px; } .pn__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; } .pn__eyebrow { margin-bottom: 12px; color: var(--pn-accent-text); font-size: 13px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .pn__lead { margin-top: 16px; color: var(--pn-muted); font-size: clamp(17px, 1.5vw, 19px); } .pn__accent { color: var(--pn-accent-text); } .pn__note { margin-top: 22px; color: var(--pn-muted); font-size: 15px; } .pn__empty { padding: 40px 0; color: var(--pn-muted); text-align: center; } .pn__section-head { max-width: 720px; margin-bottom: var(--pn-head-gap); } .pn__section-head--center { margin-inline: auto; text-align: center; } .pn__icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------------------- * Header * ---------------------------------------------------------------------- */ /* * No `backdrop-filter` here on mobile, and that is not a style choice. * * `backdrop-filter` (like `filter` and `transform`) makes an element the * containing block for its `position: fixed` descendants. With it on, the * drawer's `top: 62px; bottom: 0` resolved against the 62px-tall HEADER rather * than the viewport, and the menu opened as a 48px sliver with the close button * in it. The blur is restored at ≥900px, where the panel is static and cannot be * caught by it. */ .pn__header { position: sticky; top: 0; z-index: 30; background: var(--pn-surface); border-bottom: 1px solid var(--pn-line); } /* * The bar keeps ONE height on mobile, always. * * It used to be a wrapping flex row with the menu panel as a full-width child, * so opening the menu grew the sticky header and shoved the page under it. The * panel is now a fixed overlay (below) and the bar never wraps, which is what * makes the header a fixed, known quantity — the drawer hangs off it and every * in-page anchor offsets by it. */ .pn__header-inner { display: flex; align-items: center; gap: 12px; min-height: var(--pn-header-h); flex-wrap: nowrap; } .pn__menu-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border-radius: var(--pn-radius-sm); border: 1px solid var(--pn-line); color: inherit; text-decoration: none; } .pn__menu-bars, .pn__menu-bars::before, .pn__menu-bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .pn__menu-bars::before, .pn__menu-bars::after { content: ""; position: relative; } .pn__menu-bars::before { top: -6px; } .pn__menu-bars::after { top: 4px; } /* * The drawer. * * `position: fixed` under the bar, so opening it changes NOTHING about the * header's height or the page's layout — the defect this replaced. It scrolls * itself when a long menu meets a short phone, and `overscroll-behavior` keeps * that scroll from chaining into the page behind it. */ .pn__header-panel { display: none; position: fixed; top: var(--pn-header-h); left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: column; gap: 8px; padding: 20px; background: var(--pn-surface); border-top: 1px solid var(--pn-line); overflow-y: auto; overscroll-behavior: contain; } .pn__header-panel .pn__nav { margin-top: 4px; } .pn__header-panel:target { display: flex; } /* * The close button floats in the corner; it does not take a row. * * As a flow item it was a 40px band plus a gap above the first menu entry, which * on a phone read as the drawer having opened wrong — 68px of nothing between * the bar and "Cách dùng". Out of flow, the menu starts where the drawer starts * and the × sits beside the first entry, which is where a thumb reaches for it * anyway. */ .pn__menu-close { position: absolute; top: 14px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pn-radius-sm); border: 1px solid var(--pn-line); background: var(--pn-surface); color: var(--pn-muted); font-size: 22px; line-height: 1; text-decoration: none; } /* The one entry the × can overlap. Long labels wrap before they reach it. */ .pn__nav li:first-child a { padding-right: 56px; } .pn__nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .pn__nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--pn-line); font-size: 18px; font-weight: 700; text-decoration: none; } .pn__nav a:hover { color: var(--pn-accent-text); } .pn__brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; } .pn__brand img { width: 40px; height: 40px; flex: none; border-radius: 10px; } .pn__brand-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); } .pn__brand-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pn__brand-text { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; } .pn__brand-text strong { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn__brand-text small { color: var(--pn-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn__brand--compact img, .pn__brand--compact .pn__brand-mark { width: 38px; height: 38px; } .pn__header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .pn__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--pn-radius-sm); border: 1px solid var(--pn-line); background: transparent; color: inherit; cursor: pointer; } .pn__icon-btn svg { width: 20px; height: 20px; } /* ---- Language switcher ---- */ .pn__lang { position: relative; } .pn__lang summary { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: var(--pn-radius-sm); border: 1px solid var(--pn-line); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; } .pn__lang summary::-webkit-details-marker { display: none; } .pn__lang summary i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } /* * A flag is a small rectangle of real-world colour, so it needs an edge of its * own: the Japanese flag is a white field, and without a rim it reads on a white * page as a floating red dot. * * The rim is an OUTSET ring, not `inset`. An inset box-shadow paints between the * element's background and its content, and each of these flags starts with a * full-bleed `` — which covered the ring exactly where it was needed. Grey * rather than black so the same value works in both colour modes. */ .pn__flag { width: 21px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.45); } .pn__lang ul { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 178px; margin: 0; padding: 6px; list-style: none; background: var(--pn-panel); border: 1px solid var(--pn-line); border-radius: var(--pn-radius-sm); box-shadow: var(--pn-shadow); } .pn__lang a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; font-size: 15px; text-decoration: none; } .pn__lang a:hover, .pn__lang a[aria-current="page"] { background: var(--pn-panel-2); } /* ------------------------------------------------------------------------- * Store buttons * ---------------------------------------------------------------------- */ .pn__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .pn .pn__store { display: inline-flex; align-items: center; gap: 11px; padding: 10px 20px 10px 16px; border-radius: var(--pn-radius-sm); background: var(--pn-ink); color: var(--pn-bg); text-decoration: none; } .pn__store svg { width: 26px; height: 26px; fill: currentColor; } .pn__store span { display: flex; flex-direction: column; line-height: 1.15; } .pn__store small { font-size: 11px; opacity: 0.75; } .pn__store strong { font-size: 17px; font-weight: 700; } .pn .pn__store--soon { background: transparent; color: var(--pn-muted); border: 1.5px dashed var(--pn-line); } /* ------------------------------------------------------------------------- * Hero * ---------------------------------------------------------------------- */ .pn__hero { position: relative; padding-block: clamp(40px, 5vw, 76px) var(--pn-band); background-image: linear-gradient(var(--pn-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pn-grid) 1px, transparent 1px); background-size: 34px 34px; } .pn__hero-grid { display: grid; gap: clamp(32px, 5vw, 60px); align-items: center; } .pn__hero-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } .pn__hero-notes li { padding: 7px 14px; border-radius: var(--pn-pill); background: var(--pn-panel-2); color: var(--pn-muted); font-size: 13.5px; font-weight: 600; } /* ------------------------------------------------------------------------- * The phones * * Redrawn from the app's own UX sheet, and drawn rather than screenshotted for * the usual three reasons: it is sharp at every density, it translates with the * page, and it does not go stale the day the app's type changes. * * The whole mockup scales off ONE number. `--pn-ph` is the screen width, and * every size inside is a fraction of it, so the pair shrinks to fit a 390px * viewport without a single extra media query — and without the 11px text that * a fixed-pixel mockup ends up with when it is squeezed. * ---------------------------------------------------------------------- */ .pn__phones { display: flex; align-items: stretch; gap: clamp(12px, 2vw, 22px); justify-content: center; justify-self: center; width: 100%; } /* Two phones side by side are two phones, not one tall one and one short one. The screens stretch to the taller of the pair and each pins its own bottom element there — the tab bar on one, the save button on the other. */ .pn__phone-second, .pn__phone-second > .pn__phone { display: flex; flex-direction: column; } .pn__phones > .pn__phone, .pn__phone-second > .pn__phone { align-self: stretch; } .pn__phone-screen { flex: 1; } /* * `--pn-ph` is the screen width and every size inside the mockup is a fraction * of it, so the whole thing rescales from one number. The three values are the * three situations, not three devices: * * base — one phone, alone in a single-column hero. It can be generous. * 620px — the second phone appears; both must fit the full content width. * 900px — the hero splits in two and the pair must fit the RIGHT column only, * which is roughly half the container. Hence the much smaller vw. */ .pn__phone { --pn-ph: min(300px, 76vw); width: var(--pn-ph); flex: none; } @media (min-width: 620px) { .pn__phone { --pn-ph: min(252px, 34vw); } } @media (min-width: 900px) { .pn__phone { --pn-ph: min(252px, 20vw); } } /* * Below 620px the second phone goes, rather than stacking. * * Two full app screens stacked on a 390px viewport push the headline, the store * buttons and the whole rest of the page about a screen and a half down — and * the reader who most needs those buttons is the one holding a phone. One * screen still shows what the app looks like; two is a luxury of width. */ @media (max-width: 619px) { .pn__phone-second { display: none; } } .pn__phone-screen { display: flex; flex-direction: column; padding: calc(var(--pn-ph) * 0.028); border-radius: calc(var(--pn-ph) * 0.13); background: var(--pn-surface); border: 1px solid var(--pn-line); box-shadow: var(--pn-shadow); font-size: calc(var(--pn-ph) * 0.049); overflow: hidden; } /* The home indicator. Two pixels of hardware that make the frame read as a phone rather than as a floating card. */ .pn__phone-bar { display: block; width: 36%; height: 4px; margin: 8px auto 0; border-radius: var(--pn-pill); background: var(--pn-line); } .pn__app { display: flex; flex-direction: column; gap: calc(var(--pn-ph) * 0.038); color: var(--pn-ink); line-height: 1.3; } .pn__app b, .pn__app small { display: block; } /* ---- Status bar ---- */ .pn__status { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--pn-ph) * 0.014) calc(var(--pn-ph) * 0.028) 0; font-size: calc(var(--pn-ph) * 0.045); font-weight: 700; } .pn__status-icons { display: inline-flex; align-items: center; gap: calc(var(--pn-ph) * 0.017); } .pn__status-icons svg { height: calc(var(--pn-ph) * 0.042); width: auto; fill: currentColor; } /* ---- Top bar ---- */ .pn__app-bar { display: flex; align-items: center; justify-content: center; gap: calc(var(--pn-ph) * 0.028); padding: calc(var(--pn-ph) * 0.021) calc(var(--pn-ph) * 0.014); } .pn__app-bar b { font-size: calc(var(--pn-ph) * 0.062); font-weight: 800; white-space: nowrap; } .pn__app-bar--title { justify-content: flex-start; gap: calc(var(--pn-ph) * 0.045); } .pn__app-chev { color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.075); line-height: 1; } .pn__app-bar-icons { display: inline-flex; align-items: center; gap: calc(var(--pn-ph) * 0.035); margin-left: auto; } .pn__app-bar-icons svg { width: calc(var(--pn-ph) * 0.062); height: calc(var(--pn-ph) * 0.062); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pn__app-qr { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: calc(var(--pn-ph) * 0.11); height: calc(var(--pn-ph) * 0.11); border-radius: calc(var(--pn-ph) * 0.035); background: var(--pn-surface); border: 1px solid var(--pn-line); color: var(--pn-accent); } .pn__app-qr svg { width: 62%; height: 62%; fill: currentColor; } /* ---- Balance card ---- */ .pn__app-card { padding: calc(var(--pn-ph) * 0.042); border-radius: calc(var(--pn-ph) * 0.052); background: var(--pn-panel-2); } .pn__app-split { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: calc(var(--pn-ph) * 0.035); border-bottom: 1px solid var(--pn-line); } .pn__app-split > div + div { padding-left: calc(var(--pn-ph) * 0.045); border-left: 1px solid var(--pn-line); } .pn__app-card small { color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.045); } .pn__app-card b { margin-top: calc(var(--pn-ph) * 0.01); font-size: calc(var(--pn-ph) * 0.058); font-weight: 800; font-variant-numeric: tabular-nums; } .pn__app-left { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--pn-ph) * 0.035); padding-top: calc(var(--pn-ph) * 0.035); } .pn__app-left b { font-size: calc(var(--pn-ph) * 0.075); } .pn__minibars { display: flex; align-items: flex-end; gap: calc(var(--pn-ph) * 0.014); height: calc(var(--pn-ph) * 0.105); } .pn__minibars i { display: block; width: calc(var(--pn-ph) * 0.028); border-radius: calc(var(--pn-ph) * 0.014); background: var(--pn-in); } .pn__minibars .pn__minibars-now { background: var(--pn-accent); } /* ---- The four tiles ---- */ .pn__app-tiles { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: calc(var(--pn-ph) * 0.024); } .pn__app-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--pn-ph) * 0.017); padding: calc(var(--pn-ph) * 0.045) calc(var(--pn-ph) * 0.014); border-radius: calc(var(--pn-ph) * 0.045); background: var(--pn-panel-2); text-align: center; } .pn__app-tile b { font-size: calc(var(--pn-ph) * 0.042); font-weight: 700; } .pn__app-tile small { font-size: calc(var(--pn-ph) * 0.035); opacity: 0.85; } .pn__app-tile svg { width: calc(var(--pn-ph) * 0.075); height: calc(var(--pn-ph) * 0.075); fill: currentColor; } .pn__app-tile i { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--pn-ph) * 0.09); height: calc(var(--pn-ph) * 0.09); border-radius: 50%; font-size: calc(var(--pn-ph) * 0.06); font-style: normal; font-weight: 700; color: #fff; } .pn__app-tile--scan { background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); } /* * Red and green here are the app's, and they mean exactly one thing: money out * and money in. The tint is the ground, the saturated colour is the disc — the * same pairing the app uses, so the two tiles are told apart at a glance without * reading either label. */ .pn__app-tile--out { background: color-mix(in srgb, var(--pn-out) 12%, var(--pn-surface)); color: var(--pn-out); } .pn__app-tile--out i { background: var(--pn-out); } .pn__app-tile--in { background: color-mix(in srgb, var(--pn-in) 12%, var(--pn-surface)); color: var(--pn-in); } .pn__app-tile--in i { background: var(--pn-in); } .pn__app-tile--history { background: color-mix(in srgb, var(--pn-muted) 14%, var(--pn-surface)); color: var(--pn-muted); } .pn__app-tile--history svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---- Recent transactions ---- */ .pn__app-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--pn-ph) * 0.035); padding-top: calc(var(--pn-ph) * 0.017); } .pn__app-head b { font-size: calc(var(--pn-ph) * 0.058); font-weight: 800; } .pn__app-head small { color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.042); white-space: nowrap; } /* * `minmax(0, 1fr)`, and the `min-width: 0` under it, are what let a row * truncate. * * A grid track is `auto`-min by default, so it refuses to be narrower than its * item's min-content — and a row whose amount is `white-space: nowrap` has a * wide min-content. The track grew past the phone and the ₫ was sliced off by * the screen's `overflow: hidden`. Now the track is pinned to the phone and the * payee line ellipsises instead, which is what the app does too: the amount is * the one thing on that row that must never be abbreviated. */ .pn__app-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--pn-ph) * 0.014); margin: 0; padding: 0; list-style: none; } .pn__app-rows li { min-width: 0; display: flex; align-items: center; gap: calc(var(--pn-ph) * 0.035); padding: calc(var(--pn-ph) * 0.028) 0; border-bottom: 1px solid var(--pn-line); } .pn__app-rows li:last-child { border-bottom: 0; } .pn__app-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: calc(var(--pn-ph) * 0.115); height: calc(var(--pn-ph) * 0.115); border-radius: calc(var(--pn-ph) * 0.038); font-size: calc(var(--pn-ph) * 0.06); line-height: 1; } .pn__app-avatar--food { background: color-mix(in srgb, var(--pn-out) 14%, var(--pn-surface)); } .pn__app-avatar--shop { background: color-mix(in srgb, var(--pn-accent) 14%, var(--pn-surface)); } .pn__app-avatar--move { background: color-mix(in srgb, var(--pn-pending) 22%, var(--pn-surface)); } .pn__app-avatar--in { background: color-mix(in srgb, var(--pn-in) 14%, var(--pn-surface)); } .pn__app-row-text { min-width: 0; flex: 1; } .pn__app-row-text b { font-size: calc(var(--pn-ph) * 0.049); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn__app-row-text small { color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.04); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn__app-rows > li > b { flex: none; font-size: calc(var(--pn-ph) * 0.049); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- Tab bar ---- */ .pn__app-tabs { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pn-ph) * 0.014); margin-top: auto; padding-top: calc(var(--pn-ph) * 0.035); border-top: 1px solid var(--pn-line); } .pn__app-tab { display: flex; flex: 1; flex-direction: column; align-items: center; gap: calc(var(--pn-ph) * 0.01); color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.035); font-weight: 600; text-align: center; } .pn__app-tab svg { width: calc(var(--pn-ph) * 0.062); height: calc(var(--pn-ph) * 0.062); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .pn__app-tab--on { color: var(--pn-accent); } .pn__app-fab { display: inline-flex; flex: none; align-items: center; justify-content: center; width: calc(var(--pn-ph) * 0.135); height: calc(var(--pn-ph) * 0.135); margin-top: calc(var(--pn-ph) * -0.045); border-radius: 50%; background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); font-size: calc(var(--pn-ph) * 0.08); font-weight: 700; box-shadow: var(--pn-shadow-sm); } /* ---- Entry screen ---- */ .pn__app-amount { display: flex; align-items: center; justify-content: center; gap: calc(var(--pn-ph) * 0.035); padding: calc(var(--pn-ph) * 0.052) 0; border-radius: calc(var(--pn-ph) * 0.052); background: var(--pn-surface); } .pn__app-amount b { color: var(--pn-accent); font-size: calc(var(--pn-ph) * 0.125); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pn__app-amount i { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--pn-ph) * 0.07); height: calc(var(--pn-ph) * 0.07); border-radius: 50%; background: var(--pn-line); color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.05); font-style: normal; } .pn__app-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--pn-ph) * 0.024); } .pn__app-key { display: flex; align-items: center; justify-content: center; padding: calc(var(--pn-ph) * 0.045) 0; border-radius: calc(var(--pn-ph) * 0.042); background: var(--pn-panel-2); font-size: calc(var(--pn-ph) * 0.068); font-weight: 700; font-variant-numeric: tabular-nums; } .pn__app-label { padding-top: calc(var(--pn-ph) * 0.014); font-size: calc(var(--pn-ph) * 0.052); font-weight: 700; } .pn__app-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--pn-ph) * 0.024); } .pn__app-cat { display: flex; align-items: center; justify-content: center; gap: calc(var(--pn-ph) * 0.017); padding: calc(var(--pn-ph) * 0.035) calc(var(--pn-ph) * 0.014); border-radius: calc(var(--pn-ph) * 0.038); background: var(--pn-surface); border: 1px solid var(--pn-line); font-size: calc(var(--pn-ph) * 0.04); font-weight: 600; text-align: center; } .pn__app-cat i { font-size: calc(var(--pn-ph) * 0.052); font-style: normal; line-height: 1; } .pn__app-cat--on { background: color-mix(in srgb, var(--pn-accent) 10%, var(--pn-surface)); border-color: var(--pn-accent); } .pn__app-note { display: flex; align-items: center; gap: calc(var(--pn-ph) * 0.028); padding: calc(var(--pn-ph) * 0.038) calc(var(--pn-ph) * 0.038); border-radius: calc(var(--pn-ph) * 0.042); background: var(--pn-panel-2); color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.045); } .pn__app-note svg { width: calc(var(--pn-ph) * 0.055); height: calc(var(--pn-ph) * 0.055); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pn__app-note span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn__app-note i { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--pn-ph) * 0.058); height: calc(var(--pn-ph) * 0.058); border-radius: 50%; background: var(--pn-line); font-size: calc(var(--pn-ph) * 0.042); font-style: normal; } .pn__app-save { display: flex; align-items: center; justify-content: center; gap: calc(var(--pn-ph) * 0.028); margin-top: auto; padding: calc(var(--pn-ph) * 0.052) 0; border-radius: calc(var(--pn-ph) * 0.05); background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); font-size: calc(var(--pn-ph) * 0.055); font-weight: 800; } .pn__app-save svg { width: calc(var(--pn-ph) * 0.062); height: calc(var(--pn-ph) * 0.062); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* ---- Scan screen ---- */ .pn__scan { display: flex; flex-direction: column; gap: calc(var(--pn-ph) * 0.045); padding-bottom: calc(var(--pn-ph) * 0.035); } .pn__scan-frame { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: calc(var(--pn-ph) * 0.12); border-radius: calc(var(--pn-ph) * 0.052); background: var(--pn-view); } .pn__qr { width: 100%; height: 100%; } .pn__qr-on { fill: var(--pn-view-ink); } .pn__qr-off { fill: var(--pn-view); } .pn__scan-corner { position: absolute; width: calc(var(--pn-ph) * 0.1); height: calc(var(--pn-ph) * 0.1); border: 3px solid var(--pn-accent); } .pn__scan-corner--tl { top: calc(var(--pn-ph) * 0.055); left: calc(var(--pn-ph) * 0.055); border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; } .pn__scan-corner--tr { top: calc(var(--pn-ph) * 0.055); right: calc(var(--pn-ph) * 0.055); border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; } .pn__scan-corner--bl { bottom: calc(var(--pn-ph) * 0.055); left: calc(var(--pn-ph) * 0.055); border-right: 0; border-top: 0; border-radius: 0 0 0 10px; } .pn__scan-corner--br { bottom: calc(var(--pn-ph) * 0.055); right: calc(var(--pn-ph) * 0.055); border-left: 0; border-top: 0; border-radius: 0 0 10px 0; } .pn__scan-hint { color: var(--pn-muted); font-size: calc(var(--pn-ph) * 0.045); text-align: center; } .pn__out { color: var(--pn-out); } .pn__in { color: var(--pn-in); } /* ------------------------------------------------------------------------- * Scenes * ---------------------------------------------------------------------- */ .pn__scene { display: block; width: 100%; height: auto; margin-bottom: 18px; border-radius: var(--pn-radius-sm); } .pn__scene-plate { fill: var(--pn-tint); } .pn__scene-view { fill: var(--pn-view); } .pn__scene-bracket { fill: none; stroke: var(--pn-accent); stroke-width: 3; stroke-linecap: round; } .pn__scene-mod { fill: var(--pn-view-ink); } .pn__scene-mod--dim { opacity: 0.6; } .pn__scene-card { fill: var(--pn-surface); stroke: var(--pn-line); } .pn__scene-bar { fill: var(--pn-muted); opacity: 0.55; } .pn__scene-bar--dim { opacity: 0.3; } .pn__scene-bar--on { fill: var(--pn-accent); opacity: 1; } .pn__scene-arrow { fill: none; stroke: var(--pn-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .pn__scene-ring { fill: none; stroke: var(--pn-accent); stroke-width: 3; opacity: 0.35; } .pn__scene-check { fill: none; stroke: var(--pn-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .pn__scene-row { fill: var(--pn-panel-2); } .pn__scene-out { fill: var(--pn-out); opacity: 1; } .pn__scene-in { fill: var(--pn-in); opacity: 1; } .pn__scene-wave { fill: none; stroke: var(--pn-muted); stroke-width: 4; stroke-linecap: round; opacity: 0.45; } .pn__scene-slash { fill: none; stroke: var(--pn-accent); stroke-width: 4; stroke-linecap: round; } .pn__scene-lock { fill: var(--pn-accent); } .pn__scene-shackle { fill: none; stroke: var(--pn-accent); stroke-width: 5; stroke-linecap: round; } .pn__scene-track { fill: var(--pn-line); } .pn__scene-fill { fill: var(--pn-accent); } .pn__scene-fill--over { fill: var(--pn-out); } /* ------------------------------------------------------------------------- * The flow * ---------------------------------------------------------------------- */ .pn__flow { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .pn__flow-step { position: relative; padding: 18px 20px 24px; border-radius: var(--pn-radius-lg); background: var(--pn-panel); border: 1px solid var(--pn-line); } .pn__flow-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); font-size: 15px; font-weight: 700; } .pn__flow-step p { margin-top: 8px; color: var(--pn-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Features * ---------------------------------------------------------------------- */ .pn__features { display: grid; gap: 16px; } .pn__feature { padding: 22px; border-radius: var(--pn-radius-lg); background: var(--pn-panel); border: 1px solid var(--pn-line); } .pn__feature-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; background: color-mix(in srgb, var(--pn-accent) 12%, transparent); color: var(--pn-accent-text); } .pn__feature p { margin-top: 8px; color: var(--pn-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Numbers * ---------------------------------------------------------------------- */ .pn__stats-band { padding-block: var(--pn-band); background: var(--pn-tint); } .pn__stats { display: grid; gap: 20px; margin: 0; } .pn__stat { padding: 20px; border-radius: var(--pn-radius); background: var(--pn-panel); border: 1px solid var(--pn-line); text-align: center; } .pn__stat dt { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; color: var(--pn-accent-text); font-variant-numeric: tabular-nums; } .pn__stat dd { margin: 8px 0 0; color: var(--pn-muted); font-size: 14.5px; } /* ------------------------------------------------------------------------- * Plans * ---------------------------------------------------------------------- */ .pn__plans { display: grid; gap: 20px; align-items: start; } .pn__plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: var(--pn-radius-lg); background: var(--pn-panel); border: 1px solid var(--pn-line); } .pn__plan--pick { border-color: var(--pn-accent); box-shadow: var(--pn-shadow); } .pn__plan-tag { position: absolute; top: -13px; left: 24px; padding: 5px 14px; border-radius: var(--pn-pill); background: linear-gradient(180deg, var(--pn-accent-2), var(--pn-accent)); color: var(--pn-on-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .pn__plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 14px; } .pn__plan-price s { color: var(--pn-muted); font-size: 17px; } .pn__plan-price strong { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pn__plan-price span { color: var(--pn-muted); font-size: 14px; } .pn__plan-body { margin-top: 10px; color: var(--pn-muted); font-size: 15.5px; } .pn__plan ul { flex: 1; margin: 20px 0 24px; padding: 0; list-style: none; display: grid; gap: 11px; } .pn__plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; } /* * The tick is INK, not green. * * Green means money coming in everywhere else in this product, and a green tick * beside "CSV export" would spend that meaning on a checklist. The excluded rows * are muted rather than red for the same reason: a feature that is not in this * plan is absent, not a loss. */ .pn__plan-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--pn-panel-2); color: var(--pn-ink); } .pn__plan-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .pn__plan-no { color: var(--pn-muted); } .pn__plan-no .pn__plan-icon { color: var(--pn-muted); background: transparent; border: 1px solid var(--pn-line); } .pn__plan .pn__button { align-self: stretch; } /* ------------------------------------------------------------------------- * The data list * ---------------------------------------------------------------------- */ .pn__data { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .pn__data-item { padding: 18px 20px; border-radius: var(--pn-radius); background: var(--pn-panel); border: 1px solid var(--pn-line); } .pn__data-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pn__data-head h3 { font-size: 17px; } .pn__chip { padding: 4px 12px; border-radius: var(--pn-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; } /* * "Stays on the phone" is the good answer, and it is not green. * * Green is money in. A privacy verdict painted in the income colour would be the * second meaning the colour carries, and the first one would stop being reliable. * So the two chips separate on weight and ground: the reassuring one is the * accent tint, the one worth reading twice is amber — the same amber the app uses * for "waiting", which is exactly what "only when you export it yourself" is. */ .pn__chip--stays { background: color-mix(in srgb, var(--pn-accent) 12%, transparent); color: var(--pn-accent-text); } .pn__chip--leaves { background: color-mix(in srgb, var(--pn-pending) 20%, transparent); color: var(--pn-ink); } .pn__data-when { color: var(--pn-muted); font-size: 13.5px; } .pn__data-where { margin-top: 8px; color: var(--pn-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Notices * ---------------------------------------------------------------------- */ .pn__notice { padding-block: var(--pn-band-sm); } .pn__notice-inner { display: flex; gap: 18px; padding: 24px; border-radius: var(--pn-radius-lg); background: var(--pn-panel); border: 1px solid var(--pn-line); border-left: 4px solid var(--pn-muted); } .pn__notice--info .pn__notice-inner { border-left-color: var(--pn-accent); } .pn__notice--warn .pn__notice-inner { border-left-color: var(--pn-pending); } .pn__notice--critical .pn__notice-inner { border-left-color: var(--pn-out); } .pn__notice-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--pn-panel-2); } .pn__notice-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pn__notice h2 { font-size: 21px; } .pn__notice p { margin-top: 8px; color: var(--pn-muted); font-size: 15.5px; } .pn__notice-list { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; } .pn__notice-list li { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 2px solid var(--pn-line); } .pn__notice-list b { font-size: 15.5px; } .pn__notice-list span { color: var(--pn-muted); font-size: 15px; } /* ------------------------------------------------------------------------- * FAQ * ---------------------------------------------------------------------- */ .pn__faq { display: grid; gap: 10px; } .pn__faq-item { padding: 4px 20px; border-radius: var(--pn-radius); background: var(--pn-panel); border: 1px solid var(--pn-line); } .pn__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 16.5px; font-weight: 700; cursor: pointer; list-style: none; } .pn__faq-item summary::-webkit-details-marker { display: none; } .pn__faq-item summary i { flex: none; margin-right: 3px; width: 9px; height: 9px; border-right: 2.5px solid var(--pn-accent); border-bottom: 2.5px solid var(--pn-accent); transform: translateY(-3px) rotate(45deg); } .pn__faq-item[open] summary i { transform: translateY(2px) rotate(-135deg); } .pn__faq-item p { padding-bottom: 18px; color: var(--pn-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Closing band * ---------------------------------------------------------------------- */ .pn__cta { padding-block: var(--pn-band); background: var(--pn-tint); background-image: linear-gradient(var(--pn-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pn-grid) 1px, transparent 1px); background-size: 34px 34px; } .pn__cta-inner { max-width: 720px; text-align: center; } .pn__cta-inner .pn__stores, .pn__cta-inner .pn__actions { justify-content: center; } /* ------------------------------------------------------------------------- * Pages, documents and prose * ---------------------------------------------------------------------- */ .pn__page-head { padding-block: clamp(36px, 4vw, 60px) 0; } .pn__page-head h1 { max-width: 22ch; } .pn__doc-updated { margin-top: 14px; color: var(--pn-muted); font-size: 14px; } .pn__doc-lead { padding: 18px 20px; border-radius: var(--pn-radius); background: var(--pn-panel); border: 1px solid var(--pn-line); color: var(--pn-ink); } /* * A page is ONE column, whatever the blocks inside it happen to be. * * Every block draws its own full-bleed band with a container inside, and those * containers disagree on purpose: prose is set to a reading measure (760px) * while a data list takes the full 1180px, because on the HOMEPAGE that * difference is the layout. On a privacy page it is not a layout — it is text * that steps in and out by 200px on each side as the reader scrolls. So this * pins every container on such a page to one width, and the reading measure * inside it becomes a no-op. */ .pn__page--doc .pn__container { width: min(880px, 100% - 40px); } .pn__page--doc .pn__measure { max-width: none; } .pn__doc .pn__section { padding-block: 0; } .pn__doc .pn__section + .pn__section { padding-top: var(--pn-doc-gap); } /* * A block heading inside a document is a section heading like any other. * * The data list draws its heading through the theme's normal section head, which * is sized for a marketing band (up to 36px). On the privacy page that heading is * numbered and sits in the contents list beside prose headings set at 26px, so * left alone it printed one section of the document a size larger than the rest. */ .pn__doc .pn__section-head h2 { font-size: clamp(21px, 2.2vw, 26px); } .pn__doc .pn__section-head { margin-bottom: 18px; } .pn__toc { margin-top: 28px; padding: 18px 22px; border-radius: var(--pn-radius); background: var(--pn-panel-2); } .pn__toc b { display: block; margin-bottom: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pn-muted); } .pn__toc ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .pn__toc a { color: var(--pn-accent-text); font-size: 15px; text-decoration: none; } .pn__toc a:hover { text-decoration: underline; text-underline-offset: 3px; } .pn__prose { font-size: 17px; } .pn__prose h2 { margin-top: 38px; font-size: clamp(21px, 2.2vw, 26px); } .pn__prose h3 { margin-top: 26px; } .pn__prose h2:first-child, .pn__prose h3:first-child { margin-top: 0; } .pn__prose p, .pn__prose ul, .pn__prose ol { margin-top: 14px; } .pn__prose ul, .pn__prose ol { padding-left: 22px; } .pn__prose li { margin-top: 7px; } .pn__prose a { color: var(--pn-accent-text); text-underline-offset: 3px; } .pn__prose strong { font-weight: 700; } .pn__prose table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15.5px; } .pn__prose th, .pn__prose td { padding: 11px 12px; border-bottom: 1px solid var(--pn-line); text-align: left; vertical-align: top; } .pn__prose blockquote { margin: 20px 0 0; padding-left: 18px; border-left: 3px solid var(--pn-accent); color: var(--pn-muted); } .pn__figure { margin: 0; } .pn__figure img { border-radius: var(--pn-radius); } .pn__figure figcaption { margin-top: 10px; color: var(--pn-muted); font-size: 14px; } /* ------------------------------------------------------------------------- * Posts * ---------------------------------------------------------------------- */ .pn__post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; color: var(--pn-muted); font-size: 14px; } .pn__post-grid { display: grid; gap: 16px; } .pn__post-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: var(--pn-radius-lg); background: var(--pn-panel); border: 1px solid var(--pn-line); } .pn__post-card h3 { margin-top: 6px; } .pn__post-card h3 a { text-decoration: none; } .pn__post-card p { margin-top: 8px; color: var(--pn-muted); font-size: 15.5px; } .pn__post-card-date { color: var(--pn-muted); font-size: 13px; } .pn__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; } .pn__pager a { min-width: 42px; padding: 9px 12px; border-radius: var(--pn-radius-sm); border: 1px solid var(--pn-line); font-weight: 700; text-align: center; text-decoration: none; } .pn__pager a[aria-current="page"] { background: var(--pn-accent); border-color: var(--pn-accent); color: var(--pn-on-accent); } /* ------------------------------------------------------------------------- * 404 / 500 * ---------------------------------------------------------------------- */ .pn__state { padding-block: clamp(60px, 9vw, 120px); text-align: center; } .pn__state .pn__measure { margin-inline: auto; } .pn__state-mark { font-size: clamp(64px, 11vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--pn-line); } .pn__state h1 { margin-top: 12px; } .pn__state p { margin-top: 14px; color: var(--pn-muted); } .pn__state .pn__actions { justify-content: center; } /* ------------------------------------------------------------------------- * Footer * ---------------------------------------------------------------------- */ .pn__footer { padding-block: var(--pn-band) 32px; background: var(--pn-surface); border-top: 1px solid var(--pn-line); } .pn__footer-grid { display: grid; gap: 32px; } .pn__footer-about p { margin-top: 16px; color: var(--pn-muted); font-size: 15px; } .pn__footer-build { font-variant-numeric: tabular-nums; } .pn__footer-col h2 { margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pn-muted); } .pn__footer-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .pn__footer-col a { font-size: 15px; text-decoration: none; } .pn__footer-col a:hover { color: var(--pn-accent-text); } .pn__footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .pn__footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--pn-line); color: var(--pn-muted); font-size: 13.5px; } .pn__footer-bottom div { display: flex; flex-wrap: wrap; gap: 18px; } .pn__footer-bottom a { text-decoration: none; } .pn__footer-bottom a:hover { color: var(--pn-accent-text); } .pn__builtwith { margin-left: 10px; } /* ------------------------------------------------------------------------- * Widths * * Mobile first, and the two breakpoints are where the CONTENT needs them, not * where a device happens to be: 640px is where two cards fit side by side, and * 900px is where the header stops needing a menu button and the hero can put the * phone next to the words. * ---------------------------------------------------------------------- */ @media (min-width: 640px) { .pn__flow, .pn__features, .pn__stats, .pn__plans, .pn__post-grid { grid-template-columns: repeat(2, 1fr); } .pn__footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { :root { --pn-header-h: 72px; } .pn__header { background: color-mix(in srgb, var(--pn-surface) 92%, transparent); backdrop-filter: blur(12px); } /* Above this width the menu is not a drawer at all: it is a row in the bar, always open, static, with no target to reach and no button to reach it. */ .pn__menu-button, .pn__menu-close { display: none; } .pn__header-panel, .pn__header-panel:target { display: flex; position: static; flex-direction: row; align-items: center; justify-content: flex-end; gap: 28px; width: auto; margin-left: auto; padding: 0; background: transparent; border-top: 0; overflow: visible; } .pn__nav ul { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; } .pn__nav a, .pn__nav li:first-child a { padding: 8px 0; border-bottom: 0; font-size: 16px; font-weight: 600; } .pn__header-actions { margin-top: 0; } .pn__lang ul { top: calc(100% + 8px); bottom: auto; } .pn__brand img, .pn__brand-mark { width: 44px; height: 44px; } .pn__brand-text strong { font-size: 19px; } .pn__hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pn__flow { grid-template-columns: repeat(4, 1fr); } .pn__features { grid-template-columns: repeat(3, 1fr); } .pn__stats { grid-template-columns: repeat(4, 1fr); } .pn__post-grid { grid-template-columns: repeat(3, 1fr); } .pn__footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .pn * { animation: none !important; transition: none !important; } }