File size: 8,565 Bytes
f261449 8318700 f261449 2b0f5e5 f261449 8318700 f261449 2b0f5e5 f261449 8318700 f261449 2b0f5e5 f261449 8318700 f261449 8318700 f261449 2b0f5e5 f261449 8318700 f261449 2b0f5e5 f261449 8318700 2b0f5e5 f261449 8318700 2b0f5e5 f261449 8318700 f261449 8318700 f261449 8318700 f261449 8318700 f261449 8318700 f261449 8318700 f261449 8318700 f261449 2b0f5e5 f261449 2b0f5e5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | :root {
--bg: #f8f9fb;
--bg-card: #ffffff;
--bg-card-hover: #f0f2f5;
--text: #1a1a2e;
--text-muted: #5a5f72;
--border: #d8dce6;
--primary: #4f46e5;
--accent: #e85d26;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Nav */
nav {
display: flex; align-items: center; justify-content: space-between;
padding: 0.75rem 2rem;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
nav .brand {
font-size: 1.1rem; font-weight: 700; color: var(--text);
display: flex; align-items: center; gap: 0.5rem;
}
nav .brand span { color: var(--accent); }
nav .links { display: flex; gap: 1.5rem; align-items: center; }
nav .links a {
color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
transition: color 0.15s;
}
nav .links a:hover, nav .links a.active { color: var(--text); text-decoration: none; }
/* Hero */
.hero { text-align: center; padding: 2.5rem 2rem 1rem; }
.hero h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hero h1 span { color: var(--accent); }
.hero p { color: var(--text-muted); max-width: 600px; margin: 0.5rem auto 0; font-size: 0.95rem; }
.hero .meta { margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.hero .meta strong { color: var(--text); }
/* Diagram */
.diagram-wrap {
position: relative; margin: 1rem auto; max-width: 1200px;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.diagram-toolbar {
position: absolute; top: 0.75rem; right: 0.75rem; z-index: 20;
display: flex; gap: 0.25rem;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.25rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.diagram-toolbar button {
width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg-card); color: var(--text-muted); font-size: 0.9rem;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all 0.15s; font-family: monospace;
}
.diagram-toolbar button:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--primary); }
.diagram-toolbar button.fullscreen-btn { width: auto; padding: 0 0.6rem; font-family: system-ui; font-size: 0.75rem; font-weight: 600; gap: 0.3rem; }
.diagram-container { width: 100%; min-height: 900px; }
.diagram-container svg { width: 100%; height: 100%; display: block; cursor: grab; }
.diagram-container svg:active { cursor: grabbing; }
/* Tooltip */
.arch-tooltip {
position: fixed; background: #1a1a2e; color: #fff;
padding: 0.6rem 0.85rem; border-radius: 8px; font-size: 0.78rem; line-height: 1.45;
width: 240px; text-align: center; z-index: 200; pointer-events: none;
box-shadow: 0 4px 16px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.15s;
}
/* Export bar */
.export-bar { display: flex; justify-content: center; gap: 0.75rem; padding: 1rem 2rem; flex-wrap: wrap; }
.export-bar button, .export-bar a.btn {
padding: 0.5rem 1.25rem; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg-card); color: var(--text); font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.export-bar button:hover, .export-bar a.btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; text-decoration: none; }
/* Stats banner */
.stats-banner { display: flex; justify-content: center; gap: 2rem; padding: 1rem 2rem; flex-wrap: wrap; }
.stat { text-align: center; }
.stat .num { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.stat .label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
/* Page sections */
.page-section { max-width: 900px; margin: 0 auto; padding: 2rem 2rem 3rem; }
.page-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; }
.page-section h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--accent); }
.page-section p { color: var(--text-muted); margin-bottom: 0.75rem; }
.page-section ul { margin-left: 1.25rem; margin-bottom: 1rem; color: var(--text-muted); }
.page-section li { margin-bottom: 0.35rem; }
.page-section code { background: #eef0f5; border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.85em; color: var(--primary); }
.page-section pre { background: #eef0f5; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; }
/* Connection cards */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.conn-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; transition: border-color 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.conn-card:hover { border-color: var(--primary); }
.conn-card .conn-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.conn-card .conn-path { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }
.conn-card .conn-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.conn-card .conn-tag { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tag-autonomous { background: rgba(232,93,38,0.1); color: #c94d1e; }
.tag-deterministic { background: rgba(79,70,229,0.1); color: #4f46e5; }
.tag-bidirectional { background: rgba(37,99,235,0.1); color: #1d4ed8; }
.tag-transport { background: rgba(20,184,166,0.1); color: #0d9488; }
/* Value route cards */
.value-route { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.value-route h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.value-route p { font-size: 0.85rem; }
/* Layer list */
.layer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.layer-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; border-top: 3px solid var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.layer-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; }
.layer-card .layer-nodes { font-size: 0.78rem; color: var(--text-muted); }
.layer-card .node-chip { display: inline-block; background: rgba(79,70,229,0.08); border: 1px solid rgba(79,70,229,0.18); border-radius: 4px; padding: 0.1rem 0.4rem; margin: 0.15rem 0.15rem 0 0; font-size: 0.72rem; color: var(--primary); }
/* Tab navigation */
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn { padding: 0.6rem 1.25rem; border: none; background: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* Footer */
footer { text-align: center; padding: 2rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; }
footer a { color: var(--primary); }
/* Fullscreen */
.diagram-wrap:fullscreen { background: #fff; border-radius: 0; }
.diagram-wrap:fullscreen .diagram-container { min-height: 100vh; }
@media (max-width: 768px) {
nav { padding: 0.5rem 1rem; flex-direction: column; gap: 0.5rem; }
.hero h1 { font-size: 1.4rem; }
.stats-banner { gap: 1rem; }
.conn-grid { grid-template-columns: 1fr; }
.layer-grid { grid-template-columns: 1fr; }
.page-section { padding: 1.5rem 1rem; }
}
|