/* * Dardashah web fallback landing page. * Tokens ported from docs/design-direction.md §3 (Quiet Trust) and §Handoff * notes (spacing/radii scale). Logical properties throughout — this page is * RTL-first, and `dir` flips at the level via main.ts. */ :root { /* Brand */ --brand-fill: #0D7469; --brand-on-fill: #FFFFFF; --brand-tint: #0B655C; --brand-subtle: #E2F1EE; --brand-on-subtle: #0B655C; /* Surfaces */ --surface-base: #F2F4F4; --surface-raised: #FFFFFF; --surface-sunken: #E7ECEB; --border-subtle: #DCE2E1; --border-interactive: #6E7D7B; /* Text */ --text-primary: #12201F; --text-secondary: #5A6B69; --text-tertiary: #647271; /* Status */ --warning-tint: #8A5A00; --warning-subtle: #FBF0DC; --danger-tint: #B3261E; --danger-subtle: #FBE9E7; /* Spacing (design-direction.md Handoff notes) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Radii */ --radius-field: 12px; --radius-button: 14px; --radius-card: 20px; --radius-glyph: 24px; } @media (prefers-color-scheme: dark) { :root { --brand-fill: #12756B; --brand-on-fill: #FFFFFF; --brand-tint: #4FC5B8; --brand-subtle: #0F2B29; --brand-on-subtle: #4FC5B8; --surface-base: #0E1414; --surface-raised: #1C2423; --surface-sunken: #262F2E; --border-subtle: #2C3635; --border-interactive: #74817F; --text-primary: #E9EEED; --text-secondary: #A2AFAD; --text-tertiary: #8A9795; --warning-tint: #F0B429; --warning-subtle: #2E2205; --danger-tint: #FF6B60; --danger-subtle: #3A1512; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--surface-base); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Geeza Pro", sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; } /* Arabic body copy: system default line-spacing is tuned for Latin (design-direction.md §4.5). */ :lang(ar) { line-height: 1.7; } .page { max-width: 480px; margin-inline: auto; padding-inline: var(--space-4); min-height: 100vh; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); } .brand { font-size: 1.125rem; font-weight: 700; color: var(--brand-tint); } .lang-toggle { display: flex; gap: var(--space-1); background: var(--surface-sunken); border-radius: var(--radius-button); padding: 2px; } .lang-btn { appearance: none; border: none; background: transparent; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; padding-block: var(--space-1); padding-inline: var(--space-3); border-radius: calc(var(--radius-button) - 4px); cursor: pointer; min-height: 32px; } .lang-btn[aria-pressed="true"] { background: var(--surface-raised); color: var(--brand-tint); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); } main { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: var(--space-6); } .card { width: 100%; background: var(--surface-raised); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); } .avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-2); background: var(--tint-bg-light, var(--surface-sunken)); color: var(--tint-fg-light, var(--text-secondary)); } @media (prefers-color-scheme: dark) { .avatar { background: var(--tint-bg-dark, var(--surface-sunken)); color: var(--tint-fg-dark, var(--text-secondary)); } } .avatar--generic { background: var(--surface-sunken); color: var(--text-tertiary); } .name { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); } .member-count { margin: 0; font-size: 0.8125rem; color: var(--text-tertiary); } .headline { margin: var(--space-2) 0 0; font-size: 1.375rem; font-weight: 700; color: var(--text-primary); text-wrap: balance; } .secondary { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); } .cta-button { appearance: none; border: none; width: 100%; margin-top: var(--space-4); padding-block: var(--space-3); border-radius: var(--radius-button); background: var(--brand-fill); color: var(--brand-on-fill); font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; } .cta-button:disabled, .cta-button--disabled { background: var(--surface-sunken); color: var(--text-tertiary); cursor: default; } .text-button { appearance: none; border: none; background: transparent; color: var(--brand-tint); font-size: 0.875rem; font-weight: 600; cursor: pointer; margin-top: var(--space-2); padding-block: var(--space-2); min-height: 44px; } .code-block { width: 100%; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--brand-subtle); border-radius: var(--radius-field); display: flex; flex-direction: column; align-items: center; gap: 2px; } .code-label { font-size: 0.75rem; font-weight: 600; color: var(--brand-on-subtle); text-transform: none; } .code-value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em; color: var(--brand-on-subtle); unicode-bidi: isolate; } .code-hint { font-size: 0.75rem; color: var(--text-secondary); } .notice { width: 100%; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-field); font-size: 0.875rem; text-align: start; } .notice--warning { background: var(--warning-subtle); color: var(--warning-tint); } .notice--info { background: var(--surface-sunken); color: var(--text-secondary); } .card--dead .headline { color: var(--danger-tint); } .footer { padding-block: var(--space-5); text-align: center; } /* Quiet Trust: present, not shouting — TextTertiary throughout, no icons, no weight. */ .footer-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); } .footer-link { color: var(--text-tertiary); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 2px; } .footer-sep { color: var(--text-tertiary); font-size: 0.8125rem; } #privacy-group:not([hidden]) { display: inline-flex; align-items: center; gap: var(--space-2); } /* ── Report dialog (Phase 3) ────────────────────────────────────────────── * Native : focus trapping, Esc-to-close and an inert background come * from the element, so this file only has to dress it. Logical properties * throughout — the dialog inherits `dir` from and mirrors with it. */ .dialog { width: min(420px, calc(100vw - 2 * var(--space-4))); padding: 0; border: 0.5px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--text-primary); } .dialog::backdrop { background: rgb(0 0 0 / 0.4); } .dialog-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); text-align: start; } .dialog-title { margin: 0; font-size: 1.125rem; font-weight: 700; } .dialog-intro { margin: 0 0 var(--space-2); font-size: 0.875rem; color: var(--text-secondary); } .choice-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 2px; } .choice-legend { padding: 0; font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); } .choice { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); font-size: 0.9375rem; cursor: pointer; min-height: 44px; } .choice input { accent-color: var(--brand-fill); width: 20px; height: 20px; flex: none; margin: 0; } .field-label { margin-top: var(--space-3); font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); } .field-input { width: 100%; padding: var(--space-3); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-field); background: var(--surface-base); color: var(--text-primary); font: inherit; resize: vertical; } .field-input:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 1px; } .field-hint { margin: 0; font-size: 0.75rem; color: var(--text-tertiary); } .dialog-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); } .dialog-fallback { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--text-tertiary); } /* The footer's report control is a button; it must read as the quiet text link * beside it, not as a control with chrome of its own. */ .footer-link--button { appearance: none; border: none; background: transparent; font: inherit; font-size: 0.8125rem; padding: 0; cursor: pointer; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Loading skeleton */ .skeleton-block { background: var(--surface-sunken); } .skeleton-line { height: 14px; border-radius: 7px; background: var(--surface-sunken); } .skeleton-line--name { width: 40%; } .skeleton-line--headline { width: 80%; height: 20px; } .avatar.skeleton-block, .skeleton-line { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .avatar.skeleton-block, .skeleton-line { animation: none; } } .no-js-fallback { max-width: 480px; margin-inline: auto; padding: var(--space-6) var(--space-4); text-align: center; }