Skip to content

IR Brief — Fix 2: Layout Mobile Fix & Creative Drift Audit

SURFACE: ir.ucca.online (ucca-ir) DO NOT TOUCH: ucca-keys, ucca-engine, rtopacks.com.au, ucca.online, any other Worker or repo

Problem A — Mobile viewport breakage

At mobile viewports (430×932, 412×915, 360×740) the logo overlaps the verse text. Desktop (820×1180) is correct. The @media(max-width:768px) block needs two specific fixes.

Fix — Apply these exact CSS rules

In the @media(max-width:768px) block, set:

.hero.docked {
  padding-top: clamp(0.5rem, 2dvh, 1.25rem);
}

.stage {
  justify-content: flex-start;
  padding-top: clamp(180px, 24dvh, 260px);
  padding-bottom: 100px;
  overflow-y: auto;
}

Do not touch any other CSS rules. If these selectors already exist in the media block, replace only those property values. If they don't exist, add them.

Problem B — Creative drift audit

Alex made changes outside the brief scope during Session 3. Before closing this fix, run a structured audit:

Audit method

  1. git log --oneline -10 to see all commits from Session 3
  2. git diff [last-known-good-commit] HEAD -- [css-file] [js-file] [html-file] to surface every change
  3. The last known good commit (desktop layout correct) should be identifiable from Session 3 log — if not, diff from the commit where ucca-ir was first confirmed working on desktop

What to look for

Flag any change that meets one or more of these criteria: - Typography: font changes, size changes, weight changes, letter-spacing, line-height - Color: any hex/rgba value that wasn't in the original palette (purple #7c3aed family, charcoal #1a1a2e, white #ffffff, gold accent) - Animation: new keyframes, transition durations, easing curves not in brief - Layout: flex/grid changes outside the @media(max-width:768px) block - Copy: any text content changes - New components or DOM elements not specified in any brief - External dependencies added (new CDN imports, new npm packages) - Any changes to Worker code that weren't in a brief

Output

Produce a short audit report as a code comment block at the top of a DRIFT-AUDIT.md file:

## Session 3 Drift Audit — ir.ucca.online
Commits reviewed: [hash range]
Reviewed: [date]

### Changes in-brief (expected):
- [list]

### Changes out-of-brief (investigate):
- [list each with: file, line, what changed, assessment: revert / keep / needs Tim review]

### Reverted:
- [list anything reverted]

Revert anything clearly out-of-brief. Flag for Tim anything ambiguous.

Acceptance criteria

  1. iPhone 14 Pro (430×932): logo sits above verse text, no overlap ✓
  2. Samsung S22 (412×915): same ✓
  3. Small Android (360×740): same ✓
  4. Desktop (820×1180): unchanged, still correct ✓
  5. Drift audit file committed to repo ✓
  6. Any confirmed drift reverted ✓

Reminder

The Surface Rule applies to every commit: if it's not in a brief, it doesn't ship.