, so we target the inner button via
the descendant selector. */
}
.snaps-add-fab button {
width: 3rem;
height: 3rem;
border-radius: 9999px;
color: oklch(var(--honey-foreground));
background: oklch(var(--honey));
border: 1.5px solid oklch(var(--honey-ring) / 0.7);
/* honey glow + soft page shadow so it floats above the scrapbook */
box-shadow: 0 0 0 3px oklch(var(--honey) / 0.18), 0 0 14px 2px
oklch(var(--honey) / 0.35), var(--memory-shadow);
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.snaps-add-fab button:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 0 0 4px oklch(var(--honey) / 0.22), 0 0 18px 4px
oklch(var(--honey) / 0.45), var(--memory-shadow-lift);
}
.snaps-add-fab button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px oklch(var(--honey) / 0.2), 0 0 0 5px
oklch(var(--honey-ring)), 0 0 18px 4px oklch(var(--honey) / 0.45),
var(--memory-shadow-lift);
}
.snaps-add-fab button:active {
transform: translateY(0) scale(0.97);
}
/* Hide the default lucide ImagePlus icon — we draw a hand-drawn plus
instead so the FAB reads as a scrapbook "add" mark, not a generic
photo-upload glyph. */
.snaps-add-fab button svg {
display: none;
}
/* Hand-drawn plus — a CSS-drawn plus via two pseudo-element bars, slightly
rotated and given a hand-drawn weight so it matches the Caveat
handwritten language. Centred in the circular button. */
.snaps-add-fab button::before,
.snaps-add-fab button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: oklch(var(--honey-foreground));
border-radius: 9999px;
pointer-events: none;
}
.snaps-add-fab button::before {
/* horizontal bar */
width: 1.1rem;
height: 0.22rem;
transform: translate(-50%, -50%) rotate(-3deg);
}
.snaps-add-fab button::after {
/* vertical bar */
width: 0.22rem;
height: 1.1rem;
transform: translate(-50%, -50%) rotate(-3deg);
}
/* Dark theme — the honey tokens already adapt, but the glow reads better
with a slightly stronger ring so the FAB stays visible on the dark
leafy background. */
.dark .snaps-add-fab button {
box-shadow: 0 0 0 3px oklch(var(--honey) / 0.22), 0 0 16px 3px
oklch(var(--honey) / 0.4), var(--memory-shadow);
}
.dark .snaps-add-fab button:hover {
box-shadow: 0 0 0 4px oklch(var(--honey) / 0.28), 0 0 20px 5px
oklch(var(--honey) / 0.5), var(--memory-shadow-lift);
}
/* Reduced motion — disable the glow pulse, hover lift, and active scale so
the FAB is a calm static honey circle. The honey background and page
shadow remain so the affordance is still clear. */
@media (prefers-reduced-motion: reduce) {
.snaps-month-year,
.snaps-month-year:hover,
.snaps-month-year__chevron,
.snaps-add-fab button,
.snaps-add-fab button:hover,
.snaps-add-fab button:active {
transition: none;
transform: rotate(-1deg);
}
.snaps-add-fab button,
.snaps-add-fab button:hover {
transform: none;
}
.snaps-month-year:hover {
transform: rotate(-1deg);
}
}
/* ── Happy Snaps — chronological counter ─────────────────────────────────
A very small, understated black handwritten label that sits directly
above the month/year selector in the control row. Shows the featured
photo's chronological position within the selected month (earliest = 1)
and the total count of snaps in that month, e.g. "1 of 6 of August 2026".
The text is near-black ink on the scrapbook page, in the Caveat
handwritten font, slightly tilted to match the hand-pasted label
language of the month/year selector. No background, no border, no
shadow — just a quiet ink inscription. Centred to the control row.
No animation; the value simply updates as the user cycles. */
.snaps-counter {
margin: 0;
padding: 0 0.5rem;
font-family: var(--font-handwritten);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
/* near-black ink — reads as a handwritten pen mark on the scrapbook page,
consistent with the date overlay's black text. Uses the memory-page
foreground token so it adapts to the dark theme legibly. */
color: oklch(var(--memory-page-foreground));
text-align: center;
/* slight hand-pasted tilt to match the month/year selector's -1deg, but a
touch less so the counter reads as a quieter, secondary inscription. */
transform: rotate(-0.6deg);
/* keep the counter on its own line above the control row */
align-self: center;
}
/* ── Happy Snaps — full-screen featured-photo viewer ──────────────────────
A single-photo full-screen viewer opened by a genuine tap on the large
featured photo's main area (NOT a swipe, NOT an arrow, NOT a small grid
photo). Shows the currently-featured photo centered, as large as fits the
viewport (object-fit: contain), on a dark backdrop — with the SAME
handwritten date overlay (.snap-date-overlay) the featured photo uses, so
the date reads exactly like "August 7th, 2026" with the same Caveat font,
black text, and white text-shadow glow.
Closing: a visible X close control (top-right), Escape key, and clicking
the backdrop. Closing only unmounts the viewer — featuredIndex and the
derived month are owned by the parent and are NOT touched, so the same
photo stays featured and the same month stays selected.
No prev/next arrows, no swipe, no delete — the viewer is for viewing the
single featured photo at a larger size only. Built inline in HappySnaps.tsx
(NOT imported from GrowthDiaryViewer, which has navigation/delete that are
not wanted here). The overlay structure references GrowthDiaryViewer's
fixed inset-0 z-50 bg-black/90 backdrop-blur-sm pattern. All animations
honor prefers-reduced-motion. */
/* The viewer overlay — fixed full-screen, dark backdrop, sits above all
page content. The entrance is a short fade + tiny scale so it arrives
gently; disabled under prefers-reduced-motion. */
.snaps-viewer {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
background: oklch(0.15 0.02 145 / 0.92);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: snaps-viewer-in 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes snaps-viewer-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* The backdrop close target — fills the overlay so a click anywhere outside
the photo closes the viewer. Sits behind the photo + close button. */
.snaps-viewer__backdrop {
position: absolute;
inset: 0;
cursor: default;
border: none;
background: transparent;
padding: 0;
}
/* The photo stage — holds the photo + its date overlay, centered. Taps on
the stage are stopped so they don't bubble to the backdrop close target. */
.snaps-viewer__stage {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1rem;
}
/* The photo — as large as fits the viewport (object-fit: contain), centered.
A relative wrapper so the date overlay can position against the photo's
rendered box rather than the full stage. */
.snaps-viewer__photo-wrap {
position: relative;
display: inline-block;
max-width: 100%;
max-height: 100%;
}
.snaps-viewer__photo {
display: block;
max-width: 100vw;
max-height: 100vh;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
border-radius: 6px;
box-shadow: 0 12px 48px -8px oklch(0 0 0 / 0.7);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* The date overlay inside the viewer — reuses the EXACT .snap-date-overlay
class (Caveat font, black text, white text-shadow glow) so the date reads
exactly like the featured photo's date. This rule only re-anchors it to
the viewer's photo wrapper (bottom-right of the photo, not the stage) and
keeps pointer-events:none so it never blocks the backdrop close. The
font-size/colour/shadow all come from .snap-date-overlay above. */
.snaps-viewer__photo-wrap .snap-date-overlay {
right: 0.75rem;
bottom: 0.75rem;
}
/* The close button — top-right, a visible X in a translucent circle. High
contrast against any photo. Sits above the photo + backdrop. */
.snaps-viewer__close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border-radius: 9999px;
color: oklch(0.99 0.01 110);
background: oklch(0.15 0.02 145 / 0.55);
border: 1.5px solid oklch(0.99 0.01 110 / 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: background 0.18s ease-out, transform 0.18s ease-out;
}
.snaps-viewer__close:hover {
background: oklch(0.15 0.02 145 / 0.75);
transform: scale(1.05);
}
.snaps-viewer__close:focus-visible {
outline: none;
box-shadow: 0 0 0 2px oklch(var(--honey-ring));
}
.snaps-viewer__close:active {
transform: scale(0.96);
}
/* Reduced motion — the viewer appears instantly (no fade) and the close
button has no hover/active transform. The dark backdrop, photo, date
overlay, and close affordance all remain fully visible and usable. */
@media (prefers-reduced-motion: reduce) {
.snaps-viewer {
animation: none;
}
.snaps-viewer__close,
.snaps-viewer__close:hover,
.snaps-viewer__close:active {
transition: none;
transform: none;
}
}
/* ── Garden Style — rustic wooden garden sign / plank ──────────────────────
A single tappable section sitting between the Jobs deck and the Happy
Snaps scrapbook on Home. It is a visual placeholder for now (no image
Rolodex / selector inside, no backend calls, no navigation target yet)
but reads as a handcrafted WOODEN GARDEN SIGN that lives inside the
garden scene — warm timber, slightly imperfect edges, visible grain,
and the words "Garden Style" + "Choose your world" plus a three-line
menu mark and a trailing chevron all BURNED / hand-CARVED into the wood.
No glass, no honey, no shimmer. The whole plank is the tap target.
Pattern: each domain owns a token block + utility classes in index.css
(Happy Snaps → --honey/--memory-* + .snaps-*; identify-pill → --pill-*
+ .identify-pill). Garden Style follows the same convention with
--garden-style-* tokens above and .garden-style-* classes here. */
/* Section shell — NO background, NO borders, NO padding band. The wooden
sign PNG sits directly over the Home garden background with no visible
rectangle or frame behind or around it. Only the horizontal padding
(applied via the section's utility classes in Home.tsx) remains so the
image aligns with the page's content edges; the vertical rhythm is
carried by the image itself. */
.garden-style-section {
background: none;
border-top: none;
border-bottom: none;
}
/* The button — NO plank styling. No brown gradient, no padding, no border,
no rounded corners, no ::before wash, no grain. The button is a
transparent wrapper whose only content is the sign
![]()
, so nothing
creates a rectangle or frame behind or around the image. The whole sign
remains the tap target. A focus-visible ring is preserved for keyboard
accessibility.
Interaction cues (apply to the wrapper, NEVER the frozen
![]()
):
• A very gentle, slow side-to-side sway — a couple of degrees either
way, ease-in-out, infinite — so the wooden sign reads as softly
moving in a breeze. Not bouncy, fast, or cartoonish.
• A soft, slightly stronger drop shadow around and underneath the
whole sign so it separates from the garden background behind it and
sits slightly forward in 3D space.
• A subtle press: on :active the whole sign scales down / presses
backward briefly, then returns as the Garden Style page opens. */
.garden-style-button {
display: block;
width: 100%;
padding: 0;
border: none;
background: none;
/* Soft drop shadow around and underneath the entire sign so it lifts off
whatever Garden Style background is behind it and reads as sitting
slightly forward. Two layers: a tight ambient contact + a longer, very
soft cast beneath. */
box-shadow: 0 1px 2px oklch(0.32 0.02 60 / 0.28), 0 10px 22px -6px
oklch(0.28 0.03 60 / 0.34);
border-radius: 0;
color: inherit;
font-family: inherit;
text-align: left;
cursor: pointer;
overflow: visible;
isolation: auto;
/* transform is shared by the sway animation, the hover lift, and the
press — keep the transition snappy for hover/press while the sway runs
on its own timeline via animation. */
transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow
0.18s ease;
will-change: transform;
/* Gentle, slow breeze sway. ~6s, ease-in-out, infinite. Origin at the
top centre so the sign pivots like it is hung from a post. */
animation: garden-style-sway 6s ease-in-out infinite;
transform-origin: 50% 8%;
}
.garden-style-button:hover {
transform: translateY(-2px);
}
.garden-style-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px oklch(var(--garden-style-ring) / 0.55), 0 1px 2px
oklch(0.32 0.02 60 / 0.28), 0 10px 22px -6px oklch(0.28 0.03 60 / 0.34);
border-radius: 0.5rem;
}
/* Press: the whole sign briefly scales down / presses backward slightly,
then returns as the Garden Style page opens. Feels like physically
pressing a button. Slightly stronger than the previous tiny settle so
the cue reads, still subtle. */
.garden-style-button:active {
transform: translateY(1px) scale(0.972);
}
/* Gentle breeze sway for the wooden sign — a couple of degrees either way,
ease-in-out, infinite. Defined here alongside the other domain @keyframes
(e.g. snaps-sunflower-sway) per project convention, NOT in
tailwind.config.js. Origin is set on .garden-style-button so the sign
pivots from near its top, like a real plank hung from a post. */
@keyframes garden-style-sway {
0%,
100% {
transform: rotate(-1.5deg);
}
50% {
transform: rotate(1.5deg);
}
}
/* The sign image — the uploaded PNG has a SOLID BLACK background.
`mix-blend-mode: screen` drops the black out: black (0,0,0) screens to
transparent against whatever paints behind, so only the wooden sign and
its vines remain visible over the garden background. The image scales
proportionally (display:block, width:100%, height:auto) so it never
stretches, squashes, or crops. `pointer-events` stays auto so the whole
sign remains tappable via the parent