/* ==========================================================================
SOX OUTLET — Design System & Global Styles
==========================================================================
READ ME FIRST
-------------
Everything visual about this theme is controlled from the token block in
SECTION 2 below. Colours, fonts, type sizes, spacing, radii and shadows are
all CSS custom properties. Changing a brand colour is a one-line edit here —
you never need to hunt through template files.
Table of contents
1. Fonts (self-hosted)
2. Design tokens (:root)
3. Reset & base
4. Typography
5. Layout primitives
6. Components (buttons, links, badges, cards, eyebrows)
7. Utility bar
8. Header, navigation & mega menu
9. Mobile navigation panel
10. Footer
11. Page furniture (masthead, breadcrumb, pagination, empty states)
12. Accessibility & motion
========================================================================== */
/* ==========================================================================
1. FONTS — self-hosted, no third-party requests
--------------------------------------------------------------------------
Two variable fonts, one file each, covering their whole weight range.
Big Shoulders Display Headings. A condensed industrial face drawn for the
Chicago Design Museum and named after Sandburg's
"City of the Big Shoulders" — which is about as
on-the-nose as type gets for a Chicago workwear
store. Being condensed, it lets headlines run much
larger at the same column width, which is what makes
the pages feel confident rather than busy.
Manrope Everything else. A modern humanist sans with a large
x-height and open apertures, so it stays crisp at
14px on a phone. Its slightly rounded terminals warm
up the hard edges of the display face.
Self-hosting removes a DNS lookup and two blocking round trips to Google on
every page, and keeps visitor IPs out of a third party's logs. A typical
page pulls ~59KB of font; latin-ext only downloads if a page actually
renders a character from that range.
========================================================================== */
@font-face {
font-family: "Big Shoulders Display";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("../fonts/bigshoulders-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Big Shoulders Display";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("../fonts/bigshoulders-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("../fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* ==========================================================================
2. DESIGN TOKENS
--------------------------------------------------------------------------
>>> THIS IS THE REBRAND SURFACE. Change values here, nowhere else. <<<
========================================================================== */
:root {
/* --- Brand orange ---------------------------------------------------- */
--sox-orange: #F0821E; /* primary accent, buttons, highlights */
--sox-orange-hover: #E0740F; /* button hover */
--sox-orange-deep: #D96E0A; /* link hover, eyebrow on light */
--sox-orange-ink: #C4611A; /* small caps brand line on product cards */
--sox-orange-strong: #D2560F; /* eyebrow on cream backgrounds */
--sox-orange-light: #F7A24E; /* eyebrow on dark backgrounds */
--sox-orange-sand: #E7C79E; /* soft orange text on dark imagery */
/* --- Core neutrals --------------------------------------------------- */
--sox-ink: #17181A; /* near-black — body text, dark sections */
--sox-ink-pure: #000000;
--sox-brown: #2A1D12; /* deep brown — about + footer */
--sox-brown-hover: #3D2B1B;
--sox-brown-deep: #231708; /* text on orange buttons in brown areas */
/* --- Surfaces -------------------------------------------------------- */
--sox-white: #FFFFFF;
--sox-cream: #FBFAF8; /* section alt background */
--sox-cream-warm: #F6F4F0; /* brands strip */
--sox-cream-deep: #FAF4E9; /* locations section */
--sox-cream-pill: #FBF6EE; /* hours pills, soft button hover */
--sox-sand: #F5F2EC; /* circular arrow chip */
--sox-placeholder: #EDEAE3; /* image placeholder backdrop */
--sox-placeholder-alt: #F3F0EA; /* circular thumbnail backdrop */
/* --- Hairlines ------------------------------------------------------- */
--sox-line: #E7E4DD; /* default border */
--sox-line-warm: #EFEBE3;
--sox-line-cool: #EAE7E0;
--sox-line-soft: #F0EEE9;
--sox-line-sand: #E6E2D9;
--sox-line-cream: #E6DCCC;
--sox-line-tan: #DED3C2;
--sox-line-grey: #D6D1C7;
--sox-line-on-ink: #2E2F31; /* divider inside near-black sections */
--sox-line-on-brown: rgba(245, 241, 234, .13);
--sox-line-on-brown-mid: rgba(245, 241, 234, .28);
/* --- Text ------------------------------------------------------------ */
--sox-text: #17181A;
--sox-text-body: #3E3C37; /* long-form paragraphs */
--sox-text-muted: #6E6A62;
--sox-text-soft: #8A8579;
--sox-text-faint: #9A958B;
--sox-text-sub: #6A5B4C; /* muted text on cream */
--sox-text-heading-alt: #2B2C2E;
--sox-text-on-dark: #EDEBE7;
--sox-text-on-dark-mute: #A9A69F;
--sox-text-on-dark-dim: #B9B6AF;
--sox-text-on-brown: #DCD5CA;
--sox-text-on-brown-mute:#9C9284;
--sox-text-on-brown-dim: #A79C8D;
--sox-text-on-img: #D9D6CF;
--sox-text-cream: #FCFAF6; /* headings on brown */
--sox-text-cream-soft: #F5F1EA;
/* --- Status ---------------------------------------------------------- */
--sox-green: #5C8A63; /* in stock */
--sox-green-soft: #EEF4EF;
--sox-red: #A83E2B; /* out of stock */
--sox-red-soft: #FBF0EE;
--sox-amber: #B07A18; /* low stock */
--sox-amber-soft: #FBF5E7;
/* --- Typography: families --------------------------------------------
Three roles, two files. `display` is the condensed face and is used ONLY
at 19px and above, where its narrow forms read as confident rather than
cramped. `ui` and `body` are both Manrope — kept as separate tokens so
the interface type can be changed later without touching body copy. */
--sox-font-display: "Big Shoulders Display", "Haettenschweiler",
"Arial Narrow", system-ui, sans-serif;
--sox-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--sox-font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
/* --- Typography: weights ------------------------------------------------ */
--sox-w-black: 900; /* hero + section headings */
--sox-w-extrabold: 800; /* card headings, buttons, footer headings */
--sox-w-bold: 700; /* eyebrows, nav, small caps */
--sox-w-semibold: 600;
--sox-w-medium: 500;
--sox-w-regular: 400;
/* --- Typography: fluid display scale ----------------------------------
Each clamp runs from its mobile size to its desktop size across the
viewport, so headings resize smoothly with no breakpoint jumps.
These are noticeably larger than a normal-width face would allow. A
condensed face sets roughly 25% narrower at the same point size, so the
type can be much bigger before it runs out of column — and big, tight
display type is most of what makes a page feel designed rather than
assembled. */
/* Floor lowered from 52px to 36px. 52px was picked for the condensed face
at desktop, but it is the value a 375px phone lands on, where it turned a
two-line headline into four and pushed the buttons out of the hero. */
--sox-fs-hero: clamp(2.25rem, 1.02rem + 5.26vw, 5.750rem); /* 36→92 */
--sox-fs-display: clamp(2.75rem, 1.60rem + 4.80vw, 4.500rem); /* 44→72 */
--sox-fs-display-2:clamp(2.50rem, 1.60rem + 3.75vw, 3.875rem); /* 40→62 */
--sox-fs-h2: clamp(2.25rem, 1.55rem + 2.90vw, 3.375rem); /* 36→54 */
--sox-fs-h2-sm: clamp(2.00rem, 1.45rem + 2.30vw, 3.000rem); /* 32→48 */
--sox-fs-h2-xs: clamp(1.75rem, 1.35rem + 1.65vw, 2.500rem); /* 28→40 */
--sox-fs-h3: clamp(1.50rem, 1.25rem + 1.05vw, 2.000rem); /* 24→32 */
--sox-fs-h3-sm: clamp(1.375rem,1.20rem + 0.72vw, 1.750rem); /* 22→28 */
--sox-fs-h4: 1.5rem; /* 24 */
--sox-fs-h5: 1.25rem; /* 20 */
/* --- Typography: body scale ------------------------------------------- */
--sox-fs-lead: 1.1875rem; /* 19 — hero subheads */
--sox-fs-lg: 1.125rem; /* 18 — long-form body */
--sox-fs-md: 1rem; /* 16 — default body */
--sox-fs-base: 0.96875rem; /* 15.5 — product card titles */
--sox-fs-sm: 0.9375rem; /* 15 — secondary */
--sox-fs-xs: 0.875rem; /* 14 */
--sox-fs-2xs: 0.84375rem; /* 13.5 */
--sox-fs-3xs: 0.8125rem; /* 13 — eyebrows, meta */
--sox-fs-4xs: 0.78125rem; /* 12.5 — fine print */
--sox-fs-5xs: 0.75rem; /* 12 — small eyebrows */
--sox-fs-6xs: 0.6875rem; /* 11 — card brand line */
--sox-fs-micro: 0.625rem; /* 10 — badges */
/* --- Typography: line heights -----------------------------------------
A condensed face is tall for its width, so its lines can sit much closer
together before they collide. Tight leading on big headings is a large
part of the "designed" look. */
--sox-lh-hero: 0.88;
--sox-lh-tight: 0.94;
--sox-lh-display: 0.96;
--sox-lh-heading: 1.04;
--sox-lh-snug: 1.34; /* Manrope: product names, card copy */
--sox-lh-normal: 1.5;
--sox-lh-body: 1.65;
--sox-lh-relaxed: 1.75;
/* --- Typography: letter spacing ---------------------------------------
Negative tracking is for wide faces. Squeezing a condensed face closes
its counters and turns it to mush, so display type sits at 0 and the
optical tightening comes from size and leading instead. */
--sox-ls-display: 0;
--sox-ls-heading: 0;
--sox-ls-snug: -0.01em; /* Manrope only */
--sox-ls-normal: 0;
--sox-ls-wide: 0.02em;
--sox-ls-eyebrow: 0.16em; /* uppercase eyebrows */
--sox-ls-eyebrow-lg: 0.26em; /* wider eyebrows on feature sections */
--sox-ls-caps: 0.10em; /* small uppercase labels */
--sox-ls-badge: 0.09em;
/* --- Layout ------------------------------------------------------------ */
--sox-container: 1280px;
--sox-container-text: 760px; /* readable measure for article content */
--sox-gutter: 24px;
--sox-gutter-sm: 18px;
/* --- Spacing scale ----------------------------------------------------- */
--sox-space-1: 4px;
--sox-space-2: 8px;
--sox-space-3: 12px;
--sox-space-4: 16px;
--sox-space-5: 20px;
--sox-space-6: 24px;
--sox-space-7: 30px;
--sox-space-8: 36px;
--sox-space-9: 44px;
--sox-space-10: 52px;
--sox-space-11: 64px;
--sox-space-12: 76px;
--sox-space-13: 88px;
--sox-space-14: 96px;
/* Fluid vertical rhythm between page sections */
--sox-section-y: clamp(3rem, 1.8rem + 4.2vw, 4.75rem); /* 48→76 */
--sox-section-y-lg: clamp(3.5rem, 1.9rem + 5.5vw, 6rem); /* 56→96 */
--sox-section-y-sm: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);/* 36→52 */
/* --- Radii -------------------------------------------------------------- */
--sox-radius-xs: 5px;
--sox-radius-sm: 6px;
--sox-radius: 7px; /* buttons */
--sox-radius-md: 10px;
--sox-radius-lg: 12px; /* cards */
--sox-radius-xl: 14px;
--sox-radius-2xl: 20px; /* location cards */
--sox-radius-pill: 999px;
/* --- Shadows ------------------------------------------------------------ */
--sox-shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);
--sox-shadow-sm: 0 1px 3px rgba(42, 29, 18, .06);
--sox-shadow-card: 0 14px 28px rgba(23, 24, 26, .10);
--sox-shadow-lift: 0 16px 32px rgba(23, 24, 26, .12);
--sox-shadow-mega: 0 22px 40px -12px rgba(23, 24, 26, .22);
--sox-shadow-btn: 0 6px 18px rgba(240, 130, 30, .35);
--sox-shadow-head: 0 1px 0 rgba(0, 0, 0, .02);
/* --- Motion -------------------------------------------------------------- */
--sox-ease: cubic-bezier(.4, 0, .2, 1);
--sox-t-fast: .16s;
--sox-t-base: .18s;
--sox-t-slow: .3s;
--sox-t-slide: .5s;
--sox-t-fade: .8s;
/* --- Z-index scale -------------------------------------------------------- */
--sox-z-mega: 49;
--sox-z-header: 50;
--sox-z-drawer: 90;
--sox-z-skiplink: 100;
}
/* ==========================================================================
3. RESET & BASE
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Offset anchor jumps so the sticky header never covers the target. */
scroll-padding-top: 120px;
}
body {
margin: 0;
background: var(--sox-white);
color: var(--sox-text);
font-family: var(--sox-font-body);
font-size: var(--sox-fs-md);
font-weight: var(--sox-w-regular);
line-height: var(--sox-lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
a {
color: var(--sox-text);
text-decoration: none;
transition: color var(--sox-t-fast) var(--sox-ease);
}
a:hover {
color: var(--sox-orange-deep);
}
hr {
border: 0;
border-top: 1px solid var(--sox-line);
margin: var(--sox-space-8) 0;
}
/* Numerals line up in prices, counts and totals. */
.sox-tabular,
.woocommerce-Price-amount,
.sox-price {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ==========================================================================
4. TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--sox-font-display);
font-weight: var(--sox-w-extrabold);
line-height: var(--sox-lh-heading);
letter-spacing: var(--sox-ls-heading);
color: var(--sox-text);
text-wrap: balance;
}
h1 {
font-size: var(--sox-fs-hero);
font-weight: var(--sox-w-black);
line-height: var(--sox-lh-hero);
letter-spacing: var(--sox-ls-heading);
text-transform: uppercase;
}
h2 {
font-size: var(--sox-fs-h2);
font-weight: var(--sox-w-black);
line-height: var(--sox-lh-tight);
letter-spacing: var(--sox-ls-snug);
text-transform: uppercase;
}
h3 {
font-size: var(--sox-fs-h3-sm);
font-weight: var(--sox-w-extrabold);
line-height: var(--sox-lh-heading);
}
h4 {
font-size: var(--sox-fs-h5);
font-weight: var(--sox-w-extrabold);
line-height: var(--sox-lh-heading);
}
/* h5 and h6 are small enough that the condensed face would read as cramped, so
they drop back to the interface font. */
h5 {
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-md);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-snug);
}
h6 {
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-3xs);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-eyebrow);
text-transform: uppercase;
}
p {
margin: 0 0 1.15em;
line-height: var(--sox-lh-body);
}
p:last-child {
margin-bottom: 0;
}
strong, b { font-weight: var(--sox-w-semibold); }
small { font-size: var(--sox-fs-4xs); }
/* --- Display heading modifiers ------------------------------------------ */
.sox-display { font-size: var(--sox-fs-display); font-weight: var(--sox-w-black); line-height: var(--sox-lh-display); letter-spacing: var(--sox-ls-heading); }
.sox-display--alt { text-transform: none; }
.sox-h2-sm { font-size: var(--sox-fs-h2-sm); }
.sox-h2-xs { font-size: var(--sox-fs-h2-xs); }
/* --- Eyebrow: the small uppercase kicker above section headings ---------- */
.sox-eyebrow {
display: block;
margin: 0 0 var(--sox-space-2);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-3xs);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-eyebrow);
line-height: 1.2;
text-transform: uppercase;
color: var(--sox-orange-deep);
}
.sox-eyebrow--wide { letter-spacing: var(--sox-ls-eyebrow-lg); font-weight: var(--sox-w-extrabold); margin-bottom: var(--sox-space-5); }
.sox-eyebrow--on-dark { color: var(--sox-orange-light); }
.sox-eyebrow--on-brown { color: var(--sox-orange); }
.sox-eyebrow--on-cream { color: var(--sox-orange-strong); }
/* --- Lead paragraph ------------------------------------------------------ */
.sox-lead {
font-size: var(--sox-fs-lg);
line-height: var(--sox-lh-relaxed);
color: var(--sox-text-body);
}
.sox-muted { color: var(--sox-text-muted); }
.sox-faint { color: var(--sox-text-faint); }
/* --- Editorial note: marks placeholder / pre-launch content --------------- */
.sox-note {
font-size: var(--sox-fs-4xs);
font-style: italic;
color: var(--sox-text-faint);
text-align: center;
}
/* ==========================================================================
5. LAYOUT PRIMITIVES
========================================================================== */
.sox-container {
width: 100%;
max-width: var(--sox-container);
margin-inline: auto;
padding-inline: var(--sox-gutter);
}
.sox-container--narrow { max-width: 920px; }
.sox-container--text { max-width: var(--sox-container-text); }
.sox-section { padding-block: var(--sox-section-y); }
.sox-section--lg { padding-block: var(--sox-section-y-lg); }
.sox-section--sm { padding-block: var(--sox-section-y-sm); }
.sox-section--flush-b { padding-bottom: 0; }
/* Section background variants */
.sox-section--white { background: var(--sox-white); }
.sox-section--cream { background: var(--sox-cream); border-top: 1px solid var(--sox-line-warm); }
.sox-section--warm { background: var(--sox-cream-warm); border-block: 1px solid var(--sox-line-cool); }
.sox-section--deep { background: var(--sox-cream-deep); }
.sox-section--ink { background: var(--sox-ink); color: var(--sox-text-on-dark); }
.sox-section--brown { background: var(--sox-brown); color: var(--sox-text-on-brown); }
.sox-section--ink h1, .sox-section--ink h2, .sox-section--ink h3, .sox-section--ink h4,
.sox-section--brown h1, .sox-section--brown h2, .sox-section--brown h3, .sox-section--brown h4 {
color: var(--sox-text-cream);
}
/* --- Section header: eyebrow + heading on the left, link on the right ----- */
.sox-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sox-space-5);
flex-wrap: wrap;
margin-bottom: var(--sox-space-7);
}
.sox-section-head--center {
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: var(--sox-space-9);
}
.sox-section-head__title { margin: 0; }
.sox-section-head--center .sox-section-head__intro {
max-width: 560px;
margin-top: var(--sox-space-2);
font-size: var(--sox-fs-md);
color: var(--sox-text-muted);
}
/* --- Responsive grids ----------------------------------------------------- */
.sox-grid {
display: grid;
gap: var(--sox-space-6);
}
.sox-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sox-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sox-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) {
.sox-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.sox-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sox-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sox-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.sox-grid--3,
.sox-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
6. COMPONENTS
========================================================================== */
/* --- Buttons -------------------------------------------------------------- */
.sox-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sox-space-2);
padding: 16px 26px;
border: 1.5px solid transparent;
border-radius: var(--sox-radius);
background: var(--sox-orange);
color: var(--sox-ink);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-md);
font-weight: var(--sox-w-extrabold);
line-height: 1;
text-align: center;
text-decoration: none;
transition:
background var(--sox-t-fast) var(--sox-ease),
border-color var(--sox-t-fast) var(--sox-ease),
color var(--sox-t-fast) var(--sox-ease),
transform var(--sox-t-fast) var(--sox-ease),
box-shadow var(--sox-t-fast) var(--sox-ease);
}
.sox-btn:hover,
.sox-btn:focus-visible {
background: var(--sox-orange-hover);
color: var(--sox-ink);
transform: translateY(-1px);
}
.sox-btn:active { transform: translateY(0); }
.sox-btn svg { flex: none; }
/* Primary with the orange glow used in the hero */
.sox-btn--glow { box-shadow: var(--sox-shadow-btn); }
/* Translucent outline for use over imagery */
.sox-btn--ghost {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .55);
color: var(--sox-white);
font-weight: var(--sox-w-bold);
padding: 16px 24px;
}
.sox-btn--ghost:hover,
.sox-btn--ghost:focus-visible {
background: var(--sox-white);
border-color: var(--sox-white);
color: var(--sox-ink);
}
/* Dark solid */
.sox-btn--dark {
background: var(--sox-brown);
color: var(--sox-text-cream);
}
.sox-btn--dark:hover,
.sox-btn--dark:focus-visible {
background: var(--sox-brown-hover);
color: var(--sox-text-cream);
}
/* Outline on light backgrounds */
.sox-btn--outline {
background: transparent;
border-color: var(--sox-line-tan);
color: var(--sox-brown);
}
.sox-btn--outline:hover,
.sox-btn--outline:focus-visible {
background: var(--sox-cream-pill);
border-color: var(--sox-brown);
color: var(--sox-brown);
}
/* Outline in near-black */
.sox-btn--outline-ink {
background: transparent;
border-color: var(--sox-ink);
color: var(--sox-ink);
font-weight: var(--sox-w-bold);
padding: 13px 24px;
font-size: var(--sox-fs-sm);
}
.sox-btn--outline-ink:hover,
.sox-btn--outline-ink:focus-visible {
background: var(--sox-ink);
color: var(--sox-white);
}
.sox-btn--pill { border-radius: var(--sox-radius-pill); padding: 20px 36px; }
.sox-btn--sm { padding: 12px 20px; font-size: var(--sox-fs-xs); }
.sox-btn--block { display: flex; width: 100%; }
/* --- Arrow link: text with an orange underline and a chevron -------------- */
.sox-arrow-link {
display: inline-flex;
align-items: center;
gap: var(--sox-space-2);
padding-bottom: 2px;
border-bottom: 2px solid var(--sox-orange);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-sm);
font-weight: var(--sox-w-bold);
color: var(--sox-ink);
white-space: nowrap;
}
.sox-arrow-link svg {
transition: transform var(--sox-t-fast) var(--sox-ease);
}
.sox-arrow-link:hover svg,
.sox-arrow-link:focus-visible svg {
transform: translateX(3px);
}
.sox-arrow-link--on-dark { color: var(--sox-text-cream); }
/* --- Badges ---------------------------------------------------------------- */
.sox-badge {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: var(--sox-radius-xs);
background: var(--sox-orange);
color: var(--sox-ink);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-micro);
font-weight: var(--sox-w-extrabold);
letter-spacing: var(--sox-ls-badge);
line-height: 1.4;
text-transform: uppercase;
white-space: nowrap;
}
.sox-badge--ink { background: var(--sox-ink); color: var(--sox-white); }
.sox-badge--green { background: var(--sox-green); color: var(--sox-white); }
.sox-badge--brown { background: var(--sox-brown); color: var(--sox-text-cream); }
/* --- Stock indicator -------------------------------------------------------- */
.sox-stock {
display: inline-flex;
align-items: center;
gap: var(--sox-space-2);
font-size: var(--sox-fs-4xs);
font-weight: var(--sox-w-semibold);
line-height: 1.3;
}
.sox-stock::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.sox-stock--in { color: var(--sox-green); }
.sox-stock--low { color: var(--sox-amber); }
.sox-stock--out { color: var(--sox-red); }
/* --- Card ------------------------------------------------------------------- */
.sox-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius-lg);
background: var(--sox-white);
transition:
transform var(--sox-t-base) var(--sox-ease),
box-shadow var(--sox-t-base) var(--sox-ease),
border-color var(--sox-t-base) var(--sox-ease);
}
.sox-card:hover {
transform: translateY(-4px);
box-shadow: var(--sox-shadow-card);
border-color: #EAD9C6;
}
/* --- Media frame: fixed-ratio image well with a neutral backdrop ----------- */
.sox-media {
position: relative;
overflow: hidden;
background: var(--sox-placeholder);
}
.sox-media > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--sox-t-slow) var(--sox-ease);
}
.sox-media--square { aspect-ratio: 1 / 1; }
.sox-media--card { aspect-ratio: 4 / 3.4; }
.sox-media--wide { aspect-ratio: 16 / 9; }
/* --- Circular chevron chip --------------------------------------------------- */
.sox-chip-arrow {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--sox-sand);
transition: background var(--sox-t-fast) var(--sox-ease);
}
/* --- Icons ---------------------------------------------------------------------
Icons inherit currentColor by default. `--accent` forces the brand orange,
used for the chevrons on arrow links where the text stays near-black. */
.sox-icon { flex: none; }
.sox-icon--accent { color: var(--sox-orange); }
/* --- Star rating ----------------------------------------------------------------- */
.sox-stars {
display: inline-flex;
gap: 1px;
color: var(--sox-orange);
line-height: 0;
}
.sox-star--empty { color: var(--sox-line-grey); }
/* --- Skip link ----------------------------------------------------------------- */
.sox-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: var(--sox-z-skiplink);
padding: 12px 20px;
background: var(--sox-ink);
color: var(--sox-white);
font-family: var(--sox-font-ui);
font-weight: var(--sox-w-bold);
}
.sox-skip-link:focus {
left: 8px;
top: 8px;
color: var(--sox-white);
}
/* ==========================================================================
7. UTILITY BAR
Thin near-black strip above the header: tagline left, store phones right.
Content is edited in Sox Outlet → Header & Footer.
========================================================================== */
.sox-utility {
background: var(--sox-ink);
color: var(--sox-text-on-dark);
font-size: var(--sox-fs-3xs);
letter-spacing: var(--sox-ls-wide);
}
.sox-utility__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sox-space-4);
flex-wrap: wrap;
padding-block: 9px;
}
/* The margin reset matters: this is a
, and the base paragraph style gives
it a bottom margin. Without clearing it the flex box is taller than its text
and the line sits visibly high in the bar. */
.sox-utility__tagline {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
line-height: 1.4;
font-weight: var(--sox-w-medium);
}
.sox-utility__tagline::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sox-orange);
}
.sox-utility__phones {
display: flex;
align-items: center;
gap: var(--sox-space-5);
color: var(--sox-text-on-dark-dim);
font-weight: var(--sox-w-medium);
}
.sox-utility__phones a { color: var(--sox-text-on-dark-dim); }
.sox-utility__phones a:hover { color: var(--sox-orange); }
.sox-utility__sep { opacity: .35; }
/* Phones and socials sit together at the right-hand end. */
.sox-utility__end {
display: flex;
align-items: center;
gap: var(--sox-space-5);
}
/*
* A compact variant of the footer social list. The footer version is a row of
* 46px bordered circles, which would be taller than this whole strip.
*/
.sox-utility .sox-utility__social {
gap: var(--sox-space-2);
}
.sox-utility .sox-utility__social a {
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
/* A filled disc rather than a bare glyph: on a dark strip a thin outline
icon reads as decoration, a disc reads as a button. */
background: rgba(255, 255, 255, .12);
color: var(--sox-white);
transition:
background var(--sox-t-fast) var(--sox-ease),
color var(--sox-t-fast) var(--sox-ease);
}
.sox-utility .sox-utility__social a:hover,
.sox-utility .sox-utility__social a:focus-visible {
background: var(--sox-orange);
color: var(--sox-ink);
}
@media (max-width: 560px) {
/*
* The tagline gives way to the icons on a narrow screen. There is only room
* for one of them, and the phone numbers are already in the mobile menu.
*/
.sox-utility__phones,
.sox-utility__tagline { display: none; }
.sox-utility__inner { justify-content: center; }
.sox-utility__end { gap: var(--sox-space-3); }
}
/* ==========================================================================
8. HEADER, NAVIGATION & MEGA MENU
========================================================================== */
.sox-header {
position: sticky;
top: 0;
z-index: var(--sox-z-header);
background: var(--sox-white);
border-bottom: 1px solid var(--sox-line);
box-shadow: var(--sox-shadow-head);
transition: box-shadow var(--sox-t-base) var(--sox-ease);
}
/* Deepens once the page scrolls — class toggled in theme.js */
.sox-header.is-stuck {
box-shadow: 0 4px 20px -6px rgba(23, 24, 26, .14);
}
.sox-header__inner {
display: flex;
align-items: center;
gap: var(--sox-space-6);
padding-block: 14px;
}
/* --- Logo -------------------------------------------------------------------- */
.sox-logo {
flex: none;
display: block;
line-height: 0;
}
.sox-logo img {
height: 52px;
width: auto;
max-width: 260px;
object-fit: contain;
}
/* Text fallback shown until a logo image is set in Appearance → Customize */
.sox-logo__text {
display: block;
font-family: var(--sox-font-display);
font-size: 1.75rem;
font-weight: var(--sox-w-black);
letter-spacing: var(--sox-ls-display);
line-height: 1;
text-transform: uppercase;
color: var(--sox-ink);
}
.sox-logo__text span { color: var(--sox-orange); }
.sox-logo__tag {
display: block;
margin-top: 3px;
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-micro);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-eyebrow-lg);
text-transform: uppercase;
color: var(--sox-text-muted);
}
@media (max-width: 560px) {
.sox-logo img { height: 40px; }
.sox-logo__text { font-size: 1.375rem; }
}
/* --- Primary navigation ------------------------------------------------------- */
.sox-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.sox-nav__list {
display: flex;
align-items: center;
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
}
/* A plain dropdown is positioned against its own menu item, so it sits directly
beneath the link. */
.sox-nav__item { position: relative; }
/* A mega panel spans the full header, so it must NOT be positioned against the
menu item — it takes its containing block from .sox-header (which is sticky,
and therefore a positioned ancestor) and stretches edge to edge. */
.sox-nav__item--mega { position: static; }
.sox-nav__link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
font-family: var(--sox-font-ui);
font-size: 0.90625rem; /* 14.5 */
font-weight: var(--sox-w-semibold);
line-height: 1.4;
color: var(--sox-ink);
white-space: nowrap;
}
.sox-nav__link:hover,
.sox-nav__link:focus-visible,
.sox-nav__item.is-open > .sox-nav__link {
color: var(--sox-orange-deep);
}
/* Current page / section */
.sox-nav__item.current-menu-item > .sox-nav__link,
.sox-nav__item.current-menu-ancestor > .sox-nav__link,
.sox-nav__item.current-menu-parent > .sox-nav__link {
font-weight: var(--sox-w-bold);
color: var(--sox-orange);
}
.sox-nav__caret {
flex: none;
opacity: .5;
transition: transform var(--sox-t-fast) var(--sox-ease);
}
.sox-nav__item.is-open .sox-nav__caret { transform: rotate(180deg); }
/* --- Mega menu panel ------------------------------------------------------------
Rendered from the child items of a top-level menu item in Appearance → Menus.
Third-level items become the column links; the promo tile image and title are
set per menu item in the menu editor. */
.sox-mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: var(--sox-z-mega);
background: var(--sox-white);
border-top: 1px solid var(--sox-line-warm);
border-bottom: 1px solid var(--sox-line);
box-shadow: var(--sox-shadow-mega);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--sox-t-base) var(--sox-ease),
transform var(--sox-t-base) var(--sox-ease),
visibility 0s linear var(--sox-t-base);
}
/* `is-open` is set by theme.js on hover and on click/tap. `focus-within` is the
keyboard path — tabbing into the parent link opens the panel with no JS. */
.sox-nav__item.is-open > .sox-mega,
.sox-nav__item:focus-within > .sox-mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.sox-mega__inner {
display: grid;
grid-template-columns: 1.7fr .9fr;
gap: var(--sox-space-9);
max-width: var(--sox-container);
margin-inline: auto;
padding: 32px var(--sox-gutter);
}
.sox-mega__col { min-width: 0; }
/* No promo image chosen for this menu item — let the links use the full width
rather than leaving an empty box beside them. */
.sox-mega__col:only-child { grid-column: 1 / -1; }
.sox-mega__title {
margin-bottom: var(--sox-space-5);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-xs);
font-weight: var(--sox-w-extrabold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sox-orange-deep);
}
.sox-mega__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px var(--sox-space-7);
margin: 0;
padding: 0;
list-style: none;
}
.sox-mega__link {
display: inline-flex;
align-items: center;
gap: var(--sox-space-2);
padding: 5px 0;
font-size: var(--sox-fs-sm);
color: var(--sox-text-body);
}
.sox-mega__link::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--sox-orange);
}
.sox-mega__link:hover,
.sox-mega__link:focus-visible { color: var(--sox-orange-deep); }
.sox-mega__all { margin-top: var(--sox-space-5); }
/* Promo tile */
.sox-mega__promo {
position: relative;
display: flex;
align-items: flex-end;
min-height: 180px;
overflow: hidden;
border: 1px solid #E1DCD2;
border-radius: var(--sox-radius-md);
background: #EAE6DF;
}
.sox-mega__promo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--sox-t-slow) var(--sox-ease);
}
.sox-mega__promo:hover img { transform: scale(1.04); }
.sox-mega__promo-body {
position: relative;
width: 100%;
padding: var(--sox-space-5);
background: linear-gradient(transparent, rgba(23, 24, 26, .72));
}
.sox-mega__promo-title {
font-family: var(--sox-font-display);
font-size: 1.125rem;
font-weight: var(--sox-w-extrabold);
line-height: 1.05;
text-transform: uppercase;
color: var(--sox-white);
}
.sox-mega__promo-meta {
margin-top: var(--sox-space-1);
font-size: var(--sox-fs-xs);
font-weight: var(--sox-w-semibold);
color: var(--sox-orange-sand);
}
/* --- Plain dropdown (menu item with children but no mega layout) ------------- */
.sox-dropdown {
position: absolute;
left: 0;
top: 100%;
z-index: var(--sox-z-mega);
min-width: 230px;
margin: 0;
padding: var(--sox-space-2) 0;
list-style: none;
background: var(--sox-white);
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius-md);
box-shadow: var(--sox-shadow-mega);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--sox-t-base) var(--sox-ease),
transform var(--sox-t-base) var(--sox-ease),
visibility 0s linear var(--sox-t-base);
}
.sox-nav__item.is-open > .sox-dropdown,
.sox-nav__item:focus-within > .sox-dropdown,
.sox-dropdown li.is-open > .sox-dropdown,
.sox-dropdown li:focus-within > .sox-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
/* Third level opens to the side */
.sox-dropdown .sox-dropdown {
left: 100%;
top: -9px;
}
/* Flip a third level that would run off the right edge of the viewport. */
.sox-dropdown .sox-dropdown.is-flipped {
left: auto;
right: 100%;
}
.sox-dropdown li { position: relative; }
.sox-dropdown__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sox-space-2);
padding: 9px var(--sox-space-5);
font-size: var(--sox-fs-sm);
color: var(--sox-text-body);
}
.sox-dropdown__link:hover,
.sox-dropdown__link:focus-visible {
background: var(--sox-cream);
color: var(--sox-orange-deep);
}
.sox-dropdown__caret { flex: none; opacity: .45; }
/* --- Header actions: cart + mobile toggle ------------------------------------- */
.sox-header__actions {
flex: none;
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
/* The icon is drawn with stroke="currentColor", so this colour is what makes it
visible. Without it the link inherits the body's near-black onto a near-black
circle and the icon only appears on hover, when the global link-hover colour
kicks in. */
.sox-cart-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--sox-ink);
color: var(--sox-text-cream);
transition:
background var(--sox-t-fast) var(--sox-ease),
color var(--sox-t-fast) var(--sox-ease);
}
.sox-cart-btn:hover,
.sox-cart-btn:focus-visible {
background: var(--sox-orange);
color: var(--sox-ink);
}
/* Keep the count readable once the button itself turns orange. */
.sox-cart-btn:hover .sox-cart-btn__count,
.sox-cart-btn:focus-visible .sox-cart-btn__count {
background: var(--sox-ink);
color: var(--sox-white);
}
.sox-cart-btn__count {
position: absolute;
top: -2px;
right: -2px;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding-inline: 4px;
border: 2px solid var(--sox-white);
border-radius: var(--sox-radius-pill);
background: var(--sox-orange);
color: var(--sox-ink);
font-family: var(--sox-font-ui);
font-size: 0.65625rem; /* 10.5 */
font-weight: var(--sox-w-extrabold);
line-height: 1;
}
/* Hamburger — hidden on desktop. Swaps to a close icon while the panel is open. */
.sox-menu-toggle {
display: none;
align-items: center;
justify-content: center;
padding: 9px;
border: 1px solid #E0DCD3;
border-radius: var(--sox-radius-sm);
background: none;
color: var(--sox-ink);
transition:
border-color var(--sox-t-fast) var(--sox-ease),
background var(--sox-t-fast) var(--sox-ease);
}
.sox-menu-toggle:hover { border-color: var(--sox-ink); }
.sox-menu-toggle[aria-expanded="true"] {
background: var(--sox-ink);
border-color: var(--sox-ink);
color: var(--sox-white);
}
.sox-menu-toggle__close { display: none; }
.sox-menu-toggle[aria-expanded="true"] .sox-menu-toggle__open { display: none; }
.sox-menu-toggle[aria-expanded="true"] .sox-menu-toggle__close { display: block; }
@media (max-width: 960px) {
.sox-nav { display: none; }
.sox-menu-toggle { display: inline-flex; }
.sox-header__inner { gap: var(--sox-space-4); }
}
@media (max-width: 1080px) {
.sox-nav__link { padding: 8px 9px; font-size: var(--sox-fs-3xs); }
}
@media (max-width: 900px) {
.sox-mega__inner { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
9. MOBILE NAVIGATION PANEL
========================================================================== */
.sox-mobile-nav {
display: none;
border-top: 1px solid var(--sox-line);
background: var(--sox-white);
padding: var(--sox-space-2) var(--sox-space-4) var(--sox-space-4);
max-height: calc(100vh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
}
.sox-mobile-nav.is-open { display: block; }
.sox-mobile-nav ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.sox-mobile-nav li { border-bottom: 1px solid var(--sox-line-soft); }
.sox-mobile-nav > ul > li:last-child { border-bottom: 0; }
.sox-mobile-nav__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sox-space-2);
}
.sox-mobile-nav a {
flex: 1;
padding: 13px var(--sox-space-2);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-md);
font-weight: var(--sox-w-semibold);
color: var(--sox-ink);
}
/* Expand/collapse control for nested items */
.sox-mobile-nav__toggle {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--sox-radius-sm);
background: var(--sox-cream);
color: var(--sox-ink);
transition: background var(--sox-t-fast) var(--sox-ease);
}
.sox-mobile-nav__toggle svg { transition: transform var(--sox-t-fast) var(--sox-ease); }
.sox-mobile-nav__toggle[aria-expanded="true"] { background: var(--sox-orange); }
.sox-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Nested list, collapsed by default.
*
* Both selectors are qualified with .sox-mobile-nav on purpose. The generic
* `.sox-mobile-nav ul` rule above scores 0,1,1 and would otherwise outrank a
* bare `.sox-mobile-nav__sub` at 0,1,0 — so `display: none` never applied, the
* submenus were permanently open, and the toggle button appeared broken even
* though its JavaScript was working. Keep the parent class on these two. */
.sox-mobile-nav .sox-mobile-nav__sub {
display: none;
padding-left: var(--sox-space-4);
border-left: 2px solid var(--sox-line);
margin-bottom: var(--sox-space-2);
}
.sox-mobile-nav .sox-mobile-nav__sub.is-open {
display: flex;
flex-direction: column;
}
.sox-mobile-nav__sub a {
padding: 10px var(--sox-space-2);
font-family: var(--sox-font-body);
font-size: var(--sox-fs-sm);
font-weight: var(--sox-w-medium);
color: var(--sox-text-body);
}
/* Store phone numbers repeated at the foot of the mobile panel — calling the
shop is the most common thing a visitor does from a phone. */
.sox-mobile-nav__contact {
display: flex;
flex-direction: column;
gap: var(--sox-space-2);
margin-top: var(--sox-space-4);
padding-top: var(--sox-space-4);
border-top: 1px solid var(--sox-line);
}
.sox-mobile-nav__phone {
display: flex;
align-items: center;
gap: var(--sox-space-3);
padding: 12px var(--sox-space-3);
border-radius: var(--sox-radius-sm);
background: var(--sox-cream);
color: var(--sox-ink);
font-size: var(--sox-fs-sm);
}
.sox-mobile-nav__phone:hover { background: var(--sox-cream-pill); }
.sox-mobile-nav__phone .sox-icon { color: var(--sox-orange); }
.sox-mobile-nav__phone strong {
display: block;
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-4xs);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-caps);
text-transform: uppercase;
color: var(--sox-text-muted);
}
@media (min-width: 961px) {
.sox-mobile-nav { display: none !important; }
}
/* ==========================================================================
10. FOOTER
========================================================================== */
.sox-footer {
background: var(--sox-brown);
color: var(--sox-text-on-brown);
}
/* Columns: brand + footer menu + one column per store. The store count is set
as --sox-footer-stores in footer.php, so adding a third shop location adds a
column instead of breaking the layout. */
.sox-footer__inner {
display: grid;
grid-template-columns:
1.35fr
.8fr
repeat(var(--sox-footer-stores, 2), minmax(0, 1fr));
gap: var(--sox-space-10);
padding-block: var(--sox-space-12) var(--sox-space-9);
}
.sox-footer__heading {
margin: 0 0 var(--sox-space-5);
font-family: var(--sox-font-display);
font-size: var(--sox-fs-h5);
font-weight: var(--sox-w-extrabold);
letter-spacing: var(--sox-ls-normal);
color: var(--sox-text-cream);
}
.sox-footer__logo img {
height: 84px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.sox-footer__about {
max-width: 300px;
margin: var(--sox-space-5) 0 var(--sox-space-6);
font-size: var(--sox-fs-md);
line-height: var(--sox-lh-body);
color: var(--sox-text-on-brown);
}
.sox-footer__links {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--sox-fs-md);
}
.sox-footer__links a { color: var(--sox-text-on-brown); }
.sox-footer__links a:hover,
.sox-footer__links a:focus-visible { color: var(--sox-orange); }
/* Store block in the footer */
.sox-footer__store {
display: flex;
flex-direction: column;
gap: 14px;
}
.sox-footer__address {
font-size: var(--sox-fs-md);
line-height: var(--sox-lh-normal);
color: var(--sox-text-on-brown);
font-style: normal;
}
.sox-footer__phone {
font-family: var(--sox-font-ui);
font-size: 1.0625rem; /* 17 */
font-weight: var(--sox-w-extrabold);
color: var(--sox-orange);
}
.sox-footer__phone:hover { color: var(--sox-orange-light); }
.sox-footer__hours {
font-size: var(--sox-fs-sm);
line-height: var(--sox-lh-body);
color: var(--sox-text-on-brown-mute);
}
/* Social icons */
.sox-social {
display: flex;
gap: var(--sox-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.sox-social a {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid var(--sox-line-on-brown-mid);
border-radius: var(--sox-radius-pill);
transition:
background var(--sox-t-fast) var(--sox-ease),
border-color var(--sox-t-fast) var(--sox-ease);
}
.sox-social a:hover,
.sox-social a:focus-visible {
background: var(--sox-orange);
border-color: var(--sox-orange);
}
/* Bottom bar */
.sox-footer__bottom {
border-top: 1px solid var(--sox-line-on-brown);
}
.sox-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sox-space-4);
flex-wrap: wrap;
padding: var(--sox-space-6) var(--sox-gutter) var(--sox-space-8);
text-align: center;
font-size: var(--sox-fs-sm);
color: var(--sox-text-on-brown-mute);
}
.sox-footer__bottom-inner a { color: var(--sox-text-on-brown-mute); }
.sox-footer__bottom-inner a:hover { color: var(--sox-orange); }
.sox-footer__legal {
display: flex;
gap: var(--sox-space-4);
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1080px) {
.sox-footer__inner { gap: var(--sox-space-8); }
}
@media (max-width: 900px) {
.sox-footer__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sox-space-7);
}
}
@media (max-width: 560px) {
.sox-footer__inner { grid-template-columns: minmax(0, 1fr); }
.sox-footer__about { max-width: none; }
}
/* ==========================================================================
11. PAGE FURNITURE
The masthead, breadcrumb, pagination and empty states shared by every page
that is not the homepage.
========================================================================== */
/* --- Page header banner --------------------------------------------------- */
.sox-page-header {
position: relative;
background: var(--sox-cream-deep);
border-bottom: 1px solid var(--sox-line-warm);
background-size: cover;
background-position: center;
}
.sox-page-header__inner {
position: relative;
padding-block: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
}
.sox-page-header__title {
margin: 0;
font-size: var(--sox-fs-display-2);
font-weight: var(--sox-w-black);
line-height: var(--sox-lh-display);
letter-spacing: var(--sox-ls-display);
text-transform: uppercase;
color: var(--sox-brown);
}
.sox-page-header__subtitle {
max-width: 620px;
margin: var(--sox-space-3) 0 0;
font-size: var(--sox-fs-lg);
line-height: var(--sox-lh-body);
color: var(--sox-text-sub);
}
/* With a background image, darken it and flip the text to light. */
.sox-page-header--image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(20, 21, 23, .88) 0%,
rgba(20, 21, 23, .62) 55%,
rgba(20, 21, 23, .28) 100%
);
}
.sox-page-header--image .sox-page-header__title { color: var(--sox-white); }
.sox-page-header--image .sox-page-header__subtitle { color: var(--sox-text-on-img); }
.sox-page-header--image .sox-breadcrumb { color: var(--sox-text-on-dark-mute); }
.sox-page-header--image .sox-breadcrumb a { color: var(--sox-text-on-dark-dim); }
.sox-page-header--image .sox-breadcrumb a:hover { color: var(--sox-orange); }
/* --- Breadcrumb ------------------------------------------------------------ */
.sox-breadcrumb {
margin-bottom: var(--sox-space-4);
font-size: var(--sox-fs-3xs);
color: var(--sox-text-muted);
}
.sox-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sox-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.sox-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--sox-space-2); }
/* Chevron separator between crumbs, drawn rather than typed so it scales. */
.sox-breadcrumb__item + .sox-breadcrumb__item::before {
content: "";
width: 5px;
height: 5px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: .45;
}
.sox-breadcrumb a {
color: var(--sox-text-muted);
font-weight: var(--sox-w-medium);
}
.sox-breadcrumb a:hover { color: var(--sox-orange-deep); }
/* --- Pagination ------------------------------------------------------------ */
.sox-pagination,
.woocommerce-pagination {
margin-top: var(--sox-space-11);
}
.sox-pagination .nav-links,
.woocommerce-pagination .page-numbers {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--sox-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.sox-pagination .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding-inline: var(--sox-space-3);
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius-sm);
background: var(--sox-white);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-sm);
font-weight: var(--sox-w-bold);
color: var(--sox-ink);
transition:
background var(--sox-t-fast) var(--sox-ease),
border-color var(--sox-t-fast) var(--sox-ease),
color var(--sox-t-fast) var(--sox-ease);
}
.sox-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers li .page-numbers:hover {
border-color: var(--sox-ink);
background: var(--sox-cream);
color: var(--sox-ink);
}
.sox-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
background: var(--sox-orange);
border-color: var(--sox-orange);
color: var(--sox-ink);
}
.sox-pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers li .page-numbers.dots {
border-color: transparent;
background: none;
min-width: 24px;
}
/* --- Empty state ------------------------------------------------------------ */
.sox-empty {
max-width: 520px;
margin-inline: auto;
padding-block: var(--sox-space-11);
text-align: center;
}
.sox-empty p {
margin: var(--sox-space-3) 0 var(--sox-space-6);
color: var(--sox-text-muted);
}
/* --- Blog post card ---------------------------------------------------------- */
.sox-post-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
}
.sox-post-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--sox-space-5) var(--sox-space-5) var(--sox-space-6);
}
.sox-post-card__meta {
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-6xs);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-caps);
text-transform: uppercase;
color: var(--sox-orange-ink);
}
.sox-post-card__title {
margin: var(--sox-space-2) 0 var(--sox-space-3);
font-size: var(--sox-fs-h3-sm);
line-height: var(--sox-lh-snug);
text-transform: none;
letter-spacing: var(--sox-ls-snug);
}
.sox-post-card__excerpt {
flex: 1;
margin: 0 0 var(--sox-space-4);
font-size: var(--sox-fs-sm);
color: var(--sox-text-muted);
}
.sox-post-card__date {
font-size: var(--sox-fs-4xs);
color: var(--sox-text-faint);
}
.sox-post-card:hover .sox-post-card__title { color: var(--sox-orange-deep); }
/* ==========================================================================
12. ACCESSIBILITY & MOTION
========================================================================== */
/* WordPress core screen-reader class */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
position: static !important;
width: auto;
height: auto;
clip: auto;
clip-path: none;
}
/* Visible, on-brand focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--sox-orange);
outline-offset: 2px;
border-radius: 2px;
}
/* Respect the visitor's reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Print */
@media print {
.sox-utility,
.sox-menu-toggle,
.sox-mobile-nav,
.sox-mega,
.sox-dropdown,
.sox-header__actions { display: none !important; }
.sox-header { position: static !important; box-shadow: none !important; }
body { background: #fff; }
}
/* ==========================================================================
13. PAGE FURNITURE — additions
Masthead extras, long-form prose, empty states, search, forms and alerts.
========================================================================== */
/* --- Masthead extras ------------------------------------------------------ */
.sox-page-header--compact { padding-block: var(--sox-space-7) var(--sox-space-6); }
.sox-page-header__count {
display: inline-block;
margin-left: var(--sox-space-3);
padding: 5px 12px;
border-radius: var(--sox-radius-pill);
background: var(--sox-white);
border: 1px solid var(--sox-line);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-4xs);
font-weight: var(--sox-w-bold);
letter-spacing: 0;
text-transform: none;
vertical-align: middle;
color: var(--sox-text-muted);
}
.sox-page-header--image .sox-page-header__count {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .3);
color: var(--sox-white);
}
.sox-page-header__description {
max-width: 68ch;
margin-top: var(--sox-space-4);
font-size: var(--sox-fs-md);
line-height: var(--sox-lh-body);
color: var(--sox-text-muted);
}
.sox-page-header__description p:last-child { margin-bottom: 0; }
.sox-page-header--image .sox-page-header__description { color: var(--sox-text-on-img); }
/* --- Long-form content ----------------------------------------------------
Applied to anything written in the block editor. The job here is a
comfortable measure and a clear vertical rhythm — nothing decorative. */
.sox-page { padding-block: var(--sox-section-y); }
.sox-prose {
font-size: var(--sox-fs-lg);
line-height: var(--sox-lh-relaxed);
color: var(--sox-text-body);
}
.sox-prose > * + * { margin-top: 1.15em; }
.sox-prose h2 {
margin-top: 2em;
font-size: var(--sox-fs-h2-xs);
color: var(--sox-ink);
}
.sox-prose h3 {
margin-top: 1.6em;
font-size: var(--sox-fs-h3-sm);
color: var(--sox-ink);
}
.sox-prose h4 {
margin-top: 1.4em;
font-size: var(--sox-fs-h4);
color: var(--sox-ink);
}
.sox-prose a {
color: var(--sox-orange-deep);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.sox-prose a:hover { color: var(--sox-orange-hover); }
.sox-prose ul,
.sox-prose ol { padding-left: 1.35em; }
.sox-prose li + li { margin-top: .45em; }
.sox-prose ul { list-style: disc; }
.sox-prose ol { list-style: decimal; }
.sox-prose blockquote {
margin-inline: 0;
padding: var(--sox-space-2) 0 var(--sox-space-2) var(--sox-space-6);
border-left: 3px solid var(--sox-orange);
font-size: var(--sox-fs-lead);
color: var(--sox-ink);
}
.sox-prose img,
.sox-prose figure { border-radius: var(--sox-radius-lg); }
.sox-prose figcaption {
margin-top: var(--sox-space-2);
font-size: var(--sox-fs-3xs);
color: var(--sox-text-faint);
text-align: center;
}
.sox-prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--sox-fs-sm);
}
.sox-prose th,
.sox-prose td {
padding: var(--sox-space-3);
border-bottom: 1px solid var(--sox-line);
text-align: left;
}
.sox-prose th { font-weight: var(--sox-w-bold); color: var(--sox-ink); }
.sox-prose code {
padding: 2px 6px;
border-radius: var(--sox-radius-xs);
background: var(--sox-cream-warm);
font-size: .9em;
}
.sox-page-links { margin-top: var(--sox-space-8); font-size: var(--sox-fs-sm); }
.sox-comments-wrap { padding-bottom: var(--sox-section-y); }
/* --- Empty states ---------------------------------------------------------- */
.sox-empty {
display: flex;
flex-direction: column;
align-items: center;
max-width: 560px;
margin-inline: auto;
padding: var(--sox-space-11) var(--sox-space-6);
text-align: center;
}
.sox-empty--page { padding-block: var(--sox-space-8); }
.sox-empty__icon {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin-bottom: var(--sox-space-6);
border-radius: 50%;
background: var(--sox-cream-warm);
color: var(--sox-text-faint);
}
.sox-empty__code {
font-family: var(--sox-font-display);
font-size: clamp(5rem, 2rem + 12vw, 9rem);
font-weight: var(--sox-w-black);
line-height: .8;
color: var(--sox-orange);
}
.sox-empty__title {
margin-bottom: var(--sox-space-3);
font-size: var(--sox-fs-h2-xs);
text-transform: uppercase;
}
.sox-empty--page .sox-empty__title { margin-top: var(--sox-space-6); }
.sox-empty__text {
margin-bottom: var(--sox-space-7);
font-size: var(--sox-fs-md);
line-height: var(--sox-lh-body);
color: var(--sox-text-muted);
}
.sox-empty__search { width: 100%; margin-bottom: var(--sox-space-7); }
.sox-empty__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sox-space-3);
}
/* --- Search form ------------------------------------------------------------ */
.sox-search__field {
position: relative;
display: flex;
align-items: center;
gap: var(--sox-space-2);
padding: 6px 6px 6px var(--sox-space-5);
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius-pill);
background: var(--sox-white);
transition: border-color var(--sox-t-fast) var(--sox-ease);
}
.sox-search__field:focus-within { border-color: var(--sox-orange); }
.sox-search__icon { flex: none; color: var(--sox-text-faint); }
.sox-search__input {
flex: 1;
min-width: 0;
padding: 10px 0;
border: 0;
background: none;
font-size: var(--sox-fs-md);
color: var(--sox-ink);
}
.sox-search__input:focus { outline: none; }
.sox-search__input::placeholder { color: var(--sox-text-faint); }
.sox-search__submit {
flex: none;
padding: 11px var(--sox-space-6);
border: 0;
border-radius: var(--sox-radius-pill);
background: var(--sox-ink);
color: var(--sox-white);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-xs);
font-weight: var(--sox-w-bold);
transition: background var(--sox-t-fast) var(--sox-ease);
}
.sox-search__submit:hover { background: var(--sox-orange); color: var(--sox-ink); }
.sox-search-bar { max-width: 520px; margin: 0 auto var(--sox-space-9); }
/* --- Forms ------------------------------------------------------------------- */
.sox-form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sox-space-5);
}
@media (max-width: 640px) {
.sox-form__row { grid-template-columns: minmax(0, 1fr); }
}
.sox-form__field { margin-bottom: var(--sox-space-5); }
.sox-form__label {
display: block;
margin-bottom: var(--sox-space-2);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-xs);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-caps);
text-transform: uppercase;
color: var(--sox-ink);
}
.sox-form__required { color: var(--sox-orange-deep); }
.sox-form__input {
width: 100%;
padding: 14px var(--sox-space-4);
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius);
background: var(--sox-white);
font-family: var(--sox-font-body);
font-size: var(--sox-fs-md);
color: var(--sox-ink);
transition:
border-color var(--sox-t-fast) var(--sox-ease),
box-shadow var(--sox-t-fast) var(--sox-ease);
}
.sox-form__input:focus {
border-color: var(--sox-orange);
box-shadow: 0 0 0 3px rgba(240, 130, 30, .16);
outline: none;
}
.sox-form__input::placeholder { color: var(--sox-text-faint); }
.sox-form__textarea { resize: vertical; min-height: 150px; line-height: var(--sox-lh-body); }
.sox-form__note {
margin-top: var(--sox-space-4);
font-size: var(--sox-fs-4xs);
color: var(--sox-text-faint);
}
/* The honeypot. Hidden from people, still in the DOM for bots to fall into. */
.sox-form__honeypot {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- Alerts -------------------------------------------------------------------- */
.sox-alert {
display: flex;
align-items: flex-start;
gap: var(--sox-space-3);
margin-bottom: var(--sox-space-6);
padding: var(--sox-space-4) var(--sox-space-5);
border-radius: var(--sox-radius);
border-left: 3px solid;
font-size: var(--sox-fs-sm);
line-height: var(--sox-lh-normal);
}
.sox-alert p { margin: 0; }
.sox-alert ul { margin: var(--sox-space-2) 0 0; padding-left: 1.2em; list-style: disc; }
.sox-alert--success {
border-color: var(--sox-green);
background: var(--sox-green-soft);
color: #2F4F36;
}
.sox-alert--error {
border-color: var(--sox-red);
background: var(--sox-red-soft);
color: #7A2A1C;
}
/* --- Post list and post navigation ------------------------------------------- */
.sox-results {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sox-space-6);
}
@media (max-width: 900px) { .sox-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sox-results { grid-template-columns: minmax(0, 1fr); } }
.sox-post-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sox-space-4);
margin-top: var(--sox-space-11);
padding-top: var(--sox-space-7);
border-top: 1px solid var(--sox-line);
}
.sox-post-nav__link {
padding: var(--sox-space-5);
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius-lg);
transition: border-color var(--sox-t-fast) var(--sox-ease);
}
.sox-post-nav__link:hover { border-color: var(--sox-orange); }
.sox-post-nav__link--next { text-align: right; grid-column: 2; }
.sox-post-nav__label {
display: block;
margin-bottom: var(--sox-space-1);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-6xs);
font-weight: var(--sox-w-bold);
letter-spacing: var(--sox-ls-eyebrow);
text-transform: uppercase;
color: var(--sox-orange-deep);
}
.sox-post-nav__title {
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-sm);
font-weight: var(--sox-w-semibold);
color: var(--sox-ink);
}
@media (max-width: 560px) {
.sox-post-nav { grid-template-columns: minmax(0, 1fr); }
.sox-post-nav__link--next { grid-column: 1; text-align: left; }
}
/* ==========================================================================
3. FOOTER CREDIT LINK
--------------------------------------------------------------------------
Links in the bottom bar inherited the muted brown, so the credit read as
plain grey text. Brand orange makes it a visible link.
========================================================================== */
.sox-footer__copyright a {
color: var(--sox-orange);
font-weight: var(--sox-w-semibold);
text-decoration: none;
}
.sox-footer__copyright a:hover,
.sox-footer__copyright a:focus-visible {
color: var(--sox-orange-light);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ==========================================================================
==========================================================================
FIX ROUND 4
==========================================================================
========================================================================== */
/* ==========================================================================
1. SHARED STORE DETAILS
--------------------------------------------------------------------------
Moved here from home.css. These classes are used by the homepage locations
section AND the contact page, but home.css only loads on the front page — so
on the contact page the opening hours rendered as a plain bulleted list and
the addresses fell back to the browser's italic default.
Anything genuinely homepage-only (the placeholder map, the region pill) stays
in home.css.
========================================================================== */
.sox-store__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sox-space-4);
margin-top: var(--sox-space-6);
padding-inline: var(--sox-space-2);
}
.sox-store__name {
margin: 0;
font-size: var(--sox-fs-h3-sm);
font-weight: var(--sox-w-black);
letter-spacing: var(--sox-ls-snug);
color: var(--sox-brown);
text-transform: none;
}
.sox-store__phone {
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-h5);
font-weight: var(--sox-w-extrabold);
white-space: nowrap;
color: var(--sox-orange-strong);
}
.sox-store__address {
margin: var(--sox-space-3) 0 var(--sox-space-5);
padding-inline: var(--sox-space-2);
font-size: var(--sox-fs-md);
font-style: normal;
line-height: 1.5;
color: var(--sox-text-sub);
}
.sox-store__hours {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding-inline: var(--sox-space-2);
list-style: none;
}
.sox-store__hours li {
padding: 9px var(--sox-space-4);
border: 1px solid var(--sox-line-cream);
border-radius: var(--sox-radius-pill);
background: var(--sox-cream-pill);
font-size: var(--sox-fs-xs);
color: #4A3D30;
list-style: none;
}
.sox-store__located {
margin: var(--sox-space-2) 0 0;
padding-inline: var(--sox-space-2);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-4xs);
font-weight: var(--sox-w-semibold);
letter-spacing: var(--sox-ls-caps);
text-transform: uppercase;
color: var(--sox-orange-strong);
}
.sox-store__located + .sox-store__address { margin-top: var(--sox-space-2); }
/* ==========================================================================
2. CONTACT PAGE
--------------------------------------------------------------------------
This page was built in stage 5 and never styled — not one of its eleven
classes had a rule. Everything fell back to browser and element defaults, so
the two columns stacked, "VISIT A STORE" rendered at full section-heading
size, and the addresses came out italic.
========================================================================== */
.sox-contact__intro {
max-width: 70ch;
margin-bottom: var(--sox-space-9);
}
.sox-contact__layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(2rem, 1rem + 4vw, 5rem);
align-items: start;
}
@media (max-width: 900px) {
.sox-contact__layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--sox-space-11);
}
}
/* Column headings sit a step below the page title, not level with it. */
.sox-contact__heading {
margin: 0 0 var(--sox-space-3);
font-size: var(--sox-fs-h2-xs);
text-transform: uppercase;
}
.sox-contact__lead {
margin-bottom: var(--sox-space-7);
max-width: 52ch;
font-size: var(--sox-fs-md);
line-height: var(--sox-lh-body);
color: var(--sox-text-muted);
}
/* --- The store column ---------------------------------------------------- */
.sox-contact__stores { min-width: 0; }
.sox-contact__store {
padding: var(--sox-space-6);
border: 1px solid var(--sox-line);
border-radius: var(--sox-radius-lg);
background: var(--sox-cream);
}
.sox-contact__store + .sox-contact__store { margin-top: var(--sox-space-5); }
.sox-contact__store-name {
margin: 0 0 var(--sox-space-3);
font-size: var(--sox-fs-h3-sm);
font-weight: var(--sox-w-black);
letter-spacing: var(--sox-ls-snug);
text-transform: uppercase;
color: var(--sox-brown);
}
.sox-contact__address {
margin: 0 0 var(--sox-space-3);
font-size: var(--sox-fs-md);
font-style: normal; /*
is italic by default */
line-height: var(--sox-lh-normal);
color: var(--sox-text-sub);
}
.sox-contact__phone {
display: inline-flex;
align-items: center;
gap: var(--sox-space-2);
margin-bottom: var(--sox-space-4);
font-family: var(--sox-font-ui);
font-size: var(--sox-fs-lg);
font-weight: var(--sox-w-extrabold);
color: var(--sox-orange-strong);
}
.sox-contact__phone:hover { color: var(--sox-orange-hover); }
/* The hours pills need no side padding inside a card that already has some. */
.sox-contact__store .sox-store__hours {
padding-inline: 0;
margin-bottom: var(--sox-space-5);
}
.sox-contact__store .sox-store__hours li {
background: var(--sox-white);
}
/* ==========================================================================
3. PAGE CONTENT ALIGNMENT
--------------------------------------------------------------------------
The banner used the site's 1280px container while the body sat in a 760px
one that was CENTRED, so the heading and the first line of text started at
different places.
Fixed by keeping a readable measure but left-aligning it to the container
edge, so the copy lines up with the masthead, the header logo and the
footer. A full-bleed 1280px measure would line up too, but at roughly 150
characters a line — twice what is comfortable to read — on the one kind of
page people read from top to bottom.
========================================================================== */
.sox-container--text {
max-width: var(--sox-container);
}
.sox-container--text > * {
max-width: 860px; /* ~75 characters at the body size */
}
/* Images, galleries and anything explicitly wide may use the full width. */
.sox-prose .alignwide,
.sox-prose .alignfull,
.sox-prose figure.wp-block-image.alignwide,
.sox-prose figure.wp-block-image.alignfull {
max-width: none;
width: 100%;
}
/* ==========================================================================
4. SOCIAL ICONS
--------------------------------------------------------------------------
The icons draw with currentColor and .sox-social a set none, so the global
`a { color: var(--sox-text) }` rule won and painted them near-black on the
brown footer. Same failure as the cart icon in the header.
========================================================================== */
.sox-social a {
color: var(--sox-text-cream);
}
.sox-social a:hover,
.sox-social a:focus-visible {
background: var(--sox-orange);
border-color: var(--sox-orange);
color: var(--sox-ink);
}
/* ==========================================================================
5. MAILING LIST SIGNUP
--------------------------------------------------------------------------
Postal addresses for sale cards, not a newsletter. Seven fields would be a
wall if they stacked under the heading, so the heading sits to the LEFT and
the fields fill a compact two-row grid on the right. That is what keeps the
band short.
The previous version used a translucent background on the assumption it sat
on the brown footer. It renders ABOVE