`, which reserves its own gutter. Applying this * rule globally there reserved a SECOND, never-painted gutter on classic * (non-overlay) scrollbar platforms (Windows / Linux) — a ~15px dead band. * Scoping it to the body-scrolled branch leaves exactly one gutter per * branch. */ html[data-scroll="body"] { scrollbar-gutter: stable; } body { @apply bg-background text-foreground; } p { color: var(--foreground); } } /* * `.no-scrollbar` — keeps a container scrollable but hides the visible * bar. Used by the mobile section strips in `` and * `` so 13 admin / 10 settings entries can swipe * horizontally without painting an always-on scrollbar at the top of * every admin/settings page (a recurring maintainer complaint — most * recently mistaken for a `/admin/api-tokens` table scrollbar in * v1.4.16/17 because the strip sits right above the api-tokens card). * * Standard `scrollbar-width: none` (Firefox) + `::-webkit-scrollbar` * (Chromium/WebKit) covers every browser HealthLog targets. Touch * scrolling, keyboard arrow scrolling, and `Tab` focus traversal all * keep working — this is a purely cosmetic suppression, not an * `overflow: hidden`. */ .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* ── Insight card animations ─────────────────────── */ @keyframes insight-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-insight-in { animation: insight-fade-in 0.4s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .animate-insight-in { animation: none; } } /* ── v1.4.20 phase B1 — Insights redesign hero strip ─────────────── */ /* * `.hero-gradient` — purple → pink linear gradient at low opacity, for * the new band on /insights. Sits above `var(--card)` so * the band reads as a richer surface than the card it overlays. * * Matches the design handoff (`prototype/artboard-fullpage.jsx → * BriefingHero` background) — purple/pink at ~12% opacity over the * card colour, with a subtle border-tint to anchor it on the dark bg. */ .hero-gradient { background: linear-gradient( 135deg, color-mix(in srgb, var(--dracula-purple) 18%, var(--card)) 0%, color-mix(in srgb, var(--dracula-pink) 12%, var(--card)) 100% ); border: 1px solid color-mix(in srgb, var(--dracula-purple) 24%, transparent); } /* * `.glow-purple` — soft purple aura behind the hero card, painted via * `box-shadow` so it stays GPU-cheap and respects the existing card * border radius without an extra wrapper element. */ .glow-purple { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dracula-purple) 16%, transparent), 0 18px 48px -28px color-mix(in srgb, var(--dracula-purple) 50%, transparent); } /* * `.wellness-tile` — the v1.13.x premium-redesign wellness-tile surface. * * Replaces the old saturated `.score-tile-gradient` dark slab. Mirrors the * gentle, calm `.hero-gradient` the maintainer loves: a LOW-opacity mix of * the metric's `--tile-hue` over the *theme* `var(--card)` (not the fixed * dark bg), so the surface stays luminous in both Dracula dark + Alucard * light. The mix is even softer than the hero's 18/12 (14/7) so a *row* of * five tinted tiles never overwhelms the page. Each `RingTile` sets * `--tile-hue` inline per metric; the per-metric `hue` arc on the ring is * the only saturated element, letting the dial be the hero. * * Text rides the theme `--foreground` (dark in light mode, light in dark * mode), so AA is trivial over the `--card`-based surface in both themes — * the old white-pinned copy + white arc are gone. */ .wellness-tile { --tile-hue: var(--dracula-purple); position: relative; overflow: hidden; background: linear-gradient( 140deg, color-mix(in srgb, var(--tile-hue) 14%, var(--card)) 0%, color-mix(in srgb, var(--tile-hue) 7%, var(--card)) 100% ); border: 1px solid color-mix(in srgb, var(--tile-hue) 22%, transparent); box-shadow: 0 10px 30px -26px color-mix(in srgb, var(--tile-hue) 40%, transparent); transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* * Faint static film-grain over the tile — lifts the flat CSS gradient to a * "material" surface (the Oura touch). Inline SVG fractalNoise data-URI, zero * network cost, one paint, no animation (reduced-motion-safe by construction). * Opacity kept <=3% so it never reads as dirty on the white Alucard card. */ .wellness-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.025; mix-blend-mode: overlay; pointer-events: none; } /* * v1.15.12 (F1/F3) — `.wellness-detail-card` is the score-anatomy detail * surface, deepened to match the dashboard ring tile the user tapped. * * F1 — carries the SAME per-metric `--tile-hue` mix over the theme `--card` * as `.wellness-tile`, so the tap-through reads as the same surface * rather than a plain bordered card. The hue is set inline per metric. * F3 — a SUBTLE vertical gradient that lightens toward the BOTTOM: the top * carries a touch more of the hue (16%) and it eases to 6% at the foot, * giving the card a premium, lit-from-below depth. Theme-aware by * construction — both stops mix over the theme `--card`, so it stays * luminous on the white Alucard card and rich on the dark Dracula one. * Kept minimal (a 10pp swing) so it never reads as a heavy slab. * * Static, no hover lift (it is a page surface, not a tap target) — so it * needs no reduced-motion handling. */ .wellness-detail-card { --tile-hue: var(--dracula-purple); position: relative; /* The bottom-leaning gradient below is the card's OWN `background`, which is * already clipped to `border-radius` — a painted background never bleeds past * the rounded corners regardless of `overflow`. We deliberately do NOT set * `overflow: hidden`: the ring's drop-shadow bloom (`.wellness-ring-arc`) is a * CHILD box, and `overflow: hidden` would clip that glow at the card edge. The * gradient stays corner-clipped; the glow renders uncut on all four sides. */ background: linear-gradient( 180deg, color-mix(in srgb, var(--tile-hue) 16%, var(--card)) 0%, color-mix(in srgb, var(--tile-hue) 6%, var(--card)) 100% ); border: 1px solid color-mix(in srgb, var(--tile-hue) 22%, transparent); box-shadow: 0 12px 34px -28px color-mix(in srgb, var(--tile-hue) 42%, transparent); } @media (hover: hover) { .wellness-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tile-hue) 38%, transparent); box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--tile-hue) 52%, transparent); } .wellness-tile:hover [data-slot="score-ring"] { transform: scale(1.015); } } .wellness-tile:active { transform: translateY(0) scale(0.985); } /* So the ring scales smoothly with the tile lift instead of snapping. */ .wellness-tile [data-slot="score-ring"] { transition: transform 200ms var(--ring-ease); } /* * v1.14.0 — the wellness-strip "signature reveal" motion system. * * The whole moment plays ONCE per session (the strip toggles * `data-revealed="true"` once, gated on a sessionStorage flag) so a * background Apple-Health-sync refetch never re-triggers it. Three layers: * 1. tile rise+fade (staggered left-to-right by an inline animation-delay), * 2. the ring's spring-fill arc sweep (in score-ring.tsx, --ring-spring), * 3. a conic SHEEN that sweeps the arc once (the "expensive" specular touch). * A single prefers-reduced-motion block at the bottom zeroes all of it. */ @property --shimmer-angle { syntax: ""; inherits: false; initial-value: 0deg; } :root { /* Sampled spring (stiffness ~120, damping ~14): overshoots ~6% then settles — the Oura/WHOOP fill feel. Falls back to the browser default on very old engines that ignore linear() (instant fill, not broken). */ --ring-spring: linear( 0, 0.06, 0.23, 0.46, 0.7, 0.89, 1.02, 1.06, 1.03, 1, 0.99, 1 ); --ring-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } .wellness-tile-rise { opacity: 0; transform: translateY(10px); } [data-revealed="true"] .wellness-tile-rise { animation: wellnessTileRise 440ms var(--ring-ease) forwards; animation-delay: var(--reveal-delay, 0ms); } @keyframes wellnessTileRise { to { opacity: 1; transform: translateY(0); } } /* The conic sheen overlay sits over the ring; opacity animates from 0 so a browser without @property support (Safari <16.4 / FF <128) shows nothing rather than a frozen highlight band. */ .wellness-ring-sheen { position: absolute; inset: 6%; border-radius: 50%; opacity: 0; /* A specular highlight must always LIGHTEN. Under mix-blend overlay a near-black light-mode `--card-foreground` would darken the tile into a grey band, so the sheen rides a fixed white in both themes. */ background: radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.72) 0%, transparent 70% ); mix-blend-mode: overlay; pointer-events: none; -webkit-mask: conic-gradient( from var(--shimmer-angle), transparent 0deg, transparent 38deg, #000 58deg, transparent 80deg, transparent 360deg ); mask: conic-gradient( from var(--shimmer-angle), transparent 0deg, transparent 38deg, #000 58deg, transparent 80deg, transparent 360deg ); } [data-revealed="true"] .wellness-ring-sheen { animation: ringSheen 1500ms var(--ring-ease) forwards; animation-delay: calc(var(--reveal-delay, 0ms) + 550ms); } @keyframes ringSheen { 0% { --shimmer-angle: 0deg; opacity: 0; } 15% { opacity: 0.5; } 85% { opacity: 0.5; } 100% { --shimmer-angle: 360deg; opacity: 0; } } /* Token-tinted bloom behind the progress arc. The breathing pulse runs only on the strongest (green-band) ring so the strip celebrates a good score rather than jittering all five. `--ring-glow` is set inline per ring. */ .wellness-ring-arc { filter: drop-shadow( 0 0 3px color-mix(in srgb, var(--ring-glow) 45%, transparent) ); } .wellness-ring-arc--pulse { /* Breathe a few times to celebrate a strong score, then settle — an infinite loop would repaint the (non-compositable) drop-shadow filter forever. Motion happens, then the surface goes calm. */ animation: ringGlow 3.4s ease-in-out 2s 3; } @keyframes ringGlow { 0%, 100% { filter: drop-shadow( 0 0 2px color-mix(in srgb, var(--ring-glow) 40%, transparent) ); } 50% { filter: drop-shadow( 0 0 8px color-mix(in srgb, var(--ring-glow) 65%, transparent) ); } } @media (prefers-reduced-motion: reduce) { .wellness-tile, .wellness-tile:hover, .wellness-tile:active, .wellness-tile [data-slot="score-ring"], .wellness-tile:hover [data-slot="score-ring"] { transform: none; transition: none; } .wellness-tile-rise, [data-revealed="true"] .wellness-tile-rise { opacity: 1; transform: none; animation: none; } [data-revealed="true"] .wellness-ring-sheen { animation: none; opacity: 0; } .wellness-ring-arc, .wellness-ring-arc--pulse { filter: none; animation: none; } } /* * `pulseDot` keyframes — the "live, refreshed N min ago" green dot in * the hero meta row. Used as `.pulse-dot { animation: pulseDot ... }`. * Reduced-motion users get a static dot via the prefers-reduced-motion * guard below. */ @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } } /* * v1.15.0 — the cycle-ring "signature reveal". * * The phase dial earns the same premium signature as the wellness rings * (sweep + glow + sheen + count-up) without losing its own identity as a * four-phase dial: * 1. a clockwise CLOCK-WIPE draws the phase arcs on from the 12-o'clock * day-0 origin (the