Embed

<section class="neliarabi-header-only">
  <header class="site-header">
    <div class="header-inner">
      <div class="header-left">
        <a href="https://neliarabi.de/contact" class="lux-btn">CONTACT US</a>
      </div>

      <div class="site-brand">
        <a href="https://neliarabi.de/" class="brand-name">NELI ARABI</a>
      </div>

      <div class="header-right">
        <span class="menu-text">MENU</span>
        <div class="menu-icon" id="menuIconBtn">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </header>

  <div class="nav-overlay" id="navOverlay">
    <button class="close-overlay" id="closeOverlayBtn" aria-label="close menu">
      <i class="fas fa-times"></i>
    </button>
    <div class="nav-menu-centered">
      <ul class="nav-list">
        <li><a href="https://neliarabi.de/">HOME</a></li>
        <li><a href="https://neliarabi.de/About">ABOUT</a></li>
        <li><a href="/exclusive-area">EXCLUXIVE AREA</a></li>
        <li><a href="/private-consultation">PRIVATE CONSULTATION</a></li>
        <li class="mobile-contact-li"><a href="/contact" class="mobile-lux-btn">CONTACT US</a></li>
      </ul>
      <div class="nav-footer-text">
        <i class="fas fa-feather-alt"></i> essence of slow elegance
      </div>
    </div>
  </div>
