/* --------------------------------------------------------------------------- Plant Companion - visual identity A calm "conservatory logbook": soft paper-green ground, forest-ink text, one leaf-green primary, and status colours that read at a glance (green on schedule, amber check soon, clay overdue, blue for water). Deliberately avoids the default cream+serif+terracotta look. --------------------------------------------------------------------------- */ :root { color-scheme: light; --ink: #1e2b23; --ink-soft: #4a5a50; --muted: #7a877e; --paper: #f4f6f0; --surface: #ffffff; --surface-2: #f6f8f3; --line: #e2e7dd; --forest: #2f6b4f; --forest-dark: #245740; --leaf: #6fa06a; --water: #3a7ca5; --amber: #b9822a; --clay: #b3492f; --amber-bg: #fbf1de; --clay-bg: #f8e7e1; --forest-bg: #e6f0e8; --water-bg: #e4eef4; --hover: #eaeee4; --badge: #dde3d6; --ghost: #eef2e8; --ghost-hover: #e3e9db; --thumb-bg: #eef2e8; --empty-bg: #fbfcf9; --chip-slate-bg: #edf0ea; --clay-line: #e6cdc6; --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(30, 43, 35, 0.05), 0 8px 24px -12px rgba(30, 43, 35, 0.15); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark theme. Applied by app.js as data-theme="dark" on , either from the explicit setting or by following the system preference. */ :root[data-theme="dark"] { /* color-scheme makes native widgets (select dropdowns, date pickers, checkboxes, scrollbars) render dark too - the main source of stray black-on-dark text. */ color-scheme: dark; --ink: #e4ebe4; --ink-soft: #b7c4ba; --muted: #83928a; --paper: #141a15; --surface: #1c241d; --surface-2: #222b23; --line: #2b352c; --forest: #3f8563; --forest-dark: #4f9d77; --leaf: #7cae77; --water: #64a8cd; --amber: #d9a355; --clay: #d97757; --amber-bg: #38301c; --clay-bg: #3b241d; --forest-bg: #21362a; --water-bg: #1e3240; --hover: #242e25; --badge: #2b352c; --ghost: #263029; --ghost-hover: #2d3a30; --thumb-bg: #232d24; --empty-bg: #181f19; --chip-slate-bg: #262f27; --clay-line: #4a2f27; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; transition: background 0.25s, color 0.25s; } /* Soft ambient colour washes for a bit of depth. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px 420px at 6% -6%, color-mix(in srgb, var(--forest) 8%, transparent), transparent 70%), radial-gradient(720px 520px at 104% 22%, color-mix(in srgb, var(--water) 6%, transparent), transparent 70%); } /* Scattered botanical line-art tiled behind everything, barely-there. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%236fa06a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M40 66 q-2 -20 18 -26 q4 18 -18 26z'/%3E%3Cpath d='M196 38 q14 -14 32 -8 q-8 18 -32 8z'/%3E%3Cpath d='M120 150 v-26 m0 8 q-12 -4 -12 -16 m12 10 q12 -4 12 -16'/%3E%3Cpath d='M226 190 q-4 -18 14 -26 q6 16 -14 26z'/%3E%3Cpath d='M64 216 q16 -10 30 2 q-14 12 -30 -2z'/%3E%3C/g%3E%3C/svg%3E") repeat; } :root[data-theme="dark"] body::after { opacity: 0.07; } button, select, input, .nav-item { touch-action: manipulation; } .hidden { display: none !important; } .muted { color: var(--muted); } .spacer { flex: 1; } em { font-style: italic; color: var(--ink-soft); } /* Layout ------------------------------------------------------------------ */ .app { max-width: 1120px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)) calc(80px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right)); } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: calc(18px + env(safe-area-inset-top)) 0 14px; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--forest); color: #eaf3ec; } .brand-name { font-weight: 700; letter-spacing: -0.01em; } .brand-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; } .nav-item { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; } .nav-item:hover { background: var(--hover); } .nav-item:active { transform: scale(0.95); } .nav-item.is-active { background: var(--forest); color: #fff; } .count-badge { font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(255,255,255,0.25); } .nav-item:not(.is-active) .count-badge { background: var(--badge); color: var(--ink-soft); } .points-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--forest-bg); color: var(--forest-dark); white-space: nowrap; } /* Views ------------------------------------------------------------------- */ .view { display: none; animation: fade 0.25s ease; } .view.is-active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .view-head { margin: 8px 0 20px; } .view-head h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -0.02em; } /* A little vine flourish under each page title. */ .view-head h1::after { content: ""; display: block; width: 150px; height: 14px; margin-top: 4px; opacity: 0.65; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='14' viewBox='0 0 150 14'%3E%3Cpath d='M2 9 Q 20 3 40 9 T 78 9 T 116 9 T 148 9' fill='none' stroke='%236fa06a' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg fill='%236fa06a'%3E%3Cpath d='M30 9 q-2 -8 6 -10 q2 7 -6 10z'/%3E%3Cpath d='M72 9 q-2 -8 6 -10 q2 7 -6 10z'/%3E%3Cpath d='M114 9 q-2 -8 6 -10 q2 7 -6 10z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; } .view-head p { margin: 0; font-size: 14px; } /* Cards ------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; } /* Buttons ----------------------------------------------------------------- */ .btn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); padding: 10px 16px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s; } .btn:active:not(:disabled) { transform: scale(0.96); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--forest); color: #fff; } .btn-primary:not(:disabled):hover { background: var(--forest-dark); } .btn-ghost { background: var(--ghost); color: var(--forest-dark); } .btn-ghost:hover { background: var(--ghost-hover); } .btn-water { background: var(--water); color: #fff; } .btn-water:hover { filter: brightness(0.95); } .btn-danger-ghost { background: transparent; color: var(--clay); border-color: var(--clay-line); } .btn-danger-ghost:hover { background: var(--clay-bg); } .btn-sm { padding: 7px 12px; font-size: 13px; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* Fields ------------------------------------------------------------------ */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); } .field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 600; } input[type="text"], input[type="number"], input[type="date"], select, textarea { font: inherit; font-size: 14px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; background: var(--surface); width: 100%; } ::placeholder { color: var(--muted); opacity: 1; } textarea { resize: vertical; min-height: 64px; } select { cursor: pointer; } .toggle-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 10px 0; cursor: pointer; } .toggle-row input { width: 18px; height: 18px; accent-color: var(--forest); } /* Identify: photo slots --------------------------------------------------- */ .photo-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .photo-slot { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .photo-slot img { display: block; width: 100%; height: 120px; object-fit: cover; } .photo-slot .organ-select { border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: 12px; padding: 6px 8px; } .photo-slot .remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 999px; background: rgba(30,43,35,0.7); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; } .identify-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .ident-status { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; } .ident-status.loading { background: var(--forest-bg); color: var(--forest-dark); } .ident-status.error { background: var(--clay-bg); color: var(--clay); } .ident-status.info { background: var(--water-bg); color: var(--water); } /* Result rows ------------------------------------------------------------- */ .result-row { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; } .result-row:hover { transform: translateY(-1px); } .result-row .thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--thumb-bg); flex-shrink: 0; } .result-row .thumb-empty { display: grid; place-items: center; color: var(--leaf); } .result-main { flex: 1; min-width: 0; } .ref-images { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .ref-images img { width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); background: var(--thumb-bg); transition: transform 0.15s; } .ref-images img:hover { transform: scale(1.6); } .result-name { font-weight: 700; font-size: 16px; } .result-sci { font-style: italic; color: var(--ink-soft); font-size: 14px; } .result-common { font-size: 13px; color: var(--muted); margin-top: 2px; } .result-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; } .score-bar { height: 6px; border-radius: 999px; background: var(--ghost); overflow: hidden; margin-top: 8px; } .score-fill { height: 100%; border-radius: 999px; animation: fillgrow 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes fillgrow { from { width: 0; } } .score-pill { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; white-space: nowrap; } /* Chips ------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .chip-green { background: var(--forest-bg); color: var(--forest-dark); } .chip-amber { background: var(--amber-bg); color: var(--amber); } .chip-clay { background: var(--clay-bg); color: var(--clay); } .chip-water { background: var(--water-bg); color: var(--water); } .chip-slate { background: var(--chip-slate-bg); color: var(--ink-soft); } /* Gentle attention pulse on "Water now" rows. */ .sched-row .chip-clay { animation: pulse-ring 2.6s ease-in-out infinite; } @keyframes pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 73, 47, 0.28); } 55% { box-shadow: 0 0 0 6px rgba(179, 73, 47, 0); } } /* Camera capture ------------------------------------------------------------ */ .camera-video { display: block; width: 100%; max-height: 340px; border-radius: var(--radius-sm); background: #10160f; margin-bottom: 14px; } /* Reward / suggestion card --------------------------------------------------- */ .reward-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; animation: rise 0.35s ease backwards; position: relative; overflow: hidden; } /* Vine curling in from the corner of the reward card. */ .reward-card::after { content: ""; position: absolute; top: -6px; right: -6px; width: 110px; height: 110px; pointer-events: none; opacity: 0.14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M118 2 C 92 6 76 22 72 48 C 69 70 82 96 116 108' fill='none' stroke='%236fa06a' stroke-width='2.4' stroke-linecap='round'/%3E%3Cg fill='%236fa06a'%3E%3Cpath d='M92 14 q-16 0 -22 -12 q16 -2 22 12z'/%3E%3Cpath d='M74 40 q-16 2 -24 -8 q14 -6 24 8z'/%3E%3Cpath d='M76 70 q-14 6 -24 -2 q12 -10 24 2z'/%3E%3Cpath d='M92 96 q-10 10 -22 6 q8 -14 22 -6z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; } .reward-card.is-unlocked { border-color: var(--forest); background: linear-gradient(180deg, var(--forest-bg), var(--surface)); } .reward-head { display: flex; gap: 14px; align-items: flex-start; } .reward-photo { width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; background: var(--thumb-bg); color: var(--leaf); display: grid; place-items: center; flex-shrink: 0; } .reward-photo img { width: 100%; height: 100%; object-fit: cover; animation: fade 0.3s ease; } .reward-main { flex: 1; min-width: 0; } .reward-refresh { flex-shrink: 0; font-size: 16px; line-height: 1; padding: 8px 11px; } .reward-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; } .reward-card .nick { font-weight: 700; font-size: 16px; } .reward-card .sci { font-style: italic; font-size: 13px; color: var(--ink-soft); } .reward-reason { font-size: 13px; color: var(--ink-soft); margin: 8px 0 4px; } .reward-care { font-size: 13px; margin-bottom: 6px; } .reward-card .score-bar { margin-top: 12px; } .reward-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; } /* Celebration shimmer on the full progress bar. */ .is-unlocked .score-fill { position: relative; overflow: hidden; } .is-unlocked .score-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); animation: shimmer 1.8s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Health check ---------------------------------------------------------------- */ .health-photo-empty { font-size: 13px; text-align: center; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--empty-bg); } .photo-slot.health-photo { max-width: 240px; } .photo-slot.health-photo img { display: block; width: 100%; height: 170px; object-fit: cover; } .symptom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; } .symptom-chip { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color 0.15s, background 0.15s, color 0.15s; } .symptom-chip:hover { border-color: var(--leaf); } .symptom-chip:has(input:checked) { border-color: var(--forest); background: var(--forest-bg); color: var(--forest-dark); font-weight: 600; } .symptom-chip input { width: 16px; height: 16px; accent-color: var(--forest); flex-shrink: 0; } .health-species { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .health-species .thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--thumb-bg); flex-shrink: 0; } .issue-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 10px 0; background: var(--surface-2); animation: rise 0.35s ease backwards; } .issue-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .issue-conf { font-size: 12px; } .issue-summary { font-size: 13px; color: var(--ink-soft); margin: 8px 0; } .issue-actions { margin: 0; padding-left: 18px; font-size: 13px; } .issue-actions li { margin: 4px 0; } .health-disclaimer { font-size: 12px; margin: 12px 0 0; } /* Journal rows ----------------------------------------------------------------- */ .scan-delete { border: 0; background: var(--ghost); color: var(--muted); width: 28px; height: 28px; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; align-self: flex-start; transition: background 0.15s, color 0.15s; } .scan-delete:hover { background: var(--clay-bg); color: var(--clay); } .row-leaving { opacity: 0; transform: translateX(-32px); transition: opacity 0.18s, transform 0.18s; } /* Plants grid ------------------------------------------------------------- */ .plants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .plant-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; text-align: left; padding: 0; transition: transform 0.15s, box-shadow 0.15s; } .plant-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -14px rgba(30,43,35,0.28); } .plant-card .thumb { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--thumb-bg); } .plant-card .thumb-empty { display: grid; place-items: center; color: var(--leaf); } .plant-card .body { padding: 14px; } .plant-card .nick { font-weight: 700; font-size: 16px; } .plant-card .sci { font-style: italic; font-size: 13px; color: var(--ink-soft); margin-top: 1px; } .plant-card .foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } /* Today groups ------------------------------------------------------------ */ .sched-group { margin-bottom: 22px; } .sched-group h2 { font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .sched-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); } .sched-row .thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--thumb-bg); flex-shrink: 0; } .sched-row .info { flex: 1; min-width: 0; } .sched-row .nick { font-weight: 700; } .sched-row .sub { font-size: 13px; color: var(--muted); } /* Empty states ------------------------------------------------------------ */ .empty { text-align: center; padding: 40px 20px 48px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--empty-bg); } .empty::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 10px; opacity: 0.6; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fa06a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V9'/%3E%3Cpath d='M12 12C12 8 15 5 20 5c0 5-3 8-8 7z'/%3E%3Cpath d='M12 14C12 11 9.5 8.5 5 8.5C5 12.5 7.5 15 12 14z'/%3E%3C/svg%3E") center/contain no-repeat; } .empty .big { font-size: 15px; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px; } /* Modal ------------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,24,0.42); display: grid; place-items: center; padding: 20px; z-index: 50; animation: fade 0.15s ease; } .modal { background: var(--surface); border-radius: var(--radius); width: min(560px, 100%); max-height: 88vh; overflow-y: auto; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4); animation: pop 0.22s cubic-bezier(0.2, 1, 0.4, 1); } @keyframes pop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); } .modal-head h2 { margin: 0; font-size: 20px; } .modal-head .sci { font-style: italic; color: var(--ink-soft); font-size: 14px; } .modal-close { border: 0; background: var(--ghost); color: var(--ink); width: 32px; height: 32px; border-radius: 999px; cursor: pointer; font-size: 18px; } .modal-body { padding: 20px; } .modal-hero { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 16px; background: var(--thumb-bg); } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .info-cell { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; } .info-cell .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; } .info-cell .v { font-weight: 600; margin-top: 2px; } .history-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 180px; overflow-y: auto; } .history-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .history-list li:last-child { border-bottom: 0; } .section-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; } .section-label::before { content: ""; width: 13px; height: 13px; flex-shrink: 0; opacity: 0.8; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236fa06a'%3E%3Cpath d='M12 21 q-1 -14 10 -17 q1 13 -10 17z'/%3E%3Cpath d='M11 21 q0 -9 -8 -12 q-1 9 8 12z' opacity='0.6'/%3E%3C/svg%3E") center/contain no-repeat; } .manual-water-row { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; } .manual-water-row input { flex: 1; min-width: 0; } .manual-water-row .btn { flex-shrink: 0; } /* Toast ------------------------------------------------------------------- */ .toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); animation: toast-in 0.25s ease; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } } /* Entrance animations ------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .card, .result-row, .sched-row, .plant-card { animation: rise 0.32s ease backwards; } /* Small stagger so lists cascade in rather than land at once. */ .result-row:nth-child(2), .plant-card:nth-child(2), .sched-row:nth-child(3) { animation-delay: 0.05s; } .result-row:nth-child(3), .plant-card:nth-child(3), .sched-row:nth-child(4) { animation-delay: 0.1s; } .result-row:nth-child(4), .plant-card:nth-child(4), .sched-row:nth-child(5) { animation-delay: 0.15s; } .result-row:nth-child(5), .plant-card:nth-child(5) { animation-delay: 0.2s; } .result-row:nth-child(6), .plant-card:nth-child(6) { animation-delay: 0.25s; } /* Opening splash -------------------------------------------------------------- */ .splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 16px; background: linear-gradient(160deg, #2f6b4f, #1d4634); color: #eaf3ec; transition: opacity 0.4s ease; } .splash-leaf path { stroke-dasharray: 42; stroke-dashoffset: 42; animation: draw 0.9s ease forwards; } .splash-leaf path:nth-child(2) { animation-delay: 0.12s; } .splash-leaf path:nth-child(3) { animation-delay: 0.26s; } @keyframes draw { to { stroke-dashoffset: 0; } } .splash-title { font-weight: 700; font-size: 17px; letter-spacing: 0.02em; opacity: 0; animation: fadeup 0.5s ease 0.4s forwards; } @keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .splash.splash-done { opacity: 0; pointer-events: none; } /* Responsive -------------------------------------------------------------- */ @media (max-width: 620px) { .view-head h1 { font-size: 24px; } .nav { width: 100%; margin-left: 0; overflow-x: auto; } .info-grid { grid-template-columns: 1fr; } .brand-sub { display: none; } .points-chip { order: -1; margin-left: auto; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .splash { display: none; } }