110 lines
4.3 KiB
CSS
110 lines
4.3 KiB
CSS
/* 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; }
|