</section>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: linear-gradient(145deg, #2c2c28 0%, #1a1a18 100%);
    height: 100vh;
    overflow: auto;
  }

  /* Prevent scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }

  .neliarabi-header-only {
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-bottom: -80px;
    position: relative;
    font-family: 'Roboto', sans-serif;
  }

  .site-header {
    background-color: transparent !important;
    width: 100%;
    position: relative;
    z-index: 1000;
    backdrop-filter: none;
    box-shadow: none;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
    width: 100%;
  }

  .header-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .lux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    font-size: 16px;
    color: #d4af37; /* Gold text */
    background: transparent;
    border: none;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .lux-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: #d4af37; /* Gold underline */
    transition: all 0.4s ease;
  }

  .lux-btn:hover::after {
    width: 70%;
    background: #f5e6a3; /* Lighter gold on hover */
  }

  .lux-btn:hover {
    opacity: 0.85;
    color: #f5e6a3;
  }

  .site-brand {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .brand-name {
    font-family: 'Cinzel', 'Playfair Display', 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #d4af37; /* Gold text */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
  }

  .brand-name::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #d4af37; /* Gold underline */
    transition: width 0.3s ease;
  }

  .brand-name:hover::after {
    width: 60%;
  }

  .brand-name:hover {
    opacity: 0.9;
    letter-spacing: 0.14em;
    color: #f5e6a3;
  }

  .header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .menu-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d4af37; /* Gold text */
  }

  .menu-icon {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .menu-icon:hover {
    opacity: 0.8;
  }

  .menu-icon span {
    display: block;
    height: 2px;
    background: #d4af37; /* Gold lines */
    transition: all 0.3s ease;
  }

  .menu-icon span:nth-child(1) {
    width: 100%;
  }
  .menu-icon span:nth-child(2) {
    width: 70%;
  }
  .menu-icon span:nth-child(3) {
    width: 50%;
  }

  .menu-icon.active span:nth-child(1) {
    width: 100%;
    transform: translateY(8px) rotate(45deg);
  }
  .menu-icon.active span:nth-child(2) {
    width: 100%;
    opacity: 0;
    transform: scaleX(0);
  }
  .menu-icon.active span:nth-child(3) {
    width: 100%;
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
    z-index: 1050;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-overlay.active {
    visibility: visible;
    opacity: 1;
  }
  .nav-menu-centered {
    text-align: center;
    transform: translateY(-20px);
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);
  }
  .nav-overlay.active .nav-menu-centered {
    transform: translateY(0);
  }
  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .nav-list li {
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
  }
  .nav-list a {
    text-decoration: none;
    color: #d4af37; /* Gold text */
    transition: all 0.2s;
    letter-spacing: -0.01em;
    padding: 0.3rem 0.8rem;
    display: inline-block;
    border-bottom: 1.5px solid transparent;
  }
  .nav-list a:hover {
    color: #f5e6a3; /* Lighter gold on hover */
    border-bottom-color: #d4af37;
    transform: translateY(-2px);
  }
  .nav-footer-text {
    margin-top: 3rem;
    font-size: 0.8rem;
    color: #d4af37;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
  }

  .close-overlay {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #d4af37;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .close-overlay:hover {
    transform: scale(1.1);
    color: #f5e6a3;
  }

  .mobile-contact-li {
    display: none;
  }
  .mobile-lux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    font-size: 1.2rem;
    color: #d4af37;
    background: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
  }
  .mobile-lux-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: #d4af37;
    transition: all 0.4s ease;
  }
  .mobile-lux-btn:hover::after {
    width: 70%;
    background: #f5e6a3;
  }
  .mobile-lux-btn:hover {
    color: #f5e6a3;
  }

  /* Tablet Styles */
  @media (min-width: 769px) and (max-width: 1024px) {
    .neliarabi-header-only {
      width: 90%;
      margin-bottom: -70px;
    }
    .header-inner {
      padding: 1rem 0;
    }
    .brand-name {
      font-size: 1.2rem;
      letter-spacing: 0.08em;
    }
    .lux-btn {
      font-size: 12px;
      padding: 8px 18px;
    }
    .menu-text {
      font-size: 0.65rem;
    }
    .menu-icon {
      width: 32px;
      gap: 5px;
    }
    .menu-icon span {
      height: 1.8px;
    }
    .header-right {
      gap: 0.5rem;
    }
  }

  @media (max-width: 768px) {
    .neliarabi-header-only {
      width: 92%;
      margin-bottom: -45px;
    }
    .header-inner {
      padding: 0.7rem 0;
    }
    .brand-name {
      font-size: 0.9rem;
      letter-spacing: 0.06em;
    }
    .lux-btn {
      font-size: 10px;
      padding: 6px 12px;
    }
    .menu-text {
      display: none;
    }
    .menu-icon {
      width: 28px;
      gap: 4px;
      padding: 4px 0;
    }
    .menu-icon span {
      height: 1.5px;
    }
    .site-brand {
      justify-content: flex-start;
      flex: 2;
    }
    .header-left {
      flex: 0;
    }
    .header-left .lux-btn {
      display: none;
    }
    .header-right {
      flex: 0;
      gap: 0;
    }
    .mobile-contact-li {
      display: block;
    }
    .nav-list li {
      font-size: 1.3rem;
    }
    .menu-icon.active span:nth-child(1) {
      transform: translateY(5px) rotate(45deg);
    }
    .menu-icon.active span:nth-child(3) {
      transform: translateY(-5px) rotate(-45deg);
    }
  }

  @media (max-width: 480px) {
    .brand-name {
      font-size: 0.8rem;
      letter-spacing: 0.05em;
    }
    .menu-icon {
      width: 24px;
      gap: 3px;
    }
    .menu-icon span {
      height: 1.3px;
    }
    .mobile-lux-btn {
      font-size: 0.85rem;
      padding: 6px 14px;
    }
    .nav-list li {
      font-size: 1.1rem;
    }
    .nav-footer-text {
      font-size: 0.65rem;
    }
    .close-overlay {
      top: 1rem;
      right: 1.5rem;
      font-size: 1.5rem;
    }
  }
</style>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

<script>
  (function() {
    const menuIcon = document.getElementById('menuIconBtn');
    const overlay = document.getElementById('navOverlay');
    const closeBtn = document.getElementById('closeOverlayBtn');
    const navLinks = document.querySelectorAll('.nav-list a');
    const brandLink = document.querySelector('.brand-name');

    function openMenu() {
      overlay.classList.add('active');
      menuIcon.classList.add('active');
      document.body.classList.add('menu-open');
    }

    function closeMenu() {
      overlay.classList.remove('active');
      menuIcon.classList.remove('active');
      document.body.classList.remove('menu-open');
    }

    if (menuIcon) {
      menuIcon.addEventListener('click', (e) => {
        e.stopPropagation();
        if (overlay.classList.contains('active')) {
          closeMenu();
        } else {
          openMenu();
        }
      });
    }

    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        closeMenu();
      });
    }

    // Close menu when clicking links, then navigate
    navLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        const href = link.getAttribute('href');
        if (href && href !== '#' && href !== '') {
          closeMenu();
          return true;
        }
        e.preventDefault();
        closeMenu();
      });
    });

    if (brandLink) {
      brandLink.addEventListener('click', () => {
        closeMenu();
      });
    }

    // Close overlay when clicking on the background
    if (overlay) {
      overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
          closeMenu();
        }
      });
    }

    // Close menu on ESC key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && overlay.classList.contains('active')) {
        closeMenu();
      }
    });
  })();
