/* ============================================================
Hot Girl Summer — design system
PALETTE IS LOCKED. Every colour below is lifted verbatim from
the original app. Named here, never altered.
============================================================ */
/* ============================================================
Self-hosted type. These were loaded from Google Fonts, which meant every
single launch made a request to Google carrying the user's IP — in an app
whose entire promise is that her measurements never leave the phone. Both
families are SIL Open Font License 1.1, which permits bundling; the licence
text ships beside them in ./fonts.
Variable files, so one download per family covers every weight the app
uses (Baloo 2 at 600/700/800, Caveat at 500/700) instead of five statics.
latin and latin-ext only: the other subsets Google serves are Devanagari,
Vietnamese and Cyrillic, which this app has no use for.
============================================================ */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('./fonts/baloo2-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('./fonts/baloo2-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('./fonts/caveat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('./fonts/caveat-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* --- Locked palette --- */
--plum: #3A2E4D; /* body text */
--wine: #4B1528; /* headings on light surfaces */
--magenta: #8A1550; /* section titles, badges */
--rose: #D1699A; /* primary accent */
--violet: #8E7CC3; /* secondary accent */
--lilac: #C9B6E4; /* summary gradient start */
--blush: #E8A0BF; /* summary gradient end */
--bg-top: #FBE4EE; /* page gradient start */
--bg-bottom: #F5EEFA; /* page gradient end */
--muted: #6B5A88; /* field labels */
--muted-soft: #9583A8; /* hints, empty states */
--border: #E6D9F0; /* input borders */
--field-bg: #FBFAFD; /* input fill */
--divider: #F0E4F2; /* list separators */
--divider-alt: #EAD9EC; /* dashed separators */
--danger: #B23B5C; /* errors */
--ghost: #A65C82; /* tertiary text buttons */
--white: #FFFFFF;
/* --- Motion ---
Custom curves. The CSS built-ins are too weak to read as intentional. */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--dur-press: 140ms;
--dur-fast: 180ms;
--dur-med: 240ms;
--dur-sheet: 380ms;
--dur-travel: 420ms; /* something crossing the bar: the clip, and the pane it selects */
/* --- Elevation --- */
--shadow-card: 0 2px 10px rgba(142, 124, 195, 0.12);
--shadow-lift: 0 8px 24px rgba(142, 124, 195, 0.18);
/* --- Type --- */
--font-display: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
/* The fallback stack is load-bearing, not decoration: sw.js ignores
cross-origin requests, so offline this still reads as handwriting
(Bradley Hand on iOS) instead of falling back to the body font. */
--font-hand: 'Caveat', 'Bradley Hand', 'Snell Roundhand', 'Segoe Print',
'Comic Sans MS', cursive;
/* --- Safe areas (notch / home indicator) --- */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* --- Post-it (added, not part of the locked palette above) --- */
--postit: #FEF7C3; /* a warm, soft yellow */
--postit-deep: #FBEFA4;
}
*, *::before, *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
background-attachment: fixed;
min-height: 100vh;
min-height: 100dvh;
color: var(--plum);
padding-bottom: calc(40px + var(--safe-bottom));
/* `contain` not `none`: it still stops scroll chaining, but keeps the
native rubber-band bounce. Suppressing that is most of what makes a web
app feel like a web page rather than an app. */
overscroll-behavior-y: contain;
}
body.sheet-open { overflow: hidden; }
.wrap {
max-width: 480px;
margin: 0 auto;
padding: 0 calc(16px + var(--safe-left)) 0 calc(16px + var(--safe-right));
}
/* Numerals must never jitter as they animate or update. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* ---------------------------------------------------------- Topbar */
.topbar {
background: linear-gradient(135deg, var(--violet) 0%, var(--rose) 100%);
color: var(--white);
padding: calc(28px + var(--safe-top)) 20px 22px;
border-radius: 0 0 24px 24px;
margin-bottom: 18px;
}
.topbar h1 {
margin: 0;
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
letter-spacing: 0.2px;
line-height: 1.1;
}
.topbar p {
margin: 5px 0 0;
font-size: 13px;
opacity: 0.92;
transition: opacity var(--dur-med) var(--ease-out);
}
/* ---------------------------------------------------------- Cards */
.card {
background: var(--white);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 14px;
box-shadow: var(--shadow-card);
}
.summary-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 14px;
}
/* The stagger is decoration only. It is applied by JS, so if animation
never runs the tiles are still on screen — content must never depend
on an animation completing to become visible. */
.summary-grid .mini.stagger {
animation: mini-in var(--dur-med) var(--ease-out) backwards;
}
@keyframes mini-in {
from { opacity: 0; transform: translateY(6px); }
}
.summary-grid .mini .mv { font-size: 15px; font-weight: 700; }
/* Direction cues. Rose = moving away from goal, wine = toward it,
plum = a metric with no "good" direction (arms, thighs, bum). */
.dir-good { color: var(--wine); }
.dir-away { color: var(--danger); }
.dir-neutral { color: var(--plum); }
/* ---------------------------------------------------------- Reminder banner */
.banner {
display: flex;
align-items: center;
gap: 10px;
background: var(--white);
border: 1.5px solid var(--lilac);
border-radius: 14px;
padding: 12px 12px 12px 16px;
margin-bottom: 14px;
box-shadow: var(--shadow-card);
}
/* Entrance is opt-in, added by JS. Declared on the base class it would mean
the banner starts at opacity 0 — content waiting on an animation to exist. */
.banner.enter { animation: banner-in var(--dur-med) var(--ease-out); }
@keyframes banner-in {
from { opacity: 0; transform: translateY(-6px); }
}
.banner-text { flex: 1; font-size: 13.5px; color: var(--wine); font-weight: 600; line-height: 1.4; }
.banner-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.banner-cta {
background: linear-gradient(135deg, var(--violet), var(--rose));
color: var(--white);
border: none;
border-radius: 10px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: transform var(--dur-press) var(--ease-out);
}
.banner-cta:active { transform: scale(0.96); }
.banner-x {
background: transparent;
border: none;
color: var(--muted-soft);
font-size: 14px;
width: 28px; height: 28px;
cursor: pointer;
border-radius: 50%;
transition: transform var(--dur-press) var(--ease-out);
}
.banner-x:active { transform: scale(0.9); }
.banner-cta:focus-visible, .banner-x:focus-visible {
outline: 2.5px solid var(--rose); outline-offset: 2px;
}
/* ---------------------------------------------------------- Consistency */
/* Celebration lives here — attached to showing up, which she controls,
rather than to which direction the scale moved, which she does not. */
.consistency {
font-size: 12.5px;
font-weight: 600;
margin-top: 8px;
opacity: 0.92;
min-height: 16px;
}
/* ---------------------------------------------------------- Recomp insight */
.insight-card {
display: flex;
gap: 12px;
align-items: flex-start;
border-left: 3px solid var(--rose);
}
.insight-card.note { border-left-color: var(--violet); }
.insight-card.enter { animation: screen-in var(--dur-med) var(--ease-out); }
.insight-mark {
width: 20px; height: 20px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 1px;
background: linear-gradient(135deg, var(--violet), var(--rose));
position: relative;
}
/* Tick for a good-news insight. */
.insight-card.good .insight-mark::after {
content: '';
position: absolute;
left: 7px; top: 4px;
width: 5px; height: 9px;
border-right: 2px solid var(--white);
border-bottom: 2px solid var(--white);
transform: rotate(45deg);
}
/* Lower-case "i" for something to look at, not an alarm. */
.insight-card.note .insight-mark::after {
content: 'i';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 13px;
font-weight: 700;
font-style: italic;
}
.insight-body { font-size: 13.5px; line-height: 1.5; color: var(--plum); }
.insight-body b { color: var(--wine); }
/* ---------------------------------------------------------- Affirmation */
/* A STICKER, and the word is doing work.
Version one was a card: white box, 3px left border, card shadow — the exact
parts .insight-card is built from, which made the day's line read as one more
thing the app wanted her to do. Version two took the box away and left a bare
sentence with nothing under it.
A sticker is the third thing. The tells are all borrowed from real ones: a
white die-cut edge all the way round, a warm fill rather than paper white, a
soft shadow so it sits ON the page instead of in it, and a degree and a half
of rotation because nobody ever put a sticker down straight. None of that
vocabulary appears anywhere else in the app, so it cannot be misread as
another instruction.
The post-it on the Log page is the other paper object here and the two are
deliberately unlike: that one is her handwriting, this one is the app's
voice. */
.affirm {
background: none;
border: none;
box-shadow: none;
padding: 0;
/* The air above it is doing real work: pressed up against the masthead it
reads as a page title rather than as the day's line. The extra room below
is the shadow's, and the rotation's. */
margin: 14px 2px 26px;
}
.sticker {
position: relative;
padding: 15px 17px 16px;
/* Four different corners. A single radius reads as a component; uneven ones
read as something cut out by hand. */
border-radius: 20px 15px 19px 14px;
background:
radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0) 58%),
linear-gradient(152deg, var(--postit) 0%, #FBE2CE 46%, var(--blush) 100%);
/* The white ring IS the die cut. Second shadow lifts it off the page. */
box-shadow:
0 0 0 5px var(--white),
0 6px 16px rgba(142, 124, 195, 0.20),
0 1px 2px rgba(75, 21, 40, 0.06);
transform: rotate(-1.4deg);
}
.sticker-spark {
position: absolute;
top: -5px;
right: 11px;
width: 27px;
height: 24px;
color: var(--rose);
opacity: 0.72;
transform: rotate(9deg);
pointer-events: none;
}
.affirm-text {
margin: 0;
/* Ragged right by a hair, so the block never squares up into a paragraph. */
padding-right: 26px;
font-family: var(--font-display);
font-size: clamp(19px, 5.2vw, 23px);
font-weight: 700;
line-height: 1.28;
color: var(--wine);
letter-spacing: -0.4px;
text-wrap: balance; /* no orphan word hanging off a two-line sentence */
}
/* ---------------------------------------------------------- How-to-measure */
.howto {
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 10px;
margin: 2px 0 14px;
overflow: hidden;
}
.howto summary {
padding: 11px 14px;
cursor: pointer;
font-size: 12.5px;
font-weight: 600;
color: var(--violet);
list-style: none;
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: '＋ '; font-weight: 700; }
.howto[open] summary::before { content: '－ '; }
.howto summary:focus-visible { outline: 2.5px solid var(--rose); outline-offset: -2px; }
.howto-body {
padding: 0 14px 12px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
}
.howto-body p { margin: 0 0 8px; }
.howto-body p:last-child { margin-bottom: 0; }
.howto-body ul { margin: 0 0 8px; padding-left: 18px; }
.howto-body li { margin-bottom: 4px; }
/* ---------------------------------------------------------- Chart */
.chart-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0 4px 10px;
}
.chart-head .ct { font-size: 13px; font-weight: 700; color: var(--wine); }
.chart-head .cr { font-size: 12px; color: var(--muted-soft); }
.spark { display: block; width: 100%; height: 96px; overflow: visible; }
.spark .line {
fill: none;
stroke: var(--rose);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.spark .trend {
fill: none;
stroke: var(--violet);
stroke-width: 1.5;
stroke-dasharray: 3 4;
opacity: 0.75;
}
.spark .dot { fill: var(--white); stroke: var(--rose); stroke-width: 2.5; }
/* The weight she marked, drawn at the height it sits at. Finer and quieter than
the trend line on purpose — the readings are the subject, this is the horizon
behind them. No text in the SVG: the chart is drawn with
preserveAspectRatio="none", so anything lettered inside it would stretch.
The number lives in the legend, where it renders at its true proportions. */
.spark .goal-rule {
fill: none;
stroke: var(--muted-soft);
stroke-width: 1.2;
stroke-dasharray: 1.5 4.5;
stroke-linecap: round;
opacity: 0.6;
}
.spark .fill { fill: url(#sparkFill); }
.chart-legend {
display: flex;
gap: 14px;
padding: 8px 4px 2px;
font-size: 11px;
color: var(--muted-soft);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 12px; height: 2.5px; border-radius: 2px; display: inline-block; }
.chart-legend i.lg-goal {
height: 2px;
border-radius: 0;
background: repeating-linear-gradient(90deg,
var(--muted-soft) 0 1.5px, transparent 1.5px 4px);
opacity: 0.75;
}
/* ---------------------------------------------------------- Fields */
h2.section-title {
font-size: 14px;
font-weight: 700;
color: var(--magenta);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 18px 4px 10px;
}
.field { margin-bottom: 12px; }
.field label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
margin-bottom: 5px;
}
.field input {
width: 100%;
padding: 11px 12px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-size: 16px; /* 16px stops iOS zooming the page on focus */
font-family: inherit;
background: var(--field-bg);
color: var(--plum);
transition: border-color var(--dur-fast) ease,
background-color var(--dur-fast) ease,
box-shadow var(--dur-fast) ease;
}
.field input:focus {
outline: none;
border-color: var(--rose);
background: var(--white);
box-shadow: 0 0 0 3px rgba(209, 105, 154, 0.15);
}
.field input:focus-visible { outline: none; }
/* No steppers on the baseline screen. There is no previous number to step
from, so an arrow that lands on 0.1 is worse than no arrow at all —
she is reading these off a scale and a tape, and will type them. */
#onboarding input[type=number]::-webkit-outer-spin-button,
#onboarding input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#onboarding input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field textarea {
width: 100%;
padding: 11px 12px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-size: 16px;
font-family: inherit;
background: var(--field-bg);
color: var(--plum);
resize: vertical;
min-height: 62px;
transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease,
box-shadow var(--dur-fast) ease;
}
.field textarea:focus {
outline: none;
border-color: var(--rose);
background: var(--white);
box-shadow: 0 0 0 3px rgba(209, 105, 154, 0.15);
}
/* The tick was a native OS checkbox — a system control dropped into a set of
soft, translucent, clay surfaces. It could not be softened, only recoloured,
which is exactly why it read as foreign. It is a switch now.
The knob is painted as two radial gradients on the input's own background,
not as a pseudo-element: an is a replaced element and will not render
::before/::after in most engines. Two layers so the knob carries a shadow
under it — one blob is a dot, two is an object with weight. Sliding it is a
background-position transition, which animates smoothly and needs no extra
markup. */
.setrow {
display: flex; align-items: center; gap: 12px;
padding: 6px 2px;
}
.setrow-lbl { font-size: 13.5px; font-weight: 600; color: var(--muted); }
/* ---- the toggles ------------------------------------------------------
Three glass cards with a pill switch on each — a preference wearing the
weight of an action, and the page read as a stack of panels because of it.
A disc that fills when it is on is the gesture this app already teaches on
the Log page's period bubble. Same idea, smaller, and no card around it. */
.tog {
display: flex; align-items: center; gap: 13px;
/* 6px of side padding, not 2px: the lit halo is a box-shadow that reaches
~4px past the disc, and `#main, .pane { overflow-x: clip }` a few hundred
lines up will shave it flat on the left otherwise. */
padding: 6px 6px;
cursor: pointer;
font-size: 13.5px; font-weight: 600; line-height: 1.3;
color: var(--plum);
}
.tog input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
/* Same disc as the Log page's row. The icon carries the colour at all times —
a control whose icon greys out when off reads as DISABLED, not as off, and
at a 22% tint neither state was legible anyway. So: white when it is off,
and a halo of its own colour when it is on. The colour never moves, the
light around it does. */
.tog { --tone: var(--violet); }
.tog-aff { --tone: #F2A93B; } /* the sun, matching the Dose bubble's amber */
.tog-spl { --tone: var(--rose); }
.tog-disc {
flex: 0 0 auto;
display: grid; place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
background: linear-gradient(165deg, #FFFFFF 0%, #FBF7FD 100%);
box-shadow: var(--clay-sm);
color: var(--tone); /* always. on, off, either way. */
transition: background var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
.tog-disc svg { width: 21px; height: 21px; }
/* Lit: a ring of its own colour and a pool of it underneath. Both are
box-shadows rather than a border or an outline, because those two get
clipped by the pane's overflow-x and a glow that is flat on one side is
worse than no glow. */
.tog input:checked + .tog-disc {
background: linear-gradient(165deg,
#FFFFFF 0%,
color-mix(in srgb, var(--tone) 16%, #FFFFFF) 100%);
box-shadow: var(--clay-sm),
0 0 0 3px color-mix(in srgb, var(--tone) 26%, transparent),
0 8px 20px -8px color-mix(in srgb, var(--tone) 70%, transparent);
}
.tog input:checked ~ .tog-text { color: var(--wine); }
.tog:active .tog-disc { transform: scale(.94); box-shadow: var(--clay-sm-press); }
.tog input:focus-visible + .tog-disc {
outline: none;
box-shadow: var(--clay-sm), 0 0 0 3px rgba(255,255,255,.9),
0 0 0 6px rgba(209, 105, 154, .55);
}
@media (prefers-reduced-motion: reduce) { .tog-disc { transition: none; } }
/* ---------------------------------------------------------- Hero input
The weight is the reason she opened the sheet. Giving it the same visual
weight as "Left thigh" is what made this read as a form rather than an
instrument. */
.hero-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.nudge {
width: 46px; height: 46px;
flex-shrink: 0;
border: 1.5px solid var(--border);
border-radius: 50%;
background: var(--white);
color: var(--violet);
font-size: 22px;
font-weight: 700;
font-family: inherit;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-card);
transition: transform var(--dur-press) var(--ease-out),
border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nudge:active { transform: scale(0.9); border-color: var(--rose); color: var(--rose); }
.nudge:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; }
.hero-val {
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 4px;
min-width: 0;
}
.hero-val input {
width: 4.2ch;
padding: 0;
border: none;
background: transparent;
font-family: var(--font-display);
font-size: 54px;
font-weight: 800;
line-height: 1.05;
text-align: center;
color: var(--wine);
font-variant-numeric: tabular-nums;
letter-spacing: -1px;
}
.hero-val input::placeholder { color: var(--divider-alt); }
.hero-val input:focus { outline: none; }
.hero-val input::-webkit-outer-spin-button,
.hero-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hero-val input { -moz-appearance: textfield; appearance: textfield; }
.hero-unit {
font-size: 19px;
font-weight: 700;
color: var(--muted-soft);
}
.chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
margin-top: 13px;
}
.chips button {
padding: 9px 4px;
border: 1.5px solid var(--border);
border-radius: 999px;
background: var(--white);
color: var(--muted);
font-size: 13px;
font-weight: 700;
font-family: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: transform var(--dur-press) var(--ease-out),
background-color var(--dur-fast) ease, color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
.chips button:active {
transform: scale(0.94);
background: var(--bg-top);
border-color: var(--rose);
color: var(--magenta);
}
.chips button:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; }
/* A number that just changed gets a beat of acknowledgement. */
.hero-val input.bumped { animation: bump 320ms var(--ease-out); }
@keyframes bump {
0% { transform: scale(1); }
40% { transform: scale(1.07); }
100% { transform: scale(1); }
}
.sect-head {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 12px;
}
.sect-head span {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--muted-soft);
white-space: nowrap;
}
.sect-head::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--divider), transparent);
}
/* ---------------------------------------------------------- Photos */
/* The add/replace button and its dashed drop target are gone — tapping the
photo bubble in .log-bubbles goes straight to the file picker, and the
thumbnail it produces fills that same bubble. See THE BUBBLE ROW below
for .photo-thumb and .photo-x as they exist now, scoped to .bub-photo. */
/* Thumbnail inside a history row */
.detail-photo {
grid-column: 1 / -1;
display: flex;
gap: 10px;
align-items: center;
padding-top: 4px;
}
.detail-photo img {
width: 56px; height: 56px;
border-radius: 10px;
object-fit: cover;
cursor: pointer;
box-shadow: var(--shadow-card);
transition: transform var(--dur-press) var(--ease-out);
}
.detail-photo img:active { transform: scale(0.95); }
.detail-photo .cap { font-size: 12px; color: var(--muted-soft); }
.photo-viewer {
position: fixed;
inset: 0;
z-index: 45;
background: rgba(58, 46, 77, 0.94);
display: none;
align-items: center;
justify-content: center;
padding: calc(20px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
}
.photo-viewer.open { display: flex; animation: chart-fade var(--dur-med) var(--ease-out); }
.photo-viewer img { max-width: 100%; max-height: 100%; border-radius: 14px; display: block; }
.viewer-close {
position: absolute;
top: calc(14px + var(--safe-top)); right: 16px;
width: 36px; height: 36px;
border: none; border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: var(--white);
font-size: 15px;
cursor: pointer;
}
.viewer-cap {
position: absolute;
bottom: calc(18px + var(--safe-bottom));
left: 0; right: 0;
text-align: center;
color: var(--white);
font-size: 13px;
opacity: 0.85;
}
/* ---------------------------------------------------------- Goal reached */
/* The card gives once, the way you'd squeeze someone's arm — and that is now
the WHOLE of the goal-reached moment. It used to be this plus a toast with a
champagne emoji and thirty-four pieces of confetti, fired on a scale reading,
in an app whose argument is that the scale is not the result. The confetti is
gone. maybeGoalReached() adds .reached for 800ms against this 700ms pop, and
guards reducedMotion() itself, so no media query is needed here. */
#summaryCard.reached { animation: card-pop 700ms var(--ease-out); }
@keyframes card-pop {
0% { transform: scale(1); }
35% { transform: scale(1.025); }
100% { transform: scale(1); }
}
/* ---------------------------------------------------------- Buttons */
.btn {
width: 100%;
padding: 13px;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: transform var(--dur-press) var(--ease-out),
box-shadow var(--dur-press) var(--ease-out),
opacity var(--dur-press) ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; }
.btn-primary {
background: linear-gradient(135deg, var(--violet), var(--rose));
color: var(--white);
box-shadow: var(--shadow-lift);
}
.btn-secondary {
background: var(--white);
color: var(--violet);
border: 1.5px solid var(--lilac);
margin-top: 8px;
}
.btn-danger {
background: var(--white);
color: var(--danger);
border: 1.5px solid var(--divider-alt);
margin-top: 8px;
}
.btn-ghost {
background: transparent;
border: none;
color: var(--ghost);
font-size: 13px;
font-weight: 600;
font-family: inherit;
padding: 10px;
cursor: pointer;
border-radius: 8px;
transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) ease;
}
.btn-ghost:active { transform: scale(0.97); opacity: 0.7; }
.btn-ghost:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; }
.row-actions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.row-actions .btn-ghost { flex: 1; text-align: center; }
/* ---------------------------------------------------------- History */
/* The ledger runs from day at the top to dusk at the bottom. Each row gets a
--dusk of 0..1 from its position in the list (set in renderHistory), which
fades in a sunset wash over the glass. The wash is capped well below full
strength — past about 0.55 the wine text stops holding against it, and a
ledger you cannot read is a poor trade for a gradient. */
.week-item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 13px 14px;
margin: 0 0 8px;
cursor: pointer;
border: 1.5px solid rgba(255, 255, 255, .68);
border-radius: 16px;
background: rgba(255, 255, 255, .50);
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
box-shadow: 0 3px 10px -5px rgba(138, 21, 80, .20),
inset 0 1px 0 rgba(255, 255, 255, .8);
width: 100%;
text-align: left;
font-family: inherit;
color: inherit;
transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.week-item:last-of-type { margin-bottom: 0; }
/* the sunset wash itself — a separate layer so the glass underneath keeps its
blur and the tint can animate independently */
.week-item::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(148deg,
rgba(255, 190, 96, .60) 0%,
rgba(240, 128, 150, .58) 46%,
rgba(150, 86, 170, .60) 100%);
opacity: var(--dusk, 0);
transition: opacity var(--dur-travel) var(--ease-out);
}
.week-item > * { position: relative; }
.week-item:active { transform: scale(0.985); box-shadow: inset 0 2px 6px rgba(138,21,80,.16); }
.week-item:focus-visible { outline: 2.5px solid var(--rose); outline-offset: -2px; }
.week-item[aria-expanded="true"] { background: rgba(255,255,255,.74); border-color: rgba(209,105,154,.40); }
.wk-left { min-width: 0; }
.wk-date { display: block; font-size: 14px; font-weight: 700; color: var(--wine); }
.wk-sub { display: block; font-size: 12px; color: var(--muted-soft); margin-top: 2px; }
.wk-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wk-badge {
background: rgba(255, 255, 255, .82);
color: var(--magenta);
font-size: 13px;
font-weight: 700;
padding: 5px 10px;
border-radius: 20px;
white-space: nowrap;
}
.wk-chev {
width: 8px; height: 8px;
border-right: 2px solid var(--muted-soft);
border-bottom: 2px solid var(--muted-soft);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--dur-fast) var(--ease-out);
}
.week-item[aria-expanded="true"] .wk-chev {
transform: rotate(225deg) translate(-2px, -2px);
}
.detail-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.detail-wrap.open { grid-template-rows: 1fr; }
.detail-inner { overflow: hidden; min-height: 0; }
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
padding: 10px 4px 4px;
border-top: 1px dashed var(--divider-alt);
}
.detail-grid .dv { font-size: 13px; color: var(--muted); }
.detail-grid .dv b { color: var(--wine); font-weight: 700; }
.detail-grid .dv .delta { font-size: 12px; }
.detail-grid .full { grid-column: 1 / -1; }
.empty {
text-align: center;
padding: 30px 10px;
color: var(--muted-soft);
font-size: 14px;
line-height: 1.5;
}
.empty i { font-size: 34px; display: block; margin-bottom: 10px; opacity: 0.6; font-style: normal; }
.err {
color: var(--danger);
font-size: 12.5px;
margin: -4px 0 10px;
display: none;
}
.err.show { display: block; animation: shake 320ms var(--ease-out); }
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.warn {
background: var(--bg-top);
color: var(--magenta);
font-size: 12.5px;
border-radius: 8px;
padding: 9px 11px;
margin: -2px 0 12px;
display: none;
line-height: 1.4;
}
.warn.show { display: block; }
.hint { font-size: 12px; color: var(--muted-soft); margin: -4px 0 12px; line-height: 1.5; }
/* ---------------------------------------------------------- Settings */
h4.set-head {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--magenta);
margin: 20px 0 8px;
}
h4.set-head:first-of-type { margin-top: 6px; }
/* A preference, not an action. This was a stacked label above a full-width
two-column slab, which gave "which units" the same footprint on the page as
the things you actually press. It is a pill sized to its own content now,
sitting on its label's line — and "kg" says what "Kilograms (kg)" said,
which is most of why it needed the width in the first place. */
.seg {
display: grid;
grid-template-columns: auto auto;
gap: 4px;
padding: 3px;
margin-left: auto;
/* the same glass the toggles sit on, so Settings reads as one set */
background: rgba(255, 255, 255, .52);
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
border: 1.5px solid rgba(255, 255, 255, .72);
border-radius: 999px;
box-shadow: inset 0 2px 6px rgba(138, 21, 80, .10);
}
.seg button {
min-width: 48px;
padding: 7px 15px;
border: none;
border-radius: 999px;
background: transparent;
/* transparent gradient, matching the selected state's shape (135deg, 2 stops) —
background-image can only animate between two gradients of the same
structure, "none" never interpolates to a gradient */
background-image: linear-gradient(135deg, transparent, transparent);
color: var(--muted);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background-image var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out),
color var(--dur-med) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
.seg button:active { transform: scale(0.97); }
.seg button[aria-pressed="true"] {
background: linear-gradient(135deg, var(--violet), var(--rose));
color: var(--white);
box-shadow: var(--shadow-card);
}
.seg button:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; }
/* ---------------------------------------------------------- Toast */
.toast {
position: fixed;
left: 50%;
bottom: calc(24px + var(--safe-bottom));
transform: translate(-50%, 20px) scale(0.96);
background: var(--plum);
color: var(--white);
font-size: 13.5px;
font-weight: 600;
padding: 11px 18px;
border-radius: 999px;
box-shadow: var(--shadow-lift);
z-index: 40;
opacity: 0;
pointer-events: none;
max-width: calc(100vw - 40px);
text-align: center;
transition: opacity var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* ---------------------------------------------------------- Splash */
.splash {
position: fixed;
inset: 0;
z-index: 50;
overflow: hidden;
/* 180ms, not 800. The app is already up and running underneath by the time
this starts — appReady() fires at the top of dismissSplash — so every one
of those milliseconds was a translucent beach lying over a working screen.
The exit swell is what makes the departure feel authored; the fade only
has to get out of the way. */
transition: opacity 180ms var(--ease-out), visibility 180ms;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
/* The sky is its own layer so it can drift under everything else. */
.sky {
position: absolute;
inset: -20%;
background:
radial-gradient(60% 45% at 22% 18%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
linear-gradient(112deg, #FEF5AC 0%, #FDEAD2 24%, #FBE4EE 46%, #E8A0BF 74%, #D1699A 100%);
}
.splash.animate .sky { animation: sky-drift 14s var(--ease-in-out) infinite alternate; }
@keyframes sky-drift {
from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
to { transform: translate3d(1.5%, 1%, 0) scale(1.10); }
}
/* Duplicate @keyframes do not merge: the last one in the file silently wins for
every rule that names it, which is how an edit to a dead block once appeared
to change a live one. One definition each, in SPLASH, LIVE at the bottom. */
/* --- lettering ------------------------------------------------------- */
.word {
position: absolute;
left: 50%;
top: 46%;
width: 88%;
max-width: 560px;
transform: translate(-50%, -50%);
}
.word img { width: 100%; height: auto; display: block; }
/* The lettering's entrance, its shine, the margarita's draw-on and the bubble
layer all live in SPLASH, LIVE at the foot of this file. */
/* --- chrome ----------------------------------------------------------- */
.splash-dots {
position: absolute;
left: 0; right: 0;
bottom: calc(74px + var(--safe-bottom));
text-align: center;
}
.splash-dots i {
display: inline-block;
width: 9px; height: 9px;
margin: 0 6px;
border-radius: 50%;
background: var(--white);
opacity: .35;
}
.splash.animate .splash-dots i { animation: dot-pulse 1500ms var(--ease-in-out) infinite; }
.splash-dots i:nth-child(2) { animation-delay: 180ms; }
.splash-dots i:nth-child(3) { animation-delay: 360ms; }
@keyframes dot-pulse {
0%,100% { opacity: .3; transform: scale(.85); }
50% { opacity: .95; transform: scale(1.15); }
}
.splash-skip {
position: absolute;
bottom: calc(34px + var(--safe-bottom));
left: 0; right: 0;
text-align: center;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--wine);
opacity: .48;
}
.splash.animate .splash-skip { animation: skip-in 700ms var(--ease-out) 2400ms backwards; }
@keyframes skip-in { from { opacity: 0; } to { opacity: .48; } }
@media (prefers-reduced-motion: reduce) {
.sky, .word, .motes i, .splash-dots i, .splash-skip,
/* Resting state must be the finished state, never the first frame. */
.word { opacity: 1; }
.word { transform: translate(-50%, -50%); }
.motes { display: none; }
.splash-skip { opacity: .48; }
}
/* ---------------------------------------------------------- Motion: state changes
Every animation below marks a *change of state* — a screen swapping, a
number moving, a row that just took an edit. None of them decorate a
resting screen, and none of them gate whether content is visible. */
/* Screen swap: baseline ↔ main. Occasional, so it earns a transition;
without one the whole page just teleports and reads as a page load. */
.screen-enter {
animation: screen-in var(--dur-med) var(--ease-out);
}
@keyframes screen-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* The chart draws itself in. Seen rarely (once per app open), and it makes
the eye travel left-to-right along the actual timeline. */
.spark .line.draw {
animation: draw 800ms var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark .fill.fade,
.spark .trend.fade,
.spark .dot.fade {
animation: chart-fade 420ms var(--ease-out) 380ms backwards;
}
@keyframes chart-fade { from { opacity: 0; } }
.spark .trend.fade { animation-name: chart-fade-trend; }
@keyframes chart-fade-trend { from { opacity: 0; } to { opacity: 0.75; } }
/* The row you just saved or edited identifies itself, then lets go.
Without this a save drops you back to a list with no sign of what moved. */
.week-item.just-saved {
animation: row-flash 1600ms var(--ease-out);
}
@keyframes row-flash {
0% { background: var(--bg-top); }
60% { background: var(--bg-top); }
100% { background: transparent; }
}
/* A value that changed since the last render gets a single soft pulse.
Purely to answer "which of these actually moved?" */
.mini.changed .mv {
animation: value-pulse 900ms var(--ease-out);
}
@keyframes value-pulse {
0% { transform: scale(1); }
30% { transform: scale(1.09); }
100% { transform: scale(1); }
}
.mini .mv { display: inline-block; transform-origin: left center; }
/* ---------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
/* Without this, a staggered delay still hides `backwards`-filled
content for the length of the delay. */
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
REDESIGN — main screen
The purple bar ate 100px and said nothing. The number it was
sitting above is the reason she opened the app, so the number
gets the top of the screen and the chrome gets out of the way.
============================================================ */
.masthead {
padding: calc(20px + var(--safe-top)) 0 4px;
margin-bottom: 0;
background: none;
}
.masthead .brand {
font-family: var(--font-display);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.4px;
color: var(--magenta);
opacity: 0.9;
}
.masthead .when {
font-size: 12.5px;
color: var(--muted-soft);
margin-top: 2px;
}
/* --- hero ------------------------------------------------------------- */
.hero { padding: 22px 2px 6px; }
.hero-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--muted-soft);
margin-bottom: 8px;
}
.hero-figure {
font-family: var(--font-display);
font-size: clamp(56px, 17vw, 82px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -2.5px;
color: var(--wine);
margin-bottom: 10px;
}
.hero-line { font-size: 13px; color: var(--muted); line-height: 1.5; }
.hero-line.dim { color: var(--muted-soft); font-size: 12.5px; }
/* --- chart, edge to edge --------------------------------------------- */
.chart-bleed {
margin: 18px calc(-16px - var(--safe-right)) 20px calc(-16px - var(--safe-left));
padding: 0 0 6px;
background: none;
box-shadow: none;
border-radius: 0;
}
.chart-bleed .chart-head { padding: 0 calc(18px + var(--safe-left)) 8px; }
.chart-bleed .chart-head .ct {
font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--muted-soft);
}
.chart-bleed .chart-head .cr { color: var(--muted); font-weight: 600; }
.chart-bleed .spark { height: 132px; }
.chart-bleed .chart-legend { padding: 6px calc(18px + var(--safe-left)) 0; }
/* --- measurement tiles, now on the page not a card -------------------- */
.summary-grid { gap: 9px; margin-top: 0; }
.summary-grid .mini {
background: var(--white);
border-radius: 14px;
padding: 12px 13px;
box-shadow: var(--shadow-card);
}
.summary-grid .mini .mv { font-size: 17px; letter-spacing: -0.3px; }
.summary-grid .mini .ml {
font-size: 10.5px; opacity: 1; color: var(--muted-soft);
text-transform: uppercase; letter-spacing: 0.7px; margin-top: 3px;
}
/* --- history ---------------------------------------------------------- */
.history {
background: var(--white);
border-radius: 18px;
padding: 4px 16px;
box-shadow: var(--shadow-card);
margin-bottom: 18px;
}
/* --- insights, quieter on the open page ------------------------------- */
.insight-card { border-radius: 16px; }
/* --- onboarding card gets the same air -------------------------------- */
#onboarding .card { border-radius: 20px; padding: 20px 18px; margin-top: 8px; }
/* ============================================================
SUNSET + MATERIALS
The palette had drifted pastel because the app only ever used
its two palest members. Same locked hexes — the butter and the
rose are simply allowed back in, which is where the sunset was
hiding all along.
============================================================ */
body {
background:
radial-gradient(120% 62% at 50% 100%, rgba(209,105,154,.34) 0%, rgba(209,105,154,0) 62%),
radial-gradient(105% 48% at 82% 4%, rgba(254,245,172,.85) 0%, rgba(254,245,172,0) 66%),
linear-gradient(178deg,
#FEF5AC 0%, #FDEBD5 12%, #FBE4EE 34%, #F5EEFA 56%, #F3DCEA 76%, #E8A0BF 100%);
background-attachment: fixed;
background-size: cover;
}
/* Masthead sits on the warm end, so it needs the deeper ink. */
.masthead .brand { color: var(--magenta); opacity: 1; }
.masthead .when { color: var(--muted); }
.hero-eyebrow { color: var(--muted); }
.hero-line { color: var(--plum); }
.hero-line.dim { color: var(--muted); }
/* Cards float ON the sunset rather than sitting in a pale box. */
.card, .history, .insight-card, .banner, .summary-grid .mini {
background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 6px 22px rgba(138, 21, 80, 0.09);
}
.insight-card { border-left-width: 3px; }
/* Settings and the baseline editor are app surfaces, not dialogs bolted
on the side: same masthead-style heading, same material, same rhythm. */
h4.set-head { color: var(--magenta); }
#onboarding .card {
background: rgba(255, 255, 255, 0.86);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.65);
}
#onboarding .section-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.3px;
text-transform: none;
color: var(--wine);
}
@media (prefers-reduced-transparency: reduce) {
.card, .history, .insight-card, .banner, .summary-grid .mini,
#onboarding .card {
background: var(--white);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* ============================================================
CLAY — soft-extruded surfaces, coloured tabs, raised action.
Taken from the 3D reference: matte plastic, light from the
top-left, a bright inner rim, and a deep soft contact shadow.
Orange joins the set from the margarita in Bridget's poster,
and is used sparingly — Settings only.
============================================================ */
:root {
--amber: #F2A93B; /* the sun in her artwork */
--tang: #E8823C; /* the margarita line */
/* Light from the top-left, a lit rim, and a soft contact shadow. */
--clay:
0 14px 26px -10px rgba(138, 21, 80, .30),
0 6px 12px -6px rgba(138, 21, 80, .18),
inset 0 2px 0 rgba(255, 255, 255, .70),
inset 0 -6px 12px rgba(138, 21, 80, .10);
--clay-press:
0 5px 12px -6px rgba(138, 21, 80, .30),
inset 0 2px 6px rgba(138, 21, 80, .18),
inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* The poster is gone — the scene is drawn live. Its rules and its 7200ms
`poster-in` (which pinned every layer at opacity 0 through `backwards`) are
removed rather than overridden. */
/* --- panes ------------------------------------------------------------ */
.pane { display: none; }
.pane.is-on { display: block; }
.pane-in { animation: pane-rise var(--dur-sheet) var(--ease-out); }
@keyframes pane-rise {
from { opacity: 0; transform: translateY(10px) scale(.992); }
}
/* --- clay tab bar ----------------------------------------------------- */
.tab-ico {
width: 42px; height: 30px;
display: grid;
place-items: center;
border-radius: 15px;
background: transparent;
color: currentColor;
}
.tab-label {
font-size: 9.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
transition: opacity var(--dur-med) var(--ease-out),
color var(--dur-med) var(--ease-out),
text-shadow var(--dur-med) var(--ease-out);
}
.tab:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; border-radius: 14px; }
/* Selected: the icon plate inflates into a coloured clay pill. */
.tab.is-on .tab-ico {
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--clay);
}
.tab.t-violet.is-on { color: var(--violet); }
.tab.t-rose.is-on { color: var(--rose); }
.tab.t-amber.is-on { color: var(--tang); }
/* The three .tab-ico gradient plates that used to live here are gone — the
clip is the only coloured surface; these drew a square on top of it. */
/* --- clay lift for the primary controls ------------------------------- */
.btn-primary, .banner-cta, .seg button[aria-pressed="true"] { box-shadow: var(--clay); }
.btn-primary:active, .banner-cta:active { box-shadow: var(--clay-press); }
@media (prefers-reduced-motion: reduce) {
.pane-in { animation: none; }
}
/* ============================================================
MONEY CLIP — one clay ribbon, a coloured clip that slides.
Fixes: the raised + read as permanently pressed, the four
controls were three different sizes, and the tools row sat
under the floating bar duplicating Settings' own buttons.
============================================================ */
/* Room to breathe. The old value left the last card jammed under the bar. */
body { padding-bottom: calc(150px + var(--safe-bottom)); }
.tabbar {
position: fixed;
left: 50%;
bottom: calc(16px + var(--safe-bottom));
transform: translateX(-50%);
z-index: 40; /* above every pane, always hittable */
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
gap: 0;
width: min(430px, calc(100vw - 24px));
padding: 5px;
border-radius: 26px;
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
-webkit-backdrop-filter: blur(26px) saturate(180%);
backdrop-filter: blur(26px) saturate(180%);
border: 1px solid rgba(255,255,255,.85);
box-shadow:
0 22px 44px -18px rgba(138,21,80,.40),
0 6px 14px -8px rgba(138,21,80,.24),
inset 0 2px 0 rgba(255,255,255,.95);
}
/* The clip itself: a clay lozenge that slides between tabs. */
.clip {
position: absolute;
top: 8px;
left: 8px;
height: calc(100% - 16px);
width: calc((100% - 16px) / 4);
border-radius: 20px;
background: linear-gradient(165deg, #B9A6E4, var(--violet));
box-shadow: var(--clay);
/* the clip and the pane it selects are one gesture and share --dur-travel;
the tone change is a colour change and joins the colour family at --dur-med */
transition: transform var(--dur-travel) var(--ease-drawer),
background var(--dur-med) var(--ease-out);
pointer-events: none;
}
/* Every tab is now exactly the same footprint — no raised outlier. */
.tab {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
margin: 0;
padding: 9px 2px 8px;
min-height: 56px;
border: none;
background: none;
border-radius: 20px;
font-family: inherit;
cursor: pointer;
color: var(--muted-soft);
transition: color var(--dur-med) var(--ease-out);
}
.tab-ico {
width: 24px; height: 24px;
display: grid; place-items: center;
background: none;
box-shadow: none;
border-radius: 0;
transform: none;
/* the override below had dropped background-color/box-shadow/color, so a
selected tab's clay pill changed colour instantly while its transform
animated — restored here, all at the colour-family duration.
background-color is gone again: it never actually changes (the gradient
plates that used it were deleted), and filter is added since the
is-on drop-shadow was snapping in one frame while these animated. */
transition: transform var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out),
color var(--dur-med) var(--ease-out),
filter var(--dur-med) var(--ease-out);
}
.tab-ico svg { width: 21px; height: 21px; }
.tab-label {
font-size: 9.5px;
font-weight: 800;
letter-spacing: .55px;
text-transform: uppercase;
}
.tab.is-on { color: var(--white); }
.tab.is-on .tab-ico { transform: translateY(-1px) scale(1.06); }
.tab:active .tab-ico { transform: scale(.88); }
.tab:focus-visible { outline: 2.5px solid var(--wine); outline-offset: -3px; }
/* --- quick actions, matched to each other ----------------------------- */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 18px; }
.quick-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 14px 10px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.7);
background: rgba(255,255,255,.82);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
box-shadow: 0 8px 22px -10px rgba(138,21,80,.24), inset 0 2px 0 rgba(255,255,255,.9);
color: var(--muted);
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
.quick-btn:active { transform: scale(.96); box-shadow: var(--clay-press); }
.quick-ico {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 11px;
color: var(--white);
box-shadow: var(--clay);
flex-shrink: 0;
}
.quick-ico svg { width: 16px; height: 16px; }
.quick-btn.t-violet .quick-ico { background: linear-gradient(160deg, #A99AD6, var(--violet)); }
.quick-btn.t-rose .quick-ico { background: linear-gradient(160deg, var(--blush), var(--rose)); }
/* --- panes slide, they do not merely appear --------------------------- */
.pane-in.from-right { animation: slide-from-right var(--dur-travel) var(--ease-drawer); }
.pane-in.from-left { animation: slide-from-left var(--dur-travel) var(--ease-drawer); }
/* The pane slide must not be able to widen the document.
`slide-from-right` translates the incoming pane +38px, which overflows the
RIGHT edge and creates real scrollable width; `slide-from-left` translates
-38px, and browsers do not make leftward overflow scrollable in LTR. That
asymmetry is the whole bug — going forward through the tabs pushed the bar
off screen, going backward never did.
`clip`, not `hidden`: hidden would make this a scroll container and break
the position:sticky element inside it. */
#main, .pane { overflow-x: clip; }
@keyframes slide-from-right {
from { opacity: 0; transform: translateX(38px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-from-left {
from { opacity: 0; transform: translateX(-38px); }
to { opacity: 1; transform: translateX(0); }
}
/* The old `bubble-out` exit is gone. It could never play: seedMotes() wrote
animation-duration and animation-delay as INLINE styles, and an inline value
beats a stylesheet one — so swapping the animation-name to bubble-out left it
running at the mote's own 5–8s rise duration behind a 2.6s delay, while the
splash was already fading at 620ms. The bubbles are driven by the Web
Animations API now, which takes its timing from the call and cannot be
overridden by a leftover inline property. */
@media (prefers-reduced-motion: reduce) {
.clip { transition: none; }
.pane-in.from-right, .pane-in.from-left { animation: none; }
}
/* ============================================================
iPHONE SIZING
`inset: 0` on a fixed element resolves against iOS Safari's
LAYOUT viewport, which is taller than the visible area while
the browser chrome is showing — so the artwork was being
centred against a box that extended below the screen and
landed low. Pin to the small/dynamic viewport instead.
============================================================ */
.splash {
top: 0; left: 0; right: 0; bottom: auto;
width: 100vw;
height: 100vh; /* fallback */
height: 100svh; /* the visible area, chrome included */
height: 100dvh; /* follows the chrome as it hides */
min-height: -webkit-fill-available; /* older iOS Safari */
}
/* Chrome sits against the true bottom of the visible viewport. */
.splash-dots { bottom: calc(78px + var(--safe-bottom)); }
.splash-skip { bottom: calc(38px + var(--safe-bottom)); }
/* ============================================================
LOG IS A PANE, NOT A POPUP
A modal over the top made sense when the app was one screen.
With a tab bar it read as an interruption of the app rather
than a part of it — and it covered the very bar you navigate
with. Logging is now the fourth pane and behaves like the
other three.
============================================================ */
.pane-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 20px 2px 14px;
}
.pane-head h2 {
margin: 0;
font-family: var(--font-display);
font-size: 27px;
font-weight: 800;
letter-spacing: -0.6px;
line-height: 1.05;
color: var(--wine);
}
.pane-back {
border: none;
background: none;
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
color: var(--ghost);
cursor: pointer;
padding: 6px 2px;
flex-shrink: 0;
transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) ease;
}
.pane-back:active { transform: scale(.95); opacity: .65; }
.pane-back:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; border-radius: 6px; }
/* The log pane's controls sit on the sunset like every other pane's do. */
/* `> input`, not ` input`. The period switch lives inside a .field, wrapped in
its label, and this is the `background` SHORTHAND — which resets
background-image to none. The switch paints its knob as two radial gradients
on background-image, so this rule was quietly deleting the knob and leaving
a bare pill. The child combinator reaches the text fields and not the
switch. */
#pane-log .field > input,
#pane-log .field > textarea { background: rgba(255,255,255,.86); }
#pane-log .howto { background: rgba(255,255,255,.72); }
.btn-primary { margin-top: 4px; }
#pane-log .btn-danger { margin-bottom: 4px; }
/* Settings gets the same heading, so the two read as siblings. */
#pane-settings h4.set-head:first-of-type { margin-top: 2px; }
/* ============================================================
THE CLIP CURLS OVER THE BAR
In the reference the coloured ribbon wraps the edge of the
white card and casts onto it. The clip now rises above the
bar's top edge, takes a highlight along that lip, and drops
a shadow back down onto the white — which is what reads as
depth rather than a coloured rectangle sitting inside.
============================================================ */
.clip {
border-radius: 20px;
background: linear-gradient(178deg, #C6B4EC 0%, #A996DC 26%, var(--violet) 100%);
box-shadow:
0 14px 22px -10px rgba(138, 21, 80, .42), /* cast onto the white bar */
0 3px 6px -2px rgba(138, 21, 80, .28),
inset 0 3px 0 rgba(255, 255, 255, .78), /* light along the lip */
inset 0 -10px 16px rgba(88, 20, 60, .20); /* the underside rolls off */
}
.clip.to-history { background: linear-gradient(178deg, #F3BDD3 0%, var(--blush) 28%, var(--rose) 100%); }
.clip.to-settings { background: linear-gradient(178deg, #FFD3AE 0%, #FFA97E 34%, #FB8A63 100%); }
/* Every tab now has real depth of its own, lit and shadowed. */
.tab .tab-ico {
filter: drop-shadow(0 2px 2px rgba(138, 21, 80, .22));
}
.tab.is-on .tab-ico {
filter: drop-shadow(0 2px 3px rgba(60, 10, 40, .38));
}
.tab .tab-label {
text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
/* the label needs clearing of the lip so the curl reads */
.tab { padding-top: 12px; }
/* The clip is the coloured element now, so everything riding on it is white.
The older per-tone colour rules were written when the icon plate carried
the colour, and they were still outranking the selected state. */
.tab.t-violet.is-on, .tab.t-rose.is-on, .tab.t-amber.is-on,
.tab.t-violet.is-on .tab-label, .tab.t-rose.is-on .tab-label,
.tab.t-amber.is-on .tab-label { color: var(--white); }
/* ============================================================
SPLASH, IN THE APP'S OWN MATERIAL
The splash used to be its own visual language: an inflatable
balloon font raster, glossy line-art drawings, a neon halo.
The app it opens is matte clay — rounded display type, soft
extrusion, light from the top-left, and a deep contact shadow
in magenta. Two different products, one after the other.
Everything below is built from the same primitives as the tab
bar and the segmented pills: --clay for the extrusion, --amber
and --tang for the warm end of the locked palette, and the
display face the rest of the app already sets its headings in.
============================================================ */
.splash-scene { position: absolute; inset: 0; display: block; overflow: hidden; }
.sky {
inset: 0;
/* The ramp had drifted to yellow-into-pink and lost both ends of the set.
A sunset runs violet at the top through pink and butter to tang at the
horizon — all four are in the locked palette and all four belong here. */
background:
radial-gradient(86% 52% at 24% 20%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%),
linear-gradient(168deg,
#9B84C9 0%,
var(--lilac) 14%,
#E9A8D0 32%,
var(--blush) 50%,
#F6D5B2 70%,
#F2DCA6 86%,
#EFB388 100%);
}
/* --- sun: a clay disc, and clay rays ---------------------------------- */
@keyframes sun-turn { to { transform: rotate(360deg); } }
@keyframes sun-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes clay-in {
0% { opacity: 0; transform: translate(-50%,-50%) scale(.74) translateY(14px); }
70% { opacity: 1; transform: translate(-50%,-50%) scale(1.035); }
100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
/* --- lettering: her artwork, per-letter lip, matte -----------------------
Back to her own letterforms. The Titan One pass was rounder as a shape but
rendered flat — a geometric face with one gradient across it has no bulge,
and no amount of shading on the outside fixes a letterform that is not
itself inflated.
The per-letter lip is cut from the artwork itself. Her lettering is a single
flat raster whose letters physically touch, so it cannot be segmented — I
tried, and the whole of "summer" is one connected blob. But her own shading
darkens both the outer edge of every letter AND every join where two letters
meet, so thresholding the luminance inside the glyphs yields exactly the
outline the lip needs. That is splash-l*-lip.png; rebuild with
tools/build-word-mask.py.
Two lines, two pairs of images, so `summer` can carry more curve and its own
motion than the line above it.
---------------------------------------------------------------------- */
.word {
position: absolute; left: 50%; top: 50%;
width: 100%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2vh;
}
/* The shadows sit on the LINE, not on the masked spans: CSS applies filter
BEFORE mask, so a filter on a masked element is drawn around its unmasked
rectangle and then clipped away entirely. */
.word-line {
filter:
drop-shadow(0 3px 3px rgba(168, 66, 58, .24))
drop-shadow(0 9px 12px rgba(150, 40, 92, .24))
drop-shadow(0 18px 26px rgba(138, 21, 80, .26));
}
/* Each line arrives on its own beat, then keeps a slow easy roll — the joy is
in the second line moving a little more than the first. */
.splash.animate .wl1 { animation: wl-in 860ms var(--ease-out) 340ms backwards,
wl-roll-a 6.4s var(--ease-in-out) 1500ms infinite; }
.splash.animate .wl2 { animation: wl-in 860ms var(--ease-out) 560ms backwards,
wl-roll-b 5.6s var(--ease-in-out) 1700ms infinite; }
@keyframes wl-in {
0% { opacity: 0; transform: scale(.66) translateY(20px) rotate(-5deg); }
58% { opacity: 1; transform: scale(1.06) translateY(-6px) rotate(1.5deg); }
80% { transform: scale(.98) translateY(2px) rotate(-.6deg); }
100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}
@keyframes wl-roll-a {
0%, 100% { transform: rotate(-1.4deg) translateY(0); }
50% { transform: rotate(.6deg) translateY(-5px); }
}
@keyframes wl-roll-b {
0%, 100% { transform: rotate(1.6deg) translateY(0) scale(1); }
50% { transform: rotate(-1.9deg) translateY(5px) scale(1.022); }
}
@media (prefers-reduced-motion: reduce) {
.splash.animate .wl1, .splash.animate .wl2 { animation: none; opacity: 1; }
}
/* ============================================================
TRIAL — the living line drawing.
Remove this block and the .splash-lines div in index.html to
take it out; nothing else depends on either.
============================================================ */
.splash-lines {
position: absolute; inset: 0;
--lines-strength: .55;
pointer-events: none;
opacity: 0;
}
/* Near-white on `overlay` — this layer is only the scene now, and the scene
sits high on the violet where that reads. The figure that needed a second,
darker ink has been replaced by artwork (see .drifter). */
.sl-scene {
color: rgba(255, 252, 246, .95);
mix-blend-mode: overlay;
}
.splash-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash.animate .splash-lines { animation: lines-in 1200ms var(--ease-out) 600ms forwards; }
@keyframes lines-in { to { opacity: var(--lines-strength); } }
/* --- alive: every line draws itself on, holds, and leaves ---------------
One shared cycle with staggered delays. `stroke-dasharray` is set per
element from its own length via pathLength, so a short path and a long one
travel at the same apparent speed instead of the long one crawling. */
/* `pathLength` is an SVG ATTRIBUTE, not a CSS property — set in CSS it is
silently dropped, and `stroke-dasharray: 1` then means a one-pixel dash
rather than "the whole path", so every line rendered as a faint dotted
trail that never drew on. It is on the elements in index.html now, which
normalises each path to length 1 so a short line and a long one draw at the
same apparent speed. */
.sl-draw {
stroke-dasharray: 1;
stroke-dashoffset: 0;
}
.splash.animate .sl-draw { animation: line-life 9s var(--ease-in-out) infinite backwards; }
@keyframes line-life {
0% { stroke-dashoffset: 1; opacity: 0; }
8% { opacity: 1; }
26%, 62% { stroke-dashoffset: 0; opacity: 1; }
86% { stroke-dashoffset: -1; opacity: 0; }
100% { stroke-dashoffset: -1; opacity: 0; }
}
/* The horizon, then the shoreline, then the foam behind it — 300ms apart, in
the order the eye reads them. .d5 had no rule at all, so the foam fell back
to 0ms and led the other two instead of trailing them. */
.splash.animate .d3 { animation-delay: 320ms; }
.splash.animate .d4 { animation-delay: 620ms; }
.splash.animate .d5 { animation-delay: 920ms; }
/* --- the water actually moves ------------------------------------------
Each band is drawn far wider than the viewport and translated by exactly
one wavelength, so the loop is seamless — a shorter path would visibly
snap back at the wrap. */
.splash.animate .wv { animation: wave-drift linear infinite; }
.splash.animate .w1 { animation-duration: 9s; }
.splash.animate .w2 { animation-duration: 12s; animation-direction: reverse; }
.splash.animate .w3 { animation-duration: 15s; }
.splash.animate .w4 { animation-duration: 11s; animation-direction: reverse; }
@keyframes wave-drift {
from { transform: translateX(0); }
to { transform: translateX(136px); } /* one full q-curve pair */
}
@media (prefers-reduced-motion: reduce) {
.splash-lines { opacity: var(--lines-strength); animation: none; }
.sl-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
.wv { animation: none !important; }
}
@keyframes glass-sway {
0%,100% { transform: translate(-50%,-50%) rotate(0deg); }
32% { transform: translate(-50%,-50%) rotate(1.8deg); }
68% { transform: translate(-50%,-50%) rotate(-1.4deg); }
}
.fizz { position: absolute; left: 50%; top: 22%; width: 56%; height: 24%;
transform: translateX(-50%); pointer-events: none; }
.fizz i { position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,.9); opacity: 0; }
.splash.animate .fizz i { animation: fizz-up 2800ms var(--ease-out) infinite; }
@keyframes fizz-up {
0% { opacity: 0; transform: translateY(0) scale(.4); }
18% { opacity: .85; }
100% { opacity: 0; transform: translateY(-104px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.fizz { display: none; }
}
/* ============================================================
BUBBLES — a cascade running backwards
They rise from the bottom edge and, part way up, each one
fans into two or three smaller ones, which fan again. What
starts as four bubbles is a screenful by the time the splash
leaves, and they are what carries it away.
Position, size and timing are set per bubble by app.js
through the Web Animations API. Nothing here may set an
animation on `.motes i`: the version before this one did, and
the inline duration app.js was writing then overrode the
exit's own timing, so the pop ran for eight seconds behind a
fade that had already finished.
============================================================ */
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i {
position: absolute;
left: 0; top: 0;
border-radius: 50%;
opacity: 0; /* the animation owns opacity */
will-change: transform, opacity;
background:
/* the specular pin, up and to the left, as on the clay */
radial-gradient(circle at 30% 26%,
rgba(255,255,255,.98) 0 6%,
rgba(255,255,255,.52) 13%,
rgba(255,255,255,0) 34%),
/* warm iridescence pooling in the belly */
radial-gradient(circle at 70% 74%,
rgba(255,190,226,.58) 0%,
rgba(255,228,168,.32) 44%,
rgba(255,255,255,0) 72%),
/* the soap rim: a bubble is mostly edge */
radial-gradient(circle at 50% 50%,
rgba(255,255,255,0) 54%,
rgba(255,255,255,.56) 82%,
rgba(255,208,236,.50) 93%,
rgba(255,255,255,0) 100%);
box-shadow:
inset -5px -7px 16px rgba(138, 21, 80, .18),
inset 4px 5px 14px rgba(255, 255, 255, .52),
0 3px 12px rgba(138, 21, 80, .12);
}
/* --- the exit ---------------------------------------------------------
The bubbles' own pop is driven from app.js so each starts from where it
actually is. Here the artwork gets out of their way and the sky thins,
so the app is already showing through the gaps. */
/* The scene owns no entrance — the strokes, the lines and the lettering each
arrive on their own — so nothing may animate it in. The :not(.popping) is
load-bearing: this rule carries !important, and both classes are on the
element at once during the exit, so without it nothing the exit declares
below can ever take effect. */
.splash.animate:not(.popping) .splash-scene { animation: none !important; opacity: 1 !important; }
/* But it has to LEAVE. This selector used to carry `.splash.popping` too, which
pinned the artwork fully opaque for the whole exit while sky-out spent 760ms
removing the only thing behind it — so the horizon, the water and the
lettering hung over the Log screen for most of a second and then cut out when
`hide` landed 160ms later, which is what read as the line work outliving the
fade and then disappearing rather than going. The rule that was supposed to
take the artwork away was written without a declaration block, swallowed its
own @keyframes with it, and had therefore never once run.
It goes first now, a beat ahead of the sky, and the bubbles outlive them
both — which is the transition. */
.splash.popping .splash-scene { animation: scene-out 560ms var(--ease-in-out) 40ms forwards; }
@keyframes scene-out { to { opacity: 0; transform: scale(1.05); } }
.splash.popping .sky { animation: sky-out 760ms var(--ease-in-out) 60ms forwards; }
@keyframes sky-out { to { opacity: 0; transform: scale(1.08); } }
.splash.popping .splash-dots,
.splash.popping .splash-skip { animation: chrome-out 240ms linear forwards; }
@keyframes chrome-out { to { opacity: 0; } }
/* The bubble layer must outlive the artwork — it is the transition. */
.splash.popping .motes { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.motes { display: none; }
.splash.popping .sky { animation: none; }
.splash.popping .splash-scene { animation: none; }
}
/* ============================================================
TAB BAR v2 — Log first, warm at both ends, icons that move
============================================================ */
/* the purple circle is gone — the clip is the only coloured thing */
.tab.t-butter .tab-ico { background: none; box-shadow: none; width: 28px; height: 28px; }
/* Bigger icons, more presence. */
.tab { padding: 13px 2px 9px; min-height: 62px; gap: 5px; }
/* --- icons that actually do something on selection -------------------- */
@keyframes ico-pop {
0% { transform: translateY(0) scale(1); }
38% { transform: translateY(-5px) scale(1.22); }
100% { transform: translateY(-1px) scale(1.06); }
}
/* The last survivor of an even older set — spin-quarter spun the whole Log
sprite a quarter turn on selection. It had been buried under a later block
for so long that removing that block brought it back, which is the standing
hazard in this file: nothing was ever deleted, only shadowed. Deleted now,
and its @keyframes went with it. */
/* --- the icons move as line drawings, not as wobbling sprites ---------
Every one of these used to animate the WHOLE