/* The ONE header and footer for roroquantum.com. * * Every public page carries the same header markup (see apps/landing/scripts/sync-nav.py — it * stamps the canonical block into each page; edit the script, then run it) and links this file * LAST in , so these rules win over any page's own leftovers. Selectors are prefixed with * `header.nav[data-nav]` on purpose: that attribute is the marker of the canonical block, and * the extra specificity beats page-local `.nav-in` / `.nav-links a` rules without !important. * * Two palettes, one component: light (default) and `data-theme="dark"` for the hardware page, * whose whole body is dark. Same links, same layout, same behaviour either way. */ header.nav[data-nav]{ --nav-bg:rgba(255,255,255,.96); --nav-line:#e6e6e6; --nav-ink:#000; --nav-mu:#6b6b6b; --nav-hover:#f4f4f4; --nav-btn-line:#d4d4d4; --nav-panel:#fff; position:sticky; top:0; left:auto; right:auto; z-index:80; background:var(--nav-bg); border-bottom:1px solid var(--nav-line); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); transition:box-shadow .18s ease; font-family:'Inter',system-ui,sans-serif; } header.nav[data-nav][data-theme="dark"]{ --nav-bg:rgba(8,8,10,.86); --nav-line:rgba(255,255,255,.1); --nav-ink:#fff; --nav-mu:rgba(255,255,255,.62); --nav-hover:rgba(255,255,255,.07); --nav-btn-line:rgba(255,255,255,.28); --nav-panel:#0b0b0d; } header.nav[data-nav].nav-scrolled{box-shadow:0 8px 30px rgba(0,0,0,.07)} header.nav[data-nav][data-theme="dark"].nav-scrolled{box-shadow:0 8px 30px rgba(0,0,0,.5)} header.nav[data-nav] .nav-in{ max-width:1140px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; gap:22px; } header.nav[data-nav] .brand{ display:flex; align-items:center; gap:11px; font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--nav-ink); white-space:nowrap; text-decoration:none; } header.nav[data-nav] .brand .mark{ width:32px; height:32px; border-radius:8px; background:var(--nav-ink); color:var(--nav-panel); display:grid; place-items:center; font-size:16px; flex:0 0 auto; } header.nav[data-nav][data-theme="dark"] .brand .mark{background:#fff; color:#000} header.nav[data-nav] .nav-links{display:flex; gap:1px; margin-left:10px} header.nav[data-nav] .nav-links a{ padding:8px 13px; border-radius:8px; color:var(--nav-mu); font-size:14px; font-weight:500; transition:.15s; white-space:nowrap; text-decoration:none; position:relative; } header.nav[data-nav] .nav-links a:hover{color:var(--nav-ink); background:var(--nav-hover)} header.nav[data-nav] .nav-links a.on{color:var(--nav-ink); font-weight:600; background:transparent} header.nav[data-nav] .nav-links a.on:hover{background:var(--nav-hover)} header.nav[data-nav] .nav-links a.on::after{ content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; background:var(--nav-ink); border-radius:2px; } header.nav[data-nav] .nav-right{margin-left:auto; display:flex; align-items:center; gap:8px} header.nav[data-nav] .btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:8px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border:1.5px solid transparent; transition:.16s; white-space:nowrap; text-decoration:none; box-shadow:none; } header.nav[data-nav] .btn.btn-primary{background:var(--nav-ink); color:var(--nav-panel); border-color:var(--nav-ink)} header.nav[data-nav] .btn.btn-primary:hover{background:transparent; color:var(--nav-ink)} header.nav[data-nav] .btn.btn-ghost{background:transparent; border-color:var(--nav-btn-line); color:var(--nav-ink)} header.nav[data-nav] .btn.btn-ghost:hover{border-color:var(--nav-ink)} /* the Menu button: two lines + word, opens the full-screen index */ header.nav[data-nav] .nav-menu{ display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 14px 0 12px; flex:0 0 auto; border:1.5px solid var(--nav-btn-line); border-radius:8px; background:transparent; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--nav-ink); transition:.15s; } header.nav[data-nav] .nav-menu:hover{border-color:var(--nav-ink); background:var(--nav-hover)} header.nav[data-nav] .nav-menu .nm-lines{display:inline-flex; flex-direction:column; gap:5px; width:18px} header.nav[data-nav] .nav-menu .nm-lines i{display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, width .2s ease} header.nav[data-nav] .nav-menu:hover .nm-lines i:last-child{transform:translateX(3px)} header.nav[data-nav] .nav-menu[aria-expanded="true"] .nm-lines i:first-child{transform:translateY(3.5px) rotate(45deg)} header.nav[data-nav] .nav-menu[aria-expanded="true"] .nm-lines i:last-child{transform:translateY(-3.5px) rotate(-45deg)} @media(max-width:900px){ header.nav[data-nav] .nav-links{display:none} header.nav[data-nav] .nav-menu .nm-txt{display:none} header.nav[data-nav] .nav-menu{padding:0 11px} } @media(max-width:600px){ header.nav[data-nav] .nav-in{gap:10px} header.nav[data-nav] .brand{font-size:15.5px} header.nav[data-nav] .nav-right{gap:6px} header.nav[data-nav] .nav-right .btn{padding:9px 13px; font-size:13.5px} } @media(max-width:350px){ header.nav[data-nav] .brand{font-size:0} /* mark only */ header.nav[data-nav] .brand .mark{font-size:16px} } /* ── the site index: one full-screen sheet, every destination with a line of guidance ──────── */ .site-index[data-index]{ position:fixed; inset:0; z-index:200; background:#050506; color:#fff; overflow:auto; font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .22s ease, transform .22s ease; } .site-index[data-index][hidden]{display:block} /* stay in the layout tree; visibility is the animated pair below */ .site-index[data-index].is-open{opacity:1; transform:none; pointer-events:auto} .site-index[data-index]::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60% 40% at 80% 0%, rgba(255,255,255,.07), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px); } .site-index[data-index] .si-in{position:relative; max-width:1140px; margin:0 auto; padding:0 24px 40px; min-height:100%; display:flex; flex-direction:column} .site-index[data-index] .si-top{height:66px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1)} .site-index[data-index] .brand{ display:flex; align-items:center; gap:11px; font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; color:#fff; text-decoration:none; } .site-index[data-index] .brand .mark{width:32px; height:32px; border-radius:8px; background:#fff; color:#000; display:grid; place-items:center; font-size:16px} .site-index[data-index] .si-close{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:1.5px solid rgba(255,255,255,.28); border-radius:8px; background:transparent; color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; } .site-index[data-index] .si-close:hover{border-color:#fff; background:rgba(255,255,255,.07)} .site-index[data-index] .si-cols{ display:grid; grid-template-columns:1.35fr 1fr .8fr; gap:48px; padding:52px 0 40px; flex:1; } .site-index[data-index] .mi-col h3{ margin:0 0 18px; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); } .site-index[data-index] .mi-col a{ display:block; padding:12px 0; text-decoration:none; color:#fff; border-top:1px solid rgba(255,255,255,.08); transition:.15s; } .site-index[data-index] .mi-col a:last-child{border-bottom:1px solid rgba(255,255,255,.08)} .site-index[data-index] .mi-col a .t{ display:block; font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; letter-spacing:-.02em; font-size:26px; line-height:1.15; transition:transform .18s ease; } .site-index[data-index] .mi-col a .d{display:block; margin-top:4px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.58); max-width:420px} .site-index[data-index] .mi-col a:hover .t{transform:translateX(6px)} .site-index[data-index] .mi-col a:hover .d{color:rgba(255,255,255,.8)} .site-index[data-index] .mi-col a.on .t::after{content:" ●"; font-size:.5em; vertical-align:middle; margin-left:4px; color:#7CFFB2} .site-index[data-index] .mi-col:nth-child(2) a .t{font-size:22px} .site-index[data-index] .mi-col:nth-child(3) a .t{font-size:20px} .site-index[data-index] .si-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); } .site-index[data-index] .si-note{font-size:13.5px; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:10px} .site-index[data-index] .si-note .dot{width:8px; height:8px; border-radius:50%; background:#7CFFB2; box-shadow:0 0 0 4px rgba(124,255,178,.18); flex:0 0 auto} .site-index[data-index] .si-cta{display:flex; gap:10px} .site-index[data-index] .btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:8px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border:1.5px solid transparent; transition:.16s; white-space:nowrap; text-decoration:none; } .site-index[data-index] .btn-light{background:#fff; color:#000; border-color:#fff} .site-index[data-index] .btn-light:hover{background:transparent; color:#fff} .site-index[data-index] .btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)} .site-index[data-index] .btn-outline:hover{border-color:#fff} /* stagger the rows in */ .site-index[data-index] .mi-col a{opacity:0; transform:translateY(8px)} .site-index[data-index].is-open .mi-col a{opacity:1; transform:none; transition:opacity .35s ease, transform .35s ease, color .15s} .site-index[data-index].is-open .mi-col:nth-child(1) a{transition-delay:.06s} .site-index[data-index].is-open .mi-col:nth-child(2) a{transition-delay:.12s} .site-index[data-index].is-open .mi-col:nth-child(3) a{transition-delay:.18s} html.si-lock, html.si-lock body{overflow:hidden} @media(max-width:900px){ .site-index[data-index] .si-cols{grid-template-columns:1fr; gap:26px; padding:28px 0 28px} .site-index[data-index] .mi-col a .t, .site-index[data-index] .mi-col:nth-child(2) a .t, .site-index[data-index] .mi-col:nth-child(3) a .t{font-size:20px} .site-index[data-index] .mi-col a{padding:10px 0} .site-index[data-index] .mi-col a .d{font-size:12.5px} .site-index[data-index] .si-foot{flex-direction:column; align-items:flex-start} .site-index[data-index] .si-cta{width:100%} .site-index[data-index] .si-cta .btn{flex:1; justify-content:center} } @media(prefers-reduced-motion:reduce){ .site-index[data-index], .site-index[data-index] .mi-col a, .site-index[data-index] .mi-col a .t{transition:none !important} } /* ── the footer, same everywhere ─────────────────────────────────────────────────────────── */ footer.site-foot[data-foot]{ --f-line:#e6e6e6; --f-mu:#6b6b6b; --f-ink:#000; --f-bg:#fff; border-top:1px solid var(--f-line); padding:44px 0 30px; background:var(--f-bg); color:var(--f-ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6; } footer.site-foot[data-foot][data-theme="dark"]{--f-line:rgba(255,255,255,.1); --f-mu:rgba(255,255,255,.6); --f-ink:#fff; --f-bg:#060608} footer.site-foot[data-foot] .wrap{max-width:1140px; margin:0 auto; padding:0 24px} footer.site-foot[data-foot] .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px} @media(max-width:840px){footer.site-foot[data-foot] .foot-grid{grid-template-columns:1fr 1fr}} footer.site-foot[data-foot] .brand{ display:flex; align-items:center; gap:11px; font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--f-ink); text-decoration:none; } footer.site-foot[data-foot] .brand .mark{width:32px; height:32px; border-radius:8px; background:var(--f-ink); color:var(--f-bg); display:grid; place-items:center; font-size:16px} footer.site-foot[data-foot] .foot-brand p{margin:12px 0 0; font-size:13.5px; color:var(--f-mu); max-width:280px} footer.site-foot[data-foot] .foot-col h4{font-size:13px; margin:0 0 12px; font-family:'Inter',system-ui,sans-serif; font-weight:700} footer.site-foot[data-foot] .foot-col a{display:block; font-size:13.5px; color:var(--f-mu); padding:4px 0; text-decoration:none} footer.site-foot[data-foot] .foot-col a:hover{color:var(--f-ink)} footer.site-foot[data-foot] .foot-bot{ display:flex; gap:18px; align-items:center; margin-top:34px; padding-top:20px; border-top:1px solid var(--f-line); font-size:12.5px; color:var(--f-mu); flex-wrap:wrap; } footer.site-foot[data-foot] .foot-bot a{color:inherit; text-decoration:none} footer.site-foot[data-foot] .foot-bot a:hover{color:var(--f-ink)} footer.site-foot[data-foot] .foot-bot .sp{flex:1} footer.site-foot[data-foot] .mono{font-family:'JetBrains Mono',monospace} footer.site-foot[data-foot] .foot-note{margin:22px 0 0; font-size:12.5px; color:var(--f-mu); opacity:.85; max-width:900px}