/* Relaxed Memory Model Zoo — styles for index.html */ /* Light theme is the default. Add data-theme="dark" on to switch. */ :root { --bg: #faf9f6; --bg2: #f1efe9; --bg3: #e5e2d9; --border: rgba(0,0,0,0.10); --border2: rgba(0,0,0,0.20); --text: #1d1c19; --text2: #5f5d56; --text3: #918f86; --accent-hw: #3B8BD4; --accent-hw-light: #1f5c99; --accent-hw-bg: rgba(59,139,212,0.14); --accent-lang: #1D9E75; --accent-lang-light: #137a56; --accent-lang-bg: rgba(29,158,117,0.14); --accent-formal: #7F77DD; --accent-formal-light: #524bb0; --accent-formal-bg: rgba(127,119,221,0.12); --edge-strict: #6f6e66; --edge-equiv: #bf7d12; --edge-compile: #18906a; --edge-incompat: #c1481f; --tier-label: #c6c3ba; --tier-line: rgba(0,0,0,0.05); --tag-amber: #9a660c; --tag-coral: #b14420; --tag-gray: #6b6a63; --tag-teal: #137a56; --radius: 8px; --font-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace; } :root[data-theme="dark"] { --bg: #0d0d0f; --bg2: #141418; --bg3: #1c1c22; --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.15); --text: #e8e6df; --text2: #9a9890; --text3: #5c5b58; --accent-hw-light: #85B7EB; --accent-hw-bg: rgba(59,139,212,0.12); --accent-lang-light: #5DCAA5; --accent-lang-bg: rgba(29,158,117,0.12); --accent-formal-light: #AFA9EC; --accent-formal-bg: rgba(127,119,221,0.1); --edge-strict: #888780; --edge-equiv: #EF9F27; --edge-compile: #5DCAA5; --edge-incompat: #D85A30; --tier-label: #3c3b38; --tier-line: rgba(255,255,255,0.035); --tag-amber: #FAC775; --tag-coral: #F0997B; --tag-gray: #B4B2A9; --tag-teal: #5DCAA5; } body { transition: background 0.2s, color 0.2s; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Georgia', serif; height: 100vh; display: flex; flex-direction: column; } header { border-bottom: 1px solid var(--border); padding: 2.5rem 3rem 2rem; display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; } header h1 { font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; font-family: 'Georgia', serif; color: var(--text); } header .subtitle { font-size: 0.875rem; color: var(--text2); font-family: 'Georgia', serif; font-style: italic; } .layout { display: grid; grid-template-columns: 1fr 360px; flex: 1; min-height: 0; } .page-footnote { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 3rem; border-top: 1px solid var(--border); font-size: 0.78rem; font-style: italic; color: var(--text3); } .page-footnote a { color: var(--text2); text-decoration: underline; text-underline-offset: 2px; } .page-footnote a:hover { color: var(--text); } .graph-panel { position: relative; overflow: hidden; border-right: 1px solid var(--border); } .graph-panel svg { width: 100%; height: 100%; } .sidebar { display: flex; flex-direction: column; overflow: hidden; } .legend { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; } .legend h3 { font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 0.3rem; } .legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text2); } .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .legend-line { width: 24px; height: 2px; flex-shrink: 0; } .detail-panel { flex: 1; overflow-y: auto; padding: 1.5rem; } .detail-empty { color: var(--text3); font-size: 0.85rem; font-style: italic; text-align: center; padding: 3rem 1rem; line-height: 1.8; } .detail-empty strong { display: block; color: var(--text2); font-size: 1rem; font-style: normal; margin-bottom: 0.5rem; font-weight: 400; } .model-title { font-size: 1.3rem; font-weight: 400; margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.75rem; } .model-abbrev { font-family: var(--font-mono); font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); } .model-year { font-size: 0.78rem; color: var(--text3); font-family: var(--font-mono); margin-bottom: 1rem; } .model-description { font-size: 0.88rem; line-height: 1.75; color: var(--text2); margin-bottom: 1.25rem; border-left: 2px solid var(--border2); padding-left: 0.85rem; } .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; } .tag { font-size: 0.7rem; font-family: var(--font-mono); padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; } .tag-hardware { background: var(--accent-hw-bg); color: var(--accent-hw-light); border: 1px solid rgba(59,139,212,0.25); } .tag-language { background: var(--accent-lang-bg); color: var(--accent-lang-light); border: 1px solid rgba(29,158,117,0.25); } .tag-formal { background: var(--accent-formal-bg); color: var(--accent-formal-light); border: 1px solid rgba(127,119,221,0.25); } .tag-theoretical { background: rgba(239,159,39,0.1); color: var(--tag-amber); border: 1px solid rgba(239,159,39,0.2); } .tag-operational { background: rgba(216,90,48,0.1); color: var(--tag-coral); border: 1px solid rgba(216,90,48,0.2); } .tag-standard { background: rgba(136,135,128,0.1); color: var(--tag-gray); border: 1px solid rgba(136,135,128,0.2); } .tag-compilation { background: rgba(93,202,165,0.1); color: var(--tag-teal); border: 1px solid rgba(93,202,165,0.2); } .section-head { font-size: 0.68rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 0.6rem; margin-top: 1rem; } .ref-list { display: flex; flex-direction: column; gap: 0.6rem; } .ref-item { font-size: 0.8rem; padding: 0.6rem 0.75rem; background: var(--bg3); border-radius: var(--radius); border: 1px solid var(--border); line-height: 1.5; } .ref-title { color: var(--text); margin-bottom: 0.2rem; font-style: italic; } .ref-meta { color: var(--text3); font-family: var(--font-mono); font-size: 0.73rem; } .ref-link { color: var(--accent-hw-light); text-decoration: none; font-size: 0.73rem; font-family: var(--font-mono); } .ref-link:hover { text-decoration: underline; } .edges-list { display: flex; flex-direction: column; gap: 0.4rem; } .edge-item { font-size: 0.8rem; display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .edge-marker { flex-shrink: 0; margin-top: 2px; width: 8px; height: 8px; border-radius: 2px; } .edge-text { color: var(--text2); line-height: 1.5; } .edge-note { color: var(--text3); font-size: 0.75rem; display: block; } .hw-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; } .hw-chip { font-size: 0.73rem; font-family: var(--font-mono); padding: 2px 8px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 3px; color: var(--text2); } /* Graph node styles */ .node-group { cursor: pointer; } .node-group:hover .node-rect { stroke-opacity: 0.8; } .node-rect { stroke-width: 1; transition: all 0.15s; } .node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-weight: 500; } .node-sublabel { font-size: 9px; fill: var(--text2); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: 'Georgia', serif; font-style: italic; } .node-hw { fill: rgba(59,139,212,0.18); stroke: rgba(59,139,212,0.6); } .node-lang { fill: rgba(29,158,117,0.18); stroke: rgba(29,158,117,0.6); } .node-both { fill: rgba(127,119,221,0.18); stroke: rgba(127,119,221,0.6); } .node-selected .node-rect { stroke-width: 2 !important; } .node-hw.node-selected { stroke: #3B8BD4 !important; } .node-lang.node-selected { stroke: #1D9E75 !important; } .node-both.node-selected { stroke: #7F77DD !important; } .node-dimmed { opacity: 0.25; transition: opacity 0.2s; } .edge-path { fill: none; stroke-width: 1.2; } .edge-strictly-weaker { stroke: var(--edge-strict); stroke-opacity: 0.55; } .edge-equivalent { stroke: var(--edge-equiv); stroke-opacity: 0.8; stroke-dasharray: 4 3; } .edge-compilation { stroke: var(--edge-compile); stroke-opacity: 0.65; stroke-dasharray: 6 3; } .edge-incomparable { stroke: var(--edge-incompat); stroke-opacity: 0.45; stroke-dasharray: 2 4; } .edge-dimmed { opacity: 0.05 !important; transition: opacity 0.2s; } .controls { position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .ctrl-btn { width: 32px; height: 32px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .ctrl-btn:hover { background: var(--bg3); color: var(--text); } .filter-bar { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; } .filter-btn { font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text2); cursor: pointer; transition: all 0.15s; } .filter-btn.active-hw { background: var(--accent-hw-bg); color: var(--accent-hw-light); border-color: rgba(59,139,212,0.4); } .filter-btn.active-lang { background: var(--accent-lang-bg); color: var(--accent-lang-light); border-color: rgba(29,158,117,0.4); } .filter-btn.active-all { background: var(--bg3); color: var(--text); border-color: var(--border2); } .theme-toggle { margin-left: auto; align-self: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--bg3); color: var(--text); } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }