/** * Shared nav + footer styles for visualisation pages (flex/full-viewport layout). * Root pages use root-pages.css instead (position:fixed nav variant). * * Usage: add in * before any page-specific styles, then load /assets/js/layout.js. */ /* ── Design tokens ─────────────────────────────────────── */ :root { --bg: #1f2230; --surface: #262a3a; --surface-alt: #2f3445; --border: #3c4259; --text: #dde1ea; --text-muted: #8892a4; --accent: #6478b8; --input-bg: #1a1e2e; --radius: 5px; --nav-h: 64px; } /* ── Navbar ─────────────────────────────────────────────── */ .site-nav { flex-shrink: 0; height: var(--nav-h); background: var(--surface-alt); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 16px; z-index: 100; } .brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .brand img { display: block; max-height: 50px; width: auto; } .nav-links { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 2px; } .nav-links a { display: block; padding: 5px 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-muted); text-decoration: none; border-radius: var(--radius); transition: color 0.15s, background 0.15s; } .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; margin-left: auto; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; } /* ── Footer ─────────────────────────────────────────────── */ .site-footer { flex-shrink: 0; background: #12131a; border-top: 1px solid var(--border); padding: 5px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; } .site-footer a { color: var(--text-muted); text-decoration: none; font-size: 12px; padding: 2px 8px; border-radius: 3px; transition: color 0.15s; } .site-footer a:hover { color: var(--text); } .site-footer .footer-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .site-footer .contact { color: var(--text-muted); font-size: 12px; } .footer-logo { max-height: 34px; width: auto; opacity: 0.75; display: block; transition: opacity 0.15s; } .footer-logo:hover { opacity: 0.95; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 767px) { :root { --nav-h: 56px; } .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; background: var(--surface-alt); border-bottom: 1px solid var(--border); padding: 8px; z-index: 200; } .nav-links.open { display: flex; } .nav-toggle { display: flex; } .site-footer .contact { display: none; } }