HTMLify

:root { --gold: #F4B400; --blue: #4FC3F7; --navy: #0F172A; --white: #ffffff; --gray: #f8fafc; } body { font-family: 'Inter', system-ui, sans-serif; margin: 0; background: var(--gray); color: var(--navy); } .navbar { display: flex; justify-content: space-between; padding: 1.5rem 5%; background: var(--white); align-items: center; border-bottom: 1px solid #e2e8f0; } .logo { font-weight: 800; font-size: 1.5rem; color: var(--navy); } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { text-decoration: none; color: var(--navy); font-weight: 600; } .btn-gold { background: var(--gold); color: var(--navy); padding: 0.8rem 1.5rem; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; font-weight: 700; transition: background 0.3s; } .btn-gold:hover { background: #d9a000; } .hero { height: 60vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), url('hero-bg.jpg') center/cover; color: white; text-align: center; } .hero-content { max-width: 800px; } .search-box { background: white; padding: 1.5rem; border-radius: 8px; display: flex; gap: 1rem; margin-top: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .inventory-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; padding: 2rem 5%; } .card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .img-placeholder { width: 100%; height: 200px; background: #e2e8f0; } .card-body { padding: 1.5rem; } .price { font-size: 1.5rem; font-weight: 800; color: var(--gold); }

/* Karbon Sites Branding */

  #karbon-promo-banner {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease-in-out;
  }
  #karbon-promo-banner:hover {
      transform: scale(1.05);
  }