) */ .page-inset { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } /* ── Eyebrow / lede / subtitle / meta ────────────────────────── */ .eyebrow { color: var(--accent2); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 700; } .lede { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 76ch; } .subtitle { color: var(--muted); font-size: 1.1rem; max-width: 940px; } .meta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } /* ── Pills ───────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 999px; padding: .35rem .75rem; color: var(--muted); font-size: .88rem; } /* ── Grid (12-column, used by FIDO Separation) ───────────────── */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; } @media (max-width: 850px) { .span-4, .span-6, .span-8 { grid-column: span 12; } } /* ── Card ────────────────────────────────────────────────────── */ .card { background: rgba(23,27,36,.92); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(0,0,0,.28); padding: 1.25rem; margin-bottom: 1.25rem; } /* ── Sections (SecureBoot — non-card section elements) ───────── */ section:not(.card) { margin: 2rem 0; padding: 1.4rem; background: rgba(23,27,35,.88); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* ── FIDO main/ubuntu layout: sidebar TOC grid ───────────────── */ main { padding: 2rem 0 4rem; } main:has(details.toc) { max-width: 1280px; margin: 0 auto; padding: 1.5rem; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.5rem; } main:has(details.toc:not([open])) { grid-template-columns: 64px minmax(0, 1fr); } article { min-width: 0; } /* Sidebar TOC (FIDO main / Ubuntu — details element) */ details.toc { background: rgba(23,27,36,.92); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(0,0,0,.28); overflow-y: auto; max-height: calc(100vh - 4rem); position: sticky; top: 3rem; /* clears the docnav bar */ align-self: start; padding: 1rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } details.toc::-webkit-scrollbar { width: 8px; } details.toc::-webkit-scrollbar-track { background: transparent; } details.toc::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } details.toc summary { cursor: pointer; color: var(--accent); font-weight: 700; list-style: none; user-select: none; } details.toc summary::-webkit-details-marker { display: none; } details.toc summary::before { content: "☰"; display: inline-block; margin-right: .45rem; } details.toc[open] summary::after { content: " hide"; color: var(--muted); font-weight: 400; } details.toc:not([open]) summary span, details.toc:not([open]) ul { display: none; } details.toc ul { padding-left: 1.1rem; margin: .8rem 0 0; } details.toc li { margin: .45rem 0; } details.toc a { color: var(--muted); text-decoration: none; transition: color .1s; } details.toc a:hover { color: var(--accent); } details.toc a.active { color: var(--accent); font-weight: 600; } /* Inline TOC (SecureBoot / FIDO Sep — nav element) */ nav.toc { margin: 1.5rem 0 2.5rem; padding: 1rem; border: 1px solid var(--line); background: rgba(23,27,35,.8); border-radius: var(--radius); box-shadow: var(--shadow); } nav.toc h2 { margin-top: 0; font-size: 1.1rem; } nav.toc ol { columns: 2; column-gap: 2rem; margin-bottom: 0; padding-left: 1.3rem; } @media (max-width: 760px) { nav.toc ol { columns: 1; } } /* Sticky nav bar (FIDO Separation) */ nav:not(.toc) { position: sticky; top: 0; z-index: 5; background: rgba(11,15,20,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } nav:not(.toc) .wrap { display: flex; gap: .8rem; overflow-x: auto; padding: .7rem 1.25rem; } nav:not(.toc) a { color: var(--muted); text-decoration: none; white-space: nowrap; font-size: .9rem; } nav:not(.toc) a:hover { color: var(--text); } /* ── Code labels (FIDO main / Ubuntu) ────────────────────────── */ .label { display: inline-block; margin: .7rem 0 .25rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel2); font-size: .8rem; } .label.important { color: #111; background: var(--accent2); border-color: transparent; } /* ── Callouts ────────────────────────────────────────────────── */ .callout { border-left: 4px solid var(--accent); background: rgba(121,215,197,.08); padding: .85rem 1rem; border-radius: 12px; margin: 1rem 0; } .callout.warn { border-left-color: var(--accent2); background: rgba(240,198,116,.09); } .callout.danger { border-left-color: var(--danger); background: rgba(255,143,143,.09); } .callout.note { border-left-color: var(--good); background: rgba(155,226,143,.08); } .callout.good { border-left-color: var(--good); background: rgba(155,226,143,.08); } /* ── Code ────────────────────────────────────────────────────── */ code, kbd { font-family: var(--mono); font-size: .95em; color: #d8fff8; background: rgba(10,13,18,.68); padding: .1rem .25rem; border-radius: 6px; } pre { background: var(--code); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; overflow-x: auto; font-family: var(--mono); font-size: .92rem; color: #e5e7eb; line-height: 1.45; } .code-wrap { position: relative; margin-bottom: .5rem; } .code-wrap pre { padding-right: 5.5rem; margin-bottom: 0; } pre code { background: transparent; border: 0; padding: 0; color: #edf7ff; } /* .kbd class (SecureBoot — styled keyboard key) */ .kbd { display: inline-block; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: .4rem; padding: .05rem .35rem; background: rgba(255,255,255,.08); font-family: var(--mono); font-size: .9em; } /* ── Tables ──────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); } th, td { padding: .72rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { text-align: left; background: var(--panel2); color: var(--accent2); } tr:nth-child(even) td { background: rgba(255,255,255,.025); } tr:last-child td { border-bottom: none; } /* ── Checklist ───────────────────────────────────────────────── */ .checklist li { margin: .4rem 0; } .source-list li { margin-bottom: .35rem; } /* ── FIDO Separation: key cards and flow ─────────────────────── */ .key-card { position: relative; overflow: hidden; } .key-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; } .key-blue::before { background: var(--blue); } .key-yellow::before { background: var(--yellow); } .key-red::before { background: var(--red); } .key-title { font-size: 1.2rem; font-weight: 800; margin-bottom: .25rem; } .tag { display: inline-block; margin: .2rem .35rem .2rem 0; padding: .18rem .45rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--muted); font-size: .82rem; background: rgba(0,0,0,.18); } .flow { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 820px; } .flow-step { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: .9rem 1rem; position: relative; } .flow-step strong { color: var(--yellow); } /* ── SecureBoot: step badge ──────────────────────────────────── */ .step-badge { display: inline-block; background: var(--accent); color: #0a0d12; font-weight: 700; font-size: .78rem; border-radius: 999px; padding: .15rem .6rem; margin-right: .4rem; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } /* ── Scripts index ───────────────────────────────────────────── */ .scripts-index { border-top: 1px solid var(--line); padding: 2rem 0 1rem; } .scripts-index h2 { margin: 0 0 1rem; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .script-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .script-list li { display: flex; align-items: baseline; gap: .75rem; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); } .script-list a { flex-shrink: 0; color: var(--accent); text-decoration: none; font-family: var(--mono); font-size: .92rem; } .script-list a:hover { text-decoration: underline; } .script-list span { color: var(--muted); font-size: .88rem; } /* ── Document switcher nav ───────────────────────────────────── */ /* nav:not(.toc) provides: sticky, backdrop-filter, border-bottom, base link color */ nav.docnav { z-index: 10; } nav.docnav .wrap { justify-content: space-between; padding: .42rem 0; } .docnav-docs { display: flex; gap: .15rem; } nav.docnav a { border-radius: 6px; padding: .18rem .5rem; font-size: .82rem; } nav.docnav a.active { color: var(--accent); background: rgba(121,215,197,.12); } nav.docnav a.back { opacity: .6; font-size: .8rem; } nav.docnav a.back:hover { opacity: 1; } /* ── Footer ──────────────────────────────────────────────────── */ footer { padding: 2rem 0 3rem; color: var(--muted); border-top: 1px solid var(--line); } /* ── Output code blocks ──────────────────────────────────────── */ .code-wrap--output { opacity: .78; } .code-wrap--output::before { content: "OUTPUT"; display: block; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-bottom: .3rem; } .code-wrap--output pre { padding-right: 1rem; /* no copy button */ background: rgba(6,9,14,.92); border-color: rgba(48,56,74,.45); } /* ── Destructive-command code blocks ─────────────────────────── */ .code-wrap--danger::before { content: "DESTRUCTIVE — verify before running"; display: block; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--danger); margin-bottom: .3rem; } .code-wrap--danger pre { border-color: rgba(255,143,143,.38); border-left: 3px solid var(--danger); } /* ── Shell comment coloring ──────────────────────────────────── */ .code-comment { color: #7d8ba4; font-style: italic; } /* inline code (not code blocks) may break a long token rather than widen the page */ :not(pre) > code { overflow-wrap: break-word; } /* ── Copy button ─────────────────────────────────────────────── */ .copy-btn { position: absolute; top: .5rem; right: .5rem; z-index: 1; display: flex; width: fit-content; align-items: center; gap: .3rem; margin: 0; padding: .18rem .45rem; border: 1px solid rgba(121,215,197,.4); border-radius: .45rem; background: rgba(121,215,197,.09); color: #b9fff3; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; line-height: 1; } .copy-btn:hover { background: rgba(121,215,197,.18); } .copy-btn:focus-visible { background: rgba(121,215,197,.18); outline: 2px solid var(--accent); outline-offset: 2px; } .copy-btn svg { width: .8rem; height: .8rem; flex-shrink: 0; } .copy-label { display: inline-block; min-width: 2.8rem; text-align: center; } /* ── Media queries ───────────────────────────────────────────── */ @media (max-width: 880px) { main:has(details.toc), main:has(details.toc:not([open])) { display: block; padding: 1rem; } details.toc { position: relative; margin-bottom: 1rem; max-height: none; } } /* ── Accessibility & mobile ──────────────────────────────────── */ /* Visible keyboard focus on the dark theme (mouse/touch focus unaffected) */ a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* Wide tables scroll inside their own box instead of widening the page */ @media (max-width: 640px) { table { display: block; width: 100%; overflow-x: auto; } } /* Respect a reduced-motion preference */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* ── Print ───────────────────────────────────────────────────── */ @media print { html { background: white; } body { background: white; color: #111; } header, nav, details.toc, footer { display: none; } main, main:has(details.toc) { display: block; max-width: none; padding: 0; } .card, section:not(.card), .flow-step { box-shadow: none; border: 1px solid #bbb; page-break-inside: avoid; break-inside: avoid; } .copy-btn { display: none; } .code-wrap pre { padding-right: 1rem; } pre { white-space: pre-wrap; background: #f4f4f4; color: #111; } code, kbd { color: #111; background: #eee; } a { color: #0645ad; } }