# Visual QA Checklist

Run this checklist before building or after publishing a WebKreator page.

## Color And Contrast

- Every dark section has explicit heading, body, link, eyebrow, and button colors.
- Every light section has heading color, body color, muted text, and border colors defined.
- CTA text/background pairs are readable in normal, hover, focus, and active states.
- Current menu item and hover states have enough contrast.
- Cards on colored or image sections have readable text and visible boundaries.

## Typography

- Only the main hero uses hero-scale H1.
- Section H2 sizes are strong but not overwhelming.
- Card headings and compact panel headings use smaller scales.
- Body copy is comfortable to read on desktop and mobile.
- Long Spanish words and CTA labels fit inside buttons.
- Line height is not too tight for multi-line headings.

## Spacing And Layout

- Section spacing alternates naturally between dense and open content.
- No more than three similar sections appear in a row.
- Buttons, cards, and toolbars have stable dimensions and do not shift on hover.
- Sticky headers do not cover anchor targets or the top of hero content.
- Mobile gutters keep content away from screen edges.

## Components

- Header desktop and mobile menu both work.
- Footer has enough contrast and a clear CTA or navigation purpose.
- Blog archive cards show title, excerpt, date/category if needed, and readable links.
- Single post template has readable width, typography, related navigation, and CTA placement.
- Forms have visible labels, focus states, and error states.

## Motion And Parallax

- Parallax is used only when it improves depth or section rhythm.
- A solid-color section with text may use an image/video/texture background only if the original solid color becomes a strong overlay.
- Text over parallax remains readable at the busiest point of the background.
- Scroll animations are subtle: fade, rise, reveal, count-up, image drift, or small parallax only.
- Animations do not delay access to key copy or CTAs.
- Dense text, legal disclaimers, FAQs, and form fields do not animate in distracting ways.
- `prefers-reduced-motion: reduce` disables parallax and scroll animation.

## WordPress Rendering

- If using a landing page, hide default page title/sidebar only through scoped page/theme CSS.
- Avoid raw CSS that WordPress wraps in paragraph tags. Prefer Custom HTML block, plugin CSS, or theme CSS.
- Confirm image URLs load and are not hotlinked from temporary/private locations.
- Verify cache after publishing: frontend HTML should include the expected CSS or enqueued stylesheet.

## Responsive Checks

- Check desktop width around 1366-1440px.
- Check tablet around 768-900px.
- Check mobile around 375-390px.
- Header, hero, CTAs, grids, forms, and footer must be usable without overlap.
- Text must not sit under a sticky header or image overlay.
