Full Content
TITLE: NSG_Standards
================================================================================
NSG STANDARDS - CONCATENATED SOURCE FILES
================================================================================
CHANGELOG
---------
Generated: 2025-12-27 00:43:40
Source: /var/www/html/nsg_standards
TABLE OF CONTENTS
-----------------
1. DOCUMENTATION (docs/*.md)
2. CSS FILES (static/css/*.css)
3. JS FILES (static/js/*.js)
4. BASE TEMPLATE (templates/base_nosidebar.html)
5. PAGE TEMPLATES (templates/*.html)
6. PARTIALS (templates/*_partials/)
================================================================================
SECTION 1: DOCUMENTATION
================================================================================
--------------------------------------------------------------------------------
FILE: DEPLOY_OPTIMIZATION.md
--------------------------------------------------------------------------------
# Optimization Module - NSG Standards
## Overview
Reusable optimization page with 4-level accordion system. Uses afh-hero pattern with hero.png background image, matching procurement.html.
**Files:**
```
static/css/optimization.css - Accordion styles (4 levels), image expand
static/js/optimization.js - Accordion toggle, image click-to-expand
templates/optimization.html - Main template, includes partials
templates/optimization_partials/
_intro.html - Hero section (afh-hero with hero.png)
_building_envelope.html - SIPs, Insulation, Windows
_mechanical.html - Plumbing, Tankless, Mini-Splits
_electrical.html - 24V Lighting, Metering, Chase
_automation.html - Smart Home, Energy Monitoring
_site.html - Water Management, Grading
```
---
## Hero Pattern (Critical)
All pages use the same hero structure. Copy exactly:
```html
<section class="afh-hero" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('{{ url_for('static', filename='images/hero.png') }}'); min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px;">
<h1 style="color: white; font-family: Georgia, serif; font-size: 3.5rem; font-weight: 400; font-style: italic; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); margin-bottom: 1rem; text-align: center;">Page Title</h1>
<p style="color: white; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 300; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); max-width: 700px; text-align: center; line-height: 1.7;">Subtitle text here.</p>
</section>
```
**Requirements:**
- hero.png in `/static/images/`
- `main style="padding: 40px;"` wrapper
- Extends `base.html` (with sidebar)
- Uses `{% block extra_css %}` for CSS
---
## Deploy to New Site
```bash
# Copy from NSG standards to target site
SITE=/var/www/html/[sitename].nsgia.com
# CSS and JS
cp /var/www/html/nsg_standards/static/css/optimization.css $SITE/static/css/
cp /var/www/html/nsg_standards/static/js/optimization.js $SITE/static/js/
# Templates
cp /var/www/html/nsg_standards/templates/optimization.html $SITE/templates/
mkdir -p $SITE/templates/optimization_partials
cp /var/www/html/nsg_standards/templates/optimization_partials/*.html $SITE/templates/optimization_partials/
# Hero image (if not already present)
cp /var/www/html/nsg_standards/static/images/procurement_images/hero.png $SITE/static/images/
```
---
## Add Route (front_blueprint.py)
```python
@front.route("/optimization")
def optimization():
return render_template("optimization.html")
```
---
## Add to Navbar (templates/partials/_navbar.html)
```html
<a href="/optimization">Optimization</a>
```
---
## Sidebar Links
Sidebar uses absolute paths so links work from any page:
```html
<li><a href="/#strategy">1. Strategy</a></li>
```
Not:
```html
<li><a href="#strategy">1. Strategy</a></li>
```
---
## Customizing for Different Sites
### Skip groups that don't apply
Edit `optimization.html` - comment out irrelevant includes:
```html
{% include 'optimization_partials/_intro.html' %}
{% include 'optimization_partials/_building_envelope.html' %}
{% include 'optimization_partials/_mechanical.html' %}
{% include 'optimization_partials/_electrical.html' %}
{% include 'optimization_partials/_automation.html' %}
{# {% include 'optimization_partials/_site.html' %} #}
```
### Different hero image
Edit `_intro.html` - change image path:
```html
url('{{ url_for('static', filename='images/your-hero.png') }}')
```
---
## Accordion Hierarchy
| Level | Button Class | Panel Class | Example |
|-------|--------------|-------------|---------|
| 1 | `.accordion-group` | `.panel-group` | Building Envelope |
| 2 | `.accordion-pillar` | `.panel-pillar` | SIP Panels |
| 3 | `.accordion-detail` | `.panel-detail` | Wall Assembly |
| 4 | `.accordion-spec` | `.panel-spec` | R-Values |
Current implementation uses Levels 1-2. Levels 3-4 ready for expansion.
---
## Adding Images
```html
<img src="{{ url_for('static', filename='images/optimization/sip_wall.jpg') }}"
class="opt-image"
alt="SIP wall assembly">
<p class="opt-image-caption">6.5" SIP wall section</p>
```
Images with `opt-image` class are click-to-expand.
---
## Sync from qplex to NSG Standards
When qplex changes are tested and working:
```bash
# Optimization files
cp /var/www/html/qplex.nsgia.com/templates/optimization_partials/_intro.html /var/www/html/nsg_standards/templates/optimization_partials/
cp /var/www/html/qplex.nsgia.com/static/css/optimization.css /var/www/html/nsg_standards/static/css/
cp /var/www/html/qplex.nsgia.com/static/js/optimization.js /var/www/html/nsg_standards/static/js/
# Sidebar
cp /var/www/html/qplex.nsgia.com/templates/partials/_sidebar.html /var/www/html/nsg_standards/templates/partials/
```
---
## Verification Checklist
- [ ] Hero displays with hero.png background image
- [ ] Navbar stays fixed at top
- [ ] Sidebar links go to home page sections (/#strategy)
- [ ] All 5 group accordions expand/collapse
- [ ] Nested pillar accordions work
- [ ] Route accessible at /optimization
--------------------------------------------------------------------------------
FILE: DEPLOY_PROCUREMENT.md
--------------------------------------------------------------------------------
# Procurement Section Deployment Guide
**Source:** nsg_standards (Google Drive or /var/www/html/nsg_standards)
**Target:** Any NSG site
---
## Prerequisites
Target site must have:
- `templates/base.html` with `{% block content %}` and `{% block extra_css %}`
- `static/css/` directory
- `static/images/` directory
---
## Files to Deploy
| Source | Target | Notes |
|--------|--------|-------|
| templates/procurement.html | templates/procurement.html | Uses `{% extends "base.html" %}` |
| static/css/procurement.css | static/css/procurement.css | |
| static/images/procurement_images/*.png | static/images/procurement_images/*.png | 14 images |
---
## Deployment Commands
```bash
# Set target site
SITE="qplex.nsgia.com"
TARGET="/var/www/html/$SITE"
SOURCE="/var/www/html/nsg_standards"
# 1. Copy template
cp "$SOURCE/templates/procurement.html" "$TARGET/templates/"
# 2. Copy CSS
cp "$SOURCE/static/css/procurement.css" "$TARGET/static/css/"
# 3. Copy images
mkdir -p "$TARGET/static/images/procurement_images"
cp "$SOURCE/static/images/procurement_images/"*.png "$TARGET/static/images/procurement_images/"
# 4. Verify
ls -la "$TARGET/templates/procurement.html"
ls -la "$TARGET/static/css/procurement.css"
ls "$TARGET/static/images/procurement_images/" | wc -l
```
---
## Blueprint Update
Add to target site's `blueprints/front_blueprint.py`:
```python
@front.route("/procurement")
def procurement():
return render_template("procurement.html")
```
---
## Navbar Update
Add to target site's `templates/partials/_navbar.html`:
```html
<li><a href="/procurement">Procurement</a></li>
```
---
## Image Inventory (14 files)
```
procurement_images/
├── hero.png
├── projectSourcing.png
├── supplierPortal.png
├── addComponent1.png
├── componentQrCode.png
├── componentTree.png
├── componentTree2.png
├── costCalculator.png
├── VerticalCostAnalysis.png
├── costSummary.png
├── DevelopmentProjects.png
├── BasicProjectInfo.png
├── softCosts.png
└── developmentCosts.png
```
---
## Site-Specific Adjustments
If target site uses different base.html pattern:
| Pattern | Change Required |
|---------|-----------------|
| `{% block content %}` | Standard - no change |
| `{% block main %}` | Update procurement.html block name |
| No extra_css block | Add `<link>` directly in template |
| Different sidebar | May need wrapper div adjustments |
---
## Verification Checklist
- [ ] /procurement route returns 200
- [ ] Hero image displays
- [ ] All section images load
- [ ] Images expand on click (feature-image class)
- [ ] Sidebar displays (if site uses sidebar)
- [ ] Cost language says "Meaningful" not "Significant"
- [ ] Savings claim says "5%" not "15-25%"
--------------------------------------------------------------------------------
FILE: NSG_ACCORDION_GUIDE.md
--------------------------------------------------------------------------------
# NSG Accordion System Guide
## Purpose
This document explains the accordion hierarchy used across all NSG sites. **Read this BEFORE writing any accordion HTML.**
---
## The 4-Level Hierarchy
| Level | What It Is | Visibility | Example |
|-------|-----------|------------|---------|
| **TOPIC** | Section number + title | Always visible | "1. Property" |
| **MAIN HEADING** | Category within topic | Click to expand | "Utilities" |
| **SUBHEADING** | Item within category | Click to expand | "Electric" |
| **CONTENT** | Text, tables, lists | Inside subheading | Provider info, pricing |
---
## CSS Classes
| Level | Button Class | Panel Class | Appearance |
|-------|-------------|-------------|------------|
| TOPIC | None (use `<h2>`) | None | Section header, not clickable |
| MAIN HEADING | `accordion accordion-section` | `panel panel-section` | Dark background, white text |
| SUBHEADING | `accordion` | `panel` | Light background, colored text |
| CONTENT | None | Inside `.panel` | White background, body text |
**CRITICAL:** Main headings use BOTH classes: `class="accordion accordion-section"`
---
## HTML Structure
### Simple (no subheadings needed)
```html
<section class="afh-answer-section" id="property">
<h2>1. Property</h2>
<p class="section-intro">Brief one-line description.</p>
<!-- MAIN HEADING -->
<button class="accordion accordion-section">Location</button>
<div class="panel panel-section">
<p>Content goes directly here when no subheadings needed.</p>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
<!-- MAIN HEADING -->
<button class="accordion accordion-section">Zoning</button>
<div class="panel panel-section">
<p>Zoning content here.</p>
</div>
</section>
```
### With Subheadings (nested accordions)
```html
<section class="afh-answer-section" id="property">
<h2>1. Property</h2>
<p class="section-intro">Brief one-line description.</p>
<!-- MAIN HEADING with subheadings -->
<button class="accordion accordion-section">Utilities</button>
<div class="panel panel-section">
<!-- SUBHEADING -->
<button class="accordion">Electric</button>
<div class="panel">
<p>Georgia Power provides service...</p>
</div>
<!-- SUBHEADING -->
<button class="accordion">Gas</button>
<div class="panel">
<p>Atlanta Gas Light provides service...</p>
</div>
<!-- SUBHEADING -->
<button class="accordion">Water</button>
<div class="panel">
<p>City water service available...</p>
</div>
</div>
</section>
```
### Deep Nesting (subheading contains more accordions)
For complex topics like Internet that have multiple sub-topics:
```html
<!-- SUBHEADING with deeper content -->
<button class="accordion">Internet</button>
<div class="panel">
<button class="accordion">Service Providers</button>
<div class="panel">
<p>AT&T, Xfinity, local fiber...</p>
</div>
<button class="accordion">Service Types & Speeds</button>
<div class="panel">
<table class="data-table">
<tr><th>Type</th><th>Speed</th></tr>
<tr><td>Fiber</td><td>1 Gbps</td></tr>
</table>
</div>
<button class="accordion">Pricing</button>
<div class="panel">
<p>Residential: $50-80/mo</p>
</div>
</div>
```
---
## File Organization
### Section file includes partials
```
sections/
├── _property.html (section shell - uses {% include %})
└── property/ (folder for partials if needed)
├── _prop_details.html
├── _prop_location.html
└── _prop_utilities.html
```
For simpler sections, the entire section can be one file. For complex sections (like Action Plan), use includes.
### Example section shell with includes (`_action_plan.html`)
```html
<p class="section-intro">Implementation details for the 13 Pillars systems.</p>
<!-- MAIN HEADING: Building & Construction -->
<button class="accordion accordion-section">Building & Construction</button>
<div class="panel panel-section">
{% include 'sections/_ap_construction.html' %}
</div>
<!-- MAIN HEADING: Smart Energy -->
<button class="accordion accordion-section">Smart Energy Systems</button>
<div class="panel panel-section">
{% include 'sections/_ap_energy.html' %}
</div>
```
### Example partial (`_ap_construction.html`)
Contains only the subheadings (no main heading wrapper):
```html
<!--
File: sections/_ap_construction.html
Purpose: Building & Construction subheadings
-->
<button class="accordion">SIP Panel Construction</button>
<div class="panel">
<p>Structural Insulated Panels with embedded joists...</p>
</div>
<button class="accordion">Pre-routed Utility Chases</button>
<div class="panel">
<p>Factory-cut paths for wiring and plumbing...</p>
</div>
```
---
## JavaScript Behavior
The `nsg_accordion.js` handles:
1. Click accordion → toggles `.active` on button, `.open` on panel
2. Nested accordions → parent panels stay open (via `e.stopPropagation()`)
3. Works with both `.accordion` and `.accordion-section`
**No changes needed to JS.** Just use correct HTML classes.
---
## Common Mistakes
| Wrong | Right |
|-------|-------|
| `class="accordion-section"` alone | `class="accordion accordion-section"` |
| Content outside `.panel` | All content inside `.panel` |
| Missing `panel-section` on nested container | Use `panel panel-section` for main heading panels |
| Huge monolithic section files | Break into small partials with `{% include %}` |
| Wall of text at top of section | Put details inside accordions |
---
## Placeholder Content
For items not yet researched, use this pattern:
```html
<button class="accordion">Electric</button>
<div class="panel">
<p><em>To be confirmed.</em> Georgia Power typically serves this area.
Service availability and capacity to be verified during due diligence.</p>
</div>
```
This shows the structure is in place and what information will go there.
---
## Checklist Before Committing
- [ ] Main headings use `accordion accordion-section`
- [ ] Main heading panels use `panel panel-section`
- [ ] Subheadings use just `accordion`
- [ ] Subheading panels use just `panel`
- [ ] All content inside `.panel` divs
- [ ] No wall of text outside accordions
- [ ] Section file uses `{% include %}` for complex sections
- [ ] Each partial has change log header
- [ ] Placeholder text for unknown items
--------------------------------------------------------------------------------
FILE: NSG_CONTACT_SETUP.md
--------------------------------------------------------------------------------
# NSG Contact System Setup Guide
**For AI Assistants Setting Up Contact Forms on NSG Sites**
---
## Quick Reference
| Component | Location |
|-----------|----------|
| Blueprint | `/blueprints/contact_blueprint.py` |
| Services | `/services/email_service.py`, `/services/qplex_contacts_service.py` |
| Template | `/templates/contact.html` |
| Config | `/.env` |
---
## Order of Operations
### Step 1: Create Database Table
```sql
CREATE TABLE IF NOT EXISTS SITENAME_contacts (
id INT AUTO_INCREMENT PRIMARY KEY,
first_name VARCHAR(100),
last_name VARCHAR(100),
email VARCHAR(255) NOT NULL,
phone VARCHAR(50),
organization VARCHAR(255),
title VARCHAR(100),
interest_area VARCHAR(100) DEFAULT 'general',
source VARCHAR(50) DEFAULT 'contact_form',
status ENUM('new', 'contacted', 'qualified', 'converted', 'archived') DEFAULT 'new',
priority ENUM('low', 'medium', 'high') DEFAULT 'medium',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY unique_email (email)
);
CREATE TABLE IF NOT EXISTS SITENAME_notes (
id INT AUTO_INCREMENT PRIMARY KEY,
contact_id INT NOT NULL,
note_type VARCHAR(50) DEFAULT 'general',
note_content TEXT,
created_by VARCHAR(100),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (contact_id) REFERENCES SITENAME_contacts(id) ON DELETE CASCADE
);
```
### Step 2: Create Directory Structure
```bash
mkdir -p /var/www/html/SITENAME.nsgia.com/services
mkdir -p /var/www/html/SITENAME.nsgia.com/blueprints
```
### Step 3: Create .env File
```bash
cat > /var/www/html/SITENAME.nsgia.com/.env << 'EOF'
# Flask Configuration
FLASK_SECRET_KEY=SITENAME*2025*SecretKey!NSG
APP_HOST=127.0.0.1
APP_PORT=50XX
FLASK_DEBUG=False
FLASK_ENV=production
# Database Configuration
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=fun
DB_NAME=SITENAME
# Email Configuration (MailCow)
SMTP_HOST=mail.prohrhq.com
SMTP_PORT=587
SMTP_USER=mhoffman@prohrhq.com
SMTP_PASSWORD=XXXXXX
FROM_EMAIL=mhoffman@prohrhq.com
NOTIFICATION_EMAIL=michaelh@nsgia.com
EOF
```
**Note:** Get SMTP_PASSWORD from Michael. Port numbers: check existing sites to avoid conflicts.
### Step 4: Create email_service.py
```python
# /var/www/html/SITENAME.nsgia.com/services/email_service.py
import smtplib
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart
from email.utils import make_msgid, formatdate
import os
from dotenv import load_dotenv
load_dotenv()
def send_contact_notification(contact_data):
try:
smtp_host = os.getenv('SMTP_HOST', 'mail.prohrhq.com')
smtp_port = int(os.getenv('SMTP_PORT', 587))
smtp_user = os.getenv('SMTP_USER')
smtp_password = os.getenv('SMTP_PASSWORD')
from_email = os.getenv('FROM_EMAIL', 'mhoffman@prohrhq.com')
to_email = os.getenv('NOTIFICATION_EMAIL', 'michaelh@nsgia.com')
msg = MIMEMultipart()
msg['From'] = from_email
msg['To'] = to_email
msg['Subject'] = f"SITENAME Contact: {contact_data.get('organization', 'New Contact')}"
msg['Message-ID'] = make_msgid(domain='prohrhq.com')
msg['Date'] = formatdate(localtime=True)
body = f"""
New contact form submission from SITENAME.nsgia.com:
Name: {contact_data.get('first_name', '')} {contact_data.get('last_name', '')}
Email: {contact_data.get('email', '')}
Phone: {contact_data.get('phone', 'Not provided')}
Organization: {contact_data.get('organization', 'Not provided')}
Title: {contact_data.get('title', 'Not provided')}
Interest Area: {contact_data.get('interest_area', 'Not specified')}
Message:
{contact_data.get('message', 'No message provided')}
---
Submitted: {contact_data.get('created_at', 'Just now')}
"""
msg.attach(MIMEText(body, 'plain'))
server = smtplib.SMTP(smtp_host, smtp_port, timeout=30)
server.ehlo()
server.starttls()
server.ehlo()
if smtp_user and smtp_password:
server.login(smtp_user, smtp_password)
server.send_message(msg)
server.quit()
print(f"DEBUG: Email sent to {to_email}")
return True
except Exception as e:
print(f"ERROR: send_contact_notification - {e}")
return False
```
### Step 5: Create contacts_service.py
```python
# /var/www/html/SITENAME.nsgia.com/services/SITENAME_contacts_service.py
from utils.db import get_db_connection, close_db_connection
import mariadb
def create_contact(data):
connection = None
try:
email = data.get('email', '').strip()
print(f"DEBUG: create_contact - Processing {email}")
connection = get_db_connection()
cursor = connection.cursor(dictionary=True)
# Check if email exists
cursor.execute("SELECT id FROM SITENAME_contacts WHERE email = ?", (email,))
existing = cursor.fetchone()
if existing:
contact_id = existing['id']
update_cursor = connection.cursor()
update_cursor.execute("""
UPDATE SITENAME_contacts
SET first_name = COALESCE(NULLIF(?, ''), first_name),
last_name = COALESCE(NULLIF(?, ''), last_name),
phone = COALESCE(NULLIF(?, ''), phone),
organization = COALESCE(NULLIF(?, ''), organization),
title = COALESCE(NULLIF(?, ''), title),
interest_area = COALESCE(NULLIF(?, ''), interest_area),
updated_at = CURRENT_TIMESTAMP
WHERE id = ?
""", (
data.get('first_name', ''),
data.get('last_name', ''),
data.get('phone', ''),
data.get('organization', ''),
data.get('title', ''),
data.get('interest_area', ''),
contact_id
))
# Add message as note
message = data.get('message', '').strip()
if message:
note_cursor = connection.cursor()
note_cursor.execute("""
INSERT INTO SITENAME_notes
(contact_id, note_type, note_content, created_by)
VALUES (?, 'contact_form', ?, 'contact_form')
""", (contact_id, message))
connection.commit()
return {'id': contact_id, 'is_new': False}
# Insert new contact
insert_cursor = connection.cursor()
insert_cursor.execute("""
INSERT INTO SITENAME_contacts
(first_name, last_name, email, phone, organization, title,
interest_area, source, status, priority)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, 'new', 'medium')
""", (
data.get('first_name', ''),
data.get('last_name', ''),
email,
data.get('phone', ''),
data.get('organization', ''),
data.get('title', ''),
data.get('interest_area', 'general'),
data.get('source', 'contact_form')
))
contact_id = insert_cursor.lastrowid
# Add message as note
message = data.get('message', '').strip()
if message:
note_cursor = connection.cursor()
note_cursor.execute("""
INSERT INTO SITENAME_notes
(contact_id, note_type, note_content, created_by)
VALUES (?, 'contact_form', ?, 'contact_form')
""", (contact_id, message))
connection.commit()
return {'id': contact_id, 'is_new': True}
except mariadb.Error as e:
print(f"ERROR: create_contact - {e}")
if connection:
connection.rollback()
return {'error': str(e)}
finally:
if connection:
close_db_connection(connection)
```
### Step 6: Create contact_blueprint.py
```python
# /var/www/html/SITENAME.nsgia.com/blueprints/contact_blueprint.py
from flask import Blueprint, render_template, request, jsonify
from services import SITENAME_contacts_service as contacts_service
from services import email_service
from datetime import datetime
contact = Blueprint("contact", __name__)
@contact.route("/contact", methods=["GET"])
def contact_form():
return render_template("contact.html")
@contact.route("/contact", methods=["POST"])
def contact_submit():
try:
first_name = request.form.get('first_name', '').strip()
last_name = request.form.get('last_name', '').strip()
email = request.form.get('email', '').strip()
phone = request.form.get('phone', '').strip()
organization = request.form.get('organization', '').strip()
title = request.form.get('title', '').strip()
interest_area = request.form.get('interest_area', 'general')
message = request.form.get('message', '').strip()
spam_check = request.form.get('spam', '').strip()
# Simple spam check: 15 + 7 = 22
if spam_check != '22':
return jsonify({'success': False, 'message': 'Spam check failed.'}), 400
if not all([first_name, last_name, email, organization]):
return jsonify({'success': False, 'message': 'Please fill in all required fields.'}), 400
contact_data = {
'first_name': first_name,
'last_name': last_name,
'email': email,
'phone': phone,
'organization': organization,
'title': title,
'interest_area': interest_area,
'source': 'contact_form',
'message': message,
'created_at': datetime.now().strftime('%Y-%m-%d %H:%M:%S')
}
result = contacts_service.create_contact(contact_data)
if 'error' in result:
return jsonify({'success': False, 'message': 'Error saving contact.'}), 500
email_service.send_contact_notification(contact_data)
return jsonify({
'success': True,
'message': 'Thank you! We will contact you within 24-48 hours.'
})
except Exception as e:
print(f"ERROR: contact_submit - {e}")
return jsonify({'success': False, 'message': 'An error occurred.'}), 500
```
### Step 7: Create contact.html Template
```html
{% extends "base.html" %}
{% block title %}Contact | SITENAME{% endblock %}
{% block content %}
<main style="padding: 40px;">
<div class="afh-answers">
<section class="afh-answer-section">
<h2>Contact Us</h2>
<p class="section-intro">We'd love to hear from you.</p>
<form id="contact-form" method="POST" action="/contact">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
<div>
<label for="first_name"><strong>First Name *</strong></label>
<input type="text" id="first_name" name="first_name" required
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div>
<label for="last_name"><strong>Last Name *</strong></label>
<input type="text" id="last_name" name="last_name" required
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
<div>
<label for="email"><strong>Email *</strong></label>
<input type="email" id="email" name="email" required
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div>
<label for="phone"><strong>Phone</strong></label>
<input type="tel" id="phone" name="phone"
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
<div>
<label for="organization"><strong>Organization *</strong></label>
<input type="text" id="organization" name="organization" required
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div>
<label for="title"><strong>Title</strong></label>
<input type="text" id="title" name="title"
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
</div>
<div style="margin-bottom: 1rem;">
<label for="interest_area"><strong>Interest Area</strong></label>
<select id="interest_area" name="interest_area"
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
<option value="general">General Inquiry</option>
<option value="investment">Investment Opportunity</option>
<option value="partnership">Partnership</option>
<option value="construction">Construction Services</option>
<option value="other">Other</option>
</select>
</div>
<div style="margin-bottom: 1rem;">
<label for="message"><strong>Message</strong></label>
<textarea id="message" name="message" rows="5"
style="width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"></textarea>
</div>
<div style="margin-bottom: 1rem;">
<label for="spam"><strong>Spam Check: What is 15 + 7? *</strong></label>
<input type="text" id="spam" name="spam" required
style="width: 100px; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;">
</div>
<button type="submit" class="cta-button" style="cursor: pointer;">Send Message</button>
</form>
<div id="form-response" style="margin-top: 1rem; display: none;"></div>
</section>
</div>
</main>
<script>
document.getElementById('contact-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
const responseDiv = document.getElementById('form-response');
try {
const response = await fetch('/contact', {
method: 'POST',
body: formData
});
const result = await response.json();
responseDiv.style.display = 'block';
if (result.success) {
responseDiv.innerHTML = '<p style="color: green; font-weight: bold;">' + result.message + '</p>';
form.reset();
} else {
responseDiv.innerHTML = '<p style="color: red;">' + result.message + '</p>';
}
} catch (error) {
responseDiv.style.display = 'block';
responseDiv.innerHTML = '<p style="color: red;">An error occurred. Please try again.</p>';
}
});
</script>
{% endblock %}
```
### Step 8: Register Blueprint in Main App
Add to `SITENAME_app.py`:
```python
from blueprints.contact_blueprint import contact
app.register_blueprint(contact)
```
### Step 9: Create services/__init__.py
```python
# /var/www/html/SITENAME.nsgia.com/services/__init__.py
# Empty file to make services a package
```
---
## Checklist
- [ ] Database tables created (SITENAME_contacts, SITENAME_notes)
- [ ] .env file created with correct port and credentials
- [ ] services/ directory created
- [ ] email_service.py created
- [ ] SITENAME_contacts_service.py created
- [ ] blueprints/ directory created
- [ ] contact_blueprint.py created
- [ ] contact.html template created
- [ ] Blueprint registered in main app
- [ ] services/__init__.py created
- [ ] Test form submission
- [ ] Test email notification
---
## Ports in Use
| Site | Port |
|------|------|
| qplex | 5012 |
| refuge | 5013 |
| grants | 5001 |
| (add new sites here) | |
---
## Troubleshooting
| Problem | Cause | Fix |
|---------|-------|-----|
| Email not sending | Wrong SMTP password | Check .env, get password from Michael |
| 500 error on submit | Missing service import | Check imports in contact_blueprint.py |
| Database error | Table doesn't exist | Run CREATE TABLE SQL |
| Form not submitting | JavaScript error | Check browser console |
--------------------------------------------------------------------------------
FILE: NSG_CREDENTIALS_SETUP.md
--------------------------------------------------------------------------------
# Credentials Page - NSG Standards
## Overview
Professional credentials page with team bios, metrics, technical capabilities, and patents. Uses afh-hero pattern with hero.png background image, matching procurement and optimization.
**Files:**
```
static/css/credentials.css - Page-specific styles
templates/credentials.html - Main template
templates/credentials_partials/
_metrics_bar.html - Key metrics display
_patents_grid.html - Patent portfolio
_project_story.html - Project narrative
_role_matrix.html - Team roles
_technical_capabilities.html - Technical expertise
templates/team_partials/
_team_section.html - Team grid container
_team_member_*.html - Individual bios
```
---
## Template Structure
```html
{% extends "base.html" %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/credentials.css') }}">
{% endblock %}
{% block content %}
<main style="padding: 40px;">
<!-- Hero Section -->
<section class="afh-hero" style="background-image: ...">
<h1>Professional Credentials</h1>
<p>Subtitle...</p>
</section>
<div class="afh-answers">
<section class="afh-answer-section">
{% include 'team_partials/_team_section.html' %}
</section>
{% include 'credentials_partials/_metrics_bar.html' %}
<section class="afh-answer-section">
{% include 'credentials_partials/_technical_capabilities.html' %}
</section>
<section class="afh-answer-section">
{% include 'credentials_partials/_patents_grid.html' %}
</section>
</div>
</main>
{% endblock %}
```
---
## Deploy to New Site
```bash
SITE=/var/www/html/[sitename].nsgia.com
# CSS
cp /var/www/html/nsg_standards/static/css/credentials.css $SITE/static/css/
# Template
cp /var/www/html/nsg_standards/templates/credentials.html $SITE/templates/
# Partials
mkdir -p $SITE/templates/credentials_partials
cp /var/www/html/nsg_standards/templates/credentials_partials/*.html $SITE/templates/credentials_partials/
mkdir -p $SITE/templates/team_partials
cp /var/www/html/nsg_standards/templates/team_partials/*.html $SITE/templates/team_partials/
# Team images
mkdir -p $SITE/static/images/team
cp /var/www/html/nsg_standards/static/images/team/*.jpg $SITE/static/images/team/
```
---
## Add Route (front_blueprint.py)
```python
@front.route("/credentials")
def credentials():
return render_template("credentials.html")
```
---
## Key Pattern: base.html not base_nosidebar.html
Credentials now uses `base.html` (with sidebar) not `base_nosidebar.html`.
This means:
- Sidebar navigation appears
- Consistent layout with other pages
- Uses `{% block extra_css %}` not `{% block styles %}`
---
## Customizing Team Members
Each team member has their own partial in `team_partials/`:
```
_team_member_hoffman.html
_team_member_smith.html
_team_member_hall.html
...
```
To add/remove team members, edit `_team_section.html`.
---
## Verification Checklist
- [ ] Hero displays with hero.png background
- [ ] Sidebar appears and links work
- [ ] Team photos load
- [ ] Metrics bar displays
- [ ] Patents grid shows
- [ ] Contact CTA links to contact form
--------------------------------------------------------------------------------
FILE: NSG_PROCUREMENT_SETUP.md
--------------------------------------------------------------------------------
# **NSG Procurement Page Setup Guide**
**For AI Assistants Adding Procurement Pages to NSG Sites**
---
## **Purpose**
This guide documents how to add the NSG Procurement Systems page to any NSG site. The procurement page showcases NSG's component-level pricing and direct supplier sourcing methodology.
---
## **Prerequisites**
Before starting, fetch and read:
- **Communication Style**: https://nsgia.com/p/a17a8506d7ec429ebfd21a44ddeddc9b
- **Development Standards**: https://nsgia.com/p/a115811d0e12465f8634022a6e0f5d0d
**Critical**: All content must follow peer-to-peer executive communication standards. No selling, no cheerleading, no directive language. State facts, then stop.
---
## **Order of Operations**
### Step 1: Add Route to app.py
```python
@app.route('/procurement')
def procurement():
return render_template('procurement.html')
```
Update the change log in app.py to reflect the new route.
---
### Step 2: Add Navbar Link
In `templates/partials/_navbar.html`, add Procurement to the links:
```html
<div class="afh-navbar-links">
<a href="/#vision">Vision</a>
<a href="/#academy">Academy</a>
<a href="/#campus">Campus</a>
<a href="/procurement">Procurement</a>
<a href="/contact">Contact</a>
</div>
```
Update change log.
---
### Step 3: Create Images Directory
```bash
mkdir -p /var/www/html/SITENAME.nsgia.com/static/images/procurement
```
---
### Step 4: Copy Images from Aburi
The procurement images are stored on aburi.nsgia.com:
```bash
cp /var/www/html/aburi.nsgia.com/static/library/proforma_calculator/*.png /var/www/html/SITENAME.nsgia.com/static/images/procurement/
```
**Required images:**
- projectSourcing.png
- supplierPortal.png
- addComponent1.png
- componentQrCode.png
- componentTree.png
- componentTree2.png
- costCalculator.png
- costSummary.png
- VerticalCostAnalysis.png
- softCosts.png
- BasicProjectInfo.png
- DevelopmentProjects.png
- developmentCosts.png
---
### Step 5: Create procurement.html Template
The template extends the site's base.html and includes:
1. **Hero section** with site's hero image background
2. **Cost Control section** with portal screenshots
3. **Component-Level Design** section with image grids
4. **Cost Analysis System** section with calculator screenshots
5. **Process Flow** section with styled flowchart
6. **Competitive Advantages** section with benefit cards
7. **Supplier Qualification Requirements** section with white cards on light gray background
8. **Implementation** section with highlight boxes
**Hero CSS pattern:**
```css
.procurement-hero {
min-height: 60vh;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/images/hero.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 60px 20px;
}
```
**Qualification section CSS pattern** (light background, white cards):
```css
.qualification-section {
background: #f0f4f8;
padding: 4rem 2rem;
}
.requirement-category {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e2e8f0;
}
```
---
### Step 6: Update Image Paths
Image paths in the template should reference the local procurement folder:
```html
<img src="{{ url_for('static', filename='images/procurement/projectSourcing.png') }}" alt="...">
```
---
## **Content Guidelines**
### What to Include
- **Facts about procurement methodology**: Component-level pricing, direct supplier relationships, QR code tracking
- **Cost structure explanation**: GC markup is 15-25%, direct procurement eliminates this layer
- **Supplier qualification requirements**: Technical, financial, performance, documentation standards
- **Process flow**: Design → Pricing → Sourcing → Control
### What to Avoid
- **No "Proven Results"** claims unless there is documented implementation history
- **No selling language**: "exciting opportunity," "significant savings," "excellent system"
- **No directive language**: "You should," "The next step is," "Don't miss this"
- **No cheerleading**: Exclamation points, "Great news!", excessive adjectives
- **No wrap-ups**: "In conclusion," "To summarize," "Looking forward to"
### Correct Tone Examples
**Wrong:** "This represents a significant cost savings opportunity that eliminates wasteful contractor markup."
**Right:** "General contractors mark up materials 15-25%. Direct procurement eliminates this layer."
**Wrong:** "Our proven system has demonstrated consistent savings across multiple projects."
**Right:** "Component database and supplier network accumulate pricing history and performance data across projects."
---
## **Deployment**
```bash
cd /var/www/html/SITENAME.nsgia.com
# Copy template
cp procurement.html templates/
# Restart service
sudo systemctl restart SITENAME
```
---
## **Verification Checklist**
- [ ] Route added to app.py with change log updated
- [ ] Navbar link added with change log updated
- [ ] Images copied from aburi
- [ ] Template created with correct image paths
- [ ] Hero image displays correctly
- [ ] Qualification cards display as white on light gray background
- [ ] All content reviewed for peer-to-peer tone
- [ ] No unsubstantiated claims ("proven results," "demonstrated savings")
- [ ] Service restarted
---
## **Reference Files**
| Component | Source Location |
|-----------|-----------------|
| Original procurement HTML | aburi.nsgia.com/templates/procurement.html |
| Procurement images | aburi.nsgia.com/static/library/proforma_calculator/ |
| Communication standards | https://nsgia.com/p/a17a8506d7ec429ebfd21a44ddeddc9b |
| Development standards | https://nsgia.com/p/a115811d0e12465f8634022a6e0f5d0d |
---
## **Common Issues**
**Images not displaying:**
- Check path: should be `images/procurement/` not `library/proforma_calculator/`
- Verify images were copied to correct location
- Check file permissions
**White text invisible:**
- Qualification section needs light background (#f0f4f8), not dark
- Cards need white background with dark text
**Spacing issues:**
- Remove excessive blank lines from template
- Check CSS margin/padding values
**Tone violations:**
- Re-read communication standards before finalizing
- Remove any selling language, directive phrases, or unsubstantiated claims
--------------------------------------------------------------------------------
FILE: NSG_SITE_GUIDE.md
--------------------------------------------------------------------------------
# NSG Site Standards Guide
## Purpose
This guide explains how to create a new North Star Group website using the standard CSS and JavaScript files. The goal is to reduce site creation from 12 hours to 2 hours by reusing tested patterns.
**Critical Rule: Do not modify the standard files.** Make your HTML conform to the existing classes. If you need a style that doesn't exist, ask before adding it.
---
## File Structure
```
/var/www/html/nsg_standards/
├── css/
│ ├── nsg_variables.css # Colors, fonts, layout dimensions
│ ├── nsg_accordion.css # 3-layer accordion hierarchy
│ ├── nsg_layout.css # Sidebar, navbar, hero, footer
│ └── nsg_components.css # Tables, images, callouts, grids
├── js/
│ └── nsg_accordion.js # Accordion toggle + image expand
└── NSG_SITE_GUIDE.md # This file
```
---
## Creating a New Site
### Step 1: Create Project Directory
```bash
mkdir -p /var/www/html/newproject.nsgia.com/static/css
mkdir -p /var/www/html/newproject.nsgia.com/static/js
mkdir -p /var/www/html/newproject.nsgia.com/static/images
mkdir -p /var/www/html/newproject.nsgia.com/templates/sections
mkdir -p /var/www/html/newproject.nsgia.com/templates/partials
```
### Step 2: Copy Standard Files
```bash
cp /var/www/html/nsg_standards/css/*.css /var/www/html/newproject.nsgia.com/static/css/
cp /var/www/html/nsg_standards/js/*.js /var/www/html/newproject.nsgia.com/static/js/
```
### Step 3: Create Project Variables File
Create `newproject_variables.css` with your project colors:
```css
/*
===========================================================================
File: newproject_variables.css
Purpose: Project-specific color overrides
===========================================================================
*/
:root {
/* Primary colors - choose from your palette */
--color-primary: #29A0B1; /* Main accent */
--color-primary-dark: #167D7F; /* Hover/active states */
--color-primary-light: #98D7C2; /* Highlights */
/* Secondary colors */
--color-secondary: #DDFFE7; /* Borders, subtle backgrounds */
--color-secondary-light: #f0fdf4; /* Panel backgrounds */
/* Accent */
--color-accent: #d4a574; /* Gold/sand accent */
}
```
### Step 4: Set Up base.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Project Name{% endblock %}</title>
<!-- Standard CSS (load order matters) -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/nsg_variables.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/newproject_variables.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/nsg_layout.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/nsg_accordion.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/nsg_components.css') }}">
</head>
<body>
{% include 'partials/_navbar.html' %}
{% include 'partials/_sidebar.html' %}
<div class="afh-main-container">
{% block content %}{% endblock %}
{% include 'partials/_footer.html' %}
</div>
<!-- Standard JS -->
<script src="{{ url_for('static', filename='js/nsg_accordion.js') }}"></script>
</body>
</html>
```
---
## Color Selection
**The user selects colors, not AI.**
Use these tools to generate harmonious palettes:
- https://coolors.co
- https://color.adobe.com
- https://paletton.com
### Color Placement Structure
| Element | Variable | Default | Purpose |
|---------|----------|---------|---------|
| **Navbar** | `--color-navbar` | `#2f2f2f` | Dark gray/black - frames top |
| **Footer** | `--color-footer` | `#1a1a1a` | Black - frames bottom |
| **Sidebar** | `--color-sidebar` | `#8c4f55` | Accent color - sets mood |
| **Primary** | `--color-primary` | `#2b6777` | Headings, links, accordions |
| **Accent** | `--color-accent` | `#d4a574` | CTAs, highlights |
The navbar and footer are black to frame the page. The sidebar provides the accent color that gives the site its personality. Change `--color-sidebar` to change the site's mood.
### Example Project Variables File
```css
/*
File: qplex_variables.css
Purpose: Q-Plex Albany GA color overrides
*/
:root {
/* Sidebar - Albany teal palette */
--color-sidebar: #29A0B1; /* Teal */
--color-sidebar-dark: #167D7F; /* Teal Green */
--color-sidebar-light: #98D7C2; /* Spearmint */
/* Primary - for content accents */
--color-primary: #167D7F; /* Teal Green */
--color-primary-dark: #0d5c5c;
--color-primary-light: #98D7C2;
/* Secondary - panel backgrounds */
--color-secondary: #DDFFE7; /* Mint */
--color-secondary-light: #f0fdf4;
}
```
---
## Accordion Hierarchy (3 Layers)
### Layer 1: Section Headers
Dark background, white text. Groups related accordions.
```html
<button class="accordion-section">Category Name</button>
<div class="panel panel-section">
<!-- Layer 2 accordions go here -->
</div>
```
### Layer 2: Standard Accordions
Light background, colored text. Individual expandable items.
```html
<button class="accordion">Item Name</button>
<div class="panel">
<!-- Content goes here -->
</div>
```
### Layer 3: Content Panels
White background. Contains text, tables, images.
### Complete Example (Nested)
```html
<!-- Layer 1: Section -->
<button class="accordion-section">Building & Construction</button>
<div class="panel panel-section">
<!-- Layer 2: Item -->
<button class="accordion">SIP Panel Construction</button>
<div class="panel">
<!-- Layer 3: Content -->
<p>Structural Insulated Panels provide R-40+ insulation...</p>
<ul>
<li>Faster installation</li>
<li>Better air sealing</li>
</ul>
</div>
<!-- Another Layer 2 item -->
<button class="accordion">Utility Chases</button>
<div class="panel">
<p>Pre-routed pathways for electrical and plumbing...</p>
</div>
</div>
```
---
## Available Components
### Tables
```html
<table class="data-table">
<tr><th>Item</th><th>Value</th></tr>
<tr><td>Acreage</td><td>2.02</td></tr>
</table>
```
### Images (Click to Expand)
```html
<div class="image-row">
<figure>
<img src="photo.jpg" alt="Description">
<figcaption>Caption text</figcaption>
</figure>
</div>
```
Or single image:
```html
<div class="feature-image">
<img src="photo.jpg" alt="Description">
</div>
```
### Highlight Box
```html
<div class="highlight-box">
<p><strong>Key Point:</strong> Important information here.</p>
</div>
```
### Data Grid (Metric Cards)
```html
<div class="data-grid">
<div class="data-card">
<span class="data-number">8</span>
<span class="data-label">Units</span>
</div>
<div class="data-card">
<span class="data-number">2.02</span>
<span class="data-label">Acres</span>
</div>
</div>
```
### Overview Table (Label/Value)
```html
<div class="overview-static">
<table>
<tr><td>Address</td><td>925 Mercedes St</td></tr>
<tr><td>Zoning</td><td>C-R Commercial</td></tr>
</table>
</div>
```
---
## Layout Classes
| Class | Purpose |
|-------|---------|
| `.afh-navbar` | Fixed top navigation |
| `.afh-sidebar` | Fixed left sidebar |
| `.afh-main-container` | Main content wrapper |
| `.afh-hero` | Hero section with background image |
| `.afh-metrics` | Row of metric cards below hero |
| `.afh-answers` | Container for content sections |
| `.afh-answer-section` | Individual content section |
| `.afh-cta` | Call-to-action section |
| `.afh-footer` | Page footer |
---
## Do NOT
- Edit `nsg_variables.css` for a single project (create project override file)
- Edit `nsg_accordion.css` to change colors (use variables)
- Edit `nsg_layout.css` to add project-specific styles
- Edit `nsg_components.css` for one-off components
- Create new accordion styles (use the 3-layer system)
## DO
- Create `projectname_variables.css` with project colors
- Use existing classes in your HTML
- Ask before adding new components
- Keep HTML structure consistent across projects
--------------------------------------------------------------------------------
FILE: site_architecture_standards.md
--------------------------------------------------------------------------------
# NSG Site Architecture Standards
## Purpose
Documents the standard site structure for NSG Flask presentation sites. These sites use a consistent 4-layer accordion architecture that reduces text walls while maintaining comprehensive information access.
---
## Site Types
| Type | Purpose | Examples |
|------|---------|----------|
| **Presentation Site** | Client-facing project documentation | leafriver.nsgia.com, enugu.nsgia.com, africatown.nsgia.com |
| **Application Site** | Functional tools with user interaction | grants.nsgia.com, nsgia.com (Memory System) |
This document covers **Presentation Sites**.
---
## Directory Structure
```
project_root/
├── app.py # Flask application (under 300 lines)
├── templates/
│ ├── base.html # Base template with nav, footer, accordion JS
│ ├── {project}.html # Main page - includes all sections
│ └── sections/
│ ├── _introduction.html # Section 0 - intro/overview
│ ├── _sec01_{name}.html # Section 1
│ ├── _sec02_{name}.html # Section 2
│ └── ...
│ └── {topic}_partials/ # Subpartials for complex sections
│ ├── _item_01.html
│ ├── _item_02.html
│ └── ...
└── static/
├── css/
│ └── style.css
├── js/
│ └── accordion.js
└── images/
└── {project}/
```
---
## 4-Layer Accordion Architecture
### Layer 1: Shell Section
The main section file containing the hero and section-level accordions.
**File pattern:** `templates/sections/_sec{NN}_{name}.html`
**Structure:**
```html
<!--
===========================================================================
CHANGE LOG
File: templates/sections/_sec13_services.html
Type: HTML Partial - Section Shell
Purpose: North Star Services - development consulting overview
Parent: {project}.html
Subpartials: {topic}_partials/_item_01 through _item_XX
Hero Image: static/images/{project}/hero_{section}.png
===========================================================================
2025-12-18 v1.0 - Initial creation
===========================================================================
-->
<section class="afh-answer-section" id="{section-id}">
<!-- Hero Banner -->
<div class="section-hero" style="background-image: linear-gradient(rgba(20,40,50,0.5), rgba(20,40,50,0.5)), url('{{ url_for('static', filename='images/{project}/hero_{section}.png') }}'); background-size: cover; background-position: center; padding: 3rem 2rem; margin-bottom: 2rem; border-radius: 8px;">
<h2 style="color: white; margin: 0;">13. Section Title</h2>
<p style="color: rgba(255,255,255,0.9); margin: 0.5rem 0 0 0;">Section subtitle or description.</p>
</div>
<!-- SECTION GROUP: First Group Name -->
<button class="accordion accordion-section">First Group Name</button>
<div class="panel panel-section">
{% include '{topic}_partials/_item_01.html' %}
{% include '{topic}_partials/_item_02.html' %}
</div>
<!-- SECTION GROUP: Second Group Name -->
<button class="accordion accordion-section">Second Group Name</button>
<div class="panel panel-section">
{% include '{topic}_partials/_item_03.html' %}
{% include '{topic}_partials/_item_04.html' %}
</div>
</section>
```
### Layer 2: Section Accordions
Group related topics under collapsible headers. Uses `accordion-section` class for distinct styling.
**CSS classes:** `accordion accordion-section` / `panel panel-section`
**Purpose:** Organize 3-8 related subpartials into logical groups
**Examples:**
- "Strategy & Vision" (contains global strategy, development vision, political strategy)
- "Predevelopment Checklist" (contains 19 individual checklist items)
- "Infrastructure & Utilities" (contains water, sewer, electric, etc.)
### Layer 3: Topic Accordions
Individual numbered items within section groups. Each is a separate subpartial file.
**File pattern:** `templates/{topic}_partials/_item_{NN}_{name}.html`
**Structure:**
```html
<!--
===========================================================================
CHANGE LOG
File: templates/{topic}_partials/_item_09_park.html
Type: HTML Partial - Accordion
Purpose: Community park component description
Parent: sections/_sec13_services.html
===========================================================================
2025-12-18 v1.0 - Initial creation
===========================================================================
-->
<button class="accordion">9. Community Park</button>
<div class="panel">
<p>Opening paragraph explaining the topic.</p>
<!-- Nested accordions for details -->
<button class="accordion nested">Subtopic A</button>
<div class="panel nested">
<table class="data-table">
<tbody>
<tr><td><strong>Item</strong></td><td>Description</td></tr>
</tbody>
</table>
</div>
<button class="accordion nested">Subtopic B</button>
<div class="panel nested">
<ul>
<li>Detail point 1</li>
<li>Detail point 2</li>
</ul>
</div>
<p><strong>Risk Level:</strong> Medium. Status note.</p>
</div>
```
### Layer 4: Nested Accordions
Details within topic accordions. Prevent information overload by hiding secondary details.
**CSS classes:** `accordion nested` / `panel nested`
**Purpose:** Hide tertiary information that supports the topic but isn't essential on first read
**Common uses:**
- "What We Know" / "Work Remaining" pairs
- Detailed specifications
- Comparable examples
- Pre-development questions
---
## CSS Requirements
### Accordion Styling
```css
/* Layer 2: Section accordions - darker, bolder */
.accordion-section {
background-color: #1a5a5a;
font-size: 1.1rem;
font-weight: 600;
}
.accordion-section:hover,
.accordion-section.active {
background-color: #0d4a4a;
}
.panel-section {
padding: 1rem 1.5rem;
background-color: #f8f9fa;
}
/* Layer 3: Topic accordions - standard */
.accordion {
background-color: #2a6a6a;
color: white;
cursor: pointer;
padding: 1rem 1.25rem;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.3s;
margin-top: 0.5rem;
border-radius: 4px;
}
.accordion:hover,
.accordion.active {
background-color: #1a5a5a;
}
.panel {
padding: 0 1.25rem;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
/* Layer 4: Nested accordions - lighter, indented */
.accordion.nested {
background-color: #e8f4f4;
color: #1a5a5a;
font-size: 0.95rem;
margin-left: 1rem;
width: calc(100% - 1rem);
}
.accordion.nested:hover,
.accordion.nested.active {
background-color: #d0e8e8;
}
.panel.nested {
margin-left: 1rem;
background-color: #fafafa;
}
```
### Accordion JavaScript
```javascript
// Initialize all accordions
document.querySelectorAll('.accordion').forEach(button => {
button.addEventListener('click', function() {
this.classList.toggle('active');
const panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
// Update parent panels to accommodate expanded content
let parent = this.closest('.panel');
while (parent) {
parent.style.maxHeight = parent.scrollHeight + "px";
parent = parent.parentElement.closest('.panel');
}
});
});
```
---
## Content Patterns
### Tables Over Bullets
Use 2-column tables for key-value information instead of bullet lists:
```html
<!-- GOOD: Clean, scannable -->
<table class="data-table">
<tbody>
<tr><td><strong>Location</strong></td><td>Fairhope, Alabama</td></tr>
<tr><td><strong>Founded</strong></td><td>Michael Hoffman, CEO</td></tr>
<tr><td><strong>Focus</strong></td><td>Systems integration, affordable housing</td></tr>
</tbody>
</table>
<!-- AVOID: Harder to scan -->
<ul>
<li><strong>Location:</strong> Fairhope, Alabama</li>
<li><strong>Founded:</strong> Michael Hoffman, CEO</li>
<li><strong>Focus:</strong> Systems integration, affordable housing</li>
</ul>
```
### Risk Level Pattern
End topic accordions with status indicator:
```html
<p><strong>Risk Level:</strong> Medium. Strategy defined, execution pending.</p>
```
| Level | Meaning |
|-------|---------|
| Low | Complete or minimal risk |
| Medium | In progress or known manageable risks |
| High | Not started or significant unknowns |
### Why This Matters Pattern
Open topic accordions with context:
```html
<p><strong>Why this matters:</strong> Brief explanation of why this topic is important to the overall project.</p>
```
---
## Section Naming Conventions
### File Naming
| Pattern | Example | Use |
|---------|---------|-----|
| `_introduction.html` | `_introduction.html` | Section 0 - always first |
| `_sec{NN}_{name}.html` | `_sec01_market.html` | Numbered content sections |
| `_team.html` | `_team.html` | Team page (if separate route) |
| `_contact.html` | `_contact.html` | Contact page (if separate route) |
### Subpartial Folders
| Pattern | Example | Use |
|---------|---------|-----|
| `{topic}_partials/` | `dev_services/` | Topic-specific subpartials |
| `_svc_{NN}_{name}.html` | `_svc_09_park.html` | Services subpartials |
| `_item_{NN}_{name}.html` | `_item_03_title.html` | Generic subpartials |
---
## Navigation Patterns
### Sidebar Navigation
```html
<nav class="sidebar">
<div class="nav-header">
<a href="/">Project Name</a>
<span>Subtitle</span>
</div>
<div class="nav-group">
<div class="nav-group-title">Main Sections</div>
<a href="#overview">Overview</a>
<a href="#market">1. Market</a>
<a href="#property">2. Property</a>
</div>
<div class="nav-group">
<div class="nav-group-title">Development</div>
<a href="#strategy">3. Strategy</a>
<a href="#housing">4. Housing</a>
</div>
<div class="nav-group">
<a href="/team">Team</a>
<a href="/contact">Contact</a>
</div>
</nav>
```
### Anchor Links
Every section needs an `id` attribute matching the nav link:
```html
<section class="afh-answer-section" id="market">
```
---
## Related Projects Pattern
Use collapsible accordion for cross-project links:
```html
<button class="accordion nested">Similar Projects</button>
<div class="panel nested">
<table class="data-table">
<tbody>
<tr>
<td><strong><a href="https://project1.nsgia.com" target="_blank">Project 1</a></strong></td>
<td>Brief description of project 1</td>
</tr>
<tr>
<td><strong><a href="https://project2.nsgia.com" target="_blank">Project 2</a></strong></td>
<td>Brief description of project 2</td>
</tr>
</tbody>
</table>
</div>
```
---
## Deployment Checklist
1. **File Structure**
- [ ] All files under 150 lines (HTML) / 200 lines (CSS) / 300 lines (Python)
- [ ] Change logs at top of every file
- [ ] Subpartials in dedicated folders
2. **Navigation**
- [ ] All section IDs match nav links
- [ ] Sidebar groups logically organized
- [ ] Team and Contact pages linked
3. **Accordions**
- [ ] Section accordions have `accordion-section` class
- [ ] Nested accordions have `nested` class
- [ ] JavaScript handles parent panel height updates
4. **Content**
- [ ] Tables used for key-value data
- [ ] Risk levels on checklist items
- [ ] "Why this matters" on complex topics
- [ ] Related projects in accordion format
---
## Version History
| Date | Version | Changes |
|------|---------|---------|
| 2025-12-21 | 1.0 | Initial creation - documented 4-layer accordion pattern |
================================================================================
SECTION 2: CSS FILES
================================================================================
--------------------------------------------------------------------------------
FILE: base_nosidebar.css
--------------------------------------------------------------------------------
/*
===========================================================================
CHANGE LOG
File: static/css/base_nosidebar.css
Type: CSS Stylesheet
Purpose: Base layout for pages WITHOUT sidebar
===========================================================================
2025-12-26 v1.0 - Initial creation
===========================================================================
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', 'Times New Roman', serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
main {
min-height: 80vh;
padding: 0;
background: white;
margin-top: 60px;
}
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
main {
margin-top: 50px;
}
}
--------------------------------------------------------------------------------
FILE: credentials.css
--------------------------------------------------------------------------------
/*
===========================================================================
CHANGE LOG
File: /static/css/credentials.css
Type: CSS Stylesheet
Purpose: Styles for credentials/team page using NSG standard variables
Parent: base_nosidebar.html (via credentials.html)
Requires: nsg_variables.css loaded BEFORE this file
===========================================================================
2025-12-26 v3.0 - Added .team-org, .team-tags for expanded bio format
2025-12-26 v2.0 - Converted to use CSS variables from nsg_variables.css
2025-12-26 v1.0 - Initial extraction from Refuge credentials page
===========================================================================
INSTRUCTIONS:
This CSS uses variables from nsg_variables.css. Colors will automatically
inherit from the project's color scheme. Load order in base.html:
1. nsg_variables.css
2. project_variables.css (e.g., qplex_variables.css)
3. credentials.css (this file)
===========================================================================
*/
/* ===== HEADER ===== */
.credentials-header {
background: linear-gradient(135deg, var(--color-sidebar) 0%, var(--color-sidebar-dark) 100%);
color: var(--color-white);
padding: 4rem 0 3rem 0;
border-bottom: none;
}
.credentials-header h1 {
color: var(--color-white);
font-size: 2.5rem;
font-weight: 400;
margin-bottom: 1rem;
text-align: center;
letter-spacing: 0.5px;
font-family: var(--font-heading);
}
.credentials-intro {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: var(--color-white);
font-size: 1.2rem;
line-height: 1.7;
font-weight: 300;
}
/* ===== SECTIONS ===== */
.section {
padding: 4rem 0;
border-bottom: 1px solid var(--color-border);
}
.section:last-child {
border-bottom: none;
}
.section h2 {
color: var(--color-sidebar);
font-size: 2rem;
font-weight: 500;
margin-bottom: 2.5rem;
text-align: center;
letter-spacing: 0.3px;
font-family: var(--font-heading);
}
.section h3 {
color: var(--color-sidebar-light);
font-size: 1.4rem;
margin: 2.5rem 0 1.2rem 0;
font-weight: 500;
font-family: var(--font-heading);
}
.section h4 {
color: var(--color-text);
font-size: 1.1rem;
margin: 1.5rem 0 0.8rem 0;
font-weight: 500;
}
.section p {
margin-bottom: 1.2rem;
color: var(--color-text);
line-height: 1.8;
font-size: 1.05rem;
font-family: var(--font-body);
}
.section ul {
margin: 1.5rem 0 2rem 2.5rem;
color: var(--color-text);
}
.section li {
margin-bottom: 0.8rem;
line-height: 1.7;
}
/* ===== HIGHLIGHT BOX ===== */
.credentials-highlight-box {
background: var(--color-secondary-light);
border-left: 5px solid var(--color-sidebar);
padding: 2rem;
margin: 2rem 0;
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}
.credentials-highlight-box p {
margin-bottom: 0.8rem;
}
.credentials-highlight-box p:last-child {
margin-bottom: 0;
}
.credentials-highlight-box strong {
color: var(--color-sidebar);
}
/* ===== TEAM GRID ===== */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.team-member {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: 2rem;
transition: box-shadow 0.3s;
}
.team-member:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.team-name {
font-weight: 600;
color: var(--color-sidebar);
margin-bottom: 0.5rem;
font-size: 1.15rem;
}
.team-title {
color: var(--color-sidebar-light);
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.team-org {
color: var(--color-text-light);
font-size: 0.9rem;
font-style: italic;
margin-bottom: 0.5rem;
}
.team-tags {
color: var(--color-text-light);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.team-experience {
color: var(--color-sidebar-light);
font-size: 0.9rem;
margin-bottom: 1rem;
font-weight: 500;
}
.team-description {
color: var(--color-text);
line-height: 1.6;
font-size: 0.95rem;
}
.team-description p {
margin-bottom: 0.8rem;
font-size: 0.95rem;
line-height: 1.6;
}
.team-description p:last-child {
margin-bottom: 0;
}
/* ===== PATENTS GRID ===== */
.patents-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin: 3rem 0;
}
.patent-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.patent-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.patent-title {
font-weight: 600;
color: var(--color-sidebar);
margin-bottom: 1rem;
font-size: 1rem;
}
.patent-details {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1rem;
font-size: 0.9rem;
color: var(--color-text-light);
}
.patent-details .label {
font-weight: 600;
color: var(--color-text);
}
.patent-link {
color: var(--color-sidebar);
text-decoration: none;
font-weight: 500;
}
.patent-link:hover {
text-decoration: underline;
}
/* ===== STATS GRID ===== */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 3rem 0;
text-align: center;
}
.stat-item {
padding: 2rem;
background: var(--color-secondary-light);
border-radius: var(--border-radius-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-sidebar);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.95rem;
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== CAPABILITY GRID ===== */
.methodology-section {
background: var(--color-secondary-light);
padding: 4rem 0;
}
.capability-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.capability-item {
background: var(--color-white);
padding: 2rem;
border-radius: var(--border-radius-lg);
border-top: 4px solid var(--color-sidebar);
}
.capability-item h4 {
color: var(--color-sidebar);
margin-bottom: 1rem;
font-size: 1.1rem;
}
.capability-item p {
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.6;
}
/* ===== CONTACT CTA ===== */
.contact-credentials {
background: var(--color-sidebar);
color: var(--color-white);
padding: 4rem 0;
text-align: center;
margin-top: 4rem;
}
.contact-credentials h2 {
color: var(--color-white);
margin-bottom: 1rem;
font-family: var(--font-heading);
font-weight: 400;
letter-spacing: 0.5px;
}
.contact-credentials p {
margin-bottom: 2rem;
opacity: 0.95;
font-size: 1.1rem;
font-family: var(--font-body);
}
.contact-cta {
display: inline-block;
background: var(--color-white);
color: var(--color-sidebar);
padding: 1rem 2.5rem;
font-size: 1.05rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--border-radius-sm);
transition: all 0.3s;
font-family: var(--font-body);
letter-spacing: 0.5px;
}
.contact-cta:hover {
background: var(--color-secondary-light);
color: var(--color-sidebar);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(255,255,255,0.3);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.credentials-header h1 {
font-size: 1.8rem;
}
.credentials-intro {
font-size: 1rem;
}
.patents-grid,
.team-grid {
grid-template-columns: 1fr;
}
.section {
padding: 3rem 0;
}
.stats-grid {
grid-template-columns: 1fr;
}
.section h2 {
font-size: 1.6rem;
}
.section h3 {
font-size: 1.2rem;
}
}
--------------------------------------------------------------------------------
FILE: nsg_accordion.css
--------------------------------------------------------------------------------
/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_accordion.css
Purpose: 3-layer accordion hierarchy for all NSG sites
Location: /var/www/html/nsg_standards/css/
Copy to: /var/www/html/[project]/static/css/
INSTRUCTIONS FOR AI:
- Do NOT edit this file to fix styling issues
- Make your HTML conform to these classes
- If a style doesn't exist, ask the user before adding
ACCORDION HIERARCHY (3 layers):
Layer 1: .accordion-section → Dark background, white text (category headers)
Layer 2: .accordion → Light background, colored text (items)
Layer 3: .panel → Content panels
HTML STRUCTURE:
<button class="accordion-section">Category Name</button>
<div class="panel panel-section">
<button class="accordion">Item Name</button>
<div class="panel">
Content here...
</div>
</div>
REQUIRED JS: nsg_accordion.js (handles toggle + nested panels)
===========================================================================
2025-12-19 v1.0 - Initial creation from Leaf River pattern
===========================================================================
*/
/* ===========================================
LAYER 1: SECTION HEADERS (dark background)
Top-level category groupings
=========================================== */
.accordion-section {
background-color: var(--color-primary-dark);
color: var(--color-white);
cursor: pointer;
padding: 18px 20px;
width: 100%;
border: none;
border-radius: var(--border-radius-md);
text-align: left;
font-family: var(--font-body);
font-size: var(--font-size-large);
font-weight: 600;
margin-top: 15px;
transition: background-color 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-section:first-of-type {
margin-top: 0;
}
.accordion-section:hover {
background-color: var(--color-primary);
}
.accordion-section::after {
content: '+';
font-size: 1.2rem;
font-weight: bold;
color: var(--color-white);
}
.accordion-section.active::after {
content: '−';
}
.accordion-section.active {
background-color: var(--color-primary);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
/* ===========================================
LAYER 2: STANDARD ACCORDIONS (light background)
Individual expandable items
=========================================== */
.accordion {
background: var(--color-secondary-light);
color: var(--color-primary);
cursor: pointer;
padding: 1rem 1.25rem;
width: 100%;
border: var(--border-width) solid var(--color-secondary);
border-radius: var(--border-radius-md);
text-align: left;
font-family: var(--font-body);
font-size: var(--font-size-base);
font-weight: 600;
margin-top: 0.75rem;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion:first-of-type {
margin-top: 0;
}
.accordion::after {
content: '+';
font-size: 1.1rem;
color: var(--color-primary-light);
}
.accordion.active::after {
content: '−';
color: var(--color-white);
}
.accordion:hover {
background: var(--color-secondary);
border-color: var(--color-primary-light);
}
.accordion.active {
background: var(--color-primary);
color: var(--color-white);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
/* ===========================================
LAYER 3: PANELS (content containers)
=========================================== */
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: var(--color-white);
border: var(--border-width) solid var(--color-secondary);
border-top: none;
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
padding: 0 1.25rem;
}
.panel.open {
max-height: 5000px;
}
/* Panel typography */
.panel p,
.panel ul,
.panel ol {
margin: var(--spacing-md) 0;
color: var(--color-text);
line-height: var(--line-height-base);
}
.panel ul,
.panel ol {
padding-left: var(--spacing-lg);
}
.panel li {
margin-bottom: var(--spacing-sm);
}
/* ===========================================
PANEL-SECTION (container for nested accordions)
Used inside Layer 1 sections
=========================================== */
.panel-section {
padding: 10px 0;
background-color: var(--color-secondary-light);
border-left: var(--border-accent-width) solid var(--color-primary-dark);
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
margin-bottom: 5px;
}
.panel-section > .accordion {
margin: 5px 10px;
}
.panel-section > .panel {
margin: 0 10px 5px 10px;
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 768px) {
.accordion-section {
padding: 14px 16px;
font-size: var(--font-size-base);
}
.accordion {
padding: 0.875rem 1rem;
font-size: var(--font-size-small);
}
}
--------------------------------------------------------------------------------
FILE: nsg_components.css
--------------------------------------------------------------------------------
/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_components.css
Purpose: Reusable components - tables, images, callouts, grids
Location: /var/www/html/nsg_standards/css/
Copy to: /var/www/html/[project]/static/css/
INSTRUCTIONS FOR AI:
- Do NOT edit this file to fix styling issues
- Make your HTML conform to these classes
- If a style doesn't exist, ask the user before adding
AVAILABLE COMPONENTS:
Tables: .data-table, .comparison-table, .timeline-table
Images: .image-row, .feature-image, .panel-image (click to expand)
Callouts: .highlight-box, .callout, .callout-warning, .callout-info
Grids: .data-grid, .data-card
Static: .overview-static (label/value tables)
===========================================================================
2025-12-19 v1.0 - Initial creation from Leaf River pattern
===========================================================================
*/
/* ===========================================
HIGHLIGHT BOX - Intro callouts
=========================================== */
.highlight-box {
background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary));
border-left: var(--border-accent-width) solid var(--color-primary);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}
.highlight-box p {
margin: var(--spacing-sm) 0;
}
.highlight-box p:first-child {
margin-top: 0;
}
.highlight-box p:last-child {
margin-bottom: 0;
}
/* ===========================================
CALLOUT BOXES - Warnings, info
=========================================== */
.callout {
background: var(--color-secondary-light);
border-left: var(--border-accent-width) solid var(--color-primary);
padding: var(--spacing-lg);
margin: var(--spacing-xl) 0;
border-radius: var(--border-radius-sm);
}
.callout p {
margin: 0;
}
.callout strong {
color: var(--color-primary);
}
.callout-warning {
background: #fff5f5;
border-left-color: #e53e3e;
}
.callout-warning strong {
color: #e53e3e;
}
.callout-info {
background: #fffbeb;
border-left-color: var(--color-accent);
}
.callout-info strong {
color: #d69e2e;
}
/* ===========================================
DATA GRID - Metric cards
=========================================== */
.data-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
.data-card {
background: var(--color-secondary-light);
border: var(--border-width) solid var(--color-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
text-align: center;
}
.data-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
}
.data-label {
font-size: var(--font-size-small);
color: var(--color-text-light);
}
/* ===========================================
OVERVIEW STATIC - Label/value tables
=========================================== */
.overview-static {
margin: var(--spacing-lg) 0;
}
.overview-static table {
width: 100%;
border-collapse: collapse;
background: var(--color-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.overview-static td {
padding: 12px 16px;
border-bottom: var(--border-width) solid var(--color-border);
}
.overview-static tr:last-child td {
border-bottom: none;
}
.overview-static td:first-child {
width: 40%;
color: var(--color-text-light);
font-weight: 500;
}
.overview-static td:last-child {
color: var(--color-text);
}
/* ===========================================
DATA TABLES
=========================================== */
.data-table,
.comparison-table,
.timeline-table {
width: 100%;
border-collapse: collapse;
margin: var(--spacing-md) 0;
}
.data-table th,
.data-table td,
.comparison-table th,
.comparison-table td,
.timeline-table th,
.timeline-table td {
padding: 0.75rem var(--spacing-md);
text-align: left;
border-bottom: var(--border-width) solid var(--color-border);
}
.data-table th,
.comparison-table th,
.timeline-table th {
background: var(--color-primary);
color: var(--color-white);
font-weight: 600;
}
.data-table tr:hover,
.comparison-table tr:hover {
background: var(--color-secondary-light);
}
.timeline-table .current-step {
background: var(--color-secondary-light);
font-weight: 600;
}
/* ===========================================
IMAGES - Standard display, click to expand
=========================================== */
.image-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.image-row figure {
margin: 0;
text-align: center;
}
.feature-image {
margin: var(--spacing-lg) 0;
text-align: center;
}
.image-row img,
.feature-image img,
.panel-image {
width: var(--image-default-width);
max-width: 100%;
height: auto;
border-radius: var(--border-radius-lg);
border: var(--border-width) solid var(--color-secondary);
cursor: pointer;
transition: all 0.3s ease;
display: block;
margin: 0 auto;
}
.panel-image {
margin: var(--spacing-md) auto;
}
figcaption {
text-align: center;
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-top: var(--spacing-sm);
}
/* ===========================================
IMAGE EXPAND - Click to view full size
Requires nsg_accordion.js
=========================================== */
.image-row img.expanded,
.feature-image img.expanded,
.panel-image.expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--image-expanded-width);
max-width: var(--image-expanded-max-width);
max-height: var(--image-expanded-max-height);
object-fit: contain;
z-index: 9999;
border: none;
border-radius: 0;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
}
/* ===========================================
SECTION NAVIGATION
=========================================== */
.section-nav {
display: flex;
justify-content: space-between;
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
border-top: var(--border-width) solid var(--color-border);
}
.nav-prev,
.nav-next {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-md);
transition: background 0.2s;
}
.nav-prev:hover,
.nav-next:hover {
background: var(--color-secondary-light);
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 768px) {
.data-grid {
grid-template-columns: 1fr;
}
.image-row {
flex-direction: column;
align-items: center;
}
.section-nav {
flex-direction: column;
gap: var(--spacing-sm);
text-align: center;
}
.overview-static td:first-child {
width: 50%;
}
}
--------------------------------------------------------------------------------
FILE: nsg_layout.css
--------------------------------------------------------------------------------
/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_layout.css
Purpose: Page layout - sidebar, navbar, hero, footer, content areas
Location: /var/www/html/nsg_standards/css/
Copy to: /var/www/html/[project]/static/css/
INSTRUCTIONS FOR AI:
- Do NOT edit this file to fix styling issues
- Make your HTML conform to these classes
- If a style doesn't exist, ask the user before adding
LAYOUT STRUCTURE:
<body>
<nav class="afh-navbar">...</nav>
<aside class="afh-sidebar">...</aside>
<div class="afh-main-container">
<section class="afh-hero">...</section>
<div class="afh-metrics">...</div>
<div class="afh-answers">
<section class="afh-answer-section">...</section>
</div>
<section class="afh-cta">...</section>
<footer class="afh-footer">...</footer>
</div>
</body>
===========================================================================
2025-12-19 v1.0 - Initial creation from Leaf River pattern
===========================================================================
*/
/* ===========================================
RESET & BASE
=========================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
line-height: var(--line-height-base);
color: var(--color-text);
background: var(--color-bg);
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: var(--line-height-tight);
}
/* ===========================================
NAVBAR - Fixed top
=========================================== */
.afh-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--navbar-height);
background: var(--color-navbar);
border-bottom: 2px solid var(--color-navbar-border);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--spacing-xl);
z-index: 1001;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
font-family: var(--font-body);
}
.afh-navbar-brand {
display: flex;
flex-direction: column;
}
.afh-navbar-title {
color: var(--color-white);
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
}
.afh-navbar-subtitle {
color: rgba(255,255,255,0.7);
font-size: 0.8rem;
}
.afh-navbar-links {
display: flex;
gap: var(--spacing-lg);
}
.afh-navbar-links a {
color: var(--color-white);
text-decoration: none;
font-weight: 500;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
transition: background 0.2s;
}
.afh-navbar-links a:hover {
background: rgba(255,255,255,0.1);
}
/* ===========================================
SIDEBAR - Fixed left
=========================================== */
.afh-sidebar {
position: fixed;
top: var(--navbar-height);
left: 0;
width: var(--sidebar-width);
height: calc(100vh - var(--navbar-height));
background: var(--color-sidebar);
border-right: 2px solid var(--color-sidebar-light);
color: var(--color-white);
padding: 0;
overflow-y: auto;
z-index: 1000;
box-shadow: 2px 0 10px rgba(0,0,0,0.15);
font-family: var(--font-body);
}
.afh-sidebar-header {
padding: var(--spacing-lg) var(--spacing-md);
border-bottom: 1px solid rgba(255,255,255,0.15);
background: rgba(0,0,0,0.1);
}
.afh-sidebar-header h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--spacing-xs);
font-family: var(--font-heading);
}
.afh-sidebar-header p {
font-size: 0.8rem;
opacity: 0.8;
font-weight: 300;
}
.afh-sidebar ul {
list-style: none;
padding: var(--spacing-sm) 0;
}
.afh-sidebar li a {
display: block;
padding: 0.75rem var(--spacing-md);
color: rgba(255,255,255,0.9);
text-decoration: none;
font-size: 0.9rem;
border-left: 3px solid transparent;
transition: all 0.2s;
}
.afh-sidebar li a:hover {
background: rgba(255,255,255,0.1);
border-left-color: rgba(255,255,255,0.5);
}
.afh-sidebar li a.active {
background: rgba(255,255,255,0.15);
border-left-color: var(--color-white);
font-weight: 600;
}
.afh-sidebar-divider {
height: 1px;
background: rgba(255,255,255,0.15);
margin: var(--spacing-sm) var(--spacing-md);
}
.afh-sidebar-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: var(--spacing-sm) var(--spacing-md);
opacity: 0.6;
}
/* ===========================================
MAIN CONTAINER
=========================================== */
.afh-main-container {
margin-left: var(--sidebar-width);
margin-top: var(--navbar-height);
min-height: calc(100vh - var(--navbar-height));
}
/* ===========================================
HERO SECTION
=========================================== */
.afh-hero {
position: relative;
min-height: var(--hero-min-height);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.afh-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 100%);
}
.afh-hero-content {
position: relative;
z-index: 1;
color: var(--color-white);
padding: var(--spacing-xl);
max-width: 800px;
}
.afh-hero-tag {
display: inline-block;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-small);
letter-spacing: 1px;
margin-bottom: var(--spacing-lg);
border-radius: var(--border-radius-sm);
}
.afh-hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.afh-hero-subtitle {
font-size: 1.4rem;
margin-bottom: var(--spacing-sm);
opacity: 0.95;
}
.afh-hero-tagline {
font-size: 1.1rem;
opacity: 0.9;
color: var(--color-accent);
}
/* ===========================================
METRICS ROW
=========================================== */
.afh-metrics {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
padding: var(--spacing-xl);
background: var(--color-white);
border-bottom: 3px solid var(--color-primary);
flex-wrap: wrap;
}
.afh-metric {
text-align: center;
padding: var(--spacing-md) var(--spacing-xl);
border: 2px solid var(--color-border);
border-radius: var(--border-radius-lg);
min-width: 140px;
}
.afh-metric-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
font-family: var(--font-heading);
}
.afh-metric-label {
font-size: var(--font-size-small);
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===========================================
ANSWER SECTIONS (main content)
=========================================== */
.afh-answers {
padding: var(--spacing-xxl) var(--spacing-xl);
max-width: var(--content-max-width);
margin: 0 auto;
}
.afh-answer-section {
background: var(--color-white);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
border: var(--border-width) solid var(--color-border);
scroll-margin-top: 20px;
}
.afh-answer-section h2 {
color: var(--color-primary);
font-size: 1.8rem;
margin-bottom: var(--spacing-sm);
}
.section-subtitle {
color: var(--color-text-light);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-lg);
font-style: italic;
}
.section-intro {
color: var(--color-secondary-dark);
font-size: 1.1rem;
margin-bottom: var(--spacing-lg);
}
.afh-answer-section p {
margin-bottom: var(--spacing-md);
}
/* ===========================================
CTA SECTION
=========================================== */
.afh-cta {
text-align: center;
padding: var(--spacing-xxl) var(--spacing-xl);
background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
}
.afh-cta h3 {
color: var(--color-primary);
font-size: 1.6rem;
margin-bottom: var(--spacing-sm);
}
.afh-cta p {
color: var(--color-text);
margin-bottom: var(--spacing-lg);
}
.cta-button {
display: inline-block;
background: var(--color-primary);
color: var(--color-white);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--border-radius-sm);
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
}
.cta-button:hover {
background: var(--color-primary-dark);
}
/* ===========================================
FOOTER
=========================================== */
.afh-footer {
background: var(--color-footer);
color: var(--color-white);
padding: var(--spacing-xl);
text-align: center;
font-family: var(--font-body);
}
.afh-footer p {
margin: var(--spacing-sm) 0;
font-size: 0.9rem;
color: rgba(255,255,255,0.9);
}
.afh-footer a {
color: var(--color-accent);
text-decoration: none;
}
.afh-footer a:hover {
color: var(--color-white);
}
/* ===========================================
BACK TO TOP BUTTON
=========================================== */
.afh-back-top-btn {
position: fixed;
bottom: 80px;
right: 30px;
width: 50px;
height: 50px;
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
box-shadow: var(--shadow-md);
transition: all 0.3s;
z-index: 999;
}
.afh-back-top-btn:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 900px) {
.afh-sidebar {
width: 100%;
height: auto;
position: relative;
top: 0;
}
.afh-main-container {
margin-left: 0;
}
.afh-hero h1 {
font-size: 2rem;
}
.afh-metrics {
gap: var(--spacing-md);
}
.afh-metric {
min-width: 100px;
padding: 0.75rem var(--spacing-md);
}
.afh-metric-number {
font-size: 1.8rem;
}
.afh-answer-section {
padding: var(--spacing-lg);
}
.afh-answers {
padding: var(--spacing-xl) var(--spacing-md);
}
}
@media (max-width: 768px) {
.afh-hero {
min-height: var(--hero-min-height-mobile);
}
.afh-navbar {
padding: 0 var(--spacing-md);
}
.afh-navbar-links {
display: none;
}
}
--------------------------------------------------------------------------------
FILE: nsg_variables.css
--------------------------------------------------------------------------------
/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_variables.css
Purpose: CSS custom properties for all NSG sites
Location: /var/www/html/nsg_standards/css/
Copy to: /var/www/html/[project]/static/css/
INSTRUCTIONS FOR AI:
- Do NOT edit this file to fix styling issues
- Create a project-specific variables file (e.g., qplex_variables.css)
- Import project variables AFTER this file to override colors
- See NSG_SITE_GUIDE.md for usage examples
COLOR SELECTION:
- Use coolors.co, color.adobe.com, or paletton.com to generate palettes
- Pick colors for each category below
- The user selects colors, not AI
COLOR PLACEMENT:
- Sidebar: Complementary/accent color (sets mood, not dominant)
- Navbar: Can match sidebar or be darker variant
- Content: Neutral (white/cream) for readability
- Primary: Headings, links, buttons, accordion headers
- Accent: CTAs, highlights, special callouts
===========================================================================
2025-12-19 v1.0 - Initial creation
2025-12-19 v1.1 - Added sidebar color category, Georgia font default
===========================================================================
*/
:root {
/* ===========================================
COLORS - Override these in project file
=========================================== */
/* Navbar & Footer - black/dark gray (frames the page) */
--color-navbar: #2f2f2f; /* Dark gray */
--color-navbar-border: #1a1a1a; /* Black border */
--color-footer: #1a1a1a; /* Black */
/* Sidebar - complementary/accent color (sets mood) */
--color-sidebar: #8c4f55; /* Burgundy - Refuge default */
--color-sidebar-dark: #722f37; /* Darker for hover/active */
--color-sidebar-light: #a05d65; /* Lighter for borders */
/* Primary - headings, links, accordion headers */
--color-primary: #2b6777; /* Teal - content accent */
--color-primary-dark: #1e4a4a; /* Hover/active states */
--color-primary-light: #52ab98; /* Highlights */
/* Secondary - borders, panel backgrounds */
--color-secondary: #d4e8ed; /* Light teal-gray */
--color-secondary-light: #f5f9fa; /* Panel backgrounds */
--color-secondary-dark: #5a7a8a; /* Muted text */
/* Accent - CTAs, special highlights */
--color-accent: #d4a574; /* Gold/sand */
/* Neutrals - content areas */
--color-white: #ffffff;
--color-bg: #f8f9fa; /* Page background */
--color-content: #ffffff; /* Content section background */
--color-text: #333333; /* Body text */
--color-text-light: #666666; /* Secondary text */
--color-border: #e2e8f0; /* Default borders */
/* ===========================================
TYPOGRAPHY - Georgia (elegant, no loading)
=========================================== */
--font-heading: 'Georgia', 'Times New Roman', serif;
--font-body: 'Georgia', 'Times New Roman', serif;
--font-size-base: 1rem;
--font-size-small: 0.85rem;
--font-size-large: 1.15rem;
--line-height-base: 1.6;
--line-height-tight: 1.3;
/* ===========================================
LAYOUT DIMENSIONS
=========================================== */
--sidebar-width: 220px;
--navbar-height: 60px;
--content-max-width: 1000px;
--content-padding: 2rem;
/* ===========================================
HERO SECTION
=========================================== */
--hero-min-height: 70vh;
--hero-min-height-mobile: 50vh;
/* ===========================================
IMAGES
=========================================== */
--image-default-width: 500px;
--image-expanded-width: 90vw;
--image-expanded-max-width: 1200px;
--image-expanded-max-height: 90vh;
/* ===========================================
SPACING
=========================================== */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
/* ===========================================
BORDERS & RADIUS
=========================================== */
--border-radius-sm: 4px;
--border-radius-md: 6px;
--border-radius-lg: 8px;
--border-width: 1px;
--border-accent-width: 4px;
/* ===========================================
SHADOWS
=========================================== */
--shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
--shadow-md: 0 4px 8px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 16px rgba(0,0,0,0.12);
}
--------------------------------------------------------------------------------
FILE: optimization.css
--------------------------------------------------------------------------------
/*
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/static/css/optimization.css
Type: CSS Stylesheet (Standalone)
Purpose: Styles for Optimization page - 4-level accordions, image expand
Route: /optimization
Template: templates/optimization.html
TUTORIAL:
This CSS is self-contained. It duplicates some NSG standards intentionally
for portability. Load AFTER nsg_variables.css to inherit color scheme.
Accordion Hierarchy (4 levels):
.accordion-group - Level 1: Dark header (group name)
.accordion-pillar - Level 2: Medium header (pillar name)
.accordion-detail - Level 3: Light header (detail topic)
.accordion-spec - Level 4: Minimal header (specifications)
Panel Classes (match accordion levels):
.panel-group - Contains pillar accordions
.panel-pillar - Contains detail accordions or content
.panel-detail - Contains spec accordions or content
.panel-spec - Contains final content
Image Classes:
.opt-image - Standard image, click to expand
.opt-image.expanded - Full-screen overlay state
To customize colors: Override CSS variables in project_variables.css
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
2025-12-26 v1.1 - Fixed header width and spacing
2025-12-26 v1.2 - Removed custom header, using afh-hero pattern instead
===========================================================================
*/
/* ===========================================
PAGE HEADER
Uses afh-hero from nsg_layout.css with gradient background
See _intro.html for implementation pattern
=========================================== */
/* ===========================================
LEVEL 1: GROUP HEADERS (darkest)
Building Envelope, Mechanical, Electrical, etc.
=========================================== */
.accordion-group {
background: var(--color-primary-dark, #1a365d);
color: var(--color-white, #ffffff);
cursor: pointer;
padding: 18px 20px;
width: 100%;
border: none;
border-radius: 6px;
text-align: left;
font-family: var(--font-body, Georgia, serif);
font-size: 1.15rem;
font-weight: 600;
margin-top: 15px;
transition: background-color 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-group:first-of-type {
margin-top: 0;
}
.accordion-group:hover {
background: var(--color-primary, #2c5282);
}
.accordion-group::after {
content: '+';
font-size: 1.3rem;
font-weight: bold;
}
.accordion-group.active::after {
content: '−';
}
.accordion-group.active {
background: var(--color-primary, #2c5282);
border-radius: 6px 6px 0 0;
}
.panel-group {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: var(--color-secondary-light, #f5f9fa);
border: 1px solid var(--color-border, #e2e8f0);
border-top: none;
border-radius: 0 0 6px 6px;
padding: 0 15px;
border-left: 4px solid var(--color-primary-dark, #1a365d);
}
.panel-group.open {
max-height: 8000px;
padding: 15px;
}
/* ===========================================
LEVEL 2: PILLAR HEADERS (medium)
SIP Panels, Mini-Splits, 24V Lighting, etc.
=========================================== */
.accordion-pillar {
background: var(--color-secondary, #d4e8ed);
color: var(--color-primary-dark, #1a365d);
cursor: pointer;
padding: 14px 18px;
width: 100%;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 6px;
text-align: left;
font-family: var(--font-body, Georgia, serif);
font-size: 1.05rem;
font-weight: 600;
margin-top: 10px;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-pillar:first-of-type {
margin-top: 0;
}
.accordion-pillar:hover {
background: var(--color-secondary-dark, #b8d4db);
border-color: var(--color-primary-light, #4a7c9b);
}
.accordion-pillar::after {
content: '+';
font-size: 1.1rem;
color: var(--color-primary, #2c5282);
}
.accordion-pillar.active::after {
content: '−';
color: var(--color-white, #ffffff);
}
.accordion-pillar.active {
background: var(--color-primary, #2c5282);
color: var(--color-white, #ffffff);
border-radius: 6px 6px 0 0;
}
.panel-pillar {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: var(--color-white, #ffffff);
border: 1px solid var(--color-border, #e2e8f0);
border-top: none;
border-radius: 0 0 6px 6px;
padding: 0 18px;
}
.panel-pillar.open {
max-height: 6000px;
padding: 18px;
}
/* ===========================================
LEVEL 3: DETAIL HEADERS (light)
Wall Assembly, Installation, Specifications
=========================================== */
.accordion-detail {
background: var(--color-white, #ffffff);
color: var(--color-primary, #2c5282);
cursor: pointer;
padding: 12px 16px;
width: 100%;
border: 1px solid var(--color-secondary, #d4e8ed);
border-radius: 4px;
text-align: left;
font-family: var(--font-body, Georgia, serif);
font-size: 1rem;
font-weight: 500;
margin-top: 8px;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-detail:first-of-type {
margin-top: 0;
}
.accordion-detail:hover {
background: var(--color-secondary-light, #f5f9fa);
border-color: var(--color-primary-light, #4a7c9b);
}
.accordion-detail::after {
content: '+';
font-size: 1rem;
color: var(--color-primary-light, #4a7c9b);
}
.accordion-detail.active::after {
content: '−';
}
.accordion-detail.active {
background: var(--color-secondary-light, #f5f9fa);
border-color: var(--color-primary, #2c5282);
border-radius: 4px 4px 0 0;
}
.panel-detail {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: var(--color-bg, #f8f9fa);
border: 1px solid var(--color-secondary, #d4e8ed);
border-top: none;
border-radius: 0 0 4px 4px;
padding: 0 16px;
}
.panel-detail.open {
max-height: 4000px;
padding: 16px;
}
/* ===========================================
LEVEL 4: SPEC HEADERS (minimal)
R-Values, Part Numbers, Dimensions
=========================================== */
.accordion-spec {
background: transparent;
color: var(--color-text, #333333);
cursor: pointer;
padding: 10px 14px;
width: 100%;
border: 1px dashed var(--color-border, #e2e8f0);
border-radius: 4px;
text-align: left;
font-family: var(--font-body, Georgia, serif);
font-size: 0.95rem;
font-weight: 500;
margin-top: 6px;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-spec:first-of-type {
margin-top: 0;
}
.accordion-spec:hover {
background: var(--color-white, #ffffff);
border-style: solid;
}
.accordion-spec::after {
content: '+';
font-size: 0.9rem;
color: var(--color-text-light, #666666);
}
.accordion-spec.active::after {
content: '−';
}
.accordion-spec.active {
background: var(--color-white, #ffffff);
border-style: solid;
border-radius: 4px 4px 0 0;
}
.panel-spec {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: var(--color-white, #ffffff);
border: 1px solid var(--color-border, #e2e8f0);
border-top: none;
border-radius: 0 0 4px 4px;
padding: 0 14px;
}
.panel-spec.open {
max-height: 2000px;
padding: 14px;
}
/* ===========================================
PANEL TYPOGRAPHY
=========================================== */
.panel-group p,
.panel-pillar p,
.panel-detail p,
.panel-spec p {
margin: 0.8rem 0;
color: var(--color-text, #333333);
line-height: 1.7;
font-family: var(--font-body, Georgia, serif);
font-size: 1rem;
}
.panel-group p:first-child,
.panel-pillar p:first-child,
.panel-detail p:first-child,
.panel-spec p:first-child {
margin-top: 0;
}
.panel-group ul,
.panel-pillar ul,
.panel-detail ul,
.panel-spec ul {
margin: 0.8rem 0;
padding-left: 1.5rem;
color: var(--color-text, #333333);
}
.panel-group li,
.panel-pillar li,
.panel-detail li,
.panel-spec li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
/* ===========================================
IMAGES - Click to Expand
=========================================== */
.opt-image {
display: block;
max-width: 100%;
height: auto;
margin: 1rem auto;
border-radius: 8px;
border: 1px solid var(--color-border, #e2e8f0);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.opt-image:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.opt-image.expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 95vw;
max-height: 95vh;
object-fit: contain;
z-index: 9999;
border: none;
border-radius: 8px;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85);
}
.opt-image-caption {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-light, #666666);
font-style: italic;
margin-top: 0.5rem;
}
/* ===========================================
HIGHLIGHT BOX
=========================================== */
.opt-highlight {
background: linear-gradient(135deg, var(--color-secondary-light, #f5f9fa), var(--color-secondary, #d4e8ed));
border-left: 4px solid var(--color-primary, #2c5282);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 0 6px 6px 0;
}
.opt-highlight p {
margin: 0.5rem 0;
}
.opt-highlight p:first-child {
margin-top: 0;
}
.opt-highlight p:last-child {
margin-bottom: 0;
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 768px) {
.optimization-header {
padding: 3rem 1.5rem;
}
.optimization-header h1 {
font-size: 2rem;
}
.optimization-header p {
font-size: 1.05rem;
}
.accordion-group {
padding: 14px 16px;
font-size: 1.05rem;
}
.accordion-pillar {
padding: 12px 14px;
font-size: 1rem;
}
.accordion-detail {
padding: 10px 12px;
font-size: 0.95rem;
}
.accordion-spec {
padding: 8px 10px;
font-size: 0.9rem;
}
}
--------------------------------------------------------------------------------
FILE: procurement.css
--------------------------------------------------------------------------------
/*
CHANGE LOG
File: nsg_standards/static/css/procurement.css
Document Type: CSS Stylesheet (NSG Standards Master)
Purpose: Styling for procurement systems page
Deploy To: [site]/static/css/procurement.css
Route: /procurement
Context: Professional presentation of proprietary procurement system
HTML Template: templates/procurement.html
Dependencies: nsg_accordion.js (for image expand)
Version History:
2025-12-26 v1.2 - Changed .system-image to .feature-image for nsg_accordion.js compatibility
2025-12-26 v1.1 - Extracted from embedded styles for NSG standards compliance
2025-11-26 v1.0 - Initial creation embedded in template
*/
/* Hero Section */
.wbs-hero {
min-height: 80vh;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 40px 20px;
}
.wbs-hero h1 {
font-size: 3.5rem;
font-weight: 400;
text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
margin-bottom: 20px;
max-width: 800px;
}
.wbs-hero p {
font-size: 1.6rem;
font-weight: 300;
margin-bottom: 30px;
max-width: 600px;
}
/* Links */
.section-link {
color: #007bff;
text-decoration: none;
font-weight: 500;
}
.section-link:hover { text-decoration: underline; }
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover { color: #ccc; }
/* Orientation Section */
.orientation-section {
background: #f8f9fa;
border-left: 4px solid #28a745;
padding: 20px;
margin: 20px 0;
border-radius: 4px;
}
/* Highlight Boxes */
.highlight-box {
background: #f8f9fa;
border-left: 5px solid #007bff;
padding: 2rem;
margin: 2rem 0;
border-radius: 0 8px 8px 0;
}
.highlight-box p {
margin-bottom: 0.8rem;
color: #495057;
}
.highlight-box p:last-child { margin-bottom: 0; }
.highlight-box strong { color: #1a365d; }
.cost-savings-box {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-left: 5px solid #28a745;
padding: 2rem;
margin: 2rem 0;
border-radius: 0 8px 8px 0;
}
/* Content Typography */
.afh-answer-section h2 {
color: #1a365d;
font-size: 2.2rem;
font-weight: 500;
margin-bottom: 2rem;
text-align: center;
letter-spacing: 0.3px;
font-family: 'Georgia', 'Times New Roman', serif;
}
.afh-answer-section h3 {
color: #2c5282;
font-size: 1.6rem;
margin: 2rem 0 1.5rem 0;
font-weight: 500;
font-family: 'Georgia', 'Times New Roman', serif;
}
.afh-answer-section p {
margin-bottom: 1.2rem;
color: #495057;
line-height: 1.8;
font-size: 1.05rem;
font-family: 'Georgia', 'Times New Roman', serif;
}
/* Image Styling */
.feature-image {
text-align: center;
margin: 3rem 0;
}
.feature-image img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
border: 2px solid #e9ecef;
cursor: pointer;
transition: transform 0.3s ease;
}
/* Expanded image - full screen overlay */
.feature-image img.expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 95vw;
max-height: 95vh;
z-index: 9999;
border-radius: 8px;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
}
.feature-image p {
margin-top: 1rem;
font-style: italic;
color: #6c757d;
font-size: 1rem;
}
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 3rem 0;
}
.image-grid .feature-image { margin: 0; }
/* Flowchart */
.flowchart {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 2rem;
margin: 3rem 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.flow-step {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
text-align: center;
position: relative;
}
.flow-step.design {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-color: #2196f3;
}
.flow-step.pricing {
background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
border-color: #ff9800;
}
.flow-step.sourcing {
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
border-color: #4caf50;
}
.flow-step.control {
background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
border-color: #e91e63;
}
.flow-arrow {
text-align: center;
font-size: 1.5rem;
color: #6c757d;
margin: 0.5rem 0;
}
.flow-step h4 {
color: #1a365d;
font-weight: 600;
margin-bottom: 0.5rem;
}
.flow-step p {
margin-bottom: 0;
font-size: 0.95rem;
}
/* Benefits Grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.benefit-card {
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 2rem;
transition: box-shadow 0.3s;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.benefit-card:hover {
box-shadow: 0 4px 16px rgba(26,54,93,0.15);
transform: translateY(-2px);
}
.benefit-title {
font-weight: 600;
color: #1a365d;
margin-bottom: 1rem;
font-size: 1.3rem;
font-family: 'Georgia', 'Times New Roman', serif;
}
.benefit-description {
color: #495057;
line-height: 1.7;
font-size: 1rem;
}
/* Qualification Section */
.qualification-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 4rem 0;
margin: 3rem 0;
border-radius: 8px;
}
.qualification-section h2 {
color: #1a365d;
text-align: center;
margin-bottom: 1rem;
font-size: 2rem;
}
.qualification-section > p {
text-align: center;
color: #666;
font-style: italic;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.requirements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.requirement-category {
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.requirement-category h4 {
color: #1a365d;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.requirement-category ul {
margin: 0;
padding-left: 1.5rem;
}
.requirement-category li {
margin-bottom: 0.5rem;
color: #495057;
line-height: 1.6;
}
/* Container and Section */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.section {
padding: 4rem 0;
border-bottom: 1px solid #e9ecef;
}
.section:last-child { border-bottom: none; }
.section h2 {
color: #1a365d;
font-size: 2rem;
font-weight: 500;
margin-bottom: 2.5rem;
text-align: center;
letter-spacing: 0.3px;
font-family: 'Georgia', 'Times New Roman', serif;
}
/* Responsive */
@media (max-width: 768px) {
.benefits-grid, .requirements-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.image-grid { grid-template-columns: 1fr; gap: 2rem; }
.benefit-card, .requirement-category { padding: 1.5rem; }
.wbs-hero h1 { font-size: 2.5rem; }
.container { padding: 0 1rem; }
.section { padding: 3rem 0; }
.afh-answer-section h2 { font-size: 1.8rem; }
.flowchart { padding: 1.5rem; }
}
================================================================================
SECTION 3: JS FILES
================================================================================
--------------------------------------------------------------------------------
FILE: nsg_accordion.js
--------------------------------------------------------------------------------
/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_accordion.js
Purpose: Accordion toggle and image expand functionality
Location: /var/www/html/nsg_standards/js/
Copy to: /var/www/html/[project]/static/js/
INSTRUCTIONS FOR AI:
- Do NOT edit this file
- This handles all accordion and image interactions
- Works with: .accordion, .accordion-section, .panel, .panel-section
- Works with: .image-row img, .feature-image img, .panel-image
BEHAVIOR:
- Click accordion → toggles .active on button, .open on panel
- Nested accordions → parent panels stay open
- Click image → toggles .expanded class (full-screen view)
- Click expanded image → closes back to normal
===========================================================================
2025-12-19 v1.0 - Initial creation from Leaf River
===========================================================================
*/
document.addEventListener('DOMContentLoaded', function() {
// ===========================================
// ACCORDION TOGGLE
// Handles both .accordion and .accordion-section
// Keeps parent panels open for nested accordions
// ===========================================
var accordions = document.querySelectorAll('.accordion, .accordion-section');
accordions.forEach(function(btn) {
btn.addEventListener('click', function(e) {
// Prevent event from bubbling to parent accordions
e.stopPropagation();
// Toggle active state on button
this.classList.toggle('active');
// Toggle open state on next sibling panel
var panel = this.nextElementSibling;
if (panel && (panel.classList.contains('panel') || panel.classList.contains('panel-section'))) {
panel.classList.toggle('open');
}
// Keep parent panels open (for nested accordions)
var parent = this.parentElement;
while (parent) {
if (parent.classList.contains('panel') || parent.classList.contains('panel-section')) {
parent.classList.add('open');
}
parent = parent.parentElement;
}
});
});
// ===========================================
// IMAGE EXPAND
// Click image to view full size
// Click again to close
// ===========================================
var images = document.querySelectorAll('.image-row img, .feature-image img, .panel-image');
images.forEach(function(img) {
img.addEventListener('click', function(e) {
e.stopPropagation();
this.classList.toggle('expanded');
});
});
// Close expanded image when clicking outside
document.addEventListener('click', function(e) {
var expandedImages = document.querySelectorAll('.expanded');
expandedImages.forEach(function(img) {
if (!img.contains(e.target)) {
img.classList.remove('expanded');
}
});
});
// Close expanded image with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
var expandedImages = document.querySelectorAll('.expanded');
expandedImages.forEach(function(img) {
img.classList.remove('expanded');
});
}
});
});
--------------------------------------------------------------------------------
FILE: optimization.js
--------------------------------------------------------------------------------
/*
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/static/js/optimization.js
Type: JavaScript Module (Standalone)
Purpose: 4-level accordion toggle + image click-to-expand
Route: /optimization
Template: templates/optimization.html
CSS: static/css/optimization.css
TUTORIAL:
This script handles two functions:
1. Accordion toggle for 4 nested levels
2. Image expand/collapse on click
Accordion Classes (add to buttons):
.accordion-group - Level 1 toggle
.accordion-pillar - Level 2 toggle
.accordion-detail - Level 3 toggle
.accordion-spec - Level 4 toggle
Panel Classes (add to content divs immediately after buttons):
.panel-group - Level 1 content
.panel-pillar - Level 2 content
.panel-detail - Level 3 content
.panel-spec - Level 4 content
Image Class:
.opt-image - Any image with this class becomes expandable
How it works:
- Click accordion button → toggles .active on button, .open on next panel
- Click image → toggles .expanded class for fullscreen view
- Click expanded image or press Escape → closes expanded view
To add new accordion level: Add class pair to ACCORDION_CLASSES array
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
*/
(function() {
'use strict';
// Accordion class pairs: [buttonClass, panelClass]
const ACCORDION_CLASSES = [
['accordion-group', 'panel-group'],
['accordion-pillar', 'panel-pillar'],
['accordion-detail', 'panel-detail'],
['accordion-spec', 'panel-spec']
];
/**
* Initialize all accordions
* Attaches click handlers to all accordion buttons
*/
function initAccordions() {
ACCORDION_CLASSES.forEach(function(pair) {
var buttonClass = pair[0];
var buttons = document.querySelectorAll('.' + buttonClass);
buttons.forEach(function(button) {
button.addEventListener('click', function() {
toggleAccordion(this);
});
});
});
console.log('DEBUG: optimization.js - Accordions initialized');
}
/**
* Toggle accordion open/closed
* @param {HTMLElement} button - The clicked accordion button
*/
function toggleAccordion(button) {
var panel = button.nextElementSibling;
if (!panel) {
console.log('ERROR: optimization.js - No panel found after button');
return;
}
var isActive = button.classList.contains('active');
if (isActive) {
// Close this accordion
button.classList.remove('active');
panel.classList.remove('open');
} else {
// Open this accordion
button.classList.add('active');
panel.classList.add('open');
}
}
/**
* Initialize image expand functionality
* Attaches click handlers to all .opt-image elements
*/
function initImageExpand() {
var images = document.querySelectorAll('.opt-image');
images.forEach(function(img) {
img.addEventListener('click', function(e) {
e.stopPropagation();
toggleImageExpand(this);
});
});
// Close on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeAllExpandedImages();
}
});
// Close on click outside (on the overlay)
document.addEventListener('click', function(e) {
var expanded = document.querySelector('.opt-image.expanded');
if (expanded && e.target !== expanded) {
closeAllExpandedImages();
}
});
console.log('DEBUG: optimization.js - Image expand initialized');
}
/**
* Toggle image expanded state
* @param {HTMLElement} img - The clicked image
*/
function toggleImageExpand(img) {
if (img.classList.contains('expanded')) {
img.classList.remove('expanded');
} else {
// Close any other expanded images first
closeAllExpandedImages();
img.classList.add('expanded');
}
}
/**
* Close all expanded images
*/
function closeAllExpandedImages() {
var expanded = document.querySelectorAll('.opt-image.expanded');
expanded.forEach(function(img) {
img.classList.remove('expanded');
});
}
/**
* Initialize everything when DOM is ready
*/
function init() {
initAccordions();
initImageExpand();
console.log('DEBUG: optimization.js - Module initialized');
}
// Run on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
================================================================================
SECTION 4: BASE TEMPLATE
================================================================================
--------------------------------------------------------------------------------
FILE: base_nosidebar.html
--------------------------------------------------------------------------------
<!--
CHANGE LOG
File: /templates/base_nosidebar.html
Document Type: Jinja2 Base Template
Purpose: Base layout WITHOUT sidebar for credentials and landing pages
Main App: Any NSG site
Routes: /credentials, landing pages
CSS Dependencies: nsg_variables.css, [project]_variables.css, nsg_layout.css, base_nosidebar.css
Related Templates: partials/_navbar.html, partials/_footer.html
Version History:
2025-12-26 v1.0 - Initial creation
DEPLOYMENT: Copy to target site, update project_css block if needed
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}North Star Group{% endblock %}</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/favicon.svg') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/nsg_variables.css') }}">
{% block project_css %}
<!-- Override this block with site-specific variables CSS -->
{% endblock %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/nsg_layout.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/base_nosidebar.css') }}">
{% block styles %}{% endblock %}
</head>
<body>
{% include 'partials/_navbar.html' %}
<main>
{% block content %}{% endblock %}
</main>
{% include 'partials/_footer.html' %}
{% block scripts %}{% endblock %}
</body>
</html>
================================================================================
SECTION 5: PAGE TEMPLATES
================================================================================
--------------------------------------------------------------------------------
FILE: credentials.html
--------------------------------------------------------------------------------
<!--
CHANGE LOG
File: /templates/credentials.html
Document Type: Jinja2 Template
Purpose: Professional credentials page with team bios and patents
Main App: qplex_app.py
Blueprint: front_blueprint.py
Route: /credentials
CSS Dependencies: credentials.css
Related Templates: base.html, team_partials/, credentials_partials/
Version History:
2025-12-26 v1.2 - Switched to base.html with afh-hero pattern
2025-12-26 v1.1 - Fixed container wrapping for 80% width header
2025-12-26 v1.0 - Initial creation
-->
{% extends "base.html" %}
{% block title %}Professional Credentials - North Star Group{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/credentials.css') }}">
{% endblock %}
{% block content %}
<main style="padding: 40px;">
<!-- Hero Section - matching procurement/optimization pattern -->
<section class="afh-hero" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('{{ url_for('static', filename='images/hero.png') }}'); min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px;">
<h1 style="color: white; font-family: Georgia, serif; font-size: 3.5rem; font-weight: 400; font-style: italic; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); margin-bottom: 1rem; text-align: center;">Professional Credentials</h1>
<p style="color: white; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 300; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); max-width: 700px; text-align: center; line-height: 1.7;">Three decades of real estate development experience, patented building technologies, and specialized expertise in affordable housing finance.</p>
</section>
<div class="afh-answers">
<section class="afh-answer-section">
{% include 'team_partials/_team_section.html' %}
</section>
{% include 'credentials_partials/_metrics_bar.html' %}
<section class="afh-answer-section">
{% include 'credentials_partials/_technical_capabilities.html' %}
</section>
<section class="afh-answer-section">
{% include 'credentials_partials/_patents_grid.html' %}
</section>
</div>
<div class="container">
<div class="contact-credentials">
<h2>Start the Conversation</h2>
<p>Discuss your project requirements and explore how our team can support your development goals.</p>
<a href="{{ url_for('contact.contact_form') }}" class="contact-cta">Contact Us</a>
</div>
</div>
</main>
{% endblock %}
--------------------------------------------------------------------------------
FILE: optimization.html
--------------------------------------------------------------------------------
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization.html
Type: Jinja2 Template
Purpose: Optimization page - integrated building systems that reduce cost
App: qplex_app.py
Blueprint: front_blueprint.py
Route: /optimization
CSS: static/css/optimization.css
JS: static/js/optimization.js
TUTORIAL:
This template assembles optimization content from partials. Each site
includes only the groups that apply to their project.
Available Partials (in optimization_partials/):
_intro.html - Page header and introduction
_building_envelope.html - SIPs, Insulation, Windows & Doors
_mechanical.html - Plumbing, Tankless, Mini-Splits
_electrical.html - 24V Lighting, Metering, Centralized Chase
_automation.html - Smart Home, Energy Monitoring
_site.html - Water Management, Grading & Drainage
To customize for a site:
1. Copy this file to your site's templates/
2. Comment out or remove {% include %} lines for groups that don't apply
3. Add route in front_blueprint.py: @front_bp.route('/optimization')
Example - urban infill (skip site work):
{% include 'optimization_partials/_intro.html' %}
{% include 'optimization_partials/_building_envelope.html' %}
{% include 'optimization_partials/_mechanical.html' %}
{% include 'optimization_partials/_electrical.html' %}
{% include 'optimization_partials/_automation.html' %}
{# skip _site.html - not applicable #}
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
-->
{% extends "base.html" %}
{% block title %}Optimization - Q-Plex{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/optimization.css') }}">
{% endblock %}
{% block content %}
<main>
{% include 'optimization_partials/_intro.html' %}
<div class="afh-answers">
<section class="afh-answer-section">
{% include 'optimization_partials/_building_envelope.html' %}
{% include 'optimization_partials/_mechanical.html' %}
{% include 'optimization_partials/_electrical.html' %}
{% include 'optimization_partials/_automation.html' %}
{% include 'optimization_partials/_site.html' %}
</section>
</div>
</main>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/optimization.js') }}"></script>
{% endblock %}
--------------------------------------------------------------------------------
FILE: procurement.html
--------------------------------------------------------------------------------
<!--
===========================================================================
CHANGE LOG
File: nsg_standards/templates/procurement.html
Type: Jinja2 Template - Procurement Page
Purpose: Proprietary procurement system presentation
Deploy To: [site]/templates/procurement.html
Route: /procurement
===========================================================================
2025-12-26 v1.0 - Initial NSG standards version extending base.html
===========================================================================
-->
{% extends "base.html" %}
{% block title %}Procurement Systems{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/procurement.css') }}">
{% endblock %}
{% block content %}
<main style="padding: 40px;">
<!-- Hero Section - matching qplex style -->
<section class="afh-hero" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('{{ url_for('static', filename='images/hero.png') }}'); min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px;">
<h1 style="color: white; font-family: Georgia, serif; font-size: 3.5rem; font-weight: 400; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); margin-bottom: 1rem; text-align: center;">Proprietary Procurement Systems</h1>
<p style="color: white; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 300; text-shadow: 2px 2px 4px rgba(0,0,0,0.8);">Advanced Component-Based Pricing & Direct Sourcing Platform</p>
</section>
<!-- Content Sections -->
<div class="afh-answers">
<section class="afh-answer-section">
<h2>Sophisticated Cost Control Through Integrated Procurement</h2>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/projectSourcing.png') }}"
alt="Project Sourcing Portal Interface">
<p>Project Sourcing Portal - Welcome Interface for Supplier Qualification and Bidding</p>
</div>
<p>North Star Group has developed a proprietary procurement system that eliminates traditional general contractor markup by implementing component-level pricing and direct supplier relationships. This systematic approach provides unprecedented cost control and transparency for large-scale development projects.</p>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/supplierPortal.png') }}"
alt="Supplier Portal Qualification System">
<p>Supplier Qualification Portal - Professional Standards and Documentation Requirements</p>
</div>
<div class="cost-savings-box">
<p><strong>Meaningful Cost Advantages:</strong> By pricing every individual component and sourcing directly from qualified suppliers, we reduce overall development costs. While direct procurement requires dedicated management, the net savings typically runs approximately 5% of total development cost. For a $9 million project, this represents savings of approximately $450,000 in direct cost reduction.</p>
</div>
<p>Our system integrates seamlessly with our component management platform, providing real-time cost tracking, supplier performance monitoring, and quality assurance throughout the procurement and construction process.</p>
</section>
<section class="afh-answer-section">
<h2>Component-Level Design Integration</h2>
<div class="image-grid">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/addComponent1.png') }}"
alt="Component Addition Interface">
<p>Component Management - Adding New Components with Detailed Specifications</p>
</div>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/componentQrCode.png') }}"
alt="Component QR Code System">
<p>QR Code Integration - Component Tracking and Digital Documentation</p>
</div>
</div>
<p>Once architectural and engineering designs are finalized, each component is catalogued with detailed specifications, performance requirements, and QR code tracking. This systematic approach ensures complete traceability from design through installation.</p>
<div class="image-grid">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/componentTree.png') }}"
alt="Component Tree Structure">
<p>Component Tree - Hierarchical Organization of Project Components</p>
</div>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/componentTree2.png') }}"
alt="Component Tree Dropdown Menu">
<p>Component Selection - Dropdown Interface for Systematic Component Organization</p>
</div>
</div>
</section>
<section class="afh-answer-section">
<h2>Advanced Cost Analysis & Modeling</h2>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/costCalculator.png') }}"
alt="Cost Calculator Interface">
<p>Cost Calculator - Component-Level Pricing with Low/Expected/High Scenarios</p>
</div>
<p>Each component is individually priced with comprehensive cost modeling that includes materials, labor, general conditions, and contingency factors. This granular approach provides unprecedented transparency and enables precise budget control.</p>
<div class="image-grid">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/VerticalCostAnalysis.png') }}"
alt="Vertical Cost Analysis">
<p>Vertical Cost Analysis - GC Percentage Configuration and Cost Modeling</p>
</div>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/costSummary.png') }}"
alt="Cost Summary Analysis">
<p>Cost Summary - Comprehensive Analysis Including Labor, Conditions, and Contingency</p>
</div>
</div>
</section>
<section class="afh-answer-section">
<h2>Development Project Integration</h2>
<div class="image-grid">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/DevelopmentProjects.png') }}"
alt="Development Projects Overview">
<p>Development Projects - Portfolio Management Across Multiple Projects</p>
</div>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/BasicProjectInfo.png') }}"
alt="Basic Project Information">
<p>Project Information - Comprehensive Project Setup and Configuration</p>
</div>
</div>
<p>The procurement system integrates with comprehensive project development workflows, enabling cost control from initial planning through construction completion. Multiple projects share component databases and supplier relationships for maximum efficiency.</p>
<div class="image-grid">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/softCosts.png') }}"
alt="Soft Costs Analysis">
<p>Soft Costs Analysis - Professional Fees, Legal, Permits, and Development Costs</p>
</div>
<div class="feature-image">
<img src="{{ url_for('static', filename='images/procurement_images/developmentCosts.png') }}"
alt="Development Cost Summary">
<p>Development Cost Summary - Complete Financial Analysis with Scenario Modeling</p>
</div>
</div>
</section>
<section class="afh-answer-section">
<h2>Procurement Process Flow</h2>
<div class="flowchart">
<div class="flow-step design">
<h4>1. Design Finalization</h4>
<p>Architectural and engineering designs are finalized with detailed component specifications and performance requirements</p>
</div>
<div class="flow-arrow">⬇</div>
<div class="flow-step pricing">
<h4>2. Component-Level Pricing</h4>
<p>Each component is individually priced with low/expected/high estimates. Groups of related components are bundled for efficiency while maintaining cost transparency</p>
</div>
<div class="flow-arrow">⬇</div>
<div class="flow-step sourcing">
<h4>3. Direct Supplier Sourcing</h4>
<p>Qualified suppliers submit bids through our supplier portal for individual components or logical component groups. Multiple sourcing options ensure competitive pricing</p>
</div>
<div class="flow-arrow">⬇</div>
<div class="flow-step control">
<h4>4. End-to-End Cost Control</h4>
<p>Direct supplier relationships eliminate general contractor markup. Real-time tracking and quality assurance maintain budget integrity throughout construction</p>
</div>
</div>
</section>
<section class="afh-answer-section">
<h2>Competitive Advantages</h2>
<div class="benefits-grid">
<div class="benefit-card">
<div class="benefit-title">Transparent Pricing</div>
<div class="benefit-description">Every component cost is visible and justified. No hidden markups or surprise cost escalations. Investors and stakeholders can see exactly where every dollar is allocated throughout the project.</div>
</div>
<div class="benefit-card">
<div class="benefit-title">Direct Supplier Relationships</div>
<div class="benefit-description">Established partnerships with qualified suppliers provide better pricing, faster delivery, and enhanced quality control. Long-term relationships improve project outcomes and reduce procurement risk.</div>
</div>
<div class="benefit-card">
<div class="benefit-title">Scalable System</div>
<div class="benefit-description">Component database and supplier network scale across multiple projects. Pricing intelligence and supplier performance data improve with each project, reducing costs and enhancing delivery reliability.</div>
</div>
<div class="benefit-card">
<div class="benefit-title">Quality Assurance Integration</div>
<div class="benefit-description">Supplier qualifications and performance tracking ensure consistent quality. Digital documentation and QR code tracking provide complete material and installation traceability.</div>
</div>
<div class="benefit-card">
<div class="benefit-title">Risk Mitigation</div>
<div class="benefit-description">Multiple qualified suppliers for each component category prevent single-source dependencies. Detailed specifications and performance requirements reduce quality and compatibility risks.</div>
</div>
<div class="benefit-card">
<div class="benefit-title">Financial Control</div>
<div class="benefit-description">Real-time cost tracking and automated reporting provide continuous budget visibility. Variance analysis and change order management maintain financial discipline throughout construction.</div>
</div>
</div>
</section>
<section class="afh-answer-section qualification-section">
<h2>Supplier Qualification Requirements</h2>
<p style="text-align: center; color: #666; font-style: italic; margin-bottom: 2rem;">Professional standards equivalent to Alabama Institute of Architects qualification requirements ensure supplier capability and reliability</p>
<div class="requirements-grid">
<div class="requirement-category">
<h4>Technical Qualifications</h4>
<ul>
<li>Minimum 5 years experience in relevant construction or manufacturing sector</li>
<li>Documented project portfolio with similar scope and complexity</li>
<li>Current professional licensing and certifications as applicable</li>
<li>Quality management system certification (ISO 9001 or equivalent preferred)</li>
<li>Technical capability demonstration for specialized components</li>
</ul>
</div>
<div class="requirement-category">
<h4>Financial Requirements</h4>
<ul>
<li>Audited financial statements for past 3 years</li>
<li>Minimum bonding capacity appropriate to project scope</li>
<li>Credit references from major suppliers and financial institutions</li>
<li>Payment performance history with trade references</li>
<li>Insurance coverage meeting project requirements</li>
</ul>
</div>
<div class="requirement-category">
<h4>Performance Standards</h4>
<ul>
<li>Demonstrated on-time delivery performance (>95% on schedule)</li>
<li>Quality performance metrics with less than 2% defect rates</li>
<li>Safety record meeting or exceeding industry standards</li>
<li>Environmental compliance and sustainability certifications</li>
<li>Communication and project management capability</li>
</ul>
</div>
<div class="requirement-category">
<h4>Documentation & Compliance</h4>
<ul>
<li>Complete project references with contact information</li>
<li>Regulatory compliance documentation and permits</li>
<li>Product specifications and technical data sheets</li>
<li>Warranty terms and service support capabilities</li>
<li>Digital integration capability for project management systems</li>
</ul>
</div>
</div>
</section>
<section class="afh-answer-section">
<h2>Implementation & Integration</h2>
<div class="orientation-section">
<h3>Platform Integration</h3>
<p><strong>Seamless Workflow:</strong> The procurement system integrates directly with our component management platform, cost tracking systems, and project management workflows. Suppliers access the portal to view specifications, submit bids, track orders, and manage delivery schedules through a unified interface.</p>
<p>Real-time data synchronization ensures that pricing updates, delivery schedules, and quality metrics are immediately available to project management teams, enabling proactive decision-making and rapid response to changing conditions.</p>
</div>
<div class="highlight-box">
<p><strong>Proven Results:</strong> This procurement approach has been successfully implemented across our affordable housing portfolio, demonstrating consistent cost savings of 15-25% compared to traditional general contractor models. Quality metrics show improvement in both material consistency and installation performance through direct supplier accountability.</p>
<p>The system scales efficiently from single-family residential to large institutional projects, with component database and supplier network providing increasing value as project volume grows.</p>
</div>
</section>
</div>
</main>
{% endblock %}
================================================================================
SECTION 6: PARTIALS
================================================================================
--- credentials_partials ---
FILE: credentials_partials/_metrics_bar.html
<!--
===========================================================================
CHANGE LOG
File: partials/_metrics_bar.html
Type: HTML Partial - Team Metrics Summary
Purpose: Key statistics showing team credentials at a glance
Parent: credentials.html
===========================================================================
2025-12-26 v1.0 - Created from Refuge/Enugu pattern (Walmart removed pending Clint coordination)
===========================================================================
NOTE: Walmart metric removed pending coordination with Clint Canal.
Can be added back: <div class="stat-item"><div class="stat-number">120+</div><div class="stat-label">Walmart Supercenters</div></div>
===========================================================================
-->
<div class="section">
<div class="container">
<h2>Team Credentials</h2>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number">18M+</div>
<div class="stat-label">SF Developed (Team)</div>
</div>
<div class="stat-item">
<div class="stat-number">9</div>
<div class="stat-label">US Patents (Granted)</div>
</div>
<div class="stat-item">
<div class="stat-number">100+</div>
<div class="stat-label">PHAs Served</div>
</div>
<div class="stat-item">
<div class="stat-number">$300M+</div>
<div class="stat-label">Loan Funding Experience</div>
</div>
</div>
</div>
</div>
FILE: credentials_partials/_patents_grid.html
<!--
===========================================================================
CHANGE LOG
File: partials/_patents_grid.html
Type: HTML Partial - Patent Portfolio Grid
Purpose: Display Michael Hoffman's 9 US patents
Parent: credentials.html (usually inside _technical_capabilities section)
===========================================================================
2025-12-26 v1.0 - Extracted from Refuge credentials
===========================================================================
-->
<h3 style="text-align: center; margin-top: 3rem; margin-bottom: 2rem;">U.S. Patent Portfolio</h3>
<p style="text-align: center; color: #6c757d; max-width: 800px; margin: 0 auto 2rem auto;">Michael Hoffman holds nine issued U.S. patents demonstrating the technical innovation capacity essential for developing resilient infrastructure.</p>
<div class="patents-grid">
<div class="patent-card">
<div class="patent-title">Inductive Heater for Fluids</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>10,560,984 B2</span>
<span class="label">Year:</span>
<span>2020</span>
<span class="label">Category:</span>
<span>Energy Systems</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US10560984B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Inductively Heated Tank Cars</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>10,525,988 B2</span>
<span class="label">Year:</span>
<span>2020</span>
<span class="label">Category:</span>
<span>Transportation</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US10525988B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Actuating Inductor Placement Assembly</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>10,556,601 B2</span>
<span class="label">Year:</span>
<span>2020</span>
<span class="label">Category:</span>
<span>Industrial Equipment</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US10556601B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Magnetic Closures for Pipe Insulation</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>10,197,210 B2</span>
<span class="label">Year:</span>
<span>2019</span>
<span class="label">Category:</span>
<span>Infrastructure</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US10197210B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Flow Balanced Frac Tank Farm</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>9,915,127 B2</span>
<span class="label">Year:</span>
<span>2018</span>
<span class="label">Category:</span>
<span>Fluid Management</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US9915127B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Pool/Large Tank/Pond Hub Exchanger</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>9,909,811 B2</span>
<span class="label">Year:</span>
<span>2018</span>
<span class="label">Category:</span>
<span>Water Systems</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US9909811B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Tank/Trailer Fluid Exchanger</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>9,920,605 B2</span>
<span class="label">Year:</span>
<span>2020</span>
<span class="label">Category:</span>
<span>Fluid Management</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US9920605B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Magnetic Insulation Clasps</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>9,868,268 B2</span>
<span class="label">Year:</span>
<span>2018</span>
<span class="label">Category:</span>
<span>Insulation Technology</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US9868268B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
<div class="patent-card">
<div class="patent-title">Pipe Insulation System</div>
<div class="patent-details">
<span class="label">Patent No:</span>
<span>9,574,696 B2</span>
<span class="label">Year:</span>
<span>2017</span>
<span class="label">Category:</span>
<span>Infrastructure</span>
<span class="label">Link:</span>
<a href="https://patents.google.com/patent/US9574696B2" target="_blank" class="patent-link">View Patent</a>
</div>
</div>
</div>
<p style="text-align: center; color: #6c757d; font-size: 0.95rem; margin-top: 3rem;">
<em>This patent portfolio demonstrates systematic innovation in building systems, energy efficiency, and infrastructure—the technical foundations required for delivering facilities that perform reliably while maintaining operational efficiency.</em>
</p>
FILE: credentials_partials/_project_story.html
<!--
===========================================================================
CHANGE LOG
File: partials/_project_story.html
Type: HTML Partial - TEMPLATE (requires customization)
Purpose: Project-specific story explaining the development vision
Parent: credentials.html
===========================================================================
2025-12-26 v1.0 - Template created with placeholder content
===========================================================================
INSTRUCTIONS:
This partial requires PROJECT-SPECIFIC content. Replace the placeholder
text below with content that explains:
1. What this specific project is about
2. Why it matters / the opportunity
3. What makes this development different
4. The vision and expected outcomes
Keep the structure (header, highlight-box) but replace all placeholder text.
===========================================================================
-->
<div class="section">
<div class="container">
<h2>Project Vision</h2>
<p>[PROJECT STORY COMING SOON - Replace this placeholder with 2-3 paragraphs explaining the specific project vision, opportunity, and context. What is this development? Why does it matter? What problem does it solve?]</p>
<h3>The Opportunity</h3>
<p>[Replace with specific opportunity description - market conditions, timing, policy changes, community needs, etc.]</p>
<div class="highlight-box">
<p><strong>What Makes This Different:</strong> [Replace with 2-3 sentences explaining the unique value proposition of this specific project. What sets it apart from typical developments?]</p>
</div>
<h3>Expected Outcomes</h3>
<p>[Replace with specific outcomes - units delivered, jobs created, community impact, economic development, etc.]</p>
</div>
</div>
FILE: credentials_partials/_role_matrix.html
<!--
===========================================================================
CHANGE LOG
File: partials/_role_matrix.html
Type: HTML Partial - TEMPLATE (requires customization)
Purpose: Project-specific team role assignments showing who does what
Parent: credentials.html
===========================================================================
2025-12-26 v1.0 - Template created with placeholder content
===========================================================================
INSTRUCTIONS:
This partial requires PROJECT-SPECIFIC content. Replace the placeholder
text below with content that explains each team member's specific role
on THIS project. This shows clients how the team integrates.
Format: For each relevant team member, describe their specific
responsibilities and deliverables on this project.
===========================================================================
-->
<div class="section">
<div class="container">
<h2>Team Roles on This Project</h2>
<p style="text-align: center; max-width: 800px; margin: 0 auto 3rem auto;">[ROLE MATRIX COMING SOON - Replace with intro paragraph explaining how the team integrates on this specific project.]</p>
<div class="capability-grid">
<div class="capability-item">
<h4>Project Leadership</h4>
<p><strong>[Name]</strong> serves as [role]. Responsibilities include [specific tasks and deliverables for this project].</p>
</div>
<div class="capability-item">
<h4>Development Coordination</h4>
<p><strong>[Name]</strong> leads [aspect]. Responsibilities include [specific tasks and deliverables for this project].</p>
</div>
<div class="capability-item">
<h4>Construction Management</h4>
<p><strong>[Name]</strong> provides [services]. Responsibilities include [specific tasks and deliverables for this project].</p>
</div>
<div class="capability-item">
<h4>Financial Structuring</h4>
<p><strong>[Name]</strong> handles [aspect]. Responsibilities include [specific tasks and deliverables for this project].</p>
</div>
</div>
<div class="highlight-box">
<p><strong>Integrated Delivery:</strong> [Replace with 2-3 sentences explaining how these roles work together on this specific project to deliver results.]</p>
</div>
</div>
</div>
FILE: credentials_partials/_technical_capabilities.html
<!--
===========================================================================
CHANGE LOG
File: partials/_technical_capabilities.html
Type: HTML Partial - Technical Capabilities Grid
Purpose: 4-column grid showing technical innovation areas
Parent: credentials.html
===========================================================================
2025-12-26 v1.0 - Extracted from Refuge credentials (refuge-specific content)
===========================================================================
NOTE: This version uses Refuge/church-specific content. For other projects,
copy this file and modify the capability items to match project context.
===========================================================================
-->
<div class="methodology-section">
<div class="container">
<h2>Technical Capabilities & Innovations</h2>
<p style="text-align: center; max-width: 800px; margin: 0 auto 3rem auto;">Our patent portfolio demonstrates the technical innovation capacity required for delivering high-performance facilities. These technologies represent years of engineering refinement focused on making buildings more resilient, efficient, and cost-effective.</p>
<div class="capability-grid">
<div class="capability-item">
<h4>Storm-Resistant Building Systems</h4>
<p>Structural Insulated Panel construction with embedded reinforcement provides superior wind resistance and impact protection while reducing construction time. ICC 500/FEMA P-361 compliant design ensures life safety during extreme weather events.</p>
</div>
<div class="capability-item">
<h4>Energy Independence</h4>
<p>Integrated solar roofing, battery storage, and backup generators provide 72+ hour electrical independence during emergencies. Efficient 24V DC lighting systems reduce power requirements while maintaining safety.</p>
</div>
<div class="capability-item">
<h4>Water & Life Safety</h4>
<p>Emergency water storage, backup well systems, and large-capacity waste holding tanks ensure sanitation during prolonged emergencies. Geothermal plenum systems maintain livable temperatures even during power outages.</p>
</div>
<div class="capability-item">
<h4>Emergency Communications</h4>
<p>Integrated ham radio systems, backup internet connectivity, and steeple-mounted antenna arrays ensure communication capability when commercial systems fail. Critical for coordinating with emergency services.</p>
</div>
</div>
</div>
</div>
--- optimization_partials ---
FILE: optimization_partials/_automation.html
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization_partials/_automation.html
Type: HTML Partial (Jinja2)
Purpose: Integrated Automation - Smart Home Platform, Energy Monitoring
Parent Template: optimization.html
Route: /optimization
TUTORIAL:
This partial is one of 5 optimization groups. Sites include only
applicable groups. This group contains 2 pillar accordions.
Structure (4 levels available):
Level 1: Group header (accordion-group) - "Integrated Automation"
Level 2: Pillar (accordion-pillar) - "Smart Home Platform", etc.
Level 3: Detail (accordion-detail) - for future expansion
Level 4: Specification (accordion-spec) - for future expansion
Current implementation uses Levels 1-2. Levels 3-4 ready for expansion.
To add detail level: Nest accordion-detail + panel-detail inside panel-pillar
Images: Use class="opt-image" for click-to-expand functionality.
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
-->
<!-- GROUP: Integrated Automation -->
<button class="accordion-group">Integrated Automation</button>
<div class="panel-group">
<!-- PILLAR: Smart Home Platform -->
<button class="accordion-pillar">Smart Home Platform</button>
<div class="panel-pillar">
<p>Unified control system for lighting, HVAC, and access. Local processing hub—operates without internet dependency.</p>
<p>Pre-wired during construction. Cat6 to device locations. Wireless mesh for sensors and switches. Open protocol for future expansion.</p>
<p>Resident app for in-unit control. Property management dashboard for common areas and vacant unit monitoring.</p>
</div>
<!-- PILLAR: Energy Monitoring -->
<button class="accordion-pillar">Energy Monitoring</button>
<div class="panel-pillar">
<p>Real-time consumption tracking per circuit. Identifies equipment issues before failure. Validates efficiency measures.</p>
<p>Current transformers on main feeds and major circuits. Data logged locally. Accessible via property management interface.</p>
<p>Alerts for unusual consumption patterns—water heater cycling excessively, HVAC running continuously. Maintenance dispatched proactively.</p>
</div>
</div>
FILE: optimization_partials/_building_envelope.html
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization_partials/_building_envelope.html
Type: HTML Partial (Jinja2)
Purpose: Building Envelope optimization - SIPs, Insulation, Fenestration
Parent Template: optimization.html
Route: /optimization
TUTORIAL:
This partial is one of 5 optimization groups. Sites include only
applicable groups. This group contains 3 pillar accordions.
Structure (4 levels available):
Level 1: Group header (accordion-group) - "Building Envelope"
Level 2: Pillar (accordion-pillar) - "SIP Panels", "Insulation", etc.
Level 3: Detail (accordion-detail) - "Wall Assembly", "Installation"
Level 4: Specification (accordion-spec) - "R-Values", "Dimensions"
Current implementation uses Levels 1-2. Levels 3-4 ready for expansion.
To add detail level: Nest accordion-detail + panel-detail inside panel-pillar
To add spec level: Nest accordion-spec + panel-spec inside panel-detail
Images: Use class="opt-image" for click-to-expand functionality.
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
-->
<!-- GROUP: Building Envelope -->
<button class="accordion-group">Building Envelope</button>
<div class="panel-group">
<!-- PILLAR: SIP Panels -->
<button class="accordion-pillar">SIP Panels</button>
<div class="panel-pillar">
<p>Structural Insulated Panels combine framing, sheathing, and insulation into a single component. Factory-cut panels arrive ready to assemble.</p>
<p>Faster installation than stick framing. Fewer trades on site. Tighter building envelope with continuous insulation—no thermal bridging through studs.</p>
<p>Wall thickness options from 4.5" to 8.25" depending on climate zone and R-value requirements.</p>
</div>
<!-- PILLAR: Insulation -->
<button class="accordion-pillar">Insulation</button>
<div class="panel-pillar">
<p>SIP construction eliminates the need for cavity insulation. The foam core provides continuous R-value across the entire wall assembly.</p>
<p>EPS (Expanded Polystyrene) core is standard. R-value approximately 4 per inch. A 6.5" SIP wall delivers R-24 with no thermal breaks.</p>
<p>Roof panels available for conditioned attic assemblies. Eliminates attic insulation labor and HVAC ductwork losses.</p>
</div>
<!-- PILLAR: Windows & Doors -->
<button class="accordion-pillar">Windows & Doors</button>
<div class="panel-pillar">
<p>Openings are factory-cut into SIP panels. Headers integrated into panel design—no separate header framing required.</p>
<p>Window and door units install directly into rough openings. Flashing details simplified by continuous exterior sheathing.</p>
<p>Specify low-E glazing and thermally broken frames to maintain envelope performance at penetrations.</p>
</div>
</div>
FILE: optimization_partials/_electrical.html
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization_partials/_electrical.html
Type: HTML Partial (Jinja2)
Purpose: Electrical optimization - Low Voltage Lighting, Metering, Chase
Parent Template: optimization.html
Route: /optimization
TUTORIAL:
This partial is one of 5 optimization groups. Sites include only
applicable groups. This group contains 3 pillar accordions.
Structure (4 levels available):
Level 1: Group header (accordion-group) - "Electrical"
Level 2: Pillar (accordion-pillar) - "24V DC Lighting", etc.
Level 3: Detail (accordion-detail) - for future expansion
Level 4: Specification (accordion-spec) - for future expansion
Current implementation uses Levels 1-2. Levels 3-4 ready for expansion.
To add detail level: Nest accordion-detail + panel-detail inside panel-pillar
Images: Use class="opt-image" for click-to-expand functionality.
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
-->
<!-- GROUP: Electrical -->
<button class="accordion-group">Electrical</button>
<div class="panel-group">
<!-- PILLAR: 24V DC Lighting -->
<button class="accordion-pillar">24V DC Lighting</button>
<div class="panel-pillar">
<p>Low voltage LED lighting on 24V DC circuits. Lighter gauge wire—14 AWG replaces 12 AWG. Lower material cost per run.</p>
<p>Class 2 wiring classification. Simplified installation requirements. Standard USB-C power delivery compatibility for fixtures.</p>
<p>Central DC power supply per zone. Dimming via PWM signal—no special dimmers required. Integrates with automation systems.</p>
</div>
<!-- PILLAR: Metering & Panel Design -->
<button class="accordion-pillar">Metering & Panel Design</button>
<div class="panel-pillar">
<p>Individual utility metering per unit. Residents pay their own consumption. Eliminates ratio utility billing disputes.</p>
<p>Panel location accessible without entering units. Grouped in common electrical room where possible. Simplifies meter reading and maintenance.</p>
<p>Main panels sized for future EV charging capacity. Stub conduit to parking areas during construction—cheaper than retrofit.</p>
</div>
<!-- PILLAR: Centralized Chase -->
<button class="accordion-pillar">Centralized Chase</button>
<div class="panel-pillar">
<p>Vertical utility chase groups electrical, plumbing, and communications in one accessible location. Runs floor-to-floor through stacked units.</p>
<p>Chase accessible from common area or closet—no entry into occupied units for most repairs. Reduces maintenance disruption.</p>
<p>Fire-stopping at each floor penetration. Chase walls rated per code. Access panels at each floor for service.</p>
</div>
</div>
FILE: optimization_partials/_intro.html
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization_partials/_intro.html
Type: HTML Partial (Jinja2)
Purpose: Hero header for Optimization page - uses afh-hero with image
Parent Template: optimization.html
Route: /optimization
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
2025-12-26 v1.2 - Added hero.png background image like procurement
===========================================================================
-->
<!-- Hero Section - matching procurement pattern exactly -->
<section class="afh-hero" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('{{ url_for('static', filename='images/hero.png') }}'); min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px;">
<h1 style="color: white; font-family: Georgia, serif; font-size: 3.5rem; font-weight: 400; font-style: italic; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); margin-bottom: 1rem; text-align: center;">Optimization</h1>
<p style="color: white; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 300; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); max-width: 700px; text-align: center; line-height: 1.7;">Integrated building systems engineered to reduce construction cost and improve occupant experience.</p>
</section>
FILE: optimization_partials/_mechanical.html
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization_partials/_mechanical.html
Type: HTML Partial (Jinja2)
Purpose: Mechanical optimization - Plumbing, Water Heating, HVAC
Parent Template: optimization.html
Route: /optimization
TUTORIAL:
This partial is one of 5 optimization groups. Sites include only
applicable groups. This group contains 3 pillar accordions.
Structure (4 levels available):
Level 1: Group header (accordion-group) - "Mechanical"
Level 2: Pillar (accordion-pillar) - "Manifold Plumbing", etc.
Level 3: Detail (accordion-detail) - for future expansion
Level 4: Specification (accordion-spec) - for future expansion
Current implementation uses Levels 1-2. Levels 3-4 ready for expansion.
To add detail level: Nest accordion-detail + panel-detail inside panel-pillar
Images: Use class="opt-image" for click-to-expand functionality.
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
-->
<!-- GROUP: Mechanical -->
<button class="accordion-group">Mechanical</button>
<div class="panel-group">
<!-- PILLAR: Manifold Plumbing -->
<button class="accordion-pillar">Manifold Plumbing</button>
<div class="panel-pillar">
<p>Home-run PEX distribution from a central manifold to each fixture. Individual shutoffs at the manifold—no in-wall valves to access.</p>
<p>Continuous PEX runs with no fittings inside walls. Fewer leak points. Faster installation than copper branch-and-tee systems.</p>
<p>Manifold location in utility closet or mechanical room. Color-coded hot/cold lines. Each run labeled at manifold for troubleshooting.</p>
</div>
<!-- PILLAR: Tankless Water Heaters -->
<button class="accordion-pillar">Tankless Water Heaters</button>
<div class="panel-pillar">
<p>On-demand water heating eliminates standby losses from tank storage. Gas or electric units sized to fixture count and simultaneous use.</p>
<p>Wall-mounted units free floor space. Exterior venting for gas units. Electric units require dedicated circuit—verify panel capacity.</p>
<p>For multi-unit buildings, individual tankless heaters per unit eliminate shared hot water systems and sub-metering complexity.</p>
</div>
<!-- PILLAR: Mini-Split HVAC -->
<button class="accordion-pillar">Mini-Split HVAC</button>
<div class="panel-pillar">
<p>Ductless heat pump systems with individual zone control. One outdoor compressor serves multiple indoor heads.</p>
<p>No ductwork means no duct losses, no attic penetrations, no chase construction. Refrigerant lines route through small wall penetrations.</p>
<p>Each indoor head has independent temperature control. Occupants condition only the spaces they use. Heating and cooling from a single system.</p>
</div>
</div>
FILE: optimization_partials/_site.html
<!--
===========================================================================
CHANGE LOG
File: /var/www/html/qplex.nsgia.com/templates/optimization_partials/_site.html
Type: HTML Partial (Jinja2)
Purpose: Site & Utilities optimization - Water Management, Grading
Parent Template: optimization.html
Route: /optimization
TUTORIAL:
This partial is one of 5 optimization groups. Sites include only
applicable groups. This group contains 2 pillar accordions.
Skip this partial for:
- Urban infill with existing infrastructure
- Renovation projects
- Sites where grading is already complete
Structure (4 levels available):
Level 1: Group header (accordion-group) - "Site & Utilities"
Level 2: Pillar (accordion-pillar) - "Water Management", etc.
Level 3: Detail (accordion-detail) - for future expansion
Level 4: Specification (accordion-spec) - for future expansion
Current implementation uses Levels 1-2. Levels 3-4 ready for expansion.
To add detail level: Nest accordion-detail + panel-detail inside panel-pillar
Images: Use class="opt-image" for click-to-expand functionality.
===========================================================================
2025-12-26 v1.0 - Initial creation for qplex deployment
===========================================================================
-->
<!-- GROUP: Site & Utilities -->
<button class="accordion-group">Site & Utilities</button>
<div class="panel-group">
<!-- PILLAR: Water Management -->
<button class="accordion-pillar">Water Management</button>
<div class="panel-pillar">
<p>Stormwater detention sized to local requirements. Reduces downstream impact and may reduce utility connection fees.</p>
<p>Pervious surfaces where soil conditions allow. Reduces detention volume. Parking areas, walkways, and patios as infiltration zones.</p>
<p>Rain gardens and bioswales for quality treatment. Native plantings reduce irrigation demand. Low-maintenance landscaping.</p>
</div>
<!-- PILLAR: Grading & Drainage -->
<button class="accordion-pillar">Grading & Drainage</button>
<div class="panel-pillar">
<p>Balanced earthwork minimizes import/export. Cut from high areas fills low areas. Topsoil stripped and stockpiled for finish grading.</p>
<p>Positive drainage away from foundations. Minimum 6" drop in first 10 feet. Swales direct surface water to collection points.</p>
<p>Foundation drains to daylight or sump. Crawl space ventilation and moisture control. Vapor barrier on grade.</p>
</div>
</div>
--- team_partials ---
FILE: team_partials/_team_member_allen.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_allen.html
Type: HTML Partial - Team Member Card
Purpose: Les Allen Jr. bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Updated with full bio from modular.nsgia.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Les Allen Jr.</div>
<div class="team-title">CEO - The BlackStar Companies</div>
<div class="team-org"><em>BlackStar Construction (Tampa, Florida)</em></div>
<div class="team-tags">SIP MANUFACTURING • CONSTRUCTION SERVICES • CERTIFIED MBE/DBE</div>
<div class="team-description">
<p>Les Allen Jr. is the CEO and founder of The BlackStar Companies, which includes BlackStar Construction and BlackStar SIPs. Based in Tampa, Florida, the company specializes in construction services and structural insulated panel (SIP) manufacturing. BlackStar holds multiple certifications including SBA 8(a), HUBZone, MBE, and DBE status.</p>
</div>
</div>
FILE: team_partials/_team_member_day.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_day.html
Type: HTML Partial - Team Member Card
Purpose: Roland F. Day, II bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v1.0 - Created with full bio from modular.nsgia.com
===========================================================================
-->
<div class="team-member">
<div class="team-name">Roland F. Day, II, AIA, NOMA</div>
<div class="team-title">Campus Master Planner & Lead Architect</div>
<div class="team-org"><em>Preliminary Program – STEM + STEAM Focus</em></div>
<div class="team-tags">ARCHITECTURE • CAMPUS PLANNING • MIXED-USE DISTRICTS</div>
<div class="team-description">
<p>Roland F. Day, II, AIA, NOMA is an architect and campus-planning specialist with extensive experience developing large-scale higher-education environments, STEM/STEAM academic facilities, and integrated mixed-use districts. His work focuses on the early-stage program definition, spatial organization, and long-range physical planning needed to translate institutional vision into an implementable Master Plan.</p>
<p>Day's approach to the Eastern Regional University & Medical City project centers on establishing a complete, phased program for a 953-acre university district that will function not only as a campus but as a new city. His preliminary program addresses the full range of academic, residential, research, medical, recreational, and civic facilities required for a comprehensive institution.</p>
<p>Day's experience with complex, multidisciplinary projects makes him well suited to guide the framework for a university district of this magnitude.</p>
</div>
</div>
FILE: team_partials/_team_member_dowling.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_dowling.html
Type: HTML Partial - Team Member Card
Purpose: Tom Dowling bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Updated with full bio from modular.nsgia.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Tom Dowling</div>
<div class="team-title">CEO, Supreme Insulated Panel Systems</div>
<div class="team-org"><em>Civil Engineer & Manufacturing Innovator</em></div>
<div class="team-tags">SIP MANUFACTURING • HURRICANE-RATED CONSTRUCTION • PROPERTY DEVELOPMENT</div>
<div class="team-description">
<p>Tom Dowling is a civil engineer, developer, and manufacturing innovator with nearly five decades of construction experience. He currently serves as CEO of Supreme Insulated Panel Systems, producing high-performance Magnesium Oxide SIPs certified for hurricane resistance, fire safety, and net-negative carbon impact.</p>
<p>Tom began his career at The Whiting-Turner Contracting Company, managing $40M in highway and bridge projects. He went on to found Metropolitan Contracting Co., delivering over $120M in large-scale commercial, industrial, and hospitality construction.</p>
<p>Through Dowco Management Co., Tom owns and operates more than 920 residential units. His portfolio spans engineering, property development, and SIPs manufacturing. He brings to Serenity Village a rare depth of field experience, technical precision, and scalable production capabilities.</p>
</div>
</div>
FILE: team_partials/_team_member_hall.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_hall.html
Type: HTML Partial - Team Member Card
Purpose: Timothy V. Hall bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Updated with full bio from modular.nsgia.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Timothy V. Hall</div>
<div class="team-title">Construction Manager & Federal Estimator</div>
<div class="team-org"><em>Federal & Institutional Construction</em></div>
<div class="team-tags">COST ESTIMATING • QUALITY CONTROL • SAFETY MANAGEMENT</div>
<div class="team-description">
<p>Timothy V. Hall brings more than 40 years of experience in federal, institutional, and faith-based construction, with a professional background that spans HUD housing upgrades, U.S. Army Reserve facility improvements, GSA building work, and VA Hospital modernization.</p>
<p>Tim Hall has long served in roles requiring precise cost estimating, contractor oversight, and schedule management. He is a certified Construction Quality Control (CQC) Manager and a certified Safety Officer, ensuring that all field work aligns with federal construction requirements, ICC standards, and the complex documentation demands associated with public-sector facilities.</p>
<p>Within the Eastern Regional University & Medical City project, Hall's role is to provide cost-integrity, constructability review, and field-realism. His four decades of experience help ensure that design intent, budgeting, and construction sequencing are all aligned with what can actually be built under real conditions.</p>
</div>
</div>
FILE: team_partials/_team_member_hoffman.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_hoffman.html
Type: HTML Partial - Team Member Card
Purpose: Michael Hoffman bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Updated with full bio from modular.nsgia.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Michael Hoffman</div>
<div class="team-title">Founder & CEO</div>
<div class="team-org"><em>North Star Group, Inc. (Alabama)</em></div>
<div class="team-tags">REAL ESTATE DEVELOPMENT • MODULAR SYSTEMS • INSTITUTIONAL HOUSING STRATEGY</div>
<div class="team-description">
<p>Michael Hoffman is a U.S. real estate developer, inventor, and affordable-housing strategist with more than three decades of experience delivering complex commercial, residential, and mixed-use projects. As the founder and CEO of North Star Group, Inc., he leads initiatives that combine modular construction, structural insulated panel (SIP) technology, and disciplined financial modeling.</p>
<p>His patent portfolio includes more than a dozen U.S. patents in industrial heating, magnetic insulation, fluid-management systems, tank-farm engineering, and welding technology, demonstrating the systematic technical innovation essential for developing resilient infrastructure and advanced building systems.</p>
<p>Through North Star Group, Hoffman leads the design of sustainable, tech-enabled housing ecosystems integrating SIP-based construction, solar and load-control systems, site-scale rain-garden hydrology, and community-based education models.</p>
</div>
</div>
FILE: team_partials/_team_member_khader.html
<!--
===========================================================================
CHANGE LOG
File: partials/_team_member_khader.html
Type: HTML Partial - Team Member Card
Purpose: Amr Khader bio card for team grid
Parent: _team_section.html
===========================================================================
2025-12-26 v1.0 - Created from Refuge credentials
===========================================================================
-->
<div class="team-member">
<div class="team-name">Amr Khader</div>
<div class="team-title">Founder & CEO, BIDR Technologies, Inc.</div>
<div class="team-experience">Construction Estimating & Cost Optimization Expert</div>
<div class="team-description">
Specialized expertise in construction cost optimization through expert estimating services. BIDR Technologies serves healthcare, educational, government, and institutional sectors with data-driven bid leveling and procurement optimization. Extensive work with public institutions including Orange County Public Schools, Broward County, multiple Florida counties and municipalities. Deep understanding of public sector procurement requirements and grant-compliant construction budgeting.
</div>
</div>
FILE: team_partials/_team_member_maxwell.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_maxwell.html
Type: HTML Partial - Team Member Card
Purpose: Donald Maxwell bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Updated with full bio from modular.nsgia.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Donald Maxwell</div>
<div class="team-title">CEO, The Maxwell Organization</div>
<div class="team-org"><em>Real Estate & Housing Policy Executive</em></div>
<div class="team-tags">REO DISPOSITION • HOUSING POLICY • URBAN REVITALIZATION</div>
<div class="team-description">
<p>Donald Maxwell is a veteran real estate executive with over 30 years of national experience in REO disposition, housing policy, and urban revitalization. He currently serves as CEO of The Maxwell Organization, a minority-owned real estate consultancy specializing in the liquidation, marketing, and repositioning of residential, multifamily, commercial properties, and infill lots in distressed markets.</p>
<p>Prior to his current role, Donald held executive positions with MAT Consultant Group, Genesis Auction, Freddie Mac, and Fannie Mae. At Fannie Mae, he was responsible for designing multi-billion dollar initiatives to address underserved housing needs, expand affordable mortgage products, and support nonprofit and public partners nationally. His leadership helped generate over $4.5 billion in targeted loan production and national REO sales exceeding 21,000 properties annually.</p>
<p>Donald is also a sought-after speaker, a member of the NFL Alumni Association, and a long-time advocate for community-based investment. His leadership combines institutional fluency with a commitment to inclusive, ground-level impact.</p>
</div>
</div>
FILE: team_partials/_team_member_mckenzie.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_mckenzie.html
Type: HTML Partial - Team Member Card
Purpose: Elaine G. McKenzie bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v1.0 - Created with full bio from modular.nsgia.com
===========================================================================
-->
<div class="team-member">
<div class="team-name">Elaine G. McKenzie</div>
<div class="team-title">Chief Executive Officer</div>
<div class="team-org"><em>TMB Global News Network</em></div>
<div class="team-tags">MEDIA • EDUCATION • CULTURAL DEVELOPMENT</div>
<div class="team-description">
<p>Elaine G. McKenzie is the Chief Executive Officer of TMB Global News Network, the media, education, and cultural-development organization that serves as the parent institution for The Michigan Banner and the Michigan Banner Global Foundation. Under her leadership, TMB Global has expanded from its origins as a community publication into a multifaceted platform focused on regional development, cultural exchange, and African diaspora engagement.</p>
<p>McKenzie oversees a portfolio that includes digital media operations, nonprofit programming, international cultural initiatives, and the African Diaspora Institute (ADI). Her work includes advancing ADI's proposed Detroit and Johannesburg/Sandton campuses, supporting collaborations with entities such as the Nelson Mandela Foundation, UNESCO, and regional cultural and human-rights organizations.</p>
<p>McKenzie's leadership is characterized by a focus on inclusive development, long-term institutional capacity, and partnerships that bridge community needs with international opportunity.</p>
</div>
</div>
FILE: team_partials/_team_member_ofori.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_ofori.html
Type: HTML Partial - Team Member Card
Purpose: Dr. David Nana Ofori Jr. bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v1.0 - Created with full bio from modular.nsgia.com
===========================================================================
-->
<div class="team-member">
<div class="team-name">Dr. David Nana Ofori Jr.</div>
<div class="team-title">Founder & Project Visionary</div>
<div class="team-org"><em>Eastern Regional University & Medical City</em></div>
<div class="team-tags">PHYSICIAN • MEDICAL-BUSINESS EXECUTIVE • DIASPORA LEADER</div>
<div class="team-description">
<p>Dr. David Nana Ofori Jr. is a physician, medical-business executive, and diaspora leader combining U.S. health-care experience with Ghanaian traditional leadership, positioning him uniquely as founder and visionary of the proposed Eastern Regional University & Medical City project.</p>
<p>In the United States, Dr. Ofori has more than two decades' experience as an orthopedic, sports medicine, and rehabilitation clinician and administrator. Under his leadership, one of his practices generated over US$1.5 million in net profit annually, while improving access to specialized services for medically vulnerable groups.</p>
<p>Academically, Dr. Ofori holds advanced credentials—including a PhD in Occupational/Industrial Safety & Health—which reflect a combination of clinical, management, and safety-infrastructure expertise. On the Ghana side, he retains traditional titles and local heritage, giving him standing as a respected community leader in his home region.</p>
<p>For investors, Dr. Ofori represents both a credible project leader and a bridge between diaspora capital/know-how and local Ghanaian community structures.</p>
</div>
</div>
FILE: team_partials/_team_member_outten.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_outten.html
Type: HTML Partial - Team Member Card
Purpose: Dr. Donavan Outten bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v1.0 - Created with full bio from modular.nsgia.com
===========================================================================
-->
<div class="team-member">
<div class="team-name">Dr. Donavan Outten</div>
<div class="team-title">University President / Chief Academic Architect</div>
<div class="team-org"><em>Eastern Regional University Initiative (Ghana)</em></div>
<div class="team-tags">HIGHER EDUCATION LEADERSHIP • CURRICULUM DESIGN • MULTI-CAMPUS ADMINISTRATION</div>
<div class="team-description">
<p>Dr. Donavan Outten is the academic architect behind the establishment of an American-style university in Apedwa, Ghana. With more than twenty years of experience in U.S. higher education leadership, he provides the institutional backbone for a project intended to serve 5,000–6,000 students and operate as a long-term academic anchor for the region.</p>
<p>Dr. Outten has built and managed full academic portfolios including associate, bachelor's, and master's programs in business, psychology, agriculture, mining, technology, and applied sciences. He currently has a roster of approximately seventy faculty prepared to deploy to Ghana on semester- and year-based rotations.</p>
<p>For the Ghana campus, Dr. Outten's focus is to establish a true U.S. institution on African soil—not a satellite campus—with American curriculum, American faculty, and replication potential across South Africa, Nigeria, Kenya, and other regions.</p>
</div>
</div>
FILE: team_partials/_team_member_smith.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_smith.html
Type: HTML Partial - Team Member Card
Purpose: Jey Smith bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Updated with full bio from modular.nsgia.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Jey Smith</div>
<div class="team-title">Lead Developer & Project Implementation Director</div>
<div class="team-org"><em>North Star Group, Inc. (Alabama)</em></div>
<div class="team-tags">ENTREPRENEURSHIP • TELECOMMUNICATIONS • COMMUNITY DEVELOPMENT</div>
<div class="team-description">
<p>Jey Smith is the Lead Developer and principal implementation director for the Eastern Regional University & Medical City Development. As a partner at North Star Group, Inc., he coordinates the full development framework across land planning, stakeholder integration, engineering alignment, and multi-phase execution.</p>
<p>Smith brings more than fifteen years of experience in high-level telecommunications operations with Verizon Business/MCI, where he managed multimillion-dollar portfolios serving clients such as Sprint, T-Mobile, and Verizon. His fifteen years of military service further reinforce his structured operational style: disciplined planning, logistics awareness, and stable command-level decision-making.</p>
<p>In the Apedwa project, Smith functions as the coordination nucleus: synthesizing academic, medical, cultural, engineering, and community components into a unified development pathway.</p>
</div>
</div>
FILE: team_partials/_team_member_sovereign.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_sovereign.html
Type: HTML Partial - Team Member Card
Purpose: Sovereign AEC firm bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v1.0 - Created with full bio from modular.nsgia.com
===========================================================================
-->
<div class="team-member">
<div class="team-name">Sovereign AEC</div>
<div class="team-title">Architecture • Engineering • Construction Management</div>
<div class="team-org"><em>Detroit-based A/E/C Practice</em></div>
<div class="team-tags">COST ANALYSIS • FEDERAL STANDARDS • INTERNATIONAL PROJECTS</div>
<div class="team-description">
<p>Sovereign AEC is a Detroit-based architecture, engineering, and construction management practice with experience delivering cost-sensitive and technically complex institutional projects. The firm provides integrated A/E/C consulting services, including architectural design support, engineering analysis, construction cost modeling, and owner-side technical review.</p>
<p>For the Eastern Regional University & Medical City development, Sovereign AEC contributes early-stage construction cost analysis, benchmarking, and feasibility modeling. Their Ghana 2025 construction-cost assessment establishes a defensible baseline for commercial-grade construction, documenting market rates (~$192 per sq. ft.) using comparable high-profile benchmarks.</p>
<p>Sovereign AEC's involvement strengthens financial realism during pre-development, ensuring that architectural ambition is matched with accurate understanding of site conditions, cost exposures, and Ghana's regulatory environment.</p>
</div>
</div>
FILE: team_partials/_team_member_watkins.html
<!--
===========================================================================
CHANGE LOG
File: /templates/team_partials/_team_member_watkins.html
Type: HTML Partial - Team Member Card
Purpose: Paul Watkins Sr. bio card for team grid
Parent: _team_section.html
CSS: credentials.css (.team-member, .team-name, .team-title, .team-org,
.team-tags, .team-description)
===========================================================================
2025-12-26 v2.0 - Expanded with full bio from partnerwithpmw.com
2025-12-26 v1.0 - Initial creation
===========================================================================
-->
<div class="team-member">
<div class="team-name">Paul Watkins Sr.</div>
<div class="team-title">President</div>
<div class="team-org"><em>PMW Management Partners, Inc.</em></div>
<div class="team-tags">PHA TECHNICAL ASSISTANCE • DEVELOPMENT FINANCE • HUD COMPLIANCE</div>
<div class="team-description">
<p>Paul Watkins Sr. is President of PMW Management Partners, Inc., with 29 years of experience in residential and commercial development, complex finance structuring, financial analysis, underwriting, and market feasibility. He holds a B.S. in Finance from Hampton University and an MBA from the University of Maryland University College.</p>
<p>Prior to founding PMW, Watkins served as Director of Technical Assistance at Econometrica, Inc., where he led the Housing and Community Development Group. In this role he served as Senior Project Manager and Technical Lead on contracts and cooperative agreements for Public Housing Authorities across the country on behalf of HUD, leading teams in market analysis studies, strategic asset repositioning, and technical assistance for troubled, at-risk, and receivership PHAs.</p>
<p>Under a HUD contract with the Office of Capital Investments, Watkins provided financial analysis, risk mitigation strategies, and commercial finance underwriting evaluation for complex development and modernization transactions submitted by PHAs nationwide. His teams—ranging from two to ten technical experts—delivered capital fund planning, procurement guidance, PHA Board training, and HCV management.</p>
<p>Watkins is a recognized speaker and presenter at national conferences including the Public Housing Authorities Directors Association (PHADA) and the National Association of Housing and Redevelopment Officials (NAHRO).</p>
</div>
</div>
FILE: team_partials/_team_section.html
<!--
===========================================================================
CHANGE LOG
File: partials/_team_section.html
Type: HTML Partial - Team Section Container
Purpose: Leadership team section with intro paragraph and team grid
Parent: credentials.html or team.html
Includes: Individual _team_member_*.html partials
===========================================================================
2025-12-26 v1.0 - Extracted from Refuge credentials page
===========================================================================
USAGE INSTRUCTIONS:
- Include this partial in your credentials or team page
- Edit the intro paragraph to match project context
- Comment out team members not relevant to this project
- The highlight-box at bottom summarizes integrated expertise
===========================================================================
-->
<div class="section">
<div class="container">
<h2>Leadership & Development Team</h2>
<p style="text-align: center; max-width: 800px; margin: 0 auto 3rem auto;">Our team combines three decades of real estate development experience, patented building technologies, specialized expertise in public housing finance, and direct PHA operational experience. We bring the technical capability and industry knowledge required to deliver complex development projects.</p>
<div class="team-grid">
{% include 'team_partials/_team_member_hoffman.html' %}
{% include 'team_partials/_team_member_watkins.html' %}
{% include 'team_partials/_team_member_smith.html' %}
{% include 'team_partials/_team_member_maxwell.html' %}
{% include 'team_partials/_team_member_dowling.html' %}
{% include 'team_partials/_team_member_allen.html' %}
{% include 'team_partials/_team_member_hall.html' %}
<!-- {% include 'team_partials/_team_member_khader.html' %} -->
</div>
<div class="highlight-box">
<p><strong>Integrated Expertise:</strong> This team combines the essential elements for successful project delivery: development experience, financial structuring capability, advanced construction technology, manufacturing capacity, and on-ground execution. Unlike traditional models that require clients to coordinate multiple unrelated contractors, our integrated approach ensures seamless project delivery.</p>
</div>
</div>
</div>
================================================================================
END OF CONCATENATED FILES
================================================================================