:root { /* Cardano-aligned typography. Chivo for display / headings (Cardano marketing heritage); Inter for body / UI (de-facto Web3 reading face). Both loaded via Google Fonts in the page . */ --font-display:'Chivo','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --accent:#E52321; --infared:#E52321;--dawn:#EC641D;--black:#1a1a1a;--white:#fff; /* Official Cardano palette (cardano.org/brand-assets) — Blue, Black, White, Paper */ --cardano-blue:#0033AD;--cardano-blue-soft:rgba(0,51,173,.12);--cardano-blue-glow:rgba(0,51,173,.45); /* Cardano-family secondary blue used for h3 / hover states / accents. Lighter, brighter than --cardano-blue so it pairs cleanly without leaving the brand family. */ --cardano-blue-2:#1F5BC6;--cardano-blue-2-soft:rgba(31,91,198,.10); /* Soft underline tone for body links — the same blue but at low alpha so paragraphs of links don't feel like a wall of underlines. */ --cardano-link-line:rgba(0,51,173,.28); --cardano-black:#000000;--cardano-paper:#f8f8f5; --cardano-red:#ff5553;--cardano-green:#3b7982; --electric-blue:#16E9D8;--acid-green:#06FF89;--volt-yellow:#F2FF58; --cobalt-pulse:#2C4FFA;--ultraviolet:#A700FF; --bg:#ffffff;--bg-warm:#faf9f7;--bg-panel:#f5f4f2;--bg-code:#f0efed; --text-primary:#1a1a1a;--text-body:#3a3a3a;--text-secondary:#6b6b6b;--text-muted:#999; --border:#e2e0dc;--border-light:#eceae6; } /* Dark theme overrides */ [data-theme=dark]{ --bg:#0a0a0c;--bg-warm:#111113;--bg-panel:#1a1a1d;--bg-code:#242428; --text-primary:#e4e4e7;--text-body:#a1a1aa;--text-secondary:#71717a;--text-muted:#52525b; --border:#27272a;--border-light:#1f1f23;--black:#e4e4e7;--white:#0a0a0c; } [data-theme=dark] body{background:var(--bg-warm);color:var(--text-body)} [data-theme=dark] .nav-pages{background:var(--bg);border-bottom-color:var(--border)} [data-theme=dark] .nav-tab:hover{background:rgba(255,255,255,.06)} [data-theme=dark] .nav-tab.active{background:rgba(229,35,33,.12);color:var(--text-primary)} [data-theme=dark] .nav-col+.nav-col{border-left-color:var(--border)} [data-theme=dark] .nav-col-title{color:var(--infared)} [data-theme=dark] .nav-pdf-badge{background:rgba(229,35,33,.15)} [data-theme=dark] .content{background:var(--bg);border-color:var(--border-light)} /* Dark-mode heading background washes were retired with the unified bar-on-the-left vocabulary — the bar carries the visual weight; an added background tint competed with the H1 motif. */ [data-theme=dark] .content a{color:#f06050} [data-theme=dark] .content img{border-color:var(--border);filter:brightness(.92)} [data-theme=dark] .content code{background:var(--bg-code);color:#e87461} [data-theme=dark] .content pre{background:var(--bg-panel);border-color:var(--border)} [data-theme=dark] .content blockquote{background:var(--bg-panel);border-left-color:var(--accent)} [data-theme=dark] .content tr:hover td{background:var(--bg-panel)} [data-theme=dark] .toc-nav{background:var(--bg-panel);border-color:var(--border)} [data-theme=dark] .obs-card{background:var(--bg);border-color:var(--border)} [data-theme=dark] .obs-card-header{background:var(--bg-panel)} [data-theme=dark] .obs-card-header:hover{background:var(--bg-code)} [data-theme=dark] .obs-finding{background:var(--bg-panel)} [data-theme=dark] .obs-finding:hover{background:var(--bg-code)} [data-theme=dark] .table-wrap{border-color:var(--border)} [data-theme=dark] .back-top{background:var(--bg-panel);border-color:var(--border);color:var(--text-muted)} [data-theme=dark] .lightbox-overlay{background:rgba(0,0,0,.92)} /* Dark synth cards */ [data-theme=dark] .synth-card{border-color:var(--border)} [data-theme=dark] .synth-card:hover{border-color:#3a3a3a} [data-theme=dark] .synth-card-head:hover{background:var(--bg-panel)} [data-theme=dark] .synth-f{background:var(--bg-panel)} [data-theme=dark] .synth-f:hover{background:var(--bg-code)} [data-theme=dark] .synth-stats{background:var(--bg-panel);border-color:var(--border)} [data-theme=dark] .synth-scope{background:var(--bg-panel)} [data-theme=dark] .synth-fref{background:var(--bg-code)} html{scroll-behavior:smooth;scroll-padding-top:150px} /* Anchor-target visual cue — header lands clear of the sticky nav and flashes prominently */ .content :target{scroll-margin-top:150px} .content h1:target,.content h2:target,.content h3:target,.content h4:target,.content h5:target,.content h6:target, .ev-card:target,.sro-card:target,.sro-finding:target{ animation:target-flash 3.6s ease-out; position:relative } @keyframes target-flash{ 0% {background-color:rgba(242,255,88,.70); box-shadow:inset 10px 0 0 var(--infared), 0 0 0 3px var(--infared), 0 0 18px rgba(229,35,33,.35)} 18% {background-color:rgba(242,255,88,.60); box-shadow:inset 10px 0 0 var(--infared), 0 0 0 3px var(--infared), 0 0 18px rgba(229,35,33,.35)} 40% {background-color:rgba(229,35,33,.30); box-shadow:inset 10px 0 0 var(--infared), 0 0 0 2px rgba(229,35,33,.45), 0 0 8px rgba(229,35,33,.18)} 100% {background-color:transparent; box-shadow:inset 10px 0 0 transparent, 0 0 0 0 transparent, 0 0 0 transparent} } [data-theme=dark] .content h1:target,[data-theme=dark] .content h2:target,[data-theme=dark] .content h3:target,[data-theme=dark] .content h4:target,[data-theme=dark] .content h5:target,[data-theme=dark] .content h6:target, [data-theme=dark] .ev-card:target,[data-theme=dark] .sro-card:target,[data-theme=dark] .sro-finding:target{ animation:target-flash-dark 3.6s ease-out } @keyframes target-flash-dark{ 0% {background-color:rgba(242,255,88,.30); box-shadow:inset 10px 0 0 #FF7A78, 0 0 0 3px #FF7A78, 0 0 18px rgba(255,122,120,.45)} 18% {background-color:rgba(242,255,88,.22); box-shadow:inset 10px 0 0 #FF7A78, 0 0 0 3px #FF7A78, 0 0 18px rgba(255,122,120,.45)} 40% {background-color:rgba(229,35,33,.32); box-shadow:inset 10px 0 0 #FF7A78, 0 0 0 2px rgba(255,122,120,.55), 0 0 8px rgba(255,122,120,.25)} 100% {background-color:transparent; box-shadow:inset 10px 0 0 transparent, 0 0 0 0 transparent, 0 0 0 transparent} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .content h1:target,.content h2:target,.content h3:target,.content h4:target,.content h5:target,.content h6:target, .ev-card:target,.sro-card:target,.sro-finding:target{ animation:none;background-color:rgba(229,35,33,.18);box-shadow:inset 8px 0 0 var(--infared), 0 0 0 2px rgba(229,35,33,.45) } } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-body);background:var(--bg-warm);color:var(--text-body);line-height:1.78;-webkit-font-smoothing:antialiased} /* ── NAV ── */ /* ── Site header: two bars ── */ .site-nav{position:sticky;top:0;z-index:100;display:flex;flex-direction:column} /* Bar 1: brand identity */ .nav-brand{background:linear-gradient(90deg,var(--cardano-blue) 0%,var(--cardano-blue) 18%,rgba(0,51,173,.85) 26%,rgba(0,51,173,.55) 38%,rgba(0,51,173,.22) 55%,rgba(0,51,173,.06) 72%,#fff 92%),var(--bg);padding:8px 28px 8px;display:flex;align-items:center;min-height:48px;gap:14px;border-bottom:0} .nav-brand-home{display:flex;align-items:center;gap:10px;text-decoration:none} .nav-brand-logo{height:18px;width:auto;opacity:.7;flex-shrink:0} .nav-brand-org{font:300 10px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.4)} .nav-brand-title{font:600 19px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;letter-spacing:.2px} .nav-brand-sep{color:rgba(255,255,255,.28);font:300 14px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0 2px} .nav-brand-subtitle{font:300 10px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.55)} @media (max-width:900px){.nav-brand-sep,.nav-brand-subtitle{display:none}} /* Brand bar right: dropdowns + theme toggle */ .nav-brand-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0} /* Hero build-info badge — same chrome as the CARDANO BUSINESS UNIT chip used to be (green dot prefix, green border, dark translucent fill). Date in CAPS / wide tracking like the original CBU label; author in Title Case (proper noun, not a label). */ .hero-division-sep{color:rgba(255,255,255,.7);padding:0 2px; letter-spacing:0;font-weight:300} /* Author chip — same CBU label treatment as the date (UPPERCASE, wide tracking) but rendered as a link to the author's profile. */ .hero-division-author{font-size:10px;font-weight:400;letter-spacing:2.8px; text-transform:uppercase;color:#ffffff; text-decoration:none;border-bottom:1px solid rgba(6,255,137,.0); transition:color .15s,border-color .15s} /* Epoch chip — analysis cutoff (e.g. "Through epoch 623"). Same CBU label treatment as the date. */ .hero-division-epoch{font-size:10px;font-weight:400;letter-spacing:2.8px; text-transform:uppercase;color:#ffffff} .hero-division-epoch-date{font-size:10px;font-weight:400;letter-spacing:2.8px; text-transform:uppercase;color:#ffffff} /* Data-cutoff badge — sibling of .hero-division. Cool-tinted edge (Electric Blue) to mark it as analysis-window metadata distinct from the build/author chip. */ .hero-data-cutoff{display:flex;align-items:center;gap:10px; padding:6px 14px 6px 14px; border:1px solid rgba(22,233,216,.45); border-radius:2px; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); color:#ffffff} /* ── Hero byline ──────────────────────────────────────────── Editorial-style metadata line under the hero subtitle. No boxes, no backdrop blur, no borders — pure typography with small line-art icons and a vertical hairline between segments. Reads as part of the document, not as a UI panel. */ .hero-byline{display:inline-flex;flex-wrap:wrap; align-items:center; gap:0; margin-top:22px; padding:0; background:none; border:none; position:relative;z-index:2; font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .hero-byline-seg{display:inline-flex;align-items:center;gap:9px; padding:0 22px; border-right:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.78); font-size:13px; font-weight:500; letter-spacing:.01em; white-space:nowrap} .hero-byline-seg:first-child{padding-left:0} .hero-byline-seg:last-child{border-right:none;padding-right:0} .hero-byline-seg .hero-meta-icon{flex-shrink:0; color:rgba(255,255,255,.45); display:block} .hero-byline-value{color:rgba(255,255,255,.92)} .hero-byline-sub{color:rgba(255,255,255,.55);font-weight:400} .hero-byline-author{color:#ffffff;text-decoration:none; font-weight:500; border-bottom:1px solid rgba(255,255,255,0); transition:border-color .15s,color .15s} a.hero-byline-author:hover, a.hero-byline-author:focus-visible{ color:#ffffff;border-bottom-color:rgba(6,255,137,.7);outline:none} .hero-meta-cell{display:flex;flex-direction:row;align-items:center; gap:14px; padding:11px 22px; border-bottom:1px solid rgba(255,255,255,.16); min-width:0} .hero-meta-cell:last-child{border-bottom:none} .hero-meta-icon{flex-shrink:0; color:rgba(255,255,255,.55); display:block} .hero-meta-text{display:flex;flex-direction:column;gap:4px;min-width:0} .hero-meta-label{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:9px;font-weight:500;letter-spacing:2.4px; text-transform:uppercase; color:rgba(255,255,255,.55)} .hero-meta-value{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:13px;font-weight:500;letter-spacing:.01em; color:#ffffff; white-space:nowrap} .hero-meta-sub{color:rgba(255,255,255,.62);font-weight:400} .hero-meta-author-link{color:#ffffff;text-decoration:none; border-bottom:1px solid rgba(255,255,255,0); transition:border-color .15s,color .15s} .hero-meta-author-link:hover, .hero-meta-author-link:focus-visible{ color:#ffffff;border-bottom-color:rgba(6,255,137,.7);outline:none} a.hero-division-author:hover,a.hero-division-author:focus-visible{ color:#fff;border-bottom-color:rgba(6,255,137,.6);outline:none} .theme-toggle{background:rgba(255,255,255,.85);border:1px solid rgba(0,51,173,.4);border-radius:4px;cursor:pointer;padding:5px 8px;color:var(--cardano-blue);font-size:14px;line-height:1;transition:color .15s,border-color .15s,background .15s;display:flex;align-items:center} .theme-toggle:hover{background:#fff;border-color:var(--cardano-blue);color:#001a6b} .theme-toggle:hover{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)} .pdf-export{background:rgba(255,255,255,.85);border:1px solid rgba(0,51,173,.4);border-radius:4px;cursor:pointer;padding:5px 9px;color:var(--cardano-blue);font:700 10.5px/1 'Chivo',-apple-system,sans-serif;letter-spacing:1.2px;transition:color .15s,border-color .15s,background .15s} .pdf-export:hover{background:#fff;border-color:var(--cardano-blue);color:#001a6b} .pdf-export:hover{color:var(--infared);border-color:var(--infared);background:rgba(229,35,33,.08)} .nav-dd-wrap{position:relative} .nav-dd-btn{background:none;border:1px solid rgba(255,255,255,.15);border-radius:4px;cursor:pointer;font:400 11px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.5px;color:rgba(255,255,255,.5);padding:6px 12px;transition:color .15s,border-color .15s;white-space:nowrap} .nav-dd-btn:hover{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)} .nav-dd-wrap.open .nav-dd-btn{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)} .nav-dd-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:8px 0;min-width:340px;z-index:200} .nav-dd-wrap.open .nav-dd-panel{display:block} .nav-dd-item{display:block;padding:10px 16px;text-decoration:none;transition:background .1s} .nav-dd-item:hover{background:rgba(255,255,255,.06)} .nav-dd-title{display:block;font:500 13px/1.35 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:rgba(255,255,255,.85);border-bottom:none} .nav-dd-meta{display:block;font:400 11px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:rgba(255,255,255,.35);margin-top:3px} /* Bar 2: three-column navigation */ .nav-pages{background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 24px;overflow-x:auto;white-space:nowrap;position:relative;gap:38px} /* Single reading-direction rail across the navbar — replaces the per-gap arrows. Dashed hairline that runs from Welcome (destination) on the left to Design Support (origin) on the right. Anchored by JS so the right edge sits flush with the rightmost button rather than running into the empty space past it. The arrowhead stays on the LEFT end (Welcome) — that's the reading-direction destination. */ .nav-flow-rail{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); height:11px;display:flex;align-items:center; pointer-events:none;z-index:0; /* Hidden until the JS positioner runs — otherwise the unpositioned rail flashes across the full navbar width on initial paint, leaving stray dashes left of Welcome. */ opacity:0;transition:opacity .15s ease} .nav-flow-rail.positioned{opacity:1; /* Very subtle dark drop-shadow only — gives the dashes just enough definition against the gradient without feeling glowy or heavy. */ filter:drop-shadow(0 1px 1px rgba(0,0,0,0.12))} .nav-flow-rail-line{flex:1;display:block;height:1px; margin-left:6px;margin-right:0;order:2; border:0; background:repeating-linear-gradient(to right, currentColor 0 4px, transparent 4px 8px); color:rgba(255,255,255,0.7)} /* Arrowhead suppressed — the chevron-shaped buttons themselves convey the right→left reading direction; an extra arrowhead at the rail start is redundant. Also fixes a brief flash on page load before the JS rail positioner runs. */ .nav-flow-rail-head{display:none} /* Two-stop colour transition — left half white-ish, right half dark-ish. Implemented as an overlay so the dashes themselves blend smoothly. */ .nav-flow-rail-line::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px; transform:translateY(-50%);pointer-events:none} [data-theme=dark] .nav-flow-rail-line{color:rgba(255,255,255,0.55)} [data-theme=dark] .nav-flow-rail-head{color:rgba(255,255,255,0.7)} /* Lift every nav child above the rail so the buttons render on top. */ .nav-pages > .nav-zone, .nav-pages > .nav-tab-implementation, .nav-pages > .nav-tab-roadmap{position:relative;z-index:1} /* ── Chevron-shaped buttons ───────────────────────────────────────────── Each button gets a V-notch on its right edge, so the silhouette itself points left — the reading-direction is encoded in the shape, no extra arrow needed. Apply via clip-path so the button's existing background / border / colour rules keep working unchanged. */ :root{--nav-chev-cut:8px} /* Unified typography across every chevron button — same Inter weight, tracking, case, and line-height. Stops the per-class differences (some had .4 letter-spacing, some .2, some uppercase) from making the row look inconsistent. */ .nav-tab-implementation, .nav-tab-roadmap, .nav-tab-problems-big, .nav-tab-spec-big, .nav-dd-btn-light, .nav-dd-btn-solution{ font:600 13px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; letter-spacing:.2px !important; text-transform:none !important; } /* All chevron buttons get an SVG background that draws the silhouette + a stroke along every edge (including the V-points). clip-path-based chevrons couldn't do this — clip-path just hides pixels, it doesn't stroke the polygon outline. Vector strokes (vector-effect: non-scaling-stroke) keep the dash pattern / line weight uniform regardless of button width. The drop-shadow filter follows the visible alpha (the SVG fill), so the shadow now wraps the chevron outline rather than a rectangle. */ .nav-tab-implementation, .nav-tab-roadmap, .nav-tab-problems-big, .nav-tab-spec-big, .nav-dd-btn-light{ clip-path:none !important; background-color:transparent !important; background-repeat:no-repeat !important; background-size:100% 100% !important; background-position:center !important; border:0 !important; /* Disable the rectangular box-shadow inherited from sibling rules — it draws around the underlying