/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #070f09 #26241f #fbf7ef #2f6b3e #337548 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #fbf7ef; --surface: #fdfbf8; --surface-2: #efebe4; --border: #d9d7cf; --border-strong: #b2b1aa; --ink: #26241f; --muted: #686561; --accent: #2f6b3e; --accent-hover: #285b35; --accent-ink: #ffffff; --accent-text: #337548; --accent-strong: #2f6b3e; --accent-soft: #dee3d6; --accent-border: #9fb89f; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe9da; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e3d3; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f3ddd6; --danger-strong: #b91c1c; --chart-1: #2f6b3e; --chart-2: #158594; --chart-3: #324593; --chart-4: #995194; --chart-5: #86281e; --chart-6: #8c6f0c; --font-display: "Outfit Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Nunito Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Nunito Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.10em; --look: warm-craft; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-btn: 10px; --radius-card: 14px; --radius-input: 8px; --border-w: 1px; --border-strong-w: 2px; --shadow-card: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent), 0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-raised: 0 2px 4px color-mix(in srgb, var(--ink) 7%, transparent), 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent); --shadow-btn: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent); --section-y: 5rem; --card-pad: 1.5rem; --caps: none; --caps-tracking: 0.04em; --btn-weight: 600; --measure: 68ch; } /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #070f09; --surface: #202722; --surface-2: #131b15; --border: #2a312b; --border-strong: #515753; --ink: #fbf7ef; --muted: #999a93; --accent: #2f6b3e; --accent-hover: #4e815b; --accent-ink: #ffffff; --accent-text: #769d7f; --accent-strong: #6a9574; --accent-soft: #102315; --accent-border: #193821; --success: #15803d; --success-ink: #ffffff; --success-soft: #0a2814; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2d1e09; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2e120d; --danger-strong: #d16969; --chart-1: #417d4f; --chart-2: #2098a9; --chart-3: #627ace; --chart-4: #ad63a7; --chart-5: #c15e50; --chart-6: #a18117; } /* ==================================================================== * app.css — Fresh Sabzi's own rules. * * The customer-facing screens are built for people who rarely use a * smartphone, so this file leans the system toward bigger text and bigger * tap targets wherever `.customer-body` is on the page (every screen except * the shop owner's admin area, which keeps the platform's normal density). * ==================================================================== */ /* ---- bigger, calmer reading for the shopper-facing screens ---------- */ .customer-body { font-size: 1.125rem; line-height: 1.6; padding-bottom: 6.5rem; /* clears the fixed bottom bar */ } .customer-body .btn { min-height: 56px; font-size: 1.05rem; } .customer-body .btn-sm { min-height: 48px; } .customer-body .input, .customer-body select.input { min-height: 56px; font-size: 1.1rem; } .customer-body .label { font-size: 1.05rem; font-weight: 700; } .customer-body .eyebrow { font-size: 0.85rem; } /* ---- the "Call Us" bar — one per screen, right under the header ----- */ .call-bar { display: flex; align-items: center; gap: 0.85rem; min-height: 56px; padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--radius-card); border: var(--border-w) solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; transition: background var(--dur-1, 150ms) var(--ease, ease); } .call-bar:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 30%); } .call-bar .icon { color: var(--accent-strong); flex-shrink: 0; } .call-bar-text { display: flex; flex-direction: column; line-height: 1.3; } .call-bar-text b { font-size: 1.1rem; } .call-bar-text span { font-size: 1rem; opacity: 0.85; } /* ---- the language pill — one control, both words, always visible ---- */ .lang-toggle { display: inline-flex; border-radius: var(--radius-pill); background: var(--surface-2); border: var(--border-w) solid var(--border); padding: 0.25rem; gap: 0.25rem; flex-shrink: 0; } .lang-toggle a { padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; color: var(--muted); text-decoration: none; min-height: 44px; display: flex; align-items: center; } .lang-toggle a.is-active { background: var(--accent); color: var(--accent-ink); } /* ---- the fixed bottom bar — Shop / My Basket / My Orders ------------ */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: var(--border-w) solid var(--border); box-shadow: var(--shadow-raised); padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 68px; padding: 0.6rem 0.25rem; color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 700; text-align: center; } .bottom-nav-item .icon { width: 1.6rem; height: 1.6rem; } .bottom-nav-item.is-active { color: var(--accent-text); } /* ---- the quantity stepper on a product card and a basket row -------- */ .qty-stepper { display: flex; align-items: center; gap: 0.85rem; } .qty-stepper-btn { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-btn); border: var(--border-w) solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: 1.6rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; } .qty-stepper-btn:active { background: var(--shading, var(--surface-2)); } .qty-stepper-btn:disabled { opacity: 0.35; } .qty-value { min-width: 5.5rem; text-align: center; font-weight: 700; font-size: 1.05rem; } /* ---- product card ----------------------------------------------------- */ .product-card { display: flex; flex-direction: column; gap: 0.75rem; } .product-card.is-out { opacity: 0.55; } .product-card.is-out .media img { filter: grayscale(0.8); } .product-names { line-height: 1.35; } .product-name-hi { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: var(--display-weight, 700); } .product-name-en { display: block; color: var(--muted); font-size: 1rem; } .product-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; } .product-line-total { font-family: var(--font-mono); font-weight: 700; color: var(--accent-strong); } /* ---- delivery notice --------------------------------------------------- */ .delivery-note { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--radius-card); border: var(--border-w) solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; font-size: 1.05rem; } .delivery-note .icon { color: var(--accent-strong); flex-shrink: 0; margin-top: 0.15rem; }