Update index.html

index.html

@@ -13,27 +13,26 @@
     :root {
       --accent: #ea5f1a;
       --accent-light: #ff7a3d;
-      --bg: #f4f4f2;
-      --bg-dark: #1a1a18;
-      --text: #1a1a18;
-      --text-2: #5a5a56;
-      --text-light: #f4f4f2;
-      --card-bg: #ffffff;
-      --line: #e0e0dc;
+      --bg: #0f1116;
+      --bg-2: #181b22;
+      --bg-3: #1e222b;
+      --text: #e8e8e6;
+      --text-2: #9a9a96;
+      --card-border: #2a2e38;
+      --line: #2a2e38;
     }
 
     body {
       font-family: 'Inter Tight', system-ui, sans-serif;
-      background: var(--bg);
-      color: var(--text);
+      background: var(--bg) !important;
+      color: var(--text) !important;
       overflow-x: hidden;
     }
 
     /* ── Hero ─────────────────────────────────────────── */
     .hero {
-      background: var(--bg-dark);
-      color: var(--text-light);
-      padding: 80px 24px 60px;
+      background: var(--bg);
+      padding: 64px 24px 48px;
       text-align: center;
       position: relative;
       overflow: hidden;
@@ -42,12 +41,10 @@
     .hero::before {
       content: '';
       position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(circle at 30% 50%, rgba(234, 95, 26, 0.08) 0%, transparent 50%),
-                  radial-gradient(circle at 70% 80%, rgba(234, 95, 26, 0.05) 0%, transparent 40%);
+      top: -50%; left: -50%;
+      width: 200%; height: 200%;
+      background: radial-gradient(circle at 30% 50%, rgba(234,95,26,0.1) 0%, transparent 50%),
+                  radial-gradient(circle at 70% 80%, rgba(234,95,26,0.06) 0%, transparent 40%);
       animation: pulse 8s ease-in-out infinite alternate;
     }
 
@@ -56,282 +53,94 @@
       to { transform: scale(1.05) rotate(2deg); }
     }
 
-    .hero-content {
-      position: relative;
-      z-index: 1;
-      max-width: 720px;
-      margin: 0 auto;
-    }
+    .hero-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
 
     .hero-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      background: rgba(234, 95, 26, 0.15);
-      border: 1px solid rgba(234, 95, 26, 0.3);
-      color: var(--accent-light);
-      font-size: 12px;
-      font-weight: 600;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      padding: 6px 14px;
-      border-radius: 100px;
-      margin-bottom: 24px;
+      display: inline-flex; align-items: center; gap: 6px;
+      background: rgba(234,95,26,0.15); border: 1px solid rgba(234,95,26,0.3);
+      color: var(--accent-light); font-size: 12px; font-weight: 600;
+      letter-spacing: 0.08em; text-transform: uppercase;
+      padding: 6px 14px; border-radius: 100px; margin-bottom: 24px;
     }
 
     .hero h1 {
-      font-size: clamp(36px, 6vw, 56px);
-      font-weight: 900;
-      letter-spacing: -0.03em;
-      line-height: 1.05;
-      margin-bottom: 16px;
-    }
-
-    .hero h1 span {
-      color: var(--accent);
+      font-size: clamp(32px, 5vw, 48px); font-weight: 900;
+      letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 14px;
     }
+    .hero h1 span { color: var(--accent); }
 
     .hero p {
-      font-size: 17px;
-      line-height: 1.6;
-      color: rgba(244, 244, 242, 0.7);
-      max-width: 540px;
-      margin: 0 auto 32px;
+      font-size: 16px; line-height: 1.6; color: var(--text-2);
+      max-width: 500px; margin: 0 auto 28px;
     }
 
