---
name: opencloud-style
description: "Use when modifying OpenCloud visual design, Tailwind classes, component styling, layout, typography, or page-level visual hierarchy. Ensures the project keeps its current clean sky-atlas visual language — airy, fresh, bright, observational — and avoids inconsistent dark or purple defaults."
---

# OpenCloud Visual Style

Use this skill whenever changing OpenCloud visual design, component styling, Tailwind classes, layout, typography, or any page-level appearance.

## Visual Direction

OpenCloud should feel like a clean sky atlas: airy, fresh, bright, and observational.

- Base surfaces: `white`, `slate-50`, `sky-50`, soft translucent white (`bg-white/80`, `bg-white/88`).
- Main accent: teal/cyan for navigation, identity, account surfaces.
- Secondary accent: sky blue for upload and action highlights.
- Supporting accent: amber only for rarity, badges, pending/review states.
- Danger accent: rose/red only for destructive or rejected states.
- Avoid purple as a default accent.
- Avoid black selected states except for text or rare high-contrast badges.

---

## Typography

**Font stack** (`src/style.css`, `App.vue`):
```
"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif
```
Monospace: `"IBM Plex Mono", "SFMono-Regular", monospace`

**Type scale:**

| Size | Use |
|------|-----|
| `text-[11px]` | Header subtitle, heatmap weekday labels |
| `text-xs` | Uppercase section labels, captions, metadata, tags, help text |
| `text-sm` | Body text, descriptions, nav items, form labels, detail sections |
| `text-base` | Hero description paragraphs |
| `text-lg` | Logo brand name, card titles, item counters |
| `text-xl` | Modal titles, subsection headings, stat cards |
| `text-2xl` | Subsection headings, stat values, settings section titles |
| `text-3xl` | Stat values, avatar initials |
| `text-4xl` | Page H1 headings (all page heroes) |
| `text-5xl` | Login/Register hero text only |
| `text-6xl`+ | Decorative single characters, error page emoji |

**Font weights:**
- `font-medium` (500) — body text, nav items, form labels, tags
- `font-semibold` (600) — modal titles, item names, emphasis
- `font-bold` (700) — headings, stat values, card titles
- `font-black` (900) — Login/Register hero only, with `leading-[1.05]`

**Letter tracking:**

| Tracking | Where |
|----------|-------|
| `tracking-[0.12em]` | Nav links, upload/button text (uppercase) |
| `tracking-[0.18em]` | Info panel section labels |
| `tracking-[0.20em]` | Stat card labels |
| `tracking-[0.22em]` | Header subtitle, modal subtitle, quick-upload header |
| `tracking-[0.24em]` | Page hero section labels |
| `tracking-[0.26em]` | Login/Register hero labels |

---

## Border Radius

**All border-radius is `0px` by default** — enforced via Naive UI theme override and global CSS:

```css
[class~='rounded'], [class*='rounded-'] { border-radius: 0 !important; }
```

Only exceptions (all `!important` or explicit inline):
- Close/map buttons: `rounded-full` / `border-radius: 9999px`
- ImageDetailModal shell: `rounded-[30px]`
- MapView info panel cards: `rounded-2xl`
- MiniLocationMap marker dot: `rounded-full`
- UploadView native inputs: `rounded-lg`

---

## Shadows

**Signature pattern: hard offset box shadows** — `shadow-[Xpx_Xpx_0_0_rgba(...)]` with zero blur.

| Shadow | Offset | Use |
|--------|--------|-----|
| `shadow-[3px_3px_0_0_rgba(...)]` | 3/3 | Small header buttons, login button |
| `shadow-[4px_4px_0_0_rgba(...)]` | 4/4 | Logo box, primary CTAs, hidden header, profile avatar |
| `shadow-[6px_6px_0_0_rgba(...)]` | 6/6 | Navigation bar, search box |
| `shadow-[8px_8px_0_0_rgba(...)]` | 8/8 | Dropdown menus, archive panel, account card |
| `shadow-[10px_10px_0_0_rgba(...)]` | 10/10 | Login/Register hero sections |
| `shadow-[12px_12px_0_0_rgba(...)]` | 12/12 | Login/Register cards, CommunityView section, AuthConfirm card |

**Shadow colors by context:**
- `rgba(15,23,42,...)` — slate-900, neutral (most common)
- `rgba(14,165,233,...)` — sky-500 (sky-colored buttons)
- `rgba(20,184,166,...)` — teal-500 (teal accents)

**Standard Tailwind shadows** also used sparingly:
- `shadow-sm` — stat cards, gallery cards, encyclopedia cards
- `shadow-lg` — cloud card hover lift
- `shadow-2xl` — modal shells

