Spaces:
Runtime error
Runtime error
| /* ============================================================ | |
| theme.css — shared design system (mobile-first) | |
| Loaded on every page. Page-specific css files build on top. | |
| ============================================================ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| /* These are overwritten at runtime by theme.js to match the food. */ | |
| --accent: #2EA866; /* primary (default emerald) */ | |
| --accent-2: #57CC8B; /* lighter tone for gradients */ | |
| --accent-d: #1E8A53; /* deeper tone for gradients/pressed */ | |
| --bg-tint: rgba(46,168,102,0.10); | |
| --on-accent:#ffffff; /* text color that sits ON the accent */ | |
| /* Reusable gradients (auto-update when the accents change). */ | |
| --grad-accent: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-d) 100%); | |
| --grad-hero: linear-gradient(150deg, var(--accent-2) 0%, var(--accent) 40%, var(--accent-d) 100%); | |
| --grad-soft: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, #fff) 0%, #ffffff 60%); | |
| /* Static tokens */ | |
| --surface: #ffffff; | |
| --ink: #1c2418; | |
| --ink-soft: #7b857a; | |
| --line: #eef0ec; | |
| --radius: 24px; | |
| --radius-sm:16px; | |
| --shadow: 0 12px 40px rgba(20,30,15,0.10); | |
| --shadow-sm:0 6px 18px rgba(20,30,15,0.08); | |
| --nav-h: 72px; | |
| --t-morph: 0.8s cubic-bezier(.4,0,.2,1); /* background color morph */ | |
| --t-ui: 0.25s ease; | |
| } | |
| html, body { height: 100%; } | |
| /* SVG icons inherit color (currentColor) and scale with font-size. */ | |
| .ic { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; } | |
| body { | |
| font-family: 'Poppins', system-ui, sans-serif; | |
| color: var(--ink); | |
| /* The "magic" surface that morphs to the food color */ | |
| background: var(--bg-tint); | |
| transition: background var(--t-morph); | |
| display: flex; | |
| justify-content: center; | |
| min-height: 100dvh; | |
| } | |
| .page-loader { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 999; | |
| display: grid; | |
| place-items: center; | |
| align-content: center; | |
| gap: 14px; | |
| background: | |
| radial-gradient(70% 48% at 50% 18%, var(--bg-tint), transparent 62%), | |
| var(--surface); | |
| color: var(--ink); | |
| transition: opacity .34s ease, transform .34s ease; | |
| } | |
| .page-loader.hide { | |
| opacity: 0; | |
| transform: scale(1.02); | |
| pointer-events: none; | |
| } | |
| .loader-scan { | |
| position: relative; | |
| width: 132px; | |
| height: 132px; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .loader-scan img { | |
| width: 84px; | |
| height: 84px; | |
| object-fit: contain; | |
| filter: drop-shadow(0 12px 20px rgba(20,30,15,.12)); | |
| animation: loaderPop .7s cubic-bezier(.34,1.56,.64,1) both, loaderFloat 1.8s ease-in-out infinite; | |
| } | |
| .loader-ring { | |
| position: absolute; | |
| inset: 16px; | |
| border-radius: 50%; | |
| border: 3px solid var(--accent); | |
| border-top-color: transparent; | |
| border-right-color: color-mix(in srgb, var(--accent) 35%, transparent); | |
| animation: loaderSpin 1s linear infinite; | |
| } | |
| .loader-pulse { | |
| position: absolute; | |
| inset: 24px; | |
| border-radius: 50%; | |
| background: var(--bg-tint); | |
| animation: loaderPulse 1.4s ease-out infinite; | |
| } | |
| .loader-corner { | |
| position: absolute; | |
| width: 28px; | |
| height: 28px; | |
| border-color: var(--accent); | |
| animation: loaderCorner 1.35s ease-in-out infinite; | |
| } | |
| .loader-corner.c1 { left: 8px; top: 8px; border-left: 4px solid var(--accent); border-top: 4px solid var(--accent); border-top-left-radius: 8px; } | |
| .loader-corner.c2 { right: 8px; top: 8px; border-right: 4px solid var(--accent); border-top: 4px solid var(--accent); border-top-right-radius: 8px; animation-delay: .08s; } | |
| .loader-corner.c3 { right: 8px; bottom: 8px; border-right: 4px solid var(--accent); border-bottom: 4px solid var(--accent); border-bottom-right-radius: 8px; animation-delay: .16s; } | |
| .loader-corner.c4 { left: 8px; bottom: 8px; border-left: 4px solid var(--accent); border-bottom: 4px solid var(--accent); border-bottom-left-radius: 8px; animation-delay: .24s; } | |
| .loader-text { | |
| min-width: 190px; | |
| text-align: center; | |
| font-size: .82rem; | |
| font-weight: 800; | |
| letter-spacing: .12em; | |
| text-transform: uppercase; | |
| color: var(--ink-soft); | |
| animation: loaderText .9s ease-in-out infinite alternate; | |
| } | |
| .loader-text.swap { | |
| animation: loaderSwap .28s ease both; | |
| } | |
| /* Phone-shaped container — mobile-first, framed on desktop */ | |
| .app { | |
| width: 100%; | |
| max-width: 430px; | |
| min-height: 100dvh; | |
| background: var(--surface); | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| @media (min-width: 480px) { | |
| body { | |
| align-items: center; | |
| padding: 32px 0; | |
| /* Branded desktop backdrop — the top glow still tints with the food color. */ | |
| background: | |
| radial-gradient(90% 55% at 50% -8%, var(--bg-tint), transparent 60%), | |
| linear-gradient(165deg, #f5f7f2 0%, #e8ede3 100%); | |
| } | |
| .app { | |
| min-height: 860px; | |
| max-height: 94dvh; | |
| border-radius: 40px; | |
| box-shadow: 0 30px 80px rgba(20, 30, 15, 0.18); | |
| border: 1px solid rgba(255, 255, 255, 0.7); | |
| } | |
| } | |
| /* Shell pieces (injected by icons.js). Hidden / pass-through on mobile; | |
| become a sidebar + content layout on desktop. */ | |
| .desktop-aside { display: none; } | |
| .app-main { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; } | |
| /* ── Desktop (>=1024px): real web-app layout — sidebar + wide content ── */ | |
| @media (min-width: 1024px) { | |
| body { padding: 36px; align-items: center; justify-content: center; } | |
| .app.has-shell { | |
| flex-direction: row; | |
| width: min(1140px, 96vw); | |
| max-width: none; | |
| height: min(88dvh, 800px); | |
| min-height: 0; max-height: none; | |
| border-radius: 32px; | |
| overflow: hidden; | |
| } | |
| /* Sidebar */ | |
| .desktop-aside { | |
| display: flex; flex-direction: column; gap: 28px; | |
| flex: 0 0 264px; height: 100%; padding: 30px 22px; | |
| color: var(--on-accent); | |
| background: var(--grad-hero); | |
| transition: background var(--t-morph), color var(--t-morph); | |
| } | |
| .da-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } | |
| .da-logo { | |
| width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; | |
| background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; | |
| overflow: hidden; | |
| } | |
| .da-logo .ic { width: 28px; height: 28px; } | |
| .da-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } | |
| .da-title { font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; display: block; line-height: 1.1; } | |
| .da-tag { font-size: .78rem; opacity: .85; display: block; } | |
| .da-nav { display: flex; flex-direction: column; gap: 6px; } | |
| .da-nav a { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 12px 14px; border-radius: 14px; | |
| color: var(--on-accent); text-decoration: none; font-weight: 500; | |
| opacity: .82; transition: var(--t-ui); | |
| position: relative; overflow: hidden; | |
| } | |
| .da-nav a .ic { width: 20px; height: 20px; } | |
| .da-nav a::before { | |
| content: ''; position: absolute; inset: 8px auto 8px 0; width: 3px; | |
| border-radius: 999px; background: currentColor; opacity: 0; | |
| transform: scaleY(.35); transition: var(--t-ui); | |
| } | |
| .da-nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); transform: translateX(2px); } | |
| .da-nav a.active { opacity: 1; background: rgba(255, 255, 255, 0.22); font-weight: 600; } | |
| .da-nav a.active::before { opacity: .9; transform: scaleY(1); } | |
| /* Content area */ | |
| .app.has-shell .app-main { height: 100%; } | |
| .app.has-shell .screen { | |
| max-width: 760px; margin: 0 auto; width: 100%; | |
| padding-top: 8px; padding-bottom: 32px; | |
| } | |
| .app.has-shell .bottom-nav { display: none; } | |
| } | |
| /* ── Top bar ───────────────────────────────────────────── */ | |
| .topbar { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 20px 22px 8px; | |
| } | |
| .topbar .icon-btn { font-size: 1.2rem; } | |
| .icon-btn { | |
| width: 42px; height: 42px; border-radius: 14px; | |
| display: grid; place-items: center; | |
| background: var(--surface); border: 1px solid var(--line); | |
| color: var(--ink); cursor: pointer; transition: var(--t-ui); | |
| font-size: 1.1rem; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .icon-btn:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); } | |
| .icon-btn:active { transform: scale(.94); } | |
| /* ── Typography ────────────────────────────────────────── */ | |
| .h1 { font-size: 1.8rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } | |
| .h2 { font-size: 1.25rem; font-weight: 700; } | |
| .muted { color: var(--ink-soft); } | |
| .underline-accent { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } | |
| /* ── Page scroll area ──────────────────────────────────── */ | |
| .screen { | |
| flex: 1; | |
| padding: 0 22px calc(var(--nav-h) + 24px); | |
| overflow-y: auto; | |
| } | |
| .screen.no-nav { padding-bottom: 24px; } | |
| /* ── Buttons ───────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; align-items: center; justify-content: center; gap: 8px; | |
| width: 100%; padding: 16px 20px; | |
| background: var(--grad-accent); color: var(--on-accent); | |
| font: inherit; font-weight: 600; font-size: 1rem; | |
| border: none; border-radius: 18px; cursor: pointer; | |
| transition: var(--t-ui), background var(--t-morph); | |
| box-shadow: 0 10px 24px var(--bg-tint); | |
| position: relative; overflow: hidden; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .btn::after { | |
| content: ''; position: absolute; inset: 0; | |
| background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 45%, transparent 70%); | |
| transform: translateX(-140%); transition: transform .65s ease; | |
| pointer-events: none; | |
| } | |
| .btn:focus-visible::after, | |
| .btn:hover::after { transform: translateX(140%); } | |
| .btn:active { transform: scale(.98); } | |
| .btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; } | |
| /* ── Cards & pills ─────────────────────────────────────── */ | |
| .card { | |
| background: var(--surface); border-radius: var(--radius); | |
| box-shadow: var(--shadow-sm); padding: 18px; | |
| } | |
| .pill { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 7px 14px; border-radius: 999px; | |
| background: var(--bg-tint); color: var(--ink); | |
| font-size: .8rem; font-weight: 500; white-space: nowrap; | |
| transition: background var(--t-morph); | |
| } | |
| /* ── Stepper (portion control) ─────────────────────────── */ | |
| .stepper { | |
| display: inline-flex; align-items: center; gap: 10px; | |
| background: var(--surface); border: 1px solid var(--line); | |
| border-radius: 999px; padding: 6px; | |
| } | |
| .stepper button { | |
| width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; | |
| background: var(--bg-tint); color: var(--accent); font-size: 1.2rem; font-weight: 700; | |
| display: grid; place-items: center; transition: var(--t-ui); | |
| } | |
| .stepper button:active { transform: scale(.9); } | |
| .stepper .qty { min-width: 28px; text-align: center; font-weight: 700; } | |
| /* ── Bottom nav (injected by nav.js) ───────────────────── */ | |
| .bottom-nav { | |
| position: absolute; left: 0; right: 0; bottom: 0; | |
| height: var(--nav-h); | |
| background: rgba(255,255,255,.92); backdrop-filter: blur(10px); | |
| border-top: 1px solid var(--line); | |
| display: flex; align-items: center; justify-content: space-around; | |
| z-index: 20; | |
| } | |
| .bottom-nav a { | |
| color: var(--ink-soft); font-size: 1.3rem; text-decoration: none; | |
| width: 48px; height: 48px; display: grid; place-items: center; | |
| transition: var(--t-ui); | |
| border-radius: 16px; position: relative; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .bottom-nav a::after { | |
| content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; | |
| border-radius: 999px; background: currentColor; opacity: 0; | |
| transform: translateY(5px) scale(.5); transition: var(--t-ui); | |
| } | |
| .bottom-nav a.active { color: var(--accent); transform: translateY(-2px); } | |
| .bottom-nav a.active::after { opacity: .75; transform: translateY(0) scale(1); } | |
| .bottom-nav .fab { | |
| width: 58px; height: 58px; margin-top: -22px; border-radius: 50%; | |
| background: var(--accent); color: var(--on-accent); font-size: 1.5rem; | |
| box-shadow: 0 8px 22px var(--bg-tint); | |
| transition: var(--t-ui), background var(--t-morph); | |
| animation: fabBreath 2.8s ease-in-out infinite; | |
| } | |
| .bottom-nav .fab .ic { | |
| width: 26px; | |
| height: 26px; | |
| display: block; | |
| color: var(--on-accent); | |
| stroke: currentColor; | |
| } | |
| .bottom-nav .fab:active { animation: none; transform: scale(.92); } | |
| .bottom-nav .fab::after { display: none; } | |
| /* ── Animations ────────────────────────────────────────── */ | |
| @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } | |
| @keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } } | |
| @keyframes loaderSpin { to { transform: rotate(360deg); } } | |
| @keyframes loaderPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } } | |
| @keyframes loaderText { from { opacity: .55; transform: translateY(0); } to { opacity: 1; transform: translateY(-2px); } } | |
| @keyframes loaderSwap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes loaderPulse { from { transform: scale(.78); opacity: .6; } to { transform: scale(1.22); opacity: 0; } } | |
| @keyframes loaderCorner { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.05); opacity: 1; } } | |
| @keyframes loaderFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } | |
| @keyframes fabBreath { | |
| 0%, 100% { box-shadow: 0 8px 22px var(--bg-tint); transform: translateY(0); } | |
| 50% { box-shadow: 0 12px 30px var(--bg-tint); transform: translateY(-2px); } | |
| } | |
| .rise { animation: rise .5s cubic-bezier(.4,0,.2,1) both; } | |
| .pop { animation: pop .4s cubic-bezier(.34,1.56,.64,1) both; } | |
| .stagger > * { animation: rise .5s cubic-bezier(.4,0,.2,1) both; } | |
| .stagger > *:nth-child(2){ animation-delay:.06s } .stagger > *:nth-child(3){ animation-delay:.12s } | |
| .stagger > *:nth-child(4){ animation-delay:.18s } .stagger > *:nth-child(5){ animation-delay:.24s } | |
| .stagger > *:nth-child(6){ animation-delay:.30s } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { animation: none ; transition: none ; } | |
| } | |