</script>

<section class="mem-hero">
  <div class="mem-hero__bg">
    <img src="https://ik.imagekit.io/l5ijbwd6ie/neliarabi.de/openart-sample_1778167333592_e20037f7.png" alt="Exclusive Area"/>
  </div>
  <div class="mem-hero__overlay"></div>
  <div class="mem-hero__content">
    <div class="mem-hero__badge">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      </svg>
      <span>Private Members Area</span>
    </div>
    <h1 class="mem-hero__title">
      <span class="title-line">Welcome to the</span>
      <span class="title-highlight">Inner Circle.</span>
    </h1>
    <p class="mem-hero__sub">Reserved exclusively for those whose standards admit no compromise. Explore curated collections, private events, and a concierge portal available only to members.</p>
  </div>
</section>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Member hero - Redesigned */
  .mem-hero {
    position: relative;
    height: 1000px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    width: 100%;
    background-color: #0a0a0a;
  }

  .mem-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .mem-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Lighter black overlay */
  .mem-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
  }

  .mem-hero__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    width: 90%;
    text-align: left;
    padding: 0 0 100px 40px;
    margin: 0;
  }

  /* Badge */
  .mem-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 50px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #d4af37;
    margin-bottom: 30px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
  }

  .mem-hero__badge:hover {
    border-color: #d4af37;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
  }

  .mem-hero__badge svg {
    flex-shrink: 0;
    color: #d4af37;
  }

  /* Title styling */
  .mem-hero__title {
    margin-bottom: 25px;
  }

  .title-line {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(40px, 6vw, 65px);
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  }

  .title-highlight {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(55px, 8vw, 90px);
    font-weight: 500;
    background: linear-gradient(135deg, #d4af37 0%, #f5e6a3 40%, #e8c84a 60%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 5px;
    text-shadow: none;
  }

  /* Subtitle */
  .mem-hero__sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    max-width: 500px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .mem-hero {
      height: 900px;
    }
    .mem-hero__content {
      padding: 0 0 80px 30px;
    }
    .title-line {
      font-size: clamp(35px, 5vw, 50px);
    }
    .title-highlight {
      font-size: clamp(45px, 7vw, 70px);
    }
    .mem-hero__sub {
      font-size: 0.9rem;
      max-width: 450px;
    }
  }

  @media (max-width: 768px) {
    .mem-hero {
      height: 900px;
    }
    .mem-hero__content {
      padding: 0 0 60px 20px;
      max-width: 90%;
    }
    .mem-hero__badge {
      font-size: 0.55rem;
      padding: 6px 14px;
      margin-bottom: 20px;
    }
    .title-line {
      font-size: clamp(28px, 5vw, 40px);
    }
    .title-highlight {
      font-size: clamp(35px, 6vw, 55px);
    }
    .mem-hero__sub {
      font-size: 0.85rem;
      max-width: 400px;
    }
  }

  @media (max-width: 480px) {
    .mem-hero {
      height: 900px;
    }
    .mem-hero__content {
      padding: 0 0 50px 15px;
      max-width: 95%;
    }
    .mem-hero__badge {
      font-size: 0.5rem;
      gap: 6px;
      padding: 6px 12px;
    }
    .title-line {
      font-size: clamp(24px, 4vw, 32px);
    }
    .title-highlight {
      font-size: clamp(30px, 5vw, 42px);
    }
    .mem-hero__sub {
      font-size: 0.75rem;
      line-height: 1.6;
      max-width: 350px;
    }
  }
</style>

Neli Arabi GmbH

Provider of exclusive luxury services including bespoke construction, premium real estate, luxury trading and private events. Primary colors are black, gold and white.

Welcome to the Inner Circle.