:root { --bg-color: #0b0c10; --surface-color: #1f2833; --accent-color: #c59b27; --text-color: #c5c6c7; --text-light: #ffffff; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .header { background-color: rgba(11, 12, 16, 0.95); backdrop-filter: blur(10px); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid rgba(197, 155, 39, 0.2); } .nav-container { display: flex; align-items: center; justify-content: space-between; height: 80px; } .logo { font-size: 1.5rem; font-weight: 800; color: var(--text-light); letter-spacing: 1px; } .logo span { color: var(--accent-color); } .nav-menu { display: flex; gap: 2rem; align-items: center; } .nav-menu a { color: var(--text-color); font-weight: 500; transition: var(--transition); position: relative; } .nav-menu a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--accent-color); transition: var(--transition); } .nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; } .nav-menu a:hover, .nav-menu a.active { color: var(--accent-color); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; border-radius: 4px; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; } .btn-primary { background-color: var(--accent-color); color: #000; } .btn-primary:hover { background-color: #e0b12e; transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 25px rgba(197, 155, 39, 0.5); } .btn-secondary { background-color: transparent; color: var(--text-light); border: 1px solid var(--text-color); } .btn-secondary:hover { border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-3px) scale(1.02); } .hamburger { display: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); transition: var(--transition); } .hamburger:hover { color: var(--accent-color); } main { padding-top: 80px; } .hero { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at center, #1f2833 0%, #0b0c10 100%); overflow: hidden; padding: 4rem 0; } .hero-content { position: relative; z-index: 2; max-width: 800px; } .hero-content h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; color: var(--text-light); margin-bottom: 1.5rem; line-height: 1.1; } .hero-content p { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 2.5rem; color: var(--text-color); } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .comparison-section { padding: 5rem 0; } .ba-slider { position: relative; width: 100%; max-width: 900px; height: 500px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid rgba(197, 155, 39, 0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.6); } .ba-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; pointer-events: none; } .ba-before { background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=80'); width: 50%; z-index: 2; border-right: 3px solid var(--accent-color); } .ba-after { background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80'); z-index: 1; } .ba-label { position: absolute; bottom: 20px; background: rgba(11, 12, 16, 0.85); color: var(--text-light); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(197, 155, 39, 0.3); backdrop-filter: blur(4px); } .ba-before .ba-label { left: 20px; } .ba-after .ba-label { right: 20px; } .ba-slider-handle { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 10; } .features { padding: 6rem 0; } .section-title { text-align: center; margin-bottom: 4rem; } .section-title h2 { font-size: 2.5rem; color: var(--text-light); margin-bottom: 0.5rem; } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .bento-card { background-color: var(--surface-color); padding: 2.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); } .bento-card:hover { transform: translateY(-8px) scale(1.01); border-color: var(--accent-color); box-shadow: 0 15px 35px rgba(0,0,0,0.6); } .bento-card.large { grid-column: span 2; } .bento-card i { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 1.5rem; transition: var(--transition); } .bento-card:hover i { transform: scale(1.1) rotate(5deg); } .bento-card h3 { font-size: 1.5rem; color: var(--text-light); margin-bottom: 1rem; } .cta-banner { background: linear-gradient(135deg, #1f2833, #0b0c10); border-top: 1px solid rgba(197, 155, 39, 0.2); border-bottom: 1px solid rgba(197, 155, 39, 0.2); padding: 5rem 0; text-align: center; margin-bottom: 4rem; } .banner-content h2 { font-size: 2.5rem; color: var(--text-light); margin-bottom: 1rem; } .banner-content p { font-size: 1.2rem; margin-bottom: 2rem; } footer { background-color: #07080a; border-top: 1px solid rgba(255,255,255,0.05); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; } .footer-col h3, .footer-col h4 { color: var(--text-light); margin-bottom: 1.2rem; } .footer-col p, .footer-col a { display: block; margin-bottom: 0.8rem; color: var(--text-color); transition: var(--transition); } .footer-col a:hover { color: var(--accent-color); transform: translateX(4px); } .footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem; font-size: 0.9rem; } .page-header { padding: 4rem 0 2rem; text-align: center; } .page-header h1 { font-size: 3rem; color: var(--text-light); margin-bottom: 1rem; } .services-list { display: flex; flex-direction: column; gap: 2rem; padding: 2rem 0 6rem; } .service-item { display: flex; gap: 2.5rem; background-color: var(--surface-color); padding: 3rem; border-radius: 12px; align-items: center; border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); } .service-item:hover { border-color: var(--accent-color); transform: translateY(-5px) translateX(5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .service-icon { font-size: 3.5rem; color: var(--accent-color); min-width: 80px; text-align: center; transition: var(--transition); } .service-item:hover .service-icon { transform: scale(1.1); } .service-text h2 { color: var(--text-light); margin-bottom: 0.8rem; font-size: 1.8rem; } .gallery-section { padding: 2rem 0 6rem; } .gallery-filter { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; } .filter-btn { background-color: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.05); padding: 0.75rem 1.5rem; border-radius: 30px; cursor: pointer; font-weight: 600; transition: var(--transition); } .filter-btn.active, .filter-btn:hover { background-color: var(--accent-color); color: #000; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(197, 155, 39, 0.3); } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .gallery-card { background-color: var(--surface-color); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); } .gallery-card:hover { transform: translateY(-8px) scale(1.02); border-color: var(--accent-color); box-shadow: 0 15px 35px rgba(0,0,0,0.6); } .gallery-info { padding: 1.5rem; } .gallery-info h3 { color: var(--text-light); margin-bottom: 0.5rem; font-size: 1.2rem; } .booking-section, .contact-section { padding: 2rem 0 6rem; } .booking-card, .contact-info-box, .contact-form-box { background-color: var(--surface-color); padding: 3rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); } .booking-card:hover, .contact-info-box:hover, .contact-form-box:hover { border-color: rgba(197, 155, 39, 0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .booking-card { max-width: 800px; margin: 0 auto; } .booking-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { color: var(--text-light); font-weight: 500; font-size: 0.95rem; } .form-group input, .form-group select, .form-group textarea { background-color: #0b0c10; border: 1px solid rgba(255,255,255,0.1); padding: 1rem; border-radius: 4px; color: var(--text-light); font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.2); } .full-width { width: 100%; margin-top: 1rem; } .success-message { text-align: center; padding: 3rem 0; } .success-icon { font-size: 4rem; color: var(--accent-color); margin-bottom: 1.5rem; animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .success-message h2 { color: var(--text-light); font-size: 2rem; margin-bottom: 1rem; } .success-message p { margin-bottom: 2rem; } .hidden { display: none !important; } .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; } .contact-info-box { display: flex; flex-direction: column; gap: 2rem; } .contact-info-box h2 { color: var(--text-light); font-size: 2rem; } .contact-method { display: flex; gap: 1.5rem; align-items: flex-start; } .contact-method i { font-size: 1.5rem; color: var(--accent-color); margin-top: 0.2rem; } .contact-method h4 { color: var(--text-light); margin-bottom: 0.2rem; } @keyframes fadeIn { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .animate-fade-in { animation: fadeIn 0.8s ease forwards; } .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } @media(max-width: 900px) { .bento-grid, .gallery-grid, .footer-content, .contact-grid, .form-row { grid-template-columns: 1fr; } .bento-card.large { grid-column: span 1; } .nav-menu { display: none; position: absolute; top: 80px; left: 0; width: 100%; background-color: var(--surface-color); flex-direction: column; padding: 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .nav-menu.active { display: flex; animation: fadeIn 0.3s ease forwards; } .nav-cta { display: none; } .hamburger { display: block; } .service-item { flex-direction: column; text-align: center; gap: 1.5rem; } }

/* 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);
  }