# G-Line Shipping Company — Design & UI Documentation

## Typography

**Font:** Poppins (Google Fonts)
- Weights used: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
- Loaded via: `https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap`
- Applied globally: `font-family: 'Poppins', sans-serif;`

**Font sizing scale:**
- Hero headings: `clamp(32px, 5vw, 56px)` — responsive, scales with viewport
- Section titles: `clamp(24px, 3vw, 36px)`
- Card headings: `15px–17px`, weight 600
- Body text: `13px–14px`, weight 400
- Labels/captions: `11px–12px`, weight 600–700, uppercase with letter-spacing
- Buttons: `13px–14px`, weight 600

---

## Color Palette

| Role | Hex | Usage |
|------|-----|-------|
| Primary Dark | `#111` | Backgrounds, buttons, sidebar, hero sections |
| Pure Black | `#000` | Button hover states |
| Accent Orange | `#ff6b35` | Logo highlight, CTAs, badges, active states |
| Accent Hover | `#e55a25` | Orange button hover |
| White | `#fff` | Cards, inputs, text on dark |
| Light Gray BG | `#f4f4f4` | Page backgrounds |
| Card BG | `#f8f8f8` | Subtle card backgrounds |
| Border | `#e8e8e8` | Card borders, input borders |
| Light Border | `#f0f0f0` | Table rows, dividers |
| Text Primary | `#111` | Headings, strong text |
| Text Secondary | `#333–#555` | Body text |
| Text Muted | `#666–#888` | Descriptions, subtitles |
| Text Faint | `#999–#bbb` | Captions, timestamps |

---

## Layout System

**No CSS framework** — all custom vanilla CSS.

**Grid approach:**
- Max content width: `1160px` (homepage), `1000px` (service pages), `900px` (about), `720px` (legal/FAQ)
- CSS Grid for card layouts: `grid-template-columns: repeat(3, 1fr)` with responsive fallbacks
- Flexbox for header, footer, inline elements

**Responsive breakpoints:**
- `900px` — tablet: 2-column grids, sidebar collapses
- `600px` / `560px` — mobile: single column, stacked nav

**Spacing:**
- Section padding: `80px 40px` (desktop), `60px 20px` (tablet), `40px 20px` (mobile)
- Card padding: `28px` (desktop), `20px` (mobile)
- Grid gaps: `20px–24px` for cards, `48px` for content grids

---

## Component Patterns

### Buttons
```css
.btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
}
```
- `.btn-dark` — black bg, white text
- `.btn-ghost` — light gray bg, dark text, border
- `.btn-danger` — red tint bg, red text
- `.btn-sm` — smaller padding (6px 12px)

### Cards
```css
.card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}
```
- Always white background
- 12px border-radius
- 1px solid border (#e8e8e8)
- Card header with bottom border separator

### Form Inputs
```css
.form-input {
    padding: 10px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: #111; }
```

### Status Pills
```css
.pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
```
Each status has its own color scheme (yellow for pending, blue for in-transit, green for delivered, etc.)

### Hero Sections
- Dark background (#111)
- Radial gradient overlay: `rgba(255,107,53,0.1)` for subtle orange glow
- Centered text, max-width constrained
- Breadcrumb navigation on sub-pages

---

## Page Structure

### Public Layout (`layouts/app.blade.php`)
```
┌─────────────────────────────────┐
│ Header (sticky, white, 64px)    │
├─────────────────────────────────┤
│ Main Content (@yield)           │
├─────────────────────────────────┤
│ Footer (dark, 4-column grid)    │
├─────────────────────────────────┤
│ Authority Badges Bar            │
└─────────────────────────────────┘
```

### Admin Layout (`layouts/admin.blade.php`)
```
┌──────────┬──────────────────────┐
│ Sidebar  │ Topbar (sticky)      │
│ (240px)  ├──────────────────────┤
│ Fixed    │ Page Content         │
│ Dark BG  │ (scrollable)         │
│          │                      │
└──────────┴──────────────────────┘
```
- Sidebar: fixed, 240px, dark (#111)
- On mobile: slides in/out with overlay
- Topbar: sticky, white, 60px height

### User Layout (`layouts/user.blade.php`)
- Same as admin but 220px sidebar
- "My Account" badge instead of "Admin Panel"

---

## Logo Treatment

**Header (light bg):** `G-` in black (#111), `Line` in orange (#ff6b35)
**Footer/Sidebar (dark bg):** `G-` in white (#fff), `Line` in orange (#ff6b35)

```html
<a href="/" class="site-logo">
    <span style="color:#111">G-</span>
    <span class="dot">Line</span>
</a>
```
CSS: `.site-logo .dot { color: #2f2725ff; }`

**Favicon:** SVG — orange "G" on dark rounded square (#111 bg, #2b2321ff text)

---

## Animation & Transitions

Minimal, performance-focused:
- `transition: background 0.15s` — buttons
- `transition: border-color 0.15s` — inputs
- `transition: color 0.15s` — links
- `transition: box-shadow 0.2s, transform 0.2s` — card hover
- `transform: translateY(-2px)` — card lift on hover
- `transition: transform 0.25s` — sidebar slide

No JavaScript animations. No libraries. Pure CSS transitions.

---

## Icons

All icons are inline SVGs — no icon library dependency.
- Stroke-based, 1.2–1.5px stroke width
- Consistent sizing: 14px–16px in UI, 22px in service cards, 40px in feature visuals
- Color inherits from parent or set explicitly

---

## Email Templates

Inline CSS (no external stylesheets — email client compatibility):
- Max width: 520px–600px
- Dark header bar (#111) with logo
- White body with clean typography
- Rounded corners (10px on wrapper)
- CTA buttons: dark bg, white text, 8px radius

---

## Security UI Patterns

- Error alerts: light red bg (#fff0ee), red border, red text
- Success alerts: light green bg (#e8f8f0), green border, green text
- Password toggle: eye icon button inside input
- Form validation: red border on invalid inputs
- Confirmation dialogs: native `confirm()` for destructive actions

---

## File Organization

```
resources/views/
├── layouts/          → app.blade.php, admin.blade.php, user.blade.php
├── home.blade.php    → Landing page
├── tracking/         → search.blade.php, track.blade.php
├── services/         → index, air-freight, sea-freight, etc.
├── pages/            → about, contact, faq, terms, privacy
├── admin/            → login, dashboard, settings, activity-log
│   └── shipments/    → create, edit, updates
├── user/
│   ├── auth/         → login, register, verify
│   └── shipments/    → create, show
├── emails/           → otp, shipment-submitted, tracking-update, shipment-delivered, contact
├── pdf/              → airwaybill
└── errors/           → 404
```

---

## Key Design Principles

1. **Dark + Orange accent** — professional, modern, high contrast
2. **No CSS frameworks** — lightweight, fast loading, full control
3. **Mobile-first responsive** — works on all devices
4. **Minimal JavaScript** — only for sidebar toggle, password visibility, FAQ accordion
5. **Consistent spacing** — 8px base unit (8, 12, 16, 20, 24, 28, 32, 40, 48, 60, 80)
6. **Accessible** — proper labels, focus states, semantic HTML, sufficient contrast
7. **Performance** — no heavy libraries, inline SVGs, Google Fonts with display=swap