/* ═══════════════════════════════════════════════════════════════ Green Thumbs — Plant Detail v2 Styles Direction: Glasshouse B · "Grounded" This file is ADDITIVE — it layers on top of style.css. For production: add to base.html after style.css. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap'); /* ── Glasshouse B design tokens ── */ :root { --pd-forest: #2D4A36; --pd-forest-light: #3a5e47; --pd-coral: #E86D4F; --pd-sage: #E8EDE3; --pd-sage-dark: #d4dcd0; --pd-ivory: #F2EDDD; --pd-hero-bg: #2D4A36; /* always dark — both modes */ --pd-hero-text: #F2EDDD; /* always ivory — both modes */ --pd-card-stripe: #2D4A36; /* left-edge stripe on cards */ --pd-nudge-amber: #d97706; --pd-nudge-bg: #fffbeb; --pd-nudge-text: #92400e; --pd-nudge-border: #fcd34d; --pd-history-tint: #f0f9f4; /* section rhythm: subtle green tint */ } [data-theme="dark"] { --pd-card-stripe: #3FB57A; /* emerald stripe on dark */ --pd-sage: #1F3326; --pd-sage-dark: #172a1e; --pd-nudge-bg: #1c1200; --pd-nudge-text: #fbbf24; --pd-nudge-border: #78350f; --pd-nudge-amber: #fbbf24; --pd-history-tint: var(--surface); } /* ══════════════════════════════════════════ HERO SECTION — Color as Material Forest green fills the entire header band. Atmospheric blur if a photo exists. ══════════════════════════════════════════ */ .pd-hero { position: relative; background: var(--pd-hero-bg); margin: -2rem -1.5rem 0; padding: 0; overflow: hidden; border-bottom: none; } /* Atmospheric blurred photo backdrop */ .pd-hero-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center 40%; filter: blur(60px) saturate(1.3); opacity: 0.2; transform: scale(1.12); /* prevents blur edge fringing */ pointer-events: none; } /* Radial vignette — grounds the text */ .pd-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(45,74,54,0.6) 0%, transparent 70%); pointer-events: none; } .pd-hero-inner { position: relative; z-index: 1; padding: 2rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 0; } /* Back link */ .pd-back-link { display: inline-flex; align-items: center; color: rgba(242, 237, 221, 0.65); text-decoration: none; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 1.5rem; transition: color 0.15s; width: fit-content; padding: 0.3rem 0.75rem; border: 1px solid rgba(242, 237, 221, 0.2); border-radius: 999px; background: rgba(242, 237, 221, 0.08); backdrop-filter: blur(8px); } .pd-back-link:hover { color: var(--pd-ivory); background: rgba(242, 237, 221, 0.15); border-color: rgba(242, 237, 221, 0.35); } /* Plant name — Type at scale */ .pd-plant-name { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 900; color: var(--pd-ivory); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.6rem; } /* Species + location meta row */ .pd-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.75rem; } .pd-species { font-style: italic; color: rgba(242, 237, 221, 0.7); font-size: 0.95rem; } .pd-loc { font-size: 0.9rem; color: rgba(242, 237, 221, 0.55); font-weight: 400; } /* Care note from Variant C — the plant's own words above the fold */ .pd-hero-notes { font-size: 0.88rem; color: rgba(242, 237, 221, 0.6); font-style: italic; margin-bottom: 0.75rem; line-height: 1.5; max-width: 520px; } /* Health badge on dark hero */ .pd-hero-badge { margin-top: 0; align-self: flex-start; } .pd-hero .badge-healthy { background: rgba(34,197,94,0.2); color: #86efac; } .pd-hero .badge-warning { background: rgba(251,191,36,0.2); color: #fde68a; } .pd-hero .badge-alert { background: rgba(239,68,68,0.2); color: #fca5a5; } .pd-hero .badge-unknown { background: rgba(255,255,255,0.1); color: rgba(242,237,221,0.6); } /* ══════════════════════════════════════════ PAGE BODY — Content area below the hero ══════════════════════════════════════════ */ .pd-body { padding-top: 1.8rem; } /* ══════════════════════════════════════════ SECTION HEADER — shared utility ══════════════════════════════════════════ */ .pd-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } /* ══════════════════════════════════════════ METADATA QUADRANT GRID — 2×2 card grid Depth hierarchy: left-edge stripe, layered shadows, no flat surfaces ══════════════════════════════════════════ */ .pd-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1.5rem; } .pd-meta-quad { background: var(--surface); border-radius: 14px; padding: 1.1rem 1.2rem 1.1rem 1.4rem; border-left: 4px solid var(--pd-card-stripe); border-top: 1px solid var(--border-light); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); box-shadow: 0 4px 12px var(--shadow), 0 1px 3px var(--shadow); position: relative; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; } .pd-meta-quad:hover { box-shadow: 0 8px 20px var(--shadow-hover), 0 2px 6px var(--shadow); transform: translateY(-1px); } /* Last Analysis quad — humanized date + full-date reveal on hover/tap */ .pd-analysis-quad { cursor: pointer; } .pd-analysed-full { display: none; font-size: 0.72rem; color: var(--text-faint); margin-top: 0.25rem; line-height: 1.4; font-style: italic; } .pd-analysis-quad:hover .pd-analysed-full, .pd-analysis-quad.date-revealed .pd-analysed-full { display: block; } .pd-analysis-quad:hover .pd-quad-label::after { content: ' — tap for date'; font-size: 0.62rem; opacity: 0.45; font-weight: 400; letter-spacing: 0; text-transform: none; } @media (hover: none) { .pd-analysis-quad:hover .pd-quad-label::after { content: none; } } /* Last Watered quad — same humanized date + full-date reveal pattern */ .pd-watered-quad { cursor: pointer; } .pd-watered-full { display: none; font-size: 0.72rem; color: var(--text-faint); margin-top: 0.25rem; line-height: 1.4; font-style: italic; } .pd-watered-quad:hover .pd-watered-full, .pd-watered-quad.date-revealed .pd-watered-full { display: block; } .pd-watered-quad:hover .pd-quad-label::after { content: ' — tap for date'; font-size: 0.62rem; opacity: 0.45; font-weight: 400; letter-spacing: 0; text-transform: none; } @media (hover: none) { .pd-watered-quad:hover .pd-quad-label::after { content: none; } } /* Last Analysed line (below action buttons) — tap-to-reveal full timestamp */ .pd-la-full { display: none; font-size: 0.8em; color: var(--text-faint); font-style: italic; margin-left: 0.3em; } .last-analysed.date-revealed .pd-la-full { display: inline; } /* Care notes: history-sourced hint text */ .pd-note-history-hint { font-size: 0.72rem; color: var(--text-faint); font-style: italic; margin-left: auto; } /* Muted quad (e.g. Next Water — not yet available) */ .pd-quad-muted .pd-quad-icon { opacity: 0.35; } .pd-quad-muted .pd-quad-value { color: var(--text-faint); } .pd-quad-icon { font-size: 1rem; margin-bottom: 0.5rem; display: block; line-height: 1; } .pd-quad-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 0.3rem; } .pd-quad-value { font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.3; word-break: break-word; } .pd-quad-sub { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.25rem; line-height: 1.4; } .pd-quad-empty { color: var(--text-faint); font-weight: 400; font-style: italic; } /* ─── Photos quadrant — neutral state ─── */ /* Per spec: no icon, standard colour */ .pd-photos-quad .pd-quad-icon { display: none; } .pd-photos-count { font-size: 1.6rem; font-weight: 700; line-height: 1; } .pd-photos-sub { font-size: 0.78rem; } /* Nudge badge (hidden in neutral) */ .pd-nudge-bang { display: none; position: absolute; top: 0.9rem; right: 1rem; font-size: 1rem; font-weight: 900; color: var(--pd-nudge-amber); line-height: 1; background: var(--pd-nudge-bg); width: 1.4rem; height: 1.4rem; border-radius: 50%; align-items: center; justify-content: center; border: 1.5px solid var(--pd-nudge-border); } /* ─── Photos quadrant — nudge state (JS adds .nudge) ─── */ .pd-photos-quad.nudge { border-left-color: var(--pd-nudge-amber); background: var(--pd-nudge-bg); cursor: pointer; } .pd-photos-quad.nudge:hover { box-shadow: 0 8px 20px rgba(217,119,6,0.18), 0 2px 6px rgba(217,119,6,0.1); } .pd-photos-quad.nudge .pd-quad-label, .pd-photos-quad.nudge .pd-photos-count, .pd-photos-quad.nudge .pd-photos-sub { color: var(--pd-nudge-text); } .pd-photos-quad.nudge .pd-nudge-bang { display: flex; } /* Nudge message (injected by JS, hidden in neutral) */ .pd-nudge-msg { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--pd-nudge-border); font-size: 0.78rem; color: var(--pd-nudge-text); line-height: 1.5; } .pd-nudge-msg p { margin: 0 0 0.4rem; } .pd-nudge-msg p:first-child strong { font-weight: 700; } .pd-nudge-link { display: inline-block; color: var(--pd-nudge-text); font-weight: 600; font-size: 0.78rem; text-decoration: underline; margin-bottom: 0.4rem; } .pd-nudge-link:hover { opacity: 0.75; } .pd-nudge-remind { font-size: 0.72rem; color: var(--pd-nudge-text); opacity: 0.65; margin: 0; } .pd-nudge-remind span { font-style: italic; } /* ══════════════════════════════════════════ CARE NOTES SECTION Quiet but scannable. Compounds over time. Empty state uses botanical SVG illustration. ══════════════════════════════════════════ */ .pd-care-notes { background: var(--surface); border-radius: 14px; padding: 1.6rem 1.8rem; margin-bottom: 1.5rem; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-light); /* Left stripe: botanical green — Color as Material in the body */ border-left: 4px solid var(--pd-card-stripe); } .pd-care-notes .pd-section-head h3 { /* Override main h3 for section context */ font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0; } /* ─── Empty state ─── */ .pd-notes-empty { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 1.5rem 1rem 0.5rem; text-align: center; } .pd-notes-illus { width: 56px; height: 56px; color: var(--accent); opacity: 0.45; flex-shrink: 0; } .pd-notes-illus svg { width: 100%; height: 100%; } .pd-notes-empty-title { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); } .pd-notes-empty-body { font-size: 0.82rem; color: var(--text-faint); line-height: 1.55; max-width: 300px; } /* ─── Populated state ─── */ .pd-notes-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .pd-note-item { padding: 0.9rem 1rem; background: var(--bg); border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--accent); display: flex; flex-direction: column; gap: 0.4rem; transition: background 0.2s; } .pd-note-item:hover { background: var(--surface); } .pd-note-item.pd-note-ai { border-left-color: var(--ai-text); background: var(--ai-bg); } .pd-note-text { font-size: 0.9rem; color: var(--text); line-height: 1.55; } .pd-note-foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .pd-note-source-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ai-text); background: rgba(92,53,160,0.1); padding: 0.1rem 0.4rem; border-radius: 4px; } .pd-note-date { font-size: 0.75rem; color: var(--text-faint); } .pd-note-dismiss { margin-left: auto; background: transparent; border: none; color: var(--text-faint); cursor: default; font-size: 1.1rem; padding: 0; opacity: 0.35; line-height: 1; } .pd-note-dismiss:hover:not(:disabled) { opacity: 0.8; cursor: pointer; } /* ─── Structured notes (API-summarised view) ─── */ .pd-notes-structured { display: flex; flex-direction: column; gap: 1.1rem; } .pd-notes-sub { background: var(--bg); border-radius: 10px; padding: 0.85rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); } .pd-notes-sub-watch { border-left-color: #d97706; } .pd-notes-sub-species { border-left-color: #0d9488; } .pd-notes-sub-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.55rem; } .pd-notes-sub-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0; display: flex; align-items: center; gap: 0.4rem; } .pd-notes-sub-source { font-size: 0.7rem; color: var(--text-faint); opacity: 0.75; font-style: italic; } .pd-notes-tag { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.35rem; border-radius: 3px; line-height: 1.6; } .pd-notes-tag-amber { background: rgba(217,119,6,0.12); color: #b45309; } .pd-notes-tag-teal { background: rgba(13,148,136,0.12); color: #0d9488; } .pd-notes-bullets { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; } .pd-notes-bullets li { font-size: 0.88rem; color: var(--text); line-height: 1.5; } .pd-notes-watch li { color: #92400e; } .pd-notes-species li { color: #0f766e; } .pd-notes-source-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: var(--text-faint); margin: 0; } /* ─── Photos quadrant last-date reveal ─── */ .pd-photos-last-full { display: none; font-size: 0.7rem; color: var(--text-faint); margin-top: 0.2rem; } .pd-photos-quad:not(.nudge):hover .pd-photos-last-full, .pd-photos-quad.date-revealed .pd-photos-last-full { display: block; } @media (hover: none) { .pd-photos-quad:not(.nudge):hover .pd-photos-last-full { display: none; } } /* ══════════════════════════════════════════ PHOTO BAND — Section rhythm + horizontal scroll This section changes the surface material: pale sage tint instead of cream. ══════════════════════════════════════════ */ .pd-photo-band { background: var(--pd-sage); margin: 0 -1.5rem; padding: 1.4rem 1.5rem; margin-bottom: 1.5rem; } .pd-photo-band .pd-section-head h3 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #4a6456; margin: 0; display: flex; align-items: center; gap: 0.5rem; } .pd-photo-count-chip { font-size: 0.7rem; font-weight: 700; background: rgba(45,74,54,0.12); color: var(--pd-forest); padding: 0.1rem 0.5rem; border-radius: 999px; } .pd-add-link { font-size: 0.8rem; color: var(--pd-forest); font-weight: 600; text-decoration: none; padding: 0.3rem 0.8rem; border: 1.5px solid rgba(45,74,54,0.35); border-radius: 999px; transition: all 0.15s; white-space: nowrap; background: rgba(255,255,255,0.5); } .pd-add-link:hover { background: var(--pd-forest); color: var(--pd-ivory); border-color: var(--pd-forest); } /* Horizontal scroll strip */ .pd-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(45,74,54,0.2) transparent; padding-bottom: 0.25rem; } .pd-scroll-wrap::-webkit-scrollbar { height: 4px; } .pd-scroll-wrap::-webkit-scrollbar-track { background: transparent; } .pd-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(45,74,54,0.2); border-radius: 2px; } .pd-scroll-inner { display: flex; gap: 0.85rem; flex-wrap: nowrap; padding-bottom: 0.25rem; width: max-content; } .pd-scroll-inner .gallery-item { flex: 0 0 auto; width: 180px; min-width: 0; } /* Photo cards — Depth hierarchy: actual photos visually heavier */ .pd-scroll-photo { max-height: 200px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08); border: none; transition: transform 0.2s, box-shadow 0.2s; } .pd-scroll-photo:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.1); } /* ══════════════════════════════════════════ ACTIONS ROW ══════════════════════════════════════════ */ .pd-actions { margin-bottom: 1.5rem; } /* ══════════════════════════════════════════ LOG CARE EVENT — Designed interactive Pill chip selectors replace the