/* THE MOBILE BOTTOM NAVIGATION, REVAMPED — PREVIEW ONLY.
Loads for ?sassy_nav=1 on any page, and alongside the homepage restyle at
?sassy_flat=1. Every customer keeps the current bar. Backing it out is
deleting this file, bottom-nav.js, and one enqueue block.
WHAT IT IS TODAY, MEASURED: .wd-toolbar, 55px tall, white, with a diffuse
9px glow on all four sides, and four items whose icons and labels are both
rgb(51,51,51) — a generic grey that appears nowhere else in this brand.
Woodmart marks no active state at all, so the bar never tells you where you
are.
THE GEOMETRY IS DELIBERATELY NOT TOUCHED. Woodmart pads the body to clear
this bar; changing its height would either hide the foot of every page
behind it or leave a gap under it. So the height stays exactly 55px and
everything else changes: colour, weight, the edge, and an indicator that
says which tab you are on. Icons grow and labels shrink WITHIN the existing
45px item, which is internal and safe.
Tap targets stay at 45px, above the 44px floor. */
/* ---- the bar, floating ---------------------------------------------------
Detached from the three screen edges instead of sitting on them: this is
the change that actually reads as a modern app, and the one that was
missing from the first pass, where every difference was a shade or a pixel.
It floats, so it earns a real shadow. The rest of this project avoids
elevation on principle — flat design takes its depth from colour — but a
bar with air under it has to cast something or it looks like it is stuck
to the glass.
GEOMETRY IS NOW IN PLAY, WHICH THE FIRST PASS AVOIDED. Woodmart pads the
body by exactly the bar's height (55px, measured). Lifting the bar 12px off
the bottom means it now occupies 67px, so the page padding has to grow with
it or the foot of every page hides underneath — see the body rule below. */
body .wd-toolbar {
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
width: auto;
background: #FFFFFF;
border-top: 0;
border-radius: 26px;
box-shadow: 0 6px 22px rgba(36, 28, 43, .14), 0 1px 2px rgba(36, 28, 43, .06);
overflow: hidden;
}
/* The page has to make room for the bar AND the gap under it: 55 + 12 + a
little air, plus the iPhone home indicator.
THE SELECTOR IS NOT DECORATION. Woodmart sets this from `.sticky-toolbar-on`
— a CLASS on the body, not a `body` rule — so an `html body` override
(two elements) lost to it and the padding stayed 55px. The floating bar
then sat on top of the page's own content: three elements measured as
overlapping it at the foot of a product page. Naming the class beats it
honestly. */
/* AND IT MUST BE SCOPED TO WHERE THE BAR ACTUALLY EXISTS. Woodmart hides the
toolbar above 1024px — measured by stepping the viewport width, not
guessed: flex up to 1024px, none from 1025px. Unscoped, this rule added
78px of empty space to the foot of every DESKTOP page, where there is no
bar to make room for. */
@media (max-width: 1024px) {
html body.sticky-toolbar-on {
padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
}
/* ---- items --------------------------------------------------------------
Icons lead, labels support: the icon grows a little and takes the brand
navy, the label drops to a quiet muted grey. Today both are the same size
and the same generic #333, so neither leads. */
body .wd-toolbar .wd-toolbar-item > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
position: relative;
color: #2C2A4A;
transition: color .15s ease;
}
body .wd-toolbar .wd-toolbar-item .wd-tools-icon {
font-size: 21px;
line-height: 1;
color: #2C2A4A;
transition: color .15s ease, transform .15s ease;
}
body .wd-toolbar .wd-toolbar-item .wd-toolbar-label {
font-family: Raleway, system-ui, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: .07em;
line-height: 1.1;
color: #8A7E8C;
transition: color .15s ease;
}
/* ---- press feedback -----------------------------------------------------
A phone gives no hover, so the only moment the bar can feel responsive is
the press itself. */
body .wd-toolbar .wd-toolbar-item > a:active .wd-tools-icon { transform: scale(.9); }
body .wd-toolbar .wd-toolbar-item > a:active .wd-toolbar-label { color: #B4285C; }
/* ---- where am I ---------------------------------------------------------
The class is added by bottom-nav.js from the address bar, because Woodmart
marks nothing. A short accent bar at the top edge of the tab, the way a
modern app does it — it reads instantly and costs no space.
If the script never runs, nothing here matches and the bar simply has no
indicator, exactly as it does today. It cannot break navigation. */
/* A FILLED PILL BEHIND THE ICON, not a thin bar above it. On a floating bar
there is no top edge left to hang a bar from, and a pill is what the eye
actually reads as "this one".
Sized to the space that exists rather than to taste: the item is 45px, the
label 13px and the gap 3px, which leaves 29px for the icon. 20px of glyph
plus 4px of padding top and bottom is 28px, so it fits without the label
being pushed out. */
body .wd-toolbar .wd-toolbar-item.sassy-nav-current .wd-tools-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 16px;
border-radius: 999px;
background: #FBE9F0;
color: #B4285C;
line-height: 1;
}
body .wd-toolbar .wd-toolbar-item.sassy-nav-current .wd-toolbar-label {
color: #B4285C;
}
/* ---- TWO OF THE FOUR ICONS CANNOT BE RECOLOURED FROM HERE, AND THAT IS
WORTH WRITING DOWN RATHER THAN LEAVING AS A MYSTERY.
Home and Shop are ICON FONTS, so `color` styles them and they take the
brand navy above. Menu and WhatsApp are UPLOADED IMAGES — ![]()
inside
.wd-custom-icon — and no colour property can touch an image. They stay the
near-black they were drawn in, which is why they look heavier than their
two neighbours.
A first version of this file carried a .wd-toolbar-whatsapp rule to tint
one of them. That class does not exist: both share .wd-toolbar-link, and
the rule silently matched nothing. It is deleted rather than left in place
looking like it works.
Making all four agree means re-uploading those two icons in #2C2A4A as
line drawings to match Home and Shop. That is a media change in wp-admin,
not a stylesheet change, so it is the owner's to make — and a CSS filter
approximating the colour would be fragile and still not match the stroke
weight. */
@media (prefers-reduced-motion: reduce) {
body .wd-toolbar .wd-toolbar-item > a,
body .wd-toolbar .wd-toolbar-item .wd-tools-icon,
body .wd-toolbar .wd-toolbar-item .wd-toolbar-label { transition: none; }
}
/* ---- getting out of the way on scroll ----------------------------------
Driven by bottom-nav.js, which puts .sassy-nav-down on — on the
ROOT rather than on the bar, because the scroll-to-top button has to move
with it and is nowhere near the bar in the DOM.
The bar travels its own height plus the 12px it floats above the bottom
plus the safe-area inset, which is exactly far enough to clear the screen
edge on a notched phone and not one pixel further.
Only `transform` is animated. Nothing here touches the body padding that
reserves the bar's space — that stays put whether the bar is shown or
hidden, so the page never reflows under her thumb. */
body .wd-toolbar {
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
html.sassy-nav-down body .wd-toolbar {
transform: translateY(calc(100% + 12px + env(safe-area-inset-bottom, 0px)));
}
/* Woodmart's scroll-to-top sits directly above the pill and would be left
hanging in mid-air once the bar drops away. It follows it down into the
space the bar just left, rather than being hidden — she is scrolling, which
is the one moment that button is worth having. */
body .scrollToTop {
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
html.sassy-nav-down body .scrollToTop {
transform: translateY(58px);
}
/* The hide IS the animation, so a phone asking for reduced motion gets none
of it. bottom-nav.js also declines to bind the scroll handler at all under
that setting; this is the belt to that pair of braces, in case the class is
ever set by something else. */
@media (prefers-reduced-motion: reduce) {
body .wd-toolbar,
body .scrollToTop {
transition: none;
}
html.sassy-nav-down body .wd-toolbar,
html.sassy-nav-down body .scrollToTop {
transform: none;
}
}
/* ---- THE CART TAB ------------------------------------------------------
The cart was moved into this bar from the header (and wishlist moved the
other way) in Theme Settings → General → Navbar. Woodmart renders it with
its HEADER markup, not its toolbar markup: