Teeshift Login

# Prompt: Teeshift golf log-in page

Build a single-file, responsive **log-in page for a fictional golf tee-time app, Teeshift**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is calm and editorial: a near-white page that fades into a hand-painted watercolour desert golf course across the bottom, with a small white log-in card floating in the middle.

## Media

- **Landscape:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/2f7dcdd9-131d-4d4d-b488-0684c6a0f35c.jpg` (1542×1020). A watercolour desert oasis golf course:
  - tall saguaro cacti on the left
  - red-orange rocky mesas on the horizon
  - desert scrub with yellow flowers, and a small blue pond in the foreground
  - a green fairway and putting green with sand bunkers and a small white flag
- **Sky:** the top half is a **plain flat pale sky blue** (#E9F3FD → #F1F7FC), with no clouds, so it blends straight into the page.
- **Placement:** the image covers the bottom of the page, anchored to the bottom. A white-to-transparent haze fades the top of the landscape into the page colour (#FDFDFD).

## Type and colour

- **Text:** **Inter** for the UI.
- **Title:** **Newsreader** serif for "Log in to Teeshift".
- **Colours:** ink #111, secondary text #7A7A7A, card white at 96.5% with a 1px #EDEDED border and a 14px radius, and a near-black gradient primary button.

## Layout (desktop)

- **Top bar:**
  - "← Back" at the left, in grey
  - the logo in the centre: a golf flag on a hole outline, plus "Teeshift"
  - "Contact support" at the right
- **Card:** centred, about 410px wide, sitting over the horizon line.
  - Title "Log in to Teeshift" with the subtitle "Your tee time starts here".
  - Three equal social buttons: X, Apple and Google, using the standard marks.
  - An "or" divider.
  - "Email address" and "Password" fields, each 34px tall with a 6px radius.
  - A full-width dark "Continue with Email" button.
  - "Don't have an account? **Sign up**".
- **Spacing:** even margins.

## Motion

- **Entrance:** the landscape fades in while settling from a 1.04 scale, the top bar drops in, the card rises from 18px with a slight scale, and its children rise in a 70ms stagger.
- **Hover:** inputs darken their border and the primary button brightens.
- **Reduced motion:** no entrance.

## Phone

- **Card:** full width with 16–20px padding. The landscape shrinks to the bottom, and the top bar stays on one row.

## Acceptance check

- **Sky:** a plain flat sky, with no clouds or band where it meets the page.
- **Card:** centred over a desert golf course painted in watercolour.
- **Content:** no real brand except the standard X, Apple and Google sign-in marks.