2196 lines
70 KiB
HTML
2196 lines
70 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Hartfield Residence — Whole Home Renovation Proposal</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||
<style>
|
||
/* ═══════════════════════════════════════════════════════════════
|
||
HARTFIELD RESIDENCE — PROPOSAL STYLES
|
||
Color Palette: Deep Navy (#0B1426) + Gold (#C9A96E) + Cream (#F5F0E8)
|
||
═══════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
--navy: #0B1426;
|
||
--navy-light: #142038;
|
||
--navy-mid: #1A2A4A;
|
||
--gold: #C9A96E;
|
||
--gold-light: #D4BA85;
|
||
--gold-dark: #A8893F;
|
||
--cream: #F5F0E8;
|
||
--cream-dark: #E8E0D0;
|
||
--white: #FFFFFF;
|
||
--charcoal: #2C2C2C;
|
||
--text-light: #A0AABB;
|
||
--text-body: #CBD5E1;
|
||
--border: rgba(201, 169, 110, 0.15);
|
||
--border-strong: rgba(201, 169, 110, 0.3);
|
||
--shadow: 0 4px 30px rgba(0,0,0,0.3);
|
||
--shadow-lg: 0 20px 60px rgba(0,0,0,0.4);
|
||
--radius: 16px;
|
||
--radius-sm: 8px;
|
||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
font-size: 16px;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--navy);
|
||
color: var(--text-body);
|
||
line-height: 1.7;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── SCROLLBAR ── */
|
||
::-webkit-scrollbar { width: 8px; }
|
||
::-webkit-scrollbar-track { background: var(--navy); }
|
||
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 4px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
|
||
|
||
/* ── SELECTION ── */
|
||
::selection { background: var(--gold); color: var(--navy); }
|
||
|
||
/* ══════════════ NAVIGATION ══════════════ */
|
||
.nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
background: rgba(11, 20, 38, 0.85);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav.scrolled {
|
||
background: rgba(11, 20, 38, 0.97);
|
||
box-shadow: 0 4px 30px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.nav-inner {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 72px;
|
||
}
|
||
|
||
.nav-logo {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--gold);
|
||
letter-spacing: 0.05em;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-logo span { color: var(--text-light); font-weight: 400; }
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 0.25rem;
|
||
list-style: none;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-light);
|
||
text-decoration: none;
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
padding: 0.5rem 0.85rem;
|
||
border-radius: var(--radius-sm);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-links a:hover,
|
||
.nav-links a.active {
|
||
color: var(--gold);
|
||
background: rgba(201, 169, 110, 0.08);
|
||
}
|
||
|
||
.nav-actions {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-print {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1.25rem;
|
||
background: transparent;
|
||
border: 1px solid var(--gold);
|
||
color: var(--gold);
|
||
font-family: 'Inter', sans-serif;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-print:hover {
|
||
background: var(--gold);
|
||
color: var(--navy);
|
||
}
|
||
|
||
.mobile-toggle {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
color: var(--gold);
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ══════════════ HERO SECTION ══════════════ */
|
||
.hero {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 6rem 2rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(201, 169, 110, 0.06) 0%, transparent 70%),
|
||
radial-gradient(ellipse 60% 50% at 20% 80%, rgba(201, 169, 110, 0.04) 0%, transparent 60%),
|
||
radial-gradient(ellipse 60% 50% at 80% 80%, rgba(201, 169, 110, 0.04) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-bg-pattern {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(201, 169, 110, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(201, 169, 110, 0.03) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 900px;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1.5rem;
|
||
background: rgba(201, 169, 110, 0.08);
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 100px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.hero-badge::before {
|
||
content: '';
|
||
width: 6px;
|
||
height: 6px;
|
||
background: var(--gold);
|
||
border-radius: 50%;
|
||
animation: pulse-dot 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-dot {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.5; transform: scale(1.5); }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(2.8rem, 6vw, 5rem);
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
line-height: 1.1;
|
||
margin-bottom: 1rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: italic;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.hero-address {
|
||
font-size: 1.15rem;
|
||
color: var(--text-light);
|
||
font-weight: 300;
|
||
margin-bottom: 3rem;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.hero-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
max-width: 750px;
|
||
margin: 0 auto 3rem;
|
||
}
|
||
|
||
.hero-stat {
|
||
background: rgba(11, 20, 38, 0.8);
|
||
padding: 1.75rem 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-stat-value {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.hero-stat-label {
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--text-light);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hero-total {
|
||
margin-top: 2.5rem;
|
||
}
|
||
|
||
.hero-total-label {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--text-light);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.hero-total-amount {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(3rem, 7vw, 4.5rem);
|
||
font-weight: 800;
|
||
color: var(--white);
|
||
line-height: 1;
|
||
}
|
||
|
||
.hero-total-amount span {
|
||
color: var(--gold);
|
||
}
|
||
|
||
.hero-scroll-indicator {
|
||
position: absolute;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: var(--text-light);
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
.hero-scroll-indicator .arrow {
|
||
width: 1px;
|
||
height: 40px;
|
||
background: linear-gradient(to bottom, var(--gold), transparent);
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||
50% { transform: translateX(-50%) translateY(10px); }
|
||
}
|
||
|
||
/* ══════════════ SECTION STYLES ══════════════ */
|
||
.section {
|
||
padding: 6rem 2rem;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.section-number {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.75rem;
|
||
color: var(--gold);
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(2rem, 4vw, 3rem);
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
margin-bottom: 1rem;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 1.05rem;
|
||
color: var(--text-light);
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.section-divider {
|
||
width: 60px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||
margin: 1.5rem auto 0;
|
||
}
|
||
|
||
/* ══════════════ PROJECT OVERVIEW ══════════════ */
|
||
.overview-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.5rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.overview-card {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 2rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.overview-card:hover {
|
||
border-color: var(--border-strong);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.overview-card-icon {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.overview-card-label {
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--text-light);
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
|
||
.overview-card-value {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.2rem;
|
||
color: var(--white);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ══════════════ ROOM SECTIONS ══════════════ */
|
||
.room-section {
|
||
padding: 5rem 0;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.room-section:first-of-type {
|
||
border-top: none;
|
||
}
|
||
|
||
.room-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.room-layout.reverse {
|
||
direction: rtl;
|
||
}
|
||
|
||
.room-layout.reverse > * {
|
||
direction: ltr;
|
||
}
|
||
|
||
.room-image-container {
|
||
position: relative;
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
aspect-ratio: 4/3;
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.room-image-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border: 1px solid rgba(201, 169, 110, 0.15);
|
||
border-radius: var(--radius);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.room-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.room-image-container:hover .room-image {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.room-image-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 3rem;
|
||
}
|
||
|
||
.room-content {
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
.room-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.35rem 1rem;
|
||
background: rgba(201, 169, 110, 0.08);
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 100px;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.room-name {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 2.2rem;
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
margin-bottom: 0.75rem;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.room-budget-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.6rem 1.25rem;
|
||
background: rgba(201, 169, 110, 0.1);
|
||
border: 1px solid var(--gold-dark);
|
||
border-radius: var(--radius-sm);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.room-budget-badge .amount {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.room-budget-badge .pct {
|
||
font-size: 0.75rem;
|
||
color: var(--text-light);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.room-description {
|
||
color: var(--text-light);
|
||
font-size: 0.95rem;
|
||
margin-bottom: 2rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.scope-title {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--gold);
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.scope-title::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.scope-list {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.scope-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.75rem;
|
||
font-size: 0.88rem;
|
||
color: var(--text-body);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.scope-list li::before {
|
||
content: '✓';
|
||
color: var(--gold);
|
||
font-weight: 700;
|
||
font-size: 0.75rem;
|
||
margin-top: 0.2rem;
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--gold-dark);
|
||
border-radius: 4px;
|
||
background: rgba(201, 169, 110, 0.08);
|
||
}
|
||
|
||
.materials-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.material-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 0.75rem;
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.78rem;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.material-chip .dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--gold);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ══════════════ BUDGET SECTION ══════════════ */
|
||
.budget-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 3rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.budget-chart-wrap {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 2.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.budget-chart-wrap canvas {
|
||
max-height: 400px;
|
||
}
|
||
|
||
.budget-table-wrap {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.budget-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.budget-table th {
|
||
text-align: left;
|
||
padding: 1rem 1.5rem;
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--text-light);
|
||
font-weight: 600;
|
||
background: rgba(201, 169, 110, 0.05);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.budget-table td {
|
||
padding: 1rem 1.5rem;
|
||
font-size: 0.9rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.budget-table tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.budget-table .room-col { color: var(--white); font-weight: 500; }
|
||
.budget-table .amount-col {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
color: var(--gold);
|
||
font-weight: 500;
|
||
}
|
||
.budget-table .pct-col { color: var(--text-light); }
|
||
|
||
.budget-table .total-row td {
|
||
background: rgba(201, 169, 110, 0.08);
|
||
font-weight: 700;
|
||
border-top: 2px solid var(--gold-dark);
|
||
color: var(--white);
|
||
}
|
||
|
||
.budget-table .total-row .amount-col {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.budget-bar-section {
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.budget-bar-item {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.budget-bar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.budget-bar-label {
|
||
font-size: 0.85rem;
|
||
color: var(--white);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.budget-bar-amount {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.85rem;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.budget-bar-track {
|
||
height: 8px;
|
||
background: rgba(201, 169, 110, 0.1);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.budget-bar-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--gold-dark), var(--gold));
|
||
border-radius: 4px;
|
||
width: 0;
|
||
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
/* ══════════════ TIMELINE / GANTT ══════════════ */
|
||
.timeline-container {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 3rem;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.gantt {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
min-width: 800px;
|
||
}
|
||
|
||
.gantt-header {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
gap: 2rem;
|
||
padding-bottom: 1rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.gantt-weeks {
|
||
display: grid;
|
||
grid-template-columns: repeat(18, 1fr);
|
||
gap: 2px;
|
||
}
|
||
|
||
.gantt-week-label {
|
||
text-align: center;
|
||
font-size: 0.65rem;
|
||
color: var(--text-light);
|
||
font-weight: 500;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.gantt-row {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
gap: 2rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.gantt-task {
|
||
font-size: 0.85rem;
|
||
color: var(--white);
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.gantt-task-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.9rem;
|
||
background: rgba(201, 169, 110, 0.1);
|
||
border: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.gantt-bar-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(18, 1fr);
|
||
gap: 2px;
|
||
height: 36px;
|
||
}
|
||
|
||
.gantt-bar {
|
||
background: linear-gradient(90deg, var(--gold-dark), var(--gold));
|
||
border-radius: 6px;
|
||
position: relative;
|
||
opacity: 0;
|
||
animation: ganttSlide 0.8s ease-out forwards;
|
||
}
|
||
|
||
.gantt-bar::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 6px;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
|
||
}
|
||
|
||
@keyframes ganttSlide {
|
||
from { opacity: 0; transform: scaleX(0); transform-origin: left; }
|
||
to { opacity: 1; transform: scaleX(1); }
|
||
}
|
||
|
||
.gantt-empty {
|
||
background: transparent;
|
||
}
|
||
|
||
/* ══════════════ TEAM SECTION ══════════════ */
|
||
.team-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.team-card {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.team-card:hover {
|
||
border-color: var(--border-strong);
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.team-avatar {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.75rem;
|
||
background: rgba(201, 169, 110, 0.1);
|
||
border: 2px solid var(--border-strong);
|
||
}
|
||
|
||
.team-name {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.15rem;
|
||
color: var(--white);
|
||
font-weight: 600;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.team-role {
|
||
font-size: 0.8rem;
|
||
color: var(--gold);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.team-contact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.team-contact a,
|
||
.team-contact span {
|
||
font-size: 0.82rem;
|
||
color: var(--text-light);
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.team-contact a:hover { color: var(--gold); }
|
||
|
||
/* ══════════════ MATERIALS SPEC SHEET ══════════════ */
|
||
.spec-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.spec-card {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 2rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.spec-card:hover {
|
||
border-color: var(--border-strong);
|
||
}
|
||
|
||
.spec-card-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.1rem;
|
||
color: var(--white);
|
||
font-weight: 600;
|
||
margin-bottom: 1.25rem;
|
||
padding-bottom: 0.75rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: 0.6rem 0;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.spec-item:not(:last-child) {
|
||
border-bottom: 1px solid rgba(201, 169, 110, 0.06);
|
||
}
|
||
|
||
.spec-item-label {
|
||
font-size: 0.82rem;
|
||
color: var(--text-light);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.spec-item-value {
|
||
font-size: 0.82rem;
|
||
color: var(--white);
|
||
text-align: right;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ══════════════ WARRANTY SECTION ══════════════ */
|
||
.warranty-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.warranty-card {
|
||
background: var(--navy-light);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.warranty-card:hover {
|
||
border-color: var(--border-strong);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.warranty-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.warranty-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.1rem;
|
||
color: var(--white);
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.warranty-duration {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.85rem;
|
||
color: var(--gold);
|
||
font-weight: 500;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.warranty-desc {
|
||
font-size: 0.82rem;
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ══════════════ FOOTER ══════════════ */
|
||
.footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 4rem 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-logo {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 0.85rem;
|
||
color: var(--text-light);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.footer-disclaimer {
|
||
font-size: 0.75rem;
|
||
color: rgba(160, 170, 187, 0.5);
|
||
max-width: 600px;
|
||
margin: 1.5rem auto 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ══════════════ RESPONSIVE ══════════════ */
|
||
@media (max-width: 1024px) {
|
||
.room-layout,
|
||
.room-layout.reverse {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
direction: ltr;
|
||
}
|
||
|
||
.budget-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.overview-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.team-grid,
|
||
.warranty-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.spec-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-stats {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.nav-links { display: none; }
|
||
.mobile-toggle { display: block; }
|
||
|
||
.nav-links.open {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 72px;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(11, 20, 38, 0.98);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 1rem;
|
||
}
|
||
|
||
.overview-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.materials-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.team-grid,
|
||
.warranty-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.timeline-container {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.section {
|
||
padding: 4rem 1.25rem;
|
||
}
|
||
}
|
||
|
||
/* ══════════════ PRINT STYLES ══════════════ */
|
||
@media print {
|
||
.nav, .hero-scroll-indicator, .btn-print, .mobile-toggle { display: none !important; }
|
||
|
||
body {
|
||
background: white;
|
||
color: #333;
|
||
font-size: 11pt;
|
||
}
|
||
|
||
.hero {
|
||
min-height: auto;
|
||
padding: 2rem;
|
||
page-break-after: always;
|
||
}
|
||
|
||
.hero h1 { color: #0B1426; font-size: 2.5rem; }
|
||
.hero h1 em { color: #A8893F; }
|
||
.hero-badge { border-color: #ccc; color: #666; }
|
||
.hero-stat { background: #f8f8f8; }
|
||
.hero-stat-value { color: #A8893F; }
|
||
|
||
.section { padding: 2rem 0; }
|
||
.section-title { color: #0B1426; }
|
||
|
||
.room-section { page-break-inside: avoid; }
|
||
.room-name { color: #0B1426; }
|
||
.room-budget-badge { border-color: #ccc; }
|
||
|
||
.overview-card,
|
||
.team-card,
|
||
.spec-card,
|
||
.warranty-card,
|
||
.budget-table-wrap,
|
||
.budget-chart-wrap,
|
||
.timeline-container {
|
||
background: #f8f8f8;
|
||
border-color: #ddd;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.budget-table th { background: #eee; }
|
||
.budget-table .room-col { color: #333; }
|
||
.scope-list li { color: #444; }
|
||
.scope-list li::before { border-color: #999; color: #666; }
|
||
|
||
.gantt-bar { background: #A8893F !important; }
|
||
}
|
||
|
||
/* ══════════════ ANIMATIONS ══════════════ */
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
|
||
.fade-in.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.stagger-1 { transition-delay: 0.1s; }
|
||
.stagger-2 { transition-delay: 0.2s; }
|
||
.stagger-3 { transition-delay: 0.3s; }
|
||
.stagger-4 { transition-delay: 0.4s; }
|
||
.stagger-5 { transition-delay: 0.5s; }
|
||
.stagger-6 { transition-delay: 0.6s; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
NAVIGATION
|
||
════════════════════════════════════════════ -->
|
||
<nav class="nav" id="nav">
|
||
<div class="nav-inner">
|
||
<a href="#hero" class="nav-logo">Summit Ridge <span>× Elara</span></a>
|
||
<ul class="nav-links" id="navLinks">
|
||
<li><a href="#overview">Overview</a></li>
|
||
<li><a href="#kitchen">Kitchen</a></li>
|
||
<li><a href="#master-bath">Bath</a></li>
|
||
<li><a href="#exterior">Exterior</a></li>
|
||
<li><a href="#master-bed">Bedroom</a></li>
|
||
<li><a href="#living">Living</a></li>
|
||
<li><a href="#office">Office</a></li>
|
||
<li><a href="#budget">Budget</a></li>
|
||
<li><a href="#timeline">Timeline</a></li>
|
||
<li><a href="#team">Team</a></li>
|
||
</ul>
|
||
<div class="nav-actions">
|
||
<button class="btn-print" onclick="window.print()">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
||
Print
|
||
</button>
|
||
<button class="mobile-toggle" id="mobileToggle" onclick="document.getElementById('navLinks').classList.toggle('open')">☰</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
HERO SECTION
|
||
════════════════════════════════════════════ -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg-pattern"></div>
|
||
<div class="hero-content">
|
||
<div class="hero-badge">Residential Renovation Proposal</div>
|
||
<h1>The <em>Hartfield</em><br>Residence</h1>
|
||
<p class="hero-address">42 Meadowbrook Lane, Asheville, NC 28801</p>
|
||
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">3,200</div>
|
||
<div class="hero-stat-label">Square Feet</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">4 / 2.5</div>
|
||
<div class="hero-stat-label">Bed / Bath</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">18</div>
|
||
<div class="hero-stat-label">Week Timeline</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">6</div>
|
||
<div class="hero-stat-label">Zones</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-total">
|
||
<div class="hero-total-label">Total Investment</div>
|
||
<div class="hero-total-amount"><span>$</span>266,200</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-scroll-indicator">
|
||
<span>Scroll</span>
|
||
<div class="arrow"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
PROJECT OVERVIEW
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="overview">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">01</span>
|
||
<h2 class="section-title">Project Overview</h2>
|
||
<p class="section-subtitle">A comprehensive transformation of a 1987 home into a modern luxury residence, preserving character while elevating every surface.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="overview-grid">
|
||
<div class="overview-card fade-in stagger-1">
|
||
<div class="overview-card-icon">🏠</div>
|
||
<div class="overview-card-label">Property</div>
|
||
<div class="overview-card-value">42 Meadowbrook Lane</div>
|
||
</div>
|
||
<div class="overview-card fade-in stagger-2">
|
||
<div class="overview-card-icon">📐</div>
|
||
<div class="overview-card-label">Year Built</div>
|
||
<div class="overview-card-value">1987 · 3,200 sq ft</div>
|
||
</div>
|
||
<div class="overview-card fade-in stagger-3">
|
||
<div class="overview-card-icon">📅</div>
|
||
<div class="overview-card-label">Project Start</div>
|
||
<div class="overview-card-value">April 7, 2026</div>
|
||
</div>
|
||
<div class="overview-card fade-in stagger-4">
|
||
<div class="overview-card-icon">⏱️</div>
|
||
<div class="overview-card-label">Duration</div>
|
||
<div class="overview-card-value">18 Weeks</div>
|
||
</div>
|
||
<div class="overview-card fade-in stagger-5">
|
||
<div class="overview-card-icon">🔨</div>
|
||
<div class="overview-card-label">General Contractor</div>
|
||
<div class="overview-card-value">Summit Ridge Construction Co.</div>
|
||
</div>
|
||
<div class="overview-card fade-in stagger-6">
|
||
<div class="overview-card-icon">✨</div>
|
||
<div class="overview-card-label">Interior Design</div>
|
||
<div class="overview-card-value">Elara Interiors</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
ROOM: KITCHEN
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="kitchen">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">02</span>
|
||
<h2 class="section-title">Room by Room</h2>
|
||
<p class="section-subtitle">Every detail, every finish, every fixture — meticulously specified.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="room-section">
|
||
<div class="room-layout fade-in">
|
||
<div class="room-image-container">
|
||
<img src="images/kitchen.png" alt="Kitchen Render" class="room-image" onerror="this.style.display='none';this.parentElement.innerHTML='<div class=room-image-placeholder>🍳</div>'">
|
||
</div>
|
||
<div class="room-content">
|
||
<div class="room-tag">🍳 Full Renovation</div>
|
||
<h3 class="room-name">Kitchen</h3>
|
||
<div class="room-budget-badge">
|
||
<span class="amount">$68,000</span>
|
||
<span class="pct">28.4% of total</span>
|
||
</div>
|
||
<p class="room-description">A complete gut renovation transforming the dated kitchen into a chef's dream — anchored by a stunning quartz waterfall island and professional-grade appliances.</p>
|
||
|
||
<div class="scope-title">Scope of Work</div>
|
||
<ul class="scope-list">
|
||
<li>Full demo of existing cabinets, counters, and flooring</li>
|
||
<li>Custom white shaker cabinets — Wellborn Forest, full overlay, soft-close hinges</li>
|
||
<li>Quartz countertops — Calacatta Laza, 1.5" mitered waterfall edge on island</li>
|
||
<li>48" × 36" island with prep sink and seating for 4</li>
|
||
<li>Kohler Whitehaven cast iron farmhouse sink, Brizo Litze faucet in luxe gold</li>
|
||
<li>48" Sub-Zero refrigerator, 48" Wolf dual-fuel range, Cove dishwasher, Wolf speed oven</li>
|
||
<li>3×12 white zellige tile backsplash in herringbone pattern</li>
|
||
<li>Under-cabinet LED lighting — Kichler</li>
|
||
<li>New electrical: 4 dedicated circuits, 4 additional outlets, under-cabinet circuit</li>
|
||
<li>12× 4" LED wafer recessed lights on dimmer</li>
|
||
<li>3× Visual Comfort Serge Mouille pendants over island</li>
|
||
<li>5" white oak hardwood flooring, natural finish, matched to existing</li>
|
||
<li>Crown molding + base molding upgrade throughout</li>
|
||
<li>New drywall + paint: Benjamin Moore White Dove OC-17</li>
|
||
</ul>
|
||
|
||
<div class="scope-title">Key Materials</div>
|
||
<div class="materials-grid">
|
||
<div class="material-chip"><span class="dot"></span>Wellborn Forest Cabinetry</div>
|
||
<div class="material-chip"><span class="dot"></span>Calacatta Laza Quartz</div>
|
||
<div class="material-chip"><span class="dot"></span>Sub-Zero / Wolf / Cove</div>
|
||
<div class="material-chip"><span class="dot"></span>Brizo Litze (Luxe Gold)</div>
|
||
<div class="material-chip"><span class="dot"></span>White Zellige Tile</div>
|
||
<div class="material-chip"><span class="dot"></span>BM White Dove OC-17</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MASTER BATHROOM -->
|
||
<div class="room-section" id="master-bath">
|
||
<div class="room-layout reverse fade-in">
|
||
<div class="room-image-container">
|
||
<img src="images/master-bathroom.png" alt="Master Bathroom Render" class="room-image" onerror="this.style.display='none';this.parentElement.innerHTML='<div class=room-image-placeholder>🛁</div>'">
|
||
</div>
|
||
<div class="room-content">
|
||
<div class="room-tag">🛁 Full Gut Renovation</div>
|
||
<h3 class="room-name">Master Bathroom</h3>
|
||
<div class="room-budget-badge">
|
||
<span class="amount">$52,000</span>
|
||
<span class="pct">21.7% of total</span>
|
||
</div>
|
||
<p class="room-description">Completely gutted to the studs and rebuilt as a spa-worthy sanctuary with radiant heated floors, a freestanding soaking tub, and luxurious brushed gold fixtures.</p>
|
||
|
||
<div class="scope-title">Scope of Work</div>
|
||
<ul class="scope-list">
|
||
<li>Full gut to studs — complete demo of all existing finishes</li>
|
||
<li>12×24 porcelain tile floor with Warmup radiant heat system</li>
|
||
<li>Walk-in shower: 4×8 large format porcelain wall tile, frameless 3/8" glass enclosure, linear drain</li>
|
||
<li>Freestanding tub: Kohler Abrazo 6' cast iron, deck-mounted faucet</li>
|
||
<li>Custom 84" built-in double vanity, painted cabinet, quartz top, under-mount sinks</li>
|
||
<li>2× custom backlit mirrors, 42"×36" each</li>
|
||
<li>Plumbing: Brizo Virage collection throughout (brushed gold)</li>
|
||
<li>TOTO Drake II elongated toilet with Washlet+ bidet seat</li>
|
||
<li>Runtal wall-mount heated towel bar</li>
|
||
<li>Broan exhaust fan with humidity sensor and Bluetooth speaker</li>
|
||
<li>2× tiled recessed niches in shower</li>
|
||
<li>Densarmor mold-resistant drywall throughout</li>
|
||
</ul>
|
||
|
||
<div class="scope-title">Key Materials</div>
|
||
<div class="materials-grid">
|
||
<div class="material-chip"><span class="dot"></span>Kohler Abrazo Tub</div>
|
||
<div class="material-chip"><span class="dot"></span>Brizo Virage (Brushed Gold)</div>
|
||
<div class="material-chip"><span class="dot"></span>TOTO Washlet+</div>
|
||
<div class="material-chip"><span class="dot"></span>Warmup Radiant Heat</div>
|
||
<div class="material-chip"><span class="dot"></span>Densarmor Drywall</div>
|
||
<div class="material-chip"><span class="dot"></span>Frameless Glass (3/8")</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EXTERIOR -->
|
||
<div class="room-section" id="exterior">
|
||
<div class="room-layout fade-in">
|
||
<div class="room-image-container">
|
||
<img src="images/exterior.png" alt="Exterior Render" class="room-image" onerror="this.style.display='none';this.parentElement.innerHTML='<div class=room-image-placeholder>🏡</div>'">
|
||
</div>
|
||
<div class="room-content">
|
||
<div class="room-tag">🏡 Curb Appeal Transformation</div>
|
||
<h3 class="room-name">Exterior</h3>
|
||
<div class="room-budget-badge">
|
||
<span class="amount">$41,000</span>
|
||
<span class="pct">17.1% of total</span>
|
||
</div>
|
||
<p class="room-description">A modern craftsman transformation — new siding, a welcoming covered porch, upgraded garage doors, and a complete front yard landscape redesign.</p>
|
||
|
||
<div class="scope-title">Scope of Work</div>
|
||
<ul class="scope-list">
|
||
<li>Full siding replacement: James Hardie HardieBoard lap siding + Hardie Trim, Monterey Taupe</li>
|
||
<li>New front door: Therma-Tru Benchmark 36" fiberglass with Emtek hardware</li>
|
||
<li>2× 16' Clopay Coachman garage doors — windows, insulated</li>
|
||
<li>Covered porch addition: 12×16, Trex Transcend decking, craftsman columns</li>
|
||
<li>Full front yard landscape redesign: ornamental grasses, native plantings, mulch beds</li>
|
||
<li>Exterior trim paint: Sherwin-Williams Alabaster</li>
|
||
<li>Full gutter replacement with gutter guards</li>
|
||
<li>6× Kichler Barrington exterior lanterns</li>
|
||
</ul>
|
||
|
||
<div class="scope-title">Key Materials</div>
|
||
<div class="materials-grid">
|
||
<div class="material-chip"><span class="dot"></span>James Hardie HardieBoard</div>
|
||
<div class="material-chip"><span class="dot"></span>Trex Transcend Decking</div>
|
||
<div class="material-chip"><span class="dot"></span>Clopay Coachman Doors</div>
|
||
<div class="material-chip"><span class="dot"></span>Therma-Tru Benchmark</div>
|
||
<div class="material-chip"><span class="dot"></span>SW Alabaster Trim</div>
|
||
<div class="material-chip"><span class="dot"></span>Kichler Barrington</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MASTER BEDROOM -->
|
||
<div class="room-section" id="master-bed">
|
||
<div class="room-layout reverse fade-in">
|
||
<div class="room-image-container">
|
||
<img src="images/master-bedroom.png" alt="Master Bedroom Render" class="room-image" onerror="this.style.display='none';this.parentElement.innerHTML='<div class=room-image-placeholder>🛏️</div>'">
|
||
</div>
|
||
<div class="room-content">
|
||
<div class="room-tag">🛏️ Complete Renovation</div>
|
||
<h3 class="room-name">Master Bedroom</h3>
|
||
<div class="room-budget-badge">
|
||
<span class="amount">$34,500</span>
|
||
<span class="pct">14.4% of total</span>
|
||
</div>
|
||
<p class="room-description">Elevated from carpet and builder-grade to a warm, sophisticated retreat featuring a dramatic tray ceiling, navy shiplap accent wall, and custom California Closets.</p>
|
||
|
||
<div class="scope-title">Scope of Work</div>
|
||
<ul class="scope-list">
|
||
<li>Remove carpet, install 5" white oak hardwood to match main floor</li>
|
||
<li>Tray ceiling construction with rope lighting detail</li>
|
||
<li>Accent wall: 5/4 shiplap painted Benjamin Moore Hale Navy HC-154</li>
|
||
<li>California Closets: 2 walk-ins, full built-out with drawers, shelves, island</li>
|
||
<li>2× Marvin Elevate double-hung windows, Low-E glass</li>
|
||
<li>Custom Roman shades with motorized blackout lining</li>
|
||
<li>Ceiling fan pre-wire, additional outlets on each nightstand wall</li>
|
||
<li>Visual Comfort signature series chandelier</li>
|
||
<li>BM White Dove throughout, 4.5" craftsman base, 3.5" door casings</li>
|
||
<li>New solid core interior door, 8'0" height</li>
|
||
</ul>
|
||
|
||
<div class="scope-title">Key Materials</div>
|
||
<div class="materials-grid">
|
||
<div class="material-chip"><span class="dot"></span>5" White Oak Hardwood</div>
|
||
<div class="material-chip"><span class="dot"></span>BM Hale Navy HC-154</div>
|
||
<div class="material-chip"><span class="dot"></span>California Closets</div>
|
||
<div class="material-chip"><span class="dot"></span>Marvin Elevate Windows</div>
|
||
<div class="material-chip"><span class="dot"></span>Visual Comfort Chandelier</div>
|
||
<div class="material-chip"><span class="dot"></span>Motorized Roman Shades</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LIVING ROOM -->
|
||
<div class="room-section" id="living">
|
||
<div class="room-layout fade-in">
|
||
<div class="room-image-container">
|
||
<img src="images/living-room.png" alt="Living Room Render" class="room-image" onerror="this.style.display='none';this.parentElement.innerHTML='<div class=room-image-placeholder>🛋️</div>'">
|
||
</div>
|
||
<div class="room-content">
|
||
<div class="room-tag">🛋️ Architectural Enhancement</div>
|
||
<h3 class="room-name">Living Room</h3>
|
||
<div class="room-budget-badge">
|
||
<span class="amount">$28,000</span>
|
||
<span class="pct">11.7% of total</span>
|
||
</div>
|
||
<p class="room-description">Architectural details take center stage — a hand-built coffered ceiling, rebuilt marble fireplace surround, and floor-to-ceiling custom built-ins create a timeless gathering space.</p>
|
||
|
||
<div class="scope-title">Scope of Work</div>
|
||
<ul class="scope-list">
|
||
<li>Coffered ceiling construction: 9-box grid, 6" beams, painted BM White Dove</li>
|
||
<li>Fireplace surround rebuild: 12" marble surround, new custom millwork mantel</li>
|
||
<li>Floor-to-ceiling built-in shelving flanking fireplace, painted BM Hale Navy</li>
|
||
<li>5" white oak hardwood — continuous with kitchen and master</li>
|
||
<li>3× Marvin Elevate casement windows</li>
|
||
<li>16× 4" LED recessed lights on 3-zone dimmer system</li>
|
||
<li>4.5" craftsman base, picture rail molding, crown molding</li>
|
||
<li>BM White Dove on ceiling and walls</li>
|
||
</ul>
|
||
|
||
<div class="scope-title">Key Materials</div>
|
||
<div class="materials-grid">
|
||
<div class="material-chip"><span class="dot"></span>Coffered Ceiling (9-box)</div>
|
||
<div class="material-chip"><span class="dot"></span>Marble Fireplace Surround</div>
|
||
<div class="material-chip"><span class="dot"></span>Custom Built-In Millwork</div>
|
||
<div class="material-chip"><span class="dot"></span>Marvin Elevate Casement</div>
|
||
<div class="material-chip"><span class="dot"></span>3-Zone LED Dimmers</div>
|
||
<div class="material-chip"><span class="dot"></span>BM White Dove OC-17</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HOME OFFICE -->
|
||
<div class="room-section" id="office">
|
||
<div class="room-layout reverse fade-in">
|
||
<div class="room-image-container">
|
||
<img src="images/home-office.png" alt="Home Office Render" class="room-image" onerror="this.style.display='none';this.parentElement.innerHTML='<div class=room-image-placeholder>📚</div>'">
|
||
</div>
|
||
<div class="room-content">
|
||
<div class="room-tag">📚 Custom Build-Out</div>
|
||
<h3 class="room-name">Home Office</h3>
|
||
<div class="room-budget-badge">
|
||
<span class="amount">$18,500</span>
|
||
<span class="pct">7.7% of total</span>
|
||
</div>
|
||
<p class="room-description">A dedicated workspace worthy of serious work — floor-to-ceiling library shelving with a rolling ladder, a massive built-in desk, and elegant French doors for privacy.</p>
|
||
|
||
<div class="scope-title">Scope of Work</div>
|
||
<ul class="scope-list">
|
||
<li>Built-in library wall: floor-to-ceiling shelving, rolling ladder hardware, painted BM Hale Navy</li>
|
||
<li>96" custom built-in desk with file drawers and cable management</li>
|
||
<li>5" white oak hardwood flooring (continuous)</li>
|
||
<li>42" board and batten wainscoting</li>
|
||
<li>Integrated LED shelf lighting + overhead fixture</li>
|
||
<li>8 outlets (4 with USB), dedicated circuit for workstation</li>
|
||
<li>2× Marvin Elevate French doors with obscure glass</li>
|
||
</ul>
|
||
|
||
<div class="scope-title">Key Materials</div>
|
||
<div class="materials-grid">
|
||
<div class="material-chip"><span class="dot"></span>Rolling Ladder Library</div>
|
||
<div class="material-chip"><span class="dot"></span>96" Custom Desk</div>
|
||
<div class="material-chip"><span class="dot"></span>Board & Batten (42")</div>
|
||
<div class="material-chip"><span class="dot"></span>Marvin French Doors</div>
|
||
<div class="material-chip"><span class="dot"></span>LED Shelf Lighting</div>
|
||
<div class="material-chip"><span class="dot"></span>BM Hale Navy HC-154</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
BUDGET SECTION
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="budget">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">03</span>
|
||
<h2 class="section-title">Investment Summary</h2>
|
||
<p class="section-subtitle">Transparent, itemized budgeting with a 10% contingency built in for peace of mind.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="budget-container fade-in">
|
||
<div class="budget-chart-wrap">
|
||
<canvas id="budgetChart"></canvas>
|
||
</div>
|
||
<div class="budget-table-wrap">
|
||
<table class="budget-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Room / Zone</th>
|
||
<th>Budget</th>
|
||
<th>% of Total</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="room-col">🍳 Kitchen</td>
|
||
<td class="amount-col">$68,000</td>
|
||
<td class="pct-col">28.4%</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="room-col">🛁 Master Bathroom</td>
|
||
<td class="amount-col">$52,000</td>
|
||
<td class="pct-col">21.7%</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="room-col">🏡 Exterior</td>
|
||
<td class="amount-col">$41,000</td>
|
||
<td class="pct-col">17.1%</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="room-col">🛏️ Master Bedroom</td>
|
||
<td class="amount-col">$34,500</td>
|
||
<td class="pct-col">14.4%</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="room-col">🛋️ Living Room</td>
|
||
<td class="amount-col">$28,000</td>
|
||
<td class="pct-col">11.7%</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="room-col">📚 Home Office</td>
|
||
<td class="amount-col">$18,500</td>
|
||
<td class="pct-col">7.7%</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="room-col" style="color: var(--text-light);">🔒 Contingency (10%)</td>
|
||
<td class="amount-col" style="color: var(--text-light);">$24,200</td>
|
||
<td class="pct-col">—</td>
|
||
</tr>
|
||
<tr class="total-row">
|
||
<td class="room-col">TOTAL INVESTMENT</td>
|
||
<td class="amount-col">$266,200</td>
|
||
<td class="pct-col">100%</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="budget-bar-section fade-in">
|
||
<div class="budget-bar-item" data-pct="28.4">
|
||
<div class="budget-bar-header">
|
||
<span class="budget-bar-label">Kitchen</span>
|
||
<span class="budget-bar-amount">$68,000</span>
|
||
</div>
|
||
<div class="budget-bar-track"><div class="budget-bar-fill"></div></div>
|
||
</div>
|
||
<div class="budget-bar-item" data-pct="21.7">
|
||
<div class="budget-bar-header">
|
||
<span class="budget-bar-label">Master Bathroom</span>
|
||
<span class="budget-bar-amount">$52,000</span>
|
||
</div>
|
||
<div class="budget-bar-track"><div class="budget-bar-fill"></div></div>
|
||
</div>
|
||
<div class="budget-bar-item" data-pct="17.1">
|
||
<div class="budget-bar-header">
|
||
<span class="budget-bar-label">Exterior</span>
|
||
<span class="budget-bar-amount">$41,000</span>
|
||
</div>
|
||
<div class="budget-bar-track"><div class="budget-bar-fill"></div></div>
|
||
</div>
|
||
<div class="budget-bar-item" data-pct="14.4">
|
||
<div class="budget-bar-header">
|
||
<span class="budget-bar-label">Master Bedroom</span>
|
||
<span class="budget-bar-amount">$34,500</span>
|
||
</div>
|
||
<div class="budget-bar-track"><div class="budget-bar-fill"></div></div>
|
||
</div>
|
||
<div class="budget-bar-item" data-pct="11.7">
|
||
<div class="budget-bar-header">
|
||
<span class="budget-bar-label">Living Room</span>
|
||
<span class="budget-bar-amount">$28,000</span>
|
||
</div>
|
||
<div class="budget-bar-track"><div class="budget-bar-fill"></div></div>
|
||
</div>
|
||
<div class="budget-bar-item" data-pct="7.7">
|
||
<div class="budget-bar-header">
|
||
<span class="budget-bar-label">Home Office</span>
|
||
<span class="budget-bar-amount">$18,500</span>
|
||
</div>
|
||
<div class="budget-bar-track"><div class="budget-bar-fill"></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
TIMELINE / GANTT
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="timeline">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">04</span>
|
||
<h2 class="section-title">Project Timeline</h2>
|
||
<p class="section-subtitle">18-week phased construction schedule starting April 7, 2026. Target completion: August 10, 2026.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="timeline-container fade-in">
|
||
<div class="gantt">
|
||
<div class="gantt-header">
|
||
<div style="font-size:0.75rem; color:var(--text-light); font-weight:600;">PHASE</div>
|
||
<div class="gantt-weeks">
|
||
<div class="gantt-week-label">1</div>
|
||
<div class="gantt-week-label">2</div>
|
||
<div class="gantt-week-label">3</div>
|
||
<div class="gantt-week-label">4</div>
|
||
<div class="gantt-week-label">5</div>
|
||
<div class="gantt-week-label">6</div>
|
||
<div class="gantt-week-label">7</div>
|
||
<div class="gantt-week-label">8</div>
|
||
<div class="gantt-week-label">9</div>
|
||
<div class="gantt-week-label">10</div>
|
||
<div class="gantt-week-label">11</div>
|
||
<div class="gantt-week-label">12</div>
|
||
<div class="gantt-week-label">13</div>
|
||
<div class="gantt-week-label">14</div>
|
||
<div class="gantt-week-label">15</div>
|
||
<div class="gantt-week-label">16</div>
|
||
<div class="gantt-week-label">17</div>
|
||
<div class="gantt-week-label">18</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Demo + Structural: Weeks 1-2 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">🔨</div> Demo + Structural</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-bar" style="grid-column: 1 / 3; animation-delay: 0.1s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 3 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rough Plumbing, Electrical, HVAC: Weeks 3-5 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">⚡</div> Rough MEP</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 3;"></div>
|
||
<div class="gantt-bar" style="grid-column: 3 / 6; animation-delay: 0.2s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 6 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Insulation, Drywall: Weeks 6-7 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">🧱</div> Insulation + Drywall</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 6;"></div>
|
||
<div class="gantt-bar" style="grid-column: 6 / 8; animation-delay: 0.3s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 8 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tile + Hardwood: Weeks 8-10 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">🪵</div> Tile + Hardwood</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 8;"></div>
|
||
<div class="gantt-bar" style="grid-column: 8 / 11; animation-delay: 0.4s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 11 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cabinets + Millwork: Weeks 11-13 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">🗄️</div> Cabinets + Millwork</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 11;"></div>
|
||
<div class="gantt-bar" style="grid-column: 11 / 14; animation-delay: 0.5s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 14 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Countertops + Fixtures: Weeks 14-15 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">🔧</div> Counters + Fixtures</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 14;"></div>
|
||
<div class="gantt-bar" style="grid-column: 14 / 16; animation-delay: 0.6s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 16 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Paint + Trim + Lighting: Weeks 16-17 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">🎨</div> Paint + Trim + Lighting</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 16;"></div>
|
||
<div class="gantt-bar" style="grid-column: 16 / 18; animation-delay: 0.7s;"></div>
|
||
<div class="gantt-empty" style="grid-column: 18 / 19;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Punch List: Week 18 -->
|
||
<div class="gantt-row">
|
||
<div class="gantt-task"><div class="gantt-task-icon">✅</div> Punch List + Walkthrough</div>
|
||
<div class="gantt-bar-container">
|
||
<div class="gantt-empty" style="grid-column: 1 / 18;"></div>
|
||
<div class="gantt-bar" style="grid-column: 18 / 19; animation-delay: 0.8s;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
TEAM & CONTACTS
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="team">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">05</span>
|
||
<h2 class="section-title">Your Team</h2>
|
||
<p class="section-subtitle">A dedicated team of professionals committed to delivering an exceptional result.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="team-grid fade-in">
|
||
<div class="team-card">
|
||
<div class="team-avatar">👷</div>
|
||
<div class="team-name">Marcus Caldwell</div>
|
||
<div class="team-role">Project Manager</div>
|
||
<div class="team-contact">
|
||
<span>Summit Ridge Construction Co.</span>
|
||
<a href="tel:+18285551234">(828) 555-1234</a>
|
||
<a href="mailto:marcus@summitridgeco.com">marcus@summitridgeco.com</a>
|
||
</div>
|
||
</div>
|
||
<div class="team-card">
|
||
<div class="team-avatar">🎨</div>
|
||
<div class="team-name">Camille Fontaine</div>
|
||
<div class="team-role">Lead Designer</div>
|
||
<div class="team-contact">
|
||
<span>Elara Interiors</span>
|
||
<a href="tel:+18285555678">(828) 555-5678</a>
|
||
<a href="mailto:camille@elarainteriors.com">camille@elarainteriors.com</a>
|
||
</div>
|
||
</div>
|
||
<div class="team-card">
|
||
<div class="team-avatar">📋</div>
|
||
<div class="team-name">Derek Ewing</div>
|
||
<div class="team-role">Site Superintendent</div>
|
||
<div class="team-contact">
|
||
<span>Summit Ridge Construction Co.</span>
|
||
<a href="tel:+18285559012">(828) 555-9012</a>
|
||
<a href="mailto:derek@summitridgeco.com">derek@summitridgeco.com</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
MATERIALS & FINISHES SPEC SHEET
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="materials">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">06</span>
|
||
<h2 class="section-title">Materials & Finishes</h2>
|
||
<p class="section-subtitle">Condensed specification sheet — every brand, model, and finish selected for this project.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="spec-grid fade-in">
|
||
<div class="spec-card">
|
||
<div class="spec-card-title">🎨 Paint & Wall Finishes</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Primary Wall Color</span>
|
||
<span class="spec-item-value">BM White Dove OC-17</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Accent Color</span>
|
||
<span class="spec-item-value">BM Hale Navy HC-154</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Exterior Trim</span>
|
||
<span class="spec-item-value">SW Alabaster SW 7008</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Master Bedroom Accent</span>
|
||
<span class="spec-item-value">5/4 Shiplap — Hale Navy</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Office Wainscoting</span>
|
||
<span class="spec-item-value">42" Board & Batten</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<div class="spec-card-title">🪵 Flooring</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Hardwood (throughout)</span>
|
||
<span class="spec-item-value">5" White Oak, Natural Finish</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Master Bath Floor</span>
|
||
<span class="spec-item-value">12×24 Porcelain + Radiant</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Radiant Heat System</span>
|
||
<span class="spec-item-value">Warmup DCM-PRO</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Exterior Decking</span>
|
||
<span class="spec-item-value">Trex Transcend</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<div class="spec-card-title">🚿 Plumbing Fixtures</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Kitchen Sink</span>
|
||
<span class="spec-item-value">Kohler Whitehaven (cast iron)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Kitchen Faucet</span>
|
||
<span class="spec-item-value">Brizo Litze — Luxe Gold</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Bath Collection</span>
|
||
<span class="spec-item-value">Brizo Virage — Brushed Gold</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Freestanding Tub</span>
|
||
<span class="spec-item-value">Kohler Abrazo 6' (cast iron)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Toilet</span>
|
||
<span class="spec-item-value">TOTO Drake II + Washlet+</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<div class="spec-card-title">🍳 Appliances</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Refrigerator</span>
|
||
<span class="spec-item-value">48" Sub-Zero</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Range</span>
|
||
<span class="spec-item-value">48" Wolf Dual-Fuel</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Dishwasher</span>
|
||
<span class="spec-item-value">Cove</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Speed Oven</span>
|
||
<span class="spec-item-value">Wolf</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<div class="spec-card-title">💡 Lighting</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Kitchen Pendants</span>
|
||
<span class="spec-item-value">Visual Comfort Serge Mouille ×3</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Master Chandelier</span>
|
||
<span class="spec-item-value">Visual Comfort Signature</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Under-Cabinet</span>
|
||
<span class="spec-item-value">Kichler LED Strip</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Recessed (Kitchen)</span>
|
||
<span class="spec-item-value">12× 4" LED Wafer — Dimmer</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Recessed (Living)</span>
|
||
<span class="spec-item-value">16× 4" LED — 3-Zone Dimmer</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Exterior</span>
|
||
<span class="spec-item-value">Kichler Barrington Lanterns ×6</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<div class="spec-card-title">🪟 Windows, Doors & Exterior</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Windows</span>
|
||
<span class="spec-item-value">Marvin Elevate (Low-E)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">French Doors (Office)</span>
|
||
<span class="spec-item-value">Marvin Elevate — Obscure Glass</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Front Door</span>
|
||
<span class="spec-item-value">Therma-Tru 36" + Emtek HW</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Siding</span>
|
||
<span class="spec-item-value">James Hardie — Monterey Taupe</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Garage Doors</span>
|
||
<span class="spec-item-value">Clopay Coachman ×2 (16')</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
WARRANTY & GUARANTEES
|
||
════════════════════════════════════════════ -->
|
||
<section class="section" id="warranty">
|
||
<div class="section-header fade-in">
|
||
<span class="section-number">07</span>
|
||
<h2 class="section-title">Warranty & Guarantees</h2>
|
||
<p class="section-subtitle">Your investment is protected with comprehensive coverage from both our team and manufacturers.</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
|
||
<div class="warranty-grid fade-in">
|
||
<div class="warranty-card">
|
||
<div class="warranty-icon">🛡️</div>
|
||
<div class="warranty-title">Workmanship Warranty</div>
|
||
<div class="warranty-duration">5 Years</div>
|
||
<div class="warranty-desc">Summit Ridge Construction Co. warrants all labor and installation against defects in workmanship for a full five years from the date of project completion.</div>
|
||
</div>
|
||
<div class="warranty-card">
|
||
<div class="warranty-icon">🏗️</div>
|
||
<div class="warranty-title">Structural Warranty</div>
|
||
<div class="warranty-duration">10 Years</div>
|
||
<div class="warranty-desc">All structural modifications — including coffered ceiling, tray ceiling, and porch addition — are warranted for ten years against structural failure.</div>
|
||
</div>
|
||
<div class="warranty-card">
|
||
<div class="warranty-icon">🔧</div>
|
||
<div class="warranty-title">Plumbing & Electrical</div>
|
||
<div class="warranty-duration">3 Years</div>
|
||
<div class="warranty-desc">Rough and finish plumbing, electrical wiring, and HVAC modifications are warranted for three years. Fixtures carry their own manufacturer warranties.</div>
|
||
</div>
|
||
<div class="warranty-card">
|
||
<div class="warranty-icon">🍳</div>
|
||
<div class="warranty-title">Appliance Coverage</div>
|
||
<div class="warranty-duration">Manufacturer Terms</div>
|
||
<div class="warranty-desc">Sub-Zero (12 yr sealed, 5 yr full), Wolf (2 yr), Cove (5 yr), TOTO (1 yr). All warranty registrations completed by our team at install.</div>
|
||
</div>
|
||
<div class="warranty-card">
|
||
<div class="warranty-icon">🪟</div>
|
||
<div class="warranty-title">Windows & Doors</div>
|
||
<div class="warranty-duration">20 Years (Marvin)</div>
|
||
<div class="warranty-desc">Marvin Elevate windows carry a 20-year warranty on glass, 10-year on non-glass. Therma-Tru limited lifetime on fiberglass entry door.</div>
|
||
</div>
|
||
<div class="warranty-card">
|
||
<div class="warranty-icon">🏠</div>
|
||
<div class="warranty-title">Exterior Envelope</div>
|
||
<div class="warranty-duration">30 Years (Hardie)</div>
|
||
<div class="warranty-desc">James Hardie HardieBoard backed by a 30-year non-prorated limited warranty. Clopay garage doors carry a limited lifetime warranty.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
FOOTER
|
||
════════════════════════════════════════════ -->
|
||
<footer class="footer">
|
||
<div class="footer-logo">Summit Ridge × Elara</div>
|
||
<p class="footer-text">Prepared for The Hartfield Family · April 2026</p>
|
||
<p class="footer-text" style="color: var(--gold);">42 Meadowbrook Lane, Asheville, NC 28801</p>
|
||
<p class="footer-disclaimer">
|
||
This proposal is valid for 30 days from date of issue. All pricing is subject to final measurements and material availability at time of contract execution. A 10% contingency has been included in the total project budget. Payment schedule, change order policy, and full contract terms will be outlined in the formal construction agreement. This document is confidential and intended solely for the Hartfield family.
|
||
</p>
|
||
</footer>
|
||
|
||
<!-- ════════════════════════════════════════════
|
||
JAVASCRIPT
|
||
════════════════════════════════════════════ -->
|
||
<script>
|
||
// ── Nav scroll effect ──
|
||
const nav = document.getElementById('nav');
|
||
window.addEventListener('scroll', () => {
|
||
nav.classList.toggle('scrolled', window.scrollY > 50);
|
||
});
|
||
|
||
// ── Active nav link highlighting ──
|
||
const sections = document.querySelectorAll('section[id], div[id]');
|
||
const navLinks = document.querySelectorAll('.nav-links a');
|
||
|
||
const observerNav = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const id = entry.target.id;
|
||
navLinks.forEach(link => {
|
||
link.classList.toggle('active', link.getAttribute('href') === '#' + id);
|
||
});
|
||
}
|
||
});
|
||
}, { rootMargin: '-40% 0px -60% 0px' });
|
||
|
||
sections.forEach(section => observerNav.observe(section));
|
||
|
||
// ── Fade-in on scroll ──
|
||
const fadeEls = document.querySelectorAll('.fade-in');
|
||
const observerFade = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
||
|
||
fadeEls.forEach(el => observerFade.observe(el));
|
||
|
||
// ── Budget progress bars animation ──
|
||
const barItems = document.querySelectorAll('.budget-bar-item');
|
||
const observerBars = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const pct = entry.target.dataset.pct;
|
||
const fill = entry.target.querySelector('.budget-bar-fill');
|
||
// Scale to max: 28.4% is "100%" of bar width
|
||
const scaled = (parseFloat(pct) / 28.4) * 100;
|
||
setTimeout(() => {
|
||
fill.style.width = scaled + '%';
|
||
}, 200);
|
||
}
|
||
});
|
||
}, { threshold: 0.3 });
|
||
|
||
barItems.forEach(item => observerBars.observe(item));
|
||
|
||
// ── Chart.js Doughnut ──
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const ctx = document.getElementById('budgetChart');
|
||
if (ctx && typeof Chart !== 'undefined') {
|
||
new Chart(ctx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Kitchen', 'Master Bathroom', 'Exterior', 'Master Bedroom', 'Living Room', 'Home Office', 'Contingency'],
|
||
datasets: [{
|
||
data: [68000, 52000, 41000, 34500, 28000, 18500, 24200],
|
||
backgroundColor: [
|
||
'#C9A96E',
|
||
'#A8893F',
|
||
'#D4BA85',
|
||
'#8B7355',
|
||
'#E8D5B0',
|
||
'#6B5B3E',
|
||
'#3A3226'
|
||
],
|
||
borderColor: '#0B1426',
|
||
borderWidth: 3,
|
||
hoverOffset: 8
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: true,
|
||
cutout: '62%',
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom',
|
||
labels: {
|
||
color: '#A0AABB',
|
||
font: { family: "'Inter', sans-serif", size: 12, weight: '500' },
|
||
padding: 16,
|
||
usePointStyle: true,
|
||
pointStyleWidth: 12
|
||
}
|
||
},
|
||
tooltip: {
|
||
backgroundColor: 'rgba(11, 20, 38, 0.95)',
|
||
borderColor: 'rgba(201, 169, 110, 0.3)',
|
||
borderWidth: 1,
|
||
titleColor: '#FFFFFF',
|
||
bodyColor: '#C9A96E',
|
||
titleFont: { family: "'Inter', sans-serif", weight: '600' },
|
||
bodyFont: { family: "'JetBrains Mono', monospace" },
|
||
padding: 12,
|
||
cornerRadius: 8,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return ' $' + context.parsed.toLocaleString();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// ── Mobile nav close on link click ──
|
||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
document.getElementById('navLinks').classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// ── Smooth scroll offset for fixed nav ──
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
const offset = 80;
|
||
const position = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
||
window.scrollTo({ top: position, behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |