# GeoLynx Style Guide

Extracted from the live planning app (`www/css/`, `www/index.php`) for reuse on the customer-facing website.

## Brand Colours

The identity is a **very dark aubergine purple** with a violet accent ramp.

| Token | Hex | Where it's used |
|---|---|---|
| **Brand dark** (the "main purple") | `#180a2a` | Top navbar, navbar brand block, login page background, active nav tab text + underline, `.bg-geolynx-dark` |
| Brand dark — border/shade | `#08030f` | Borders on dark buttons |
| Brand dark — hover/active | `#49247a` | Active state of `.btn-geolynx-dark` |
| Brand light | `#ede3fa` | `.btn-geolynx-light` background — pale lilac on dark text |
| Brand light — hover | `#dabdff` | Hover/active of `.btn-geolynx-light` |

> Note: `rgb(55, 0, 80)` / `#370050` appears in `main.css` as an older navbar purple. It is overridden — `custom.css` loads last and wins — so **`#180a2a` is the live colour**. Don't carry `#370050` to the website.

### Violet accent ramp

Declared as CSS custom properties on `:root` in `custom.css`. These are the Tailwind *violet* scale and drive interactive/accent states throughout the app.

| Variable | Hex | Used for |
|---|---|---|
| `--purple-900` | `#4c1d95` | `.top-header` background |
| `--purple-800` | `#5b21b6` | Header search input background |
| `--purple-700` | `#6d28d9` | Nav tab hover, focused input border, open "Layers" button, admin tab active, spinner core |
| `--purple-600` | `#7c3aed` | Card hover borders/arrows |
| `--purple-100` | `#ede9fe` | Badge backgrounds, input focus ring |
| `--purple-50` | `#f5f3ff` | Active nav tab / active dropdown item background |

Supporting accent: `#a855f7` (spinner orbit pulse nodes).

### Login page accents

The login screen is `#180a2a` with an animated network canvas — a good hero motif for the website.

- Node/line blue: `#4a88ff` (button `#4a88ff`, hover `#3a6fd1`)
- Pulse cyan: `#8af3ff`
- Card: `rgba(255,255,255,0.05)` with `backdrop-filter: blur(10px)`, radius `15px`

## Neutrals

Tailwind's grey scale, used consistently for layout chrome.

| Hex | Role |
|---|---|
| `#ffffff` | Page/card/panel surfaces, header bars |
| `#f9fafb` | Hover background on nav items |
| `#f3f4f6` | Main content area background |
| `#e5e7eb` | **The standard border/divider colour** — every bar, card, tab strip and section rule |
| `#d1d5db` | Form input borders |
| `#9ca3af` | Muted labels, close buttons, section headings |
| `#6b7280` | Secondary text, form labels, stats |
| `#4b5563` | Nav tab text (inactive) |
| `#374151` | Body/emphasis text, section titles |
| `#111827` | Card titles / darkest text |

Bootstrap's own body defaults are unchanged: text `#212529`, background `#fff`.

## Semantic Colours

Stock Bootstrap 5 — the theme is **not** recoloured, so these are safe to reuse verbatim.

| Meaning | Hex |
|---|---|
| Primary / links | `#0d6efd` |
| Success (active status, progress bars) | `#198754` |
| Danger (delete, PDF icon) | `#dc3545` |
| Warning | `#ffc107` |
| Info | `#0dcaf0` |
| Secondary / muted | `#6c757d` |
| Orange accent | `#fd7e14` |
| Purple accent (image files) | `#6f42c1` |
| Teal | `#20c997` |

Status badges use `#22c55e` (green) in the project header bar.

## Typography

Loaded from Google Fonts in `www/index.php`:

```html
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
```

- **Primary / body: `"Lexend Deca", sans-serif`** — set on `body` in `custom.css` and on the login page. This is the app's voice; use it for the website.
- **Secondary: `"Ubuntu", sans-serif`** — loaded and available as utility classes (`.ubuntu-light` 300, `.ubuntu-regular` 400, `.ubuntu-medium` 500, `.ubuntu-bold` 700, plus italics).

Scale (the app runs deliberately compact — a marketing site should scale up, keeping the ratios):

| Element | Size | Weight |
|---|---|---|
| Root / body | `14px` (`0.875rem`) | 400 |
| Page title (`h1`) | `1.1rem` | 600 |
| Brand wordmark | `1.1rem` | 600 |
| Card heading (`h2`) | `1.25rem` | — |
| Drawer heading (`h3`) | `1rem` | 600 |
| Body / nav / inputs | `0.875rem` | 400 |
| Section title | `0.9rem` | 600 |
| Small print, labels | `0.8rem` | 400 |
| Micro labels, badges | `0.7–0.75rem` | 500–600, `uppercase`, `letter-spacing: 0.05em` |

## Layout & Chrome

Layout metrics from `:root` in `custom.css`:

```css
--header-height: 48px;
--project-bar-height: 60px;
--nav-height: 42px;
--drawer-width: 280px;
```

- **Radii:** `3px` badges · `4px` inputs, dropdowns, small buttons · `8px` cards, drawers, floating buttons · `15px` login card · `50%` avatars/spinner
- **Shadows:** `0 1px 3px rgba(0,0,0,0.1)` cards · `0 4px 6px rgba(0,0,0,0.1)` dropdowns · `0 4px 12px rgba(0,0,0,0.15)` floating buttons · `4px 0 16px rgba(0,0,0,0.1)` drawers
- **Transitions:** `0.15s` for colour/hover, `0.2–0.3s ease` for movement and drawers
- **Content width:** forms cap at `1200px`; the header search caps at `600px`
- **Gradients:** the horizontal nav strip uses `linear-gradient(#f0f0f0 0%, #f6f6f6 100%)`

### Glassmorphism

The map overlays (sidebars, button clusters) use a frosted-glass treatment worth echoing on the website for anything overlaying imagery:

```css
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(2px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
            inset 0 4px 20px rgba(255, 255, 255, 0.3);
```

## Iconography

Bootstrap Icons `1.7.2` and Font Awesome (local, `www/css/all.css`). Icons sit at `1rem` inline with nav text, `16px` in dropdowns, `40px` rounded tiles (`--purple-50` background, `--purple-700` glyph) on admin nav cards.

## Notes for the website

- There is **no image logo asset** in the repo — the brand mark is the wordmark "GeoLynx" set in Lexend Deca 600. The page title is "GeoLynx Planner".
- `--geolynx-secondary` (`#3498db`) and `--geolynx-primary` (`#2c3e50`) are referenced by `.btn-geolynx` but only ever *defined* in `www/html/content_test_html.php`, which isn't on any route. Those are dead values — ignore them, they are not part of the identity.
- The map feature palette (`#ff0000`, `#9e01ff`, `#0134ff`, `#fe009d`, `#ff6701` …) is functional cable/asset colouring, not brand. Use it only in screenshots.