/* ========================================================================== SPROUT — "Viridium" -------------------------------------------------------------------------- A dark, jewel-toned botanical design system. Reference: rain-beaded leaves in deep forest green, lit from one side, with a high-contrast display serif in ivory. Principles: · Crisp over cuddly. Radii stay between 2 and 6px; luxury reads sharp. · Hairlines, not borders. Structure comes from 1px mint at 8–18% alpha. · Light is a material. Radial glows and specular edges do the work that drop shadows do in a light UI. · Motion is slow and weighted. Expo-out, 340–620ms, never bouncy. · Type carries the luxury: PP Hatton caps for display in two weights, Cormorant Garamond for editorial serif, Jost for UI, Sacramento for one flourish. Two themes, both premium: "viridium" (dark, default) and "conservatory" (light ivory) — set via data-theme on . Part D holds the light map. Sections: A tokens/reset/type/shell · B components · C feature blocks D motion, utilities, themes, responsive, a11y ========================================================================== */ /* ========================================================================== A1 · Tokens ========================================================================== */ :root { /* --- Surfaces: near-black emerald, climbing to raised glass --- */ --bg-0: #050A08; /* deepest — behind everything */ --bg-1: #0A1410; /* page */ --bg-2: #0E1B15; /* surface / card */ --bg-3: #13251D; /* raised / hover */ --bg-4: #193024; /* pressed / selected */ /* --- Glass: translucent white over the emerald, plus blur --- */ --glass: rgba(255, 255, 255, 0.045); --glass-2: rgba(255, 255, 255, 0.075); --glass-3: rgba(255, 255, 255, 0.11); /* --- Hairlines. Mint-tinted so they never look grey. --- */ --hair: rgba(214, 237, 226, 0.10); --hair-2: rgba(214, 237, 226, 0.17); --hair-3: rgba(214, 237, 226, 0.28); /* --- Ink --- */ --ink: #F3F6F1; --ink-2: rgba(228, 240, 232, 0.72); --ink-3: rgba(206, 226, 214, 0.50); --ink-4: rgba(196, 218, 206, 0.32); /* --- Greens --- */ --emerald-deep: #0F3A29; --emerald: #1F6B4C; --emerald-lit: #2F9A70; --emerald-glow: #3FBE8B; --mint: #9FD3BE; --mint-2: #C9E7D9; --mint-wash: rgba(63, 190, 139, 0.11); /* --- Champagne. The one metallic; used for premium cues and overdue. --- */ --gold: #C8A96B; --gold-lit: #DFC58F; --gold-wash: rgba(200, 169, 107, 0.13); /* --- Semantic accents --- */ /* --sun is gone. It was a second champagne a few degrees off --gold, and the two contradicted each other: .sev-med took its text from one and its cause mark from the other, inside the same card. A two-step ladder expressed in colours that close is not read as a ladder. Where a finer step is genuinely needed the form carries it — .drop-now still breathes where .drop-due sits still. */ /* There was a --sky here, a cornflower blue, used for watering and for the weather glyph. It is gone. Emerald, ivory, champagne and terracotta is a closed set that holds together; a fifth hue borrowed from utility-app convention was the one thing on screen that looked like it came from a different product. Water now wears the house colour, which is also the honest reading — watering is the normal business of the app, not a warning, and mint is what "normal" looks like here. There was a --rose here too, and it has gone the same way. It held the top step of two scales: "highly toxic" one rung above terracotta's "toxic", and "act quickly" in Diagnose. Two objections, and the second is the one that settled it. First, it made five hues out of a set the paragraph above had just closed at four. Second, and worse, nobody can tell pink from terracotta at pill size and read an ordering off it — they are adjacent warm hues, so the scale's most urgent step was signalled by a distinction the eye resolves as "some warm colour". A scale's top step has to be louder, not merely other. Terracotta now covers both rungs and the top one is filled rather than washed, which reads instantly and from across the room. See .pill-terra-hi. */ --terra: #D08A62; --terra-soft: rgba(208, 138, 98, 0.14); /* --- Oxblood. The fourth rung, and the only one that is not a degree of the other three: it marks a fact that cannot be taken back — an animal that can be seriously harmed, an action with no undo. Fill only, in both themes. Measured against this ground it reads 1.72:1 as text or a hairline, which is invisible; as a fill under ivory it reads between 7.4 and 11.6:1, which is better than the emerald primary manages. That asymmetry is not a preference, it is why the rule is "always filled" — the colour has no other legible use here. It also steps *down* from the ground rather than up, which is what makes it read as a different class of thing rather than a fourth degree of urgency. The pink that used to hold this slot differed only in hue, at the same lightness, and nobody could order the two. --- */ --blood: #6E2320; --blood-lit: #8A2C28; --blood-deep: #571B19; --blood-ink: #F6EDE9; --blood-edge: rgba(110, 35, 32, 0.85); /* Pill text. These exist because .pill-sun and .pill-terra used to set their text with a literal hex — #EBCB8B and #E2AC8C, both pale tints chosen to sit on near-black. The conservatory theme dutifully overrode --sun and --terra and it changed nothing, because the text colour was baked where no stylesheet could reach it: on ivory the pills printed pale champagne on pale champagne and pale terracotta on pale terracotta, legible only if you already knew what they said. Exactly the mistake the plant tiles made with their gradient. If a theme can override the wash, it must be able to override the ink. */ --terra-ink: #E2AC8C; --terra-hi-ink: #23120A; /* Ink for the one *filled* button — the emerald primary. A token and not a literal for the same reason as the pill inks above, but with a sharper edge to it: the theme override used to be a rule, `[data-theme= "conservatory"] .btn { color: ... }`, and at (0,2,0) that outranked every variant's own (0,1,0) `color`. So in Conservatory the ghost, soft, terracotta and danger buttons all had their ink forced to near-ivory — which on the outline variants means ivory type on ivory paper. The Delete button was invisible on its own background, and it is the one control in the app that must never be mistaken for decoration. It had already been noticed once and patched one variant at a time (`.btn-soft` got its own override), which is the shape of a bug being treated as four bugs. As a token the base declaration stays at (0,1,0) and the variants beat it on source order, the way the cascade was designed to work. */ --btn-ink: #F4FBF7; /* --- Compatibility aliases. The view files reference these inline; the names are load-bearing even though the values are all new. --- */ --paper: var(--bg-1); --paper-deep: var(--bg-0); --surface: var(--bg-2); --surface-2: var(--bg-3); --leaf: var(--emerald-lit); --leaf-deep: var(--emerald-deep); --leaf-soft: var(--mint-wash); --leaf-wash: var(--mint-wash); --line: var(--hair); --line-2: var(--hair-2); /* --- Type --- */ /* PP Hatton, self-hosted. Two weights standing in for an optical size axis the face does not have: the display role runs from 14px on a section title to 86px on a hero tile letter, and a high-contrast serif wants more weight as it shrinks and less as it grows. 200 at 28px and above 500 below 28px Every rule that names --display therefore names a weight too. Nothing is left to the browser to synthesise, because with only two faces installed a request for 400 would be resolved by guesswork. The fallback is Cormorant Garamond rather than Times: it is already loaded for the serif role, and a missing display face landing on the app's own body serif is a far smaller shock than landing on a system face nothing else here uses. */ --display: 'PP Hatton', 'Cormorant Garamond', Didot, 'Times New Roman', serif; --serif: 'Cormorant Garamond', Didot, Georgia, 'Times New Roman', serif; --sans: 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --script: 'Sacramento', 'Segoe Script', cursive; /* --- Radii. Crisp. --- */ --r-sm: 2px; --r: 3px; --r-lg: 6px; --r-xl: 14px; /* --- Elevation. On dark, shadow is depth + a specular top edge. --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.60); --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.72); --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.055); /* --- Segmented control --- A recessed track with one raised key in it. On dark ground the track is a hole and the key is lit; both flip on paper, so both are tokens. */ /* The plan's own materials. Floors carry the light reading, rung by rung; walls stay neutral so the floor is the only thing saying anything. */ --plan-grid: rgba(214, 237, 226, 0.06); --plan-grid-2: rgba(214, 237, 226, 0.13); --plan-floor-x: #17211C; /* light unknown */ --plan-floor-0: #16211B; --plan-floor-1: #1E3026; --plan-floor-2: #2C4430; --plan-floor-3: #4B5A34; --plan-floor-4: #6E6B3A; --plan-wall-a: #1B2A22; --plan-wall-b: #243529; --plan-wall-edge: rgba(214, 237, 226, 0.22); --plan-parapet: rgba(36, 53, 41, 0.55); --plan-pane: #F1E3A8; --plan-pane-dim: #6F8E7E; --plan-pot: #0E1B15; --track: rgba(0, 0, 0, 0.22); --track-in: inset 0 1px 2px rgba(0, 0, 0, 0.30); --seg-on: rgba(255, 255, 255, 0.14); /* --- Form fields --- The same recess as the segmented track, and tokens for the same reason: on dark ground a field is a well punched into the surface, on paper it is a shallow tint with a pressed top edge. These were hardcoded at 22% and 30% black, which on ivory is a muddy grey box — and since the input keeps `color: var(--ink)`, in Conservatory that meant near-black type on a grey-black fill in every form in the app. The room sheet's name, aspect, light and humidity values were all unreadable. It survived this long because a field's *value* only fills in when you have data to edit, and a sheet only exists after a tap, so nothing that renders one was ever captured. */ --field: rgba(0, 0, 0, 0.22); --field-on: rgba(0, 0, 0, 0.30); --field-in: none; /* --- Modal surfaces --- The sheet and the toast. Hardcoded before this, which put a charcoal slab on Conservatory's ivory paper while every control inside it went on resolving --ink, --hair and --glass from the light theme. Half the sheet was light-on-dark and half dark-on-dark. The sheet is where every form in this app lives, so it is the last surface that should have been left off the token list. */ --sheet-bg: #0C1712; --sheet-glow: rgba(63, 190, 139, 0.09); --toast-bg: rgba(12, 23, 18, 0.92); /* Ink on the filled champagne count in the nav. Champagne is light here and dark in Conservatory, so a fixed near-black is legible in one theme and nearly invisible in the other. */ --badge-ink: #16140C; /* --- Photoless plant plates --- Consumed by .tmark, which gets its hue from UI.plantTile. Deep, low luminance and narrow-gamut, so a wall of them reads as one material catching light from one direction rather than nine coloured squares. Lightnesses are unitless because .tmark multiplies them by 1% after adding the per-plant lift. --tile-sheen is bare channels so the same token can take a computed alpha. */ /* --- Photoless plant plates --- Six hand-picked pairs rather than a hue computed from a name hash. The hash spanned 100–143° at 26% saturation and 11% lightness, which is a band too narrow and too dark to hold forty-four steps: two plants could land a degree apart and render identically, so the differentiation it promised was not delivered. Six is a number the eye can actually tell apart, and lightness varies across the set as well as hue, which is what does most of the work at this luminance. Cyan is deliberately absent. An earlier band ran to 186°, invisible here and a pale cornflower blue in Conservatory — half the tiles in the daylight theme came out the one colour this app has no use for. ui.js picks the index from the same name hash as before, so a plant keeps its identity; only the palette it draws from has changed. --- */ --tint-0a: #1B4636; --tint-0b: #123024; --tint-1a: #2F4A22; --tint-1b: #213517; --tint-2a: #21403C; --tint-2b: #162E2B; --tint-3a: #3E4722; --tint-3b: #2C3317; --tint-4a: #163A2C; --tint-4b: #0E281E; --tint-5a: #4A4529; --tint-5b: #35311C; --tile-sheen: 63, 190, 139; --tile-sheen-a: 0.13; --tile-ink: rgba(232, 240, 233, 0.82); /* --- Motion --- */ --ease: cubic-bezier(0.16, 1, 0.30, 1); /* expo out */ --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 180ms; --dur-2: 340ms; --dur-3: 620ms; /* --- Metrics --- */ --nav-h: 78px; /* 70 of row plus the 8 above it; the inset is added on top in .tabbar */ --side-w: 260px; --pad: 22px; --maxw: 1080px; } /* ========================================================================== A1b · The display face -------------------------------------------------------------------------- Self-hosted rather than fetched, which is the better arrangement here for three reasons beyond licensing: it removes a render-blocking round trip to two more origins, it makes the app genuinely offline on a first visit rather than once the font cache has filled, and it puts the one typeface carrying the brand under our own version control instead of a third party's. Subset to Latin, Latin-1 and Latin Extended-A. The display face is always uppercase, but a plant tile prints the first character of a name the user typed, so accented capitals have to be present. 'swap' rather than 'block': the splash already covers first paint until document.fonts resolves, so there is nothing to protect against, and a blocked face on a slow connection would hold the whole app behind it. ========================================================================== */ @font-face { font-family: 'PP Hatton'; src: url('fonts/hatton-ultralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Hatton'; src: url('fonts/hatton-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* The other three faces, self-hosted too as of the store build. -------------------------------------------------------------------------- They came from Google until now, which cost a second origin on every cold start, an IP address handed to a third party for nothing, and a native shell that could not render itself correctly on a first launch with no network — a service worker cannot precache a Google woff2 by name, because the URL is not knowable until the stylesheet has been parsed. Cormorant and Jost are the variable fonts, axis-clipped to the weights the app actually draws and subsetted here. That is not a detail: as eight static files these were 254KB, and as three variable ones they are 124KB for a wider range. Jost alone went from four files at 104KB to one at 24. Sacramento has a single weight, so there is nothing to vary and it stays the static subset Google was already serving. The weight ranges are real ranges, not a formality. Jost is declared 300-600 because the Profile rows ask for 600 and were being given a synthesised fake bold; Cormorant is 300-400 because nothing in the sheet asks the body serif for more, and a clipped axis is a smaller file. latin and latin-ext stay separate for the reason Google separates them. Only latin is precached in sw.js — latin-ext is fetched the first time someone's plant is called Aloë and cached by the same-origin handler from then on. All three are SIL Open Font License; see fonts/LICENSES.md. */ @font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-var.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; 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: 'Cormorant Garamond'; src: url('fonts/cormorant-var-ext.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; 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: 'Cormorant Garamond'; src: url('fonts/cormorant-var-italic.woff2') format('woff2'); font-weight: 300 400; font-style: italic; font-display: swap; 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: 'Cormorant Garamond'; src: url('fonts/cormorant-var-italic-ext.woff2') format('woff2'); font-weight: 300 400; font-style: italic; font-display: swap; 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: 'Jost'; src: url('fonts/jost-var.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; 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: 'Jost'; src: url('fonts/jost-var-ext.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; 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: 'Sacramento'; src: url('fonts/sacramento-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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: 'Sacramento'; src: url('fonts/sacramento-400-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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; } /* ========================================================================== A2 · Reset ========================================================================== */ * { box-sizing: border-box; } /* The `hidden` attribute is how the app shows and hides the back arrow, the topbar subtitle, the weather chip and the sheet backdrop. The browser's own `[hidden] { display: none }` is weaker than any class rule that sets a display, so it loses to things like `.icon-btn { display: inline-flex }`. This makes `el.hidden = true` mean what it says. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Two offset radial glows stand in for the photograph's raking light. Fixed so they never scroll away, and behind everything via a negative z-index. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 680px at 12% -8%, rgba(47, 154, 112, 0.17), transparent 62%), radial-gradient(900px 620px at 92% 108%, rgba(31, 107, 76, 0.20), transparent 60%), radial-gradient(700px 500px at 78% 12%, rgba(63, 190, 139, 0.07), transparent 66%), var(--bg-1); } h1, h2, h3, h4, p { margin: 0; } button { font: inherit; color: inherit; } img { max-width: 100%; display: block; } ::selection { background: rgba(63, 190, 139, 0.28); color: var(--ink); } /* Slim, self-effacing scrollbars. */ * { scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--hair-3); background-clip: content-box; } /* Keyboard focus only — mint, generous, never suppressed. */ :focus-visible { outline: 1px solid var(--emerald-glow); outline-offset: 2px; } /* Fallback size for UI.icon() output. Container rules like `.btn svg` are more specific and override this; it only catches icons placed somewhere that has no rule of its own, which would otherwise stretch to fill. */ .ico { width: 18px; height: 18px; flex: 0 0 auto; } /* ========================================================================== A3 · Typography ========================================================================== */ /* Display caps. Tracking tightens as size grows, and so does weight — .d-md is 21px and takes the 500, the two above it take the 200. */ .d-xl, .d-lg { font-family: var(--display); font-weight: 200; color: var(--ink); text-transform: uppercase; line-height: 1.02; } .d-md { font-family: var(--display); font-weight: 500; color: var(--ink); text-transform: uppercase; line-height: 1.02; } .d-xl { font-size: clamp(38px, 8vw, 66px); letter-spacing: 0.055em; } .d-lg { font-size: clamp(28px, 5.4vw, 42px); letter-spacing: 0.075em; } .d-md { font-size: 21px; letter-spacing: 0.12em; } /* Editorial serif — plant names, numbers, anything that should feel written rather than rendered. */ .s-lg, .s-md, .s-sm { font-family: var(--serif); font-weight: 300; color: var(--ink); line-height: 1.2; } .s-lg { font-size: clamp(26px, 4.6vw, 36px); letter-spacing: 0.004em; } .s-md { font-size: 21px; } .s-sm { font-size: 17px; } /* The flourish. Sacramento is a monoline script — it reads as a signature, so it appears once per screen at most and never for anything functional. */ .script { font-family: var(--script); font-weight: 400; color: var(--mint); letter-spacing: 0.01em; line-height: 1; } /* Eyebrow: tiny tracked-out caps. The workhorse of the whole system — it is what makes a plain stack of cards look curated. */ .eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); } .hint { font-size: 13px; color: var(--ink-3); line-height: 1.62; } /* The reset zeroes every p margin, so a .hint closing a card body sat 8px under the last line of whatever preceded it — on the watering card that made the species note look like the detail line belonging to the final interval factor. It is a closing aside about the card as a whole, so it needs its own air. */ .card > .hint { margin-top: 14px; } .small { font-size: 13px; } .tiny { font-size: 11.5px; letter-spacing: 0.04em; } .muted { color: var(--ink-3); } .dim { color: var(--ink-4); } .nowrap { white-space: nowrap; } .center { text-align: center; } .link-btn { background: none; border: 0; padding: 0; font-size: 13px; letter-spacing: 0.02em; color: var(--mint); cursor: pointer; border-bottom: 1px solid transparent; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .link-btn:hover { color: var(--mint-2); border-bottom-color: var(--hair-3); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== A4 · Splash ========================================================================== */ .splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(760px 520px at 50% 42%, rgba(47, 154, 112, 0.22), transparent 70%), var(--bg-0); /* Slower than --dur-3, and only on the way out: the app behind it is already painted, so the dissolve is the one moment on this screen that can afford to be unhurried. */ transition: opacity 760ms var(--ease), visibility 760ms; } .splash.is-out { opacity: 0; visibility: hidden; } .splash-inner { transition: opacity 520ms var(--ease-io), transform 520ms var(--ease-io); } .splash-inner.is-quiet { opacity: 0; transform: translateY(-12px); pointer-events: none; } /* ---- First-run introduction, on the splash ---- Same field, same face. A small wordmark keeps the scene continuous while the questions take the centre one at a time; the dots and the skip sit low and quiet so the question is the only thing at eye level. */ .ob { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transition: opacity 380ms var(--ease-io); } .ob.is-leaving { opacity: 0; pointer-events: none; } .ob-brand { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 9vh); font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--ink-3); animation: obIn 900ms var(--ease) 260ms both; } .ob-stage { width: 100%; max-width: 420px; } .ob-step { display: flex; flex-direction: column; align-items: center; width: 100%; } .ob-step > * { animation: obIn 720ms var(--ease) both; } .ob-step > *:nth-child(2) { animation-delay: 90ms; } .ob-step > *:nth-child(3) { animation-delay: 180ms; } .ob-step > *:nth-child(4) { animation-delay: 270ms; } .ob-step.is-leaving > * { animation: obOut 360ms var(--ease-io) both; } .ob-step.is-leaving > *:nth-child(2) { animation-delay: 40ms; } .ob-step.is-leaving > *:nth-child(3) { animation-delay: 80ms; } .ob-step.is-leaving > *:nth-child(4) { animation-delay: 120ms; } .ob-q { font-family: var(--display); font-weight: 200; font-size: clamp(28px, 7.4vw, 40px); line-height: 1.15; letter-spacing: 0.05em; color: var(--ink); text-align: center; text-wrap: balance; margin: 0 0 26px; } .ob-input { width: 100%; max-width: 360px; background: none; border: 0; border-bottom: 1px solid var(--hair-3); border-radius: 0; color: var(--ink); font-family: var(--serif); font-size: 28px; text-align: center; padding: 6px 0 12px; outline: none; transition: border-color var(--dur-2) var(--ease); } .ob-input::placeholder { color: var(--ink-4); } .ob-input:focus { border-bottom-color: var(--mint); } /* The rule turning mint is the focus cue; the global outline drew a box around a field that is meant to be a line. */ .ob-input:focus-visible { outline: none; } .ob-hint { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-3); text-align: center; text-wrap: balance; max-width: 36ch; margin: 16px auto 0; } .ob-note { min-height: 1.5em; color: var(--mint); } .ob-actions { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .ob-actions .btn { min-width: 220px; } .ob-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ob-chip { padding: 11px 18px; font-size: 13.5px; } .ob-opts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; } .ob-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 14px 18px; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--glass); color: var(--ink); font-family: var(--serif); font-size: 18px; text-align: center; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .ob-opt small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); } .ob-opt.is-hinted { border-color: var(--hair-3); } .ob-opt.is-on { border-color: var(--mint); background: var(--mint-wash); } .ob-opt.is-on small { color: var(--mint); } .ob-opt:active { transform: scale(0.985); } .ob-dots { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 10vh); display: flex; gap: 9px; animation: obIn 900ms var(--ease) 420ms both; } .ob-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hair-3); transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .ob-dot.is-on { background: var(--mint); transform: scale(1.3); } .ob-dot.is-done { background: var(--ink-4); } .ob-skip { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5vh); background: none; border: 0; padding: 8px 12px; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4); cursor: pointer; animation: obIn 900ms var(--ease) 600ms both; } @keyframes obIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes obOut { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } } @media (prefers-reduced-motion: reduce) { .ob-step > *, .ob-step.is-leaving > *, .ob-brand, .ob-dots, .ob-skip { animation: none; } } .splash-inner { text-align: center; padding: 0 28px; } /* The wordmark arrives a letter at a time. It used to animate as one block, with the tracking opening from 0.34em to 0.22em as it rose. That reads well in isolation and badly here: the whole word shifting width while it fades is the same motion as a font swapping underneath it, which is the exact ugliness this screen exists to hide. Per-letter, the tracking never moves — each glyph resolves in its final position, and what travels is focus rather than metrics. */ .splash-mark { font-family: var(--display); font-weight: 200; font-size: clamp(40px, 12vw, 78px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); /* Optical centring: tracking adds a trailing gap after the last letter. */ text-indent: 0.22em; } .splash-mark span { display: inline-block; animation: letterIn 900ms var(--ease) both; } /* 70ms apart. Faster and it reads as one blurred block; slower and the eye starts reading the letters as a countdown rather than a word assembling. */ .splash-mark span:nth-child(1) { animation-delay: 60ms; } .splash-mark span:nth-child(2) { animation-delay: 130ms; } .splash-mark span:nth-child(3) { animation-delay: 200ms; } .splash-mark span:nth-child(4) { animation-delay: 270ms; } .splash-mark span:nth-child(5) { animation-delay: 340ms; } .splash-mark span:nth-child(6) { animation-delay: 410ms; } /* The script is wiped in from the left rather than faded, because that is how the word would actually be written. The opacity keyframe rides along so a browser that drops the clip-path still gets a clean fade instead of an instant appearance. */ .splash-script { font-family: var(--script); font-size: clamp(26px, 7vw, 40px); color: var(--mint); margin-top: -2px; /* Descenders in the script face sit below the line box; without the pad the clip would shave the tails of g and the y-descenders as it passes. */ padding-bottom: 0.12em; animation: scriptIn 1000ms var(--ease-io) 780ms both; } /* A hairline with a specular sweep travelling along it. It draws itself out from the centre first — an empty rule sitting under a word that has not arrived yet was the one element on this screen that began finished. */ .splash-rule { margin: 20px auto 0; width: 132px; height: 1px; background: var(--hair); position: relative; overflow: hidden; animation: ruleIn 700ms var(--ease) 1360ms both; } .splash-rule i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--mint), transparent); transform: translateX(-100%); animation: sweep 1700ms var(--ease-io) 1900ms infinite; } @keyframes letterIn { from { opacity: 0; transform: translateY(20px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes scriptIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes ruleIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes sweep { to { transform: translateX(100%); } } /* ========================================================================== A5 · Grain ========================================================================== */ /* Fractal noise at very low opacity. Kills the flatness of large dark fields and gives the surface a printed quality. */ .grain { position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== A6 · App shell ========================================================================== */ .app { min-height: 100vh; } .main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) calc(var(--nav-h) + 40px + env(safe-area-inset-bottom, 0px)); } /* --- Topbar --- */ /* The bar bleeds out to the edges of .main and pads itself back in. It sits inside .main, which carries the page's side gutter — so a background painted on the bar stopped short of each edge, and the cards scrolling underneath were visible through those two strips, unblurred, either side of a floating plate. The blur made it worse rather than hiding it: a sharp band of moving content beside a frosted one. The gutter is read from --pad rather than repeated, because .main's padding changes at both desktop breakpoints and a bleed that does not follow it reintroduces the same seam a size later. A 100vw layer centred on the bar was the first attempt and was wrong: left:50% centres on the element, and on desktop .main is pushed right by the sidebar, so the layer hung 130px off the right of the document and put a horizontal scrollbar on every wide page. Bleeding by the gutter cannot overhang, because the gutter is what it is cancelling. */ .topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: flex-end; gap: 14px; /* The top inset is not optional here. The viewport is viewport-fit=cover and the shell draws edge to edge, so without it the title sits directly under the system clock — which is exactly what it did on the first device build: "TODAY" with the time printed through the O. 26px clears nothing on a phone whose status bar is nearer 48. The blurred gradient still runs up behind the bar, so the field reaches the top of the screen and only the text is moved down. */ padding: calc(26px + env(safe-area-inset-top, 0px)) var(--pad) 16px; margin-inline: calc(var(--pad) * -1); background: linear-gradient(to bottom, var(--bg-1) 58%, rgba(10, 20, 16, 0)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Hairline that fades at both ends rather than hitting the edges. */ .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 18%, var(--hair-2) 82%, transparent); } .topbar-titles { min-width: 0; flex: 1; } .topbar-title { font-family: var(--display); font-size: clamp(27px, 5.6vw, 38px); font-weight: 200; letter-spacing: 0.085em; text-transform: uppercase; line-height: 1.04; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Hatton reports a content area of about 1.15em, against a line box of 1.04em — so the half-leading is negative and the caps' ink starts a fraction above the box. Measured at the 27px end: the ink top sits 0.46px outside, and overflow:hidden shaved it, taking a slice off the top of every title. On a 3x screen that is a visible flat edge across T, O, D, A and Y. The overflow has to stay — it is what gives a long plant name its ellipsis. So the clip box grows instead: padding extends it upward, and the matching negative margin puts the baseline back where the layout had it, leaving every other measurement on this bar untouched. */ padding-top: 0.08em; margin-top: -0.08em; } .topbar-sub { margin-top: 5px; font-size: 12.5px; font-weight: 300; letter-spacing: 0.055em; color: var(--ink-3); } .topbar-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; } .topbar-back { margin-bottom: 3px; } /* --- View --- */ .view { padding-top: 26px; animation: viewIn var(--dur-3) var(--ease) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* --- Sidebar (desktop only; Part D reveals it) --- */ .sidebar { display: none; } .brand { display: flex; align-items: center; gap: 11px; } .brand-glyph { flex: 0 0 auto; width: 30px; height: 30px; color: var(--emerald-glow); } .brand-name { font-family: var(--display); font-weight: 500; font-size: 23px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); text-indent: 0.2em; } /* .brand-script is gone from the sidebar. The script is the one flourish in the app and it only works while it stays rare; sitting above the navigation for a whole session is not rare. It keeps the splash, where the product is introducing itself, and the mark takes its place here. */ .brand-mark-lock { display: flex; align-items: center; gap: 11px; } .brand-mark-lock svg { flex: 0 0 auto; } /* Legacy hook — the leaf glyph was dropped when the wordmark came in. */ .brand-mark { display: none; } .side-nav { display: flex; flex-direction: column; gap: 2px; } .side-link { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 0; border-radius: var(--r); background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; position: relative; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .side-link svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.3; } .side-link:hover { color: var(--ink); background: var(--glass); } /* Active state is a mint hairline plus a whisper of wash — restrained where a filled pill would look cheap. */ .side-link.is-active { color: var(--ink); background: var(--mint-wash); } .side-link.is-active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 18px; background: var(--emerald-glow); border-radius: 99px; } .side-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--gold-wash); border: 1px solid rgba(200, 169, 107, 0.34); color: var(--gold-lit); font-size: 10.5px; letter-spacing: 0.06em; text-align: center; } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } /* --- Theme toggle --- */ .theme-toggle { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--glass); color: var(--ink-3); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--hair-3); background: var(--glass-2); } .theme-toggle svg { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 1.3; } /* --- Weather chip --- */ .weather-chip { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--sheen); font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-3); } .weather-chip-ico { display: flex; align-items: center; flex: 0 0 auto; } .weather-chip-ico svg { width: 20px; height: 20px; stroke-width: 1.15; color: var(--ink-3); } .weather-chip-body { min-width: 0; } .weather-chip-t { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--ink); line-height: 1; } .weather-chip-l { margin-top: 3px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); } /* --- Tabbar (mobile) --- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; /* The inset is added to the height, not taken out of it. It was inside a fixed 70px with border-box sizing, so on a phone with a gesture bar the icons lost that space and ended up pressed against the bottom edge. The 8px of top padding is the other half of the same complaint: the row had nothing between it and the hairline above. */ height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); display: grid; grid-auto-flow: column; align-items: stretch; padding: 8px 4px calc(env(safe-area-inset-bottom, 0px)); background: rgba(8, 16, 12, 0.72); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border-top: 1px solid var(--hair); } .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; background: none; color: var(--ink-4); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--dur-2) var(--ease); } .tab svg { width: 21px; height: 21px; stroke-width: 1.3; transition: transform var(--dur-2) var(--ease); } .tab.is-active { color: var(--ink); } .tab.is-active svg { transform: translateY(-1px); stroke-width: 1.5; } /* A short mint rule above the active tab, drawn from the centre out. */ .tab::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 1px; background: var(--emerald-glow); transform: translateX(-50%); transition: width var(--dur-2) var(--ease); } .tab.is-active::before { width: 26px; } .tab-badge { position: absolute; top: 11px; left: 50%; margin-left: 7px; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--gold); color: var(--badge-ink); font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 16px; text-align: center; } /* Champagne on these two means "due" — the urgency ladder's second rung. The greenhouse plus is not a due task, it is an invitation to finish setting up, so it takes emerald: the hue the palette gives to the primary action. Wearing the overdue colour for a setup prompt would spend the one signal that has to mean "a plant needs you today". */ .tab-badge.is-hint { background: var(--emerald-lit); color: var(--btn-ink); } .side-count.is-hint { background: var(--mint-wash); border-color: rgba(63, 190, 139, 0.34); color: var(--mint-2); } /* The plan card is a