Spaces:
Sleeping
Sleeping
| :root { | |
| --bg-cream: #FDFBF7; | |
| --card-white: #FFFFFF; | |
| --primary-green: #2C5F2D; | |
| --sage-green: #97BC62; | |
| --deep-forest: #004225; | |
| --border-tan: #E9E1D4; | |
| --text-main: #333333; | |
| --text-muted: #666666; | |
| --accent-gold: #D4AF37; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: var(--bg-cream); | |
| color: var(--text-main); | |
| font-family: 'Outfit', sans-serif; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 3rem; | |
| border-bottom: 2px solid var(--border-tan); | |
| padding-bottom: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .logo h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.8rem; | |
| letter-spacing: 2px; | |
| color: var(--deep-forest); | |
| } | |
| .controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .btn { | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-green); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--deep-forest); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| border: 1.5px solid var(--primary-green); | |
| color: var(--primary-green); | |
| } | |
| .btn-outline:hover { | |
| background-color: #E1F5E1; | |
| } | |
| .status-badge { | |
| background: var(--border-tan); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .status-online { background: #E1F5E1; color: #2C5F2D; } | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .card { | |
| background: var(--card-white); | |
| border: 1px solid var(--border-tan); | |
| border-radius: 12px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.02); | |
| transition: transform 0.3s ease; | |
| } | |
| .card h3 { | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| .gauge-container { | |
| height: 100px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .gauge { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary-green); | |
| } | |
| .gauge small { | |
| font-size: 1rem; | |
| margin-left: 0.2rem; | |
| } | |
| .value-large { | |
| font-size: 3rem; | |
| font-weight: 600; | |
| color: var(--deep-forest); | |
| } | |
| .shipment-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .shipment-item { | |
| background: var(--bg-cream); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| border-left: 4px solid var(--sage-green); | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .ticker-box { | |
| background: var(--bg-cream); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| font-style: italic; | |
| color: var(--deep-forest); | |
| } | |
| .operation-sections { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .op-section { | |
| padding: 0.5rem 0; | |
| } | |
| .op-section h4 { | |
| font-size: 0.75rem; | |
| color: var(--primary-green); | |
| text-transform: uppercase; | |
| letter-spacing: 1.2px; | |
| margin-bottom: 0.75rem; | |
| font-weight: 700; | |
| } | |
| /* Layout Sections */ | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 1.6fr 1fr; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| align-items: start; | |
| } | |
| .right-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .history-section .card { | |
| padding: 1.5rem; | |
| } | |
| @media (max-width: 900px) { | |
| .main-grid { grid-template-columns: 1fr; } | |
| .right-col { flex-direction: column; } | |
| } | |
| .metrics-grid, .details-section, .log-section, .guide-section { | |
| margin-bottom: 3.5rem; | |
| } | |
| .floating-feedback { | |
| position: fixed; | |
| color: var(--primary-green); | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| pointer-events: none; | |
| animation: floatUp 0.8s ease-out forwards; | |
| z-index: 9999; | |
| } | |
| @keyframes floatUp { | |
| 0% { opacity: 1; transform: translateY(0) scale(1); } | |
| 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } | |
| } | |
| .h-100 { height: 100%; display: flex; flex-direction: column; } | |
| .op-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .op-inputs { | |
| display: flex; | |
| gap: 1.2rem; | |
| flex: 1; | |
| justify-content: flex-start; | |
| } | |
| .op-actions { | |
| flex: 0 0 180px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; /* Center buttons vertically and horizontally */ | |
| } | |
| /* Cart as a list when side-by-side */ | |
| .cart-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| flex: 1; | |
| } | |
| .cart-item { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 12px; | |
| border: 1px solid var(--border-tan); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.4rem; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.02); | |
| } | |
| .cart-item .cart-type { | |
| font-weight: 700; | |
| color: var(--primary-green); | |
| font-size: 0.9rem; | |
| } | |
| .cart-item .cart-meta { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .cart-item .arrival-day { | |
| color: var(--deep-forest); | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| } | |
| select, .qty-select { | |
| padding: 0.7rem 1rem; | |
| border-radius: 10px; | |
| border: 1.5px solid var(--border-tan); | |
| background: #FFFFFF; | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.85rem; | |
| color: var(--text-main); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| outline: none; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.03); | |
| } | |
| select { | |
| min-width: 220px; | |
| } | |
| .qty-select { | |
| width: 65px; | |
| padding: 0.7rem 0.5rem; | |
| text-align: center; | |
| cursor: text; | |
| } | |
| select:hover, .qty-select:hover { | |
| border-color: var(--sage-green); | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.05); | |
| } | |
| select:focus, .qty-select:focus { | |
| border-color: var(--primary-green); | |
| } | |
| .divider { | |
| border: none; | |
| border-top: 1px solid rgba(233, 225, 212, 0.5); | |
| margin: 0.5rem 0; | |
| } | |
| .btn { | |
| transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .time-controls { | |
| margin-top: 2rem; | |
| display: flex; | |
| gap: 1rem; | |
| padding-top: 1.5rem; | |
| border-top: 2px solid var(--border-tan); | |
| } | |
| .hidden { display: none ; } | |
| .sub-inputs { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .log-box { | |
| height: 150px; | |
| overflow-y: auto; | |
| background: #1A1A1A; | |
| color: #00FF41; | |
| font-family: 'Courier New', Courier, monospace; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| } | |
| .log-box { | |
| margin-top: 1rem; | |
| background: transparent; | |
| border-radius: 12px; | |
| } | |
| .history-item { | |
| background: white; | |
| padding: 0.8rem 1rem; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-tan); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.02); | |
| } | |
| .history-meta { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .history-text { | |
| font-size: 0.85rem; | |
| color: var(--text-main); | |
| font-weight: 500; | |
| } | |
| .history-sub { | |
| font-size: 0.75rem; | |
| color: var(--primary-green); | |
| font-weight: 600; | |
| } | |
| .history-item.alert { border-left: 4px solid var(--primary-red); } | |
| .history-item.action { border-left: 4px solid var(--sage-green); } | |
| .history-item.system { border-left: 4px solid #DFDBDD; } | |
| .history-item.arrival { border-left: 4px solid var(--primary-green); } | |
| /* Custom Scrollbar for history */ | |
| .history-list::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .history-list::-webkit-scrollbar-track { | |
| background: rgba(0,0,0,0.02); | |
| border-radius: 10px; | |
| } | |
| .history-list::-webkit-scrollbar-thumb { | |
| background: rgba(0,0,0,0.1); | |
| border-radius: 10px; | |
| } | |
| .inventory-grid { | |
| display: flex; | |
| justify-content: space-around; | |
| padding-top: 0.5rem; | |
| } | |
| .inv-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .inv-item .label { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| } | |
| .inv-item .count { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| color: var(--primary-green); | |
| } | |
| .btn-danger { | |
| background-color: #FF4136; | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background-color: #B22222; | |
| } | |
| .news-alert { | |
| margin-top: 1.5rem; | |
| padding: 1rem; | |
| background: #FFF5F5; | |
| border: 1px solid #FFC1C1; | |
| border-radius: 8px; | |
| color: #FF4136; | |
| font-weight: 600; | |
| display: flex; | |
| gap: 1rem; | |
| animation: pulse-border 2s infinite; | |
| } | |
| @keyframes pulse-border { | |
| 0% { border-color: #FFC1C1; } | |
| 50% { border-color: #FF4136; } | |
| 100% { border-color: #FFC1C1; } | |
| } | |
| .impact-preview { | |
| margin: 1.5rem 0; | |
| padding: 1rem; | |
| background: #F0F4F0; | |
| border-radius: 8px; | |
| border-left: 4px solid var(--primary-green); | |
| font-size: 0.9rem; | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: center; | |
| } | |
| .impact-preview .preview-label { | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .impact-preview .val { | |
| font-weight: 600; | |
| color: var(--deep-forest); | |
| } | |
| .impact-preview .sep { | |
| color: var(--border-tan); | |
| } | |
| .mission-card { | |
| background: #F4F7F9; | |
| border: 1px dashed var(--sage-green); | |
| } | |
| .guide-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 1rem; | |
| } | |
| .guide-item h4 { | |
| color: var(--primary-green); | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| } | |
| .guide-item p, .guide-item li { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .guide-list { | |
| padding-left: 1.2rem; | |
| } | |
| .guide-list li { | |
| margin-bottom: 0.3rem; | |
| } | |
| /* Modal & Tutorial Styles */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.4); | |
| backdrop-filter: blur(4px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-card { | |
| background: white; | |
| padding: 2.5rem; | |
| border-radius: 20px; | |
| max-width: 500px; | |
| width: 90%; | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.1); | |
| border: 1px solid var(--border-tan); | |
| animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tutorial-content h2 { | |
| font-family: 'Playfair Display', serif; | |
| color: var(--deep-forest); | |
| margin-bottom: 1rem; | |
| } | |
| .tutorial-content p { | |
| color: var(--text-muted); | |
| font-size: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .help-circle { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| border: 1px solid var(--sage-green); | |
| background: white; | |
| color: var(--primary-green); | |
| cursor: pointer; | |
| font-weight: bold; | |
| font-size: 12px; | |
| transition: all 0.2s; | |
| } | |
| .help-circle:hover { background: var(--sage-green); color: white; } | |
| .small { padding: 0.4rem 0.8rem; font-size: 0.75rem; } | |
| .btn-ghost { background: transparent; color: var(--text-muted); } | |
| /* Day Transition Blur */ | |
| .transitioning { | |
| filter: blur(2px); | |
| pointer-events: none; | |
| transition: filter 0.3s ease; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 4rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--border-tan); | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| } | |
| @media (max-width: 768px) { | |
| .container { padding: 1rem; } | |
| } | |
| .action-buttons { display: flex; gap: 0.75rem; } | |
| .btn-secondary { background-color: var(--sage-green); color: var(--deep-forest); } | |
| .btn-secondary:hover { background-color: #7AA346; } | |
| /* Active Logistics Stream - Order Cards */ | |
| .shipment-item { | |
| background: white; | |
| border: 1px solid var(--border-tan); | |
| border-radius: 10px; | |
| padding: 0.9rem 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.03); | |
| border-left: 4px solid var(--sage-green); | |
| } | |
| .shipment-item.fulfilled { border-left-color: var(--primary-green); opacity: 0.7; } | |
| .shipment-header { display: flex; justify-content: space-between; align-items: center; } | |
| .shipment-product { font-weight: 700; font-size: 0.9rem; color: var(--deep-forest); } | |
| .shipment-detail { font-size: 0.8rem; color: var(--text-muted); } | |
| .order-badge { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 20px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .order-badge.pending { background: rgba(243,156,18,0.15); color: #c0840a; border: 1px solid rgba(243,156,18,0.3); } | |
| .order-badge.fulfilled { background: rgba(39,174,96,0.12); color: var(--primary-green); border: 1px solid rgba(39,174,96,0.3); } | |
| .placeholder { color: var(--text-muted); font-size: 0.85rem; font-style: italic; text-align: center; padding: 1.5rem 0; } | |