/* Not Just College -- one stylesheet, no web fonts, no framework, no build step. A system font stack means zero font requests and zero layout shift, which is most of Core Web Vitals settled before a single rule is written. Structure of this file: 1 tokens the neutral scale and the six section palettes 2 base reset, body, links, focus, the skip link 3 furniture masthead, section rail, breadcrumb strip, tailboard 4 page shells spec (article), sheet (plain), hub, home 5 in-article typography, callouts, tables, the rig (tool) chrome 6 print Naming: this site is about jobsites, so the layout is named after one. A `bay` is a full-width span, a `run` is the reading column inside it, a `spec` is an article, the `rail` is the section nav, the `tailboard` is the footer, and a `rig` is an interactive tool. */ /* ============================ 1. TOKENS ============================ */ :root{ --text:#1b1a17; --text-2:#4b4740; --text-3:#6a6459; --rule:#ded8cc; --rule-2:#ebe6dc; --paper:#faf7f1; /* warm paper, not white */ --paper-2:#f2ede3; --ink-band:#20242b; /* masthead and tailboard */ --band-text:#e9e6df; --band-text-2:#a8a79f; --band-rule:#343a44; --band-accent:#fb923c; /* the one accent legible on the ink band */ /* headings are a system serif; body stays a system sans. No web fonts, so this costs nothing and is the single biggest change in feel. */ --head:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino, Georgia,"Times New Roman",serif; --bay:1140px; /* full-width span */ --run:704px; /* reading column */ --edge:3px; /* the site has square corners on purpose */ /* default key colour: used on the home page and on standalone pages */ --key:#c2410c; --key-lit:#ea580c; --tint:#fff7ed; --hair:#f3cead; } /* ---- section palettes ------------------------------------------------- Each section owns one hue. The four variables are re-bound wherever a data-track attribute appears, which is on (colouring the whole page), on each rail link, on each board row and on each pinned item. One rule set then paints breadcrumbs, headings, rules, numbers, links and tool chrome with no per-section CSS anywhere below this block. Every --key clears 4.5:1 on white and on its own --tint. */ [data-track="work-rules"]{ --key:#b91c1c; --key-lit:#dc2626; --tint:#fef4f4; --hair:#f6c9c9; } [data-track="apprenticeships"]{ --key:#0369a1; --key-lit:#0284c7; --tint:#f1f8fd; --hair:#b8dbf1; } [data-track="paying-for-it"]{ --key:#15803d; --key-lit:#16a34a; --tint:#f2fbf4; --hair:#b7e6c5; } [data-track="trades"]{ --key:#c2410c; --key-lit:#ea580c; --tint:#fff7ed; --hair:#f6cca6; } [data-track="ai-and-work"]{ --key:#6d28d9; --key-lit:#7c3aed; --tint:#f6f4fe; --hair:#dcd4fb; } [data-track="tools"]{ --key:#0f766e; --key-lit:#0d9488; --tint:#f0faf8; --hair:#a5ddd6; } /* ============================= 2. BASE ============================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} h1,h2,h3,h4,.sign-name,.kicker{font-family:var(--head)} h1,h2,h3,h4{letter-spacing:-.005em} body{ margin:0; background:var(--paper); color:var(--text); font:400 17px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif; font-feature-settings:"kern" 1; text-rendering:optimizeLegibility; } .bay{max-width:var(--bay);margin:0 auto;padding:0 22px} .run{max-width:var(--run);margin:0 auto;padding:0 22px} .deck{display:block;padding:0 0 8px} a{color:var(--key);text-underline-offset:2px} a:hover{color:var(--key-lit)} /* one visible focus ring for the whole site, keyboard only */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--key-lit); outline-offset:2px; border-radius:1px; } .jump{ position:absolute;left:8px;top:-64px;z-index:100; background:var(--text);color:#fff;text-decoration:none; padding:11px 18px;font-size:15px;font-weight:600; border-radius:0 0 var(--edge) var(--edge); transition:top .12s ease; } .jump:focus{top:0;color:#fff} /* =========================== 3. FURNITURE ========================== */ /* ---- masthead: two stacked bands, brand over rail -------------------- Not sticky. On a phone the rail wraps to as many lines as it needs, so every section stays visible and reachable with no script, no toggle and nothing hidden behind an icon. */ .masthead{background:var(--ink-band);border-bottom:3px solid var(--key)} .masthead-bar{ display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap; padding-top:18px;padding-bottom:14px; } .sign{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--band-text)} .sign-mark{ width:14px;height:16px;flex:0 0 auto; background:linear-gradient(150deg,var(--key-lit),var(--key)); /* a hex nut, the same shape as the favicon */ clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } .sign-name{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .sign:hover .sign-name{color:var(--band-accent)} .sign-line{ margin:0;font-size:13.5px;color:var(--band-text-2);line-height:1.4; } .rail{border-top:1px solid var(--band-rule);background:transparent} .rail-bay{display:flex;flex-wrap:wrap;gap:0 4px} .rail-link{ display:inline-block; padding:11px 12px 9px; border-bottom:3px solid transparent; color:var(--band-text-2);text-decoration:none; font-size:14.5px;font-weight:550;line-height:1.3; } .rail-link:hover{color:var(--band-text);border-bottom-color:var(--band-rule)} .rail-link[aria-current]{color:#fff;border-bottom-color:var(--band-accent)} @media(max-width:700px){ .masthead-bar{padding-top:13px;padding-bottom:9px} .sign-line{flex:1 0 100%;font-size:13px} .rail-bay{padding:0 16px} .rail-link{font-size:13.5px;padding:8px 8px 6px} .run{padding:0 18px} .spec-head{margin-top:26px} } /* ---- breadcrumb strip: site furniture, so it lives outside
---- */ .trailbar{border-bottom:1px solid var(--rule-2);background:var(--paper)} .trail{ list-style:none;display:flex;flex-wrap:wrap;align-items:center; margin:0;padding:10px 0;gap:4px 6px; font-size:13px;color:var(--text-3); } .trail li{display:flex;align-items:center;gap:6px;min-width:0} .trail li+li::before{content:"\203A";color:var(--rule);font-size:15px;line-height:1} .trail a{color:var(--text-3);text-decoration:none} .trail a:hover{color:var(--key);text-decoration:underline} .trail [aria-current]{color:var(--text-2);font-weight:550} /* ---- tailboard (footer): a dark band, so the page has a visible end -- */ .tailboard{ margin-top:72px;background:var(--ink-band);color:var(--band-text); padding:36px 0 46px;font-size:14px; } .tailboard-links{ list-style:none;margin:0 0 22px;padding:0; display:flex;flex-wrap:wrap;gap:10px 26px; } .tailboard-links a{color:#fff;text-decoration:none;font-weight:550} .tailboard-links a:hover{text-decoration:underline} .tailboard-links a:focus-visible{outline-color:#fff} .tailboard p{margin:0 0 12px;max-width:80ch;line-height:1.62} .notice{color:#fff} .smallprint{font-size:13px;color:#b9c1cb} .mark{font-size:13px;color:#8d97a3;margin-top:20px} /* ========================= 4. PAGE SHELLS ========================== */ /* ---- article (spec) -------------------------------------------------- Order on the page: section kicker, headline, the short answer as the lead, the piece, the questions, the sources, the book, then the authorship and last-checked stamp. Siblings sit outside the
. */ .spec-head{margin:34px 0 26px} .kicker{ margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--key); } .topline{ margin:18px 0 0;padding:2px 0 2px 20px; border-left:4px solid var(--key); font-size:19px;line-height:1.6;color:var(--text-2); } .topline p{margin:0 0 .8em} .topline p:last-child{margin-bottom:0} /* ---- plain pages ---- */ .sheet{margin-top:34px} /* ---- hub ---- */ .hubhead{margin:34px 0 10px} .brief{ font-size:18px;color:var(--text-2);max-width:62ch; border-top:1px solid var(--rule);padding-top:16px;margin-top:14px; } .brief p:last-child{margin-bottom:0} /* a numbered running order, not a grid of tiles */ .worklist{list-style:none;margin:30px 0 0;padding:0;counter-reset:none} .worklist-item{ display:flex;gap:18px;align-items:flex-start; padding:20px 4px;border-top:1px solid var(--rule-2); } .worklist-item:first-child{border-top:1px solid var(--rule)} .worklist-item:last-child{border-bottom:1px solid var(--rule)} .worklist-no{ flex:0 0 auto;width:2.4em; font-size:14px;font-weight:700;color:var(--key); font-variant-numeric:tabular-nums;letter-spacing:.04em; padding-top:3px; } .worklist-body{min-width:0} .worklist-title{margin:0 0 5px;font-size:18.5px;line-height:1.34;letter-spacing:-.01em} .worklist-title a{color:var(--text);text-decoration:none} .worklist-title a:hover{color:var(--key);text-decoration:underline} .worklist-note{margin:0;font-size:15px;color:var(--text-3);line-height:1.55} .worklist-item:hover{background:var(--tint)} /* ---- home ---- */ .opener{border-bottom:1px solid var(--rule);padding:40px 0 34px} .opener h1{margin:0 0 18px;max-width:17ch} .opener-lead{font-size:19px;color:var(--text-2);max-width:60ch} .opener-lead p:last-child{margin-bottom:0} .board-h,.pinned-h{ margin:38px 0 14px;font-size:13px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--text-3); } .board{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .board-row{border-bottom:1px solid var(--rule-2)} .board-row:last-child{border-bottom:1px solid var(--rule)} .board-link{ display:block;padding:18px 18px 18px 22px;text-decoration:none;color:var(--text); border-left:6px solid var(--key); } .board-link:hover{background:var(--tint)} .board-name{ display:block;font-size:18.5px;font-weight:650;letter-spacing:-.012em; line-height:1.3;margin-bottom:5px; } .board-link:hover .board-name{color:var(--key)} .board-note{display:block;font-size:15px;color:var(--text-3);line-height:1.55} .pinned-list{margin:0;padding:0 0 0 2.1em;font-size:16.5px} .pinned-list li{ padding:9px 0 9px 6px;border-bottom:1px solid var(--rule-2); } .pinned-list li::marker{color:var(--key);font-weight:700;font-size:13px} .pinned-list a{text-decoration:none;font-weight:550;color:var(--text)} .pinned-list a:hover{color:var(--key);text-decoration:underline} /* ========================== 5. IN-ARTICLE ========================== */ h1{ font-size:clamp(29px,4.5vw,41px);line-height:1.15;letter-spacing:-.024em; margin:0 0 10px;font-weight:730; } h2{ font-size:clamp(20px,2.5vw,25px);line-height:1.28;letter-spacing:-.014em; margin:2.2em 0 .55em;font-weight:700; } h3{font-size:18px;line-height:1.38;margin:1.9em 0 .4em;font-weight:660} p{margin:0 0 1.15em} /* section headings in running copy sit under a full-width key rule. The sister markers (a coloured tab to the left of the text) are not used anywhere on this site. */ .longform h2{ border-top:2px solid var(--key);padding-top:.5em;margin-top:2.3em; } .longform ul,.longform ol{margin:0 0 1.3em;padding-left:1.35em} .longform li{margin-bottom:.45em} .longform li::marker{color:var(--key)} .longform h2:first-child{margin-top:1.4em} strong{font-weight:650} blockquote{ margin:1.7em 0;padding:4px 0 4px 22px; border-left:1px solid var(--rule);color:var(--text-2);font-style:italic; } blockquote p:last-child{margin-bottom:0} /* callouts. Square, hairline-ruled, no shadows. */ .sidenote,.caution{ padding:16px 20px 4px;margin:1.7em 0;font-size:16px;border-radius:var(--edge); } .sidenote{background:var(--tint);border:1px solid var(--hair)} .caution{background:#fdf6e8;border:1px solid #e2cb9b;border-left:5px solid #b45309} /* things to read out loud */ .saythis{ background:var(--paper-2);border:1px dashed var(--rule); padding:16px 20px 4px;margin:1.6em 0;border-radius:var(--edge); } .saythis p{margin-bottom:.8em} .saythis em{color:var(--text-2)} /* ---- tables ---- */ .scroller{overflow-x:auto;margin:1.7em 0;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;font-size:15.5px;margin:1.7em 0} th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule-2)} th{ font-weight:650;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase; color:var(--text-2);background:var(--paper-2); border-bottom:1px solid var(--rule); } tbody tr:hover{background:var(--tint)} /* ---- checklists ---- */ .ticks{list-style:none;padding-left:0} .ticks li{position:relative;padding-left:28px;margin-bottom:.6em} .ticks li::before{ content:"";position:absolute;left:0;top:.42em; width:14px;height:14px;border:2px solid var(--key);border-radius:1px; } /* ---- questions: headed prose, never a collapsed disclosure ---- */ .loose-ends{margin-top:3.2em} .loose-ends>h2{ font-size:13px;text-transform:uppercase;letter-spacing:.09em; color:var(--text-3);margin:0 0 .2em;font-weight:700; } .ask{padding:18px 0;border-bottom:1px solid var(--rule-2)} .ask:first-of-type{border-top:1px solid var(--rule)} .ask-q{margin:0 0 .45em;font-size:17px;font-weight:650;line-height:1.4;color:var(--text)} .ask-a{font-size:16px;color:var(--text-2)} .ask-a p:last-child{margin-bottom:0} /* ---- sources ---- */ .paperwork{ margin-top:3em;background:var(--paper-2); border-top:2px solid var(--key);border-bottom:1px solid var(--rule); padding:20px 24px 22px; } .paperwork-h{ margin:0 0 .6em;font-size:13px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--text-3);border:0;padding:0; } .refs{margin:0;padding-left:1.5em;font-size:14.5px;color:var(--text-2)} .refs li{margin-bottom:.45em} .refs li::marker{color:var(--text-3);font-variant-numeric:tabular-nums} .ref a{color:var(--key)} /* ---- the book ---- */ .shelf{ margin-top:2.6em;padding:22px 24px; border:1px solid var(--rule);border-left:5px solid var(--key); background:var(--paper); } .shelf-kicker{ margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--text-3); } .shelf-name{ margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.012em; border:0;padding:0;line-height:1.3; } .shelf-line{margin:0 0 10px;font-size:15.5px;color:var(--text-2)} .shelf-note{margin:0 0 16px;font-size:13.5px;color:var(--text-3);line-height:1.58} .shelf-act{margin:0} .shelf-buy{ display:inline-block;font-size:15px;font-weight:600;text-decoration:none; color:#fff;background:var(--key);padding:10px 18px;border-radius:var(--edge); } .shelf-buy:hover{background:var(--key-lit);color:#fff} .shelf-assoc{margin:10px 0 0;font-size:13px;color:var(--text-3)} /* ---- authorship and freshness, at the foot of the piece ---- */ .revision{ margin-top:2.4em;padding-top:14px;border-top:1px solid var(--rule-2); font-size:14px;color:var(--text-3); } .revision p{margin:0} .revision-who{color:var(--text-2);font-weight:550;text-decoration:none} .revision-who:hover{color:var(--key);text-decoration:underline} /* ---- siblings, outside the article ---- */ .nextup{margin-top:3em} .nextup-h{ margin:0 0 .5em;font-size:13px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--text-3);border:0;padding:0; } .nextup-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .nextup-list li{border-bottom:1px solid var(--rule-2)} .nextup-list a{ display:block;padding:12px 4px 12px 0;text-decoration:none; font-weight:550;color:var(--text);font-size:16px; } .nextup-list a:hover{color:var(--key)} /* ---- rigs (the interactive tools) ------------------------------------ The classes below in the .rig-* family are written by the generator. The bare classes nested inside a rig (.bar, .lab, .track, .fill, .val, .big, .sub, .warn, .tablewrap, .hojob-body) are written at runtime by assets/tools.js and are matched here as-is on purpose: that file emits them and this file styles them. */ .rig{ background:var(--paper-2);border:1px solid var(--rule); border-top:3px solid var(--key); padding:24px;margin:1.9em 0;border-radius:var(--edge); } .rig-row,.rig .row{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;margin-bottom:18px} .rig-field,.rig .field{ flex:1 1 170px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end; } .rig label{ display:block;font-size:13px;font-weight:600;color:var(--text-2); margin-bottom:5px;letter-spacing:.01em; } .rig input[type=number],.rig input[type=text],.rig select{ width:100%;font:inherit;font-size:16px;padding:10px 12px;height:42px; border:1px solid var(--rule);border-radius:var(--edge);background:#fff;color:var(--text); appearance:none;-webkit-appearance:none; } .rig select{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6873' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center; background-size:11px;padding-right:34px; } .rig input:focus,.rig select:focus{outline:2px solid var(--key-lit);outline-offset:-1px} .rig input[type=range]{width:100%;accent-color:var(--key-lit)} .rig-out,.rig .out{ background:#fff;border:1px solid var(--rule);border-radius:var(--edge); padding:18px 20px;margin-top:4px; } .rig-figure,.rig .big{ font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--key); line-height:1.2;margin:0; } .rig-caption,.rig .sub{font-size:14px;color:var(--text-3);margin:4px 0 0} .rig-bars,.rig .bars{margin-top:16px} .rig .bar{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:14px} .rig .bar .lab{flex:0 0 78px;color:var(--text-3)} .rig .bar .track{ flex:1;height:18px;background:var(--rule-2);border-radius:2px;overflow:hidden; display:block; } /* display:block matters: an inline span ignores width and height entirely, which silently renders every bar empty. */ .rig .bar .fill{ display:block;height:100%;min-width:2px; background:var(--key-lit);border-radius:2px;transition:width .18s ease; } .rig .bar .val{ flex:0 0 88px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600; } .rig .warn{ margin:14px 0;background:#fdf6e8;border:1px solid #e2cb9b;border-left:5px solid #b45309; padding:14px 18px 2px;border-radius:var(--edge);font-size:15px; } .rig .hojob-body{margin-top:12px} .rig .sidenote{ font-size:13.5px;margin-top:14px;background:none;border:none;padding:0; color:var(--text-3); } .rig button{ font:inherit;font-size:14px;font-weight:600;padding:9px 16px;margin:0 8px 8px 0; border:1px solid var(--rule);border-radius:var(--edge);background:#fff;color:var(--text-2); cursor:pointer; } .rig button:hover{border-color:var(--key-lit);color:var(--key)} .rig .tablewrap,.rig .scroller{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch} .rig table{font-size:14px;margin:0;min-width:100%} .rig th,.rig td{white-space:nowrap;padding:8px 12px} .rig-out h4,.rig .out h4{margin:16px 0 4px;font-size:15px} .rig-out ul,.rig .out ul{margin:0 0 4px;padding-left:20px;font-size:15px} /* interactive checklist: real checkboxes, so the drawn square from .ticks would be a second, fake box sitting next to the real one. */ .rig .ticks li::before{content:none} .rig .ticks li{padding-left:0;display:flex;gap:11px;align-items:flex-start} .rig .ticks input[type=checkbox]{ flex:0 0 auto;width:18px;height:18px;margin:3px 0 0;accent-color:var(--key-lit); } .rig .ticks label{ font-size:15px;font-weight:400;color:var(--text);margin:0;line-height:1.5;letter-spacing:0; } .printsheet{ border:1px solid var(--rule);padding:0;overflow:hidden;margin:1.9em 0; border-radius:var(--edge); } .printsheet table{margin:0} .printsheet th{background:var(--paper-2)} .printsheet td.blank{height:38px} /* ============================= 6. PRINT ============================ */ @media print{ .masthead,.tailboard,.trailbar,.nextup,.shelf,.loose-ends,.jump{display:none} body{font-size:12pt;color:#000} .run,.bay{max-width:none;padding:0} .topline{border-left:2px solid #666} .rig{background:none;border:1px solid #999} .rig button{display:none} .paperwork{background:none;border-top:1px solid #999} a{color:#000} }