# Chunk 03 — iOS-Style Visual Polish (CSS only)

> Re-skin RongBerong AI so it feels like an **iOS / Apple-style interface**: clean, minimal, soft.
> **No functionality changes. No markup changes. No JS changes.** This chunk touches **CSS only** —
> it refines design tokens and component styles in `public/css/rongberong.css` and
> `public/css/editor-shell.css`.

---

## Goal
Make the whole app read as native-iOS: generous whitespace, soft rounded "squircle" corners,
restrained translucency (frosted glass), gentle depth instead of heavy shadows, a calm system-style
palette, SF-like typography, and smooth spring motion. The layout, controls, copy, and behavior stay
exactly as they are — only the *look and feel* changes.

---

## Part A — Preservation Contract  ⚠️ (must not break)

This is a pure visual pass. Hard limits:

- **CSS only.** Edit `public/css/rongberong.css` and `public/css/editor-shell.css`. Do **not** edit
  `.blade.php` files, `public/js/rongberong.js`, `public/js/editor-shell.js`, controllers, routes,
  or `lang/*.json`.
- **Do not change any class names, IDs, `data-v`, `data-group`, or DOM structure.** Style the
  existing selectors only. (The JS contract from chunk 01 §A.4–A.5 and chunk 02 stays intact.)
- **Keep every existing CSS custom property name** in `:root` (`--accent`, `--bg`, `--radius`,
  `--shadow-*`, `--glass-*`, `--ease-*`, etc.). You may **retune their values**; you must not rename
  or remove them, because other rules and inline styles reference them.
- **Don't break interactive states**: `.opt.sel`, `.fg-toggle`, focus rings, hover, disabled,
  loading/skeleton, validation (`#req`/`#err`) must all remain clearly visible (just restyled).
- **Bilingual:** Bangla text must stay readable — don't reduce line-height or letter-spacing so far
  that Bangla glyphs clip. Test EN + বাংলা.
- **Accessibility:** keep contrast ≥ 4.5:1 for text and ≥ 3:1 for UI/borders; keep visible focus
  states; honor `prefers-reduced-motion`; keep tap targets ≥ 44px (iOS standard).
- **Performance:** translucency/blur is expensive — cap `backdrop-filter` usage (see B.4) and provide
  a solid fallback so low-power devices don't jank.

---

## Part B — The iOS aesthetic (what to change)

### B.1 Color — calm system palette
Keep the ocean-blue brand but soften and neutralize surroundings toward iOS system colors.
- Keep `--accent: #0EA5E9` as the tint/action color (this is your "iOS accent/tint").
- Surfaces toward iOS grouped-table backgrounds:
  - `--bg` → a near-white system gray, e.g. `#F2F2F7` (iOS system grouped background).
  - `--surface` stays `#FFFFFF`; `--surface-subtle` → `#F9F9FB`; `--surface-elevated` → `#FFFFFF`.
- Borders → hairline separators: `--border: rgba(60,60,67,0.12)`, `--border-strong: rgba(60,60,67,0.18)`
  (iOS separator alpha values).
- Text → iOS label colors: `--text: #1C1C1E` (label), `--muted: rgba(60,60,67,0.6)` (secondary label).
- Keep `--success`/`--danger`; optionally align to iOS system green `#34C759` / red `#FF3B30` for a
  more native feel.
- **Reduce color noise:** lean on white + system gray + one accent. De-emphasize the rainbow gradient
  (reserve it only for the logo mark, not large surfaces).

### B.2 Shape — squircle corners, bigger radii
iOS uses large, continuous (squircle) corners.
- Bump radii: `--radius-xs: 8px`, `--radius-sm: 12px`, `--radius: 16px`; add `--radius-lg: 22px`,
  `--radius-pill: 999px`.
- Cards, panels, modals, the canvas frame, sheets → `--radius-lg`.
- Buttons/inputs/chips → `--radius` or pill.
- Where supported, hint the squircle look with larger radius + tight border; (optional) use
  `border-radius` with generous values rather than true superellipse math.

### B.3 Depth — soft, low shadows (no heavy drop shadows)
iOS depth is subtle.
- Soften shadows to low-opacity, tight, neutral (not blue-tinted heavy):
  - `--shadow-sm: 0 1px 2px rgba(0,0,0,0.04)`
  - `--shadow-md: 0 2px 8px rgba(0,0,0,0.06)`
  - `--shadow-lg: 0 8px 24px rgba(0,0,0,0.08)`
  - `--shadow-xl: 0 16px 40px rgba(0,0,0,0.10)`
- Prefer **hairline borders + tiny shadow** over big glows. Reduce/retire `--shadow-glow` to a
  thin accent focus ring: `0 0 0 4px rgba(10,132,255,0.18)`.
- Remove large `filter: blur(80px)` decorative blobs or dial them way down — iOS is flatter.

### B.4 Material — frosted glass, used sparingly
- Keep `--glass-bg` but make it lighter/cleaner: `rgba(255,255,255,0.72)`; `--glass-blur:
  blur(20px) saturate(180%)` (iOS-like). Always pair with `-webkit-backdrop-filter`.
- Apply frosted glass to **bars and sheets only**: top bar, the mobile bottom tab bar / bottom sheet,
  popovers/menus. Do **not** frost large content areas or every card (perf + clarity).
