/* ═══════════════════════════════════════════════════════════════════════════ paymii.dev apex landing — see docs/plans/apex-landing-page-plan.md §1a. Two rules that are easy to break and hard to notice: 1. THE BRAND CYAN IS THE CARET, AND ONLY THE CARET. #00BAD1 on this ground is ~2.0:1. It fails AA for text and fails the 3:1 non-text minimum for focus indicators. It is used here for `caret-color`, which has no contrast floor and marks the one thing on the page that is the user's. Do not "brand" anything else with it. 2. Logical properties only (inline-start/end, margin-inline, text-align:start). The page flips to LTR in English mode by swapping ; anything written as left/right silently stops flipping. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Fonts ─────────────────────────────────────────────────────────────── Same-origin only: the edge CSP is `font-src 'self'` and enforcing. unicode-range is load-bearing — the Hebrew and Latin files are separate subsets of the same family/weight, so without it the later @font-face wins outright and Hebrew renders from the fallback stack. */ @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/frank-ruhl-libre-hebrew-400-normal.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/frank-ruhl-libre-hebrew-700-normal.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/frank-ruhl-libre-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/frank-ruhl-libre-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); } /* ── Tokens ──────────────────────────────────────────────────────────── */ :root { --paper: #e9ede8; /* ground — the pale green of a carbonless duplicate form */ --ink: #12211f; /* all type. ~15:1 on paper */ --ink-soft: #4a5754;/* secondary type. 6.4:1 on paper */ --rule: #b4c0b7; /* the ruled blank, the band hairlines, the fixed suffix */ --live: #00bad1; /* brand cyan. CARET ONLY (see header) */ --act: #006f7d; /* the solid button. 5.9:1 with white */ --flag: #c2432a; /* validation message. 6.2:1 on paper */ --f-display: 'Frank Ruhl Libre', 'David Libre', Georgia, serif; --f-mono: 'JetBrains Mono', Consolas, ui-monospace, monospace; --step: clamp(1rem, 2.5vw, 1.5rem); } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: var(--step); padding: clamp(1rem, 3vw, 2rem); background: var(--paper); color: var(--ink); font-family: var(--f-display); font-weight: 400; line-height: 1.5; } /* ── Chrome ──────────────────────────────────────────────────────────── */ .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .mark { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.02em; } .lang { font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.7rem; cursor: pointer; } .lang:hover { border-color: var(--ink-soft); color: var(--ink); } /* ── Stage ───────────────────────────────────────────────────────────── */ .stage { align-self: center; width: 100%; max-width: 44rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--step); } .ask { margin: 0; font-weight: 700; font-size: clamp(1.5rem, 4.5vw, 2.5rem); line-height: 1.2; text-align: start; text-wrap: balance; } /* ── The address band ──────────────────────────────────────────────────── The one LTR object on an RTL page: it is the part a machine reads. Hairlines top and bottom put it in its own register, the way a form field sits in its own ruled row. */ /* Asymmetric on purpose: the ruled blank already reads as a bottom edge, so equal padding leaves the field visually stranded high in the band. */ .band { border-block: 1px solid var(--rule); padding-block: clamp(1rem, 3vw, 1.75rem) clamp(0.625rem, 2vw, 1rem); } .addr { display: flex; align-items: baseline; white-space: nowrap; overflow-x: auto; overflow-y: hidden; /* Room for the ruled blank, which hangs below the field's box. `overflow-y: hidden` (needed so the horizontal scroll never grows a vertical one) clips at the PADDING edge — without this the rule is painted and then cropped away. */ padding-bottom: 0.35em; font-family: var(--f-mono); font-size: clamp(1.5rem, 6vw, 3.5rem); line-height: 1.25; scrollbar-width: thin; } .addr__field { position: relative; flex: 0 0 auto; } /* The ruled blank. Drawn under the editable portion only — the affordance is "fill this in", which is the same affordance as every ruled blank on a טופס 101. It draws in on load; see .ready and the reduced-motion block. */ .addr__field::after { content: ''; position: absolute; inset-inline: 0; bottom: -0.15em; height: 2px; background: var(--rule); transform: scaleX(0); transform-origin: left center; transition: transform 0.22s ease-out, background-color 0.15s linear, height 0.15s linear; } .ready .addr__field::after { transform: scaleX(1); } .addr__field:focus-within::after { background: var(--act); height: 3px; } /* Mirrors the input's text so JS can size the field to its content. Measured at the input's 700 weight, not the placeholder's 400, so an empty field is if anything slightly roomy rather than clipping the first character typed. */ .addr__sizer { position: absolute; visibility: hidden; pointer-events: none; white-space: pre; font: inherit; font-weight: 700; letter-spacing: inherit; } .addr__input { font: inherit; font-weight: 700; color: var(--ink); caret-color: var(--live); /* the only cyan on the page */ background: none; border: 0; padding: 0; margin: 0; width: 4ch; min-width: 4ch; border-radius: 0; appearance: none; } .addr__input::placeholder { color: var(--rule); font-weight: 400; opacity: 1; } /* The input's focus indicator is the rule turning --act and thickening (:focus-within above), which clears 3:1. Suppress the default outline only here, where a replacement is guaranteed. */ .addr__input:focus, .addr__input:focus-visible { outline: none; } .addr__suffix { flex: 0 0 auto; font-weight: 400; color: var(--rule); } /* ── Error ─────────────────────────────────────────────────────────────── Sits below the band, not inside it: an always-reserved empty line within the hairlines leaves the field stranded in a hollow box. Height is still reserved so nothing below it jumps when a message appears. */ .err { margin: 0.75rem 0 0; min-height: 1.5em; font-size: 1rem; color: var(--flag); text-align: start; } /* ── Action ──────────────────────────────────────────────────────────── */ .go { margin-top: 0.5rem; display: flex; justify-content: flex-end; } .btn { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; color: #fff; background: var(--act); border: 0; border-radius: 4px; padding: 0.6rem 1.6rem; cursor: pointer; transition: background-color 0.15s linear; } .btn:hover { background: #005a66; } /* ── Supporting copy ─────────────────────────────────────────────────── */ .help { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; text-align: start; text-wrap: pretty; } .foot { text-align: start; } .staff { color: var(--ink-soft); font-size: 0.9375rem; text-decoration-color: var(--rule); text-underline-offset: 0.25em; } .staff:hover { color: var(--ink); text-decoration-color: currentColor; } /* ── Focus ─────────────────────────────────────────────────────────────── Ink, not cyan: 15:1 against both the paper and the button, so one rule covers every control. */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ── Utility ─────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 10; } .skip:focus { inset-inline-start: 0; } /* ── Motion ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .addr__field::after { transition: none; transform: scaleX(1); } .btn, .lang { transition: none; } }