/* ============================================================================ Foodia Glass — shared dark-glassmorphism design tokens + base styles. Linked by every *_mobile page (and login). Pages style their own components with these variables; only genuinely shared primitives live here. Performance note: backdrop-filter is expensive on mobile. Use it on the few major surfaces (nav dock, bottom sheets, full-screen overlays, hero cards); repeating list items should use the translucent fills WITHOUT backdrop-filter. ========================================================================== */ :root { /* canvas + ink */ --bg-0: #0a0d0c; --ink: #f2f5f3; --ink-2: #a8b3ad; --ink-3: #67746d; /* glass surfaces */ --glass: rgba(255, 255, 255, 0.055); /* standard card fill */ --glass-2: rgba(255, 255, 255, 0.095); /* pressed / hover fill */ --glass-3: rgba(255, 255, 255, 0.035); /* recessed input-well fill */ --stroke: rgba(255, 255, 255, 0.09); /* hairline border */ --stroke-2: rgba(255, 255, 255, 0.18); /* emphasized border */ --blur: blur(24px) saturate(160%); --edge: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* top bevel highlight */ --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); /* brand */ --green: #1D9E75; --green-hi: #3fd59d; /* bright accent for text/icons */ --green-grad: linear-gradient(135deg, #27bd8b, #157a5b); --green-soft: rgba(29, 158, 117, 0.16); --green-stroke: rgba(63, 213, 157, 0.35); --green-glow: 0 6px 22px rgba(29, 158, 117, 0.35); /* secondary accents */ --gold: #d9b878; --gold-soft: rgba(217, 184, 120, 0.12); --gold-stroke: rgba(217, 184, 120, 0.3); --red: #e08787; --red-soft: rgba(224, 135, 135, 0.1); --red-stroke: rgba(224, 135, 135, 0.3); --heart: #e37d90; /* shape + type */ --radius: 22px; --radius-s: 14px; --radius-xs: 10px; --font-ui: 'DM Sans', -apple-system, 'SF Pro Text', sans-serif; --font-display: 'DM Serif Display', Georgia, serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Keep the native iOS rubber-band bounce (Instagram-style: overscroll opens extra space, then springs back). Paint the same canvas color so the revealed area reads as more of the page, not a mismatched band. The native shell sets the same color on the webview (capacitor.config backgroundColor). */ html { background-color: var(--bg-0); } body { min-height: 100vh; color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--bg-0); /* Ambient auras the glass panes pick up. Fixed so scrolling feels layered. */ background-image: radial-gradient(1100px 540px at -12% -10%, rgba(29, 158, 117, 0.17), transparent 60%), radial-gradient(900px 620px at 112% 14%, rgba(90, 170, 215, 0.07), transparent 55%), radial-gradient(1000px 720px at 50% 118%, rgba(29, 158, 117, 0.10), transparent 62%); background-attachment: fixed; } /* Hide scrollbars app-wide so it reads as a native app, not a web page. Scrolling still works; only the visual bar is suppressed. */ html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Sticky title bar: pins a page's title block to the top so it stays put while the content scrolls under it (frosted-glass), for a native-app feel. Negative side/top margins bleed it over the body's 24px/18px padding to full width. Pages that already use a fixed flex-column header (e.g. inventory) don't need it. */ /* Title block: sits at the top and scrolls with the page (no pinning, no sliding). Kept as a wrapper so the top spacing stays consistent across pages. */ .sticky-head { margin: -24px -18px 8px; padding: calc(36px + env(safe-area-inset-top)) 18px 12px; background: transparent; } .sticky-head > :last-child { margin-bottom: 0; } /* ---- shared page header (serif title + leaf logo) ---- */ .page-h1 { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -0.5px; color: var(--ink); } .logo-link { display: inline-flex; flex-shrink: 0; } .leaf-svg { width: 26px; height: 26px; } .page-subtitle { font-size: 13px; color: var(--ink-3); font-weight: 300; text-align: center; } /* ---- shared primitives ---- */ /* Major glass surface (hero cards, sheets, panels). Includes the blur. */ .g-glass { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--edge), var(--shadow); } /* Lightweight card for repeating list items — translucent, no blur. */ .g-card { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius-s); box-shadow: var(--edge); } /* Uppercase section eyebrow. */ .g-label { font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; } /* Recessed input well. */ .g-input { width: 100%; padding: 12px 14px; font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: var(--glass-3); border: 1px solid var(--stroke); border-radius: var(--radius-xs); outline: none; transition: border-color 0.18s, background 0.18s; } .g-input::placeholder { color: var(--ink-3); } .g-input:focus { border-color: var(--green-stroke); background: rgba(255, 255, 255, 0.05); } /* Primary action — green gradient pill with glow. */ .g-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: #fff; background: var(--green-grad); border: none; border-radius: var(--radius-s); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--green-glow); cursor: pointer; transition: transform 0.12s, box-shadow 0.18s, opacity 0.15s; -webkit-tap-highlight-color: transparent; } .g-btn-primary:active { transform: scale(0.97); } .g-btn-primary:disabled { opacity: 0.5; } /* Secondary action — glass pill. */ .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-2); background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius-s); box-shadow: var(--edge); cursor: pointer; transition: transform 0.12s, background 0.18s, border-color 0.18s; -webkit-tap-highlight-color: transparent; } .g-btn:active { transform: scale(0.97); background: var(--glass-2); } .g-btn:disabled { opacity: 0.5; } /* Tinted green glass action (tertiary, e.g. per-card actions). */ .g-btn-tint { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--green-hi); background: var(--green-soft); border: 1px solid var(--green-stroke); border-radius: var(--radius-xs); cursor: pointer; transition: transform 0.12s, background 0.18s; -webkit-tap-highlight-color: transparent; } .g-btn-tint:active { transform: scale(0.97); } .g-btn-tint:disabled { opacity: 0.5; }