/* * 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; } /* * Three bars, drawn absolutely so the box stays 2px tall whatever the bars do. * * The earlier version put the outer two in flow with `position: relative` and * `top` nudges, which meant crossing them into an × moved the box as well as the * bars. Absolute takes the pseudo-elements out of layout entirely: the × is two * rotations and nothing shifts. */ .pn__menu-bars { position: relative; display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .pn__menu-bars::before, .pn__menu-bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .pn__menu-bars::before { top: -6px; } .pn__menu-bars::after { top: 6px; } /* Open: the middle bar goes, the outer two cross. */ .pn__menu-bars--x { background: transparent; } .pn__menu-bars--x::before { top: 0; transform: rotate(45deg); } .pn__menu-bars--x::after { top: 0; transform: rotate(-45deg); } /* * Which of the two links is showing. * * `:has()` because the buttons come BEFORE the drawer in the markup and there is * no previous-sibling combinator. It is not a new floor for this theme — the * palette already depends on `color-mix()`, which landed later than `:has()` in * every engine. Where `:has()` is missing the opener simply stays put; the menu * still opens, and still closes on any menu link or the back button. */ .pn__menu-button--close { display: none; } .pn__header-inner:has(#pn-menu:target) .pn__menu-button--open { display: none; } /* Open, and looking it: the button wears the accent while the drawer is down. */ .pn__header-inner:has(#pn-menu:target) .pn__menu-button--close { display: inline-flex; border-color: var(--pn-accent); background: color-mix(in srgb, var(--pn-accent) 12%, transparent); color: var(--pn-accent-text); } /* * 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; } .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, 1.6vw, 20px); justify-content: center; justify-self: center; width: 100%; } /* * The phones FILL their column rather than sitting at a fixed width inside it. * * They used to be `width: 252px` each, centred — which left the pair 17px short * of the container on both sides, so the hero looked misaligned against the * cards below it even though every container on the page has the same edges. * Flexing to the column fixes the alignment and buys the mockup its width back * in the same change. * * `--pn-ph` is the screen width that every size inside the mockup is a fraction * of. With a flexed phone we no longer know that number up front, so the phone * becomes a container and the screen reads its OWN rendered width with `cqw`. * The px value on the line above is the fallback: where container queries are * missing the mockup is drawn slightly small rather than not at all, because a * `--pn-ph` that fails to parse would take every calc() in this file with it. */ .pn__phone { container-type: inline-size; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; max-width: 320px; } .pn__phone-screen { flex: 1; } /* * 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 { --pn-ph: 264px; --pn-ph: 100cqw; 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.008); 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.038); font-weight: 600; text-align: center; white-space: nowrap; } .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__header-inner:has(#pn-menu:target) .pn__menu-button--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 { 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; } /* The phones get the wider half. Two app screens side by side need more room than a headline and three chips, and the headline reads fine at 500px. */ .pn__hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } .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; } }