.site-header { position: relative; z-index: 800; min-height: 6.75rem; }
.site-header__utility { height: 1.75rem; overflow: hidden; background: var(--color-deep-graphite); border-bottom: 1px solid rgba(238,229,213,.1); color: var(--color-smoke-grey); font-size: var(--text-micro); font-weight: 700; line-height: 1.75rem; letter-spacing: var(--tracking-utility); text-transform: uppercase; white-space: nowrap; }
.site-header__utility-inner { width: min(100% - (var(--gutter) * 2), var(--container-max)); margin-inline: auto; }
.site-header__utility span { margin-inline: .45rem; color: var(--color-copper); }
.site-header__shell { min-height: 5rem; border-bottom: 1px solid var(--color-border-dark); background: var(--color-surface-glass); transition: min-height var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); }
@supports (backdrop-filter: blur(14px)) { .site-header__shell { backdrop-filter: blur(14px); } }
.site-header__row { display: grid; min-height: 5rem; grid-template-columns: minmax(9rem,1fr) auto minmax(12rem,1fr); align-items: center; gap: var(--space-4); }
.site-header__brand { display: inline-flex; min-width: 0; align-items: center; justify-self: start; gap: .65rem; color: var(--color-warm-linen); text-decoration: none; z-index:999 }
.site-header__brand img { width: 2.125rem; height: 2.125rem; flex: 0 0 auto; object-fit: contain; }
.site-header__brand-name { overflow: hidden; font-size: .7rem; font-weight: 700; letter-spacing: var(--tracking-utility); text-overflow: ellipsis; white-space: nowrap; }
.site-header__navigation { min-width: 0; }
.site-header__nav-list { display: flex; align-items: center; gap: clamp(.8rem,1.6vw,1.5rem); padding: 0; margin: 0; list-style: none; }
.site-header__nav-list li, .site-header__nav-list li + li { padding: 0; margin: 0; }
.site-header__nav-list a { position: relative; display: block; padding-block: .45rem; color: var(--color-warm-linen); font-size: var(--text-navigation); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__nav-list a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--color-cobalt-night); content: ''; transform: scaleX(0); transform-origin: left; transition: transform var(--transition-transform); }
.site-header__nav-list a:hover::after, .site-header__nav-list a[aria-current='page']::after { transform: scaleX(1); }
.site-header__actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.site-header__cta { min-height: 2.75rem; padding-inline: .9rem; white-space: nowrap; }
.site-header__toggle, .site-header__mobile-heading { display: none; }
.site-header__menu-panels { display: contents; }
.site-header--compressed { height: 4rem; }
.site-header--compressed .site-header__utility { display: none; }
.site-header--compressed .site-header__shell { position: fixed; z-index: 800; top: 0; right: 0; left: 0; min-height: 4rem; border-bottom: 2px solid var(--color-cobalt-night); background: var(--color-deep-graphite); box-shadow: var(--shadow-floating); }
.site-header--compressed .site-header__row { min-height: 4rem; }
.site-header--compressed + * { scroll-margin-top: 5rem; }
@media (max-width: 67.9375rem) { .site-header { min-height: 5.75rem; } .site-header__utility { height: 1.75rem; } .site-header__shell, .site-header__row { min-height: 4rem; } .site-header__row { grid-template-columns: 1fr auto auto; } .site-header__actions { display: none; } .site-header__toggle { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; flex-direction: column; gap: .3rem; padding: 0; border: 1px solid var(--color-border-dark); border-radius: var(--radius-control); background: var(--color-graphite-lift); z-index:999 } .site-header__toggle span { width: 1.25rem; height: 1px; background: var(--color-warm-linen); transition: transform var(--transition-transform), opacity var(--transition-fast); } .site-header--menu-open .site-header__toggle span:nth-child(1) { transform: translateY(.4rem) rotate(45deg); } .site-header--menu-open .site-header__toggle span:nth-child(2) { opacity: 0; } .site-header--menu-open .site-header__toggle span:nth-child(3) { transform: translateY(-.4rem) rotate(-45deg); } .site-header__navigation { position: fixed; z-index: 790; top: 0; right: 0; bottom: 0; left: 0; display: block; visibility: hidden; overflow-y: auto; overflow-x: hidden; background: var(--color-blackened-aluminium); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), visibility var(--transition-fast); } .site-header--menu-open .site-header__navigation { visibility: visible; opacity: 1; pointer-events: auto; height:100vh } .site-header__mobile-heading { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; padding: 0 var(--gutter); border-bottom: 1px solid var(--color-border-dark); color: var(--color-limestone); font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-utility); text-transform: uppercase; } .site-header__mobile-close { padding: .45rem 0; border: 0; background: transparent; color: var(--color-warm-linen); font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-transform: uppercase; } .site-header__menu-panels { display: grid; min-height: calc(100dvh - 4.5rem); grid-template-columns: repeat(2,minmax(0,1fr)); } .site-header__menu-panel { display: flex; min-width: 0; flex-direction: column; justify-content: end; padding: clamp(1.5rem,6vw,4rem); background-color: var(--color-graphite-lift); background-position: center; background-size: cover; background-blend-mode: overlay; } .site-header__menu-panel--dining { background-image: linear-gradient(rgba(11,13,14,.42),rgba(11,13,14,.78)),url('/public/media/cityforkk-shared-table.webp'); border-right: 1px solid var(--color-border-dark); } .site-header__menu-panel--casino { background-image: linear-gradient(rgba(11,13,14,.42),rgba(11,13,14,.78)),url('/public/media/blackjack-table-arrival.webp'); } .site-header__menu-panel h2 { margin: 0 0 var(--space-6); font-size: clamp(2.5rem,6vw,4rem); } .site-header__nav-list { align-items: stretch; flex-direction: column; gap: var(--space-3); } .site-header__nav-list a { width: fit-content; font-size: .76rem; } .site-menu-open { overflow: hidden; } }
@media (max-width: 47.9375rem) { .site-header__utility-inner { width: 100%; padding-inline: var(--gutter); } .site-header__brand img { width: 1.75rem; height: 1.75rem; } .site-header__brand-name { font-size: .625rem; } .site-header__menu-panels { grid-template-columns: 1fr; } .site-header__menu-panel { min-height: 50dvh; padding: var(--space-8) var(--gutter); } .site-header__menu-panel h2 { margin-bottom: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .site-header__shell, .site-header__toggle span, .site-header__navigation, .site-header__nav-list a::after { transition: none; } }