/* ============================================================ LFX brand layer — fonts, design tokens, and reusable bits. ------------------------------------------------------------ Single source of truth for the LFX look (Lato + the palette from the Project View reference). Two ways it's used: 1. The standalone Foreman Review sheet links this file and uses the tokens directly. 2. Bootstrap-based pages add the `lfx-page` class (via the `container_class` block) to opt their content area into the brand WITHOUT changing the rest of the app. To promote the brand app-wide later, move the `.lfx-page` body rules onto `body` in base.html. Self-hosted Lato (Regular/Bold/Black) lives in static/fonts/lato/ so the printable sheet renders the brand font offline and under print. ============================================================ */ @font-face{ font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/lato/Lato-Regular.ttf') format('truetype'); } @font-face{ font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/lato/Lato-Bold.ttf') format('truetype'); } @font-face{ font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url('/static/fonts/lato/Lato-Black.ttf') format('truetype'); } :root{ --lfx-ink:#1A1A1A; --lfx-paper:#FAF9F7; --lfx-card:#FFFFFF; --lfx-red:#D6001C; --lfx-slate:#6B7280; --lfx-line:#E8E5E0; --lfx-green:#15803D; --lfx-amber:#B45309; --lfx-green-bg:#ECFDF3; --lfx-amber-bg:#FEF6EC; --lfx-red-bg:#FDECEE; --lfx-slate-bg:#F3F4F6; --lfx-sans:'Lato', ui-sans-serif, "Helvetica Neue", Arial, system-ui, sans-serif; /* ---- Cost-stream colours (the project report's signature palette) ---- The three cost streams each have a fixed identity colour, used on the project report's section cards, by-element rows, and summary tiles. These MIRROR the hard-coded values in app.css `.section-*` — if you change one, change both. For each stream: the solid identity colour, a light background tint, a dark ink for text on that tint, and a matching hairline. Material = green Labour = orange Equipment = blue Total = LFX red (Material + Labour + Equipment combined) Neutral = strong grey (Revenue / Profitability) */ --lfx-material:#22C55E; /* green-500 — Material (Xero bills to element accounts) */ --lfx-material-bg:#DCFCE7; --lfx-material-ink:#14532D; --lfx-material-line:#BBF7D0; --lfx-labour:#F97316; /* orange-500 — Labour (Odoo hours × blended rate) */ --lfx-labour-bg:#FFEDD5; --lfx-labour-ink:#7C2D12; --lfx-labour-line:#FED7AA; --lfx-equipment:#2563EB; /* blue-600 — Equipment (rental) */ --lfx-equipment-bg:#DBEAFE; --lfx-equipment-ink:#1E3A8A; --lfx-equipment-line:#BFDBFE; --lfx-total:#D6001C; /* = --lfx-red — combined all-in total */ --lfx-neutral:#343A40; /* strong grey — Revenue / Profitability */ } /* ---- Reusable brand components (used by sheet + pages) ---- */ .lfx-brandbar{ display:flex; align-items:flex-end; justify-content:space-between; border-bottom:3px solid var(--lfx-red); padding-bottom:14px; margin-bottom:6px; flex-wrap:wrap; gap:12px; } .lfx-logo{ font-family:var(--lfx-sans); font-weight:900; letter-spacing:-.02em; font-size:1.05rem; color:var(--lfx-ink); text-transform:uppercase; } .lfx-logo b{color:var(--lfx-red);} .lfx-brandbar h1{ font-family:var(--lfx-sans); font-weight:900; font-size:1.6rem; letter-spacing:-.02em; line-height:1.1; margin:.15rem 0 0; color:var(--lfx-ink); } .lfx-asof{font-size:.8rem; color:var(--lfx-slate); text-align:right;} .lfx-section{ font-family:var(--lfx-sans); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--lfx-slate); margin:30px 0 12px; } .lfx-pill{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; border-radius:999px; white-space:nowrap; line-height:1.1; } .lfx-pill--ok{background:var(--lfx-green-bg); color:var(--lfx-green);} .lfx-pill--watch{background:var(--lfx-amber-bg); color:var(--lfx-amber);} .lfx-pill--risk{background:var(--lfx-red-bg); color:var(--lfx-red);} .lfx-pill--slate{background:var(--lfx-slate-bg); color:var(--lfx-slate);} /* ---- Cost-stream accents (Material / Labour / Equipment / Total) ---- Reusable bits that carry a stream's identity colour. Use the left-border accent on a card/row that belongs to a stream, the soft chip for a tinted label, or the dot for a legend. Tokens above are the source of truth. */ .lfx-stream-material{border-left:4px solid var(--lfx-material);} .lfx-stream-labour{border-left:4px solid var(--lfx-labour);} .lfx-stream-equipment{border-left:4px solid var(--lfx-equipment);} .lfx-stream-total{border-left:4px solid var(--lfx-total);} .lfx-stream-neutral{border-left:4px solid var(--lfx-neutral);} .lfx-chip-material{background:var(--lfx-material-bg);color:var(--lfx-material-ink);} .lfx-chip-labour{background:var(--lfx-labour-bg);color:var(--lfx-labour-ink);} .lfx-chip-equipment{background:var(--lfx-equipment-bg);color:var(--lfx-equipment-ink);} .lfx-chip-material,.lfx-chip-labour,.lfx-chip-equipment{ display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase; letter-spacing:.04em;padding:5px 10px;border-radius:999px;line-height:1.1;} .lfx-dot{display:inline-block;width:10px;height:10px;border-radius:50%; vertical-align:middle;margin-right:6px;} .lfx-dot--material{background:var(--lfx-material);} .lfx-dot--labour{background:var(--lfx-labour);} .lfx-dot--equipment{background:var(--lfx-equipment);} .lfx-dot--total{background:var(--lfx-total);} /* ---- Page-scoped brand opt-in for Bootstrap pages ---- Everything below only applies inside `.lfx-page`, so the rest of the app keeps its current look until we decide to go wide. */ .lfx-page{ font-family:var(--lfx-sans); color:var(--lfx-ink); } .lfx-page h1, .lfx-page h2, .lfx-page h3, .lfx-page h4, .lfx-page .h1, .lfx-page .h2, .lfx-page .h3{ font-family:var(--lfx-sans); font-weight:900; letter-spacing:-.01em; } .lfx-page .card{ border:1px solid var(--lfx-line); border-radius:12px; } .lfx-page .card-header{ background:var(--lfx-card); border-bottom:1px solid var(--lfx-line); font-weight:700; } .lfx-page .table{ --bs-table-border-color:var(--lfx-line); } .lfx-page .btn-primary{ --bs-btn-bg:var(--lfx-red); --bs-btn-border-color:var(--lfx-red); --bs-btn-hover-bg:#b40018; --bs-btn-hover-border-color:#b40018; --bs-btn-active-bg:#9e0015; --bs-btn-active-border-color:#9e0015; } .lfx-page .btn-outline-primary{ --bs-btn-color:var(--lfx-red); --bs-btn-border-color:var(--lfx-red); --bs-btn-hover-bg:var(--lfx-red); --bs-btn-hover-border-color:var(--lfx-red); } /* Link colour applies to text links only — button-styled anchors (.btn, e.g. the green "Download as Excel") must keep their own white/coloured text, so exclude them. */ .lfx-page a:not(.btn){color:var(--lfx-red);} /* Solid buttons keep white text regardless of the link rule above. */ .lfx-page .btn-success, .lfx-page .btn-primary, .lfx-page .btn-danger{color:#fff;} .lfx-page .text-muted{color:var(--lfx-slate)!important;} /* Season-calendar project names are small links down the side — the global red link colour above makes them hard to read. Keep them dark (the original #212529) with an LFX-red hover. */ .lfx-page a.season-cal-project-link{color:#212529;} .lfx-page a.season-cal-project-link:hover{color:var(--lfx-red);} /* Status / AcctRec / T&M badges keep their solid Bootstrap colours — the soft LFX tints didn't have enough contrast. Don't restyle .badge here. */ /* Top nav — Lato too. The navbar sits outside .lfx-page (which only wraps the page content), so brand its font here. Colours stay as app.css defines them. */ .navbar-lfx{font-family:var(--lfx-sans);} /* Home tile-group section headings (Financial Project Management, Scheduling & Planning Projects, …). Bootstrap's `.small` made them smaller than the tile titles; bump them above .verb-title (1.15rem) so the group dividers read clearly. Targets the heading's own class combo, so it also covers the Foreman group heading added on the foreman branch. */ .lfx-page h5.text-uppercase.small.fw-semibold{ font-size:1.3rem; letter-spacing:.03em; }