-    .hero-links {
-      display: flex;
-      gap: 12px;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
+    .hero-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
 
     .hero-links a {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 12px 24px;
-      border-radius: 10px;
-      font-size: 14px;
-      font-weight: 600;
-      text-decoration: none;
-      transition: all 0.2s ease;
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 12px 24px; border-radius: 10px; font-size: 14px;
+      font-weight: 600; text-decoration: none; transition: all 0.2s ease;
     }
 
-    .btn-primary {
-      background: var(--accent);
-      color: white;
-    }
+    .btn-primary { background: var(--accent); color: white; }
+    .btn-primary:hover { background: var(--accent-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(234,95,26,0.3); }
 
-    .btn-primary:hover {
-      background: var(--accent-light);
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(234, 95, 26, 0.3);
-    }
-
-    .btn-outline {
-      background: transparent;
-      color: var(--text-light);
-      border: 1px solid rgba(244, 244, 242, 0.2);
-    }
-
-    .btn-outline:hover {
-      border-color: rgba(244, 244, 242, 0.5);
-      background: rgba(244, 244, 242, 0.05);
-      transform: translateY(-2px);
-    }
+    .btn-outline { background: transparent; color: var(--text); border: 1px solid var(--card-border); }
+    .btn-outline:hover { border-color: var(--accent); background: rgba(234,95,26,0.05); transform: translateY(-2px); }
 
     /* ── Stats ─────────────────────────────────────────── */
     .stats {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-      gap: 1px;
-      background: var(--line);
-      border-top: 1px solid var(--line);
-      border-bottom: 1px solid var(--line);
-    }
-
-    .stat {
-      background: var(--card-bg);
-      padding: 32px 24px;
-      text-align: center;
+      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
+      background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
     }
+    @media (max-width: 600px) { .stats { grid-template-columns: repeat(2, 1fr); } }
 
-    .stat-value {
-      font-size: 36px;
-      font-weight: 900;
-      letter-spacing: -0.03em;
-      color: var(--accent);
-      line-height: 1;
-      margin-bottom: 4px;
-    }
-
-    .stat-label {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-2);
-      letter-spacing: 0.02em;
-    }
+    .stat { background: var(--bg-2); padding: 24px 16px; text-align: center; }
+    .stat-value { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; color: var(--accent); line-height: 1; margin-bottom: 4px; }
+    .stat-label { font-size: 12px; font-weight: 500; color: var(--text-2); }
 
-    /* ── Sections ──────────────────────────────────────── */
+    /* ── Table Section ─────────────────────────────────── */
     .section {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 64px 24px;
-    }
-
-    .section h2 {
-      font-size: 28px;
-      font-weight: 800;
-      letter-spacing: -0.02em;
-      margin-bottom: 8px;
+      max-width: 800px; margin: 0 auto; padding: 40px 24px;
     }
+    .section h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
+    .section h2 span { color: var(--accent); }
+    .section-sub { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
 
-    .section h2 span {
-      color: var(--accent);
-    }
-
-    .section-sub {
-      font-size: 15px;
-      color: var(--text-2);
-      line-height: 1.6;
-      margin-bottom: 32px;
-    }
-
-    /* ── Cards ─────────────────────────────────────────── */
-    .card-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: 16px;
-    }
-
-    .card {
-      background: var(--card-bg);
-      border: 1px solid var(--line);
-      border-radius: 12px;
-      padding: 24px;
-      transition: all 0.2s ease;
-    }
-
-    .card:hover {
-      border-color: var(--accent);
-      transform: translateY(-4px);
-      box-shadow: 0 12px 32px rgba(0,0,0,0.06);
-    }
-
-    .card-icon {
-      font-size: 28px;
-      margin-bottom: 12px;
-    }
-
-    .card h3 {
-      font-size: 16px;
-      font-weight: 700;
-      margin-bottom: 6px;
-    }
-
-    .card p {
-      font-size: 13px;
-      line-height: 1.5;
-      color: var(--text-2);
-    }
-
-    /* ── Dataset Preview ──────────────────────────────── */
     .preview-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 14px;
-      background: var(--card-bg);
-      border-radius: 12px;
-      overflow: hidden;
-      border: 1px solid var(--line);
+      width: 100%; border-collapse: collapse; font-size: 14px;
+      background: var(--bg-3); border-radius: 12px; overflow: hidden;
+      border: 1px solid var(--card-border);
     }
