/** * Modern theme: pin menu to viewport while scrolling down (desktop + mobile). * Loaded last in — pairs with ish-header-scroll.js (header.active / data-ish-header-scrolled). * Edition colors come from home-modern.css / home_modern inline — this file only handles layout + opacity. */ /* Scroll: hide top bar — only the menu pins (header scrolls away). */ body.ish-theme-modern:not(.ish-pref-picker-open) header.active .top-line, html[data-ish-header-scrolled="1"] body.ish-theme-modern:not(.ish-pref-picker-open) .top-line { height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: static !important; } /* ——— Pinned nav (all viewports) — layout + opaque shell, edition colors unchanged ——— */ body.ish-theme-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern, body.ish-home-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern .ish-nav-modern { position: fixed !important; z-index: 10002 !important; margin-top: 0 !important; margin-bottom: 0 !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate; } body.ish-theme-modern header.active .ish-nav-modern__bar, body.ish-theme-modern header.active .ish-nav-modern__bar-inner, body.ish-theme-modern header.active .ish-nav-modern__center, body.ish-theme-modern header.active .ish-nav-modern__panel, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern__bar, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern__bar-inner, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern__center, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern__panel { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Default cinema dark only — color editions keep their own palette from home-modern / inline CSS */ body.ish-theme-modern.ish-modern-dark header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern.ish-modern-dark .ish-nav-modern, body.ish-home-modern.ish-modern-dark header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern.ish-modern-dark .ish-nav-modern { background: #000000 !important; background-color: #000000 !important; background-image: none !important; } /* Color editions: solid gradient from edition tokens (matches resting menu) */ body.ish-theme-modern:is( .ish-modern-graphite, .ish-modern-ruby, .ish-modern-emerald, .ish-modern-teal, .ish-modern-cobalt, .ish-modern-gold, .ish-modern-rose, .ish-modern-lavender, .ish-modern-arctic, .ish-modern-copper ) header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern:is( .ish-modern-graphite, .ish-modern-ruby, .ish-modern-emerald, .ish-modern-teal, .ish-modern-cobalt, .ish-modern-gold, .ish-modern-rose, .ish-modern-lavender, .ish-modern-arctic, .ish-modern-copper ) .ish-nav-modern, body.ish-home-modern:is( .ish-modern-graphite, .ish-modern-ruby, .ish-modern-emerald, .ish-modern-teal, .ish-modern-cobalt, .ish-modern-gold, .ish-modern-rose, .ish-modern-lavender, .ish-modern-arctic, .ish-modern-copper ) header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern:is( .ish-modern-graphite, .ish-modern-ruby, .ish-modern-emerald, .ish-modern-teal, .ish-modern-cobalt, .ish-modern-gold, .ish-modern-rose, .ish-modern-lavender, .ish-modern-arctic, .ish-modern-copper ) .ish-nav-modern { color: var(--ish-mode-home-text, var(--ish-mode-text)) !important; background: linear-gradient(135deg, var(--ish-mode-home-surface, var(--ish-mode-surface)), var(--ish-mode-home-surface-2, var(--ish-mode-surface-2))) !important; border-color: var(--ish-mode-home-border, var(--ish-mode-border)) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 color-mix(in srgb, var(--ish-mode-home-text, var(--ish-mode-text)) 10%, transparent) !important; } /* Studio / light — solid cream (not semi-transparent rgba) when pinned */ body.ish-theme-modern.ish-modern-light header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern.ish-modern-light .ish-nav-modern, body.ish-home-modern.ish-modern-light header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern.ish-modern-light .ish-nav-modern { background: #fffaf0 !important; background-color: #fffaf0 !important; background-image: none !important; } /* ——— Desktop: flush header + menu (minimal gap) ——— */ @media (min-width: 992px) { body.ish-theme-modern .top-line, body.ish-home-modern .top-line { padding-top: 6px !important; padding-bottom: 2px !important; margin-bottom: 0 !important; } body.ish-theme-modern .ish-nav-modern, body.ish-home-modern .ish-nav-modern { margin-top: 0 !important; margin-bottom: 12px !important; } body.ish-theme-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern, body.ish-home-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern .ish-nav-modern { top: 0 !important; left: 50% !important; right: auto !important; transform: translate3d(-50%, 0, 0) !important; width: calc(100% - 32px) !important; max-width: 1300px !important; border-radius: 0 0 20px 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Spacer = pinned nav height (62px bar + borders) — flush with content */ body.ish-theme-modern header.active, html[data-ish-header-scrolled="1"] body.ish-theme-modern header, body.ish-home-modern header.active, html[data-ish-header-scrolled="1"] body.ish-home-modern header { padding-bottom: 64px !important; } body.ish-theme-modern header.active .ish-nav-modern::before, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern::before { display: none !important; content: none !important; } } /* ——— Mobile / tablet: full-width bar flush to top ——— */ @media (max-width: 991px) { body.ish-theme-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern, body.ish-home-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern .ish-nav-modern { top: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; padding-top: env(safe-area-inset-top, 0px) !important; } body.ish-theme-modern header.active, html[data-ish-header-scrolled="1"] body.ish-theme-modern header, body.ish-home-modern header.active, html[data-ish-header-scrolled="1"] body.ish-home-modern header { padding-bottom: calc(58px + env(safe-area-inset-top, 0px)) !important; } } /* Touch devices: same fixed pin (not sticky). */ @media (hover: none) and (pointer: coarse) { body.ish-theme-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-theme-modern .ish-nav-modern, body.ish-home-modern header.active .ish-nav-modern, html[data-ish-header-scrolled="1"] body.ish-home-modern .ish-nav-modern { position: fixed !important; } } /* Burger full-screen sheet — still allowed when open. */ @media (max-width: 991px) { body.ish-theme-modern .ish-nav-modern.ish-nav-modern--open, body.ish-home-modern .ish-nav-modern.ish-nav-modern--open { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; z-index: 10010 !important; transform: none !important; } }