/| markup, by design) and any table pasted into
a category's own Size guide field, whatever classes it does or
doesn't carry. */
.wnb-size-chart-content {
margin-top: 1rem;
font-size: 0.875rem;
line-height: 1.5;
color: #14181f;
}
.wnb-size-chart-content table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.wnb-size-chart-content th,
.wnb-size-chart-content td {
padding: 0.65rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(20, 24, 31, 0.08);
}
.wnb-size-chart-content th:first-child,
.wnb-size-chart-content td:first-child {
padding-left: 0.25rem;
}
.wnb-size-chart-content thead th {
background-color: rgba(20, 24, 31, 0.04);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #3f4653;
border-bottom: 1px solid rgba(20, 24, 31, 0.14);
}
.wnb-size-chart-content thead th:first-child {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.wnb-size-chart-content thead th:last-child {
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.wnb-size-chart-content tbody tr:nth-child(even) td {
background-color: rgba(20, 24, 31, 0.025);
}
.wnb-size-chart-content tbody tr:last-child td {
border-bottom: none;
}
.wnb-size-chart-content td:first-child,
.wnb-size-chart-content th:first-child {
font-weight: 500;
}
.wnb-size-chart-content dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.45rem 1.25rem;
margin: 0;
}
.wnb-size-chart-content dl dt {
font-weight: 500;
color: #3f4653;
}
.wnb-size-chart-content dl dd {
margin: 0;
color: #14181f;
}
.wnb-size-chart-content ul,
.wnb-size-chart-content ol {
margin: 0.5rem 0 0;
padding-left: 1.15rem;
}
.wnb-size-chart-content a {
color: #d95a00;
text-decoration: underline;
text-underline-offset: 2px;
}
.wnb-size-chart-content > :first-child {
margin-top: 0;
}
/* The small disclaimer line under the default chart -- styled as a
quiet callout rather than a bare line of grey text. */
.wnb-size-chart-note {
margin: 0.9rem 0 0;
padding: 0.6rem 0.85rem;
background-color: rgba(20, 24, 31, 0.035);
border-radius: 0.5rem;
font-size: 0.78rem;
color: #3f4653;
}
/* ------------------------------------------------------------------
.badge-error -- the "something was declined" counterpart to
.badge-brand / .badge-success, used by the return flow
(inc/returns.php, woocommerce/myaccount/returns.php) for a rejected
request or a rejected inspection.
Defined here rather than in assets/css/tailwind.css because that file
is a pre-compiled build artifact with no build config in this theme
folder -- a class added there would be silently lost the next time it
was regenerated, whereas style.css is hand-maintained and is enqueued
after it (see wnb_enqueue_assets() in inc/setup.php).
The geometry deliberately matches .badge-success exactly. The colours
do NOT come from the error-600 text token: that one token compiles to
rgb(255 106 0), an orange, which reads as the sale/brand accent rather
than as a rejection and is close to illegible on the pink error-50
background. The red used here is text-error-500 (rgb(192 52 44)) --
the palette's actual red -- which is also what the return card's own
rejection callouts use. That error-600 oddity is pre-existing and
affects every current use of .text-error-600 (the cancel/return modal
error line included), so it's flagged in the return-flow report rather
than changed here.
------------------------------------------------------------------ */
.badge-error {
display: inline-flex;
align-items: center;
gap: 0.25rem;
border-radius: 9999px;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
background-color: rgb(253 241 240);
color: rgb(192 52 44);
}
/* The request-return modal grew a photo widget on top of its reason and
note fields, which is enough content to overflow a short viewport.
assets/css/tailwind.css ships no max-h utility above max-h-96 (24rem)
and no arbitrary-value one, and it's a pre-compiled file with no build
config in this theme, so the viewport-relative cap lives here instead
of as a class that would silently do nothing. */
.wnb-modal-scroll {
max-height: 90vh;
overflow-y: auto;
}
/* ==========================================================================
Account modals (cancel order / request a return / delete account) --
inc/order-cancellation.php, inc/returns.php and inc/account-deletion.php
all render the same accessible-dialog markup (driven by assets/js/
order-actions.js), styled with Tailwind utility classes -- but five of
those classes (bg-ink/40, shadow-xl, space-y-4, min-h-20, hover:text-ink)
were never compiled into assets/css/tailwind.css: same root cause as the
size-guide modal section above -- this theme's Tailwind build is a
pre-compiled, static file with no build config here to re-run, and these
three modals were added after whatever the last build was. Without
these, the backdrop was fully transparent (page content showed straight
through, undimmed) and the dialog card had no shadow separating it from
that same content -- exactly the "content bleeding through the popup"
look reported against the live site.
Scoped by [data-wnb-modal] and [role="dialog"] -- the two attributes
already used as JS hooks in all three files -- rather than adding more
one-off classes across three separate PHP files for the base fix. The
icon badge and close button further down are a UI/UX pass on top of
that (an at-a-glance sense of what kind of action this is, and a real
hit target instead of a bare "×" character) and do need one small,
matching markup change per file -- see wnb_icon( 'close' ) and the
.wnb-modal-icon usage in those three render functions. */
[data-wnb-modal] {
background-color: rgba(20, 24, 31, 0.4);
backdrop-filter: blur(2px);
}
[data-wnb-modal] > [role="dialog"] {
box-shadow: 0 20px 25px -5px rgba(20, 24, 31, 0.18), 0 8px 10px -6px rgba(20, 24, 31, 0.1);
}
[data-wnb-modal] form {
display: flex;
flex-direction: column;
gap: 1rem;
}
[data-wnb-modal] textarea.form-input {
min-height: 5rem;
}
/* Entrance animation, skipped for anyone who's asked their OS for less
motion -- matching this JS's existing care around focus/inert/ARIA. */
@media (prefers-reduced-motion: no-preference) {
[data-wnb-modal].flex {
animation: wnbModalBackdropIn .15s ease;
}
[data-wnb-modal].flex > [role="dialog"] {
animation: wnbModalCardIn .18s cubic-bezier(0.16, 1, 0.3, 1);
}
}
@keyframes wnbModalBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes wnbModalCardIn {
from { opacity: 0; transform: scale(0.96) translateY(4px); }
to { opacity: 1; transform: none; }
}
.wnb-modal-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
color: rgb(63, 70, 83);
background-color: transparent;
transition: background-color .15s ease, color .15s ease;
}
.wnb-modal-close svg {
width: 1rem;
height: 1rem;
}
.wnb-modal-close:hover {
background-color: rgba(20, 24, 31, 0.06);
color: rgb(20, 24, 31);
}
.wnb-modal-close:focus-visible {
outline: 2px solid rgba(234, 88, 12, 0.4);
outline-offset: 2px;
}
/* Small tinted badge next to a modal's title -- amber for "you're undoing
something", red for "this one's permanent", muted ink for "this is just
a normal request flow, nothing to be alarmed about". */
.wnb-modal-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 9999px;
flex: none;
}
.wnb-modal-icon svg {
width: 1.125rem;
height: 1.125rem;
}
.wnb-modal-icon--warning {
background-color: rgba(217, 90, 0, 0.1);
color: rgb(217, 90, 0);
}
.wnb-modal-icon--danger {
background-color: rgba(192, 52, 44, 0.1);
color: rgb(192, 52, 44);
}
.wnb-modal-icon--neutral {
background-color: rgba(20, 24, 31, 0.06);
color: rgb(63, 70, 83);
}
|