/* ============================================================================ form.css — RTL-first Typeform skin for the Raqeemi document generator ---------------------------------------------------------------------------- The skin is Typeform's, not Tally's. What that means, concretely: ORDER one question per screen, vertically centred, everything aligned to the inline-start edge: question number, question, description, answer, then the CTA with its "or press Enter" hint. Progress is a 4px rail pinned to the bottom of the viewport; "back" is a pill in the bottom corner, out of the thumb's forward path. COLOUR Typeform's default theme — white paper, #3D3D3D question ink, one teal that owns the number, the answer, the options, the CTA and the rail. Nothing else on the screen is coloured. TYPE one family (IBM Plex Sans Arabic), three sizes: question ~34px, answer ~28px, everything else 14-17px. The answer is bigger than the description on purpose — Typeform's whole trick is that the thing you are doing is the biggest thing on the screen. Deviations are marked [D] with a reason. The two that matter: * the teal is #1E7B79, not Typeform's #4FB0AE. Typeform's own default teal is 2.58:1 on white and fails WCAG AA both as answer text and as the CTA's background. #1E7B79 is 5.03:1 and reads as the same colour. #4FB0AE is kept as --accent-2 for tints. * an underline answer field, not a boxed one, everywhere EXCEPT the line-items grid, where 15 rows x 5 borderless columns is a soup. Layout rules unchanged from the previous skin, because they are still right: * markup is emitted by Hologram from a runtime field list * page root is * NO left/right anywhere — logical properties only * same Chrome renders the PDF, so color-mix / :has / field-sizing are safe ========================================================================== */ An @import at the top of a stylesheet is render-blocking AND serialised — the browser must fetch this file, parse line 17, then start a second round trip to a third party before it can paint. On the page that must feel instant, that is the worst possible place for it. It was also the one asset a network blip could silently degrade, which is exactly why the riyal font was vendored in the first place. The PDF renderer needs these same files on disk regardless — headless Chrome runs with no network in the container — so self-hosting is the same work, done once. */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/plex/IBMPlexSansArabic-Light.woff2') format('woff2'), url('/fonts/plex/IBMPlexSansArabic-Light.ttf') format('truetype'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/IBMPlexSansArabic-Regular.woff2') format('woff2'), url('/fonts/plex/IBMPlexSansArabic-Regular.ttf') format('truetype'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex/IBMPlexSansArabic-Medium.woff2') format('woff2'), url('/fonts/plex/IBMPlexSansArabic-Medium.ttf') format('truetype'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex/IBMPlexSansArabic-SemiBold.woff2') format('woff2'), url('/fonts/plex/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plex/IBMPlexSansArabic-Bold.woff2') format('woff2'), url('/fonts/plex/IBMPlexSansArabic-Bold.ttf') format('truetype'); } /* Metric-matched fallback, same trick Tally uses for Inter ("Inter Fallback": local("Arial") + ascent/descent/size-adjust). Values below are for IBM Plex Sans Arabic against Arial; they kill the webfont swap jump. */ @font-face { font-family: 'Plex Arabic Fallback'; src: local('Arial'); ascent-override: 104%; descent-override: 30%; line-gap-override: 0%; size-adjust: 96%; } /* ============================================================================ 1. TOKENS ========================================================================== */ :root { /* ---- type ------------------------------------------------------------- */ --font-ar: 'IBM Plex Sans Arabic', 'Plex Arabic Fallback', system-ui, sans-serif; /* Latin-only runs (email, URL, VAT, IBAN). Same family — Plex Arabic ships a Latin subset (U+0000-00FF), so metrics match and nothing shifts. */ --font-mono-num: 'IBM Plex Sans Arabic', ui-monospace, monospace; --fs-root: 16px; --fs-title: 2.5rem; --fs-h2: 1.5rem; --fs-lead: 1rem; --fs-label: 0.9375rem; /* 15px */ --fs-help: 0.875rem; /* 14px — [TF] Typeform never goes below 14 on copy */ --fs-error: 0.8125rem; /* 13px */ --fs-btn: 0.9375rem; /* the SMALL buttons (عدّل، حذف، تمام كمّل) */ --fs-cta: 1.25rem; /* [TF] 20px — the one forward button, and only it */ /* [TF] Typeform's question is ~34px on a laptop and never smaller than 24. */ --fs-ask: clamp(1.5rem, 1.05rem + 2vw, 2.125rem); /* [TF] The answer is the second-biggest thing on the screen, always. */ --fs-answer: clamp(1.25rem, 1rem + 1.15vw, 1.75rem); --fs-note: 1.0625rem; /* [TF] the description under the question, 17px */ --lh-tight: 1.2; --lh-body: 1.75; /* [D] Arabic needs more leading than Typeform's 1.5: tall ascenders (ك ل أ), deep descenders (ج ح خ ع ي), plus optional harakat. */ --lh-ui: 1.5; /* ---- spacing ---------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 2.5rem; /* 40 */ --sp-8: 4rem; /* 64 */ --block-gap: var(--sp-5); --gutter: var(--sp-3); /* ---- measure ---------------------------------------------------------- */ --q-w: 42rem; /* [TF] the one-question column, 672px */ --page-w: 44rem; /* the dense multi-field page */ --page-w-wide: 60rem; /* ONLY the line-items step */ --field-w-sm: 20rem; --edge: 1.5625rem; /* 25px viewport gutter on mobile */ /* ---- color: ink / paper ---------------------------------------------- */ /* [TF] Typeform "Default" theme: white background, #3D3D3D question. */ --paper: #FFFFFF; --ink: #3D3D3D; /* [TF] question colour, verbatim */ --ink-mid: #565656; /* 7.0:1 */ --ink-soft: #6B6B6B; /* 4.83:1 — the description, still AA body text */ --ink-ghost: #9A9A9A; /* placeholders on the dense page. 2.85:1 non-text */ --line: #E4E4E4; --wash: #F7F7F7; --wash-row: #FBFBFB; /* ---- color: accent — OVERRIDDEN PER CONTRACTOR AT RUNTIME ------------- */ /* Hologram writes style="--accent:#xxx;--accent-2:#yyy" on from the issuer record. Everything below derives, so one row of DB = whole skin. [D] #1E7B79, not Typeform's own #4FB0AE. Measured: #4FB0AE is 2.58:1 on white, so BOTH the answer text and the white-on-teal CTA fail WCAG AA at Typeform's own default. #1E7B79 is 5.03:1, reads as the same teal, and keeps every Typeform surface below legal. #4FB0AE survives as --accent-2, where it is only ever a tint. */ --accent: #1E7B79; --accent-2: #4FB0AE; /* [TF] Typeform's literal default answer teal */ --accent-ink: #FFFFFF; --accent-wash: color-mix(in oklab, var(--accent) 7%, white); --accent-line: color-mix(in oklab, var(--accent) 30%, white); --link: #1E7B79; /* 5.03:1 — AA body */ /* ---- color: state ----------------------------------------------------- */ --error: #B20110; /* 7.23:1 -> AAA */ --error-wash: #FEF2F2; --ok: #15803D; --warn: #B45309; /* ---- controls --------------------------------------------------------- */ --ctl-h: 2.75rem; /* 44px — the touch floor, and the height Arabic descenders need at 16px */ --ctl-h-sm: 2.25rem; --ctl-pad-i: 0.75rem; --radius: 0.375rem; /* [TF] 6px — Typeform's button/option radius */ --radius-lg: 0.625rem; /* ---- shadow ------------------------------------------------------------ [TF] Typeform puts a shadow on exactly ONE thing, the forward button: rgba(0,0,0,.1) 0 2px 4px. The answer field has no shadow at all — it is a single 1px underline. The --sh-* recipe below is retained for the DENSE page and the line-items grid, which are not Typeform surfaces and would be unreadable as a field of borderless boxes. */ --sh-cta: rgba(0,0,0,.1) 0 2px 4px; --sh-rest: rgba(0,0,0,.06) 0 1px 1px 0, rgba(61,59,53,.14) 0 0 0 1px; --sh-hover: rgba(0,0,0,.06) 0 1px 1px 0, rgba(61,59,53,.22) 0 0 0 1px, rgba(61,59,53,.08) 0 2px 5px 0; --sh-focus: color-mix(in oklab, var(--accent) 22%, transparent) 0 0 0 4px, var(--accent) 0 0 0 1px; --sh-error: color-mix(in oklab, var(--error) 20%, transparent) 0 0 0 4px, var(--error) 0 0 0 1px; --sh-pop: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -6px rgba(0,0,0,.14); --dur: 140ms; /* [TF] Typeform eases in ~0.15s. Fast enough to read as "instant", slow enough to read as "made". */ --ease: cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ============================================================================ 2. RESET (Tally ships normalize + 3 globals; this is the same idea) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--fs-root); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; /* [T] */ -webkit-font-smoothing: antialiased; /* [T] */ -moz-osx-font-smoothing: grayscale; /* [T] */ scroll-behavior: smooth; /* Arabic-Indic vs Latin digits: force Latin so the form matches the PDF, which prints "1,234.50 ج.م". Intl.NumberFormat('ar-EG') would otherwise render ١٬٢٣٤٫٥ (verified in Chrome). */ font-variant-numeric: lining-nums tabular-nums; } body { font-family: var(--font-ar); font-size: 1rem; line-height: var(--lh-body); color: var(--ink); background: var(--paper); min-height: 100dvh; overflow-x: hidden; /* [T] */ } button, input, select, textarea { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; } button { background: none; border: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } /* Screen-reader-only. [T] Tally uses exactly this for its live region. */ .f-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================ 3. SHELL — the "no chrome" layout ------------------------------------------------------------------------ Tally has no card, no border, no header bar, no logo strip. The form floats in white space 150px down the page. That vertical air IS the product. ========================================================================== */ .f-app { display: flex; flex-direction: column; min-height: 100dvh; background: var(--paper); } .f-page { inline-size: 100%; max-inline-size: var(--page-w); margin-inline: auto; margin-block-start: 9.375rem; /* [T] 150px */ margin-block-end: 3.125rem; /* [T] 50px */ flex: 1; } /* The items step is the ONLY wide step. Scoped to >=759px on purpose: an unscoped `.f-page[data-step]` rule (specificity 0,2,0) would out-rank the mobile `.f-page` rule (0,1,0) and silently eat the 25px viewport gutter. Caught by rendering this file in headless Chrome at 390px. */ @media (min-width: 759px) { .f-page[data-step='items'] { max-inline-size: var(--page-w-wide); } } @media (max-width: 758px) { /* [T] Tally's mobile breakpoint */ .f-page { /* PADDING, not a max-inline-size cap. The cap that used to live here — max-inline-size: min(var(--page-w), calc(100vw - 2 * var(--edge))) held the 25px gutter only until some later rule set max-inline-size on the same element, and four of them do: .f-pay 42rem the paywall .f-pricing 58rem /pricing .f-cat 56rem /services .f-prose 44rem /terms All four are `.f-xxx` — specificity 0,1,0, identical to `.f-page` — and all four appear LATER in this file, so every one of them wins and the gutter silently becomes zero. MEASURED at 390px: main and every child at x=0, width = full viewport, cards touching both edges. This is the exact failure the comment 20 lines above warns about for `.f-page[data-step]`, reintroduced by four rules that were never compared against it. Padding cannot be out-ranked by a width, so a fifth one added tomorrow cannot bring it back. `.f-q` — the one-question step, which never lost its gutter — has always used `padding-inline: var(--edge)` for exactly this reason. This is the same mechanism, applied to the page that forgot it. Mobile only: on desktop these pages are narrower than the viewport and `margin-inline: auto` already centres them. */ padding-inline: var(--edge); margin-block-start: 3.125rem; /* [T] 50px */ } } /* ============================================================================ 4. TITLE / SECTION / TEXT BLOCKS ========================================================================== */ .f-title { font-size: var(--fs-title); font-weight: 700; /* [D] Tally 800. Plex Arabic 800 does not exist; 700 is its top weight and already reads heavy in Arabic. */ line-height: var(--lh-tight); letter-spacing: 0; /* never letter-space Arabic — it breaks the joining of the script */ padding-block-end: var(--sp-7); /* [T] 2.5rem */ text-wrap: balance; } @media (max-width: 758px) { .f-title { font-size: 2rem; padding-block-end: var(--sp-6); } /* [T] */ } .f-eyebrow { font-size: var(--fs-help); font-weight: 600; color: var(--accent); margin-block-end: var(--sp-2); } .f-h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.35; margin-block: var(--sp-7) var(--sp-4); } .f-h2:first-child { margin-block-start: 0; } .f-text { line-height: var(--lh-body); color: var(--ink-mid); margin-block-end: var(--block-gap); max-inline-size: 38rem; /* ~65 Arabic chars — the readable measure */ } .f-divider { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--sp-6); } /* Links use --link, NOT --accent-2. Measured: #3B82F6 on white is 3.68:1 and FAILS WCAG AA for body text. --link is a fixed accessible blue so a contractor cannot pick an accent that makes his own links unreadable. */ /* .f-share__btn is excluded for the same reason .f-btn is: it is a BUTTON that happens to be an . `a:not(.f-btn)` is 0,1,1 and out-ranks the 0,1,0 that .f-share__btn--wa uses to paint itself white, so the WhatsApp button rendered #1E7B79 text on #128C7E — measured, and near-invisible. Every button-shaped link needs to be listed here or it silently inherits link styling, including the currentColor border below. */ a:not(.f-btn):not(.f-share__btn) { color: var(--link); text-decoration: none; border-block-end: 1px solid currentColor; /* [T] border, not underline — an underline collides with Arabic descenders; a 1px border sits lower. */ font-weight: 500; /* [T] */ } /* ============================================================================ 5. FIELD — label + control + help + error ------------------------------------------------------------------------ DEVIATION FROM TALLY, ON PURPOSE: Tally renders NO