| |
| |
| |
|
|
| |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| :root { |
| --ink: #0e1209; |
| --canvas: #f5f2ea; |
| --cream: #faf7f0; |
| --dark: #111a0d; |
| --moss: #3d6b2a; |
| --leaf: #5a9e3c; |
| --sprout: #8ecf5e; |
| --soil: #7a4f2d; |
| --clay: #b8764a; |
| --gold: #c9a84c; |
| --nav-h: 64px; |
| } |
|
|
| |
| html, body { |
| height: 100%; |
| font-family: 'Cabinet Grotesk', sans-serif; |
| background: var(--canvas); |
| color: var(--ink); |
| cursor: none; |
| overflow: hidden; |
| } |
|
|
| a { text-decoration: none; color: inherit; } |
| ul { list-style: none; } |
| button { cursor: none; font-family: inherit; border: none; background: none; } |
| input, select, textarea { font-family: inherit; } |
|
|
| |
| .cursor-dot, .cursor-ring { |
| position: fixed; |
| pointer-events: none; |
| z-index: 9999; |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| transition: opacity 0.2s; |
| } |
| .cursor-dot { width: 6px; height: 6px; background: var(--moss); mix-blend-mode: multiply; } |
| .cursor-ring { width: 28px; height: 28px; border: 1.5px solid var(--moss); mix-blend-mode: multiply; transition: width .15s, height .15s, border-color .15s; } |
| body.cursor-hover .cursor-ring { width: 44px; height: 44px; border-color: var(--leaf); } |
|
|
| |
| .nav { |
| position: fixed; |
| top: 0; left: 0; right: 0; |
| height: var(--nav-h); |
| z-index: 1000; |
| transition: background 0.35s, border-color 0.35s; |
| } |
| .nav--dark { background: rgba(17,26,13,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.07); } |
| .nav--light { background: rgba(250,247,240,.94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(14,18,9,.08); } |
|
|
| .nav-inner { |
| display: flex; |
| align-items: center; |
| height: 100%; |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 28px; |
| gap: 0; |
| } |
|
|
| .nav-logo { |
| font-family: 'Instrument Serif', serif; |
| font-size: 1.45rem; |
| letter-spacing: -0.01em; |
| margin-right: auto; |
| display:flex;align-items:center; |
| } |
| .nav-logo-img { height:58px;width:auto;object-fit:contain; } |
| .nav--dark .logo-leaf { color: var(--sprout); } |
| .nav--dark .logo-guard { color: rgba(255,255,255,.85); } |
| .nav--light .logo-leaf { color: var(--moss); } |
| .nav--light .logo-guard { color: var(--ink); } |
|
|
| .nav-links { |
| display: flex; |
| align-items: center; |
| gap: 2px; |
| } |
| .nav-link { |
| padding: 6px 13px; |
| border-radius: 7px; |
| font-size: 0.875rem; |
| font-weight: 500; |
| transition: background .18s, color .18s; |
| } |
| .nav--dark .nav-link { color: rgba(255,255,255,.55); } |
| .nav--dark .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); } |
| .nav--dark .nav-link.active { color: var(--sprout); background: rgba(142,207,94,.12); } |
| .nav--light .nav-link { color: rgba(14,18,9,.5); } |
| .nav--light .nav-link:hover { color: var(--ink); background: rgba(14,18,9,.06); } |
| .nav--light .nav-link.active { color: var(--moss); background: rgba(61,107,42,.1); } |
|
|
| |
| .lang-switcher { display:flex;gap:3px;align-items:center;margin-right:10px; } |
| .lang-btn { |
| padding:4px 9px;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.04em; |
| color:rgba(255,255,255,.45);background:transparent;transition:all .15s;cursor:pointer; |
| font-family:inherit; |
| } |
| .lang-btn:hover { color:rgba(255,255,255,.85); } |
| .lang-btn.active { color:#fff;background:rgba(255,255,255,.13); } |
| |
| .auth-lang-switcher { margin-bottom:18px; } |
| .auth-lang-switcher .lang-btn { color:rgba(255,255,255,.4); } |
| .auth-lang-switcher .lang-btn.active { color:#fff;background:rgba(255,255,255,.12); } |
|
|
| |
| .nav-right { display: flex; align-items: center; gap: 8px; margin-left: 16px; } |
|
|
| |
| [dir="rtl"] .nav-inner { flex-direction: row-reverse; } |
| [dir="rtl"] .nav-links { flex-direction: row-reverse; } |
| [dir="rtl"] .nav-right { margin-left:0;margin-right:16px; } |
| [dir="rtl"] .lang-switcher { margin-right:0;margin-left:10px; } |
| [dir="rtl"] .chat-layout { flex-direction: row-reverse; } |
| [dir="rtl"] .orders-layout { flex-direction: row-reverse; } |
| [dir="rtl"] .shop-layout { flex-direction: row-reverse; } |
| [dir="rtl"] .dashboard-layout { flex-direction: row-reverse; } |
| [dir="rtl"] .msg--user { flex-direction: row-reverse; } |
| [dir="rtl"] .msg--bot { flex-direction: row-reverse; } |
| [dir="rtl"] .msg--user .msg-bubble { border-radius: 18px 4px 18px 18px; } |
| [dir="rtl"] .msg--bot .msg-bubble { border-radius: 4px 18px 18px 18px; } |
| [dir="rtl"] .cart-drawer { left:0;right:auto;transform:translateX(-100%);box-shadow:20px 0 60px rgba(14,18,9,.3); } |
| [dir="rtl"] .cart-drawer.open { transform:translateX(0); } |
| [dir="rtl"] .user-dropdown { right:auto;left:12px; } |
|
|
| .cart-btn { |
| display: flex; align-items: center; gap: 6px; |
| padding: 8px 14px; |
| border-radius: 8px; |
| font-size: 0.875rem; font-weight: 600; |
| position: relative; |
| transition: background .18s, color .18s; |
| } |
| .nav--dark .cart-btn { color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); } |
| .nav--dark .cart-btn:hover { background: rgba(255,255,255,.12); color: #fff; } |
| .nav--light .cart-btn { color: var(--ink); background: rgba(14,18,9,.07); } |
| .nav--light .cart-btn:hover { background: rgba(14,18,9,.12); } |
|
|
| .cart-badge { |
| min-width: 18px; height: 18px; padding: 0 4px; |
| border-radius: 9px; background: var(--leaf); color: #fff; |
| font-size: 0.7rem; font-weight: 700; |
| display: inline-flex; align-items: center; justify-content: center; |
| } |
|
|
| |
| .user-btn { |
| display: flex; align-items: center; gap: 8px; |
| padding: 6px 12px 6px 6px; |
| border-radius: 8px; |
| transition: background .18s; |
| } |
| .nav--dark .user-btn { background: rgba(255,255,255,.07); } |
| .nav--dark .user-btn:hover { background: rgba(255,255,255,.12); } |
| .nav--light .user-btn { background: rgba(14,18,9,.07); } |
| .nav--light .user-btn:hover { background: rgba(14,18,9,.12); } |
|
|
| .user-avatar { |
| width: 28px; height: 28px; |
| border-radius: 7px; |
| background: var(--moss); |
| color: #fff; |
| font-size: 0.78rem; font-weight: 800; |
| display: flex; align-items: center; justify-content: center; |
| flex-shrink: 0; |
| } |
| .user-name-nav { |
| font-size: 0.84rem; font-weight: 600; |
| max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
| } |
| .nav--dark .user-name-nav { color: rgba(255,255,255,.75); } |
| .nav--light .user-name-nav { color: var(--ink); } |
|
|
| |
| .user-dropdown { |
| position: fixed; |
| top: calc(var(--nav-h) + 6px); |
| right: 24px; |
| width: 220px; |
| background: var(--dark); |
| border: 1px solid rgba(255,255,255,.1); |
| border-radius: 12px; |
| padding: 14px; |
| z-index: 1100; |
| box-shadow: 0 16px 48px rgba(0,0,0,.4); |
| animation: fadeUp .15s ease both; |
| } |
| .user-dropdown.hidden { display: none; } |
| .dropdown-name { font-size: .9rem; font-weight: 700; color: #fff; } |
| .dropdown-email { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: 2px; margin-bottom: 12px; } |
| .dropdown-divider { height: 1px; background: rgba(255,255,255,.08); margin-bottom: 10px; } |
| .dropdown-item { |
| display: flex; align-items: center; gap: 8px; |
| width: 100%; padding: 9px 10px; |
| border-radius: 8px; |
| font-size: .84rem; font-weight: 600; |
| color: rgba(255,255,255,.55); |
| transition: background .15s, color .15s; |
| } |
| .dropdown-item:hover { background: rgba(255,255,255,.07); color: #fff; } |
|
|
| |
| |
| |
| .page { |
| position: fixed; |
| top: var(--nav-h); |
| left: 0; right: 0; bottom: 0; |
| overflow-y: auto; |
| background: var(--canvas); |
| } |
| .page.hidden { display: none !important; } |
| .hidden { display: none !important; } |
|
|
| |
| .modal-overlay { |
| position: fixed; inset: 0; |
| background: rgba(14,18,9,.65); |
| backdrop-filter: blur(6px); |
| z-index: 2000; |
| display: flex; align-items: center; justify-content: center; |
| padding: 24px; |
| animation: fadeIn .2s ease; |
| } |
| .modal-overlay.hidden { display: none; } |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
|
|
| .modal-box { |
| background: var(--dark); |
| border: 1px solid rgba(255,255,255,.1); |
| border-radius: 20px; |
| padding: 40px 36px; |
| max-width: 420px; |
| width: 100%; |
| text-align: center; |
| animation: fadeUp .25s ease both; |
| } |
| .modal-icon-wrap { |
| width: 60px; height: 60px; |
| border-radius: 16px; |
| background: rgba(90,158,60,.15); |
| border: 1px solid rgba(90,158,60,.2); |
| display: flex; align-items: center; justify-content: center; |
| margin: 0 auto 20px; |
| } |
| .modal-title { font-family: 'Instrument Serif', serif; font-size: 1.6rem; color: #fff; margin-bottom: 10px; } |
| .modal-desc { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 28px; } |
| .modal-actions { display: flex; flex-direction: column; gap: 10px; } |
| .modal-btn-primary { |
| padding: 13px; border-radius: 12px; |
| background: var(--leaf); color: #fff; |
| font-weight: 700; font-size: .95rem; |
| transition: background .18s; |
| } |
| .modal-btn-primary:hover { background: var(--moss); } |
| .modal-btn-ghost { |
| padding: 13px; border-radius: 12px; |
| border: 1px solid rgba(255,255,255,.12); |
| color: rgba(255,255,255,.5); font-weight: 600; font-size: .9rem; |
| transition: border-color .18s, color .18s; |
| } |
| .modal-btn-ghost:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); } |
|
|
| |
| .hero { |
| position: relative; |
| min-height: calc(100vh - var(--nav-h)); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| background: var(--dark); |
| overflow: hidden; |
| padding: 60px 24px 120px; |
| } |
|
|
| .hero-grain { |
| position: absolute; inset: -100px; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); |
| opacity: .055; pointer-events: none; |
| animation: grainAnim .12s steps(2) infinite; |
| } |
| @keyframes grainAnim { |
| 0% { transform: translate(0,0); } 25% { transform: translate(-4px,-4px); } |
| 50% { transform: translate(4px,4px); } 75% { transform: translate(-3px,3px); } |
| 100% { transform: translate(3px,-3px); } |
| } |
|
|
| .orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } |
| .orb-1 { width:520px;height:520px; background:radial-gradient(circle,rgba(61,107,42,.45) 0%,transparent 70%); top:-100px;left:-80px; animation:floatOrb1 8s ease-in-out infinite alternate; } |
| .orb-2 { width:400px;height:400px; background:radial-gradient(circle,rgba(90,158,60,.3) 0%,transparent 70%); bottom:60px;right:-60px; animation:floatOrb2 10s ease-in-out infinite alternate; } |
| .orb-3 { width:300px;height:300px; background:radial-gradient(circle,rgba(201,168,76,.2) 0%,transparent 70%); top:40%;left:55%; animation:floatOrb3 12s ease-in-out infinite alternate; } |
| @keyframes floatOrb1 { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,25px) scale(1.08)} } |
| @keyframes floatOrb2 { from{transform:translate(0,0)} to{transform:translate(-25px,20px)} } |
| @keyframes floatOrb3 { from{transform:translate(0,0)} to{transform:translate(20px,-30px)} } |
|
|
| .hero-content { position:relative;z-index:2;text-align:center;max-width:780px; } |
|
|
| .hero-tag { |
| display:inline-flex;align-items:center;gap:8px; |
| padding:7px 16px;border-radius:100px; |
| background:rgba(142,207,94,.1);border:1px solid rgba(142,207,94,.2); |
| color:var(--sprout);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase; |
| margin-bottom:28px; |
| } |
| .tag-dot { width:7px;height:7px;border-radius:50%;background:var(--sprout);animation:pulse 2s ease-in-out infinite; } |
| @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(142,207,94,.5)} 50%{box-shadow:0 0 0 6px rgba(142,207,94,0)} } |
|
|
| .hero-title { font-family:'Instrument Serif',serif; font-size:clamp(3rem,7vw,5.5rem); line-height:1.06; color:#fff; letter-spacing:-.02em; margin-bottom:20px; } |
| .hero-title em { font-style:italic; color:var(--sprout); } |
| .hero-sub { font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.55);max-width:560px;margin:0 auto 36px; } |
|
|
| .hero-ctas { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; } |
| .btn-primary { padding:13px 28px;border-radius:10px;background:var(--leaf);color:#fff;font-weight:700;font-size:.9rem;transition:background .2s,transform .15s; } |
| .btn-primary:hover { background:#4d8d33;transform:translateY(-1px); } |
| .btn-ghost { padding:13px 28px;border-radius:10px;border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);font-weight:600;font-size:.9rem;transition:border-color .2s,color .2s,transform .15s; } |
| .btn-ghost:hover { border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-1px); } |
|
|
| .stats-strip { |
| position:absolute;bottom:36px;left:50%;transform:translateX(-50%); |
| display:flex;align-items:center; |
| background:rgba(255,255,255,.06);backdrop-filter:blur(20px); |
| border:1px solid rgba(255,255,255,.1);border-radius:16px; |
| padding:20px 40px;z-index:3;white-space:nowrap; |
| } |
| .stat-item { display:flex;flex-direction:column;align-items:center;padding:0 32px; } |
| .stat-num { font-family:'Instrument Serif',serif;font-size:2rem;color:#fff;line-height:1; } |
| .stat-label{ font-size:.75rem;color:rgba(255,255,255,.45);margin-top:4px;letter-spacing:.05em;text-transform:uppercase; } |
| .stat-divider { width:1px;height:40px;background:rgba(255,255,255,.12); } |
|
|
| |
| .features { background:var(--cream); padding:100px 0; } |
| .container { max-width:1200px;margin:0 auto;padding:0 40px; } |
| .section-label { font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin-bottom:12px; } |
| .section-title { font-family:'Instrument Serif',serif;font-size:clamp(2rem,4vw,3rem);line-height:1.15;color:var(--ink);letter-spacing:-.02em;max-width:540px;margin-bottom:56px; } |
| .section-title em { font-style:italic;color:var(--moss); } |
|
|
| .features-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; } |
| .feature-card { |
| padding:28px;background:#fff;border-radius:16px; |
| border:1px solid rgba(14,18,9,.07); |
| cursor:none;transition:transform .2s,box-shadow .2s,border-color .2s; |
| } |
| .feature-card:hover { transform:translateY(-4px);box-shadow:0 16px 40px rgba(14,18,9,.1);border-color:var(--leaf); } |
| .feature-icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px; } |
| .feature-title { font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:8px; } |
| .feature-desc { font-size:.875rem;line-height:1.6;color:rgba(14,18,9,.6);margin-bottom:20px; } |
| .feature-link { display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--moss);letter-spacing:.01em;text-transform:uppercase; } |
|
|
| |
| #page-sim { background:var(--dark); } |
| .sim-placeholder { height:100%;display:flex;align-items:center;justify-content:center; } |
| .sim-placeholder-inner { text-align:center; } |
| .sim-placeholder-icon { margin:0 auto 20px;opacity:.6; } |
| .sim-placeholder-text { font-family:'Courier New',monospace;font-size:1.1rem;color:#3d6b2a;letter-spacing:.05em; } |
| .sim-placeholder-sub { font-family:'Courier New',monospace;font-size:.78rem;color:rgba(61,107,42,.45);margin-top:8px; } |
|
|
| |
| #page-shop { background:var(--canvas); overflow: hidden; } |
| .shop-layout { display:flex;height:100%; } |
|
|
| .shop-sidebar { |
| width:240px;flex-shrink:0; |
| border-right:1px solid rgba(14,18,9,.08); |
| padding:28px 20px;background:var(--cream); |
| overflow-y:auto; |
| } |
| .shop-main { flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden; } |
| .shop-toolbar { padding:24px 28px 0;display:flex;gap:12px; } |
| .product-grid { flex:1;overflow-y:auto;padding:20px 28px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;align-content:start; } |
|
|
| .sidebar-section { margin-bottom:28px; } |
| .sidebar-label { font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(14,18,9,.4);margin-bottom:10px; } |
| .filter-list { display:flex;flex-direction:column;gap:2px; } |
| .filter-item { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:.84rem;font-weight:500;color:rgba(14,18,9,.65);cursor:none;transition:background .15s,color .15s; } |
| .filter-item:hover { background:rgba(14,18,9,.05);color:var(--ink); } |
| .filter-item.active { background:rgba(61,107,42,.1);color:var(--moss);font-weight:700; } |
| .filter-dot { width:8px;height:8px;border-radius:2px;flex-shrink:0; } |
|
|
| .price-range-wrap { display:flex;flex-direction:column;gap:10px; } |
| .range-slider { width:100%;accent-color:var(--leaf); } |
| .price-display { font-size:.82rem;color:rgba(14,18,9,.6);font-weight:600; } |
|
|
| .search-wrap { position:relative;flex:1; } |
| .search-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(14,18,9,.35);pointer-events:none; } |
| .search-input { width:100%;padding:10px 16px 10px 38px;border-radius:10px;border:1px solid rgba(14,18,9,.12);background:#fff;font-size:.875rem;color:var(--ink);outline:none;transition:border-color .15s; } |
| .search-input:focus { border-color:var(--leaf); } |
| .sort-select { padding:10px 16px;border-radius:10px;border:1px solid rgba(14,18,9,.12);background:#fff;font-size:.875rem;color:var(--ink);outline:none;cursor:none; } |
|
|
| |
| .product-card { background:#fff;border-radius:16px;border:1px solid rgba(14,18,9,.08);cursor:none;transition:transform .2s,box-shadow .2s,border-color .2s; } |
| .product-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgba(14,18,9,.1);border-color:var(--leaf); } |
| .product-img { height:140px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:16px 16px 0 0; } |
| .product-initials { font-size:2.6rem;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:-.02em;user-select:none; } |
| .product-badge { position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:6px;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; } |
| .badge-bio { background:rgba(90,158,60,.18);color:#3d6b2a; } |
| .badge-chem { background:rgba(201,122,42,.18);color:#a05c1a; } |
| .badge-fert { background:rgba(74,126,201,.18);color:#2a5aaa; } |
| .badge-pgr { background:rgba(154,108,201,.18);color:#6a3aaa; } |
| .product-body { padding:14px 15px 15px; } |
| .product-name { font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.35;margin-bottom:3px;min-height:2.43rem; } |
| .product-cat { font-size:.68rem;color:rgba(14,18,9,.4);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } |
| .product-crops { display:none; } |
| .product-footer { border-top:1px solid rgba(14,18,9,.06);padding-top:10px; } |
| .product-price { font-weight:800;font-size:1.05rem;color:var(--leaf);margin-bottom:9px; } |
| .add-cart-btn { display:block;width:100%;padding:10px 14px;border-radius:10px;background:var(--moss);color:#fff;font-size:.82rem;font-weight:700;text-align:center;transition:background .18s; } |
| .add-cart-btn:hover { background:var(--leaf); } |
| .add-cart-btn.in-cart { background:var(--gold);color:var(--ink); } |
|
|
| |
| #page-chat { background:var(--canvas); overflow: hidden; } |
| .chat-layout { display:flex;height:100%; } |
|
|
| .chat-sidebar { |
| width:280px;flex-shrink:0; |
| border-right:1px solid rgba(14,18,9,.08); |
| background:var(--dark); |
| padding:24px 18px;overflow-y:auto; |
| } |
| .chat-sidebar-section { margin-bottom:24px; } |
| .chat-sidebar .sidebar-label { color:rgba(255,255,255,.28); } |
|
|
| .new-chat-btn { width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;margin-bottom:20px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(90,158,60,.18);color:rgba(255,255,255,.8);font-size:.84rem;font-weight:600;cursor:pointer;transition:all .18s; } |
| .new-chat-btn:hover { background:rgba(90,158,60,.32);border-color:rgba(90,158,60,.4);color:#fff; } |
|
|
| .session-item { padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .15s;margin-bottom:3px; } |
| .session-item:hover { background:rgba(255,255,255,.07); } |
| .session-item.active { background:rgba(90,158,60,.2);border-left:2px solid var(--sprout); } |
| .session-preview { font-size:.8rem;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500; } |
| .session-date { font-size:.7rem;color:rgba(255,255,255,.28);margin-top:2px; } |
| .session-empty { font-size:.78rem;color:rgba(255,255,255,.22);padding:6px 2px;font-style:italic; } |
|
|
| #chatSessionList { max-height:180px;overflow-y:auto; } |
| #chatSessionList::-webkit-scrollbar { width:3px; } |
| #chatSessionList::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1);border-radius:2px; } |
|
|
| .topic-list { display:flex;flex-direction:column;gap:2px; } |
| .topic-item { display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:.84rem;font-weight:500;color:rgba(255,255,255,.45);cursor:none;transition:background .15s,color .15s; } |
| .topic-item svg { flex-shrink:0;opacity:.6; } |
| .topic-item:hover { background:rgba(255,255,255,.06);color:rgba(255,255,255,.8); } |
| .topic-item.active { background:rgba(90,158,60,.18);color:var(--sprout);font-weight:700; } |
| .topic-item.active svg { opacity:1; } |
|
|
| .quick-questions { display:flex;flex-direction:column;gap:6px; } |
| .quick-btn { text-align:left;padding:9px 12px;border-radius:8px;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:background .15s,color .15s,border-color .15s;line-height:1.3; } |
| .quick-btn:hover { background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.15); } |
|
|
| .location-badge { display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;background:rgba(90,158,60,.12);border:1px solid rgba(90,158,60,.2);font-size:.78rem;font-weight:600;color:var(--sprout); } |
|
|
| .chat-main { flex:1;display:flex;flex-direction:column;min-width:0; } |
| .chat-topbar { display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-bottom:1px solid rgba(14,18,9,.07);background:rgba(255,255,255,.6);backdrop-filter:blur(6px); } |
| .chat-topbar-title { font-size:.82rem;font-weight:700;letter-spacing:.04em;color:rgba(14,18,9,.45);text-transform:uppercase; } |
| .chat-clear-btn { display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;border:1px solid rgba(14,18,9,.12);background:none;font-size:.78rem;font-weight:600;color:rgba(14,18,9,.45);cursor:pointer;transition:all .18s; } |
| .chat-clear-btn:hover { background:rgba(220,50,50,.07);border-color:rgba(220,50,50,.25);color:#c0392b; } |
| .chat-messages { flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:16px; } |
| .chat-messages::-webkit-scrollbar { width:4px; } |
| .chat-messages::-webkit-scrollbar-thumb { background:rgba(14,18,9,.12);border-radius:2px; } |
|
|
| .msg { display:flex;gap:12px;align-items:flex-start;max-width:72%;animation:fadeUp .3s ease both; } |
| .msg--bot { align-self:flex-start; } |
| .msg--user { align-self:flex-end;flex-direction:row-reverse; } |
| .msg-avatar { width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex-shrink:0;color:#fff; } |
| .msg--bot .msg-avatar { background:var(--moss); } |
| .msg--user .msg-avatar { background:var(--soil); } |
| .msg-bubble { padding:12px 16px;border-radius:14px;font-size:.9rem;line-height:1.6; } |
| .msg--bot .msg-bubble { background:var(--dark);color:rgba(255,255,255,.85);border-bottom-left-radius:4px; } |
| .msg--user .msg-bubble { background:var(--moss);color:#fff;border-bottom-right-radius:4px; } |
| .msg-bubble p { margin-bottom:6px; } |
| .msg-bubble p:last-child { margin-bottom:0; } |
| .msg-bubble ul { padding-left:18px;margin:6px 0;display:flex;flex-direction:column;gap:4px; } |
| .msg-bubble ol { padding-left:20px;margin:6px 0;display:flex;flex-direction:column;gap:6px; } |
| .msg-bubble li { list-style:disc; font-size:.88rem; } |
| .msg-bubble ol li { list-style:decimal; } |
| .msg-bubble strong { font-weight:700; } |
|
|
| |
| .msg-heading { |
| font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase; |
| color:var(--sprout);margin:14px 0 6px;padding-bottom:5px; |
| border-bottom:1px solid rgba(142,207,94,.18); |
| } |
| .msg-heading:first-child { margin-top:2px; } |
|
|
| |
| .msg-bubble ol li::marker { color:var(--sprout);font-weight:700; } |
|
|
| |
| .msg-tools { |
| display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:8px; |
| border-top:1px solid rgba(255,255,255,.08); |
| } |
| .tool-chip { |
| display:inline-flex;align-items:center;gap:4px; |
| padding:3px 8px;border-radius:5px; |
| background:rgba(142,207,94,.1);color:var(--sprout); |
| font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; |
| } |
|
|
| |
| .msg-image { width:100%;max-width:240px;border-radius:8px;margin-bottom:8px;display:block; } |
|
|
| .typing-indicator { display:flex;align-items:center;gap:12px;align-self:flex-start;animation:fadeUp .3s ease both; } |
| .typing-dots { display:flex;gap:5px;padding:12px 16px;background:var(--dark);border-radius:14px;border-bottom-left-radius:4px; } |
| .typing-dots span { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);animation:bounce 1.2s ease-in-out infinite; } |
| .typing-dots span:nth-child(2) { animation-delay:.2s; } |
| .typing-dots span:nth-child(3) { animation-delay:.4s; } |
| @keyframes bounce { 0%,80%,100%{transform:translateY(0);opacity:.3} 40%{transform:translateY(-7px);opacity:1} } |
|
|
| .chat-input-area { |
| padding:10px 28px 16px;border-top:1px solid rgba(14,18,9,.08); |
| background:var(--cream);display:flex;flex-direction:column;gap:0; |
| } |
|
|
| |
| .img-preview-row { display:none;flex-wrap:wrap;gap:8px;padding:6px 0 8px; } |
| .img-preview-row.visible { display:flex; } |
| .img-preview-chip { |
| display:inline-flex;align-items:center;gap:8px; |
| padding:5px 10px;border-radius:8px; |
| background:rgba(61,107,42,.1);border:1px solid rgba(61,107,42,.2); |
| font-size:.78rem;font-weight:600;color:var(--moss); |
| } |
| .img-preview-chip img { width:36px;height:36px;border-radius:6px;object-fit:cover; } |
| .img-preview-chip .clear-img { color:rgba(14,18,9,.35);font-size:1.1rem;line-height:1;transition:color .15s; } |
| .img-preview-chip .clear-img:hover { color:#c94a4a; } |
|
|
| |
| .low-conf-warning { |
| display:flex;align-items:flex-start;gap:10px; |
| margin:6px 0;padding:12px 16px;border-radius:10px; |
| background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.25); |
| font-size:.82rem;color:#92400e;line-height:1.5; |
| } |
| .low-conf-warning svg { flex-shrink:0;margin-top:2px;stroke:#d97706; } |
|
|
| |
| .chat-tips-panel { |
| display:flex;flex-direction:column;align-items:center;justify-content:center; |
| flex:1;padding:32px 28px 24px;text-align:center;min-height:320px; |
| } |
| .chat-tips-icon { |
| width:60px;height:60px;border-radius:16px; |
| background:rgba(90,130,50,.1);display:flex;align-items:center;justify-content:center; |
| color:var(--moss);margin-bottom:14px; |
| } |
| .chat-tips-title { font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:6px; } |
| .chat-tips-sub { font-size:.85rem;color:rgba(14,18,9,.45);margin-bottom:22px; } |
| .chat-tips-grid { |
| display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:480px; |
| } |
| .chat-tip-card { |
| display:flex;align-items:flex-start;gap:10px; |
| padding:12px 14px;border-radius:12px; |
| background:#fff;border:1px solid rgba(14,18,9,.07); |
| text-align:left;font-size:.8rem;color:rgba(14,18,9,.65);line-height:1.45; |
| } |
| .tip-icon { font-size:1.15rem;flex-shrink:0;line-height:1.3; } |
|
|
| .chat-input-row { display:flex;gap:8px;align-items:flex-end; } |
|
|
| .img-upload-btn { |
| width:40px;height:40px;border-radius:10px; |
| background:rgba(14,18,9,.06);color:rgba(14,18,9,.4); |
| display:flex;align-items:center;justify-content:center;flex-shrink:0; |
| transition:background .15s,color .15s; |
| } |
| .img-upload-btn:hover { background:rgba(61,107,42,.12);color:var(--moss); } |
|
|
| .chat-textarea { flex:1;padding:11px 15px;border-radius:12px;border:1px solid rgba(14,18,9,.12);background:#fff;font-size:.9rem;color:var(--ink);resize:none;outline:none;max-height:90px;line-height:1.5;transition:border-color .15s; } |
| .chat-textarea:focus { border-color:var(--leaf); } |
| .chat-textarea::placeholder { color:rgba(14,18,9,.35); } |
| .chat-send-btn { width:40px;height:40px;border-radius:12px;background:var(--leaf);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s,transform .15s; } |
| .chat-send-btn:hover { background:var(--moss);transform:scale(1.05); } |
| .chat-send-btn:disabled { background:rgba(14,18,9,.15); } |
|
|
| |
| #page-dashboard { background:var(--canvas); overflow: hidden; } |
| .dashboard-layout { display:flex;height:100%; } |
|
|
| .dashboard-sidebar { width:220px;flex-shrink:0;background:var(--dark);padding:28px 14px;overflow-y:auto; } |
| .dash-nav { display:flex;flex-direction:column;gap:2px; } |
| .dash-nav-item { display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:.855rem;font-weight:500;color:rgba(255,255,255,.4);transition:background .15s,color .15s; } |
| .dash-nav-item svg { flex-shrink:0;opacity:.5;transition:opacity .15s; } |
| .dash-nav-item:hover { background:rgba(255,255,255,.06);color:rgba(255,255,255,.8); } |
| .dash-nav-item:hover svg { opacity:.8; } |
| .dash-nav-item.active { background:rgba(90,158,60,.18);color:var(--sprout);font-weight:700; } |
| .dash-nav-item.active svg { opacity:1; } |
|
|
| .dashboard-main { flex:1;overflow-y:auto;padding:32px 36px;min-width:0; } |
| .dash-header { margin-bottom:28px; } |
| .dash-welcome { font-family:'Instrument Serif',serif;font-size:2.1rem;color:var(--ink);letter-spacing:-.02em; } |
| .dash-sub { font-size:.875rem;color:rgba(14,18,9,.45);margin-top:4px; } |
|
|
| .kpi-row { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px; } |
| .kpi-card { background:#fff;border-radius:14px;border:1px solid rgba(14,18,9,.07);padding:20px;position:relative;overflow:hidden; } |
| .kpi-stripe { position:absolute;top:0;left:0;right:0;height:3px;background:var(--stripe); } |
| .kpi-label { font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(14,18,9,.4);margin-bottom:10px; } |
| .kpi-value { font-family:'Instrument Serif',serif;font-size:2rem;color:var(--ink);line-height:1;margin-bottom:6px; } |
| .kpi-trend { font-size:.75rem;color:rgba(14,18,9,.4); } |
|
|
| .dash-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; } |
| .dash-card { background:#fff;border-radius:16px;border:1px solid rgba(14,18,9,.07);padding:24px; } |
| .dash-card-header { font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(14,18,9,.06); } |
|
|
| .order-list { display:flex;flex-direction:column; } |
| .order-row { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(14,18,9,.05); } |
| .order-row:last-child { border-bottom:none; } |
| .order-icon { width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0; } |
| .order-info { flex:1;min-width:0; } |
| .order-name { font-size:.84rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } |
| .order-date { font-size:.72rem;color:rgba(14,18,9,.4);margin-top:2px; } |
| .order-price { font-size:.84rem;font-weight:700;color:var(--ink);flex-shrink:0; } |
| .order-badge { padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0; } |
| .order-badge.delivered { background:rgba(90,158,60,.12);color:#3d6b2a; } |
| .order-badge.transit { background:rgba(201,168,76,.15);color:#8a6020; } |
| .order-badge.pending { background:rgba(154,108,201,.12);color:#6a3aaa; } |
|
|
| .activity-list { display:flex;flex-direction:column; } |
| .activity-row { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(14,18,9,.05); } |
| .activity-row:last-child { border-bottom:none; } |
| .activity-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; } |
| .activity-text { flex:1;font-size:.84rem;color:rgba(14,18,9,.7);line-height:1.4; } |
| .activity-time { font-size:.72rem;color:rgba(14,18,9,.35);flex-shrink:0;white-space:nowrap; } |
|
|
| |
| .cart-overlay { |
| position:fixed;inset:0;background:rgba(14,18,9,.5);z-index:1100; |
| opacity:0;pointer-events:none;transition:opacity .3s; |
| } |
| .cart-overlay.open { opacity:1;pointer-events:all; } |
| .cart-drawer { |
| position:fixed;top:0;right:0;bottom:0;width:400px; |
| background:var(--dark);z-index:1101; |
| display:flex;flex-direction:column; |
| transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1); |
| box-shadow:-20px 0 60px rgba(14,18,9,.3); |
| } |
| .cart-drawer.open { transform:translateX(0); } |
| .cart-header { display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(255,255,255,.08); } |
| .cart-title { font-family:'Instrument Serif',serif;font-size:1.4rem;color:#fff; } |
| .cart-close { width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s; } |
| .cart-close:hover { background:rgba(255,255,255,.12);color:#fff; } |
| .cart-items { flex:1;overflow-y:auto;padding:16px 28px;display:flex;flex-direction:column;gap:12px; } |
| .cart-items::-webkit-scrollbar { width:4px; } |
| .cart-items::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1);border-radius:2px; } |
|
|
| .cart-item { display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,.04);border-radius:12px;border:1px solid rgba(255,255,255,.06);animation:fadeUp .25s ease both; } |
| .cart-item-icon { width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;flex-shrink:0;color:rgba(255,255,255,.9); } |
| .cart-item-info { flex:1;min-width:0; } |
| .cart-item-name { font-size:.84rem;font-weight:600;color:rgba(255,255,255,.85);line-height:1.3; } |
| .cart-item-cat { font-size:.72rem;color:rgba(255,255,255,.35);margin-top:2px; } |
| .cart-item-controls { display:flex;align-items:center;background:rgba(255,255,255,.07);border-radius:8px;overflow:hidden; } |
| .qty-btn { width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:1rem;font-weight:700;transition:background .15s,color .15s; } |
| .qty-btn:hover { background:rgba(255,255,255,.1);color:#fff; } |
| .qty-num { min-width:28px;text-align:center;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.85); } |
| .cart-item-price { font-size:.88rem;font-weight:700;color:rgba(255,255,255,.7);min-width:60px;text-align:right; } |
| .cart-item-remove { color:rgba(255,255,255,.2);font-size:.9rem;transition:color .15s;padding:4px; } |
| .cart-item-remove:hover { color:#c94a4a; } |
|
|
| .cart-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:10px;color:rgba(255,255,255,.2);font-size:.9rem;padding:40px 0; } |
| .cart-empty svg { opacity:.15; } |
|
|
| .cart-footer { border-top:1px solid rgba(255,255,255,.08);padding:20px 28px 24px;display:flex;flex-direction:column;gap:8px; } |
| .cart-line { display:flex;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.45); } |
| .cart-line.total { font-size:1rem;font-weight:700;color:#fff;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);margin-top:4px; } |
| .checkout-btn { margin-top:14px;padding:14px;border-radius:12px;background:var(--leaf);color:#fff;font-weight:700;font-size:.95rem;width:100%;transition:background .18s; } |
| .checkout-btn:hover { background:#4d8d33; } |
| .cart-toast { position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-size:.85rem;font-weight:600;box-shadow:0 8px 28px rgba(14,18,9,.22);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9000;white-space:nowrap; } |
| .cart-toast.show { opacity:1;transform:translateX(-50%) translateY(0); } |
|
|
| |
| @keyframes fadeUp { |
| from { opacity:0;transform:translateY(10px); } |
| to { opacity:1;transform:translateY(0); } |
| } |
|
|
| |
| ::-webkit-scrollbar { width:5px;height:5px; } |
| ::-webkit-scrollbar-track { background:transparent; } |
| ::-webkit-scrollbar-thumb { background:rgba(14,18,9,.15);border-radius:3px; } |
|
|
| |
| #page-orders { background:var(--canvas); overflow:hidden; } |
| .orders-layout { display:flex;height:100%; } |
|
|
| |
| .orders-sidebar { |
| width:280px;flex-shrink:0;background:var(--dark); |
| display:flex;flex-direction:column;overflow:hidden; |
| } |
| .orders-sidebar-head { |
| padding:22px 20px 14px;display:flex;align-items:center; |
| justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06); |
| } |
| .orders-count-badge { |
| font-size:.72rem;font-weight:700;color:var(--sprout); |
| background:rgba(142,207,94,.12);padding:2px 8px;border-radius:20px; |
| } |
| .orders-list { flex:1;overflow-y:auto;padding:10px 10px; } |
| .orders-list-empty { |
| padding:32px 16px;text-align:center;color:rgba(255,255,255,.3); |
| font-size:.82rem;line-height:1.6; |
| } |
|
|
| |
| .order-row { |
| padding:12px 14px;border-radius:10px;cursor:pointer; |
| margin-bottom:6px;background:rgba(255,255,255,.04); |
| border:1px solid rgba(255,255,255,.06); |
| transition:background .15s,border-color .15s; |
| } |
| .order-row:hover { background:rgba(255,255,255,.08); } |
| .order-row.active { background:rgba(142,207,94,.1);border-color:rgba(142,207,94,.3); } |
| .order-row-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; } |
| .order-row-id { font-size:.82rem;font-weight:700;color:#fff; } |
| .order-row-date { font-size:.7rem;color:rgba(255,255,255,.35); } |
| .order-row-status { font-size:.72rem;color:var(--sprout);font-weight:600;margin-bottom:3px; } |
| .order-row-status.done { color:#8ecf5e; } |
| .order-row-preview { font-size:.7rem;color:rgba(255,255,255,.35);margin-bottom:7px; |
| white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } |
| .order-row-bar { height:4px;background:rgba(255,255,255,.08);border-radius:2px; } |
| .order-row-bar-fill { height:100%;border-radius:2px;background:var(--leaf);transition:width .4s; } |
|
|
| |
| .orders-main { |
| flex:1;overflow-y:auto;padding:28px 32px; |
| background:var(--canvas); |
| } |
|
|
| |
| .orders-empty-state { |
| display:flex;flex-direction:column;align-items:center;justify-content:center; |
| height:100%;text-align:center;gap:14px;color:rgba(14,18,9,.4); |
| } |
| .orders-empty-state p { font-size:1rem;font-weight:600;color:rgba(14,18,9,.55);margin:0; } |
| .orders-empty-state span { font-size:.82rem; } |
|
|
| |
| .order-tracking-view { display:flex;flex-direction:column;gap:0; } |
|
|
| .tracking-header { |
| display:flex;justify-content:space-between;align-items:flex-start; |
| margin-bottom:18px; |
| } |
| .tracking-order-id { font-size:1.1rem;font-weight:800;color:var(--ink); } |
| .tracking-status-lbl { |
| font-size:.8rem;font-weight:600;color:var(--moss);margin-top:3px; |
| text-transform:uppercase;letter-spacing:.05em; |
| } |
| .tracking-elapsed { font-size:.72rem;color:rgba(14,18,9,.35);padding-top:4px; } |
|
|
| |
| .tracking-progress-wrap { |
| height:8px;background:rgba(14,18,9,.08);border-radius:4px; |
| margin-bottom:22px;overflow:hidden; |
| } |
| .tracking-progress-bar { |
| height:100%;border-radius:4px;background:var(--leaf); |
| transition:width .6s ease; |
| } |
|
|
| |
| .tracking-map { |
| height:320px;border-radius:14px;overflow:hidden; |
| border:1px solid rgba(14,18,9,.08);margin-bottom:22px; |
| } |
|
|
| |
| .map-marker-store, |
| .map-marker-dest, |
| .map-marker-courier { |
| font-size:26px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); |
| } |
|
|
| |
| .tracking-bottom { |
| display:grid;grid-template-columns:1fr 1fr;gap:18px; |
| } |
| .tracking-panel { |
| background:#fff;border-radius:14px;padding:18px 20px; |
| border:1px solid rgba(14,18,9,.07); |
| } |
| .tracking-panel-title { |
| font-size:.72rem;font-weight:800;text-transform:uppercase; |
| letter-spacing:.07em;color:rgba(14,18,9,.4);margin-bottom:14px; |
| } |
|
|
| |
| .tracking-steps-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0; } |
| .step-item { |
| display:flex;align-items:flex-start;gap:10px;padding:9px 0; |
| border-bottom:1px solid rgba(14,18,9,.05);position:relative; |
| } |
| .step-item:last-child { border-bottom:none; } |
| .step-dot { |
| width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:3px; |
| background:rgba(14,18,9,.12);transition:background .3s; |
| } |
| .step-item.done .step-dot { background:var(--leaf); } |
| .step-body { display:flex;flex:1;justify-content:space-between;align-items:center;gap:8px; } |
| .step-label { font-size:.83rem;font-weight:500;color:rgba(14,18,9,.6); } |
| .step-item.done .step-label { color:var(--ink);font-weight:600; } |
| .step-badge { |
| font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:5px; |
| background:rgba(142,207,94,.15);color:var(--moss);text-transform:uppercase;flex-shrink:0; |
| } |
| .step-badge.pending { |
| background:rgba(14,18,9,.07);color:rgba(14,18,9,.35); |
| } |
|
|
| |
| .tracking-items-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0; } |
| .tracking-item { |
| display:flex;align-items:center;gap:8px;padding:9px 0; |
| border-bottom:1px solid rgba(14,18,9,.05);font-size:.83rem; |
| } |
| .tracking-item:last-child { border-bottom:none; } |
| .tracking-item-name { flex:1;color:var(--ink);font-weight:500; } |
| .tracking-item-qty { |
| font-size:.72rem;font-weight:700;color:rgba(14,18,9,.4); |
| background:rgba(14,18,9,.06);padding:2px 7px;border-radius:5px; |
| } |
| .tracking-item-price { color:var(--moss);font-weight:700;font-size:.8rem;min-width:64px;text-align:right; } |
|
|
| |
| |
| |
| #page-monitor { overflow-y: auto; } |
|
|
| .monitor-wrap { |
| padding: 32px 40px 48px; |
| max-width: 1280px; |
| margin: 0 auto; |
| } |
|
|
| .monitor-header { margin-bottom: 28px; } |
| .monitor-title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:5px; } |
| .monitor-title { |
| font-family:'Instrument Serif', serif; |
| font-size:2rem; font-weight:400; color:var(--ink); |
| margin:0; display:flex; align-items:center; gap:10px; |
| } |
| .preview-badge { |
| font-family:'Cabinet Grotesk', sans-serif; |
| font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; |
| color:#fff; background:var(--clay); padding:3px 10px; border-radius:20px; |
| vertical-align:middle; |
| } |
| .monitor-sub { font-size:.85rem; color:rgba(14,18,9,.45); margin:0; } |
| .monitor-live-badge { |
| display:flex; align-items:center; gap:6px; |
| font-size:.72rem; font-weight:600; color:rgba(14,18,9,.45); |
| margin-left:auto; |
| } |
| .monitor-dot { |
| width:7px; height:7px; border-radius:50%; background:var(--sprout); |
| animation:monitorPulse 2s ease-in-out infinite; |
| } |
| @keyframes monitorPulse { 0%,100%{opacity:1} 50%{opacity:.3} } |
|
|
| |
| .sensor-grid { |
| display:grid; grid-template-columns:repeat(4,1fr); gap:16px; |
| margin-bottom:20px; |
| } |
| .sensor-card { |
| background:#fff; border-radius:14px; padding:20px; |
| box-shadow:0 1px 4px rgba(14,18,9,.06); |
| border:1.5px solid rgba(14,18,9,.06); |
| transition:border-color .25s, box-shadow .25s, background .25s; |
| } |
| .sensor-card.warn { |
| border-color:rgba(201,74,74,.3); |
| background:rgba(201,74,74,.03); |
| box-shadow:0 2px 14px rgba(201,74,74,.1); |
| } |
| .sensor-icon-wrap { |
| width:36px; height:36px; border-radius:10px; |
| display:flex; align-items:center; justify-content:center; |
| margin-bottom:12px; |
| } |
| .sensor-label { |
| font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; |
| color:rgba(14,18,9,.4); margin-bottom:6px; |
| } |
| .sensor-value-row { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; } |
| .sensor-value { |
| font-family:'Instrument Serif', serif; font-size:2.4rem; |
| color:var(--ink); line-height:1; transition:color .25s; |
| } |
| .sensor-card.warn .sensor-value { color:#c94a4a; } |
| .sensor-unit { font-size:.8rem; color:rgba(14,18,9,.4); font-weight:500; } |
| .sensor-warn { |
| display:none; align-items:center; gap:4px; |
| font-size:.69rem; font-weight:600; color:#c94a4a; margin-top:8px; |
| } |
| .sensor-card.warn .sensor-warn { display:flex; } |
|
|
| |
| .monitor-mid-row { display:grid; grid-template-columns:1fr 270px; gap:16px; margin-bottom:20px; } |
|
|
| .monitor-card { |
| background:#fff; border-radius:14px; padding:22px; |
| box-shadow:0 1px 4px rgba(14,18,9,.06); |
| border:1.5px solid rgba(14,18,9,.06); |
| } |
| .monitor-card-header { |
| font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; |
| color:rgba(14,18,9,.38); margin-bottom:16px; |
| display:flex; align-items:center; gap:8px; |
| } |
| .chart-sub { |
| font-weight:400; letter-spacing:0; text-transform:none; |
| color:rgba(14,18,9,.3); font-size:.68rem; margin-left:auto; |
| } |
|
|
| .moisture-canvas { width:100%; display:block; } |
| .chart-legend { |
| display:flex; align-items:center; gap:5px; |
| font-size:.7rem; color:rgba(14,18,9,.4); margin-top:10px; |
| } |
| .legend-line-swatch { |
| display:inline-block; width:18px; height:2px; |
| background:var(--leaf); border-radius:2px; |
| } |
| .legend-dash-swatch { |
| display:inline-block; width:18px; height:0; |
| border-top:2px dashed var(--clay); |
| } |
|
|
| |
| .pump-card { display:flex; flex-direction:column; } |
| .pump-status-display { |
| flex:1; display:flex; flex-direction:column; align-items:center; |
| justify-content:center; gap:6px; padding:16px 0 20px; |
| } |
| .pump-icon-wrap { |
| width:52px; height:52px; border-radius:50%; background:rgba(14,18,9,.06); |
| display:flex; align-items:center; justify-content:center; |
| color:rgba(14,18,9,.35); transition:background .3s, color .3s; |
| } |
| .pump-icon-wrap.watering { background:rgba(90,158,60,.12); color:var(--leaf); } |
| .pump-state { |
| font-family:'Cabinet Grotesk', sans-serif; font-weight:800; |
| font-size:1.15rem; letter-spacing:.07em; color:var(--ink); transition:color .3s; |
| } |
| .pump-state.watering { color:var(--leaf); } |
| .pump-sub { font-size:.74rem; color:rgba(14,18,9,.42); text-align:center; } |
| .pump-meta { border-top:1px solid rgba(14,18,9,.07); padding-top:12px; display:flex; flex-direction:column; gap:9px; } |
| .pump-meta-row { |
| display:flex; align-items:center; justify-content:space-between; |
| font-size:.74rem; color:rgba(14,18,9,.5); |
| } |
| .pump-auto-badge { |
| font-size:.63rem; font-weight:700; background:rgba(90,158,60,.1); |
| color:var(--moss); padding:2px 8px; border-radius:6px; |
| } |
| .pump-override-btn { |
| font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:7px; |
| border:1.5px solid rgba(14,18,9,.1); cursor:pointer; background:#fff; |
| color:var(--ink); transition:all .2s; |
| } |
| .pump-override-btn:hover { border-color:var(--leaf); color:var(--leaf); } |
| .pump-override-btn.active { background:var(--leaf); color:#fff; border-color:var(--leaf); } |
|
|
| |
| .monitor-bottom-row { display:grid; grid-template-columns:280px 1fr; gap:16px; } |
|
|
| .alerts-toggle-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; } |
| .toggle-label { font-size:.82rem; color:var(--ink); flex:1; font-weight:500; } |
| .toggle-btn { |
| width:40px; height:22px; border-radius:11px; border:none; cursor:pointer; |
| background:rgba(14,18,9,.14); position:relative; transition:background .22s; |
| flex-shrink:0; padding:0; |
| } |
| .toggle-btn[aria-checked="true"] { background:var(--leaf); } |
| .toggle-knob { |
| position:absolute; top:3px; left:3px; |
| width:16px; height:16px; border-radius:50%; background:#fff; |
| transition:transform .22s; box-shadow:0 1px 3px rgba(0,0,0,.18); |
| } |
| .toggle-btn[aria-checked="true"] .toggle-knob { transform:translateX(18px); } |
| .email-input-wrap { margin-bottom:10px; } |
| .email-field-label { |
| display:block; font-size:.67rem; font-weight:700; letter-spacing:.08em; |
| text-transform:uppercase; color:rgba(14,18,9,.38); margin-bottom:5px; |
| } |
| .alert-email-input { |
| width:100%; padding:8px 12px; border-radius:8px; box-sizing:border-box; |
| border:1.5px solid rgba(14,18,9,.1); font-family:'Cabinet Grotesk', sans-serif; |
| font-size:.82rem; color:var(--ink); outline:none; |
| background:rgba(14,18,9,.02); transition:border-color .2s; |
| } |
| .alert-email-input:focus { border-color:var(--leaf); } |
| .email-status { font-size:.72rem; color:var(--moss); font-weight:500; min-height:16px; } |
|
|
| .alert-log-card { display:flex; flex-direction:column; } |
| .alert-count-badge { |
| background:rgba(201,74,74,.1); color:#c94a4a; font-size:.63rem; |
| font-weight:700; padding:1px 7px; border-radius:10px; |
| font-family:'Cabinet Grotesk', sans-serif; text-transform:none; letter-spacing:.03em; |
| } |
| .alert-log-list { display:flex; flex-direction:column; max-height:200px; overflow-y:auto; } |
| .alert-log-empty { font-size:.8rem; color:rgba(14,18,9,.32); padding:24px 0; text-align:center; } |
| .alert-log-row { |
| display:flex; align-items:flex-start; gap:10px; padding:9px 0; |
| border-bottom:1px solid rgba(14,18,9,.05); font-size:.78rem; |
| } |
| .alert-log-row:last-child { border-bottom:none; } |
| .alert-log-dot { |
| width:7px; height:7px; border-radius:50%; background:#c94a4a; |
| margin-top:5px; flex-shrink:0; |
| } |
| .alert-log-body { flex:1; } |
| .alert-log-text { color:var(--ink); line-height:1.4; } |
| .alert-log-emailed { font-size:.67rem; color:var(--moss); font-weight:600; margin-top:2px; } |
| .alert-log-time { font-size:.67rem; color:rgba(14,18,9,.32); white-space:nowrap; flex-shrink:0; } |
|
|
| |
| @media (max-width:1100px) { |
| .sensor-grid { grid-template-columns:repeat(2,1fr); } |
| .monitor-mid-row { grid-template-columns:1fr; } |
| .monitor-bottom-row { grid-template-columns:1fr; } |
| } |
| @media (max-width:600px) { |
| .monitor-wrap { padding:20px 16px 40px; } |
| .sensor-grid { grid-template-columns:repeat(2,1fr); gap:12px; } |
| .sensor-value { font-size:1.8rem; } |
| } |
|
|
| |
| @media (max-width:1100px) { |
| .features-grid { grid-template-columns:repeat(2,1fr); } |
| .kpi-row { grid-template-columns:repeat(2,1fr); } |
| .dash-grid { grid-template-columns:1fr; } |
| } |
| @media (max-width:900px) { |
| .shop-sidebar { display:none; } |
| .chat-sidebar { width:220px; } |
| .dashboard-sidebar { width:180px; } |
| .orders-sidebar { width:220px; } |
| .tracking-bottom { grid-template-columns:1fr; } |
| } |
| @media (max-width:700px) { |
| .orders-sidebar { display:none; } |
| .orders-main { padding:18px 16px; } |
| } |
| @media (max-width:700px) { |
| .nav-links { display:none; } |
| .features-grid { grid-template-columns:1fr; } |
| .stats-strip { flex-wrap:wrap;gap:12px;padding:16px 24px; } |
| .stat-divider { display:none; } |
| .stat-item { padding:0 16px; } |
| .cart-drawer { width:100%; } |
| .dash-nav-item span { display:none; } |
| } |
|
|
