/* ============================================================ 4point54design — starter kit Taste, not theme. Fill in the TWO things marked FILL-IN (the surface ramp and the accent hue) and the rest follows. Pair with the three fonts wired in your . ============================================================ */ :root{ /* -- FILL-IN 1: surface + ink ramp ------------------------ Pick a dark OR light direction. Keep the *tiers*: three near-identical surfaces, three tiers of ink, two hairline rules. Values below are a calm dark default — replace hues freely, preserve the ladder. */ color-scheme:dark; /* or: light */ /* Clean-room chamber: cool ink, instrument surfaces */ --bg:#090b0e; /* page background */ --bg2:#0d1014; /* raised section */ --panel:#12161c; /* figure surface */ --panel2:#171c23; /* figure header/controls */ --rule:#1c222a; /* hairline */ --rule2:#2a323c; /* emphasis hairline/baseline */ --ink:#eceae4; /* primary text (NOT #fff)*/ --ink2:#9aa3ad; /* claims, captions */ --ink3:#66707a; /* eyebrows, muted labels */ /* FILL-IN 2: probe cyan = residual signal (the pedagogical hero hue) */ --accent:#6eb8c4; /* links, key data, italic accent word */ --accent-lo:#2f5c64; /* accent shadow / selection bg */ --accentwash:rgba(110,184,196,.10); /* emphasis regions */ /* secondary semantic (sparingly): content plane vs residual risk */ --content:#a7b4c4; /* ephemeral content / vapor */ --hazard:#c47a84; /* residual risk lines */ --synth:#b89a5a; /* de-novo synthetic path */ /* -- type roles (swap faces to change personality) -------- */ --serif:'Instrument Serif',Georgia,serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;background:var(--bg);scrollbar-color:var(--rule2) var(--bg)} ::selection{background:var(--accent-lo);color:var(--ink)} body{ background:var(--bg);color:var(--ink); font-family:var(--sans);font-weight:300; -webkit-font-smoothing:antialiased;line-height:1.6; } /* ---- layout ---- */ .wrap{max-width:1120px;margin:0 auto;padding:0 28px} .narrow{max-width:660px} /* ---- eyebrow / kicker ---- */ .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .eyebrow .num,.plate-mark{font-family:var(--mono);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--ink3)} .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; padding:4px 9px;border:1px solid var(--rule2);color:var(--ink3);border-radius:2px} /* ---- headings ---- */ h1{font-family:var(--serif);font-weight:400; font-size:clamp(2.9rem,7.6vw,6.2rem);line-height:.93;letter-spacing:-.015em;max-width:15ch} h2{font-family:var(--serif);font-weight:400; font-size:clamp(1.9rem,3.9vw,3rem);line-height:1.06;letter-spacing:-.01em;max-width:19ch} h1 em,h2 em{font-style:italic;color:var(--accent)} /* the serif-italic "claim" line that gives each section a voice */ .claim{font-family:var(--serif);font-style:italic; font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.45;color:var(--ink2); margin-top:20px;max-width:50ch} .claim b{color:var(--accent);font-style:italic;font-weight:400} /* ---- section rhythm ---- */ .section{padding:96px 0;border-bottom:1px solid var(--rule)} /* ---- figure frame (the workhorse) ---- */ .fig{margin-top:44px;border:1px solid var(--rule);background:var(--panel); border-radius:3px;overflow:hidden} .fig-h{display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--panel2);flex-wrap:wrap} .fig-t{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)} .fig-u{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.08em} .fig-b{padding:22px 18px} .fig svg{display:block;width:100%;height:auto;overflow:visible} .src{padding:12px 18px;border-top:1px solid var(--rule);background:var(--panel2); font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--ink3)} /* ---- stat strip ---- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);margin-top:26px} .stat{background:var(--panel);padding:20px 16px} .stat .v{font-family:var(--mono);font-size:1.5rem;color:var(--accent);letter-spacing:-.02em} .stat .l{font-size:.78rem;color:var(--ink3);margin-top:7px;line-height:1.45} /* ---- optional: "go deeper" disclosure (use only when content has real depth) ---- */ details.deep{margin-top:26px;border-top:1px solid var(--rule)} details.deep summary{list-style:none;cursor:pointer;padding:18px 0; font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);display:flex;align-items:center;gap:11px} details.deep summary::-webkit-details-marker{display:none} details.deep summary::before{content:"+";font-size:14px;line-height:1;transition:transform .25s} details.deep[open] summary::before{transform:rotate(45deg)} details.deep summary:focus-visible{outline:1px solid var(--accent);outline-offset:3px} .deepbody{padding-bottom:22px;max-width:68ch} .deepbody p{color:var(--ink2);margin-bottom:14px;font-size:.98rem} .deepbody strong{color:var(--ink);font-weight:500} /* ---- hand-styled range slider (never ship the OS default) ---- */ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px; background:transparent;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--rule2)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:15px;height:15px;margin-top:-6px;border-radius:50%; border:1px solid var(--accent-lo);background:var(--accent)} input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--rule2)} input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%; border:1px solid var(--accent-lo);background:var(--accent)} input[type=range]:focus-visible{outline:1px solid var(--accent);outline-offset:4px} /* ---- reveal on scroll (paired with the JS below) ---- */ .rv-in{opacity:0;transform:translateY(14px); transition:opacity .7s ease,transform .7s ease} .rv-in.on{opacity:1;transform:none} /* ---- responsive ---- */ @media(max-width:760px){ .wrap{padding:0 20px} .stats{grid-template-columns:1fr 1fr} .section{padding:64px 0} .fig-b{padding:16px 10px} } /* ---- motion off switch (non-negotiable) ---- */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv-in{opacity:1;transform:none} html{scroll-behavior:auto} } /* ============================================================ Reveal-on-scroll — paste into a