Add :hover and :focus-visible CSS states for interactive elements

[bonheur15]

Problem

The landing page has no visible hover or focus styling on interactive elements. This affects keyboard navigation and provides no visual feedback on hover.

Location: CSS in internal/web/views/layout.templ (lines 38-47, 67-75, 174)

Missing States

Element	Current	Missing
Tab labels (.tabs label)	cursor: pointer + color transition	:hover background/color change, :focus-visible outline
Links (a)	color: var(--accent)	:hover underline or color shift, :focus-visible outline
Builder inputs (.builder input, .builder select)	No focus styling	:focus-visible border-color change or outline
Builder select	No hover styling	Subtle hover state

Proposed Fix

/* Tab labels */
.tabs label:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.tabs label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Links */
a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Builder inputs */
.builder input:focus-visible,
.builder select:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

Why This Matters

• Keyboard users cannot see which element currently has focus
• Hover feedback confirms interactivity for mouse users
• Meets WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) and 2.4.7 (Focus Visible)