diff --git a/index.html b/index.html index 966a5ed..b418b45 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,33 @@ .topnav a .g{color:var(--acid)} .topnav a svg.tabicon{width:15px;height:15px;flex:none} + /* Mobile menu: a native
/ hamburger that holds the + contextual nav. Pure HTML+CSS, no JavaScript, keyboard-accessible. + Hidden on desktop (where the inline links show instead). */ + .topnav .menu{display:none} + @media (max-width:720px){ + .topnav{flex-wrap:nowrap;padding:10px 1rem} + .topnav .brand{margin-right:0} + /* Hide desktop inline nav + the floating Get CTA on mobile — the hero + sits one scroll away with its own download buttons. */ + .topnav > a:not(.brand){display:none} + .topnav .menu{display:block;margin-left:auto;position:relative} + .topnav .menu > summary{list-style:none;cursor:pointer;padding:8px 10px; + border-radius:8px;color:var(--mut);display:inline-flex;align-items:center;gap:6px} + .topnav .menu > summary::-webkit-details-marker{display:none} + .topnav .menu > summary svg{width:22px;height:22px;display:block} + .topnav .menu > summary:hover, + .topnav .menu[open] > summary{color:var(--ink);background:var(--panel)} + .topnav .menu .menu-panel{position:absolute;top:calc(100% + 6px);right:0; + background:var(--bg);border:1px solid var(--line);border-radius:12px; + padding:6px;min-width:200px;display:flex;flex-direction:column;gap:2px; + box-shadow:0 10px 32px rgba(0,0,0,.55)} + .topnav .menu .menu-panel a{padding:10px 14px;border-radius:8px;font-size:14.5px; + color:var(--mut);text-decoration:none;display:flex;align-items:center;gap:8px} + .topnav .menu .menu-panel a:hover{color:var(--ink);background:var(--panel)} + .topnav .menu .menu-panel a svg.tabicon{width:16px;height:16px} + } + /* Adaptive edge nav: full-width panel at left edge on wide, icon rail on medium, bottom bar with icons on mobile. Topnav is fixed at the top spanning the full width; sidebar starts @@ -177,10 +204,23 @@ Plug-ins Extensions - Brand - Whitepaper Sirius.X Get Theseus + +