/* ============================================================ PERSONAL PORTFOLIO — ENGINEERING DRAWING Pure black on off-white (paper/ink) by default. Add .blueprint to or click FINISH for the cyanotype palette. ============================================================ */ /* --- TOKENS ---------------------------------------------------- */ :root { --paper: #f1ece0; /* off-white, like aged drafting paper */ --paper-shade: #e7e1d2; /* subtle vignette / hatch */ --ink: #111111; /* not pure black — softer on eyes */ --ink-soft: #6a6358; /* dimensions, secondary text */ --ink-faint: #b8b0a0; /* extension lines, grid */ --rule: 1.25px; /* default line weight */ --rule-thin: 0.75px; --rule-thick: 2px; --rule-border: 3px; /* drawing border */ --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; --pad: clamp(16px, 2.4vw, 32px); /* motion — strong custom curves, short durations */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 140ms; --dur-hover: 180ms; --dur-palette: 260ms; } body.blueprint { --paper: #0e2a4f; /* prussian blue */ --paper-shade: #11315c; --ink: #f4f1e6; /* not pure white — slightly creamy */ --ink-soft: #b8c6dc; --ink-faint: #5a7aa0; } /* --- RESET ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; /* palette crossfade when toggling FINISH */ transition: background-color var(--dur-palette) var(--ease-out), color var(--dur-palette) var(--ease-out); } a { color: var(--ink); text-decoration: none; border-bottom: var(--rule-thin) solid var(--ink); padding-bottom: 1px; transition: opacity var(--dur-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { a:hover { opacity: 0.5; } } a:active { opacity: 0.35; } h1, h2, h3 { margin: 0; font-weight: 700; } /* faint subsurface texture: tiny grid + paper grain */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 24px 24px; mix-blend-mode: multiply; opacity: 0.5; } body.blueprint::before { background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); mix-blend-mode: normal; opacity: 0.6; } /* ============================================================ SHEET — outer frame + zone markers ============================================================ */ .sheet { position: relative; z-index: 1; padding: 28px; min-height: 100vh; opacity: 0; animation: sheetIn 480ms var(--ease-out) forwards; } @keyframes sheetIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Zone letters/numbers around the perimeter */ .zone-row, .zone-col { position: absolute; display: flex; font-size: 11px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.08em; pointer-events: none; } .zone-row { left: 28px; right: 28px; justify-content: space-around; } .zone-row--top { top: 8px; } .zone-row--bottom { bottom: 8px; } .zone-col { top: 28px; bottom: 28px; flex-direction: column; justify-content: space-around; } .zone-col--left { left: 8px; } .zone-col--right { right: 8px; } /* Inner double border — thick outer, thin inner — like a real sheet */ .frame { position: relative; border: var(--rule-border) solid var(--ink); outline: var(--rule-thin) solid var(--ink); outline-offset: 6px; padding: clamp(48px, 5vw, 72px) clamp(40px, 4.5vw, 64px) 0; background: transparent; } /* ============================================================ CALLOUT NAV — leader lines with bubbles ============================================================ */ .callout-nav { position: relative; display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; padding-bottom: 40px; margin-bottom: 32px; border-bottom: var(--rule-thin) dashed var(--ink-faint); } .callout { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink); text-decoration: none; border: none; padding: 0; } /* The shoulder + leader is a CSS pseudo: short horizontal then a tick. Extends slightly on hover for a drafting-coded interaction. */ .callout::before { content: ""; display: inline-block; width: 22px; height: var(--rule-thin); background: var(--ink); transition: width var(--dur-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .callout:hover::before { width: 32px; } } .callout__bubble { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: var(--rule) solid var(--ink); font-weight: 700; font-size: 12px; background: var(--paper); flex: 0 0 auto; transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); } .callout__label { border-bottom: var(--rule-thin) solid var(--ink); padding-bottom: 2px; } @media (hover: hover) and (pointer: fine) { .callout:hover .callout__bubble { background: var(--ink); color: var(--paper); } } .callout:active .callout__bubble { transform: scale(0.94); } /* back-to-index leader, used on project sheets — bubble holds an arrow */ .callout--back .callout__bubble { font-size: 14px; line-height: 1; font-weight: 500; } /* spec block — used on project sheets */ .specs { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); } .specs__row { display: grid; grid-template-columns: 200px 1fr; align-items: baseline; gap: 24px; padding: 12px 0; border-bottom: var(--rule-thin) solid var(--ink-faint); } .specs__row:last-child { border-bottom: 0; } .specs__row dt { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: var(--ink-soft); } .specs__row dd { margin: 0; font-size: 14px; line-height: 1.55; min-width: 0; overflow-wrap: break-word; } @media (max-width: 720px) { .specs__row { grid-template-columns: 140px 1fr; gap: 12px; } } /* FINISH note — palette toggle styled like a drafting note */ .finish-note { margin-left: auto; display: inline-flex; align-items: stretch; gap: 0; background: transparent; border: var(--rule) solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink); cursor: pointer; padding: 0; } .finish-note { transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); } .finish-note__tag { background: var(--ink); color: var(--paper); padding: 6px 10px; font-weight: 700; } .finish-note__value { padding: 6px 12px; font-weight: 500; } @media (hover: hover) and (pointer: fine) { .finish-note:hover { opacity: 0.75; } } .finish-note:active { transform: scale(0.97); } /* ============================================================ VIEW — generic block ============================================================ */ .view { position: relative; margin: 0 0 64px; padding: 24px 0 32px; } .view__header { display: flex; align-items: baseline; gap: 18px; font-size: 11px; letter-spacing: 0.14em; font-weight: 500; color: var(--ink-soft); border-bottom: var(--rule-thin) solid var(--ink-faint); padding-bottom: 8px; margin-bottom: 28px; } .view__tag { background: var(--ink); color: var(--paper); padding: 3px 8px; font-weight: 700; letter-spacing: 0.16em; } .view__name { color: var(--ink); font-weight: 700; font-size: inherit; /* h2 default would be too large here */ letter-spacing: 0.18em; flex: 1; } .view__scale { font-size: 10px; } /* ============================================================ FRONT VIEW — nameplate with dimension lines ============================================================ */ .view--front .nameplate { position: relative; padding: 56px 64px 56px 64px; margin: 32px 24px 64px; border: var(--rule-thin) solid var(--ink-faint); } .nameplate__name { font-family: var(--mono); font-size: clamp(30px, 5.5vw, 60px); font-weight: 700; letter-spacing: 0.015em; line-height: 0.98; margin: 0; max-width: 100%; text-transform: uppercase; overflow-wrap: break-word; word-break: break-word; hyphens: none; } .nameplate__role { margin: 18px 0 0; font-size: 12px; letter-spacing: 0.16em; color: var(--ink-soft); } /* ============================================================ DIMENSIONS — pure HTML/CSS, no SVG Animated entrance: extension lines tick in, dim line scales from center, value chip fades in last. Reads as "drafted on page load" rather than "static SVG." ============================================================ */ .dim { position: absolute; pointer-events: none; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); } .dim__value { position: absolute; background: var(--paper); padding: 2px 10px; white-space: nowrap; z-index: 1; } /* horizontal dimension (under the nameplate) */ .dim--width { left: 0; right: 0; bottom: -28px; height: 16px; } .dim--width::before, .dim--width::after { content: ""; position: absolute; top: -8px; width: var(--rule-thin); height: 22px; background: var(--ink); transform-origin: center; } .dim--width::before { left: 0; } .dim--width::after { right: 0; } .dim--width .dim__line { position: absolute; top: calc(50% - 0.625px); left: 0; right: 0; height: var(--rule-thin); background: var(--ink); transform-origin: center; } .dim--width .dim__line::before, .dim--width .dim__line::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); } .dim--width .dim__line::before { left: 0; border-right: 10px solid var(--ink); } .dim--width .dim__line::after { right: 0; border-left: 10px solid var(--ink); } .dim--width .dim__value { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* vertical dimension (left of the nameplate) */ .dim--height { left: -32px; top: 0; bottom: 0; width: 16px; } .dim--height::before, .dim--height::after { content: ""; position: absolute; left: -8px; width: 22px; height: var(--rule-thin); background: var(--ink); transform-origin: center; } .dim--height::before { top: 0; } .dim--height::after { bottom: 0; } .dim--height .dim__line { position: absolute; left: calc(50% - 0.625px); top: 0; bottom: 0; width: var(--rule-thin); background: var(--ink); transform-origin: center; } .dim--height .dim__line::before, .dim--height .dim__line::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; transform: translateX(-50%); } .dim--height .dim__line::before { top: 0; border-bottom: 10px solid var(--ink); } .dim--height .dim__line::after { bottom: 0; border-top: 10px solid var(--ink); } .dim--height .dim__value { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; } @keyframes dimExtX { to { transform: scaleX(1); } } @keyframes dimExtY { to { transform: scaleY(1); } } @keyframes dimLineX { to { transform: scaleX(1); } } @keyframes dimLineY { to { transform: scaleY(1); } } @keyframes dimValueIn { to { opacity: 1; } } .view__lede { max-width: 64ch; margin: 0 24px; font-size: 14px; line-height: 1.65; color: var(--ink); } /* ============================================================ SECTION A-A — about, with hatched cut surface ============================================================ */ .view--section .section-cut { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 0; border: var(--rule) solid var(--ink); margin: 0 24px; } /* hatched left band = the "cut surface" — fills in when drawn */ .section-cut__hatch { background-image: repeating-linear-gradient( -45deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 8px ); border-right: var(--rule) solid var(--ink); } @keyframes hatchFill { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .section-cut__body { position: relative; padding: 36px 40px; font-size: 14px; line-height: 1.7; } .section-cut__body p { margin: 0 0 1em; max-width: 64ch; } .section-cut__body p:last-child { margin-bottom: 0; } /* "A" markers at edges — the cutting plane labels */ .section-cut__marker { position: absolute; width: 28px; height: 28px; border: var(--rule) solid var(--ink); background: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; top: 50%; transform: translateY(-50%); } .section-cut__marker--left { left: -14px; } .section-cut__marker--right { right: -14px; } /* ============================================================ DETAIL B — projects parts list ============================================================ */ .parts-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--ink); } .part { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 24px 0; border-bottom: var(--rule-thin) solid var(--ink-faint); } .part:last-child { border-bottom: var(--rule) solid var(--ink); } .part__num { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-soft); padding-top: 4px; } .part__body { min-width: 0; } /* let the grid track shrink on phones */ .part__name { font-size: 22px; font-weight: 700; letter-spacing: 0.03em; margin: 0 0 8px; text-transform: uppercase; overflow-wrap: break-word; } .part__desc { margin: 0 0 10px; font-size: 14px; line-height: 1.6; max-width: 64ch; } .part__meta { margin: 0; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); } .part__meta a { font-size: inherit; display: inline-block; transition: transform var(--dur-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .part__meta a:hover { transform: translateX(3px); } } /* ============================================================ DETAIL C — experience timeline ============================================================ */ .timeline { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--ink); } .entry { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 22px 0; border-bottom: var(--rule-thin) solid var(--ink-faint); } .entry:last-child { border-bottom: var(--rule) solid var(--ink); } .entry__when { display: flex; align-items: baseline; gap: 6px; font-size: 12px; letter-spacing: 0.1em; font-weight: 500; color: var(--ink-soft); padding-top: 4px; } .entry__dash { color: var(--ink-faint); } .entry__what { min-width: 0; } .entry__what h3 { font-size: 18px; letter-spacing: 0.03em; margin: 0 0 6px; text-transform: uppercase; overflow-wrap: break-word; } .entry__what p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 64ch; } /* ============================================================ DETAIL D — contact ============================================================ */ .contact { margin: 0; padding: 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); } .contact__row { display: grid; grid-template-columns: 120px 1fr; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: var(--rule-thin) solid var(--ink-faint); } .contact__row:last-child { border-bottom: 0; } .contact dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-soft); } .contact dd { margin: 0; font-size: 14px; min-width: 0; overflow-wrap: break-word; } .contact__note { margin: 18px 0 0; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-soft); } .note-tag { font-weight: 700; color: var(--ink); margin-right: 8px; } /* ============================================================ REVISION BLOCK — sits above the title block ============================================================ */ .rev-block { width: 100%; max-width: 520px; margin: 64px 0 0 auto; border-collapse: collapse; font-size: 11px; letter-spacing: 0.08em; border: var(--rule) solid var(--ink); } .rev-block th, .rev-block td { border: var(--rule-thin) solid var(--ink); padding: 6px 10px; text-align: left; font-weight: 500; vertical-align: middle; } .rev-block thead th { background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: 0.14em; } .rev-block__rev { width: 50px; text-align: center; } .rev-block__date { width: 110px; } .rev-block__by { width: 60px; text-align: center; } /* ============================================================ TITLE BLOCK — bottom-right, ANSI/ISO style Grid of cells with a fat outer border. ============================================================ */ .title-block { width: 100%; max-width: 520px; margin: -1px 0 0 auto; /* butts against rev block */ display: grid; grid-template-columns: 80px repeat(4, 1fr); grid-template-rows: 56px 56px 56px; border: var(--rule) solid var(--ink); background: var(--paper); margin-bottom: 24px; } @keyframes stampIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .tb { position: relative; border-right: var(--rule-thin) solid var(--ink); border-bottom: var(--rule-thin) solid var(--ink); padding: 8px 10px 6px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .tb__label { font-size: 9px; letter-spacing: 0.14em; font-weight: 500; color: var(--ink-soft); position: absolute; top: 6px; left: 10px; } .tb__value { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; } .tb__value--big { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; } /* layout the cells */ .tb--logo { grid-row: 1 / span 3; grid-column: 1; align-items: center; justify-content: center; padding: 0; border-right: var(--rule) solid var(--ink); } .tb__monogram { font-size: 28px; font-weight: 700; letter-spacing: 0.04em; border: var(--rule) solid var(--ink); padding: 6px 10px; } .tb--name { grid-row: 1; grid-column: 2 / span 2; } .tb--date { grid-row: 1; grid-column: 4; } .tb--size { grid-row: 1; grid-column: 5; } .tb--title { grid-row: 2; grid-column: 2 / span 4; } .tb--scale { grid-row: 3; grid-column: 2; } .tb--units { grid-row: 3; grid-column: 3; } .tb--dwg { grid-row: 3; grid-column: 4; } .tb--rev { grid-row: 3; grid-column: 5; } .tb--sheet { grid-row: 3; grid-column: 5; display: none; } /* if needed */ /* clean up trailing borders */ .tb--date, .tb--size, .tb--rev { border-right: 0; } .tb--title, .tb--scale, .tb--units, .tb--dwg, .tb--rev { border-bottom: 0; } /* ============================================================ RESPONSIVE On narrow screens, stack the parts and let the dimension lines shrink. The drawing intentionally stays landscape-ish. ============================================================ */ @media (max-width: 720px) { .sheet { padding: 18px; } .zone-row { left: 18px; right: 18px; } .zone-col { top: 18px; bottom: 18px; } .zone-row--top { top: 3px; } .zone-row--bottom { bottom: 3px; } .zone-col--left { left: 3px; } .zone-col--right { right: 3px; } .zone-row, .zone-col { font-size: 9px; } .frame { padding: 48px 16px 0; } /* nav condenses to lettered bubbles — labels are redundant */ .callout-nav { gap: 12px 10px; padding-bottom: 24px; margin-bottom: 24px; } .callout { gap: 0; } .callout::before { width: 10px; } .callout__label { display: none; } .callout__bubble { width: 36px; height: 36px; font-size: 13px; } .finish-note { margin-left: 0; width: 100%; justify-content: flex-start; } .view { margin-bottom: 48px; } .view__header { flex-wrap: wrap; row-gap: 6px; } .view--front .nameplate { margin: 28px 0 52px; padding: 28px 20px; } .nameplate__name { font-size: clamp(28px, 11vw, 52px); } .view__lede { margin: 0; } .dim--width { bottom: -28px; } .dim--height { display: none; } .view--section .section-cut { grid-template-columns: 24px 1fr; margin: 0; } .section-cut__body { padding: 22px 16px; } .section-cut__marker { width: 24px; height: 24px; font-size: 11px; } .section-cut__marker--left { left: -12px; } .section-cut__marker--right { right: -12px; } .part { grid-template-columns: 48px 1fr; gap: 10px; } .part__num { font-size: 10px; } .part__name { font-size: 17px; } .entry { grid-template-columns: 1fr; gap: 6px; } .contact__row { grid-template-columns: 92px 1fr; gap: 10px; } .rev-block, .title-block { max-width: 100%; } .rev-block { margin-top: 40px; } .rev-block th, .rev-block td { padding: 5px 6px; font-size: 10px; } .rev-block__date { width: 84px; } .title-block { grid-template-columns: 52px repeat(4, 1fr); grid-template-rows: repeat(3, minmax(48px, auto)); } .tb { padding: 6px 7px 5px; } .tb__label { font-size: 8px; top: 5px; left: 7px; } .tb__value { font-size: 10px; } .tb__value--big { font-size: 12px; } .tb__monogram { font-size: 18px; padding: 4px 7px; } } /* ============================================================ SCROLL DRAFTING — each block drafts itself in as it enters the viewport. IntersectionObserver adds .is-drawn; all hidden initial states are gated behind html.js so the site is fully readable with JavaScript off. ============================================================ */ @keyframes draftIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* headers wipe left→right like a pen stroke */ html.js .view .view__header { clip-path: inset(0 100% 0 0); } html.js .view.is-drawn .view__header { animation: wipeIn 460ms var(--ease-out) forwards; } /* nameplate text plots itself */ html.js .nameplate__name, html.js .nameplate__role { clip-path: inset(0 100% 0 0); } html.js .view.is-drawn .nameplate__name { animation: wipeIn 560ms var(--ease-out) 120ms forwards; } html.js .view.is-drawn .nameplate__role { animation: wipeIn 420ms var(--ease-out) 340ms forwards; } /* list staggers */ html.js .part, html.js .entry, html.js .contact__row, html.js .specs__row, html.js .view__lede { opacity: 0; } html.js .view.is-drawn :is(.part, .entry, .contact__row, .specs__row) { animation: draftIn 360ms var(--ease-out) 290ms forwards; } html.js .view.is-drawn :is(.part, .entry, .contact__row, .specs__row):nth-child(1) { animation-delay: 40ms; } html.js .view.is-drawn :is(.part, .entry, .contact__row, .specs__row):nth-child(2) { animation-delay: 90ms; } html.js .view.is-drawn :is(.part, .entry, .contact__row, .specs__row):nth-child(3) { animation-delay: 140ms; } html.js .view.is-drawn :is(.part, .entry, .contact__row, .specs__row):nth-child(4) { animation-delay: 190ms; } html.js .view.is-drawn :is(.part, .entry, .contact__row, .specs__row):nth-child(5) { animation-delay: 240ms; } html.js .view.is-drawn .view__lede { animation: draftIn 360ms var(--ease-out) 280ms forwards; } /* hatch fills when its section is drawn */ html.js .section-cut__hatch { clip-path: inset(0 0 100% 0); } html.js .view.is-drawn .section-cut__hatch { animation: hatchFill 600ms var(--ease-out) 200ms forwards; } /* dimensions draft in: extension ticks, line, then the value */ html.js .dim--width::before, html.js .dim--width::after { transform: scaleY(0); } html.js .dim--width .dim__line { transform: scaleX(0); } html.js .dim--height::before, html.js .dim--height::after { transform: scaleX(0); } html.js .dim--height .dim__line { transform: scaleY(0); } html.js .dim__value { opacity: 0; } html.js .view.is-drawn .dim--width::before, html.js .view.is-drawn .dim--width::after { animation: dimExtY 220ms var(--ease-out) 100ms forwards; } html.js .view.is-drawn .dim--width .dim__line { animation: dimLineX 380ms var(--ease-out) 220ms forwards; } html.js .view.is-drawn .dim--height::before, html.js .view.is-drawn .dim--height::after { animation: dimExtX 220ms var(--ease-out) 100ms forwards; } html.js .view.is-drawn .dim--height .dim__line { animation: dimLineY 380ms var(--ease-out) 220ms forwards; } html.js .view.is-drawn .dim__value { animation: dimValueIn 240ms var(--ease-out) 540ms forwards; } /* revision table draws left→right; title block settles after */ html.js .rev-block { clip-path: inset(0 100% 0 0); } html.js .rev-block.is-drawn { animation: wipeIn 480ms var(--ease-out) forwards; } html.js .title-block { opacity: 0; } html.js .title-block.is-drawn { animation: stampIn 360ms var(--ease-out) 80ms forwards; } /* ============================================================ CAD CROSSHAIR + READOUT — fine pointers only (script.js). Hairlines track the cursor; the chip reads out X/Y in mm and the active sheet zone, like a CMM head. ============================================================ */ .xhair { position: fixed; z-index: 40; background: var(--ink); opacity: 0; transition: opacity 240ms var(--ease-out); pointer-events: none; will-change: transform; } .xhair--v { top: 0; bottom: 0; left: 0; width: 1px; } .xhair--h { left: 0; right: 0; top: 0; height: 1px; } body.has-xhair .xhair { opacity: 0.16; } .readout { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: flex; gap: 16px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; color: var(--ink); background: var(--paper); border: var(--rule-thin) solid var(--ink); padding: 7px 12px; opacity: 0; transform: translateY(4px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background-color var(--dur-palette) var(--ease-out), color var(--dur-palette) var(--ease-out); pointer-events: none; } .readout b { font-weight: 700; font-variant-numeric: tabular-nums; } body.has-xhair .readout { opacity: 1; transform: translateY(0); } /* zone markers light up under the crosshair */ .zone-row span, .zone-col span { transition: color 200ms var(--ease-out); } .zone-row span.zone-active, .zone-col span.zone-active { color: var(--ink); font-weight: 700; } /* ============================================================ HERO FIGURE — rocket orthographic that drafts itself in proper order: construction, outline, dimensions. Sheet 1 only, wide viewports only. ============================================================ */ .fig { position: absolute; top: 50%; right: 52px; transform: translateY(-50%); height: min(calc(100% - 24px), 330px); width: auto; display: none; pointer-events: none; } .fig * { fill: none; stroke-linecap: round; stroke-linejoin: round; } .fig .f-c { stroke: var(--ink-faint); stroke-width: 1; } /* construction */ .fig .f-o { stroke: var(--ink); stroke-width: 1.5; } /* part outline */ .fig .f-d { stroke: var(--ink-soft); stroke-width: 1; } /* dimensions */ .fig text { fill: var(--ink-soft); stroke: none; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; } @media (min-width: 1200px) { .fig { display: block; } .view--front .nameplate { padding-right: 320px; } } html.js .fig .f-c, html.js .fig .f-o, html.js .fig .f-d { stroke-dasharray: 1; stroke-dashoffset: 1; } html.js .fig text { opacity: 0; } html.js .view.is-drawn .fig .f-c { animation: figDraw 700ms var(--ease-out) 200ms forwards; } html.js .view.is-drawn .fig .f-o { animation: figDraw 900ms var(--ease-out) 480ms forwards; } html.js .view.is-drawn .fig .f-d { animation: figDraw 600ms var(--ease-out) 1150ms forwards; } html.js .view.is-drawn .fig text { animation: dimValueIn 300ms var(--ease-out) 1500ms forwards; } @keyframes figDraw { to { stroke-dashoffset: 0; } } /* ============================================================ REDUCED MOTION — everything completes instantly; the crosshair layer is removed outright. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } .xhair, .readout { display: none; } } /* ============================================================ PRINT — make it actually print like a drawing ============================================================ */ @media print { body::before { display: none; } .sheet { padding: 12mm; } .frame { padding: 18mm 14mm 0; } a { border-bottom: 0; } .finish-note, .xhair, .readout { display: none; } /* restore anything the scroll-drafting layer left hidden */ * { animation: none !important; } html.js .view__header, html.js .nameplate__name, html.js .nameplate__role, html.js .section-cut__hatch, html.js .rev-block { clip-path: none !important; } html.js .part, html.js .entry, html.js .contact__row, html.js .specs__row, html.js .view__lede, html.js .title-block, html.js .dim__value, html.js .fig text { opacity: 1 !important; } html.js .dim--width::before, html.js .dim--width::after, html.js .dim--height .dim__line { transform: scaleY(1) !important; } html.js .dim--height::before, html.js .dim--height::after, html.js .dim--width .dim__line { transform: scaleX(1) !important; } html.js .fig .f-c, html.js .fig .f-o, html.js .fig .f-d { stroke-dashoffset: 0 !important; } }