---

## Gradients

All page backgrounds use gradients — avoid flat single-color backgrounds.

| Gradient | Where |
|----------|-------|
| `linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)` | Page hero sections (standard) |
| `linear-gradient(180deg,#f0fdfa_0%,#f8fafc_100%)` | Community page, soft app pages |
| `linear-gradient(135deg,#f0fdfa_0%,#fff_48%,#eff6ff_100%)` | Login hero |
| `linear-gradient(135deg,#eff6ff_0%,#fff_42%,#f0fdfa_100%)` | Register hero |
| `linear-gradient(180deg,#f8fafc_0%,#eef6ff_55%,#f8fafc_100%)` | Admin page |
| `linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)` | Brand chip/avatar |
| `linear-gradient(180deg,#f0fdfa_0%,#fff_100%)` | Account card header |

**App shell background** (`App.vue`):
```
radial-gradient(circle_at_top_left, rgba(12,148,136,0.12), transparent 28%)
linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%)
```
Plus a dotted grid overlay: `bg-[size:32px_32px] opacity-35`.

**Body background** (`style.css`):
```
linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0)), #eef4f8
```

---

## Layout

**Page max-widths:**
- `max-w-7xl` — AppHeader, GalleryView, AdminView
- `max-w-6xl` — UploadView, ProfileView, EncyclopediaView
- `max-w-4xl` — ProfileSettingsView, CommunityView
- `max-w-3xl` — QuickUploadModal, MapPickerModal, AuthConfirmView
- `max-w-2xl` — ResetPasswordView, NotFoundView, ForbiddenView, CloudEditModal

**Page hero pattern** (consistent across all views):
```
border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]
  max-w-{6xl|7xl} mx-auto px-4 py-10
    text-sm font-medium uppercase tracking-[0.24em] text-sky-700  (subtitle)
    h1 mt-3 text-4xl font-bold text-slate-900  (title)
    p mt-4 max-w-2xl text-sm leading-7 text-slate-600  (description)
```

**Horizontal padding:** `px-4` / `sm:px-6` / `lg:px-8`

**Column systems:**
- Gallery masonry: `columns-2 gap-3 md:columns-3 xl:columns-4 [column-gap:0.75rem]`
- Card grids: `gap-4 md:grid-cols-2 xl:grid-cols-3` or `gap-4 md:grid-cols-4`
- Two-column splits: `lg:grid-cols-[1.1fr_0.9fr]`, `lg:grid-cols-[1.4fr_0.9fr]`

**Gap scale:** `gap-4`, `gap-5`, `gap-6` for card grids; `gap-2` for nav items; `space-y-6`/`space-y-8` between sections.

---

## Component Conventions

### Buttons

**Primary CTA (upload, action):**
```
inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3
text-sm font-medium uppercase tracking-[0.12em] text-sky-800
shadow-[4px_4px_0_0_rgba(14,165,233,0.14)]
transition-colors hover:bg-sky-50 hover:text-sky-900
```
Mobile: `h-8 md:h-10 md:px-4`

**Secondary/neutral:**
```
inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3
text-sm font-medium text-slate-700
shadow-[3px_3px_0_0_rgba(15,23,42,0.06)]
hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800
```

**Danger/delete:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`

**Map floating buttons:** `w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50`

**Naive UI buttons** use `secondary strong` as default; `type="primary"` for primary actions; `block size="large"` for block forms.

### Cards

**Standard card:**
```
border bg-white text-left shadow-sm
transition-all hover:-translate-y-1 hover:shadow-lg
```

**Encyclopedia unlocked variant:** `border-amber-300 shadow-amber-100/60`

**Naive UI NCard:** `class="border border-slate-200 shadow-sm"`

### Modals

**Overlay:** `fixed inset-0 z-[110|130] bg-slate-950/60` (or `bg-black/85` for image detail)

**Shell:** `bg-white shadow-2xl` with max-w matching content width. ImageDetailModal uses `rounded-[30px]`; others are square.

**Close button:** Circular (`rounded-full`, `border-radius: 9999px`), semi-transparent background.

**Sections:** `border-b border-slate-200` separates header/body/footer.

### Inputs & Forms

**Native HTML inputs:**
```
border border-slate-300 px-3 py-2.5 text-sm
focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500
```

**Labels:** `block text-sm font-medium text-slate-700 mb-1`

**Required marker:** `<span class="text-red-500">*</span>`

**Error text:** `text-sm text-red-500 mt-1`

**Checkboxes:** `h-5 w-5 border-slate-300 text-sky-500 focus:ring-sky-500`

### Tags & Badges

All use `inline-flex border px-3 py-1 text-xs font-medium` with color variants:

- `common`: `bg-sky-100 text-sky-700 border-sky-200`
- `uncommon`: `bg-amber-100 text-amber-700 border-amber-200`
- `rare`: `bg-rose-100 text-rose-700 border-rose-200`
- `approved`/`success`: `bg-emerald-100 text-emerald-700 border-emerald-200`
- `pending`: `bg-amber-100 text-amber-700 border-amber-200`
- `rejected`: `bg-rose-100 text-rose-700 border-rose-200`
- `hidden`/neutral: `bg-slate-100 text-slate-600`

### Menus & Dropdowns

**Account dropdown:**
```
border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]
```

**Menu items:**
```
flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700
transition-colors hover:bg-teal-50 hover:text-teal-800
```

**Danger menu item:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`

