/* ========================================================================= ERP.Satisfactory — Bespoke FICSIT-industrial theme. Layered approach: 1. CSS custom properties define the palette (dark + light variants). The active variant is selected by .theme-dark / .theme-light on , set by App.razor's pre-paint script and updated by MainLayout's theme toggle. 2. Bespoke utility classes (hazard tape, LEDs, gear spinner, panel cards, icon masks) give the visual personality. 3. MudBlazor primitives are restyled at the bottom of this file to carry the FICSIT aesthetic through the framework components. All icons + decorations are inline SVG so the app stays offline-friendly and the theme follows currentColor automatically. ========================================================================= */ :root, .theme-dark { /* FICSIT brand palette. */ --fx-orange: #FA9549; --fx-orange-bright: #FFB070; --fx-orange-dim: #C77437; --fx-orange-glow: rgba(250, 149, 73, 0.4); --fx-yellow: #FFC53D; --fx-yellow-dim: #C9941F; --fx-caution: #F2A93B; /* Dark surfaces. */ --fx-bg: #16161A; --fx-bg-elevated: #1F1F25; --fx-bg-panel: #25252B; --fx-bg-input: #2A2A30; --fx-border: #3A3A42; --fx-border-soft: #2F2F35; --fx-border-strong: #4A4A52; /* Text. */ --fx-text: #E8E8EB; --fx-text-muted: #9A9AA0; --fx-text-dim: #6B6B72; --fx-text-strong: #FFFFFF; /* Status (with glow for LEDs). */ --fx-success: #5FC97C; --fx-success-glow: rgba(95, 201, 124, 0.55); --fx-warning: var(--fx-caution); --fx-warning-glow: rgba(242, 169, 59, 0.55); --fx-danger: #E5604A; --fx-danger-glow: rgba(229, 96, 74, 0.55); --fx-info: #5FB0C9; --fx-info-glow: rgba(95, 176, 201, 0.55); /* Link colors (read directly by styling further down). */ --fx-link: var(--fx-orange-bright); --fx-link-hover: var(--fx-yellow); /* Schematic grid (faint) used as a body backdrop. */ --fx-grid-line: rgba(250, 149, 73, 0.035); } .theme-light { --fx-bg: #F0EBE0; --fx-bg-elevated: #FFFFFF; --fx-bg-panel: #FAF6EC; --fx-bg-input: #FFFFFF; --fx-border: #D4CBB6; --fx-border-soft: #E0D8C4; --fx-border-strong: #B0A688; --fx-text: #1B1B1F; --fx-text-muted: #6A6A70; --fx-text-dim: #98948A; --fx-text-strong: #000000; --fx-link: var(--fx-orange-dim); --fx-link-hover: var(--fx-orange); --fx-grid-line: rgba(199, 116, 55, 0.05); } /* ------------------------------------------------------------------------ Typography: industrial sans for headings (Bahnschrift on Windows), readable Segoe UI Variable for body. All system-bundled — no CDN. ------------------------------------------------------------------------ */ html, body { font-family: 'Segoe UI Variable Display', 'Segoe UI Variable', 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--fx-bg); color: var(--fx-text); /* Faint schematic grid behind everything. */ background-image: linear-gradient(var(--fx-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--fx-grid-line) 1px, transparent 1px); background-size: 32px 32px; } h1, h2, h3, h4, h5, h6 { font-family: 'Bahnschrift Condensed', 'Bahnschrift', 'Inter Tight', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; color: var(--fx-text-strong); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: 0.06em; border-bottom: 2px solid var(--fx-orange); padding-bottom: 0.4rem; margin-bottom: 1rem; display: inline-block; position: relative; } /* Tiny "tick" decoration to the right of every H1 underline. */ h1::after { content: ""; position: absolute; bottom: -2px; right: -10px; width: 10px; height: 2px; background: var(--fx-yellow); } h5 { font-size: 1.05rem; letter-spacing: 0.06em; } .lead { color: var(--fx-text-muted); font-size: 1.05rem; text-transform: none; letter-spacing: 0; font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; } .small { font-size: 0.875em; } a { color: var(--fx-link); text-decoration: none; } a:hover { color: var(--fx-link-hover); text-decoration: underline; } /* Inline code chips. */ code { color: var(--fx-orange-bright); background-color: rgba(250, 149, 73, 0.08); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; font-family: 'Cascadia Mono', 'Consolas', monospace; } .theme-light code { color: var(--fx-orange-dim); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* Large display number — used for FactoryIngest's "Resource nodes" total. */ .display-6 { color: var(--fx-orange); font-weight: 700; font-family: 'Bahnschrift', 'Inter Tight', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.02em; font-size: calc(1.425rem + 2.1vw); line-height: 1.2; text-shadow: 0 0 12px var(--fx-orange-glow); } @media (min-width: 1200px) { .display-6 { font-size: 2.5rem; } } /* EditForm validation hooks. */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--fx-success); } .invalid { outline: 1px solid var(--fx-danger); } .validation-message { color: var(--fx-danger); } /* ------------------------------------------------------------------------ Hazard tape — diagonal yellow/black stripes. Used as a strip element under the top-row, as section dividers, on focused buttons, etc. ------------------------------------------------------------------------ */ .hazard-tape { height: 8px; background: repeating-linear-gradient( 135deg, var(--fx-yellow) 0, var(--fx-yellow) 16px, #1A1A1A 16px, #1A1A1A 32px); opacity: 0.85; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) inset; } .hazard-tape.thin { height: 4px; } /* ------------------------------------------------------------------------ Panel cards — "riveted plate" look with corner accents. Applied to any element with .fx-panel (e.g. MudPaper on the Home cards). ------------------------------------------------------------------------ */ .fx-panel { background-color: var(--fx-bg-panel); border: 1px solid var(--fx-border); border-radius: 4px; position: relative; overflow: visible; } .fx-panel::before, .fx-panel::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--fx-orange); pointer-events: none; } /* Top-left corner: ┌ */ .fx-panel::before { top: -2px; left: -2px; border-right: none; border-bottom: none; } /* Bottom-right corner: ┘ */ .fx-panel::after { bottom: -2px; right: -2px; border-left: none; border-top: none; } .card-title { color: var(--fx-orange); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 1rem; } /* ------------------------------------------------------------------------ Status LEDs — small glowing dot used inside alerts / next to labels. ------------------------------------------------------------------------ */ .led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fx-text-dim); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6); margin-right: 0.4rem; vertical-align: middle; position: relative; top: -1px; } .led-on { background: var(--fx-success); box-shadow: 0 0 6px 1px var(--fx-success-glow), inset 0 0 2px rgba(0,0,0,0.5); animation: led-pulse 2.5s ease-in-out infinite; } .led-warn { background: var(--fx-warning); box-shadow: 0 0 6px 1px var(--fx-warning-glow), inset 0 0 2px rgba(0,0,0,0.5); animation: led-pulse 1.6s ease-in-out infinite; } .led-error { background: var(--fx-danger); box-shadow: 0 0 6px 1px var(--fx-danger-glow), inset 0 0 2px rgba(0,0,0,0.5); animation: led-pulse 0.9s ease-in-out infinite; } .led-info { background: var(--fx-info); box-shadow: 0 0 6px 1px var(--fx-info-glow), inset 0 0 2px rgba(0,0,0,0.5); } @keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ------------------------------------------------------------------------ Animated gear spinner — used for the Ingest button while busy. ------------------------------------------------------------------------ */ .gear-spin { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--fx-icon-gear) center / contain no-repeat; mask: var(--fx-icon-gear) center / contain no-repeat; animation: gear-rotate 1.4s linear infinite; vertical-align: -2px; margin-right: 0.4em; } @keyframes gear-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Reusable SVG asset variables (URI-encoded so CSS can reference them). */ :root, .theme-dark, .theme-light { --fx-icon-gear: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM11 1l-.5 2.6a8.8 8.8 0 0 0-2.3 1L6 3.2 3.2 6l1.4 2.2c-.5.7-.8 1.5-1 2.3L1 11v2l2.6.5c.2.8.5 1.6 1 2.3L3.2 18 6 20.8l2.2-1.4c.7.5 1.5.8 2.3 1L11 23h2l.5-2.6c.8-.2 1.6-.5 2.3-1l2.2 1.4L20.8 18l-1.4-2.2c.5-.7.8-1.5 1-2.3L23 13v-2l-2.6-.5a8.8 8.8 0 0 0-1-2.3L20.8 6 18 3.2l-2.2 1.4c-.7-.5-1.5-.8-2.3-1L13 1h-2z'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------------ Bespoke .fx-icon set — inline-mask SVGs that inherit currentColor. Used in the NavMenu (block) and inside card titles / inline labels. Each icon has a `.fx-icon-*` modifier with its mask-image. ------------------------------------------------------------------------ */ .fx-icon, .fx-icon-inline { display: inline-block; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; } .fx-icon { width: 1.25rem; height: 1.25rem; margin-right: 0.7rem; vertical-align: -3px; } .fx-icon-inline { width: 1.1em; height: 1.1em; vertical-align: -3px; margin-right: 0.35em; } .fx-icon-home, .fx-icon-inline.fx-icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3 2 12h3v9h5v-6h4v6h5v-9h3L12 3zm6 0v3h-2V3h2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3 2 12h3v9h5v-6h4v6h5v-9h3L12 3zm6 0v3h-2V3h2z'/%3E%3C/svg%3E"); } .fx-icon-wrench, .fx-icon-inline.fx-icon-wrench { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black'%3E%3Cpath d='M6.8 2.5a4.5 4.5 0 0 0-3.2 7.7l1.5-1.5a2.5 2.5 0 0 1 3.5-3.5L7 6.8l1.8 1.8 1.6-1.6a4.5 4.5 0 0 0-3.6-4.5zm-3 9 7.7 7.7a2 2 0 1 0 2.8-2.8L6.7 8.7l-2.9 2.8z'/%3E%3Cpath d='M18.5 3 14 7.5l1.5 1.5L20 4.5 18.5 3zm-1 5L11.7 13.8 13 15l5.8-5.8L17.5 8zm4 4.5L17 17l1.5 1.5L23 14l-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black'%3E%3Cpath d='M6.8 2.5a4.5 4.5 0 0 0-3.2 7.7l1.5-1.5a2.5 2.5 0 0 1 3.5-3.5L7 6.8l1.8 1.8 1.6-1.6a4.5 4.5 0 0 0-3.6-4.5zm-3 9 7.7 7.7a2 2 0 1 0 2.8-2.8L6.7 8.7l-2.9 2.8z'/%3E%3Cpath d='M18.5 3 14 7.5l1.5 1.5L20 4.5 18.5 3zm-1 5L11.7 13.8 13 15l5.8-5.8L17.5 8zm4 4.5L17 17l1.5 1.5L23 14l-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E"); } .fx-icon-gear, .fx-icon-inline.fx-icon-gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM11 1l-.5 2.6a8.8 8.8 0 0 0-2.3 1L6 3.2 3.2 6l1.4 2.2c-.5.7-.8 1.5-1 2.3L1 11v2l2.6.5c.2.8.5 1.6 1 2.3L3.2 18 6 20.8l2.2-1.4c.7.5 1.5.8 2.3 1L11 23h2l.5-2.6c.8-.2 1.6-.5 2.3-1l2.2 1.4L20.8 18l-1.4-2.2c.5-.7.8-1.5 1-2.3L23 13v-2l-2.6-.5a8.8 8.8 0 0 0-1-2.3L20.8 6 18 3.2l-2.2 1.4c-.7-.5-1.5-.8-2.3-1L13 1h-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM11 1l-.5 2.6a8.8 8.8 0 0 0-2.3 1L6 3.2 3.2 6l1.4 2.2c-.5.7-.8 1.5-1 2.3L1 11v2l2.6.5c.2.8.5 1.6 1 2.3L3.2 18 6 20.8l2.2-1.4c.7.5 1.5.8 2.3 1L11 23h2l.5-2.6c.8-.2 1.6-.5 2.3-1l2.2 1.4L20.8 18l-1.4-2.2c.5-.7.8-1.5 1-2.3L23 13v-2l-2.6-.5a8.8 8.8 0 0 0-1-2.3L20.8 6 18 3.2l-2.2 1.4c-.7-.5-1.5-.8-2.3-1L13 1h-2z'/%3E%3C/svg%3E"); } .fx-icon-screwdriver, .fx-icon-inline.fx-icon-screwdriver { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m18.5 2-5.3 5.3a2 2 0 0 0-2.8 0L8.6 9 14 14.4l1.7-1.7a2 2 0 0 0 0-2.8L21 4.5 18.5 2zM7 10l-4.5 4.5a2.5 2.5 0 1 0 3.5 3.5L13 11.5 7 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m18.5 2-5.3 5.3a2 2 0 0 0-2.8 0L8.6 9 14 14.4l1.7-1.7a2 2 0 0 0 0-2.8L21 4.5 18.5 2zM7 10l-4.5 4.5a2.5 2.5 0 1 0 3.5 3.5L13 11.5 7 10z'/%3E%3C/svg%3E"); } /* Map (compass / globe with grid) — Factory map. */ .fx-icon-map, .fx-icon-inline.fx-icon-map { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2zm0 2.2 6 2v11.6l-6-2V5.2zM4 6.6l3.5-1.2v11.6L4 18.2V6.6zm16 11.8-3.5 1.2V6l3.5-1.2v13.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2zm0 2.2 6 2v11.6l-6-2V5.2zM4 6.6l3.5-1.2v11.6L4 18.2V6.6zm16 11.8-3.5 1.2V6l3.5-1.2v13.4z'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------------ Blazor error UI — themed. ------------------------------------------------------------------------ */ .blazor-error-boundary { background: var(--fx-danger); padding: 1rem; color: #1B1B1F; font-weight: 600; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ------------------------------------------------------------------------ MudBlazor restyling — the framework's primitives (.mud-drawer, .mud-nav-link, .mud-appbar, .mud-icon-button) carry the FICSIT industrial aesthetic. Classes are MudBlazor globals; the .fx-* modifier classes are applied in MainLayout and NavMenu so the overrides only affect the app shell, not page-level uses of the same primitives. ------------------------------------------------------------------------ */ /* MudLayout — let our app's grid + schematic backdrop show through. */ .mud-layout.fx-layout { background: transparent; } /* Sidebar drawer — same dark gradient the hand-rolled .sidebar used in Phase 1. Stays dark even in light mode (FICSIT aesthetic is dark by default; the brand reads better against dark surfaces). */ .mud-drawer.fx-drawer { background: linear-gradient(180deg, #0F0F14 0%, #1A1A21 50%, #261D14 100%) !important; border-right: 1px solid var(--fx-border) !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35); color: #c4c4ca; overflow: visible; } .mud-drawer.fx-drawer .mud-drawer-content { background: transparent; } /* Faint vertical "rivet line" on the drawer's inner (right) edge. */ .mud-drawer.fx-drawer::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; bottom: 0; background-image: repeating-linear-gradient( 180deg, transparent 0, transparent 18px, rgba(250, 149, 73, 0.35) 18px, rgba(250, 149, 73, 0.35) 20px); pointer-events: none; z-index: 1; } /* App bar — translucent panel gradient under the SYSTEM ONLINE indicator and theme toggle. Hazard tape lives just below in MudMainContent. */ .mud-appbar.fx-appbar { background: linear-gradient(180deg, var(--fx-bg-panel) 0%, var(--fx-bg) 100%) !important; color: var(--fx-text) !important; border-bottom: 1px solid var(--fx-border-soft); backdrop-filter: none; } .theme-light .mud-appbar.fx-appbar { background: linear-gradient(180deg, #FAF6EC 0%, #F0EBE0 100%) !important; color: var(--fx-text) !important; } /* Theme toggle — orange-tinted hover, no Material elevation. */ .mud-icon-button.fx-theme-toggle { color: var(--fx-text) !important; } .mud-icon-button.fx-theme-toggle:hover { background-color: rgba(250, 149, 73, 0.12) !important; } /* Nav links — uppercase Bahnschrift, transparent left-bar that lights up on hover or when the link is the active route. Mirrors the look the hand-rolled .nav-item ::deep a rules carried in Phase 1. */ .mud-nav-menu.fx-nav .mud-nav-link { color: #c4c4ca; border-left: 3px solid transparent; text-transform: uppercase; letter-spacing: 0.06em; font-family: 'Bahnschrift', 'Segoe UI Variable', 'Segoe UI', sans-serif; font-size: 0.88rem; min-height: 2.6rem; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .mud-nav-menu.fx-nav .mud-nav-link:hover { background-color: rgba(250, 149, 73, 0.08); color: #ffffff; } /* MudNavLink applies both "active" and "mud-nav-link-active" when it matches the current route — match either, so we don't depend on which version of MudBlazor renders today. */ .mud-nav-menu.fx-nav .mud-nav-link.active, .mud-nav-menu.fx-nav .mud-nav-link.mud-nav-link-active { background: linear-gradient(90deg, rgba(250, 149, 73, 0.18) 0%, rgba(250, 149, 73, 0.04) 100%); color: #FFB070; border-left-color: #FA9549; box-shadow: inset 0 0 0 1px rgba(250, 149, 73, 0.15); } /* ------------------------------------------------------------------------ Item-amount chips — used wherever the UI lists "N × item" with an icon, e.g. recipe inputs/outputs, planner step inputs/outputs, raw + missing input lists. Single shared class so all surfaces stay consistent. ------------------------------------------------------------------------ */ .fx-amount-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; list-style: none; padding: 0; margin: 0; } .fx-amount { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; font-size: 0.85rem; line-height: 1.2; } .fx-amount img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; } .fx-amount-text { color: var(--fx-text); } .fx-amount.fx-amount-missing .fx-amount-text { color: var(--fx-danger); }