/* ========================================================================== Biozheen login — presentation only. Direction comes from one place: dir="rtl|ltr" on . Every rule below uses CSS logical properties so the whole layout mirrors from that single attribute. Do not introduce padding-left/right, margin-left/right, or bare left:/right: here — they will not flip for Arabic, Kurdish or Badini. ========================================================================== */ /* NRT is the page's primary face for every language — it covers both Arabic script and Latin, so Kurdish, Badini, Arabic and English all render in one typeface. woff first (24KB vs 54KB for the ttf); ttf is the fallback. The directory name contains a space, so it must be encoded as %20 — an unencoded space silently fails to load the font. */ @font-face { font-family: 'NRT'; src: url('../Font/NRT%20Font/NRT-Reg.woff') format('woff'), url('../Font/NRT%20Font/NRT-Reg.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* Kept as a fallback behind NRT. A declared @font-face is only downloaded if the browser actually needs it to render, so this costs nothing. */ @font-face { font-family: 'Rudaw'; src: url('../Font/rudawregular2.ttf') format('truetype'); font-display: swap; } :root { --hero-1: #072a31; --hero-2: #0e4a55; --hero-3: #14606b; --sheet: #ffffff; --field: #f1f5f7; --cta: #0f766e; --cta-hov: #0e6d66; --ring: #14b8a6; --ink: #0f172a; --muted: #5d6b7d; --err-bg: #fef2f2; --err-line: #fecaca; --err-ink: #b91c1c; --ok-bg: #ecfdf5; --ok-line: #a7f3d0; --ok-ink: #065f46; /* Three-tone arc banner, as in the reference: two concentric arcs sharing a centre off-canvas above the top-right corner, so the curves sweep gently down-left instead of bending tightly in the corner. Both arcs share the same centre — that is what makes them read as concentric bands rather than two unrelated blobs. The hard stops (45% / 45.4%) keep each arc edge crisp; a soft stop would smear them back into an ordinary gradient. Tones are deliberately close together (13.5:1, 11.5:1, 8.5:1 against white) so the banding stays subtle and the heading is legible over any of the three. */ --arc-1: #0a333c; --arc-2: #0d3f49; --arc-3: #12505c; --hero-grad: radial-gradient(circle at 96% -28%, var(--arc-3) 0 45%, transparent 45.4%), radial-gradient(circle at 96% -28%, var(--arc-2) 0 74%, transparent 74.4%), linear-gradient(165deg, var(--arc-1) 0%, var(--hero-1) 100%); --pad-x: clamp(18px, 5vw, 30px); --sheet-radius: clamp(22px, 6vw, 30px); --h1: clamp(1.45rem, 6vw, 2rem); --field-h: clamp(48px, 7.5vh, 56px); --cta-h: clamp(50px, 8vh, 58px); --gap: clamp(10px, 2.2vh, 18px); --font: 'NRT', 'Segoe UI', Tahoma, Arial, sans-serif; } html[lang="ar"] { --font: 'NRT', 'Noto Sans Arabic', Tahoma, Arial, sans-serif; } html[lang="ku"], html[lang="ba"] { --font: 'NRT', 'Rudaw', 'Noto Sans Arabic', Tahoma, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* The page itself never scrolls. Only .sheet may, and only as a safety valve when the on-screen keyboard shrinks a short viewport. */ html, body { height: 100%; overflow: hidden; } body { font-family: var(--font); color: var(--ink); background: var(--hero-grad); -webkit-font-smoothing: antialiased; } .auth-shell { height: 100vh; /* fallback */ height: 100dvh; /* excludes mobile browser chrome */ display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--hero-grad); } /* ===== Hero ===== */ .hero { padding-block-start: calc(env(safe-area-inset-top, 0px) + clamp(14px, 3vh, 26px)); padding-block-end: clamp(34px, 5vh, 50px); padding-inline: var(--pad-x); color: #fff; /* Shortening the subtitle to one line collapsed the hero to the point where the arc banner had no room to read. vh-based so it still shrinks on short screens rather than forcing a scrollbar. */ min-block-size: clamp(140px, 25vh, 240px); display: flex; flex-direction: column; justify-content: flex-start; } .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Bio.png is a dark teal wordmark; on the dark hero it would disappear. brightness(0) crushes it to black, invert(1) lifts it to pure white, preserving the wordmark shape without needing a second asset. */ .hero-brand img { height: clamp(26px, 4.6vh, 36px); width: auto; display: block; filter: brightness(0) invert(1); } .hero h1 { font-size: var(--h1); line-height: 1.22; font-weight: 700; text-align: start; margin-block-start: clamp(12px, 2.6vh, 24px); letter-spacing: -.01em; } .hero .hero-sub { margin-block-start: 6px; font-size: clamp(.78rem, 3.2vw, .88rem); color: rgba(255, 255, 255, .72); text-align: start; line-height: 1.45; } /* ===== Language popover ===== */ .lang-wrap { position: relative; display: flex; align-items: center; gap: 8px; } .lang-btn, .install-chip { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); color: #fff; border-radius: 999px; padding-block: 7px; padding-inline: 12px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .lang-btn:hover, .install-chip:hover { background: rgba(255, 255, 255, .22); } .install-chip { display: none; } .install-chip[data-ready="true"] { display: flex; } .lang-pop { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-inline-size: 158px; background: #fff; border-radius: 14px; box-shadow: 0 14px 38px rgba(7, 42, 49, .34); padding: 6px; display: none; z-index: 30; } .lang-pop[data-open="true"] { display: block; } .lang-opt { display: flex; align-items: center; gap: 10px; inline-size: 100%; background: none; border: 0; font: inherit; font-size: .86rem; color: var(--ink); padding-block: 9px; padding-inline: 10px; border-radius: 10px; cursor: pointer; text-align: start; } .lang-opt:hover { background: var(--field); } .lang-opt.active { background: var(--field); color: var(--cta); font-weight: 700; } .lang-opt img { inline-size: 22px; block-size: 15px; object-fit: cover; border-radius: 3px; flex: none; } /* ===== iOS "Add to Home Screen" hint ===== iOS Safari never fires beforeinstallprompt and Apple exposes no API to trigger installation, so iPhone users get instructions rather than a prompt. Revealed by JS only on iOS, and only when not already installed. */ .ios-pop { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); inline-size: min(78vw, 268px); background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 14px 38px rgba(7, 42, 49, .34); padding: 14px; display: none; z-index: 30; text-align: start; } .ios-pop[data-open="true"] { display: block; } .ios-pop-title { font-size: .88rem; font-weight: 700; margin-block-end: 10px; } .ios-steps { list-style: none; display: flex; flex-direction: column; gap: 9px; } .ios-steps li { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; line-height: 1.45; color: var(--muted); } .ios-num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cta); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* The iOS share glyph is an upward arrow and reads the same in both directions, so it is deliberately not mirrored. */ .ios-share { color: var(--cta); margin-inline-start: 4px; } /* ===== Sheet ===== */ .sheet { background: var(--sheet); border-start-start-radius: var(--sheet-radius); border-start-end-radius: var(--sheet-radius); margin-block-start: -24px; padding-block-start: clamp(18px, 3vh, 26px); padding-block-end: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vh, 18px)); padding-inline: var(--pad-x); display: flex; flex-direction: column; gap: var(--gap); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; box-shadow: 0 -12px 40px rgba(7, 42, 49, .28); } .sheet::-webkit-scrollbar { display: none; } /* ===== Role pills ===== */ .role-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--field); border-radius: 999px; padding: 4px; --i: 0; --dir: 1; flex: none; } [dir="rtl"] .role-tabs { --dir: -1; } /* The thumb is anchored logically (inset-inline-start flips for RTL) and moved with a transform, whose sign is flipped by --dir. Transform is used rather than animating the inset because it composites smoothly. The JS only ever sets --i to 0, 1 or 2 and stays direction-agnostic. */ .role-tabs::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: calc((100% - 8px) / 3); border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(7, 42, 49, .18); transform: translateX(calc(var(--i) * var(--dir) * 100%)); transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .role-tab { position: relative; z-index: 1; background: none; border: 0; font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted); block-size: 40px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .role-tab[aria-selected="true"] { color: var(--cta); } .role-tab i { font-size: .82rem; } /* ===== Forms ===== */ .forms-wrap { display: flex; flex-direction: column; } .login-form { display: none; flex-direction: column; gap: var(--gap); } .login-form.active { display: flex; } .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: .79rem; font-weight: 600; color: var(--muted); text-align: start; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap > i { position: absolute; inset-inline-start: 14px; color: var(--muted); font-size: .95rem; pointer-events: none; } .input-wrap input { inline-size: 100%; block-size: var(--field-h); border: 1.5px solid transparent; background: var(--field); border-radius: 14px; font: inherit; font-size: 1rem; color: var(--ink); padding-inline-start: 42px; padding-inline-end: 14px; transition: border-color .16s, background .16s, box-shadow .16s; } .input-wrap input::placeholder { color: var(--muted); opacity: 1; } .input-wrap input:focus { outline: none; border-color: var(--ring); background: #fff; box-shadow: 0 0 0 4px rgba(20, 184, 166, .15); } .input-wrap input[readonly] { background: var(--ok-bg); border-color: var(--ok-line); } .input-wrap.has-toggle input { padding-inline-end: 46px; } .toggle-pass { position: absolute; inset-inline-end: 8px; background: none; border: 0; color: var(--muted); font-size: .95rem; cursor: pointer; padding: 6px; line-height: 1; } /* * The code, mobile and password fields keep dir="ltr" so the bidi algorithm * never reorders their characters — without it "07XX XXX" renders with its * parts rearranged on an RTL page. * * That attribute also flips the field's own inline axis, so padding-inline-* * would land on the wrong side. Alignment and icon padding are put back onto * the page's side here, leaving only character order LTR: in Kurdish, Badini * and Arabic the value lines up on the right with everything else. * * This text-align: right is the ONE physical direction property permitted in * this file, because the element's own dir is fixed to ltr. */ [dir="rtl"] .input-wrap input[dir="ltr"] { text-align: right; padding-inline-start: 14px; padding-inline-end: 42px; } [dir="rtl"] .input-wrap.has-toggle input[dir="ltr"] { padding-inline-start: 46px; padding-inline-end: 42px; } /* ===== Remember row ===== */ .remember-row { display: flex; align-items: center; gap: 9px; } .remember-row input[type="checkbox"] { inline-size: 18px; block-size: 18px; accent-color: var(--cta); flex: none; cursor: pointer; } .remember-row label { font-size: .84rem; color: var(--muted); cursor: pointer; } /* ===== Primary button ===== */ .login-btn { block-size: var(--cta-h); border: 0; border-radius: 16px; background: var(--cta); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 22px rgba(15, 118, 110, .32); transition: background .18s, transform .12s, box-shadow .18s; flex: none; } /* Darkens on hover. Lightening toward #0d9488 would drop the white label to 3.74:1 and fail a contrast check the resting state passes. */ .login-btn:hover:not(:disabled) { background: var(--cta-hov); } .login-btn:active:not(:disabled) { transform: translateY(1px); } .login-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .login-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } /* The arrow glyph points the wrong way on an RTL page. */ [dir="rtl"] .login-btn i { transform: scaleX(-1); } /* ===== Alerts and prefill note ===== */ .alert { display: flex; align-items: flex-start; gap: 9px; padding-block: 11px; padding-inline: 13px; border-radius: 12px; font-size: .83rem; line-height: 1.45; background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); text-align: start; flex: none; } .alert i { margin-block-start: 2px; flex: none; } .prefill-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); border-radius: 12px; padding-block: 9px; padding-inline: 12px; font-size: .79rem; } .prefill-note button { background: none; border: 0; color: var(--cta); font: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap; } /* ===== Sheet footer ===== */ .sheet-foot { margin-block-start: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block-start: clamp(8px, 1.6vh, 14px); border-block-start: 1px solid #eef2f4; flex: none; } .quick-links { display: flex; gap: 18px; } .quick-link { color: var(--muted); text-decoration: none; font-size: .86rem; display: flex; align-items: center; gap: 7px; } /* The Location / Contact glyphs sat at the label's own size, which made them read as punctuation rather than icons. Sized up independently of the text and given the brand teal so they are recognisable at a glance. */ .quick-link i { font-size: 1.05rem; color: var(--cta); } .quick-link:hover { color: var(--cta); } .site-credit { font-size: .71rem; color: var(--muted); opacity: .85; text-align: center; } /* ===== Short screens (small and landscape phones) ===== Drops the two most expendable elements rather than allowing a scrollbar. The 600px threshold is set from measurement, not taste: at 320x568 the sheet overflowed its own box by 20px until the subtitle was dropped. */ @media (max-height: 600px) { .hero { padding-block-end: clamp(22px, 4vh, 32px); } .hero h1 { font-size: 1.15rem; margin-block-start: 8px; } .hero .hero-sub { display: none; } .site-credit { display: none; } } /* ===== Desktop: the same shell, centred as a card ===== */ @media (min-width: 720px) { body { display: grid; place-items: center; padding: 20px; } .auth-shell { inline-size: 460px; block-size: min(760px, calc(100dvh - 40px)); border-radius: 32px; overflow: hidden; box-shadow: 0 30px 80px rgba(7, 42, 49, .45); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ===== "Open in app" bar (in-app browsers only) ===== Shown when the page is loaded inside WhatsApp's or Meta's webview, where the installed PWA, notifications and offline caching are unavailable. */ .bz-openapp { position: fixed; inset-inline: 10px; inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 60; display: flex; align-items: center; gap: 12px; background: #0e4a55; color: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(7, 42, 49, .45); font-family: inherit; } .bz-openapp-txt { flex: 1; min-inline-size: 0; text-align: start; } .bz-openapp-txt b { display: block; font-size: .84rem; font-weight: 700; } .bz-openapp-txt span { display: block; margin-block-start: 3px; font-size: .72rem; line-height: 1.45; color: rgba(255, 255, 255, .78); } .bz-openapp-acts { flex: none; display: flex; flex-direction: column; gap: 6px; } .bz-openapp-go { background: #0f766e; color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; } .bz-openapp-later { background: none; border: 0; color: rgba(255, 255, 255, .7); font: inherit; font-size: .7rem; cursor: pointer; padding: 2px; }