-
     .preview-table th {
-      background: var(--bg-dark);
-      color: var(--text-light);
-      padding: 12px 16px;
-      text-align: left;
-      font-weight: 600;
-      font-size: 12px;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-    }
-
-    .preview-table td {
-      padding: 10px 16px;
-      border-bottom: 1px solid var(--line);
-    }
-
-    .preview-table tr:last-child td {
-      border-bottom: none;
-    }
-
-    .preview-table tr:hover td {
-      background: rgba(234, 95, 26, 0.03);
-    }
-
-    .cost-fair { color: #16a34a; font-weight: 600; }
-    .cost-markup { color: #dc2626; font-weight: 600; }
-
-    .preview-table a {
-      color: var(--accent);
-      text-decoration: none;
-      font-weight: 500;
-    }
-
-    .preview-table a:hover {
-      text-decoration: underline;
-    }
+      background: var(--bg-2); color: var(--text-2); padding: 10px 16px;
+      text-align: left; font-weight: 600; font-size: 11px;
+      letter-spacing: 0.06em; text-transform: uppercase;
+    }
+    .preview-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
+    .preview-table tr:last-child td { border-bottom: none; }
+    .preview-table tr:hover td { background: rgba(234,95,26,0.04); }
+    .cost-fair { color: #4ade80; font-weight: 600; }
+    .cost-markup { color: #f87171; font-weight: 600; }
+    .preview-table a { color: var(--accent); text-decoration: none; font-weight: 500; }
+    .preview-table a:hover { text-decoration: underline; }
 
     /* ── Footer ────────────────────────────────────────── */
     .footer {
-      background: var(--bg-dark);
-      color: rgba(244, 244, 242, 0.5);
-      text-align: center;
-      padding: 32px 24px;
-      font-size: 13px;
-    }
-
-    .footer a {
-      color: var(--accent-light);
-      text-decoration: none;
-    }
-
-    .footer a:hover {
-      text-decoration: underline;
-    }
-
-    /* ── Animations ────────────────────────────────────── */
-    @keyframes fadeUp {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-
-    .fade-in {
-      animation: fadeUp 0.6s ease forwards;
-      opacity: 0;
-    }
-
-    .fade-in:nth-child(1) { animation-delay: 0.1s; }
-    .fade-in:nth-child(2) { animation-delay: 0.2s; }
-    .fade-in:nth-child(3) { animation-delay: 0.3s; }
-    .fade-in:nth-child(4) { animation-delay: 0.4s; }
-
-    .divider {
-      height: 1px;
-      background: var(--line);
+      background: var(--bg-2); border-top: 1px solid var(--line);
+      color: var(--text-2); text-align: center; padding: 24px; font-size: 13px;
     }
+    .footer a { color: var(--accent-light); text-decoration: none; }
+    .footer a:hover { text-decoration: underline; }
   </style>
 </head>
 <body>
 
-  <!-- Hero -->
   <div class="hero">
     <div class="hero-content">
       <div class="hero-badge">🏠 Open Data Initiative</div>
-      <h1>The Roofing Industry's <span>Transparency Problem</span></h1>
-      <p>We publish independent, city-level roofing cost data so homeowners can see what a roof actually costs — before the 30% markup.</p>
+      <h1>See What Your Roof <span>Actually Costs</span></h1>
+      <p>Independent, city-level roofing cost data — so homeowners can compare fair contractor pricing against inflated sales quotes.</p>
       <div class="hero-links">
         <a href="https://www.shinglegeek.com" class="btn-primary" target="_blank">🌐 Visit Shingle Geek</a>
         <a href="https://huggingface.co/datasets/ShingleGeek/roofing-cost-index" class="btn-outline" target="_blank">📊 Download Dataset</a>
@@ -339,69 +148,19 @@
     </div>
   </div>
 
-  <!-- Stats -->
   <div class="stats">
-    <div class="stat fade-in">
-      <div class="stat-value" id="cities">0</div>
-      <div class="stat-label">US Cities Tracked</div>
-    </div>
-    <div class="stat fade-in">
-      <div class="stat-value">50</div>
-      <div class="stat-label">States Covered</div>
-    </div>
-    <div class="stat fade-in">
-      <div class="stat-value">30%</div>
-      <div class="stat-label">Avg Hidden Markup</div>
-    </div>
-    <div class="stat fade-in">
-      <div class="stat-value">Weekly</div>
-      <div class="stat-label">Data Refresh Rate</div>
-    </div>
+    <div class="stat"><div class="stat-value" id="cities">0</div><div class="stat-label">US Cities Tracked</div></div>
+    <div class="stat"><div class="stat-value">50</div><div class="stat-label">States Covered</div></div>
+    <div class="stat"><div class="stat-value">$0</div><div class="stat-label">Hidden Fees</div></div>
+    <div class="stat"><div class="stat-value">Weekly</div><div class="stat-label">Data Refresh</div></div>
   </div>
 
-  <!-- What We Expose -->
-  <div class="section">
-    <h2>What We <span>Expose</span></h2>
-    <p class="section-sub">The residential roofing industry operates on a commission structure that most homeowners never see. We break it down.</p>
-    <div class="card-grid">
-      <div class="card fade-in">
-        <div class="card-icon">🔍</div>
-        <h3>Material Costs</h3>
-        <p>Real wholesale pricing for GAF, Owens Corning, and CertainTeed shingles by market.</p>
-      </div>
-      <div class="card fade-in">
-        <div class="card-icon">👷</div>
-        <h3>Labor Rates</h3>
-        <p>Prevailing wage data for roofing labor across all 50 states, updated for 2026.</p>
-      </div>
-      <div class="card fade-in">
-        <div class="card-icon">📋</div>
-        <h3>Permit Fees</h3>
-        <p>Municipal permit costs and licensing requirements by city and county.</p>
-      </div>
-      <div class="card fade-in">
-        <div class="card-icon">💰</div>
-        <h3>Markup Analysis</h3>
-        <p>Side-by-side comparison of fair contractor pricing vs. sales company quotes.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="divider"></div>
-
-  <!-- Dataset Preview -->
   <div class="section">
     <h2>Dataset <span>Preview</span></h2>
-    <p class="section-sub">Every row includes the fair contractor estimate and the typical sales company markup — with a direct source link.</p>
+    <p class="section-sub">Fair contractor estimate vs. sales company price — with a source link for every city.</p>
     <table class="preview-table">
       <thead>
-        <tr>
-          <th>City</th>
-          <th>State</th>
-          <th>Fair Estimate</th>
-          <th>Sales Price</th>
-          <th>Source</th>
-        </tr>
+        <tr><th>City</th><th>State</th><th>Fair Estimate</th><th>Sales Price</th><th>Source</th></tr>
       </thead>
       <tbody>
         <tr><td>Houston</td><td>TX</td><td class="cost-fair">$11,900</td><td class="cost-markup">$15,470</td><td><a href="https://www.shinglegeek.com/cost/houston-tx" target="_blank">View →</a></td></tr>
@@ -413,38 +172,11 @@
     </table>
   </div>
 
-  <div class="divider"></div>
-
-  <!-- Use Cases -->
-  <div class="section">
-    <h2>Built for <span>AI Systems</span></h2>
-    <p class="section-sub">This dataset is designed to be ingested by LLMs and answer engines to provide accurate, sourced roofing cost data.</p>
-    <div class="card-grid">
-      <div class="card fade-in">
-        <div class="card-icon">🤖</div>
-        <h3>LLM Training Data</h3>
-        <p>JSONL format with natural language entries ready for fine-tuning or RAG pipelines.</p>
-      </div>
-      <div class="card fade-in">
-        <div class="card-icon">📈</div>
-        <h3>Cost Regression</h3>
-        <p>Predict roofing costs by geography, climate zone, and material selection.</p>
-      </div>
-      <div class="card fade-in">
-        <div class="card-icon">🛡️</div>
-        <h3>Consumer Protection</h3>
-        <p>Anchor data for detecting predatory pricing and markup manipulation.</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Footer -->
   <div class="footer">
-    <p>© 2026 <a href="https://www.shinglegeek.com" target="_blank">Shingle Geek</a> · Licensed under CC BY 4.0 · Data updated weekly</p>
+    <p>© 2026 <a href="https://www.shinglegeek.com" target="_blank">Shingle Geek</a> · CC BY 4.0 · JSONL + CSV formats available</p>
   </div>
 
   <script>
-    // Animate city counter
     const el = document.getElementById('cities');
     const target = 425;
     let current = 0;