metanorma-document 0.2.0

data/data/stylesheets/components/index.css

@@ -0,0 +1,118 @@
+/* === Index Section === */
+.index-section {
+  margin-top: 3em;
+  padding-top: 2em;
+  border-top: 2px solid var(--mn-primary);
+}
+
+.index-section h2 {
+  font-family: var(--font-sans);
+  font-size: 1.5em;
+  font-weight: 300;
+  letter-spacing: -0.02em;
+  color: var(--mn-primary);
+  margin-bottom: 1em;
+}
+
+.index-letter-group {
+  margin-bottom: 1.5em;
+}
+
+.index-letter {
+  font-family: var(--font-sans);
+  font-size: 1.2em;
+  font-weight: 700;
+  color: var(--mn-primary);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.3em;
+  margin-bottom: 0.5em;
+  position: sticky;
+  top: calc(var(--header-height) + 8px);
+  background: var(--color-bg);
+  z-index: 1;
+}
+
+.index-entry {
+  padding-left: 0;
+  margin: 0.3em 0;
+  line-height: 1.6;
+}
+
+.index-entry--secondary {
+  padding-left: 1.5em;
+}
+
+.index-entry--tertiary {
+  padding-left: 3em;
+}
+
+.index-term {
+  color: var(--color-text);
+}
+
+.index-locator {
+  margin-left: 0.5em;
+}
+
+.index-locator a {
+  color: var(--mn-primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--mn-primary-light);
+  transition: border-color 0.15s;
+}
+
+.index-locator a:hover {
+  border-bottom-color: var(--mn-primary);
+}
+
+.index-see,
+.index-see-also {
+  font-size: 0.9em;
+  color: var(--color-text-muted);
+  font-style: italic;
+  padding-left: 1.5em;
+}
+
+.index-see em,
+.index-see-also em {
+  font-style: normal;
+  font-weight: 500;
+}
+
+/* Index quick-nav (letter bar at top) */
+.index-quicknav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3em;
+  margin-bottom: 1.5em;
+  padding: 0.5em;
+  background: var(--color-bg-light);
+  border-radius: var(--radius-md);
+  position: sticky;
+  top: calc(var(--header-height) + 8px);
+  z-index: 2;
+}
+
+.index-quicknav a {
+  display: inline-flex;
+  width: 2em;
+  height: 2em;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 0.85em;
+  color: var(--mn-primary);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s;
+}
+
+.index-quicknav a:hover {
+  background: var(--mn-primary-light);
+}
+
+.index-quicknav a.active {
+  background: var(--mn-primary);
+  color: #fff;
+}

data/data/stylesheets/components/inline.css

