/* Theme Name: WheelsOnWalls 2026 Theme URI: https://wheelsonwalls.shop Author: Loïc Kernen Description: Lightweight custom block theme for the WheelsOnWalls WooCommerce store. Built from scratch, no page builder, no legacy theme framework dependencies. Version: 0.1.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 Text Domain: wow-2026 */ /* Intentionally minimal — block themes get most of their styling from theme.json. Anything here should be a genuine exception (e.g. a rule block editor UI can't express). */ /* Border-box everywhere — without this, any element that combines width:100% with padding/border (the archive frame, buttons, form inputs…) renders wider than its box and overflows its grid/flex container. */ *, *::before, *::after { box-sizing: border-box; } /* Browsers apply an 8px default margin to — with the header taken out of flow on hero pages (body.wow-has-hero), that 8px was showing up as a visible white sliver above the hero image, since nothing else was left to hide it. Reset here rather than only on hero pages, since it's a correctness fix everywhere, not a hero-specific patch. */ body { margin: 0; } /* Sitewide guard against horizontal page scroll — on the product page specifically, the frame mockup's rotateX/rotateY tilt (.frame-mockup- wrapper, under .frame-mockup-container's perspective) is a likely culprit: CSS transforms count toward an element's *scrollable* overflow even though they never affect its layout size, so a couple of tilted degrees can add a sliver of extra scrollable width that isn't visible until you swipe/pinch past the right edge — exactly the "looks full-width on load, but you can scroll right into dead space" symptom on real iOS Safari (desktop/DevTools emulation often doesn't reproduce it). Rather than chase down every transform/negative-margin that could theoretically do this sitewide, clipping it here closes off the whole category at the root. Nothing on this site intentionally relies on page-level horizontal scroll — every horizontally-scrolling element (galleries, swatches, related-products carousel, etc.) already manages its own overflow-x internally, so this doesn't affect any of them. html only, not body: setting a non-visible overflow on makes body itself establish its own scroll container (per the CSS Overflow spec's "propagate to viewport" rule, since a specified overflow on body is used as-is instead of being handed up to the viewport) — and position: sticky descendants stick relative to their nearest scrolling ancestor, so a sticky mobile header (.wow-header, see the max-width: 900px rules further down) inside that body-level scroll box never actually sees the page scroll and never sticks. html's own overflow-x, by contrast, controls the viewport's clipping directly without creating that nested scroll box, so it gets the same horizontal-scroll guard without breaking sticky. */ html { overflow-x: hidden; } /* WordPress core's own global styles inject margin-block-start:24px on every direct child of .wp-site-blocks (the wrapper block themes get around header/main/footer) via a `:where(...)` rule — that's what was actually causing the remaining white gap above the hero, not the body margin above. `:where()` carries zero specificity on purpose, so any plain rule of ours overrides it outright. Zeroed sitewide since this theme hand-manages all of its own spacing already — nothing here should be relying on WP's default block gap. */ .wp-site-blocks > * { margin-block-start: 0; } /* Same WP core mechanism, one level deeper: any wp:group block without an explicit "layout" attribute defaults to flow layout and gets a matching `:where(.is-layout-flow) > * { margin-block-start:24px }` rule applied to ITS OWN children — which is what was pushing .wow-nav down inside .wow-header. Scoped to just .wow-header/.wow-footer (the two hand-built structural wrappers using default flow layout) rather than disabled sitewide via .is-layout-flow itself — plain content pages (About Us, Privacy Policy, FAQ…) built later with ordinary paragraphs/headings in the block editor still benefit from WP's default spacing between them. */ .wow-header > *, .wow-footer > * { margin-block-start: 0; } /* Intermediate / subheader style: Josefin Sans 300, uppercase, 1px letter-spacing. Apply with class="wow-subheading" on any block (e.g. a paragraph or heading). */ .wow-subheading { font-family: var(--wp--preset--font-family--josefin); font-weight: 300; text-transform: uppercase; letter-spacing: 1px; } /* ── Homepage hero ────────────────────────────────────────────────────────── */ .wow-hero { position: relative; display: flex; align-items: center; min-height: 640px; background-size: cover; background-position: center; background-color: var(--wp--preset--color--black); } /* Left-to-right darkening so the title/CTA stay legible over the photo — same treatment as the mega menu cards, for visual consistency. */ .wow-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%); } .wow-hero__content { position: relative; z-index: 1; max-width: 1270px; width: 100%; margin: 0 auto; padding: 0 32px; } .wow-hero__eyebrow { color: #fff; margin: 0 0 16px; } .wow-hero__title { color: #fff; font-size: clamp(32px, 5vw, 56px); max-width: 640px; margin: 0 0 32px; } .wow-hero__cta { display: inline-block; background-color: var(--wp--preset--color--accent); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 16px 32px; transition: background-color 0.2s ease; } .wow-hero__cta:hover, .wow-hero__cta:focus-visible { background-color: #fff; color: var(--wp--preset--color--black); } @media (max-width: 640px) { .wow-hero { min-height: 480px; } .wow-hero__content { padding: 0 20px; } } /* ── Homepage intro: big headline left, smaller copy right ──────────────── */ .wow-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; max-width: 1270px; margin: 0 auto; padding: 80px 32px; } .wow-intro__headline { font-size: clamp(28px, 4vw, 48px); margin: 0; } .wow-intro__text { font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--text); margin: 0; } .wow-intro__text a { color: var(--wp--preset--color--accent); text-decoration: underline; } @media (max-width: 780px) { .wow-intro { grid-template-columns: 1fr; padding: 56px 20px; gap: 24px; } } /* Centered variant — homepage intro, no headline, single column of copy capped at 800px so it doesn't stretch full-width on desktop. Overrides the two-column grid above (still used elsewhere/kept for reference). */ .wow-intro--centered { display: block; max-width: 800px; margin: 0 auto; text-align: center; padding: 80px 32px 0; } .wow-intro--centered .wow-intro__text { font-size: 17px; } @media (max-width: 780px) { .wow-intro--centered { padding: 56px 20px 0; } } /* ── Homepage "Fine Art Partners" logo strip ─────────────────────────────── */ .wow-partners { max-width: 1270px; margin: 0 auto; padding: 32px 32px 0; text-align: center; } .wow-partners__label { font-family: var(--wp--preset--font-family--josefin); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--wp--preset--color--grey); margin: 0 0 20px; } /* nowrap — always a single row, even on mobile, per the "small on 1 row" requirement, rather than letting narrow viewports stack the logos. */ .wow-partners__logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 40px; opacity: 0.4; } .wow-partners__logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; } @media (max-width: 480px) { .wow-partners__logos { gap: 24px; } .wow-partners__logo { height: 20px; max-width: 90px; } } /* ── Homepage category cards ─────────────────────────────────────────────── */ .wow-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1270px; margin: 0 auto; padding: 0 32px 80px; } .wow-cat-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: 24px; text-decoration: none; background-color: var(--wp--preset--color--off-white); background-size: cover; background-position: center; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .wow-cat-card:hover, .wow-cat-card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15); } /* Darkening gradient from the bottom so title/description/CTA stay legible over the photo. */ .wow-cat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%); z-index: 1; } .wow-cat-card__pill { position: relative; z-index: 2; align-self: flex-start; background-color: var(--wp--preset--color--accent); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 999px; margin-bottom: auto; } .wow-cat-card__body { position: relative; z-index: 2; } .wow-cat-card__title { color: #fff; margin: 0 0 8px; font-size: 22px; } .wow-cat-card__desc { color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.6; margin: 0 0 14px; max-width: 34ch; } .wow-cat-card__cta { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 2px; transition: border-color 0.2s ease, color 0.2s ease; } .wow-cat-card:hover .wow-cat-card__cta, .wow-cat-card:focus-visible .wow-cat-card__cta { color: var(--wp--preset--color--accent); border-bottom-color: var(--wp--preset--color--accent); } @media (max-width: 780px) { .wow-categories { grid-template-columns: 1fr; padding: 0 20px 56px; } } /* ── Homepage best sellers slider ────────────────────────────────────────── */ .wow-bestsellers { max-width: 1270px; margin: 0 auto; padding: 0 32px 80px; } .wow-bestsellers__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .wow-bestsellers__title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); text-transform: none; } .wow-bestsellers__viewall { flex-shrink: 0; display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 999px; padding: 10px 22px; font-family: var(--wp--preset--font-family--josefin); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--wp--preset--color--text); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .wow-bestsellers__viewall:hover, .wow-bestsellers__viewall:focus-visible { background-color: #000; border-color: #000; color: #fff; } .wow-bestsellers__viewport { position: relative; } .wow-bestsellers__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .wow-bestsellers__track::-webkit-scrollbar { display: none; } .wow-bestsellers__arrow { position: absolute; top: 35%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e2e2e2; background-color: #fff; color: var(--wp--preset--color--text); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .wow-bestsellers__arrow:hover, .wow-bestsellers__arrow:focus-visible { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); } .wow-bestsellers__arrow--prev { left: -18px; } .wow-bestsellers__arrow--next { right: -18px; } @media (max-width: 900px) { .wow-bestsellers__arrow { display: none; } } .wow-bestsellers__progress { margin-top: 20px; height: 2px; background-color: #eee; border-radius: 999px; overflow: hidden; } .wow-bestsellers__progress-bar { display: block; height: 100%; width: 20%; background-color: var(--wp--preset--color--accent); border-radius: 999px; transition: width 0.15s ease; } .wow-product-card { flex: 0 0 220px; scroll-snap-align: start; } .wow-product-card__media { position: relative; display: block; aspect-ratio: 4 / 5; background-color: var(--wp--preset--color--off-white); border-radius: 4px; overflow: hidden; } .wow-product-card__pill { position: absolute; top: 10px; right: 10px; z-index: 2; background-color: var(--wp--preset--color--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .wow-product-card__quick-actions { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .wow-product-card__media:hover .wow-product-card__quick-actions, .wow-product-card__media:focus-within .wow-product-card__quick-actions { opacity: 1; transform: translateX(0); } .wow-product-card__quick-actions button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 50%; background-color: #fff; color: var(--wp--preset--color--text); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: background-color 0.2s ease, color 0.2s ease; } .wow-product-card__quick-actions button:hover, .wow-product-card__quick-actions button:focus-visible { background-color: var(--wp--preset--color--accent); color: #fff; } .wow-product-card__body { padding-top: 14px; } .wow-product-card__cat { display: block; font-size: 11px; color: #999; margin-bottom: 4px; } .wow-product-card__title { margin: 0 0 8px; font-size: 15px; text-transform: none; font-weight: 700; } .wow-product-card__title a { color: var(--wp--preset--color--text); text-decoration: none; } .wow-product-card__title a:hover, .wow-product-card__title a:focus-visible { color: var(--wp--preset--color--accent); } .wow-product-card__price-old { color: #aaa; font-size: 13px; text-decoration: line-through; margin-right: 6px; } .wow-product-card__price-now { color: var(--wp--preset--color--accent); font-size: 15px; font-weight: 700; } /* ── Utility top bar (above the main header) ─────────────────────────────── */ .wow-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background-color: #000; padding-top: 10px; padding-bottom: 10px; padding-left: max(32px, calc((100% - 1270px) / 2)); padding-right: max(32px, calc((100% - 1270px) / 2)); } .wow-topbar__text { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--wp--preset--font-family--josefin); font-size: 10px; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.75); } .wow-topbar__text-icon { flex-shrink: 0; color: rgba(255, 255, 255, 0.75); } .wow-topbar__switchers { display: flex; align-items: center; gap: 16px; } /* Mobile: the whole utility bar (Worldwide Shipping text + language/currency switchers) is dropped entirely — the new mobile header carries its own tagline under the logo instead (see .wow-header__tagline), and the switchers move into the burger menu (.wow-nav__mobile-switchers). !important because the block's own "is-layout-flex" class (from this Group's layout:flex setting) gets core's "body .is-layout-flex { display: flex }" injected with higher specificity (0,1,1) than plain ".wow-topbar" (0,1,0) — without it, that core rule wins the tie and the bar stays visible regardless of this rule or source order. */ @media (max-width: 900px) { .wow-topbar { display: none !important; } } /* On narrow screens the tagline + language/currency switchers used to wrap onto a second line inside the bar (the flex row itself never wraps, but .wow-topbar__text's own text did, growing the row taller). Keeping it one line: the switchers group never shrinks (it's short and already tight), the tagline takes whatever space is left and shrinks its own font instead of wrapping, truncating with an ellipsis only in the very unlikely case it still doesn't fit. */ @media (max-width: 600px) { .wow-topbar { gap: 10px; } .wow-topbar__text { flex: 1 1 auto; min-width: 0; font-size: 9px; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Below 900px the switchers are hidden entirely (see .wow-topbar__switchers), so .wow-topbar's justify-content:center should center this text — but flex:1 1 auto above makes it grow to fill the whole row as the only visible child, leaving nothing for justify-content to center *within*; the text then sits at its own default left alignment inside that full-width box. text-align does the actual centering. */ text-align: center; } .wow-topbar__switchers { flex-shrink: 0; gap: 10px; } .wow-topbar__switchers ul { gap: 6px; } .wow-topbar__switchers a { font-size: 9px; } /* Same "select" as the desktop switcher, just tighter: smaller text, less reserved space between the label and the dropdown arrow, and a smaller arrow icon to match (the arrow's own size comes from the SVG's intrinsic 10x6 in the data URI — background-size scales it down since there's no other way to resize an embedded SVG background image). */ .wow-topbar__switchers select { font-size: 9px; padding-right: 11px; background-size: 8px 5px; } } /* ── Header wrap: black bar spans full width, content caps at 1270px via calculated padding instead of an inner wrapper element (no wrapper = no risk of the Site Editor mangling nested Group blocks on save). ────────── */ .wow-header { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background-color: #000; padding-top: 16px; padding-bottom: 16px; padding-left: max(32px, calc((100% - 1270px) / 2)); padding-right: max(32px, calc((100% - 1270px) / 2)); } .wow-header__logo { display: flex; flex-direction: column; align-items: flex-start; justify-self: start; gap: 2px; } .wow-header__logo-img { display: block; width: 100%; max-width: 110px; height: auto; } /* Tagline under the logo — shown on every width now (mobile's own copy in the max-width: 900px override below just resizes it for the smaller header). Topbar still separately carries "Worldwide Shipping" above. */ .wow-header__tagline { display: block; font-family: var(--wp--preset--font-family--josefin); font-size: 10px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.75); margin: 0; white-space: nowrap; line-height: 10px; } /* Now wraps an (clickable to home, like the logo above it) — inherit the same look rather than the browser's default link blue/underline. */ .wow-header__tagline a { color: inherit; text-decoration: none; } .wow-header .wow-nav { justify-self: center; } .wow-header__actions { justify-self: end; } /* White text/icons throughout the black header — overrides the sitewide #444 text color and dark link colors for everything inside this bar. */ .wow-header, .wow-header a, .wow-header .wow-nav__link, .wow-header__actions, .wow-header__actions * { color: #fff; } .wow-header .wow-nav__toggle span { background: #fff; } /* Panels (mega menu + dropdown) sit on their own light background, so reset text back to dark inside them — otherwise white-on-white is invisible. */ .wow-header .wow-nav__panel, .wow-header .wow-nav__panel a { color: var(--wp--preset--color--text); } .wow-header .wow-nav__dropdown-list a:hover, .wow-header .wow-nav__dropdown-list a:focus-visible { color: var(--wp--preset--color--accent); } .wow-header .wow-nav__dropdown-heading { color: var(--wp--preset--color--grey); } /* Language switcher (Polylang block) + currency switcher (CURCY shortcode) + mini-cart, all sitting in the black bar. Their default markup (a plain