/* ===== Sweet Sip — shared stylesheet ===== */
/* Fonts: in each page's (an @import here chained a render-blocking request). */
:root {
--pink: #f4b8c4;
--pink-deep: #e8637f;
--mint: #a8d5ba;
--mint-deep: #6fb88f;
--cocoa: #3d2b24;
--cream: #fff9f2;
--white: #ffffff;
--warn: #d97706;
--danger: #c94f4f;
/* Darkened variants of the above for use as small TEXT on light
surfaces — the base colors above read fine as backgrounds/accents but
don't clear 4.5:1 as text at small sizes. */
/* mint/warn darkened a step (was #3d7c5d / #a85e05): on their stock-badge
tints they measured 4.31 / 4.19:1, under 4.5 for the 12.8px badge text. */
--mint-text: #356b50; /* was #3b7759: 4.28:1 on the stock badge inside the glass modal */
--pink-text: #c43a59;
--warn-text: #9e5805;
--danger-text: #a83a3a;
/* Theme tokens (a dark palette overrides these). RGB triplets are for
rgba(var(--x), alpha). ink = text/border tint, shade = shadow colour,
paper = page, surface = cards/glass. accent fills carry --on-accent text. */
--ink-rgb: 61, 43, 36;
--shade-rgb: 61, 43, 36;
--paper-rgb: 255, 249, 242;
--surface-rgb: 255, 255, 255;
--accent: #c43a59;
--accent-mint: #356b50;
--on-accent: #ffffff;
--sheen: rgba(255, 255, 255, 0.8);
--highlight: rgba(255, 255, 255, 0.6);
--font-display: 'Outfit', system-ui, sans-serif;
--font-body: 'Geist', system-ui, sans-serif;
--radius: 18px;
--shadow: 0 10px 30px rgba(var(--shade-rgb), 0.1);
--max-width: 1180px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
/* Any class that sets its own `display` (flex/grid/inline-flex/etc.) beats the
browser's default `[hidden]{display:none}` rule, since author styles always
win over user-agent styles regardless of specificity — silently un-hiding
`hidden` elements on img, .btn, .section-head and .cart-page-layout so far.
One global override, so this stops recurring one class at a time. */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh; /* iOS Safari: 100vh includes the collapsing address bar */
display: flex;
flex-direction: column;
font-family: var(--font-body);
color: var(--cocoa);
background: linear-gradient(135deg, var(--pink) 0%, var(--pink) 48%, var(--mint) 52%, var(--mint) 100%);
background-attachment: fixed;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.site-header, .site-footer, .tab-bar { flex-shrink: 0; }
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
font-family: var(--font-display);
margin: 0 0 0.4em;
line-height: 1.15;
font-weight: 600;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
/* Even line lengths, no one-word last lines. Not on h1: the hero headline's
breaks are deliberately left as they are. */
h2, h3 { text-wrap: balance; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
.container {
max-width: var(--max-width);
margin: 0 auto;
/* viewport-fit=cover: keep content clear of the notch in phone landscape */
padding-left: max(24px, env(safe-area-inset-left));
padding-right: max(24px, env(safe-area-inset-right));
}
section { padding: 72px 0; }
@media (max-width: 640px) {
section { padding: 48px 0; }
}
/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--cocoa);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ===== Buttons ===== */
.btn {
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
border: none;
border-radius: 999px;
padding: 14px 28px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
/* Same as theme.css — admin.html doesn't load theme.css, so set it here too. */
transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-2px); }
}
/* A physical press, not just "stop lifting" — confirms the tap registered. */
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 8px 20px rgba(232, 99, 127, 0.35);
}
.btn-secondary {
background: var(--accent-mint);
color: var(--on-accent);
box-shadow: 0 8px 20px rgba(111, 184, 143, 0.35);
}
.btn-outline {
background: transparent;
color: var(--cocoa);
border: 2px solid var(--cocoa);
}
.btn[hidden] { display: none; }
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* In-flight state: the label stays in the DOM for screen readers, hidden
visually behind the spinner. Not dimmed like :disabled — the action is
running, not unavailable. */
.btn.is-loading {
position: relative;
color: transparent;
}
.btn.is-loading:disabled {
opacity: 1;
cursor: wait;
}
.btn.is-loading::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: var(--on-accent);
border-radius: 50%;
animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
/* ===== Header ===== */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(var(--paper-rgb), 0.92);
box-shadow:
0px 2px 3px -1px rgba(0, 0, 0, 0.1),
0px 1px 0px 0px rgba(25, 28, 33, 0.02),
0px 0px 0px 1px rgba(25, 28, 33, 0.08);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.site-header {
background: rgba(var(--paper-rgb), 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
}
@media (prefers-reduced-transparency: reduce) {
.site-header {
background: var(--cream);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
padding-bottom: 12px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.brand img {
height: 46px;
width: 46px;
border-radius: 12px;
object-fit: cover;
transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
}
.brand:active img { transform: scale(0.94); }
.brand span {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
color: var(--cocoa);
}
.main-nav {
display: flex;
align-items: center;
gap: 28px;
}
.main-nav a {
text-decoration: none;
font-weight: 700;
color: var(--cocoa);
position: relative;
/* 44px hit area both ways — this nav also shows on touch tablets (761px+).
"Cart" is only ~35px of text, so pad the sides and pull the margin back
in: the tap area grows, the visual spacing doesn't. */
padding: 10px 6px;
margin: 0 -6px;
min-width: 44px;
text-align: center;
}
.main-nav a.active::after {
content: '';
position: absolute;
left: 6px;
right: 6px;
bottom: 6px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--pink-deep), var(--mint-deep));
}
@media (hover: hover) and (pointer: fine) {
.main-nav a:hover::after {
content: '';
position: absolute;
left: 6px;
right: 6px;
bottom: 6px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--pink-deep), var(--mint-deep));
}
}
/* ===== Bottom tab bar (mobile only) ===== */
.tab-bar { display: none; }
.cart-badge[hidden], .fav-badge[hidden] { display: none; }
.cart-badge, .fav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--accent);
color: var(--on-accent);
font-size: 0.7rem; /* 11.2px — was 9.9px, under the 11pt legibility floor */
font-weight: 700;
line-height: 1;
margin-left: 4px;
vertical-align: middle;
}
.tab-bar .tab-icon { position: relative; display: inline-block; }
.tab-bar .tab-icon .cart-badge,
.tab-bar .tab-icon .fav-badge {
position: absolute;
top: -4px;
right: -10px;
margin-left: 0;
}
@media (max-width: 760px) {
.main-nav { display: none; }
.tab-bar {
display: flex;
position: sticky;
bottom: calc(16px + env(safe-area-inset-bottom));
margin: 0 16px calc(16px + env(safe-area-inset-bottom));
z-index: 50;
justify-content: space-around;
align-items: center;
padding: 8px;
border-radius: 28px;
background: rgba(var(--surface-rgb), 0.92);
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072);
animation: tabBarIn 400ms var(--ease-out) both;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.tab-bar {
/* 0.8, not 0.7: over the pink/mint gradient 0.7 left the active tab's
--pink-text label at ~4.4:1, just under 4.5 for 11.5px text. */
background: rgba(var(--surface-rgb), 0.8);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
}
}
@media (prefers-reduced-transparency: reduce) {
.tab-bar {
background: var(--white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.tab-bar a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
flex: 1;
padding: 6px 4px;
font-size: 0.72rem; /* 11.5px — 0.68rem was under the 11pt floor. "Saved" still fits 5-up at 360px. */
font-weight: 700;
color: rgba(var(--ink-rgb), 0.75);
transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.tab-bar a:active { transform: scale(0.92); }
.tab-bar a .tab-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 26px;
border-radius: 13px;
transition: background-color 200ms var(--ease-out);
}
.tab-bar a .tab-icon svg { width: 21px; height: 21px; }
.tab-bar a.active { color: var(--pink-text); }
.tab-bar a.active .tab-icon {
background: rgba(232, 99, 127, 0.14);
animation: tabIconPop 320ms var(--ease-out) both;
}
}
@keyframes tabBarIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes tabIconPop {
0% { transform: scale(0.8); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* ===== Scallop device (signature candy-wrapper edge) ===== */
.scallop-top,
.product-card,
.category-tile {
position: relative;
}
.scallop-top::before,
.product-card::before,
.category-tile::before {
content: '';
position: absolute;
top: -9px;
left: 0;
right: 0;
height: 14px;
background-image: radial-gradient(circle at 10px 10px, var(--white) 10px, transparent 11px);
background-size: 20px 20px;
background-repeat: repeat-x;
}
.product-card::before,
.category-tile::before {
left: var(--radius);
right: var(--radius);
background-repeat: round no-repeat;
}
/* ===== Hero ===== */
.hero {
padding: 36px 0 64px;
overflow: hidden;
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.hero h1 { color: var(--cocoa); }
.hero p.lede {
font-size: 1.15rem;
max-width: 46ch;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 8px;
}
/* Interactive 3D can (js/hero-can.js). No card background — the body gradient
shows through and the can floats over it. */
.hero-media {
animation: heroArtIn 0.7s var(--ease-out) 0.15s both;
align-self: center;
}
.hero-can {
position: relative;
width: 100%;
max-width: 520px;
aspect-ratio: 4 / 5;
margin: 0 auto;
display: grid;
place-items: center;
}
/* Ground shadow under the floating can. */
.hero-can::after {
content: '';
position: absolute;
left: 30%;
right: 30%;
bottom: 11%;
height: 5%;
background: radial-gradient(closest-side, rgba(var(--shade-rgb), 0.28), transparent);
pointer-events: none;
}
.hero-can canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 32px;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
cursor: grab;
touch-action: pan-y; /* horizontal drags spin the can, vertical swipes still scroll */
outline: none;
}
.hero-can canvas:focus-visible { box-shadow: 0 0 0 3px var(--cocoa); }
.hero-can.is-dragging canvas { cursor: grabbing; }
.hero-can.is-ready canvas { opacity: 1; }
.hero-can-fallback {
font-size: 5rem;
transition: opacity 0.3s var(--ease-out);
}
.hero-can.is-ready .hero-can-fallback { opacity: 0; }
.hero-can-hint {
position: absolute;
bottom: 2%;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.85rem;
color: var(--cocoa);
background: var(--white);
padding: 4px 14px;
border-radius: 999px;
box-shadow: var(--shadow);
opacity: 0;
transition: opacity 0.4s var(--ease-out);
pointer-events: none;
}
.hero-can.is-ready .hero-can-hint { opacity: 1; }
.hero-can.has-interacted .hero-can-hint { opacity: 0; }
.hero-can-credit {
margin: 8px 0 0;
text-align: center;
font-size: 0.75rem;
color: var(--cocoa);
}
.hero-can-credit a { color: inherit; }
.hero .container > div:first-child { animation: heroFadeUp 0.7s var(--ease-out) both; }
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroArtIn {
from { opacity: 0; transform: translateY(20px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 860px) {
.hero .container { grid-template-columns: 1fr; text-align: center; }
.hero-actions { justify-content: center; }
.hero p.lede { margin-left: auto; margin-right: auto; }
.hero-can { max-width: 380px; }
}
/* Desktop scroll scene — js/hero-can.js checks this exact query too. The hero
becomes a tall runway with a sticky 100vh stage; the canvas fills the stage's
right half out to the viewport edges, and the script moves/scales the can
inside it (oversized, half out of the bottom-right corner → settled on the
right) so the render stays sharp instead of CSS-scaling the canvas.
overflow: clip, not hidden — hidden makes .hero a scroll container and
breaks position: sticky. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
/* 70px = .site-header's 46px logo + 12px padding top and bottom. The hero is
pulled up behind the (translucent) header so the stage is pinned from the
very first pixel of scroll, and the copy sits a short gap below the header
instead of being centred in the full viewport (which pushed the buttons
to the bottom edge).
No min-height gate here — short laptop viewports (1280×720 at 150% is
~632px tall) must still get the scene. The copy fits them instead: the
gap and the h1 both scale down with vh. */
.hero {
--header-h: 70px;
height: 180vh;
margin-top: calc(-1 * var(--header-h));
padding: 0;
/* Sideways only: clipping vertically cut the price card's and dot bar's
shadows off at the hero's bottom edge, drawing a visible seam. */
overflow-x: clip;
overflow-y: visible;
}
.hero-stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: flex-start;
padding-top: calc(var(--header-h) + clamp(20px, 5vh, 64px));
}
.hero h1 { font-size: min(clamp(2.2rem, 5vw, 3.6rem), 8vh); }
/* Copy stays put; only the buttons drop. The extra gap grows with viewport
height: 8px (the original) at ≤588px tall, ~52px on the owner's 632px
laptop viewport, capped at 88px from ~668px up — so short screens never
push the buttons onto the bottom edge (a flat 8vh left 17px at 1024×600). */
.hero-actions { margin-top: clamp(8px, calc(100vh - 580px), 88px); }
.hero-stage > .container { width: 100%; }
.hero .container > div:first-child { position: relative; z-index: 1; }
/* stretch overrides the base align-self: center, which on an abspos grid item
with top+bottom insets shrinks it to content height — 0 here, all children
are abspos — and silently collapses the canvas. */
.hero-media { position: absolute; inset: 0 0 0 50%; align-self: stretch; }
.hero-can {
position: absolute;
inset: 0;
max-width: none;
aspect-ratio: auto;
margin: 0;
}
.hero-can canvas { border-radius: 0; }
.hero-can::after { display: none; } /* static ground shadow can't follow a moving can */
.hero-can:not(.is-settled) .hero-can-hint { opacity: 0; }
.hero-can-hint { bottom: 48px; } /* clear of the credit line pinned at the stage bottom */
.hero-can-credit {
position: absolute;
left: 16px;
bottom: 12px;
margin: 0;
text-align: left;
z-index: 1;
}
}
@media (max-width: 640px) {
.hero { padding: 24px 0 48px; }
}
/* ===== Section headings ===== */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.section-head p { margin: 0; }
/* ===== Product grid & cards ===== */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}
.product-card {
position: relative;
background: var(--white);
border-radius: var(--radius);
padding: 26px 22px 22px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 10px;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Heart toggle — saves a product to favorites.html for later. */
.fav-btn {
position: absolute;
/* 14px, not 10: the saved state's tinted disc crowded the card's rounded,
scalloped corner. */
top: 14px;
right: 14px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: rgba(var(--ink-rgb), 0.65); /* ~3.9:1 on white; 0.5 was ~2.9:1, under the 3:1 icon minimum */
cursor: pointer;
transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.fav-btn span { display: flex; }
.fav-btn .fav-on,
.fav-btn.is-fav .fav-off { display: none; }
.fav-btn.is-fav {
color: var(--pink-text);
background: rgba(232, 99, 127, 0.12);
}
.fav-btn.is-fav .fav-on { display: flex; }
.fav-btn:active { transform: scale(0.88); }
.fav-btn:focus-visible {
outline: 2px solid var(--pink-text);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.fav-btn:hover { color: var(--pink-text); background: rgba(232, 99, 127, 0.12); }
}
/* In the product modal the heart sits inline with the actions, not pinned. */
.modal-actions .fav-btn { position: static; }
@media (hover: hover) and (pointer: fine) {
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(var(--shade-rgb), 0.16);
}
}
.product-card .emoji {
font-size: 2.6rem;
background: var(--cream);
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.product-card .product-photo {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: calc(var(--radius) - 6px);
background: var(--cream);
}
.product-card h3 { margin-bottom: 0; }
.product-card .desc {
color: rgba(var(--ink-rgb), 0.75);
font-size: 0.94rem;
margin: 0;
flex-grow: 1;
}
.product-card .price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
/* The card's Add/View buttons are styled compact inline (shop.js, home.js,
favorites.js) — keep them compact but at the 44px tap minimum. */
.product-card .price-row .btn { min-height: 44px; }
/* Touch only: on a mouse the hover lift already gives feedback, and a press
scale would fight it. */
@media (hover: none) {
.product-card:active, .category-tile:active { transform: scale(0.98); }
}
.price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
}
.stock-badge {
font-size: 0.8rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
width: fit-content;
}
.stock-badge.in { background: rgba(111, 184, 143, 0.18); color: var(--mint-text); }
.stock-badge.low { background: rgba(217, 119, 6, 0.15); color: var(--warn-text); }
.stock-badge.out { background: rgba(201, 79, 79, 0.15); color: var(--danger-text); }
/* Visually hidden, still announced by screen readers. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Loading placeholders shaped like a product card (icon, title, two lines of
description, price) — the grid's innerHTML replaces them once data lands.
Reduced motion: the global rule stops the shimmer after one frame, leaving
a still placeholder. */
.skeleton-card {
position: relative;
min-height: 320px;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
--bar: rgba(var(--ink-rgb), 0.07);
background:
radial-gradient(circle at 54px 58px, var(--bar) 32px, transparent 33px),
linear-gradient(var(--bar), var(--bar)) 22px 112px / 62% 20px no-repeat,
linear-gradient(var(--bar), var(--bar)) 22px 148px / 82% 12px no-repeat,
linear-gradient(var(--bar), var(--bar)) 22px 170px / 66% 12px no-repeat,
linear-gradient(var(--bar), var(--bar)) 22px calc(100% - 36px) / 34% 22px no-repeat,
var(--white);
}
.skeleton-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, var(--sheen) 50%, transparent 80%);
transform: translateX(-100%);
animation: skeletonShimmer 1.4s linear infinite;
}
@keyframes skeletonShimmer { to { transform: translateX(100%); } }
/* ===== Dynamic Island (action confirmation pill) ===== */
.island {
position: fixed;
top: 14px;
left: 50%;
z-index: 110;
display: flex;
align-items: center;
gap: 9px;
max-width: calc(100vw - 32px);
padding: 11px 22px;
border-radius: 999px;
background: var(--cocoa);
color: var(--white);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.92rem;
line-height: 1;
box-shadow: 0 14px 34px rgba(var(--shade-rgb), 0.34);
pointer-events: none;
opacity: 0;
transform: translateX(-50%) translateY(-20px) scale(0.68);
transition:
opacity 240ms var(--ease-out),
transform 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.island.open {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
.island .island-icon { display: flex; }
.island svg { display: block; }
.island-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Below 760px the header's nav collapses to the tab bar, leaving only the
wordmark up top — which a centered island would sit right on. Drop it
clear of the header instead. */
@media (max-width: 760px) {
.island { top: 82px; }
}
/* ===== Category tiles (home) ===== */
.category-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.category-tile {
text-decoration: none;
background: var(--white);
border-radius: var(--radius);
padding: 32px 24px;
text-align: center;
box-shadow: var(--shadow);
transition: transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.category-tile:hover { transform: translateY(-4px); }
}
.category-tile .emoji { font-size: 2.8rem; display: block; margin-bottom: 10px; }
.category-tile h3 { color: var(--cocoa); }
@media (max-width: 700px) {
.category-tiles { grid-template-columns: 1fr; }
}
/* ===== Shop: filters ===== */
.filter-bar {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.filter-btn {
font-family: var(--font-display);
font-weight: 600;
border: 2px solid var(--cocoa);
background: transparent;
color: var(--cocoa);
padding: 10px 22px;
min-height: 44px;
border-radius: 999px;
cursor: pointer;
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.filter-btn:active { transform: scale(0.96); }
.filter-btn.active {
background: var(--cocoa);
color: var(--cream);
}
/* ===== Cart ===== */
.cart-page-layout {
display: grid;
/* minmax(0, …): the Turnstile iframe's fixed 300px must not widen the
column past the screen. 364px leaves it 300px inside the aside. */
grid-template-columns: minmax(0, 1fr) 364px;
gap: 36px;
align-items: start;
}
/* Empty bag: no checkout column, the message card spans the row. */
.cart-page-layout.is-empty { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
.cart-page-layout { grid-template-columns: minmax(0, 1fr); }
}
.cart-panel {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
min-width: 0;
}
/* Only the checkout aside follows the scroll, and only beside the bag —
stacked on phones, a sticky panel slid over the bag lines. */
@media (min-width: 961px) {
#checkout-panel { position: sticky; top: 96px; }
}
/* Bag line thumbnail: the same photo-or-icon visual as the product cards,
so people recognise what they're buying (every reference bag does this). */
.cart-thumb { flex: 0 0 48px; }
.cart-thumb .emoji,
.cart-thumb .product-photo {
width: 48px;
height: 48px;
margin: 0;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream);
color: var(--cocoa);
font-size: 1.5rem;
object-fit: cover;
}
.cart-thumb svg { width: 24px; height: 24px; }
.cart-item-name { flex: 1; min-width: 0; }
/* Phones: thumbnail + stepper squeezed names to three lines. Controls drop
to a second row, lined up under the name (48px thumb + 10px gap). */
@media (max-width: 480px) {
.cart-item { flex-wrap: wrap; }
.cart-item-name { flex-basis: calc(100% - 58px); }
.cart-item .qty-controls { margin-left: 58px; }
}
/* Line price under the name — a bag that lists names only made people add up
the subtotal in their heads. */
.cart-item-name { display: flex; flex-direction: column; gap: 2px; }
.cart-item-price { font-size: 0.85rem; color: rgba(var(--ink-rgb), 0.75); font-variant-numeric: tabular-nums; }
.cart-empty { color: rgba(var(--ink-rgb), 0.75); font-size: 0.95rem; }
.cart-item {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
font-size: 0.92rem;
}
.cart-item .qty-controls {
display: flex;
align-items: center;
gap: 6px;
}
/* − n + is the same cocoa pill as the shop stepper (theme.css .qty-stepper);
remove is a quiet 44px icon button set apart from it, so a thumb aiming for
minus doesn't land on remove. */
.cart-item .remove-item {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
background: transparent;
color: rgba(var(--ink-rgb), 0.75);
cursor: pointer;
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.cart-item .remove-item:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
.cart-item .remove-item:hover { color: var(--danger-text); background: rgba(201, 79, 79, 0.1); }
}
.qty-step svg, .remove-item svg, .modal-close svg { display: block; margin: auto; }
/* Product name doubles as the card's keyboard entry point to the quick view
(the whole card is clickable for pointers). Looks like plain heading text. */
.card-open {
all: unset;
display: inline-block;
/* 44px+ tap height without moving the heading: padding out, margin back. */
padding: 11px 0;
margin: -11px 0;
cursor: pointer;
border-radius: 6px;
}
.card-open:focus-visible { outline: 3px solid var(--cocoa); outline-offset: 3px; }
.cart-total {
display: flex;
justify-content: space-between;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
margin: 16px 0;
}
.checkout-form { display: none; flex-direction: column; gap: 12px; margin-top: 16px; }
.checkout-form.open { display: flex; }
.checkout-form label {
font-size: 0.85rem;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-form input,
.checkout-form select,
.checkout-form textarea {
font-family: var(--font-body);
font-size: 1rem; /* iOS Safari zooms the page into any field under 16px */
padding: 10px 12px;
border-radius: 10px;
border: 1.5px solid rgba(var(--ink-rgb), 0.5); /* ≥3:1 against the panel (0.25 was 1.6:1) */
background: var(--cream);
}
/* padding + line box came to 43px; radios keep their native size (their
whole option card is the tap target). */
.checkout-form input:not([type="radio"]):not([type="checkbox"]),
.checkout-form select { min-height: 44px; }
.payment-options {
display: flex;
gap: 10px;
}
.payment-options label {
flex: 1;
border: 2px solid rgba(var(--ink-rgb), 0.2);
border-radius: 12px;
padding: 10px;
min-height: 44px;
text-align: center;
cursor: pointer;
font-size: 0.85rem;
font-weight: 700;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: flex;
text-align: left;
}
/* Shipping options: name and price on their own lines, stacked full-width
(side by side, the long names wrapped to four centred lines). */
#shipping-tier-options { flex-direction: column; }
.option-text { display: flex; flex-direction: column; gap: 2px; }
.option-price { font-weight: 500; color: rgba(var(--ink-rgb), 0.75); font-variant-numeric: tabular-nums; }
/* Radio groups are real fieldsets (grouped for screen readers); keep the old look. */
.option-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.option-group legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 0.85rem; }
/* Order summary: three aligned rows instead of one small grey sentence. */
.summary-heading { font-size: 1.15rem; margin: 0 0 12px; }
.summary-rows { margin: 0; display: grid; gap: 6px; font-size: 0.95rem; }
.summary-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.summary-rows dt { color: rgba(var(--ink-rgb), 0.75); }
.summary-rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.cart-total { border-top: 1px solid rgba(var(--ink-rgb), 0.16); padding-top: 12px; }
.payment-options input { accent-color: var(--pink-deep); }
.checkout-note {
font-size: 0.82rem;
color: rgba(var(--ink-rgb), 0.75);
margin-top: -4px;
}
/* Cloudflare only themes the widget's own iframe content (light/dark) — the
surrounding chrome is what we can actually match to the rest of the form. */
.turnstile-wrap {
border-radius: 10px;
overflow: hidden;
border: 1.5px solid rgba(var(--ink-rgb), 0.5);
line-height: 0; /* the iframe is inline: no empty baseline band under it */
}
/* Phones: the widget needs 300px, more than the padded panel has. Let it run
into the panel's side padding instead of clipping. */
@media (max-width: 480px) {
.turnstile-wrap { margin-inline: -24px; border-radius: 0; border-inline: 0; }
}
.order-status-msg {
border-radius: 12px;
padding: 12px 14px;
font-size: 0.9rem;
margin-top: 12px;
display: none;
}
.order-status-msg.show { display: block; }
.order-status-msg.success { background: rgba(111, 184, 143, 0.18); color: var(--mint-text); }
.order-status-msg.error { background: rgba(201, 79, 79, 0.15); color: var(--danger-text); }
.order-confirmation {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 40px 32px;
text-align: center;
max-width: 520px;
margin: 0 auto 32px;
}
.order-confirmation[hidden] { display: none; }
/* The one delight moment: an order just went through (rare, once per order).
Circle settles in, then the tick wipes in left to right (clip-path — the
Phosphor tick is a filled shape, so there's no stroke to draw). Reduced
motion jumps to the end state via the global rule (fill-mode keeps it). */
.order-confirmation:not([hidden]) .confirmation-check {
animation: checkIn 320ms var(--ease-out) both;
}
.order-confirmation:not([hidden]) .confirmation-check svg {
clip-path: inset(0 100% 0 0);
animation: checkDraw 360ms var(--ease-out) 200ms forwards;
}
@keyframes checkIn { from { opacity: 0; transform: scale(0.9); } }
@keyframes checkDraw { to { clip-path: inset(0 0 0 0); } }
.confirmation-check {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(111, 184, 143, 0.18);
color: var(--mint-text);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.order-confirmation h2 { margin-bottom: 8px; }
.confirmation-summary {
background: var(--cream);
border-radius: 12px;
padding: 16px 18px;
margin: 20px 0;
text-align: left;
font-size: 0.92rem;
}
.confirmation-summary div + div { margin-top: 8px; }
.confirmation-summary .summary-total {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(var(--ink-rgb), 0.12);
font-weight: 700;
font-family: var(--font-display);
}
/* ===== About / timeline ===== */
.timeline {
display: flex;
flex-direction: column;
gap: 28px;
border-left: 3px solid var(--cocoa);
margin-left: 12px;
padding-left: 28px;
}
.timeline-item { position: relative; }
.timeline-item::before {
/* A plain dot on the rail — the "Month N" label already numbers the step. */
content: '';
position: absolute;
left: -37px;
top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
}
.timeline-item h3 { margin-bottom: 4px; }
.timeline-item .when {
font-weight: 700;
color: var(--cocoa);
font-size: 0.85rem;
margin-bottom: 6px;
display: block;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 12px;
}
@media (max-width: 700px) {
.values-grid { grid-template-columns: 1fr; }
}
.value-card {
background: var(--white);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.value-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(var(--shade-rgb), 0.16);
}
}
/* ===== Admin ===== */
/* width: auto margins on a flex item (body is a flex column) cancel stretch,
so without this sized to the orders table and pushed the whole page
sideways in phone landscape instead of letting .table-wrap scroll. */
.admin-shell { min-height: 70vh; width: 100%; padding-block: 24px; }
.login-card {
max-width: 380px;
margin: 60px auto;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 32px;
}
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label {
font-size: 0.85rem;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 6px;
}
.login-card input {
font-family: var(--font-body);
font-size: 1rem; /* default 13.3px triggers iOS zoom-on-focus */
min-height: 44px; /* padding + line box came to 43px */
padding: 10px 12px;
border-radius: 10px;
border: 1.5px solid rgba(var(--ink-rgb), 0.25);
background: var(--cream); /* same field fill as checkout — no grey UA field in dark mode */
color: var(--cocoa);
}
.dashboard { display: none; flex-direction: column; gap: 40px; }
.dashboard.open { display: flex; }
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.data-table th, .data-table td {
text-align: left;
padding: 12px 14px;
font-size: 0.9rem;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}
.data-table th {
background: var(--cream);
font-family: var(--font-display);
font-weight: 600;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table input[type="number"] {
width: 70px;
padding: 6px 8px;
border-radius: 8px;
border: 1.5px solid rgba(var(--ink-rgb), 0.25);
}
.data-table input,
.data-table select { background: var(--cream); color: var(--cocoa); }
.data-table select {
padding: 6px 8px;
border-radius: 8px;
border: 1.5px solid rgba(var(--ink-rgb), 0.25);
font-family: var(--font-body);
}
.table-wrap { overflow-x: auto; }
/* Touch tablets get the wide table (>700px) — keep its controls tappable. */
@media (pointer: coarse) {
.data-table input, .data-table select { min-height: 44px; font-size: 1rem; }
}
.admin-thumb {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 8px;
vertical-align: middle;
margin-right: 6px;
}
.image-preview {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px;
background: var(--cream);
}
.image-preview[hidden] { display: none; }
/* Phones in landscape (~844–932px wide, <500px tall) get the cards too — the
8-column table is unusable there, and its small inputs made iOS zoom. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
.table-wrap { overflow-x: visible; }
.data-table, .data-table tr, .data-table td { display: block; width: 100%; }
.data-table tbody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 16px;
align-items: start;
}
.data-table thead { display: none; }
.data-table { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.data-table tr {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px 0;
}
.data-table td {
padding: 8px 14px;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
overflow-wrap: anywhere; /* long emails/addresses stay inside the card */
}
.data-table td:not([data-label])::before { content: none; }
.data-table td .btn { min-height: 44px; padding: 10px 20px; }
.data-table tr td:last-child { border-bottom: none; }
.data-table td::before {
content: attr(data-label);
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.75rem;
color: rgba(var(--ink-rgb), 0.75); /* 0.6 was ~4:1, under 4.5:1 for 12px text */
margin-bottom: 2px;
}
.data-table input[type="number"] { width: 100%; }
/* Admin is managed from a phone: full tap height, and 16px so iOS doesn't zoom. */
.data-table input, .data-table select { min-height: 44px; font-size: 1rem; }
}
.form-error {
color: var(--danger-text);
font-size: 0.85rem;
min-height: 1.2em;
}
/* ===== Scroll reveal ===== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in-view {
opacity: 1;
transform: none;
}
.category-tiles .category-tile:nth-child(2) { transition-delay: 0.08s; }
.category-tiles .category-tile:nth-child(3) { transition-delay: 0.16s; }
.values-grid .value-card:nth-child(2) { transition-delay: 0.08s; }
.values-grid .value-card:nth-child(3) { transition-delay: 0.16s; }
.timeline-item:nth-child(2) { transition-delay: 0.08s; }
.timeline-item:nth-child(3) { transition-delay: 0.16s; }
.timeline-item:nth-child(4) { transition-delay: 0.24s; }
.timeline-item:nth-child(5) { transition-delay: 0.32s; }
/* ===== Feedback pulses ===== */
/* Badge pulse on add-to-bag lives in main.js (WAAPI, interruptible). */
/* ===== Product modal ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(var(--shade-rgb), 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease-out);
}
.modal-overlay.open {
opacity: 1;
pointer-events: auto;
}
.modal-card {
background: rgba(var(--surface-rgb), 0.92);
border-radius: var(--radius);
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12),
inset 0 1px 0 var(--highlight);
max-width: 460px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 32px;
position: relative;
transform: scale(0.92) translateY(12px);
opacity: 0;
transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.modal-card {
background: rgba(var(--surface-rgb), 0.9);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
}
@media (prefers-reduced-transparency: reduce) {
.modal-card {
background: var(--white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.modal-overlay.open .modal-card {
transform: scale(1) translateY(0);
opacity: 1;
}
.modal-close {
color: var(--cocoa);
position: absolute;
top: 16px;
right: 16px;
background: var(--cream);
border: none;
border-radius: 50%;
/* 44px tap target — on touch this is the primary way out of the modal. */
width: 44px;
height: 44px;
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
}
.modal-emoji {
font-size: 4.5rem;
background: var(--cream);
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.modal-emoji.has-photo {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
}
.modal-emoji.has-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.modal-card h2 { text-align: center; }
.modal-card .modal-desc { text-align: center; color: rgba(var(--ink-rgb), 0.75); }
.modal-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 14px 0 20px;
flex-wrap: wrap;
}
.modal-actions { display: flex; justify-content: center; align-items: center; gap: 12px; }
/* Keeps a phrase on one line, e.g. the footer's "hand-picked" (it broke at the hyphen). */
.nowrap { white-space: nowrap; }
/* ===== Footer ===== */
.site-footer {
background: var(--white);
color: var(--cocoa);
padding: 48px 0 40px;
border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
.site-footer .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.site-footer a { text-decoration: none; color: var(--cocoa); }
/* Stacked footer links are ~21px tall — too tight to tap reliably on touch.
pointer: coarse catches touch tablets wider than the phone breakpoint too,
while mouse users keep the compact desktop footer. */
@media (max-width: 760px), (pointer: coarse) {
.site-footer p a { display: inline-block; padding: 10px 0; }
/* Links inside the credit sentence are exempt from target size (WCAG 2.5.8);
padded, they spread the lines ~40px apart. */
.site-footer p.footer-credit a { display: inline; padding: 0; }
}
.site-footer .brand span { color: var(--cocoa); }
.footer-bottom {
text-align: center;
font-size: 0.82rem;
color: rgba(var(--ink-rgb), 0.75);
margin-top: 36px;
}