.
The white ring + visible artwork render on the real
![]()
itself,
sitting ABOVE the bar (z-index 2, inside .tomo-logo-wrap's stacking
context, which is itself part of the normal page flow now — no
longer forced to z-index 10000 on the wrapper, since only specific
children need to be elevated, not the whole wrapper).
The grey ring renders on a SEPARATE element — a ::before pseudo on
.tomo-logo-wrap — duplicating the same logo image via
background-image, with ONLY the grey-ring drop-shadow filter
applied, sized to exactly match the real
![]()
via absolute
positioning + inset:0. This pseudo sits at z-index 0, BELOW
.tomo-nav::before (z-index 1, the bar's own white background), so
the grey ring tucks behind the topbar — creating the illusion that
the bar's own border continues into/behind the logo's outline,
exactly as requested.
This split was necessary because drop-shadow() filters paint as
part of the SAME element they're applied to — a single
![]()
cannot
have part of its filter stack behind one layer and part above
another. Splitting the grey ring onto its own pseudo-element is the
only way to give it independent stacking from the white ring/art.
───────────────────────────────────────────────────────────────────── */
.tomo-logo-wrap {
display: flex;
align-items: flex-end;
position: relative;
/* Standard position, +15px lower per request (20px -> 35px) */
margin-top: 35px;
/* Extra squash protection alongside .tomo-nav-left's flex-shrink:0 */
flex-shrink: 0;
}
/* Grey ring — duplicate of the logo image, grey-ring filter only,
sitting BEHIND the bar's background (.tomo-nav::before is z-index 1).
Sized via inset:0 to exactly match the real
![]()
's rendered box,
so it tracks any responsive/mobile resizing automatically without
needing to know the image's native pixel dimensions. */
.tomo-logo-wrap::before {
content: "";
position: absolute;
inset: 0;
/* Hints the browser to keep this element on its own compositing
layer ahead of time, since its filter (the colour of the ring)
changes on every dark-mode toggle — without this, a filter swap
on a background-image this size can occasionally lag a frame or
two behind the toggle itself, which is the "wrong colour sticks
briefly" symptom.
translateZ(0) forces a HARD layer promotion (will-change alone is
only a hint the browser can ignore under memory pressure — mobile
GPUs are exactly where that's most likely, which lines up with
this glitch showing on mobile). contain:paint stops this layer's
paint from being able to bleed into/read from neighbouring layers
mid-render, and isolation:isolate gives the 8-shadow filter stack
its own stacking context so it's resolved as one atomic unit
rather than potentially compositing gradually alongside sibling
layers. None of this changes anything visually when it's already
working — it only changes how reliably the browser finishes the
filter render before showing it. */
will-change: filter;
transform: translateZ(0);
contain: paint;
isolation: isolate;
z-index: 0;
pointer-events: none;
background-image: url('https://shop.tomodatchi.net/wp-content/uploads/2025/03/tomodatchilogoo2-scaled.png');
background-repeat: no-repeat;
background-position: left bottom;
background-size: contain;
filter:
/* grey ring — thickened to 1/3 more than before (4.57px literal,
up from 3.43px; displays at ~10.7px vs the previous ~8px, same
2.33x device-pixel ratio used elsewhere in this file). Diagonal
component = 4.57 * cos(45deg) = 3.23px. Still 0px blur. */
drop-shadow(4.57px 0.00px 0px #c8d8ec)
drop-shadow(3.23px 3.23px 0px #c8d8ec)
drop-shadow(0.00px 4.57px 0px #c8d8ec)
drop-shadow(-3.23px 3.23px 0px #c8d8ec)
drop-shadow(-4.57px 0.00px 0px #c8d8ec)
drop-shadow(-3.23px -3.23px 0px #c8d8ec)
drop-shadow(0.00px -4.57px 0px #c8d8ec)
drop-shadow(3.23px -3.23px 0px #c8d8ec);
}
/* Briefly drops this layer off the GPU compositor — see
initLogoOutlineRepaint() in main.js for why/when this class gets
toggled. No visual difference from the rule above other than the
transform value, since translateZ(0) vs none is not a visible
change on its own. */
.tomo-logo-wrap.tomo-logo-repaint::before {
transform: none;
}
/* WP's generated anchor — clean block, no inline gap */
.tomo-logo-wrap .custom-logo-link {
display: block;
line-height: 0;
text-decoration: none;
position: relative;
/* Above .tomo-nav (z-index 9999) and the bar's background — this is
the layer that now needs the high z-index, not the whole wrapper,
since the grey-ring pseudo above deliberately stays low. */
z-index: 10000;
}
/* The img itself — white ring only now (grey ring moved to the
::before pseudo above). An 8-point true-circle ring (equal radius
at every angle) with a touch of antialiasing blur bridges the gaps
between points so the edge reads as one solid stroke. */
.tomo-logo-wrap .custom-logo-link .custom-logo,
.tomo-logo-wrap .custom-logo-link img,
.tomo-logo-wrap img {
display: block;
height: 80px;
width: auto;
/* Override the global `img { max-width:100% }` reset and guarantee
the logo never compresses horizontally at any viewport width. */
max-width: none;
flex-shrink: 0;
position: relative;
z-index: 2;
/* Same compositing hint as .tomo-logo-wrap::before above — this
element's filter (ring colour) also changes on dark-mode toggle.
Same hard-layer-promotion + paint-containment reasoning as the
::before pseudo too: see the comment there for why translateZ(0)/
contain/isolation are added alongside will-change. */
will-change: filter;
transform: translateZ(0);
contain: paint;
isolation: isolate;
filter:
/* white ring — radius 3px, blur cut from 0.4px to 0.1px (antialias-
level only, just enough to bridge the 8 discrete shadow points
into one stroke without a visible soft/fuzzy halo) */
drop-shadow(3.00px 0.00px 0.1px #ffffff)
drop-shadow(2.12px 2.12px 0.1px #ffffff)
drop-shadow(0.00px 3.00px 0.1px #ffffff)
drop-shadow(-2.12px 2.12px 0.1px #ffffff)
drop-shadow(-3.00px 0.00px 0.1px #ffffff)
drop-shadow(-2.12px -2.12px 0.1px #ffffff)
drop-shadow(0.00px -3.00px 0.1px #ffffff)
drop-shadow(2.12px -2.12px 0.1px #ffffff);
}
/* Same repaint-forcing class as .tomo-logo-wrap::before above,
applied directly (this is a real element, not a pseudo, so JS can
target it by class without needing the parent-selector trick). */
.tomo-logo-wrap img.tomo-logo-repaint,
.tomo-logo-wrap .custom-logo-link .custom-logo.tomo-logo-repaint {
transform: none;
}
.tomo-logo-text-link { text-decoration: none; }
.tomo-logo-text {
font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem;
color: var(--ink);
}
.tomo-nav-links { display: flex; gap: 2px; }
.tomo-nav-links a {
font-family: 'Fredoka', sans-serif; font-size: 0.95rem; font-weight: 500;
text-decoration: none; color: var(--muted);
padding: 5px 14px; border-radius: 100px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
display: inline-block;
/* Idle state: white rounded pill, same shape/radius as the active
blue pill below, with a faint border so it reads against the
bar's own near-white background instead of disappearing into it. */
background: #ffffff;
border: 2px solid var(--border-soft);
}
.tomo-nav-links a:hover { background: var(--border-soft); color: var(--ink); }
.tomo-nav-links li.current-menu-item > a,
.tomo-nav-links a.active { background: var(--ink); color: #fff; }
/* Search — deep blue rounded button */
.tomo-nav-search { position: relative; display: flex; align-items: center; }
.tomo-nav-search input[type="search"] {
font-family: 'Nunito', sans-serif; font-size: 0.85rem;
width: 0; opacity: 0; padding: 0; border: none;
background: var(--border-soft); border-radius: 100px;
transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
height: 34px;
}
.tomo-nav-search.open input[type="search"] {
width: 160px; opacity: 1; padding: 0 14px;
}
.tomo-nav-search button {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--ink); background: var(--ink); cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #fff; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tomo-nav-search button:hover { background: #1c24d9; border-color: #1c24d9; }
/* Dark mode toggle — same 34px circular treatment as the search
button right next to it, so the two read as a matched pair. */
.tomo-theme-toggle {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--ink); background: var(--ink); cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #fff; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tomo-theme-toggle:hover { background: #1c24d9; border-color: #1c24d9; }
.tomo-theme-icon { display: block; }
.tomo-theme-icon-moon { display: none; }
[data-theme="dark"] .tomo-theme-icon-sun { display: none; }
[data-theme="dark"] .tomo-theme-icon-moon { display: block; }
/* Cart pill */
.tomo-cart-link {
display: flex; align-items: center; gap: 7px;
font-family: 'Fredoka', sans-serif; font-size: 0.85rem; font-weight: 600;
background: var(--border-soft); border: 2px solid var(--border);
border-radius: 100px; padding: 5px 14px 5px 10px;
text-decoration: none; color: var(--ink);
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.tomo-cart-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.04); }
.tomo-cart-icon { width: 18px; height: 18px; flex-shrink: 0; }
.tomo-cart-count {
background: var(--ink); color: #fff;
font-size: 0.68rem; font-weight: 700;
min-width: 16px; height: 16px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 2px;
}
.tomo-cart-link:hover .tomo-cart-count { background: #fff; color: var(--ink); }
/* Lang toggle */
.lang-toggle {
display: flex; align-items: center;
background: var(--border-soft); border: 2px solid var(--border);
border-radius: 100px; padding: 3px; gap: 0;
}
.lang-btn {
font-family: 'Fredoka', sans-serif; font-size: 0.72rem; font-weight: 600;
padding: 3px 10px; border-radius: 100px; border: none;
background: transparent; cursor: pointer; color: var(--muted);
transition: background 0.14s, color 0.14s; line-height: 1;
}
.lang-btn.active { background: var(--ink); color: #fff; }
/* Mobile nav toggle */
.tomo-nav-burger {
display: none; width: 38px; height: 38px; border-radius: 50%;
border: 2px solid var(--border); background: #fff; cursor: pointer;
align-items: center; justify-content: center; color: var(--ink);
}
/* ─── PAGE WRAPPER ─── */
.tomo-shop-wrap {
width: 100%;
padding: 40px 36px 80px;
max-width: 1400px;
margin: 0 auto;
/* Same class of fix as .tomo-browser-urlbar above — without this,
a descendant's content (like the carousel's urlbar text) can
force this wrapper, and therefore the whole page, wider than the
viewport. box-sizing:border-box (set globally via the *,*::before
rule near the top of this file) means padding is included in
width:100%, so this stays exact at any viewport size. */
overflow-x: hidden;
}
.tomo-shop-inner { width: 100%; }
.tomo-shop-layout {
display: grid;
/* minmax(0, ...) is the CSS Grid equivalent of flexbox's min-width:0
fix used on .tomo-browser-urlbar — grid tracks have the exact same
"won't shrink below content's natural width" default. Without the
0 floor here, the 300px sidebar column (which contains the
carousel) could still drag the 1fr main column wider than
available space whenever its content's natural width exceeded
300px, which is exactly what was happening with the urlbar text. */
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
gap: 40px;
align-items: start;
}
@media (max-width: 1000px) {
.tomo-shop-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Page heading band */
.tomo-page-head {
text-align: center;
padding: 12px 24px 36px;
}
.tomo-page-eyebrow {
font-family: 'Fredoka', sans-serif; font-size: 0.78rem; font-weight: 500;
color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
margin: 0 0 6px;
}
.tomo-page-title {
font-family: 'Fredoka', sans-serif; font-size: 2.2rem; font-weight: 700;
color: var(--ink); margin: 0;
}
/* ─── FOOTER ─── */
.tomo-footer {
border-top: 2px solid var(--border-soft);
padding: 28px 36px 36px;
text-align: center;
font-family: 'Fredoka', sans-serif; font-size: 0.8rem; color: var(--muted);
}
.tomo-footer a { text-decoration: none; color: var(--muted); }
.tomo-footer a:hover { color: var(--ink); }
.tomo-footer-links { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
/* ─── BUTTONS (shared pill style) ─── */
.tomo-btn {
font-family: 'Fredoka', sans-serif; font-size: 0.92rem; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--ink); color: #fff !important;
border: 2.5px solid var(--ink); border-radius: 100px;
padding: 11px 26px; cursor: pointer;
text-decoration: none !important;
transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.18s;
box-shadow: 0 4px 14px rgba(46,55,251,0.18);
}
.tomo-btn:hover { background: #1c24d9; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(46,55,251,0.26); }
.tomo-btn:active { transform: translateY(0); }
.tomo-btn-outline {
background: #fff; color: var(--ink) !important; border-color: var(--border);
box-shadow: 0 4px 14px rgba(160,184,210,0.25);
}
.tomo-btn-outline:hover { background: var(--border-soft); border-color: var(--ink); }
.tomo-btn-block { width: 100%; }
.tomo-btn[disabled], .tomo-btn.disabled {
opacity: 0.5; cursor: not-allowed; transform: none !important;
}
/* Generic blue-bordered "sticker card" panel */
.tomo-panel {
background: #fff;
border: var(--card-border-outer) solid var(--logo-blue);
border-radius: var(--radius);
box-shadow: 4px 5px 8px rgba(160,184,210,0.45);
overflow: hidden;
}
/* Animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.anim { animation: fadeUp 0.42s cubic-bezier(0.22,1,0.36,1) both; }
.anim-d1 { animation-delay: 0.06s; }
.anim-d2 { animation-delay: 0.12s; }
.anim-d3 { animation-delay: 0.18s; }
@keyframes bgDriftStripes {
from { background-position: 0 0; }
to { background-position: -28px 28px; }
}
@keyframes popOutline {
0% { filter: none; }
40% {
filter:
drop-shadow( 0px 3px 0px white) drop-shadow( 0px -3px 0px white)
drop-shadow( 3px 0px 0px white) drop-shadow(-3px 0px 0px white)
drop-shadow( 2px 2px 0px white) drop-shadow(-2px 2px 0px white)
drop-shadow( 2px -2px 0px white) drop-shadow(-2px -2px 0px white)
drop-shadow(-4px 4px 0px #2e37fb);
}
100% {
filter:
drop-shadow( 0px 3px 0px white) drop-shadow( 0px -3px 0px white)
drop-shadow( 3px 0px 0px white) drop-shadow(-3px 0px 0px white)
drop-shadow( 2px 2px 0px white) drop-shadow(-2px 2px 0px white)
drop-shadow( 2px -2px 0px white) drop-shadow(-2px -2px 0px white)
drop-shadow(-4px 4px 0px #2e37fb);
}
}
/* ─── VARIANT PICKER DIALOGUE (visual novel style) ─── */
.tomo-vn-overlay {
position: fixed; inset: 0;
background: rgba(20,24,40,0.35);
z-index: 19000;
opacity: 0; pointer-events: none;
transition: opacity 0.2s ease;
}
.tomo-vn-overlay.open { opacity: 1; pointer-events: all; }
.tomo-vn-panel {
position: fixed;
bottom: 40px;
left: 50%; transform: translateX(-50%) translateY(20px);
width: min(480px, 92vw);
background: #fff;
border: 6px solid var(--logo-blue);
border-radius: 22px;
box-shadow: 0 16px 48px rgba(46,55,251,0.22), 4px 5px 8px rgba(160,184,210,0.5);
padding: 20px 22px 22px;
z-index: 19001;
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
}
.tomo-vn-overlay.open .tomo-vn-panel {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: all;
}
.tomo-vn-title {
font-family: 'Fredoka', sans-serif; font-size: 0.72rem; font-weight: 600;
color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
margin: 0 0 6px;
}
.tomo-vn-product-name {
font-family: 'Fredoka', sans-serif; font-size: 1.05rem; font-weight: 700;
color: var(--logo-blue); margin: 0 0 16px;
}
.tomo-vn-attr-label {
font-family: 'Fredoka', sans-serif; font-size: 0.72rem; font-weight: 600;
color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em;
margin: 0 0 8px;
}
.tomo-vn-choices {
display: flex; flex-direction: column; gap: 8px;
}
.tomo-vn-choice {
font-family: 'Fredoka', sans-serif; font-size: 0.95rem; font-weight: 600;
background: var(--border-soft); border: 2.5px solid var(--border);
border-radius: 100px; padding: 10px 20px;
cursor: pointer; color: var(--ink); text-align: left;
transition: background 0.14s, border-color 0.14s, transform 0.14s;
display: flex; align-items: center; gap: 10px;
}
.tomo-vn-choice::before {
content: '▷';
font-size: 0.75rem; color: var(--muted);
flex-shrink: 0;
transition: color 0.14s;
}
.tomo-vn-choice:hover {
background: var(--ink); color: #fff; border-color: var(--ink);
transform: translateX(4px);
}
.tomo-vn-choice:hover::before { color: rgba(255,255,255,0.7); }
.tomo-vn-choice.out-of-stock {
opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.tomo-vn-close {
position: absolute; top: 14px; right: 16px;
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid var(--border); background: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 14px;
transition: background 0.14s, color 0.14s;
}
.tomo-vn-close:hover { background: var(--border-soft); color: var(--ink); }
@media (max-width: 600px) {
.tomo-shop-wrap { padding: 24px 16px 60px; }
.tomo-page-title { font-size: 1.6rem; }
.tomo-vn-panel { bottom: 16px; }
}
/* ─── DARK MODE: hardcoded-colour overrides ───
A handful of selectors above use a literal #fff / rgba(255,255,255,…)
instead of var(--bg) (mostly small chrome elements: pills, the nav's
blur layer, buttons, toasts) — these don't repaint automatically from
the [data-theme="dark"] variable block earlier in this file, so they
get explicit overrides here instead. Kept in one place, rather than
inline at each original rule, so the full set of dark-mode-specific
colour decisions is easy to scan/maintain together. */
[data-theme="dark"] .tomo-nav::before {
background: rgba(35,35,46,0.93);
}
[data-theme="dark"] .tomo-nav-links a {
background: #2a2a38;
}
[data-theme="dark"] .tomo-cart-link:hover .tomo-cart-count {
background: #2a2a38;
}
[data-theme="dark"] .tomo-nav-burger {
background: #2a2a38;
}
/* Logo outline colours, dark mode only — same geometry/radius/blur as
the light-mode rings above, only the colours change, sourced from
the topbar itself so the rings still read as "the bar's own
surfaces continuing into the logo":
- the ring that sits ON the logo art (was white, #ffffff) now
matches the topbar's own FILL colour (.tomo-nav::before
background, dark mode = #23232e)
- the ring that sits BEHIND the bar (was #c8d8ec, the light-mode
value of var(--border)) now matches the topbar's DIVIDER LINE
colour (.tomo-nav::before border-bottom, dark mode var(--border)
= #3c3c4d) */
[data-theme="dark"] .tomo-logo-wrap::before {
filter:
drop-shadow(4.57px 0.00px 0px #3c3c4d)
drop-shadow(3.23px 3.23px 0px #3c3c4d)
drop-shadow(0.00px 4.57px 0px #3c3c4d)
drop-shadow(-3.23px 3.23px 0px #3c3c4d)
drop-shadow(-4.57px 0.00px 0px #3c3c4d)
drop-shadow(-3.23px -3.23px 0px #3c3c4d)
drop-shadow(0.00px -4.57px 0px #3c3c4d)
drop-shadow(3.23px -3.23px 0px #3c3c4d);
}
[data-theme="dark"] .tomo-logo-wrap .custom-logo-link .custom-logo,
[data-theme="dark"] .tomo-logo-wrap .custom-logo-link img,
[data-theme="dark"] .tomo-logo-wrap img {
filter:
drop-shadow(3.00px 0.00px 0.1px #23232e)
drop-shadow(2.12px 2.12px 0.1px #23232e)
drop-shadow(0.00px 3.00px 0.1px #23232e)
drop-shadow(-2.12px 2.12px 0.1px #23232e)
drop-shadow(-3.00px 0.00px 0.1px #23232e)
drop-shadow(-2.12px -2.12px 0.1px #23232e)
drop-shadow(0.00px -3.00px 0.1px #23232e)
drop-shadow(2.12px -2.12px 0.1px #23232e);
}
[data-theme="dark"] .tomo-btn-outline {
background: #2a2a38;
}
[data-theme="dark"] .tomo-panel {
background: #2a2a38;
}
[data-theme="dark"] .tomo-vn-panel {
background: #2a2a38;
}
[data-theme="dark"] .tomo-vn-close {
background: #2a2a38;
}