@@ -0,0 +1,88 @@
+/* === Inline Elements === */
+.fn-marker { vertical-align: super; font-size: 0.78em; color: var(--mn-primary); font-family: var(--font-sans); }
+.small-caps { font-variant: small-caps; letter-spacing: 0.03em; }
+.obligation { font-style: italic; color: var(--mn-accent); }
+.bold-title { font-weight: 700; }
+
+/* Math container — hover dropdown for source formats */
+.math-container { position: relative; display: inline; }
+.math-container math { font-style: normal; }
+.stem-dropdown {
+  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+  background: var(--color-bg); border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
+  padding: 0.4em 0; z-index: 100; min-width: 180px;
+  font-size: 0.82em; white-space: nowrap;
+}
+.math-container:hover .stem-dropdown { display: block; }
+.stem-dropdown-label {
+  padding: 0.15em 0.7em; font-family: var(--font-sans); font-size: 0.9em;
+  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
+}
+.stem-dropdown-row {
+  display: flex; align-items: center; gap: 0.5em; padding: 0.2em 0.7em;
+  font-family: var(--font-mono); color: var(--color-text);
+}
+.stem-dropdown-row:hover { background: var(--color-bg-light); }
+.stem-copy-btn {
+  background: none; border: none; cursor: pointer; font-size: 0.85em;
+  color: var(--color-text-muted); padding: 0.1em 0.3em;
+  border-radius: 2px; transition: background 0.15s, color 0.15s;
+}
+.stem-copy-btn:hover { background: var(--mn-primary-light); color: var(--mn-primary); }
+.nonboldtitle { font-weight: 400; }
+
+.citesec, .citefig, .citetbl, .citeapp {
+  color: var(--mn-primary);
+  text-decoration: underline;
+  text-decoration-color: rgba(40,56,138,0.2);
+  cursor: pointer;
+}
+.citesec:hover, .citefig:hover, .citetbl:hover, .citeapp:hover {
+  color: var(--mn-accent);
+}
+
+.doc-subtitle { font-weight: 400; }
+.doc-part-number { font-weight: 500; }
+.doc-part-title { font-style: italic; }
+.doc-publisher, .doc-publisher-name { font-weight: 500; }
+.std-doc-number { font-weight: 500; }
+.std-year { font-weight: 500; }
+.xref-label { font-weight: 600; }
+a.xref { color: var(--mn-primary); text-decoration: none; border-bottom: 1px solid var(--mn-primary-light); }
+a.xref:hover { border-bottom-color: var(--mn-primary); }
+.doc-content a.xref .element-name { font-style: italic; }
+
+.kbd-hint {
+  display: inline-block;
+  font-family: var(--font-sans);
+  font-size: 0.75em;
+  background: var(--color-bg-light);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  padding: 0.1em 0.4em;
+  color: var(--color-text-muted);
+  vertical-align: middle;
+}
+
+/* Quote */
+.quote {
+  margin: 1.4em 0; padding: 0.8em 1.4em;
+  border-left: 3px solid var(--mn-accent);
+  color: var(--color-text-light);
+  background: var(--color-bg-light);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+/* Definition lists */
+dd > p:first-child { margin-top: 0.2em; }
+dd > p:last-child { margin-bottom: 0; }
+dt { color: var(--mn-primary); padding: 0.3em 0; }
+dd { margin-left: 2em; padding-bottom: 0.4em; border-bottom: 1px solid transparent; }
+dd + dt { margin-top: 1em; }
+dl { border-left: 2px solid var(--color-border); padding-left: 1em; margin: 1em 0 1.5em; }
+
+@media (max-width: 767px) {
+  dl { padding-left: 0.5em; }
+  dd { margin-left: 1em; }
+}

data/data/stylesheets/components/note.css

@@ -0,0 +1,24 @@
+/* === Notes — theme variable driven === */
+.note-block {
+  background: var(--note-bg);
+  border-left: 3px solid var(--note-border);
+  padding: 0.8em 1em 0.8em 2.6em;
+  margin: 1.2em 0;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  position: relative;
+  font-size: 0.93em;
+}
+.note-block::before {
+  content: "";
+  position: absolute; left: 0.8em; top: 1em;
+  width: 16px; height: 16px;
+  background: var(--note-border);
+  opacity: 0.6;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm.75 10.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM8 3.5c.69 0 1.25.56 1.25 1.25v3.5a1.25 1.25 0 01-2.5 0v-3.5C6.75 4.06 7.31 3.5 8 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm.75 10.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM8 3.5c.69 0 1.25.56 1.25 1.25v3.5a1.25 1.25 0 01-2.5 0v-3.5C6.75 4.06 7.31 3.5 8 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+.note-label, .term-note-label {
+  font-weight: 600;
+  color: var(--note-color);
+  font-family: var(--font-sans);
+}

data/data/stylesheets/components/progress.css

@@ -0,0 +1,40 @@
+/* === Reading Progress Bar === */
+.reading-progress {
+  position: fixed; top: var(--header-height); left: 0;
+  margin-top: -3px;
+  width: 0%; height: 3px;
+  background: var(--mn-progress-color, var(--mn-gradient));
+  z-index: 200;
+  transition: width 0.1s linear;
+  box-shadow: 0 0 8px rgba(156, 96, 193, 0.25);
+  contain: layout style;
+}
+
+/* === Back-to-Top Button === */
+.back-to-top {
+  position: fixed; bottom: 1.4em; right: 1.4em;
+  width: 40px; height: 40px;
+  background: var(--color-bg);
+  color: var(--mn-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--shadow-md);
+  z-index: 80;
+  opacity: 0; pointer-events: none;
+  transform: translateY(16px);
+  transition: opacity var(--transition-smooth), transform var(--transition-smooth),
+              background var(--transition-fast), border-color var(--transition-fast);
+}
+.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
+.back-to-top:hover { background: var(--mn-primary); color: #fff; border-color: var(--mn-primary); }
+.back-to-top svg { width: 18px; height: 18px; }
+
+@media (max-width: 767px) {
+  .toc-hamburger { bottom: 0.8em; right: 0.8em; width: 46px; height: 46px; font-size: 1.2em; }
+  .back-to-top { bottom: 0.8em; right: 0.8em; width: 36px; height: 36px; }
+  .note-block, .example { padding-left: 1.8em; }
+  .note-block::before, .example::before { left: 0.5em; }
+  .sourcecode pre { font-size: 0.8em; padding: 0.9em; }
+}

data/data/stylesheets/components/search.css

@@ -0,0 +1,45 @@
+/* === Search Panel === */
+.search-panel {
+  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
+  width: min(560px, 92vw);
+  background: var(--color-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 12px 48px rgba(0,0,0,0.2), 0 0 0 1px var(--color-border);
+  z-index: 2000;
+  display: flex; align-items: center;
+  padding: 0.5em 0.7em; gap: 0.4em;
+  opacity: 0; pointer-events: none;
+  transform: translateX(-50%) translateY(-20px) scale(0.97);
+  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease;
+}
+.search-panel.search-active {
+  opacity: 1; pointer-events: auto;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+.search-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; }
+.search-input {
+  flex: 1; border: none; outline: none;
+  font-family: var(--font-sans); font-size: 0.95em;
+  color: var(--color-text); background: transparent;
+  padding: 0.3em 0;
+}
+.search-input::placeholder { color: var(--color-text-muted); }
+.search-counter { font-family: var(--font-sans); font-size: 0.82em; color: var(--color-text-muted); white-space: nowrap; }
+.search-btn {
+  width: 28px; height: 28px; border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border); background: var(--color-bg-light);
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+.search-btn:hover { background: var(--mn-primary-light); border-color: var(--mn-primary); }
+.search-btn svg { width: 12px; height: 12px; }
+.search-close { font-size: 1.1em; color: var(--color-text-muted); }
+mark.search-match {
+  background: var(--mn-accent-light); border-radius: 2px;
+  padding: 0.05em 0.15em;
+  box-shadow: 0 0 0 1px rgba(156,96,193,0.3);
+}
+mark.search-match.search-current {
+  background: var(--mn-accent); color: #fff;
+  box-shadow: 0 0 0 2px var(--mn-accent);
+}

data/data/stylesheets/components/section.css

@@ -0,0 +1,26 @@
+/* === Section Headings === */
+.foreword-title, .intro-title {
+  font-family: var(--font-sans); font-size: 1.4em; font-weight: 600;
+  padding-bottom: 0.5em;
+  border-bottom: 2px solid var(--mn-accent);
+  color: var(--mn-primary);
+  margin-bottom: 0.8em;
+}
+.annex-title {
+  font-family: var(--font-sans); font-weight: 600;
+  font-size: 1.2em; line-height: 1.4; color: var(--mn-primary);
+  margin-bottom: 0.6em;
+}
+.section-sub { margin-top: 2em; }
+
+h1[id]:hover .heading-anchor,
+h2[id]:hover .heading-anchor,
+h3[id]:hover .heading-anchor { opacity: 1; }
+.heading-anchor {
+  opacity: 0;
+  font-size: 0.6em;
+  vertical-align: middle;
+  margin-left: 0.4em;
+  color: var(--mn-accent);
+  transition: opacity var(--transition-fast);
+}

data/data/stylesheets/components/shortcuts.css

@@ -0,0 +1,71 @@
+/* === Keyboard Shortcuts Panel === */
+.shortcuts-panel {
+  display: none;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 300;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  justify-content: center;
+  align-items: center;
+  padding: 1em;
+  outline: none;
+}
+
+.shortcuts-panel.shortcuts-visible {
+  display: flex;
+}
+
+.shortcuts-panel > * {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.5em 2em;
+  max-width: 26em;
+  width: 100%;
+  box-shadow: var(--shadow-lg, 0 8px 32px rgba(40,56,138,0.15));
+}
+
+.shortcuts-title {
+  font-family: var(--font-sans);
+  font-size: 1em;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 1em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+}
+
+.shortcuts-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1em;
+  padding: 0.2em 0;
+}
+
+kbd {
+  display: inline-block;
+  font-family: var(--font-sans);
+  font-size: 0.82em;
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-bg-light);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  padding: 0.1em 0.45em;
+  min-width: 1.6em;
+  text-align: center;
+  line-height: 1.6;
+}
+
+.shortcuts-desc {
+  font-size: 0.88em;
+  color: var(--color-text-muted);
+}

data/data/stylesheets/components/sourcecode.css

@@ -0,0 +1,30 @@
+/* === Sourcecode — terminal aesthetic === */
+.sourcecode { margin: 1.4em 0; max-width: 100%; overflow: hidden; position: relative; }
+.sourcecode pre {
+  background: #151528; color: #d4d4e8;
+  border: 1px solid #2a2a48; border-radius: var(--radius-md);
+  padding: 1.2em 1.4em; overflow-x: auto;
+  font-size: 0.87em; line-height: 1.65;
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+  tab-size: 2;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+}
+.sourcecode-name, .code-name {
+  font-weight: 600; margin-bottom: 0.5em;
+  font-family: var(--font-sans); font-size: 0.9em;
+}
+
+.code-copy-btn {
+  position: absolute; top: 0.5em; right: 0.5em;
+  background: rgba(255,255,255,0.08); color: #888;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: var(--radius-sm);
+  padding: 0.3em 0.5em; font-size: 0.75em;
+  font-family: var(--font-sans);
+  cursor: pointer; opacity: 0.5;
+  transition: opacity var(--transition-fast), background var(--transition-fast);
+}
+.sourcecode:hover .code-copy-btn { opacity: 1; }
+.code-copy-btn:hover { background: rgba(255,255,255,0.15); color: #bbb; }
+.code-copy-btn.copied { color: #4ade80; opacity: 1; }

data/data/stylesheets/components/table.css

@@ -0,0 +1,57 @@
+/* === Tables === */
+.doc-content table {
+  border-collapse: collapse;
+  margin: 1.4em 0;
+  font-size: 0.92em;
+  width: 100%;
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.doc-content table caption {
+  display: table-caption; width: 100%;
+  text-align: left; padding: 0.7em 1em;
+  font-weight: 600; font-size: 0.92em;
+  background: var(--color-bg-light);
+  border: 1px solid var(--color-border);
+  border-bottom: none;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+}
+th, td {
+  border: 1px solid var(--color-border);
+  padding: 0.65em 0.9em; text-align: left;
+  transition: background 0.12s;
+}
+th {
+  background: var(--mn-primary); color: #fff;
+  font-family: var(--font-sans); font-weight: 600; font-size: 0.9em;
+  letter-spacing: 0.01em;
+  position: sticky; top: 0; z-index: 1;
+}
+th[rowspan], th[colspan] { vertical-align: middle; }
+tr:nth-child(even) td { background: var(--color-bg-light); }
+tr:hover td { background: var(--mn-primary-light); }
+
+.table-scroll-wrapper {
+  margin: 1.4em 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  max-height: 70vh;
+}
+.table-scroll-wrapper table { margin: 0; box-shadow: none; }
+.table-scroll-wrapper::after {
+  content: "";
+  position: sticky; right: 0; top: 0;
+  width: 24px; height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04));
+  pointer-events: none;
+  display: none;
+}
+.table-scroll-wrapper:has(table:not([style*="width: 100%"]))::after { display: block; }
+.table-notes { border: none; padding: 0.4em 0.9em; background: none; }
+.table-notes .note-block { background: none; border-left: none; padding: 0.3em 0; font-size: 0.9em; }

data/data/stylesheets/components/term.css

@@ -0,0 +1,45 @@
+/* === Terms — top-border editorial === */
+div[id^="term-"] {
+  margin: 2em 0;
+  padding: 1em 0;
+  border-top: 2px solid var(--mn-primary);
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+div[id^="term-"] + div[id^="term-"] { margin-top: 0; }
+
+.term-number {
+  font-variant: small-caps;
+  font-weight: 600;
+  color: var(--mn-primary);
+  background: none;
+  padding: 0;
+  font-size: 0.88em;
+}
+.term-name { font-size: 1.1em; color: var(--mn-primary); font-weight: 500; }
+.term-name dfn { font-style: normal; }
+.term-deprecated { text-decoration: line-through; color: var(--color-text-muted); }
+.term-domain { font-style: italic; color: var(--mn-accent); font-size: 0.92em; margin-top: 0.3em; }
+.term-source {
+  font-size: 0.85em;
+  text-align: right;
+  color: var(--color-text-muted);
+  margin-top: 0.8em;
+  border-top: none;
+  line-height: 1.6;
+}
+div[id^="term-"] .note-block {
+  margin-top: 0.8em;
+  margin-bottom: 0.4em;
+  font-size: 0.92em;
+}
+div[id^="term-"] .example {
+  margin-top: 0.8em;
+  margin-bottom: 0.4em;
+  font-size: 0.92em;
+}
+
+@media (max-width: 767px) {
+  div[id^="term-"] { padding: 0.8em 0; }
+}