260 lines
10 KiB
HTML
260 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Navigation" subtitle="T10 Lit Divider locked for top tabs; side nav pending" viewport="960x160" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Navigation — Cybersteel</title>
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
/* ────────────────────────────────────────────────────────────
|
|
Token usage rule for this file:
|
|
Use var(--token, #hexfallback) AT EVERY USE SITE — never
|
|
redeclare design-system tokens here. Redeclaring them on
|
|
:root creates circular references (e.g.
|
|
--bg-shell: var(--bg-shell, #1d2021);
|
|
) which CSS treats as invalid and which wipes the token,
|
|
leaving every consumer with the initial value (transparent
|
|
for backgrounds). The fallback in var() is the resilience
|
|
layer; it kicks in only when the stylesheet fails to load
|
|
and never collides with the loaded values.
|
|
──────────────────────────────────────────────────────────── */
|
|
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
background: var(--bg-page, #313131);
|
|
}
|
|
body {
|
|
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
|
color: var(--fg-body, #f2e2ba);
|
|
padding: 24px 24px 64px;
|
|
display: flex; flex-direction: column; gap: 32px;
|
|
}
|
|
|
|
/* ── Page header ─────────────────────────────────────────── */
|
|
.page-head {
|
|
display: flex; flex-direction: column; gap: 6px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--border-subtle, #665c54);
|
|
}
|
|
.page-head .eyebrow {
|
|
font-size: 11px; color: var(--fg-muted, #b8a98e);
|
|
letter-spacing: 0.2em; text-transform: uppercase;
|
|
}
|
|
.page-head h1 {
|
|
margin: 0; font-size: 28px; color: var(--fg-heading, #fbf1c7);
|
|
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em; text-transform: uppercase;
|
|
}
|
|
.page-head p {
|
|
margin: 0; font-size: 13px; color: var(--fg-caption, #cebd9e);
|
|
max-width: 720px;
|
|
}
|
|
|
|
/* ── Pattern header ──────────────────────────────────────── */
|
|
.pattern { display: flex; flex-direction: column; gap: 12px; }
|
|
.pattern-head {
|
|
display: flex; align-items: baseline; gap: 16px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid var(--border-subtle, #665c54);
|
|
}
|
|
.pattern-num {
|
|
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
|
font-size: 11px;
|
|
color: var(--gold-dim, #d79921); letter-spacing: 0.2em;
|
|
}
|
|
.pattern-title {
|
|
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
|
font-size: 18px;
|
|
font-weight: 700; letter-spacing: 0.1em;
|
|
text-transform: uppercase; color: var(--fg-heading, #fbf1c7);
|
|
}
|
|
.pattern-desc {
|
|
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
|
font-size: 11px;
|
|
color: var(--fg-caption, #cebd9e); letter-spacing: 0.05em;
|
|
}
|
|
.pattern-status {
|
|
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em; text-transform: uppercase;
|
|
margin-left: auto;
|
|
}
|
|
.status-locked { color: var(--gold-bright, #fabd2f); }
|
|
.status-pending { color: var(--fg-muted, #b8a98e); }
|
|
|
|
.frame {
|
|
border: 1px solid var(--border, #7c6f64);
|
|
background: var(--bg-page, #313131);
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.product-name {
|
|
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
|
font-size: 13px;
|
|
font-weight: 700; letter-spacing: 0.18em;
|
|
text-transform: uppercase; color: var(--gold-dim, #d79921);
|
|
}
|
|
|
|
.stub-content {
|
|
padding: 24px;
|
|
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
|
font-size: 11px;
|
|
color: var(--fg-muted, #b8a98e); letter-spacing: 0.2em;
|
|
background-image:
|
|
linear-gradient(var(--bg-surface, #3c3836) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--bg-surface, #3c3836) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
background-position: -1px -1px;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* ────────────────────────────────────────────────────────────
|
|
T10 · LIT DIVIDER — locked top tab pattern.
|
|
The topbar's bottom divider already exists. Under the active
|
|
tab, that segment of divider lights up in gold-bright. Cream
|
|
text. No extra rules, no gradients.
|
|
──────────────────────────────────────────────────────────── */
|
|
.topframe {
|
|
display: grid; grid-template-rows: 44px 1fr;
|
|
min-height: 280px;
|
|
}
|
|
.topnav {
|
|
display: flex; align-items: stretch;
|
|
background: var(--bg-shell, #1d2021);
|
|
border-bottom: 1px solid var(--border, #7c6f64);
|
|
padding: 0 12px;
|
|
}
|
|
.topnav .product-name {
|
|
display: flex; align-items: center;
|
|
padding: 0 16px 0 8px;
|
|
margin-right: 8px;
|
|
border-right: 1px solid var(--border, #7c6f64);
|
|
}
|
|
.tab {
|
|
position: relative;
|
|
display: flex; align-items: center;
|
|
padding: 0 18px;
|
|
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
|
font-size: 12px;
|
|
font-weight: 600; letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--fg-caption, #cebd9e);
|
|
cursor: pointer;
|
|
transition: color var(--transition-hover, 150ms ease-out);
|
|
height: 100%;
|
|
}
|
|
.tab:hover { color: var(--fg-body, #f2e2ba); }
|
|
.tab.active { color: var(--fg-heading, #fbf1c7); }
|
|
.tab.active::after {
|
|
content: ""; position: absolute;
|
|
left: 0; right: 0; bottom: -1px;
|
|
height: 1px; background: var(--gold-bright, #fabd2f);
|
|
}
|
|
|
|
/* ────────────────────────────────────────────────────────────
|
|
S1 · BARE BRIGHTNESS — locked side-nav pattern.
|
|
No fills, no markers, no rules. Active = cream + 600 weight.
|
|
Resting = muted. Selection is purely typographic.
|
|
──────────────────────────────────────────────────────────── */
|
|
.sideframe {
|
|
display: grid; grid-template-columns: 200px 1fr;
|
|
min-height: 360px;
|
|
}
|
|
.sidebar {
|
|
background: var(--bg-shell, #1d2021);
|
|
border-right: 1px solid var(--border, #7c6f64);
|
|
padding: 12px 0;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.sb-product-name {
|
|
padding: 4px 20px 16px;
|
|
border-bottom: 1px solid var(--border-subtle, #665c54);
|
|
margin-bottom: 8px;
|
|
}
|
|
.sb-section {
|
|
padding: 14px 20px 6px;
|
|
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
|
color: var(--fg-muted, #b8a98e); font-size: 9px;
|
|
letter-spacing: 0.22em; text-transform: uppercase;
|
|
}
|
|
.sb-item {
|
|
display: flex; align-items: center;
|
|
height: 30px; padding: 0 20px;
|
|
color: var(--fg-muted, #b8a98e);
|
|
cursor: pointer;
|
|
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
|
font-size: 13px;
|
|
font-weight: 500; letter-spacing: 0.04em;
|
|
transition: color var(--transition-hover, 150ms ease-out);
|
|
}
|
|
.sb-item:hover { color: var(--fg-body, #f2e2ba); }
|
|
.sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="page-head">
|
|
<div class="eyebrow">Component · Navigation</div>
|
|
<h1>Navigation</h1>
|
|
<p>Selection lights up the existing structural rule rather than introducing new chrome. The topbar's bottom divider becomes gold under the active tab; the sidebar leans entirely on typographic contrast — cream & bold for active, muted for the rest.</p>
|
|
</header>
|
|
|
|
<!-- ─────────────────────────── TOP TABS — LOCKED ─────────────────────────── -->
|
|
<section class="pattern">
|
|
<div class="pattern-head">
|
|
<div class="pattern-num">01</div>
|
|
<div class="pattern-title">Top Tabs</div>
|
|
<div class="pattern-desc">Lit divider — the bottom rule glows gold under the active tab.</div>
|
|
<div class="pattern-status status-locked">✓ Locked</div>
|
|
</div>
|
|
<div class="frame">
|
|
<div class="topframe">
|
|
<div class="topnav">
|
|
<div class="product-name">Cybersteel</div>
|
|
<div class="tab active">Dashboard</div>
|
|
<div class="tab">Nodes</div>
|
|
<div class="tab">Builds</div>
|
|
<div class="tab">Alerts</div>
|
|
<div class="tab">Logs</div>
|
|
<div class="tab">Settings</div>
|
|
</div>
|
|
<div class="stub-content">CONTENT</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─────────────────────────── SIDE NAV — LOCKED ─────────────────────────── -->
|
|
<section class="pattern">
|
|
<div class="pattern-head">
|
|
<div class="pattern-num">02</div>
|
|
<div class="pattern-title">Side Nav</div>
|
|
<div class="pattern-desc">Bare brightness — active item is cream & bold; rest are muted.</div>
|
|
<div class="pattern-status status-locked">✓ Locked</div>
|
|
</div>
|
|
<div class="frame">
|
|
<div class="sideframe">
|
|
<nav class="sidebar">
|
|
<div class="sb-product-name product-name">Cybersteel</div>
|
|
<div class="sb-section">Operate</div>
|
|
<div class="sb-item active">Dashboard</div>
|
|
<div class="sb-item">Nodes</div>
|
|
<div class="sb-item">Builds</div>
|
|
<div class="sb-item">Alerts</div>
|
|
<div class="sb-section">Inspect</div>
|
|
<div class="sb-item">Logs</div>
|
|
<div class="sb-item">Metrics</div>
|
|
<div class="sb-item">Traces</div>
|
|
<div class="sb-section">Configure</div>
|
|
<div class="sb-item">Settings</div>
|
|
<div class="sb-item">Members</div>
|
|
</nav>
|
|
<div class="stub-content">CONTENT</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
</html>
|