147 lines
8.7 KiB
HTML
147 lines
8.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="{{LANG}}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>{{TITLE}}</title>
|
||
|
|
<style>
|
||
|
|
/* ── Same paper-on-desk language as the informe, one palette (the protocol is
|
||
|
|
series-wide: it belongs to no skin). Tokens mirror informe-template.html. ── */
|
||
|
|
:root{
|
||
|
|
--paper:#F6F1E4; --paper-edge:#E4DAC2; --ink:#1C1810; --ink-faded:#5A5240;
|
||
|
|
--desk:#33302A; --stamp:#9C2D25; --accent:#8A6014; --rule:#CDBF9C; --code:#26231D;
|
||
|
|
}
|
||
|
|
:root[data-theme="dark"]{
|
||
|
|
--paper:#D9CBA6; --paper-edge:#C7B78E; --ink:#231D14; --ink-faded:#574F3B;
|
||
|
|
--desk:#100E0A; --stamp:#CF4133; --accent:#C89338; --rule:#B6A67E; --code:#0A0805;
|
||
|
|
}
|
||
|
|
|
||
|
|
*{box-sizing:border-box}
|
||
|
|
html{-webkit-text-size-adjust:100%}
|
||
|
|
body{margin:0; min-height:100vh;
|
||
|
|
background:radial-gradient(120% 80% at 82% -12%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 60%), var(--desk);
|
||
|
|
color:var(--ink); font-family:Georgia,"Iowan Old Style","Times New Roman",serif; line-height:1.6;
|
||
|
|
padding:0 1rem 4rem; display:flex; flex-direction:column; align-items:center;
|
||
|
|
--mono:"Courier New",ui-monospace,"Cascadia Mono",monospace}
|
||
|
|
|
||
|
|
.sitebar{width:100%; max-width:52rem; display:flex; align-items:center; justify-content:space-between;
|
||
|
|
gap:1rem; padding:.9rem .2rem; margin-bottom:.4rem}
|
||
|
|
.sitebar a{color:var(--paper); text-decoration:none; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em}
|
||
|
|
.sitebar .brand{display:flex; align-items:center; gap:.55rem; font-weight:700}
|
||
|
|
.sitebar .brand img{height:3rem; width:auto; display:block}
|
||
|
|
.sitebar .links{display:flex; gap:.5rem; flex-wrap:wrap}
|
||
|
|
.sitebar .back{border:1px solid color-mix(in srgb,var(--paper) 45%,transparent); padding:.34rem .7rem; border-radius:.4rem}
|
||
|
|
.sitebar .back:hover{border-color:var(--paper); background:color-mix(in srgb,var(--paper) 12%,transparent)}
|
||
|
|
|
||
|
|
.file{width:100%; max-width:52rem; background:var(--paper); border:1px solid var(--paper-edge);
|
||
|
|
box-shadow:0 1px 0 color-mix(in srgb,#fff 30%,transparent) inset, 0 24px 60px -20px rgba(0,0,0,.6);
|
||
|
|
padding:clamp(1.25rem,4.5vw,3rem); position:relative; overflow:hidden;
|
||
|
|
background-image:repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb,var(--rule) 20%,transparent) 27px 28px);
|
||
|
|
background-attachment:local}
|
||
|
|
.file::before{content:""; position:absolute; left:15px; top:0; bottom:0; width:14px;
|
||
|
|
background:radial-gradient(circle at 50% 60px,var(--desk) 5px,transparent 6px),
|
||
|
|
radial-gradient(circle at 50% 160px,var(--desk) 5px,transparent 6px),
|
||
|
|
radial-gradient(circle at 50% 260px,var(--desk) 5px,transparent 6px);
|
||
|
|
background-repeat:no-repeat; opacity:.45}
|
||
|
|
|
||
|
|
.mono{font-family:var(--mono)} a{color:var(--stamp)}
|
||
|
|
header{border-bottom:2px solid var(--ink); padding-bottom:1rem; margin-bottom:1.7rem}
|
||
|
|
.kicker{font-family:var(--mono); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faded)}
|
||
|
|
h1{font-family:var(--mono); font-weight:700; font-size:clamp(1.55rem,5.4vw,2.6rem); line-height:1.05;
|
||
|
|
margin:.4rem 0 .2rem; text-wrap:balance; letter-spacing:-.01em; max-width:calc(100% - 12rem)}
|
||
|
|
@media (max-width:34rem){ h1{max-width:none} }
|
||
|
|
h1 .red{color:var(--stamp)}
|
||
|
|
.logline{font-style:italic; max-width:52ch; margin:.6rem 0 0}
|
||
|
|
.meta{display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:1.1rem; font-family:var(--mono); font-size:.68rem}
|
||
|
|
.tag{border:1px solid var(--ink); padding:.22rem .5rem; letter-spacing:.1em; text-transform:uppercase}
|
||
|
|
.tag b{color:var(--stamp)}
|
||
|
|
|
||
|
|
section{margin:2.1rem 0}
|
||
|
|
.exhibit{font-family:var(--mono); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
|
||
|
|
color:var(--stamp); display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem}
|
||
|
|
.exhibit::after{content:""; flex:1; height:1px; background:var(--rule)}
|
||
|
|
h2{font-family:var(--mono); font-size:1.22rem; margin:.1rem 0 .6rem; letter-spacing:-.01em}
|
||
|
|
h2 a{text-decoration:none} h2 a:hover{text-decoration:underline}
|
||
|
|
p{margin:.7rem 0}
|
||
|
|
|
||
|
|
/* The four rules — one card each, the series' lineup grid. */
|
||
|
|
.rules{display:grid; grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:.8rem; margin-top:1rem}
|
||
|
|
.rule{border:1px solid var(--ink); background:color-mix(in srgb,var(--paper) 86%,#fff); padding:.7rem .8rem}
|
||
|
|
.rule h3{font-family:var(--mono); font-size:.9rem; margin:.15rem 0 .35rem; color:var(--stamp)}
|
||
|
|
.rule p{font-size:.86rem; margin:.2rem 0}
|
||
|
|
|
||
|
|
pre{font-family:var(--mono); font-size:.78rem; line-height:1.5; overflow-x:auto; background:var(--code); color:#E9DFC6;
|
||
|
|
border:1px solid #000; padding:.9rem 1rem; margin:.8rem 0; box-shadow:0 8px 20px -12px rgba(0,0,0,.7)}
|
||
|
|
.caplabel{font-family:var(--mono); font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faded)}
|
||
|
|
|
||
|
|
.cont{width:100%; border-collapse:collapse; margin-top:.6rem; font-size:.92rem; table-layout:fixed}
|
||
|
|
.cont td{padding:.5rem .6rem; border-bottom:1px solid var(--rule); vertical-align:top; overflow-wrap:anywhere}
|
||
|
|
.cont td:first-child{width:44%; font-style:italic}
|
||
|
|
.cont td:last-child{font-family:var(--mono); font-size:.8rem}
|
||
|
|
.cont tr.head td{font-style:normal; font-family:var(--mono); font-weight:700; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faded)}
|
||
|
|
|
||
|
|
.caselink{font-family:var(--mono); font-size:.72rem; color:var(--stamp); text-decoration:none;
|
||
|
|
border:1px solid var(--stamp); padding:.34rem .7rem; border-radius:.4rem; display:inline-block; margin-top:.4rem}
|
||
|
|
.caselink:hover{background:color-mix(in srgb,var(--stamp) 12%,transparent)}
|
||
|
|
|
||
|
|
.stamp{position:absolute; top:6.6rem; right:1.4rem; transform:rotate(-9deg); border:.32rem solid var(--stamp); color:var(--stamp);
|
||
|
|
font-family:var(--mono); font-weight:700; padding:.42rem 1rem; text-align:center; line-height:1.05; opacity:.96; border-radius:7px;
|
||
|
|
background:color-mix(in srgb,var(--paper) 78%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--stamp) 26%,transparent);
|
||
|
|
pointer-events:none; letter-spacing:.06em}
|
||
|
|
.stamp b{font-size:1.2rem; display:block; letter-spacing:.14em} .stamp span{font-size:.64rem; letter-spacing:.2em}
|
||
|
|
@media (max-width:34rem){.stamp{top:auto; bottom:1rem; right:.8rem; transform:rotate(-8deg); padding:.32rem .7rem} .stamp b{font-size:1rem}}
|
||
|
|
@keyframes thunk{0%{transform:rotate(-9deg) scale(2.4); opacity:0} 70%{transform:rotate(-9deg) scale(.94); opacity:1} 100%{transform:rotate(-9deg) scale(1); opacity:.96}}
|
||
|
|
.stamp{animation:thunk .5s cubic-bezier(.2,1.3,.4,1) .35s both}
|
||
|
|
@media (prefers-reduced-motion:reduce){.stamp{animation:none}}
|
||
|
|
|
||
|
|
/* The living debt — the verdict box of this page. */
|
||
|
|
.debts{border:2px solid var(--ink); padding:1.1rem 1.2rem; background:color-mix(in srgb,var(--accent) 9%,var(--paper))}
|
||
|
|
.debts h2{color:var(--stamp)}
|
||
|
|
.debts .cont td:first-child{width:8rem; font-style:normal; font-family:var(--mono)}
|
||
|
|
.debts .cont td:last-child{font-family:inherit; font-size:.92rem}
|
||
|
|
|
||
|
|
footer{margin-top:2.1rem; border-top:1px solid var(--rule); padding-top:.9rem; font-family:var(--mono); font-size:.68rem;
|
||
|
|
color:var(--ink-faded); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem}
|
||
|
|
|
||
|
|
.controls{position:fixed; top:.7rem; right:.7rem; display:flex; gap:.35rem; z-index:20; font-family:var(--mono)}
|
||
|
|
.controls button{font-size:.66rem; letter-spacing:.06em; background:var(--paper); color:var(--ink); border:1px solid var(--ink);
|
||
|
|
padding:.35rem .55rem; cursor:pointer; border-radius:4px}
|
||
|
|
.controls button:focus-visible, a:focus-visible{outline:2px solid var(--stamp); outline-offset:2px}
|
||
|
|
|
||
|
|
@media print{
|
||
|
|
.sitebar,.controls{display:none!important}
|
||
|
|
body{background:#fff;padding:0;display:block}
|
||
|
|
.file{box-shadow:none;border:none;max-width:none}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="controls">
|
||
|
|
<button id="tg" aria-label="theme">☀ / ☾</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="sitebar" aria-label="ontoref">
|
||
|
|
<a class="brand" href="/"><img src="/images/ontoref-logo.svg" alt="ontoref"></a>
|
||
|
|
<div class="links">
|
||
|
|
<a class="back" href="{{VIEWER_HREF}}">{{VIEWER_LABEL}}</a>
|
||
|
|
<a class="back" href="{{BACK_HREF}}">{{BACK_LABEL}}</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<article class="file">
|
||
|
|
{{BODY}}
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function(){
|
||
|
|
"use strict";
|
||
|
|
/* ══ BODY ══ Projected by scripts/build/gen-protocolo.nu from the typed CASEs'
|
||
|
|
replays. DO NOT EDIT THIS FILE — edit the case .ncl. */
|
||
|
|
var root=document.documentElement;
|
||
|
|
root.setAttribute("data-theme", matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light");
|
||
|
|
document.getElementById("tg").onclick=function(){
|
||
|
|
root.setAttribute("data-theme", root.getAttribute("data-theme")==="dark"?"light":"dark");
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body></html>
|