- Provide a solid fallback: `@supports not (backdrop-filter: blur(1px)) { ... use --surface ... }`.

### B.5 Typography — SF-like, clean hierarchy
- Use the Apple system stack first so it literally renders SF on Apple devices, with your brand fonts
  as graceful fallback:
  `--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Manrope", system-ui, sans-serif;`
  (keep Syne/Fraunces for display/editorial if desired, but lighten their use).
- iOS weight/scale feel: regular 400 body, 500–600 for emphasis (avoid heavy 800 everywhere).
- Slightly tighten heading letter-spacing (`-0.01em`), keep body line-height ~1.5 (1.6 for Bangla).
- Section headers: smaller, uppercase, muted secondary-label color (iOS grouped-list header style),
  or sentence-case medium — pick one and apply consistently.

### B.6 Controls — iOS component feel
Restyle existing elements (no markup change):
- **Buttons:** filled accent (action), tinted (accent text on accent-10% bg), and plain (text-only).
  Pill or `--radius`. Active state = subtle scale `0.97`, not heavy.
- **Segmented control (`#toggle`):** make it look like the iOS segmented control — gray track,
  white selected segment with tiny shadow, equal segments. (It already has 2 buttons; just style.)
- **Chips / `.opt`:** soft gray fill, hairline border; selected = accent tint fill + accent ring
  (works with chunk-02 image cards too — selected ring stays).
- **Inputs:** filled light-gray field (iOS style) or white with hairline; focus = accent ring (B.3).
- **Toggles/switches** (if any): iOS pill switch.
- **Sliders** (if any): thin track, large round knob with soft shadow.
- **Lists/fields:** group into rounded "inset grouped" cards with hairline separators between rows.

### B.7 Motion — smooth & springy, reduced
- Use the existing `--ease-spring` / `--ease-out` for entrances; keep durations short (150–250ms).
- Subtle press feedback (scale 0.97–0.98). Sheet/drawer slide with spring.
- Honor `@media (prefers-reduced-motion: reduce)` — disable transforms, keep fades.

### B.8 Spacing — more air
Increase paddings/margins slightly for the calm iOS density: card padding ~16–20px, comfortable gaps
(12–16px), roomy section spacing. Don't crowd.

---

## Part C — Build plan for Claude Code

1. **Read** `docs/01-design-spec.md` (Part A contract), this doc Part A, and skim both CSS files
   (`public/css/rongberong.css`, `public/css/editor-shell.css`) to see what tokens/selectors exist.
2. **Tokens first:** in the `:root` of `rongberong.css`, retune values per §B.1–B.5 (keep names).
   Add only additive tokens (`--radius-lg`, `--radius-pill`) if helpful.
3. **Global elements:** body background, typography stack, default radii, hairline borders.
4. **Component pass** (selectors already exist — restyle only): top bar, rail, config panel, cards,
   `.opt`/`.opts` (incl. chunk-02 image cards), `#toggle` segmented control, inputs, buttons,
   `.field-group`/`.fg-toggle`, prompt/preset cards, canvas + empty state, loading/skeleton,
   `#req`/`#err`, modals/sheets, mobile bottom bar.
5. **Glass + fallback:** apply frosted glass to bars/sheets only, with `@supports` fallback (§B.4).
6. **Motion + reduced-motion** per §B.7.
7. **Self-review:** run the Acceptance Checklist; screenshot key screens in EN and বাংলা, desktop and
   mobile, light environment. Diff to confirm no `.blade.php`/`.js` files changed.
8. Update chunk 03 status in `docs/README.md`.

> Suggestion: do tokens + 2–3 core components first, eyeball it, then continue. Keep commits small
> and CSS-only.

---

## Acceptance Checklist
1. **Only CSS changed** — `git status` shows edits limited to `public/css/*.css`. No Blade/JS/lang edits.
2. App still fully works: voice, upload (file+URL), Photo/Video toggle, option selection, advanced
   fields, presets, prompt preview/library, generate (photo), generate (video) — all unchanged.
3. Look reads as iOS: soft squircle corners, hairline separators, gentle shadows, calm gray+accent
   palette, SF-like type, frosted bars.
4. `.opt.sel` and chunk-02 image-card selection still clearly visible (accent ring/tint).
5. Segmented `#toggle` looks like an iOS segmented control and still switches output.
6. Focus rings visible on keyboard nav; tap targets ≥ 44px.
7. Contrast ≥ 4.5:1 text / ≥ 3:1 UI; verify muted text on gray.
8. EN and বাংলা both render cleanly; Bangla not clipped.
9. `prefers-reduced-motion` disables transforms.
10. No jank: blur limited to bars/sheets; `@supports` fallback present; decorative mega-blurs removed/dialed down.

---

## Reference summary
- **Scope:** CSS-only iOS re-skin of `public/css/rongberong.css` + `public/css/editor-shell.css`.
- **Keep:** all class/ID/`data-*` selectors, all `:root` token *names*, all behavior, all i18n.
- **Change (values/styles only):** palette → iOS system gray + accent; radii → squircle/larger;
  shadows → soft/low; glass → light, bars/sheets only with fallback; type → SF system stack;
  controls → iOS segmented/chips/inputs/buttons; motion → spring + reduced-motion; spacing → airier.