/* ========================================================================== RCH AUTOMATION — shared drafting frame One structure, eight palettes. Per-page theme sets --accent / --tint / --texture on ; everything else inherits. Generated pages: do not hand-edit. Edit _build.py. ========================================================================== */ :root{ --paper:#f2efe6; --paper-2:#e9e5d8; --grid:#d5cfbd; --grid-major:#c3bca6; --ink:#1b2b3a; --ink-soft:#4a5c6d; --ink-faint:#8a97a3; --line:#2a4763; --accent:#1c5a8c; --tint:28,90,140; --stamp:#a83232; --ok:#2f7d4f; --hold:#b8860b; --mono:"IBM Plex Mono","JetBrains Mono",Consolas,"SF Mono",Menlo,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; --max:1180px; } @media (prefers-color-scheme: dark){ :root{ --paper:#0c1f33; --paper-2:#0a1a2b; --grid:#15375a; --grid-major:#1d4870; --ink:#e6f2ff; --ink-soft:#a9c4dc; --ink-faint:#6b8aa5; --line:#7fb8e6; --accent:#5fc9f3; --tint:95,201,243; --stamp:#ff7a6b; --ok:#4fd18b; --hold:#f0b429; } } /* ---------- per-page themes ---------- */ body.theme-automation{ --accent:#b8860b; --tint:184,134,11; } @media(prefers-color-scheme:dark){ body.theme-automation{ --accent:#f0b429; --tint:240,180,41; } } body.theme-drafting{ --accent:#0f5f8f; --tint:15,95,143; --grid:#c6d4e2; --grid-major:#a8bccf; } @media(prefers-color-scheme:dark){ body.theme-drafting{ --paper:#071a2e; --grid:#123a63; --grid-major:#1a5288; --accent:#7fd4ff; --tint:127,212,255; } } body.theme-field{ --accent:#c25617; --tint:194,86,23; } @media(prefers-color-scheme:dark){ body.theme-field{ --accent:#ff9147; --tint:255,145,71; } } body.theme-electronics{ --accent:#0a7d5a; --tint:10,125,90; } @media(prefers-color-scheme:dark){ body.theme-electronics{ --paper:#07211b; --grid:#123f33; --grid-major:#1a5a49; --accent:#4fd1a5; --tint:79,209,165; --line:#4fd1a5; } } body.theme-robotics{ --accent:#9a7100; --tint:154,113,0; } @media(prefers-color-scheme:dark){ body.theme-robotics{ --paper:#161307; --grid:#332a0d; --grid-major:#4a3d13; --accent:#ffc72c; --tint:255,199,44; --line:#c9a233; } } body.theme-code{ --accent:#1a6b6b; --tint:26,107,107; } @media(prefers-color-scheme:dark){ body.theme-code{ --paper:#08151a; --grid:#0f2e35; --grid-major:#14424c; --accent:#3ddbd9; --tint:61,219,217; --line:#3ddbd9; } } body.theme-ai{ --accent:#5b3fa8; --tint:91,63,168; } @media(prefers-color-scheme:dark){ body.theme-ai{ --paper:#150e2b; --grid:#2a1d52; --grid-major:#3a2a6e; --accent:#b39bff; --tint:179,155,255; --line:#8d75e0; } } body.theme-acoustics{ --accent:#a04a5e; --tint:160,74,94; } @media(prefers-color-scheme:dark){ body.theme-acoustics{ --paper:#231419; --grid:#3d2630; --grid-major:#523442; --accent:#e88fa4; --tint:232,143,164; --line:#c4788c; } } body.theme-process{ --accent:#14487a; --tint:20,72,122; } @media(prefers-color-scheme:dark){ body.theme-process{ --accent:#6fb7f0; --tint:111,183,240; } } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; background-color:var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px); background-size:20px 20px,20px 20px,100px 100px,100px 100px; } .sheet{max-width:var(--max);margin:0 auto;padding:0 20px 80px} img{max-width:100%;height:auto;display:block} a.inline{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor} a.inline:hover{opacity:.72} /* ---------- title bar ---------- */ header.titlebar{ position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 93%,transparent);backdrop-filter:blur(8px); } .titlebar-in{max-width:var(--max);margin:0 auto;padding:10px 20px; display:flex;align-items:center;gap:18px;flex-wrap:wrap} .logo{font-family:var(--mono);font-weight:700;letter-spacing:.16em;font-size:14px; text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap} .logo b{color:var(--accent)} nav.top{margin-left:auto;display:flex;gap:3px;flex-wrap:wrap} nav.top a{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-soft);text-decoration:none;padding:5px 9px;border:1px solid transparent} nav.top a:hover{border-color:var(--line);color:var(--accent)} nav.top a[aria-current]{border-color:var(--accent);color:var(--accent)} /* ---------- page hero ---------- */ .phero{padding:52px 0 6px} .crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:14px} .crumb a{color:var(--accent);text-decoration:none} .crumb a:hover{text-decoration:underline} .phero h1{font-family:var(--mono);font-size:clamp(28px,5.4vw,52px);line-height:1.05; margin:0 0 10px;letter-spacing:-.02em;font-weight:700} .phero .disc{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);margin-bottom:22px} .phero p.lede{font-size:clamp(16.5px,2.1vw,19.5px);max-width:62ch;color:var(--ink-soft);margin:0 0 6px} .phero p.lede strong{color:var(--ink);font-weight:600} /* ---------- dimension divider ---------- */ .dim{display:flex;align-items:center;gap:12px;margin:58px 0 24px} .dim::before,.dim::after{content:"";height:1px;background:var(--line);flex:1} .dim span{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);white-space:nowrap} /* ---------- prose ---------- */ .prose{max-width:66ch} .prose p{margin:0 0 17px;color:var(--ink-soft)} .prose p strong{color:var(--ink);font-weight:600} .prose h3{font-family:var(--mono);font-size:17px;margin:30px 0 9px;letter-spacing:-.01em} /* ---------- callouts ---------- */ .callouts{list-style:none;padding:0;margin:0;max-width:74ch} .callouts li{display:flex;gap:15px;align-items:flex-start;padding:11px 0; border-top:1px dashed var(--grid-major)} .callouts li:last-child{border-bottom:1px dashed var(--grid-major)} .bubble{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--accent); background:var(--paper);margin-top:1px} .callouts .txt{font-size:15.5px;color:var(--ink-soft)} .callouts .txt b{color:var(--ink);font-weight:600} /* ---------- figures ---------- */ .figs{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} .figs.wide{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))} figure.fig{margin:0;border:1px solid var(--line); background:color-mix(in srgb,var(--paper) 78%,transparent);overflow:hidden} figure.fig img{width:100%;aspect-ratio:4/3;object-fit:cover; filter:saturate(.94);transition:filter .2s ease,transform .3s ease} figure.fig.tall img{aspect-ratio:3/4} figure.fig.free img{aspect-ratio:auto} /* line art — CAD/Eagle exports on white. Never crop a drawing; mat it like a sheet pinned to the board rather than letting it glow on the dark theme. */ /* application screenshots — never crop UI, never zoom it on hover */ figure.fig.shot img{aspect-ratio:auto;object-fit:contain;filter:none;background:#0d1117} figure.fig.shot:hover img{filter:none;transform:none} /* self-hosted video */ figure.fig.vid{grid-column:1/-1;background:#000} figure.fig.vid video{width:100%;height:auto;display:block;max-height:70vh;background:#000} figure.fig.vid .novid{margin:0;padding:20px;font-size:14px;color:var(--ink-soft)} figure.fig.paper{background:#fbfaf7} figure.fig.paper img{ aspect-ratio:auto;width:100%;height:auto;object-fit:contain; padding:10px;background:#fbfaf7;filter:none; } figure.fig.paper:hover img{filter:none;transform:none} figure.fig.paper figcaption{background:color-mix(in srgb,var(--paper) 88%,transparent)} figure.fig:hover img{filter:saturate(1.05);transform:scale(1.02)} figcaption{padding:9px 13px 11px;border-top:1px solid var(--line); display:flex;gap:11px;align-items:flex-start} figcaption .n{font-family:var(--mono);font-size:10.5px;color:var(--accent); letter-spacing:.1em;flex:none;padding-top:2px} figcaption .c{font-size:13.5px;color:var(--ink-soft);line-height:1.5} /* single wide plate */ .plate{border:1px solid var(--line);overflow:hidden;margin:0 0 8px; background:color-mix(in srgb,var(--paper) 78%,transparent)} .plate img{width:100%;max-height:520px;object-fit:cover} .plate figcaption{border-top:1px solid var(--line)} /* ---------- spec table ---------- */ .specwrap{overflow-x:auto;border:1px solid var(--line)} table.spec{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px} table.spec th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink-faint); background:color-mix(in srgb,var(--line) 9%,transparent);white-space:nowrap} table.spec td{padding:10px 14px;border-bottom:1px dashed var(--grid-major);vertical-align:top; color:var(--ink-soft)} table.spec tr:last-child td{border-bottom:none} table.spec td:first-child{font-family:var(--mono);color:var(--ink);white-space:nowrap} /* ---------- notes ---------- */ .notes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} .note{border-left:2px solid var(--accent);padding:2px 0 2px 16px} .note h4{font-family:var(--mono);font-size:15px;margin:0 0 6px;letter-spacing:-.01em} .note p{margin:0;font-size:14.5px;color:var(--ink-soft)} /* ---------- aside / stamp ---------- */ .stampbox{border:1px solid var(--accent);padding:16px 20px;margin:26px 0; background:rgba(var(--tint),.07)} .stampbox p{margin:0;font-size:15px;color:var(--ink-soft)} .stampbox .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);display:block;margin-bottom:6px} /* ---------- code ---------- */ pre.code{font-family:var(--mono);font-size:13px;line-height:1.6;overflow-x:auto; border:1px solid var(--line);padding:15px 17px;margin:0 0 18px; background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--ink-soft)} pre.code b{color:var(--accent);font-weight:600} pre.code i{color:var(--ink-faint);font-style:normal} code{font-family:var(--mono);font-size:.9em;color:var(--accent); background:rgba(var(--tint),.10);padding:1px 5px;border-radius:2px} /* ---------- svg schematic holder ---------- */ .schem{border:1px solid var(--line);padding:22px;margin:0 0 8px; background:color-mix(in srgb,var(--paper) 74%,transparent)} .schem svg{width:100%;height:auto;display:block} .schem .sline{stroke:var(--line);stroke-width:1.4;fill:none} .schem .sacc{stroke:var(--accent);stroke-width:1.8;fill:none} .schem .sbox{stroke:var(--line);stroke-width:1.4;fill:rgba(var(--tint),.07)} .schem .sfill{fill:rgba(var(--tint),.14);stroke:var(--accent);stroke-width:1.4} .schem text{font-family:var(--mono);font-size:12px;fill:var(--ink)} .schem text.sm{font-size:10px;fill:var(--ink-faint)} .schem text.ac{fill:var(--accent)} /* ---------- discipline index cards ---------- */ .disc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr))} a.disc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit; border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 78%,transparent); transition:transform .16s ease,box-shadow .16s ease} a.disc-card:hover{transform:translateY(-3px); box-shadow:6px 6px 0 color-mix(in srgb,var(--line) 30%,transparent)} a.disc-card .thumb{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)} a.disc-card .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)} a.disc-card:hover .thumb img{filter:saturate(1.05)} a.disc-card .dc-body{padding:13px 15px 15px} a.disc-card .dc-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint)} a.disc-card h3{font-family:var(--mono);font-size:16.5px;margin:3px 0 5px} a.disc-card p{margin:0;font-size:13.5px;color:var(--ink-soft)} a.disc-card .go{font-family:var(--mono);font-size:11px;color:var(--accent); letter-spacing:.12em;text-transform:uppercase;margin-top:10px;display:block} /* ---------- pager ---------- */ .pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:44px} .pager a{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;border:1px solid var(--line);color:var(--ink);padding:9px 14px} .pager a:hover{background:var(--line);color:var(--paper)} /* ---------- buttons ---------- */ .btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase; text-decoration:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px; display:inline-block;transition:all .14s ease} .btn:hover{background:var(--line);color:var(--paper)} .btn.ghost{border-style:dashed;color:var(--ink-faint);cursor:default} .btn.ghost:hover{background:none;color:var(--ink-faint)} /* ---------- contact ---------- */ .contact{border:1px solid var(--line);padding:28px 26px; background:color-mix(in srgb,var(--paper) 78%,transparent)} .contact h2{font-family:var(--mono);font-size:21px;margin:0 0 9px} .contact p{margin:0 0 18px;color:var(--ink-soft);max-width:56ch} /* ---------- title block footer ---------- */ footer.titleblock{margin-top:66px;border:1px solid var(--line); background:color-mix(in srgb,var(--paper) 86%,transparent)} .tb-grid{display:grid;grid-template-columns:repeat(4,1fr)} .tb-cell{padding:11px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .tb-cell:nth-child(4n){border-right:none} .tb-cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase; color:var(--ink-faint);display:block;margin-bottom:3px} .tb-cell .v{font-family:var(--mono);font-size:13px;color:var(--ink)} .tb-wide{grid-column:1/-1;border-right:none;border-bottom:none;display:flex; justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline} @media(max-width:720px){ .tb-grid{grid-template-columns:repeat(2,1fr)} .tb-cell:nth-child(4n){border-right:1px solid var(--line)} .tb-cell:nth-child(2n){border-right:none} } /* ---------- tolerance ---------- */ .tol-trigger{ background:none;border:0;padding:0;font:inherit;color:inherit; cursor:help;border-bottom:1px dotted transparent; } .tol-trigger:hover{border-bottom-color:var(--accent);color:var(--accent)} .tol-trigger:focus-visible{outline:1px solid var(--accent);outline-offset:2px} .tol-wrap[hidden]{display:none} .tol-wrap{ position:fixed;inset:0;z-index:200;display:grid;place-items:center; padding:24px;background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(6px); } .tol-card{ border:1px solid var(--line);background:var(--paper);max-width:560px;width:100%; box-shadow:8px 8px 0 color-mix(in srgb, var(--line) 26%, transparent); } .tol-card img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)} .tol-meta{padding:13px 16px 15px} .tol-meta .k{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);display:block;margin-bottom:6px; } .tol-meta p{margin:0 0 4px;font-size:14px;color:var(--ink-soft);line-height:1.55} .tol-meta .sig{ font-family:var(--mono);font-size:11px;color:var(--ink-faint); display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; border-top:1px dashed var(--grid-major);margin-top:11px;padding-top:9px; } .tol-close{ position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:12px; letter-spacing:.14em;text-transform:uppercase;background:none; border:1px solid var(--line);color:var(--ink);padding:7px 12px;cursor:pointer; } .tol-close:hover{background:var(--line);color:var(--paper)} @media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}} /* ---------- portal (index feed + sidebar boxes) ---------- */ .portal{display:grid;gap:30px;grid-template-columns:minmax(0,1fr) 292px;align-items:start} @media(max-width:900px){.portal{grid-template-columns:1fr}} .fentry{border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 78%,transparent); padding:16px 18px;margin:0 0 16px} .fmeta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono); font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)} .fmeta .fdoc{color:var(--accent);font-weight:700} .fentry h3{font-family:var(--mono);font-size:19px;margin:7px 0 8px;line-height:1.25} .fentry h3 a{color:var(--ink);text-decoration:none} .fentry h3 a:hover{color:var(--accent)} .fentry p{margin:0 0 10px;font-size:14.5px;color:var(--ink-soft)} .fmore{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);text-decoration:none} .fmore:hover{opacity:.72} .chip{border:1px solid var(--line);padding:1px 7px;color:var(--ink-soft)} .pbox{border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 78%,transparent); margin:0 0 16px} .pbox>h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin:0;padding:8px 13px;border-bottom:1px solid var(--line); background:rgba(var(--tint),.10)} .pbox .pin{padding:11px 13px} .pbox ul{list-style:none;margin:0;padding:0} .pbox li{padding:5px 0;border-bottom:1px dashed var(--grid-major);font-size:13px} .pbox li:last-child{border-bottom:none} .pbox li a{color:var(--ink);text-decoration:none} .pbox li a:hover{color:var(--accent)} .pbox .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint)} .pbox .gnote{margin:0;font-size:14px;color:var(--ink-soft);font-style:italic} .statrow{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono); font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 0; border-bottom:1px dashed var(--grid-major)} .statrow:last-child{border-bottom:none} .statrow .v{color:var(--accent)} /* ---------- article body (posts) ---------- */ .article{max-width:70ch} .article h2{font-family:var(--mono);font-size:21px;margin:38px 0 12px;letter-spacing:-.01em} .article h3{font-family:var(--mono);font-size:17px;margin:30px 0 9px} .article h4{font-family:var(--mono);font-size:15px;margin:24px 0 8px} .article ul,.article ol{color:var(--ink-soft);margin:0 0 17px;padding-left:24px} .article li{margin:4px 0} .article blockquote{border-left:2px solid var(--accent);margin:0 0 17px; padding:2px 0 2px 16px;font-style:italic} .article .dim{margin:34px 0 18px} .article .specwrap{margin:0 0 18px} /* ---------- index latest strip ---------- */ ul.latest{list-style:none;margin:0;padding:0;max-width:74ch} ul.latest li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap; padding:9px 0;border-bottom:1px dashed var(--grid-major);font-size:15px} ul.latest li a{color:var(--ink);text-decoration:none;font-weight:600} ul.latest li a:hover{color:var(--accent)} ul.latest .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);font-weight:700} ul.latest .ldate{margin-left:auto;font-family:var(--mono);font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}