/* ============================================================
HnK Party — accessibility and small-screen corrections
Added during the merge. Everything here fixes something that was
measurably broken rather than a matter of taste.
============================================================ */
/* ---------- 1 · Visible focus, everywhere ----------
overlays.css sets `outline: none` on every input, textarea and select and
replaces it with a 1px border-colour change. That was the only focus style
in the whole stylesheet, and 1px of colour is not enough to follow a
keyboard around a form. :focus-visible means mouse users never see a ring. */
:focus-visible {
outline: 3px solid var(--terracotta);
outline-offset: 2px;
border-radius: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--terracotta);
outline-offset: 1px;
border-color: var(--terracotta);
}
/* On dark grounds the teal ring disappears. */
.footer :focus-visible,
.urgent-strip :focus-visible,
.page-hero :focus-visible { outline-color: var(--cream); }
/* ---------- 2 · Skip link ----------
The nav is rendered by JavaScript and runs to about forty links with
dropdowns. Without this, a keyboard or screen-reader user tabs through all
of it on every single page before reaching any content. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
padding: 12px 20px;
background: var(--charcoal);
color: var(--cream);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
/* ---------- 3 · The closed wishlist drawer leaves the tab order ----------
It was hidden with `transform` alone, so its close button, quantity
steppers and "Send Quote Request" link stayed focusable off-screen on every
page of the site. A keyboard user tabbed into controls they could not see,
with no way to tell where focus had gone. */
.cart-drawer:not(.open) { visibility: hidden; }
.cart-drawer.open { visibility: visible; }
.cart-overlay:not(.open) { visibility: hidden; }
/* Screen-reader-only label text, for controls that are visually
self-evident but otherwise unnamed — search boxes, filter selects. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- 4 · Wide content scrolls inside itself, not the page ----------
No stylesheet on the site had a single `overflow-x`. The cancellation table
in the terms, and the three-column tables in a dozen articles, pushed the
whole page sideways on a phone. */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
.post-body table,
.cancel-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* ---------- 5 · Contrast ----------
--gold (#c9af7f) on --cream (#faf6f0) measures 1.97:1, where AA wants 4.5:1
for body text. The token stays as it is for borders, rules and decorative
fills, where contrast rules do not apply; --gold-text is the readable
version of the same hue for anything a person has to read. */
:root {
--gold-text: #8a6a2f; /* 4.7:1 on cream */
--success-text: #3f6b3f; /* --success is 2.96:1; this is 5.3:1 */
}
/* ---------- 6 · The bespoke-prop builder's hidden radios ----------
The inputs are opacity:0 with pointer-events:none, so a keyboard user got no
indication at all of which of the six types, four sizes or eight finishes
was focused. */
.opt-type:focus-within,
.opt-size:focus-within,
.opt-finish:focus-within {
outline: 3px solid var(--terracotta);
outline-offset: 2px;
}
/* ---------- 7 · The wishlist table on the quote page ----------
Five columns — thumbnail, name, quantity stepper, price, remove — with no
mobile treatment at all. The quantity column alone needs about 110px, so at
375px either the name collapsed to nothing or the page overflowed sideways.
This is the screen where a customer sends their list, so it is the last
place on the site that should feel awkward. */
@media (max-width: 640px) {
.cart-table { display: block; }
.cart-table thead { display: none; }
.cart-table tbody,
.cart-table tr { display: block; width: 100%; }
.cart-table tr {
display: grid;
/* The stepper needs a whole row to itself: at 390px the name, the minus
button, the count, the plus button, the price and the remove control
were all competing for one line, so the two round buttons stacked on top
of each other and the remove "x" ended up a 10px target beside the
price. */
grid-template-columns: 56px minmax(0, 1fr) 44px;
grid-template-areas: "thumb name remove" "thumb qty price";
gap: 4px 12px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--soft-grey);
}
.cart-table td { display: block; border: 0; padding: 0; }
.cart-table td[data-col="thumb"] { grid-area: thumb; }
.cart-table td[data-col="name"] { grid-area: name; font-weight: 600; }
.cart-table td[data-col="qty"] { grid-area: qty; }
.cart-table td[data-col="price"] { grid-area: price; text-align: right; font-weight: 600; }
.cart-table td[data-col="remove"] { grid-area: remove; text-align: right; }
}
/* ---------- 7b · The wishlist row on a phone ----------
Follows §7 and depends on it: the grid above gives the stepper its own row,
these rules stop its contents from wrapping inside that row. */
@media (max-width: 640px) {
.cart-table td[data-col="qty"] {
display: flex; align-items: center; gap: 10px;
justify-content: flex-start; text-align: left !important; flex-wrap: nowrap;
}
.cart-table td[data-col="qty"] span { margin: 0 !important; min-width: 20px; text-align: center; }
.cart-table .qty-btn { flex: 0 0 auto; width: 40px; height: 40px; min-width: 40px; min-height: 40px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1; padding: 0; }
.cart-table td[data-col="name"] { align-self: end; padding-bottom: 2px !important; }
.cart-table td[data-col="price"] { align-self: center; white-space: nowrap; }
.cart-table td[data-col="remove"] { align-self: start; }
.cart-table .remove-btn, .cart-table .cart-remove {
width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
font-size: 20px; line-height: 1; border: 0; background: none; color: var(--charcoal, #2b2b2b);
text-decoration: none; border-radius: 50%; opacity: .6;
}
.cart-table .remove-btn:hover, .cart-table .cart-remove:hover { opacity: 1; background: rgba(0,0,0,.05); }
/* An item with no photograph rendered as a bare cream square. */
.cart-table .cart-item-img {
width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
background: linear-gradient(135deg, #f0e6d2 0%, #e2d6b9 40%, #c9af7f 100%);
display: flex; align-items: center; justify-content: center;
}
}
/* ---------- 8 · Touch targets ----------
WCAG 2.5.8 asks for 24x24 CSS px. The quantity steppers and the remove
control were smaller than that on a phone. */
@media (pointer: coarse) {
.qty-btn, .cart-remove, .cart-close, .hamburger {
min-width: 44px;
min-height: 44px;
}
}
/* ---------- 9 · Motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 10 · Heading levels ----------
Several pages jumped h1 -> h3, or h2 -> h4, because the level was picked for
size rather than structure. Screen-reader users navigating by heading got a
broken outline. The tags are promoted to close the gap; these two classes
reproduce the old visual size so nothing looks different. */
h2.h-visual-3 {
font-size: clamp(19px, 2.1vw, 24px);
font-weight: 600;
line-height: 1.3;
}
h3.h-visual-4 {
font-size: clamp(15px, 1.5vw, 17px);
font-weight: 600;
line-height: 1.35;
}
h4.h-visual-5 { font-size: 14px; font-weight: 600; line-height: 1.4; }
/* Footer column titles were
immediately after page-level
s, so the
heading outline skipped a rank in the footer of every page. They are
top-level footer sections, so h2 is the right rank; this keeps the size. */
.footer-heading {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
/* ---------- 11 · The floating WhatsApp button covers content ----------
It is fixed to the bottom-right on every page, so on a phone it sat on top
of whatever the last line happened to be — including the "Estimated
subtotal" figure on the quote page, which is the number a customer is
actually there to read. Reserve the space instead of overlapping it. */
@media (max-width: 700px) {
body { padding-bottom: 76px; }
.footer { padding-bottom: 8px; }
}
/* ---------- 12 · Hero and section padding stack on small screens ----------
Page banners carry generous vertical padding and so does the section that
follows, which on a phone produced most of a screen of empty cream between
the banner and the first thing worth reading. */
@media (max-width: 560px) {
.page-hero { padding-top: 38px; padding-bottom: 38px; }
.section { padding-top: 30px; }
/* Only the top was tightened, so two stacked sections still met with 90px of
empty cream between them — a visitor scrolls a third of a screen past
nothing. */
.section { padding-bottom: 30px; }
.section-title { margin-bottom: 10px; }
}
/* ---------- 13 · Fieldset legends match their sibling labels ----------
The indoor/outdoor radios were wrapped in a real