/*
* Theme CSS.
*
* components.css carries the compiled component styles lifted from the Nuxt
* build — semantic class names only, no framework. This file supplies what
* used to be Tailwind utility classes sitting directly in the Vue markup
* (layout of the header bar, responsive visibility) plus the base reset, so
* no utility framework is needed in WordPress.
*/
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
/*
* The component CSS was authored against Tailwind's preflight, which sets a
* global `border-style: solid` and zero width. Without it every rule that
* only sets a border WIDTH — the locale selector's yellow box, for one —
* renders nothing at all, because the initial border-style is `none`.
*
* The colour is preflight's gray-200, not the CSS initial currentColor:
* production computes rgb(229, 231, 235) on every element. Nothing visible
* hangs on it today — every component that draws a border sets its own
* colour, and the only rule left relying on the default is the below —
* but currentColor would draw that divider near-black the first time a
* product with a nutrition table renders.
*/
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
html { color-scheme: light; }
/* Preflight leftovers the component CSS also assumes. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
/* The global `border-width: 0` above also blanks , which preflight restores
with an explicit top border — the product detail's divider was invisible. */
hr { height: 0; color: inherit; border-top-width: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; }
table { border-collapse: collapse; }
body {
font-family: Populaire, sans-serif;
/* The Nuxt global.scss sets no page background — sections bring their own. */
background: #fff;
/* …and no text colour either: it leaves the browser default black, so every
component's own colour sits on black rather than on a tinted dark. The
palette's `dark-100` (#332a2a) is defined in tailwind.config.js but never
applied anywhere in the design — using it here tinted all inherited text. */
}
/*
* Match Tailwind's preflight exactly. Note is NOT in the display:block
* list — it stays inline, as it does in the Nuxt build. Making it a block
* changes the layout around every NuxtPicture-equivalent wrapper.
*/
img, video, svg, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }
/* The block group wrapper must not interfere with .layout's flex column. */
.wp-block-group.layout { display: flex; min-height: 100vh; flex-direction: column; }
.layout > .wp-block-template-part { display: contents; }
/* --------------------------------------------------------------------------
Accessibility
--------------------------------------------------------------------------
None of this came from the Nuxt build: the Vue app shipped no skip link, no
screen-reader utility class and no focus styling of its own, so these are
additions rather than ports. They are kept together here so the next person
comparing the two implementations can see at a glance what is NOT a
translation of something upstream.
-------------------------------------------------------------------------- */
/*
* The standard visually-hidden pattern. Needed in its own right for the labels
* the design draws as pictograms, and needed regardless because WordPress core
* emits `.screen-reader-text` markup of its own (pagination, comment forms) —
* with no rule for the class, that text was rendering as visible page copy.
*
* clip-path rather than `display: none` or `width: 0`: both of the latter take
* the element out of the accessibility tree, which is the opposite of the point.
*/
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
* No rules for the skip link itself: core ships its own
* (wp-block-template-skip-link.css, inlined in the head) and the theme only
* translates the label — see andros_skip_link_text() in functions.php. Anything
* here would have to fight core's `.skip-link.screen-reader-text`, which is
* enqueued first and is more specific.
*/
/*
* A visible focus indicator everywhere (WCAG 2.4.7).
*
* `a { color: inherit }` in the reset leaves links with no colour of their own,
* so the UA's default ring is the only thing that ever marked focus — and the
* contact form removed even that (see the override below). Two rings, dark over
* light, so the indicator survives both the white cards and the brand-coloured
* header without knowing which it is on.
*/
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
outline: 3px solid #161615;
outline-offset: 2px;
box-shadow: 0 0 0 6px #fff;
border-radius: 2px;
}
/*
* `main` is the skip link's target and carries tabindex="-1" so the browser
* actually moves focus there; that makes it focusable, and it must not then draw
* a ring around the whole page.
*/
main:focus,
main:focus-visible,
.product-detail-slot:focus,
.product-detail-slot:focus-visible {
outline: none;
box-shadow: none;
}
/*
* components.css blanks the focus ring on the contact fields
* (`outline: 2px solid transparent`, Tailwind's `outline-none`) without putting
* anything back — tabbing through the form was completely untracked. Higher
* specificity because components.css is enqueued after this file.
*/
.s-contact .content .contact form fieldset input:focus-visible,
.s-contact .content .contact form fieldset textarea:focus-visible {
outline: 3px solid #161615;
outline-offset: 2px;
}
/* Per-field error text, referenced by each input's aria-describedby. #b91c1c is
the colour the status banner already uses, and clears 4.5:1 on the white card. */
.contact-form .field-error {
margin-top: 0.35rem;
color: #b91c1c;
font-size: 0.75rem;
line-height: 1rem;
}
.contact-form [aria-invalid="true"] {
border-color: #b91c1c !important;
}
/*
* The nutrition table's label column is `
`, which is what ties
* each value to its name. The component CSS styles `table th` for the single
* headline cell in the — brand background, white text — so that rule is
* pinned to the head here and the row headers are given the
treatment they
* are rendered alongside. Purely defensive: nothing about the table's appearance
* changes.
*/
.s-category .container .card table tbody th {
width: 50%;
padding: 0.5rem;
background: transparent;
color: inherit;
font-weight: inherit;
text-align: left;
}
@media (min-width: 768px) {
.s-category .container .card table tbody th {
padding: 0.5rem 1.5rem;
}
}
.andros-nutrition th {
font-weight: inherit;
text-align: left;
}
/*
* Pagination.vue put the 40px circle on the