### Navigation

**Header:** `sticky top-0 z-50 h-28 md:h-16 bg-white/88 backdrop-blur-xl border-b border-slate-200/80`, scroll-hides with `transition-transform duration-300`.

**Selected nav item:** `bg-teal-100 text-teal-800 ring-1 ring-teal-200`

---

## Core Palette

Use these Tailwind families first:

- `slate` — text, borders, neutral panels
- `sky` — page gradients, upload/action emphasis, map/cloud atmosphere
- `teal` — navigation selected states, account identity, calm success-adjacent UI
- `cyan` — subtle sky gradients and avatar/logo surfaces
- `emerald` — explicit success/approved state only
- `amber` — pending/review/uncommon rarity
- `rose` — rejected/destructive/rare rarity

**Key hex values:**

| Role | Value |
|------|-------|
| Page background | `#eef4f8` / `#f3f7fb` |
| Body text | `#0f172a` (slate-900) |
| Secondary text | `#334155` (slate-700) |
| Muted text | `#64748b` (slate-500) |
| Borders | `#d9e3ee`, `#e2e8f0`, `#cbd5e1` |
| Selection | `rgba(15,118,110,0.18)` (teal-700) |
| Text on primary | `#0f172a` (dark, not white — Naive UI override) |

**Naive UI theme tokens** (`App.vue`):
```
primaryColor: '#0f766e' (teal-700)
infoColor: '#0369a1' (sky-700)
successColor: '#0f766e' (teal-700)
warningColor: '#d97706' (amber-600)
errorColor: '#dc2626' (red-600)
```

---

## Animation & Transitions

**Hover effects:**
- Cards: `transition-all hover:-translate-y-1 hover:shadow-lg` (lift)
- Images: `transition duration-500 group-hover:scale-[1.04]` (subtle zoom)
- Gallery items: `transition-transform duration-300 hover:-translate-y-1`
- Badges on cards: `transition-opacity md:opacity-0 md:group-hover:opacity-100`

**Modal transitions:**
- ImageDetailModal: opacity 180ms, shell scale+translateY 220ms, `cubic-bezier(0.22, 1, 0.36, 1)`
- Other modals: default Vue transitions

**Header scroll:** `transition-transform duration-300`

**Image loading:** `transition-opacity duration-300` for thumbnail-to-hires crossfade, low-res preview gets `blur-[1px]` until full-res loads.

**Skeleton shimmer:**
```
animate-pulse bg-[linear-gradient(110deg,#0f172a_0%,#1e293b_45%,#334155_55%,#0f172a_100%)]
bg-[length:220%_100%]
```

---

## Icons

**Library:** `@vicons/tabler` (Tabler Icons), rendered via `<NIcon size="16|18|20|22|30|42">` from Naive UI.

Common icons: `User`, `Settings`, `Logout`, `Shield`, `Search`, `X`, `Clock`, `Location`/`MapIcon`, `CloudUpload`, `Map`/`Satellite`, `Adjustments`, `Calendar`, `Refresh`, `InfoCircle`, `Lock`, `Check`, `Eye`/`EyeOff`, `Trash`

---

## Anti-Patterns

- Do not use purple as a fallback visual direction.
- Do not use `bg-slate-900 text-white` for ordinary selected navigation.
- Do not introduce dark-mode-heavy sections unless the surrounding page already uses that language.
- Do not overuse rounded rectangles; the project uses sharp, atlas-like panels.
- Do not mix random accent colors within the same feature. Pick one accent family and keep it consistent.
- Do not use flat single-color backgrounds where a gradient belongs.
- Do not add border-radius without an explicit reason — `0px` is the project default.
- Do not use white text on primary buttons — Naive UI primary buttons use dark text (`#0f172a`).

---

## Validation

After style changes, run:

```bash
npx vue-tsc -b
```

Run `npm run build` if the change touches routes, imported components, or package dependencies.