/* =====
DINKOMART — base + the shell, on every page: reset, type, reveals,
buttons, the stage, the bar with its shop menu and search, the tab bar,
the drawers, the footer. Shop and content pieces are in store.css.
===== */
/* ----- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The browser's own scrolling (no script since 2026-10-14, DESIGN → Scroll):
a link to a part of the page glides there, clear of the bar. The gutter
stays, so a drawer's lock does not shift the page. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--top-h, 72px) + 16px); }
/* THE SCROLLBAR (owner, 2026-10-17: "scroll bar looks shit … make it the
best and cool"; D48): no arrows, no grey slab — a slim pill in the
logo's emerald, lit from its top, on the page's own ground; brighter
under the pointer, gold while it is held. Chrome, Edge and Safari draw
it from these; Firefox takes the two colours. A scroller that hides
its bar (scrollbar-width: none) keeps it hidden. */
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
html::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
min-height: 56px; border: 3px solid transparent; border-radius: 99px;
background: linear-gradient(180deg, var(--forest-400), var(--forest-600)) padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--forest-300), var(--forest-500)) padding-box; }
::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, #FDD902, #FDB802) padding-box; }
[data-theme='dark'] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--forest-300), var(--forest-400)) padding-box; }
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4FD083, var(--forest-300)) padding-box; }
[data-theme='dark'] ::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, #FDD902, #FDB802) padding-box; }
}
@supports not selector(::-webkit-scrollbar) {
html { scrollbar-width: thin; scrollbar-color: var(--forest-400) var(--bg); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked { overflow: hidden; }
body {
min-height: 100svh;
background: var(--bg);
color: var(--fg);
font: 400 var(--step-0)/1.65 var(--font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* A lazy picture fades up once loaded (`is-loaded`: header.php's inline
script, there before the first must not take
a flex gap (logos once sat 12px in from the edge). */
picture { display: contents; }
picture > source { display: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
dialog { color: inherit; }
:where(a) { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(a):hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
/* A class that sets `display` outranks the browser's [hidden] rule, and
`hidden` does nothing on an inline at all. One rule, for the site. */
[hidden] { display: none !important; }
/* Reduced motion is fewer and gentler, not none: colour and opacity still
ease; nothing travels or scales. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-delay: 0s !important;
transition-property: color, background-color, border-color, opacity, box-shadow, outline-color !important;
scroll-behavior: auto !important;
}
}
/* PAGE TO PAGE, a cut: the old page settles back, the new one rises over
it like a sheet; the shell stays. Typed `nav`: the theme toggle keeps
its plain crossfade. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; types: nav; }
}
.site-top { view-transition-name: site-top; }
.tabbar { view-transition-name: tabbar; }
.wa { view-transition-name: wa; }
html:active-view-transition-type(nav)::view-transition-old(root) { animation: .34s var(--ease-out) both vt-out; }
html:active-view-transition-type(nav)::view-transition-new(root) { animation: .46s var(--ease-drawer) both vt-in; }
/* ONLY FOR A PHOTOGRAPH (main.js skips every other page change in
`pageswap`): while a transition runs, the browser sends every click to
the page's root, so for ~0.8s after each arrival the bar took no
clicks — measured, and the owner's "sometimes on click nothing
happens" (2026-10-14). `pointer-events: none` on the overlay does not
change that. A card opening its product keeps the flight. */
@keyframes vt-out { to { opacity: .35; scale: .965; } }
@keyframes vt-in { from { translate: 0 9svh; clip-path: inset(9svh 0 0 0 round var(--r-page) var(--r-page) 0 0); } }
/* ----- typography */
/* Bricolage Grotesque, heavy and tight (D43; the owner's own dinkomart.com
sets its headlines at 800): the optical size follows the font size. */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.04;
letter-spacing: -.03em;
text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }
.lede { font-size: var(--step-1); color: var(--fg-muted); max-width: 60ch; }
/* The signature: every number, label and spec in mono. */
.mono, .eyebrow, .badge, .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
font-size: var(--fs-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em; color: var(--fg-subtle);
}
/* WORDS IN MASKS (mask_words()): each word rises out of its own line.
Clipped above and below only: a tightly tracked glyph overhangs its box,
and `overflow: hidden` cut every word's last letter. */
.w { display: inline-block; vertical-align: top; clip-path: inset(-.12em -.4em 0 -.4em); padding-bottom: .14em; margin-bottom: -.14em; }
.w__i { display: inline-block; }
/* ----- MOTION (D40): reveals, an AOS-style vocabulary on the site's own
engine (main.js) — no library, and nothing but transform and opacity,
so every one runs on the compositor and none costs a frame. Hidden only
once main.js runs (`reveal-on`); a CSS bail shows all at 1.1s if it
never does. `data-reveal` is a rise; `fade`; `zoom`; `words`, each word
up out of its mask on a lean; `clip`, a picture unveiled; `from-l` /
`from-r`, a panel sliding in to meet another; `flip`, a card standing
up out of the page; `card`, dealt onto the table; `stagger`, a list
whose children arrive one after another. On a slow line the net rises
everything in at 1.1s whether or not the script has come (D42; it was
a pop at 1.8s), and before the script a picture's frame is its own
skeleton (below). */
html.js:not(.reveal-on) [data-reveal] { animation: rise .6s var(--ease-out) 1.1s both; }
/* A page's first part (its head, a product's photograph and buy box) is
on the screen from the first paint: on a slow line it fades up at .6s
whether or not the script has come. */
html.js:not(.reveal-on) main > :first-child [data-reveal] { animation: bail .5s var(--ease) .6s both; }
html.reveal-on [data-reveal]:not(.is-in) { opacity: 0; }
[data-reveal].is-in { animation: rise .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes bail { from { opacity: 0; } to { opacity: 1; } }
[data-reveal='fade'].is-in { animation-name: fadeIn; animation-duration: .6s; }
@keyframes fadeIn { from { opacity: 0; } }
[data-reveal='zoom'].is-in { animation-name: zoomIn; animation-duration: .6s; }
@keyframes zoomIn { from { opacity: 0; scale: .95; } }
[data-reveal='card'].is-in { animation: dealIn .65s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes dealIn { from { opacity: 0; transform: perspective(1100px) translateY(26px) rotateX(9deg); } }
html.reveal-on [data-reveal='stagger']:not(.is-in) { opacity: 1; }
html.reveal-on [data-reveal='stagger']:not(.is-in) > * { opacity: 0; }
[data-reveal='stagger'].is-in { animation: none; }
[data-reveal='stagger'].is-in > * { animation: rise .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + var(--si, 0) * 40ms); }
html.reveal-on [data-reveal='words']:not(.is-in) { opacity: 1; }
html.reveal-on [data-reveal='words']:not(.is-in) .w__i { translate: 0 108%; rotate: 4deg; }
[data-reveal='words'].is-in { animation: none; }
[data-reveal='words'] .w__i {
transform-origin: 0 100%;
transition: translate .7s var(--ease-out) calc(var(--i, 0) * 45ms + var(--wi, 0) * 35ms),
rotate .7s var(--ease-out) calc(var(--i, 0) * 45ms + var(--wi, 0) * 35ms);
}
/* THE UNVEIL (`clip`): a picture opened from its middle while it settles
out of a push-in, a lens finding focus. The lens moves `transform`,
which multiplies with the picture's own `scale` (a cut-out's crop, a
hover) instead of replacing it. */
html.reveal-on [data-reveal='clip']:not(.is-in) { scale: .94; }
html.reveal-on [data-reveal='clip']:not(.is-in) [data-lens] { transform: scale(1.22); }
[data-reveal='clip'].is-in { animation: unveil .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
[data-reveal='clip'].is-in [data-lens] { animation: lens 1.1s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
/* Scale and fade, not a `clip-path` (D46): a clip is redrawn by the page's
own thread every frame, and these arrive while the page scrolls. */
@keyframes unveil { from { opacity: 0; scale: .94; } }
@keyframes lens { from { transform: scale(1.22); } }
[data-reveal='from-l'].is-in { animation: fromL .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
[data-reveal='from-r'].is-in { animation: fromR .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes fromL { from { opacity: 0; translate: -40px 0; } }
@keyframes fromR { from { opacity: 0; translate: 40px 0; } }
[data-reveal='flip'].is-in { animation: flipUp .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes flipUp { from { opacity: 0; transform: perspective(1000px) rotateX(26deg) translateY(40px); } }
/* Swapped in already in place (shop.js): no entrance of any kind. */
[data-reveal].is-set, [data-reveal='stagger'].is-set > * { animation: none; }
[data-reveal].is-set .w__i { transition: none; }
[data-reveal].is-set [data-lens] { animation: none; }
@media (prefers-reduced-motion: reduce) {
html.reveal-on [data-reveal]:not(.is-in) .w__i { translate: none; rotate: none; }
html.reveal-on [data-reveal='clip']:not(.is-in) { scale: none; }
html.reveal-on [data-reveal]:not(.is-in) [data-lens] { transform: none; }
}
/* LIVE ONLY IN VIEW ([data-live], main.js): a part's own loops pause
while it is off the screen. Only with script: without it, nothing
would ever start them again. */
html.js [data-live]:not(.is-live) *,
html.js [data-live]:not(.is-live) *::before,
html.js [data-live]:not(.is-live) *::after { animation-play-state: paused !important; }
/* LIGHTS ALONG A ROAD (main.js runners()): a bead with a short tail, in
its road's tone, its head on the road. The box lies over the SVG; the
bead's path is a CSS animation of translate and rotate written from
the road's own shape, so the compositor runs it. Not before its
section has arrived. */
.runners { position: absolute; z-index: 1; pointer-events: none; }
.runner {
position: absolute; left: -34px; top: -3px; width: 38px; height: 6px; border-radius: 6px;
transform-origin: 34px 3px; opacity: 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone, var(--brand)) 75%, transparent));
}
.runner::after {
content: ''; position: absolute; right: -6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
background: radial-gradient(circle, #fff 0 20%, var(--tone, var(--brand)) 42%, color-mix(in srgb, var(--tone, var(--brand)) 30%, transparent) 60%, transparent 72%);
}
html.reveal-on [data-reveal]:not(.is-in) .runner { animation: none !important; }
/* PARALLAX ([data-parallax], on a picture that overfills its frame by
--pz either way): it drifts against the scroll, on the scroll's own
clock — a CSS scroll timeline, so the compositor runs it and no script
reads the scroll. `translate` only: hovers own `scale`. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-parallax] { animation: parallax linear both; animation-timeline: view(); animation-range: cover; }
}
}
@keyframes parallax { from { translate: 0 calc(var(--pz, 7%) * -1); } to { translate: 0 var(--pz, 7%); } }
/* ON THE SCROLL'S OWN CLOCK (D42): motion that moves WITH the scroll,
so it can never arrive late — it is where the scroll says it is, and
stops when the scroll stops. Scroll timelines, which the compositor
runs. `transform` only: the arrivals above own translate, scale and
opacity, and the two add up instead of one replacing the other. No
opacity here, so nothing is ever left half-seen. The heroes never (D39).
`data-scroll`: `lift` (up from --lift below), `grow` (from --grow),
`drift` (in from --sx to the side). A section's title drifts in. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-scroll] { animation: sLift linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
[data-scroll='grow'] { animation-name: sGrow; animation-range: entry 0% cover 40%; }
[data-scroll='drift'] { animation-name: sDrift; }
.sec .sec__title[data-reveal='words'] { animation: sDrift linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
}
}
@keyframes sLift { from { transform: translateY(var(--lift, 56px)); } }
@keyframes sGrow { from { transform: scale(var(--grow, .94)); } }
@keyframes sDrift { from { transform: translateX(var(--sx, -4vw)); } }
/* SKELETONS (main.js): a frame whose picture is still on its way holds a
shimmer, which fades as the picture lands. The light sweeps on a
transform, so a page of them costs no painting. */
.skel {
position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
border-radius: inherit; background: var(--skel-bg);
transition: opacity .45s var(--ease);
}
.skel::after, .sk::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 22%, var(--skel-hi) 50%, transparent 78%);
translate: -100% 0; animation: skel 1.35s cubic-bezier(.45, .05, .55, .95) infinite;
}
.skel.is-done { opacity: 0; }
.skel.is-done::after { animation: none; }
@keyframes skel { to { translate: 100% 0; } }
/* A drawn placeholder: a block (.sk) in a skeleton row, card or line. */
.sk { position: relative; overflow: hidden; display: block; border-radius: 10px; background: var(--skel-bg); }
.sk--line { height: .8em; border-radius: 6px; }
.sk--short { width: 58%; }
.sk--pic { aspect-ratio: 1; border-radius: 14px; }
:root { --skel-bg: color-mix(in srgb, var(--fg) 7%, transparent); --skel-hi: rgba(255, 255, 255, .55); }
[data-theme='dark'] { --skel-bg: rgba(255, 255, 255, .055); --skel-hi: rgba(255, 255, 255, .09); }
@media (prefers-reduced-motion: reduce) { .skel::after, .sk::after { animation: none; } }
/* PAGE TO PAGE (main.js): a line runs along the top while the next page
is fetched, and THE NEXT PAGE'S SKELETON stands in under the bar — its
shape in grey blocks with a light sweeping them, as the page it is going
to is laid out (owner, 2026-10-14). It comes up only if the wait shows
(.12s), and the next page simply replaces it. The browser navigates at
once; nothing waits on this. */
.pt-line {
position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
transform-origin: 0 50%; scale: .0001 1; opacity: 0;
background: linear-gradient(90deg, var(--brand), var(--accent) 70%, #FD6A00);
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}
html.is-leaving .pt-line { opacity: 1; animation: ptRun 7s cubic-bezier(.06, .75, .1, 1) forwards; }
/* Lines that grow from nothing start at .0001, never 0 (D46): Chrome runs
a `scale` animation from or to an exact zero on the page's own thread. */
@keyframes ptRun { 0% { scale: .0001 1; } 10% { scale: .42 1; } 100% { scale: .96 1; } }
.ptsk {
position: fixed; z-index: 45; inset: var(--top-h, 72px) 0 0; overflow: hidden; pointer-events: none;
padding-top: clamp(16px, 2.6vw, 36px); background: var(--bg);
opacity: 0; animation: ptskIn .18s var(--ease) .12s forwards;
}
@keyframes ptskIn { to { opacity: 1; } }
.ptsk .sk { flex: none; }
.ptsk__row { display: flex; flex-wrap: wrap; gap: 10px; }
.ptsk__head { display: grid; gap: 14px; margin-bottom: clamp(22px, 3vw, 36px); }
.ptsk__title { height: clamp(40px, 5.4vw, 70px); width: min(62%, 560px); border-radius: 16px; }
.ptsk__chip { width: 92px; height: 34px; border-radius: var(--r-full); }
.ptsk__bar { margin-bottom: 26px; }
.ptsk__pill { width: 112px; height: 42px; border-radius: var(--r-full); }
.ptsk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; }
.ptsk__card { display: grid; gap: 10px; }
.ptsk__media { aspect-ratio: 4 / 5; border-radius: 22px; }
.ptsk__name { height: 1.05em; }
.ptsk__pdp { display: grid; gap: clamp(24px, 4.4vw, 70px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.ptsk__stage { aspect-ratio: 5 / 4; max-height: calc(100svh - var(--top-h, 72px) - 150px); border-radius: 30px; margin-bottom: 14px; }
.ptsk__thumb { width: 76px; height: 76px; border-radius: 18px; }
.ptsk__buy { display: grid; align-content: start; gap: 14px; max-width: 600px; }
.ptsk__price { width: 130px; height: 42px; margin-top: 10px; }
.ptsk__tile { flex: 1; height: 66px; border-radius: 18px; }
.ptsk__btn { height: 54px; border-radius: var(--r-full); }
.ptsk .ptsk__tile, .ptsk .ptsk__half { flex: 1; }
.ptsk__buy .ptsk__title { height: 44px; width: 92%; border-radius: 12px; }
.ptsk__buy .ptsk__pill { width: 130px; height: 36px; }
.ptsk__hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 14px; height: clamp(420px, calc(100svh - var(--top-h, 72px) - 110px), 740px); }
.ptsk__panel { height: 100%; border-radius: 34px; }
.ptsk__cart { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.ptsk__lines { display: grid; gap: 14px; }
.ptsk__line { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 24px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.ptsk__txt { flex: 1; display: grid; gap: 10px; }
.ptsk__sum { height: 300px; border-radius: 26px; }
.ptsk__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.ptsk__block { height: 220px; border-radius: 26px; }
.ptsk > .wrap > .sk--line + .sk--line { margin-top: 12px; }
@media (max-width: 1024px) { .ptsk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
.ptsk__pdp, .ptsk__cart { grid-template-columns: minmax(0, 1fr); }
.ptsk__stage { aspect-ratio: 1; max-height: none; }
.ptsk__hero { grid-template-columns: minmax(0, 1fr); height: auto; }
.ptsk__panel { height: 300px; }
.ptsk__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { .ptsk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } }
/* THE READ LINE: how far down the page you are, a hairline under the bar,
on the scroll's own clock. */
.sprog {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
transform-origin: 0 50%; scale: .0001 1;
background: linear-gradient(90deg, var(--brand), var(--accent));
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.sprog { animation: sprog linear both; animation-timeline: scroll(root block); }
}
}
@keyframes sprog { to { scale: 1 1; } }
/* Sprite icons: sized in em, coloured by currentColor. */
.ico { width: 1.15em; height: 1.15em; display: inline-block; flex: none; vertical-align: -.18em; }
.ico-sm { width: 1em; height: 1em; }
/* ----- utilities */
.wrap { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
padding: var(--s-2) var(--s-4); background: var(--brand); color: var(--on-brand);
border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); color: var(--on-brand); }
/* Each range's own tint, keyed off its slug: icon wells, specimen tiles.
Coffee's roast brown tints marks only, never type. */
.t-fresh-produce { --tint-a: rgba(53, 196, 111, .18); --tint-b: var(--forest-500); --lit: rgba(53, 196, 111, .3); }
.t-millet-foods { --tint-a: rgba(244, 180, 0, .2); --tint-b: var(--harvest-700); --lit: rgba(244, 180, 0, .3); }
.t-bio-fertilisers { --tint-a: rgba(31, 154, 80, .17); --tint-b: var(--forest-600); --lit: rgba(31, 154, 80, .3); }
.t-farm-machinery { --tint-a: rgba(229, 96, 11, .14); --tint-b: var(--clay-600); --lit: rgba(229, 96, 11, .26); }
.t-coffee { --tint-a: rgba(140, 90, 50, .16); --tint-b: #6B3F22; --lit: rgba(176, 112, 64, .28); }
.t-turmeric { --tint-a: rgba(247, 152, 8, .2); --tint-b: #B4620A; --lit: rgba(247, 152, 8, .3); }
.t-jaggery { --tint-a: rgba(196, 128, 50, .18); --tint-b: #8C5517; --lit: rgba(206, 140, 66, .3); }
.t-oils-dairy { --tint-a: rgba(226, 170, 30, .19); --tint-b: #8A6406; --lit: rgba(232, 182, 48, .3); }
/* an aisle (migration 025): Organic Food, in its ranges' golds */
.t-organic-food { --tint-a: rgba(236, 164, 20, .19); --tint-b: var(--harvest-700); --lit: rgba(236, 164, 20, .3); }
:is([data-theme='dark'], .theme-dark) :is(.mrange__pic, .schip__ico, .sopt__pic--ico, .rtab__pic--all) { color: var(--fg-muted); }
/* THE SECTION, on every page: rhythm is what separates one part of a page
from the next. (At 8vw, two sections met across ~250px of nothing.) */
.sec { padding-block: clamp(3.5rem, 5.6vw, 5.5rem); }
.sec--tint { background: var(--surface-sunk); }
.sec__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.6rem); }
.sec__title { font-size: clamp(2.1rem, 1.25rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.04em; }
.sec__lede { margin-top: var(--s-4); color: var(--fg-muted); font-size: 1.06rem; line-height: 1.65; }
/* THE STAGE: the hero, every page head, the footer. It FOLLOWS THE
THEME (owner, 2026-10-13: a hero that stayed dark in the light theme):
daylight in the light one, night with film grain in the dark one; lit
by its range from above and the gold from below either way. Not
positioned: the footer must stay under the page. */
.stage {
--lit-b: rgba(244, 180, 0, .12);
background:
var(--grain-layer),
radial-gradient(46% 62% at 86% 6%, var(--lit, rgba(31, 154, 80, .26)), transparent 70%),
radial-gradient(42% 58% at 4% 104%, var(--lit-b), transparent 72%),
linear-gradient(180deg, var(--stage-2), var(--stage) 72%);
color: var(--fg);
}
/* The page that opens on a stage slides it under the bar (has-stage,
header.php; never with a flash message between them). */
.has-stage main > .stage:first-child { padding-top: calc(var(--top-h, var(--head-h)) + var(--stage-top, 2rem)); }
/* THE FIELD: rows of a ploughed field running to the horizon, faint, at
the foot of a stage — the ground the whole site stands on. */
.floor, .shead::after {
content: "";
position: absolute; z-index: -1; left: -45%; right: -45%; bottom: 0; height: 58%; pointer-events: none;
background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 76px);
transform: perspective(380px) rotateX(66deg); transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(to top, #000, transparent 88%); mask-image: linear-gradient(to top, #000, transparent 88%);
}
/* THE CUT (owner, 2026-10-14: "creative cards and cuts") — a rounded
notch bitten out of a corner, its control sitting in it. A MASK, so it
is true on any ground and theme, and a drop-shadow on the parent
follows it (a box-shadow would be masked away). The corner is an exact
SVG path (storage/cache/review/cutmask.php): the notch's inner curve is
the control's radius plus the gap, on the control's centre. Users set
--cut and its box --cut-w / --cut-h (not here: they would beat the
inherited ones). */
.cut, .cutbox::before {
--cut-at: right bottom, left top, left bottom;
--cut-m: var(--cut, none), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
--cut-s: var(--cut-w, 0px) var(--cut-h, 0px), 100% calc(100% - var(--cut-h, 0px) + 1px), calc(100% - var(--cut-w, 0px) + 1px) var(--cut-h, 0px);
-webkit-mask: var(--cut-m); mask: var(--cut-m);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: var(--cut-at); mask-position: var(--cut-at);
-webkit-mask-size: var(--cut-s); mask-size: var(--cut-s);
}
.cut--tr, .cutbox--tr::before { --cut-at: right top, left bottom, left top; }
.cut--bl, .cutbox--bl::before { --cut-at: left bottom, left top, right bottom; }
.cut--tl, .cutbox--tl::before { --cut-at: left top, left bottom, right top; }
/* A box whose GROUND is cut, not the box: the ::before is its ground
(--cutbox-bg), masked, and the box's own control sits in the notch over
it — no wrapper needed, since nothing inside the box is masked. */
.cutbox { position: relative; isolation: isolate; }
.cutbox::before {
content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: var(--cutbox-bg, var(--surface)); pointer-events: none;
}
/* A light that follows the pointer across a surface ([data-glow]; main.js
writes --mx/--my). The surface positions itself and isolates. */
[data-glow]::before {
content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--glow, color-mix(in srgb, var(--brand) 12%, transparent)), transparent 70%);
opacity: 0; transition: opacity .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) { [data-glow]:hover::before { opacity: 1; } }
/* ----- buttons */
.btn {
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: var(--tap); padding: var(--s-3) var(--s-5);
border: 1px solid transparent; border-radius: var(--r-full);
font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), scale var(--dur-press) var(--ease-out),
translate .4s var(--ease-out);
}
/* Lit, not flat: a sheen over the colour (so hover still eases it) and a
glow of its own colour. */
.btn--brand {
background: var(--brand) linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 58%);
color: var(--on-brand);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(17, 21, 18, .14),
0 12px 26px -12px color-mix(in srgb, var(--brand) 85%, transparent);
}
.btn--brand:hover { background-color: var(--brand-hover); color: var(--on-brand); }
.btn--outline { border-color: var(--border-strong); color: var(--fg); background: var(--surface); }
.btn--outline:hover { color: var(--fg); border-color: var(--fg-subtle); }
.btn--ghost { color: var(--fg-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--fg); }
.btn--sm { min-height: 38px; padding: var(--s-2) var(--s-4); font-size: .86rem; }
.btn-lg { min-height: 54px; padding: var(--s-4) var(--s-6); font-size: 1rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
/* A pointer over a solid button draws a light across it, and its arrow
leans the way it goes. Touch gets the press instead. */
.btn > .ico { transition: translate var(--dur) var(--ease-out); }
.btn--brand::after {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
translate: -110% 0;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover > .ico:has(use[href='#i-arrow-right']) { translate: 3px 0; }
.btn--brand:hover::after { translate: 110% 0; transition: translate .85s var(--ease-out); }
}
/* PRESS: anything pressable gives under the finger, 3% for a control. Each
lists `scale` in its own transition. */
:is(.btn, .nav__link, .icon-btn, .cartbtn, .footact, .wa, .tabbar__item, .schip, .dtile):active { scale: .97; }
:is(.btn, .nav__link, .icon-btn, .cartbtn, .footact, .wa, .tabbar__item, .schip, .dtile) { -webkit-tap-highlight-color: transparent; }
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px var(--s-2); border-radius: var(--r-sm);
font-size: var(--fs-label); font-weight: 600;
text-transform: uppercase; letter-spacing: var(--track-label);
background: var(--surface-sunk); color: var(--fg-muted);
}
.badge--accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge--brand { background: var(--brand-soft); color: var(--brand-ink); }
.badge--farm { background: var(--farm-soft); color: var(--farm-ink); }
.icon-btn {
position: relative; flex: none; width: var(--tap); height: var(--tap);
display: grid; place-items: center;
background: none; border: 1px solid transparent; border-radius: var(--r-full);
color: var(--fg-muted); text-decoration: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.icon-btn .ico { width: 20px; height: 20px; }
/* ----- ticker */
.ticker { background: var(--fg); color: var(--bg); font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; }
.ticker__inner {
display: flex; gap: var(--s-6); justify-content: center;
padding-block: 10px; overflow-x: auto; scrollbar-width: none;
}
.ticker__inner::-webkit-scrollbar { display: none; }
.ticker span { white-space: nowrap; }
/* =====
THE HEADER
===== */
/* SOLID, NEVER GLASS (owner, 2026-10-17: "on scroll it's blurred …
remove it"; D48): what scrolls under the bar is covered by the page's
own ground, not blurred through it. */
.site-top {
position: sticky; top: 0; z-index: 50;
background: var(--bg);
border-bottom: 1px solid var(--hairline);
/* Its own colour, so the stage's tokens reach its text: inherited, it
was the body's, already computed in the light theme. */
color: var(--fg);
transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), box-shadow var(--dur-slow) var(--ease);
}
/* Lifted off the page once it has scrolled under it (is-scrolled: the
inline script in header.php). */
.site-top.is-scrolled { box-shadow: 0 10px 30px -18px rgba(17, 21, 18, .25); }
/* OVER A STAGE the bar is part of it: clear at the top of the page, the
page's own ground once scrolled (with no script, solid throughout). */
.has-stage .site-top { margin-bottom: calc(-1 * var(--top-h, var(--head-h))); }
html.js .has-stage .site-top:not(.is-scrolled) { background-color: transparent; border-bottom-color: transparent; }
/* The ground of the bar's own controls, the nav capsule and the search:
a tint, never an outline. */
.site-head { --chip-bg: color-mix(in srgb, var(--surface-sunk) 78%, transparent); --chip-bg-hover: var(--surface-sunk); }
[data-theme='dark'] .site-head { --chip-bg: rgba(255, 255, 255, .055); --chip-bg-hover: rgba(255, 255, 255, .09); }
.site-head__inner {
position: relative; /* the shop menu and the search panel anchor here */
display: flex; align-items: center; gap: var(--s-3);
min-height: var(--head-h);
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: var(--tap); color: inherit; text-decoration: none; }
/* 2:1 artwork in a 2:1 slot; `contain` shows the mark whole. */
.brand__logo { width: 76px; height: 38px; object-fit: contain; flex: none; }
.brand__text { display: grid; gap: 4px; line-height: 1; }
.brand__text b {
font-family: var(--font-display); font-size: 1.34rem; font-weight: 700; letter-spacing: -.025em; white-space: nowrap;
font-variation-settings: 'opsz' 48, var(--wonk-off);
}
.brand__text small {
font: 600 .64rem/1 var(--font-mono); text-transform: uppercase;
letter-spacing: .15em; color: var(--fg-muted); white-space: nowrap;
}
/* THE MARK IN 3D (D61; owner, 2026-10-23, of D59's harvest: "no meaning
… 3d animation, transition and transformation like cinematic …
attention to detail should make sense"). Dinkomart's mark built as a
real object and filmed (storage/cache/review/v32): extruded from the
artwork's own outline with a rounded bevel, glossy, its two wheels real
wheels in their slot, a shadow on the ground. Every 8s the cart sets
off — the engine shudders, it winds back, launches toward the lens with
its speed lines streaming out and its wheels blurring as a light runs
over it, swings round on its springs and settles; a glint on the M.
An animated AVIF: the browser plays it off the page's thread and draws
nothing while it rests (measured: 0 main-thread frames). Drawn at twice
the slot, centred on it, for room to move. */
.brand__mark { position: relative; flex: none; display: block; width: 76px; height: 38px; transition: scale var(--dur-press) var(--ease-out); }
.brand__mark picture { display: contents; }
.brand__mark .brand__logo { width: 100%; height: 100%; }
.brand__3d { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; max-width: none; pointer-events: none; }
.brand:active .brand__mark { scale: .95; }
/* THE NAV (owner, 2026-10-14: the words' "color and weight sucks" — they
were the muted grey at 500): ink at 600 in a capsule, no icons, and ONE
THUMB that glides under whichever word the pointer is on and rests on
the page you are on, like a segmented control (main.js writes --tx/--tw).
The thumb is the capsule's full box clipped to a pill: a clip-path
moves without layout, and the pill's ends stay round (a scaleX would
squash them). The nav is not positioned: the thumb and the shop menu
both measure from .site-head__inner. */
.nav {
display: flex; align-items: center; gap: 2px; margin-left: var(--s-4); padding: 4px;
border-radius: var(--r-full); background: var(--chip-bg);
}
.nav__item { position: static; display: flex; align-items: center; }
.nav__link {
position: relative; z-index: 1;
display: inline-flex; align-items: center; min-height: 40px; padding: 0 17px;
border: 0; border-radius: var(--r-full); background: none;
color: var(--fg); font: 600 .95rem/1 var(--font-body); letter-spacing: -.012em; text-decoration: none; white-space: nowrap;
transition: color var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.nav__link:hover { color: var(--fg); }
.nav__link.is-current { color: var(--brand-ink); }
.nav__link--shop { padding-right: 4px; }
/* The shop menu's own door, for a keyboard and a finger. */
.nav__more {
position: relative; z-index: 1; flex: none; display: grid; place-items: center;
width: 32px; height: 32px; margin-right: 6px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--fg-muted); cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.nav__more:hover, .nav__more[aria-expanded='true'] { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.nav__more:active { scale: .9; }
.nav__chev { width: 15px; height: 15px; transition: rotate var(--dur) var(--ease-out); }
[aria-expanded='true'] > .nav__chev { rotate: 180deg; }
.nav__thumb {
position: absolute; z-index: 0; inset: 0; pointer-events: none;
background: var(--surface); opacity: 0;
clip-path: inset(var(--ty, 50%) calc(100% - var(--tx, 0px) - var(--tw, 0px)) calc(100% - var(--ty, 50%) - var(--th, 0px)) var(--tx, 0px) round 999px);
transition: opacity .25s var(--ease);
}
.nav__thumb.is-on { opacity: 1; }
.nav__thumb.is-ready { transition: clip-path .5s var(--ease-out), opacity .25s var(--ease); }
[data-theme='dark'] .nav__thumb { background: rgba(255, 255, 255, .12); }
/* ----- the shop menu
Every range with its picture, count and groups, and the brands; grows
out of the Shop button (--origin), closes at once. */
.mega {
position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; right: 0;
display: grid; gap: var(--s-4); padding: var(--s-5);
max-height: calc(100svh - var(--top-h, 72px) - 24px); overflow-y: auto; overscroll-behavior: contain;
background: var(--surface); border: 0; border-radius: var(--r-xl);
box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(17, 21, 18, .28), var(--shadow-md);
transform-origin: var(--origin, 50% 0);
transition: opacity var(--dur) var(--ease-out), scale var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
}
@starting-style { .mega { opacity: 0; scale: .97; translate: 0 -6px; } }
/* A bridge over the gap between the bar and the open menu, part of the
item, so a mouse crossing it never "leaves" (the menu is a scroller, so
the bridge cannot hang off it). */
.has-menu:has(> .mega:not([hidden]))::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 12px); height: 20px; }
.mega__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .78fr); }
.mega__col { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.mega__col--brands { padding: var(--s-4) var(--s-5); border-radius: var(--r-xl); background: var(--surface-2); }
.mega__label, .drawer__label, .search__label {
font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase;
letter-spacing: .12em; color: var(--fg-subtle);
}
.mega__label { margin-bottom: var(--s-2); }
.mrange { display: grid; gap: 6px; }
.mrange__head, .mbrand {
display: flex; align-items: center; gap: var(--s-3);
padding: 8px; margin: 0 -8px; border-radius: var(--r-lg);
color: var(--fg); text-decoration: none;
transition: background var(--dur) var(--ease);
}
a.mrange__head:hover, .mbrand:hover { background: var(--surface-2); color: var(--fg); }
.mrange__pic {
position: relative; flex: none; width: 56px; height: 56px; overflow: hidden;
display: grid; place-items: center; border-radius: 16px;
background: var(--tint-a, var(--surface-sunk)); color: var(--tint-b, var(--brand));
}
.mrange__pic img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.mrange__txt, .mbrand__txt { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.mrange__txt b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }
.mrange__txt small, .mbrand__txt small { font: 500 var(--fs-label)/1.3 var(--font-mono); color: var(--fg-subtle); }
.mrange__head.is-soon { opacity: .72; }
.mrange__soon { color: var(--accent-ink) !important; text-transform: uppercase; letter-spacing: var(--track-label); }
.mrange__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); margin: 0 0 var(--s-2) 68px; padding: 0; list-style: none; }
.mrange__groups a {
display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
padding: 5px 0; color: var(--fg-muted); font-size: .86rem; line-height: 1.3; text-decoration: none;
}
.mrange__groups a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.mrange__groups span { font: 500 var(--fs-label)/1 var(--font-mono); color: var(--fg-subtle); }
/* An aisle (D76): its ranges' own pictures, four to the square, and its
ranges as its links. */
.mrange__pic--quad { grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; place-items: stretch; background: var(--surface); }
.mrange__pic--quad img { min-width: 0; min-height: 0; border-radius: 4px; }
.mrange__pic--quad img:first-child { border-top-left-radius: 14px; }
.mrange__pic--quad img:nth-child(2) { border-top-right-radius: 14px; }
.mrange__pic--quad img:nth-child(3) { border-bottom-left-radius: 14px; }
.mrange__pic--quad img:nth-child(4) { border-bottom-right-radius: 14px; }
.mrange__pic--quad img:nth-child(3):last-child { grid-column: span 2; border-bottom-right-radius: 14px; }
.mrange__later { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 5px 0; color: var(--fg-subtle); font-size: .86rem; line-height: 1.3; }
.mrange__later span { color: var(--accent-ink); text-transform: uppercase; letter-spacing: var(--track-label); }
@media (hover: hover) and (pointer: fine) { a.mrange__head:hover .mrange__pic img { scale: 1.08; } }
.mbrand__logo {
flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
border-radius: 14px; background: #fff; border: 1px solid var(--hairline);
}
.mbrand__logo img { width: 80%; height: 80%; object-fit: contain; }
.mbrand__txt b { font-weight: 600; font-size: .95rem; }
.mega__more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-weight: 600; font-size: .9rem; text-decoration: none; }
.mega__more .ico, .mega__allgo { transition: translate var(--dur) var(--ease-out); }
.mega__all {
display: flex; align-items: center; gap: var(--s-3);
padding: 12px 16px; border-radius: var(--r-lg);
background: var(--surface-2); color: var(--fg); text-decoration: none;
transition: background var(--dur) var(--ease);
}
.mega__all:hover { background: var(--brand-soft); color: var(--fg); }
.mega__allico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--brand); color: var(--on-brand); }
.mega__all > span:nth-child(2) { display: grid; line-height: 1.3; }
.mega__all b { font-weight: 650; }
.mega__all small { font: 500 var(--fs-label)/1.3 var(--font-mono); color: var(--fg-subtle); }
.mega__allgo { margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
.mega__all:hover .mega__allgo, .mega__more:hover .ico { translate: 4px 0; }
}
/* ----- the search
A pill in the bar, a panel under it; a full sheet on a phone. */
.search { position: relative; flex: 1 1 220px; min-width: 0; max-width: 420px; margin-left: auto; }
.search__field { position: relative; display: flex; align-items: center; }
.search__ico { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--fg-subtle); pointer-events: none; }
.search input {
width: 100%; min-height: 46px; padding: 0 44px 0 44px;
background: var(--chip-bg); border: 1px solid transparent; border-radius: var(--r-full);
font-size: .94rem; font-weight: 500; text-overflow: ellipsis; -webkit-appearance: none; appearance: none;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search input::placeholder { color: var(--fg-subtle); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:hover { background: var(--chip-bg-hover); }
.search input:focus {
outline: none; background: var(--surface); border-color: var(--brand);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.search__kbd {
position: absolute; right: 12px; min-width: 24px; height: 24px; padding: 0 6px;
display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 7px;
font: 500 var(--fs-label)/1 var(--font-mono); color: var(--fg-subtle); background: var(--surface); pointer-events: none;
}
.search input:focus ~ .search__kbd, .search input:not(:placeholder-shown) ~ .search__kbd { display: none; }
.search__back { display: none; }
.search__pop {
position: absolute; z-index: 6; top: calc(100% + 10px); right: 0;
width: max(100%, min(560px, 100vw - 2 * var(--gutter)));
max-height: min(70svh, 600px); overflow-y: auto; overscroll-behavior: contain;
padding: var(--s-4); background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-xl); box-shadow: 0 30px 60px -24px rgba(17, 21, 18, .28), var(--shadow-md);
transform-origin: 70% 0; transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
@starting-style { .search__pop { opacity: 0; scale: .97; } }
.search__idle { display: grid; gap: var(--s-3); }
.search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 4px;
border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface);
color: var(--fg); font-size: .9rem; font-weight: 500; text-decoration: none;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.schip:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface-2); }
.schip__ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--tint-a, var(--surface-2)); color: var(--tint-b, var(--brand)); }
.schip--brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--hairline); }
/* Result rows: the photograph, the name with the match marked, its brand
and pack, its price. The active row is the one the arrows are on. */
.search__list { display: grid; gap: 2px; }
.search__group { margin: var(--s-3) 0 var(--s-1); }
.search__group:first-child { margin-top: 0; }
.sopt {
display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px;
padding: 8px 10px 8px 8px; border-radius: 16px; color: var(--fg); text-decoration: none;
transition: background var(--dur-fast) var(--ease);
}
.sopt:hover, .sopt.is-active { background: var(--surface-2); color: var(--fg); }
.sopt__pic { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: var(--plate); border: 1px solid var(--hairline); }
.sopt__pic--ico { display: grid; place-items: center; background: var(--tint-a, var(--surface-2)); color: var(--tint-b, var(--brand)); }
.sopt__txt { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.sopt__txt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: .95rem; }
.sopt__txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .82rem; color: var(--fg-subtle); }
.sopt mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.sopt__price { font: 600 .92rem var(--font-mono); }
.sopt--all { grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--s-2); padding: 12px 14px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.sopt--all:hover, .sopt--all.is-active { background: color-mix(in srgb, var(--brand-soft) 70%, var(--brand) 12%); color: var(--brand-ink); }
.search__status { font-size: .88rem; color: var(--fg-subtle); }
.search__status:empty { display: none; }
.search__status:not(:empty) { padding: var(--s-2) 4px 0; }
/* ----- the tools */
.site-head__tools { display: flex; align-items: center; gap: 4px; flex: none; }
.search-btn, .menu-btn { display: none; }
.theme-btn .t-sun, [data-theme='dark'] .theme-btn .t-moon { display: none; }
[data-theme='dark'] .theme-btn .t-sun { display: block; }
/* The cart: an ink pill (no outline: the owner's "borders" note), its
count in gold once there is something in it, and the brand's green then. */
.cartbtn {
position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap); padding: 0 6px 0 16px; margin-left: 4px;
border: 0; border-radius: var(--r-full); background: var(--fg);
color: var(--bg); font-weight: 650; font-size: .94rem; letter-spacing: -.01em; text-decoration: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), scale var(--dur-press) var(--ease-out), translate .4s var(--ease-out);
}
.cartbtn .ico { width: 19px; height: 19px; }
.cartbtn:hover { color: var(--bg); background: color-mix(in srgb, var(--fg) 82%, var(--brand)); }
.cartbtn__n, .tabbar__n {
min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center;
border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-muted);
font: 650 var(--fs-label)/1 var(--font-mono);
}
.cartbtn .cartbtn__n { background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.cartbtn__n:empty { min-width: 10px; padding: 0; background: none !important; }
.cartbtn.has-items { background: var(--brand); color: var(--on-brand); }
.cartbtn.has-items:hover { background: var(--brand-hover); color: var(--on-brand); }
.cartbtn.has-items .cartbtn__n { background: var(--accent); color: var(--on-accent); }
/* Where did it go? The count answers with a bump (main.js). */
.is-bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { scale: 1.3; } }
/* =====
THE TAB BAR — phones only, under the thumb
===== */
.tabbar { display: none; }
/* =====
THE DRAWERS — menu and cart, s: a panel from the right, a sheet
from the bottom on a phone; in on the drawer curve, out at once.
===== */
.drawer, .mcart {
position: fixed; inset: 0 0 0 auto; margin: 0;
width: min(440px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh;
padding: 0; border: 0; border-radius: 28px 0 0 28px;
background: var(--bg); color: var(--fg); box-shadow: -30px 0 60px -20px rgba(17, 21, 18, .32);
overflow: hidden; overscroll-behavior: contain;
transition: translate .5s var(--ease-drawer);
}
.drawer[open], .mcart[open] { display: flex; flex-direction: column; }
@starting-style { .drawer[open], .mcart[open] { translate: 100% 0; } }
.drawer::backdrop, .mcart::backdrop {
background: rgba(10, 12, 11, .5);
transition: opacity .4s var(--ease-out);
}
@starting-style { .drawer[open]::backdrop, .mcart[open]::backdrop { opacity: 0; } }
.drawer__head, .mcart__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: 14px 14px 14px 22px; border-bottom: 1px solid var(--hairline);
}
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5) 22px var(--s-6); display: grid; align-content: start; gap: var(--s-3); }
.drawer__label { margin-top: var(--s-2); }
.drawer__ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dtile {
position: relative; display: grid; align-content: end; overflow: hidden; isolation: isolate;
min-height: 112px; padding: 12px; border-radius: 20px;
background: var(--tint-a, var(--surface-2)); color: #fff; text-decoration: none;
transition: scale var(--dur-press) var(--ease-out);
}
.dtile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.dtile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(6, 21, 13, .78)); }
.dtile__txt { display: grid; line-height: 1.2; }
.dtile b { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.dtile small { font: 500 var(--fs-label)/1.4 var(--font-mono); color: rgba(255, 255, 255, .82); }
.dtile:hover { color: #fff; }
.dtile.is-soon { filter: grayscale(.4); }
.drawer__all, .drawer__links a {
display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: 0 16px;
border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
color: var(--fg); text-decoration: none; font-weight: 600;
}
.drawer__all span { display: flex; align-items: baseline; gap: 8px; }
.drawer__all small { font: 500 var(--fs-label) var(--font-mono); color: var(--fg-subtle); }
.drawer__all .ico, .drawer__go { margin-left: auto; color: var(--fg-subtle); }
.drawer__links { display: grid; gap: 8px; }
.drawer__links a.is-current { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.drawer__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); color: var(--brand-ink); }
.drawer__reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: var(--s-3); }
.drawer__wa .ico { color: #0F8445; }
/* ----- the cart drawer */
.mcart__title { font-size: 1.5rem; font-weight: 800; }
.mcart__title:focus { outline: none; }
.mcart__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mcart__lines { flex: 1; overflow-y: auto; padding: 6px 22px; margin: 0; list-style: none; }
.mline { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 6px 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.mline:last-child { border-bottom: 0; }
.mline__pic { grid-row: span 2; width: 68px; height: 68px; border-radius: 16px; overflow: hidden; background: var(--plate); border: 1px solid var(--hairline); }
.mline__pic img { width: 100%; height: 100%; object-fit: contain; }
.mline__txt { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.mline__name { color: var(--fg); font-weight: 600; font-size: .95rem; text-decoration: none; }
.mline__name:hover { color: var(--brand-ink); }
.mline__meta { font-size: .82rem; color: var(--fg-subtle); }
.mline__total { font: 600 .95rem var(--font-mono); text-align: right; }
.mline__ctl { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mline__rm { width: 36px; height: 36px; }
.mline__rm .ico { width: 18px; height: 18px; }
.mline__rm:hover { color: var(--err); }
.mcart__foot { display: grid; gap: 10px; padding: 16px 22px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--surface); }
.mcart__sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.mcart__sum span { color: var(--fg-muted); }
.mcart__sum b { font: 600 1.3rem var(--font-mono); }
.mcart__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.mcart__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s-3); padding: var(--s-6) 22px; text-align: center; }
.mcart__empty > .ico { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.mcart__empty b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.mcart__empty .search__chips { justify-content: center; margin-top: var(--s-2); }
.mcart__wait { flex: 1; display: grid; place-items: center; color: var(--fg-subtle); }
/* Skeleton rows (main.js skelRows): the drawer opening, a slow search. */
.skrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; }
.skrow__txt { display: grid; gap: 9px; }
.mskel { display: grid; align-content: start; gap: 16px; padding: 14px 22px; }
.mskel .sk--pic { width: 56px; }
.sskel { display: grid; gap: 12px; padding: 10px 12px; }
.sskel .skrow { grid-template-columns: 44px minmax(0, 1fr); }
.sskel .sk--pic { width: 44px; border-radius: 10px; }
.mcart.is-busy .mcart__lines { opacity: .55; pointer-events: none; transition: opacity var(--dur) var(--ease); }
/* A quantity: minus, the number, plus. The big one is the product page's. */
.qty {
display: inline-grid; grid-template-columns: 44px 48px 44px; align-items: center; flex: none;
min-height: 54px; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface);
}
.qty button {
height: 100%; min-height: var(--tap); display: grid; place-items: center;
border: 0; border-radius: var(--r-full); background: none; color: var(--fg-muted);
transition: color var(--dur) var(--ease), background var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.qty button:hover { color: var(--fg); background: var(--surface-2); }
.qty button:active { scale: .9; }
.qty input {
width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: center;
font: 600 1.05rem var(--font-mono); -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus-visible { outline-offset: -2px; border-radius: 8px; }
.qty--sm { grid-template-columns: 38px 34px 38px; min-height: 40px; }
.qty--sm button { min-height: 38px; }
.qty--sm input { font-size: .95rem; }
/* ----- flashes */
.flashes { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.flash {
padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-left: 3px solid var(--fg-subtle);
border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface); font-size: .92rem;
}
.flash--success { border-left-color: var(--ok); }
.flash--error { border-left-color: var(--err); }
.flash--info { border-left-color: var(--accent); }
.empty {
display: grid; gap: var(--s-3); place-items: center;
padding: var(--s-9) var(--s-5); text-align: center;
border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--fg-muted);
}
/* ----- WhatsApp button (owner, 2026-10-17: "looks big … make it good
looking and animation"; D48). A 54px coin in WhatsApp's green, lit from
its top, that pops in once the page has settled and then rings every
six seconds: two ripples off its edge and the glyph's little shake.
Its name slides out beside it under a pointer. All of it transform and
opacity, so the compositor runs it — the shake on the glyph's HTML
wrapper: on the itself it ran on the page's thread every frame
(907 main-thread frames in 6s idle at 4x, against 0; measured). Steps
aside while the footer, which has its own, is in view. */
.wa {
position: fixed; z-index: 45;
right: clamp(1rem, 2.4vw, 1.75rem); bottom: clamp(1rem, 2.4vw, 1.75rem);
display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
/* The glyph's ground stays at or under #129A4B: 3.4:1 or more beside white. */
background: radial-gradient(circle at 32% 22%, #2CCB6A, #12944A 52%, #0B7A3B);
color: #fff; text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 12px 26px -10px rgba(11, 122, 59, .75), 0 2px 6px rgba(17, 21, 18, .16);
transition: translate .35s var(--ease-out), opacity .25s var(--ease), scale var(--dur-press) var(--ease-out);
}
.wa:hover { color: #fff; }
.wa:active { scale: .92; }
.wa.is-away { opacity: 0; translate: 0 24px; pointer-events: none; }
.wa__glyph { display: grid; }
.wa svg { width: 27px; height: 27px; }
.wa::before, .wa::after {
content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
border: 2px solid #22B860; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.wa { animation: waIn .6s cubic-bezier(.34, 1.56, .64, 1) .9s backwards; }
.wa::before { animation: waRing 6s var(--ease-out) 2.4s infinite; }
.wa::after { animation: waRing 6s var(--ease-out) 2.75s infinite; }
.wa__glyph { animation: waShake 6s var(--ease-out) 2.4s infinite; }
}
@keyframes waIn { from { opacity: 0; scale: .4; } }
@keyframes waRing {
0% { opacity: .7; scale: 1; }
28%, 100% { opacity: 0; scale: 1.75; }
}
@keyframes waShake {
0%, 18%, 100% { rotate: 0deg; }
3% { rotate: -16deg; }
6% { rotate: 13deg; }
9% { rotate: -9deg; }
12% { rotate: 5deg; }
}
/* Its name, beside it, for a pointer. */
.wa__label {
position: absolute; right: calc(100% + 12px); top: 50%;
padding: 10px 14px; border-radius: 12px; white-space: nowrap;
background: var(--surface); color: var(--fg); font-size: .88rem; font-weight: 600; line-height: 1;
box-shadow: 0 0 0 1px var(--hairline), var(--shadow-md);
opacity: 0; translate: 10px -50%; pointer-events: none;
transition: opacity .2s var(--ease), translate .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.wa:hover { translate: 0 -3px; }
.wa:is(:hover, :focus-visible) .wa__label { opacity: 1; translate: 0 -50%; }
}
/* =====
THE FOOTER — ONE INK PANEL (D43; owner, 2026-10-15: the green footer
"looks worst"). As the owner's own dinkomart.com ends: a dark band with
the logo's colours drawn along its head — here a panel in ink, the
emerald, gold and orange as a hairline along its top with a light
running down it, the coin and the name, the ways to reach a person,
the map of the site and one line of facts; its foot-right corner CUT
(.cut) for the way back up. One band, not a wall.
===== */
.site-foot { padding-block: clamp(1rem, 2vw, 1.5rem) clamp(.75rem, 1.6vw, 1.25rem); background: var(--bg); }
.site-foot__wrap { position: relative; display: grid; }
.site-foot__panel {
--cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 0H72A16 16 0 0 1 56 16H48A32 32 0 0 0 16 48V56A16 16 0 0 1 0 72Z'/%3E%3C/svg%3E");
--cut-w: 72px; --cut-h: 72px; /* a 56px notch: the 48px arrow and an 8px gap */
--ink-fg: #F2F3F0; --ink-muted: rgba(242, 243, 240, .66); --ink-subtle: rgba(242, 243, 240, .5);
grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
padding: clamp(30px, 3.4vw, 50px) clamp(24px, 3.6vw, 56px) clamp(22px, 2.2vw, 28px);
border-radius: 32px; color: var(--ink-fg);
background:
radial-gradient(55% 120% at 100% 0%, rgba(8, 125, 55, .22), transparent 62%),
radial-gradient(45% 100% at 0% 100%, rgba(253, 184, 2, .06), transparent 70%),
#0E1311;
}
[data-theme='dark'] .site-foot__panel {
background:
radial-gradient(55% 120% at 100% 0%, rgba(8, 125, 55, .2), transparent 62%),
radial-gradient(45% 100% at 0% 100%, rgba(253, 184, 2, .05), transparent 70%),
#141917;
}
.site-foot__panel::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); opacity: .5; }
/* The logo's three colours along the head, and a light running down them
now and then (a transform; paused off the screen, data-live). */
.site-foot__line {
position: absolute; top: 0; left: 32px; right: 32px; height: 2px; overflow: hidden; border-radius: 2px;
background: linear-gradient(90deg, transparent, #087D37 14%, #2DB463 32%, #FDB802 58%, #FD6A00 84%, transparent);
}
.site-foot__line::after {
content: ''; position: absolute; inset: 0 auto 0 0; width: 22%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
translate: -110% 0; animation: footRun 5.5s cubic-bezier(.45, .05, .55, .95) 1.2s infinite;
}
@keyframes footRun { 60%, 100% { translate: 560% 0; } }
@media (prefers-reduced-motion: reduce) { .site-foot__line::after { animation: none; opacity: 0; } }
.site-foot__top {
display: grid; align-items: start; gap: clamp(2rem, 4.4vw, 5rem);
grid-template-columns: minmax(0, .95fr) minmax(0, 1.6fr);
}
/* ----- the brand: the mark, the name and the tagline, then the ways in */
.site-foot__brand { display: grid; justify-items: start; gap: var(--s-5); }
.site-foot__home { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.site-foot__home:hover { color: inherit; }
/* THE MARK, IN 3D (D65; owner, 2026-10-23, of the island that stood
here: "doesnt make sense … simple but best"). The brand and nothing
else: Dinkomart's own mark, built in 3D (the bar's, D61), turning
slowly to either side over 6s, a light crossing it once and a glint on
the M — an animated AVIF the browser plays off the page's thread, lazy.
Its frame has room round the mark for the turn, so it overlaps the gap. */
.site-foot__mark { display: block; flex: none; width: 160px; margin: -14px -8px -14px -24px; }
.site-foot__mark img { display: block; width: 100%; height: auto; }
.site-foot__mark .site-foot__logo { width: 100%; height: auto; }
.site-foot__id { display: grid; gap: 6px; }
.site-foot__name { font: 800 1.7rem/1 var(--font-display); letter-spacing: -.035em; }
.site-foot__tag { font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-subtle); }
.site-foot__addr { max-width: 34ch; line-height: 1.55; color: var(--ink-muted); }
/* The ways to reach a person: a glass pill each, its mark in a ring that
fills gold under a pointer. */
.foot-reach { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footact {
display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 5px 16px 5px 5px;
border-radius: var(--r-full); background: rgba(255, 255, 255, .06); color: var(--ink-fg, #fff);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
font-size: .9rem; font-weight: 600; text-decoration: none;
transition: background var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.footact:hover { color: var(--ink-fg, #fff); background: rgba(255, 255, 255, .11); }
.footact__ico {
flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
background: rgba(255, 255, 255, .1); color: #fff;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footact__ico .ico { width: 16px; height: 16px; }
.footact--wa .footact__ico { background: #25D366; color: #fff; }
.footact__txt { display: grid; line-height: 1.15; }
.footact__txt small {
font: 600 .62rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle, rgba(255, 255, 255, .6));
}
@media (hover: hover) and (pointer: fine) {
.footact:hover .footact__ico { background: var(--accent); color: var(--on-accent); }
}
/* ----- the map of the site */
.site-foot__cols { display: grid; gap: var(--s-5) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-foot__col { display: grid; align-content: start; justify-items: start; gap: 2px; }
.site-foot__head {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-2);
font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-subtle);
}
.site-foot__head::before { content: ''; width: 6px; height: 6px; border-radius: 2px; rotate: 45deg; background: var(--accent); }
.site-foot__col a, .site-foot__soon {
position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 34px;
color: var(--ink-fg); font-size: .95rem; font-weight: 500; text-decoration: none;
transition: color var(--dur) var(--ease), translate .3s var(--ease-out);
}
/* An underline drawn from the left in the gold, on a transform. */
.site-foot__col a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px;
background: var(--accent); scale: .0001 1; transform-origin: 0 50%; transition: scale .35s var(--ease-out);
}
.site-foot__col a:hover { color: #fff; }
@media (hover: hover) and (pointer: fine) {
.site-foot__col a:hover::after { scale: 1 1; }
.site-foot__col a:hover { translate: 3px 0; }
}
.site-foot__soon { color: var(--ink-subtle); }
.site-foot__soon small {
padding: 3px 8px; border-radius: var(--r-full); background: rgba(253, 184, 2, .16); color: #FFD873;
font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label);
}
/* The facts, one line along the panel's foot, clear of the cut. */
.site-foot__base {
display: flex; align-items: center; gap: var(--s-2) 14px; flex-wrap: wrap;
margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: 18px calc(var(--cut-w) + 150px) 0 0;
border-top: 1px solid rgba(255, 255, 255, .08);
font: 500 var(--fs-label)/1.4 var(--font-mono); color: var(--ink-subtle);
}
.site-foot__base small { font-size: inherit; }
/* A credit a page's pictures owe (footer.php $pageCredits). */
.site-foot__credit a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.site-foot__credit a:hover { text-decoration-color: currentColor; }
.site-foot__base small + small::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 14px; border-radius: 1px; rotate: 45deg; vertical-align: 2px; background: var(--accent); }
/* The way back up: its name on the panel, its arrow in the notch on the
page, turning to straight up under a pointer. */
.site-foot__up {
grid-area: 1 / 1; justify-self: end; align-self: end; position: relative; z-index: 2;
display: flex; align-items: center; gap: 14px; color: rgba(242, 243, 240, .78); text-decoration: none;
font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
}
.site-foot__up:hover { color: #fff; }
.site-foot__upbtn {
width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
background: var(--fg); color: var(--bg); rotate: 45deg;
transition: rotate .5s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.site-foot__upbtn .ico { width: 18px; height: 18px; }
.site-foot__up:active .site-foot__upbtn { scale: .94; }
@media (hover: hover) and (pointer: fine) {
.site-foot__up:hover .site-foot__upbtn { rotate: 0deg; background-color: var(--brand); color: var(--on-brand); }
}
/* =====
RESPONSIVE — from the bar's own contents: the full nav needs 1100px;
under 900 the tab bar takes the menu, the search and the cart.
===== */
@media (max-width: 1439px) { .brand__text small { display: none; } }
/* The nav keeps its words down to 1100px: the mark stands for the name
there, and the links close up a little. Under 1100, the menu drawer. */
@media (min-width: 1100px) and (max-width: 1279px) {
.site-head .brand__text { display: none; }
.nav { margin-left: var(--s-2); }
.nav__link { padding-inline: 13px; }
.nav__link--shop { padding-right: 2px; }
.search { flex-basis: 180px; }
.search__kbd { display: none; }
}
@media (max-width: 1099px) {
.nav { display: none; }
.menu-btn { display: grid; }
}
@media (max-width: 1024px) {
.site-foot__top { grid-template-columns: minmax(0, 1fr); }
.mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__col--brands { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
:root { --head-h: 60px; }
.site-head__inner { gap: var(--s-2); }
.brand__logo, .brand__mark { width: 64px; height: 32px; }
.brand__text b { font-size: 1.08rem; }
.menu-btn, .cartbtn { display: none; }
.site-head__tools { margin-left: auto; }
/* The search: a button in the bar; the form opens as a full sheet. With
scripting off it stays a row of its own, so a phone can still search. */
html.js .search:not(.is-open) { display: none; }
html.js .search-btn { display: grid; }
.search { order: 5; flex-basis: 100%; max-width: none; margin: 0 0 10px; }
html:not(.js) .site-head__inner { flex-wrap: wrap; }
.search.is-open {
position: fixed; inset: 0; z-index: 80; margin: 0;
display: flex; flex-direction: column; gap: 12px;
padding: 10px var(--gutter) 0; background: var(--bg);
}
.search.is-open .search__field { flex: none; }
.search.is-open .search__back { display: grid; position: absolute; left: var(--gutter); top: 10px; }
.search.is-open .search__field { margin-left: 52px; }
.search.is-open .search__pop {
position: static; flex: 1; width: auto; max-height: none; padding: 6px 0 calc(24px + env(safe-area-inset-bottom));
border: 0; border-radius: 0; box-shadow: none; background: none;
}
.search.is-open .search__kbd { display: none; }
.tabbar {
position: fixed; z-index: 46; left: 0; right: 0; bottom: 0;
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
padding: 6px 6px max(6px, env(safe-area-inset-bottom));
background: var(--surface);
border-top: 1px solid var(--hairline); box-shadow: 0 -10px 30px -18px rgba(6, 21, 13, .3);
transition: translate .4s var(--ease-drawer);
}
.tabbar.is-away { translate: 0 110%; }
.tabbar__item {
position: relative; display: grid; justify-items: center; align-content: center; gap: 3px;
min-height: 54px; border-radius: 16px; color: var(--fg-subtle); text-decoration: none;
font: 600 var(--fs-label)/1 var(--font-body);
transition: color var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.tabbar__item .ico {
width: 52px; height: 30px; padding: 4px 15px; border-radius: var(--r-full);
transition: background var(--dur) var(--ease);
}
.tabbar__item:hover { color: var(--fg); }
.tabbar__item.is-current { color: var(--brand-ink); }
.tabbar__item.is-current .ico { background: var(--brand-soft); }
.tabbar__n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; background: var(--accent); color: var(--on-accent); }
.tabbar__n:empty { display: none; }
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
.wa { width: 50px; height: 50px; bottom: calc(78px + env(safe-area-inset-bottom)); }
.wa svg { width: 25px; height: 25px; }
.wa__label { display: none; }
.drawer, .mcart {
inset: auto 0 0 0; width: 100%; height: auto; max-height: 90dvh;
border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px -20px rgba(6, 21, 13, .35);
}
.mcart { height: 90dvh; }
@starting-style { .drawer[open], .mcart[open] { translate: 0 100%; } }
}
@media (max-width: 760px) {
.sec { padding-block: var(--s-7); }
.site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.site-foot__col a { min-height: var(--tap); }
.site-foot__col a::after { bottom: 10px; }
.site-foot__base { padding-right: calc(var(--cut-w) - 8px); }
.site-foot__base small + small::before { content: none; }
.site-foot__up > span:first-child { display: none; }
}
@media (max-width: 420px) {
.brand__text b { font-size: 1rem; }
.brand__logo, .brand__mark { width: 58px; height: 29px; }
.mcart__btns { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
.brand__text { display: none; }
}