From 69837d88b24434fea900e6567c01771fdfc10dc5 Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Mon, 1 Jun 2026 16:36:23 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20add=20bloombase.css=20=E2=80=94=20fonts?=
 =?UTF-8?q?,=20blobs,=20canvas=20flowers,=20shared=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plants/static/plants/css/bloombase.css | 110 +++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 plants/static/plants/css/bloombase.css

diff --git a/plants/static/plants/css/bloombase.css b/plants/static/plants/css/bloombase.css
new file mode 100644
index 0000000..2d181e9
--- /dev/null
+++ b/plants/static/plants/css/bloombase.css
@@ -0,0 +1,110 @@
+/* plants/static/plants/css/bloombase.css */
+
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Great+Vibes&family=Pacifico&display=swap');
+
+/* ── Body canvas ── */
+body {
+  background-color: #FFF8F2;
+  font-family: 'Nunito', sans-serif;
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* ── Background blob shapes ── */
+.bb-blob-tl {
+  position: fixed; top: -100px; left: -80px;
+  width: 380px; height: 380px;
+  background: radial-gradient(ellipse at 45% 45%, #F9C090 0%, #F07040 55%, #E05020 100%);
+  border-radius: 62% 38% 54% 46% / 58% 44% 56% 42%;
+  opacity: 0.18;
+  pointer-events: none; z-index: 0;
+}
+.bb-blob-br {
+  position: fixed; bottom: -80px; right: -60px;
+  width: 340px; height: 340px;
+  background: radial-gradient(ellipse at 55% 55%, #FFD080 0%, #F8A040 60%, #F07040 100%);
+  border-radius: 44% 56% 38% 62% / 52% 48% 52% 48%;
+  opacity: 0.16;
+  pointer-events: none; z-index: 0;
+}
+
+/* ── Canvas SVG flowers ── */
+.bb-flower { position: fixed; pointer-events: none; z-index: 0; }
+.bb-flower-tr { top: 16px;  right: 24px; }
+.bb-flower-ml { top: 38%;   left: -4px;  }
+.bb-flower-br { bottom: 72px; right: 48px; }
+.bb-flower-bl { bottom: 88px; left: 32px; }
+
+/* ── Brand fonts ── */
+.font-script  { font-family: 'Great Vibes', cursive; }
+.font-pacifico { font-family: 'Pacifico', cursive; }
+.font-nunito  { font-family: 'Nunito', sans-serif; }
+
+/* ── Bottom nav stays above content ── */
+#bottom-nav {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  background: #fff;
+  border-top: 1px solid #F0E8DF;
+  height: 62px;
+  display: flex; align-items: center; justify-content: space-around;
+  z-index: 50;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+/* ── FAB inside nav ── */
+.bb-fab {
+  width: 44px; height: 44px; border-radius: 50%;
+  background: linear-gradient(145deg, #F58040, #E84020);
+  box-shadow: 0 4px 16px rgba(240, 80, 40, 0.5);
+  display: flex; align-items: center; justify-content: center;
+  color: #fff; font-size: 24px; line-height: 1; font-weight: 300;
+  flex-shrink: 0;
+}
+
+/* ── Gradient CTA button ── */
+.btn-bloom {
+  display: block; width: 100%;
+  background: linear-gradient(135deg, #F58040, #E84020);
+  color: #fff; border: none; border-radius: 50px;
+  padding: 12px 24px; font-family: 'Nunito', sans-serif;
+  font-weight: 800; font-size: 15px; text-align: center;
+  box-shadow: 0 4px 14px rgba(240,80,40,0.4); cursor: pointer;
+  text-decoration: none;
+}
+.btn-bloom-outline {
+  display: block; width: 100%;
+  background: transparent; color: #1A1208;
+  border: 1.5px solid #E0D4C8; border-radius: 50px;
+  padding: 11px 24px; font-family: 'Nunito', sans-serif;
+  font-weight: 700; font-size: 15px; text-align: center;
+  cursor: pointer; text-decoration: none;
+}
+
+/* ── White pill button (hero overlays) ── */
+.btn-pill {
+  background: rgba(255,255,255,0.88);
+  border: none; border-radius: 50px;
+  padding: 6px 14px; font-size: 13px; font-weight: 700;
+  color: #1A1208; backdrop-filter: blur(4px); cursor: pointer;
+  text-decoration: none;
+}
+
+/* ── Confidence bar ── */
+.conf-track { height: 5px; background: #F0E4D8; border-radius: 3px; overflow: hidden; }
+.conf-fill  { height: 100%; background: linear-gradient(90deg, #F8A060, #E84020); border-radius: 3px; }
+
+/* ── Area thumbnail gradient placeholders ── */
+.at-placeholder-1 { background: linear-gradient(135deg, #88C860, #E85878, #A0D060); }
+.at-placeholder-2 { background: linear-gradient(150deg, #B8E060, #F0A840, #E87830); }
+.at-placeholder-3 { background: linear-gradient(120deg, #F8B840, #88C060, #F0C860); }
+.at-placeholder-4 { background: linear-gradient(140deg, #D0A8E8, #68B858, #C888E0); }
+.at-placeholder-5 { background: linear-gradient(130deg, #78D8C8, #E8F0A0, #60C8A8); }
+.at-placeholder-6 { background: linear-gradient(125deg, #F8A0B0, #B8E060, #F09060); }
+
+/* ── Viewfinder corners ── */
+.vf-corner { position: absolute; width: 18px; height: 18px; border-color: rgba(255,255,255,0.9); border-style: solid; }
+.vf-tl { top: 10px; left: 10px; border-width: 2.5px 0 0 2.5px; border-radius: 2px 0 0 0; }
+.vf-tr { top: 10px; right: 10px; border-width: 2.5px 2.5px 0 0; border-radius: 0 2px 0 0; }
+.vf-bl { bottom: 10px; left: 10px; border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 2px; }
+.vf-br { bottom: 10px; right: 10px; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 2px 0; }