site-header

Summary

A fixed transparent header with three columns: logo on the left, a centered nav with two-digit prefixes (01 / WORKS), and contact info plus a MENU button on the right. On mobile the centre nav and contact column collapse, leaving only logo and MENU which opens the offcanvas drawer.

HTML structure (minimal)

<header class="tf-header">
  <div class="header-inner">
    <div class="container">
      <div class="row">
        <div class="col-6 col-md-1">
          <a href="index.html" class="logo-site"><i class="icon icon-davies-logo"></i></a>
        </div>
        <div class="col-7 d-none d-md-block">
          <ul class="nav-menu-main">
            <li class="menu-item"><a href="#workScroll" class="item-link link text-caption"><span>01 /</span>WORKS</a></li>
            <li class="menu-item"><a href="#serviceScroll"><span>02 /</span>SERVICES</a></li>
            <li class="menu-item"><a href="#aboutScroll"><span>03 /</span>ABOUT</a></li>
            <li class="menu-item"><a href="#contactScroll"><span>04 /</span>CONTACT</a></li>
          </ul>
        </div>
        <div class="col-3 col-md-2 d-none d-sm-block">
          <a href="mailto:davies@gmail.com" class="link text-caption">DAVIES@GMAIL.COM</a>
          <p class="text-caption">CUP <span class="clock"></span></p>
        </div>
        <div class="col-6 col-sm-3 col-md-2 d-flex justify-content-end">
          <button type="button" class="btn-mobile-menu open-mb-menu">
            <i class="icon icon-menu"></i> MENU
          </button>
        </div>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

.tf-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 24px 0;

  .nav-menu-main {
    display: flex;
    gap: 32px;
    .item-link span { color: var(--white-64); margin-right: 6px; }
  }
}

Animation logic

// assets/js/main.js — updateClock()
function startClocks(selector = '.clock') {
  function updateClock() {
    document.querySelectorAll(selector).forEach((el) => {
      const now = new Date();
      el.textContent =
        String(now.getHours()).padStart(2, '0') + ':' +
        String(now.getMinutes()).padStart(2, '0');
    });
  }
  updateClock();
  setInterval(updateClock, 1000);
}

Notable details

• "CUP HH:MM" uses a live local clock — the label is fixed copy meant to suggest the studio's local timezone (likely Cupertino).
• Numbered nav items (01 /, 02 / …) are rendered as <span> siblings, not pseudo-elements, which keeps them selectable and easy to translate.
• open-mb-menu is the same class used by every mobile menu trigger across pages — the offcanvas listener delegates from body so it works for cloned triggers too.

Use when

• Studio / portfolio sites where a numeric nav reads as "agency-grade".
• Pages that need a live clock as a brand-personality detail.

Caveats

• The clock is purely client-side local time — does not honour visitor timezone vs. a target timezone.
• Header is fully transparent over the hero — relies on the dark video for legibility; if you swap the hero, add a fallback background.