/* Single owner of header/navigation/control geometry. Static, loaded in . */ .site-header { position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid var(--border); } .site-header .container { display:flex; align-items:center; height:64px; max-width:1200px; gap:8px; } .logo { display:inline-flex; align-items:center; flex:0 0 auto; } .logo-img { display:block; width:154px; height:34px; object-fit:contain; } .site-header .nav { display:flex; align-items:center; margin-left:24px; gap:4px; } .nav-item { position:static; } .nav-link { display:flex; align-items:center; gap:6px; padding:10px; border:0; background:none; color:var(--ink); font:inherit; font-size:.9rem; cursor:pointer; text-decoration:none; } .nav-link:hover,.dropdown-item:hover,.dropdown-all:hover { color:var(--brand); background:var(--bg-soft); text-decoration:none; } .caret { font-size:.7em; } .dropdown { display:none; position:fixed; top:64px; left:50%; transform:translateX(-50%); width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 76px); overflow:auto; overscroll-behavior:contain; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--bg); box-shadow:0 16px 40px -16px #0006; } .nav-item.open .dropdown,html:not(.js) .nav-item:hover .dropdown { display:block; } .mega-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .learn-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .mega-col { min-width:0; } .mega-label { padding:4px 10px 8px; color:var(--muted); text-transform:uppercase; font-size:.72rem; font-weight:700; letter-spacing:.08em; } .dropdown-item { display:block; padding:8px 10px; border-radius:6px; color:var(--ink); } .di-label { display:block; font-size:.87rem; font-weight:600; overflow-wrap:anywhere; } .di-desc { display:none; } .dropdown-all { display:block; margin-top:8px; padding:10px; border-top:1px solid var(--border); color:var(--brand); font-weight:600; font-size:.9rem; } .compact-label { display:none; } .search-trigger,.theme-btn,.nav-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink); cursor:pointer; font:inherit; } .search-trigger { margin-left:auto; width:190px; justify-content:flex-start; gap:8px; padding:0 12px; font-size:.85rem; } .search-kbd-inline { margin-left:auto; color:var(--muted); font-size:.72rem; } .theme-btn svg,.search-trigger svg { display:block; width:18px; height:18px; } .nav-toggle { display:none; font-size:22px; } .site-header :is(a,button):focus-visible { outline:2px solid var(--brand); outline-offset:2px; } [data-theme="dark"] .site-header .logo-img { filter:none; opacity:1; } body:has(.nav.open) .m-sticky { display:none; } @media (max-width:1120px) { .site-header .container { position:relative; flex-wrap:wrap; height:auto; min-height:68px; padding:12px 16px; gap:4px; } .site-header .logo { margin-right:auto; } .site-header .logo-img { width:140px; height:32px; } .search-trigger { width:44px; padding:0; justify-content:center; margin-left:0; } .search-trigger span,.search-kbd-inline { display:none; } .js .nav-toggle { display:inline-flex; } .site-header .nav { display:flex; order:5; flex-basis:100%; flex-direction:column; align-items:stretch; margin:0; gap:0; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:12px; } .js .site-header .nav { display:none; position:absolute; left:12px; right:12px; top:100%; max-height:calc(100dvh - 84px); overflow:auto; box-shadow:0 12px 32px -20px #0006; } .js .site-header .nav.open { display:flex; } .nav-item > .nav-link,.nav .mega-grid,.nav .dropdown-item { display:none; } .nav .dropdown { display:block; position:static; width:auto; transform:none; max-height:none; overflow:visible; padding:0; border:0; border-radius:0; box-shadow:none; background:none; } .nav .dropdown-all,.nav > .nav-link { display:flex; align-items:center; justify-content:space-between; min-height:48px; width:100%; padding:12px; margin:0; border:0; border-radius:8px; color:var(--ink); font-size:1rem; font-weight:600; } .nav .dropdown-all::after,.nav > .nav-link::after { content:'→'; color:var(--muted); font-weight:400; } .desktop-label { display:none; } .compact-label { display:inline; } } @media (max-width:359px) { .site-header .container { padding-inline:10px; gap:2px; } .site-header .logo-img { width:128px; } }