`, 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; } /* * `.scroll-touch` — momentum scrolling for horizontal scrollers on iOS * WebKit. `-webkit-overflow-scrolling: touch` restores the inertial * flick the default `overflow-x-auto` row loses on touch; `overscroll- * behavior: contain` keeps a flick that reaches the end of the row from * chaining into the document scroll (the "rubber-band drags the whole * page" paper-cut). Applied to the in-app horizontal pill / tab strips * (insights tab strip, cycle tab list) so the gesture matches the * native feel the bottom-sheet scrollers already get for free. */ .scroll-touch { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ── 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.18.7 — the wellness-strip reveal, calmed. What remains is a quiet * left-to-right tile rise+fade (gated once per session via `data-revealed`) * and the arc's spring-fill sweep (in score-ring.tsx, `--ring-spring`). The * conic specular sheen + the bloom + the breathing pulse were removed so the * strip settles as flat as the surrounding charts. A single * prefers-reduced-motion block at the bottom zeroes the tile rise. */ :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); } } /* v1.18.7 — the conic specular SHEEN is retired. It swept a white highlight across the arc once on reveal, which was the most overtly "premium / 3-D" touch and clashed hardest with the flat charts. The class is kept as a no-op so the cycle-ring + score-ring call sites that still render the overlay div simply paint nothing. */ .wellness-ring-sheen { display: none; } /* v1.18.7 — the arc is FLAT by default. The earlier treatment painted a token-tinted drop-shadow bloom behind every arc plus a breathing pulse on the green-band ring; against the flat 2-D Recharts charts that read as a glowing 3-D dial. Both are gone — the arc is a plain stroke, the same weight a chart series carries. `.wellness-ring-arc--flat` is kept as an alias so the dashboard-hero call site (and any other) stays valid. */ .wellness-ring-arc, .wellness-ring-arc--flat, .wellness-ring-arc--pulse { filter: none; animation: none; } @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; } } /* * `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