/* ============================================================ SKETCHPARTS draft layer v2 .. architectural sketch over the 3canvas DS. Additive only: class "sk" on . The language of the drafting table, not the doodle pad: - Straight lines. Corners OVERSHOOT like pen strokes that do not stop at the intersection. Nothing tilts, nothing wobbles. - Hatch fills, allowed to spill slightly past their edge. - Dotted millimetre paper; the grid is 8px, majors every 40px, and components snap to it (all spacing = multiples of 8). - Typography stays pure 3canvas: Poppins Medium, one weight. No handwriting fonts. - The three mark colours remain logo-only, exactly as upstream. ============================================================ */ /* Poppins from the local binary (upstream fonts.css points at the unfetched .otf) */ @font-face{font-family:"Poppins";src:url("../assets/fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap} .sk{ --dr-ink:var(--ink-900); --dr-line:1.5px; --dr-over:8px; /* how far a stroke runs past its corner */ --dr-grid:8px; /* dotted mm paper: minor dot each 8px, major each 40px */ background-image: radial-gradient(circle, var(--ink-050) 1.2px, transparent 1.2px), radial-gradient(circle, var(--ink-025) 1px, transparent 1px); background-size:40px 40px, 8px 8px; background-position:0 0, 0 0; background-color:var(--paper); } /* Drafted box: strokes drawn past the corners. No border on the box itself; two overlays carry the lines so every corner crosses. */ .dr-box{position:relative;background:var(--paper)} .dr-box::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--dr-over));right:calc(-1 * var(--dr-over));border-top:var(--dr-line) solid var(--dr-ink);border-bottom:var(--dr-line) solid var(--dr-ink);pointer-events:none} .dr-box::after{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--dr-over));bottom:calc(-1 * var(--dr-over));border-left:var(--dr-line) solid var(--dr-ink);border-right:var(--dr-line) solid var(--dr-ink);pointer-events:none} /* Hatch fill. Use as a block, or behind an element via .dr-poche. */ .dr-hatch{background-image:repeating-linear-gradient(45deg, var(--ink-050) 0 1px, transparent 1px 6px)} .dr-hatch--ink{background-image:repeating-linear-gradient(45deg, var(--ink-300) 0 1px, transparent 1px 5px)} /* Poché: a hatched mass sitting offset behind the element, spilling out bottom-right, like section fill escaping the outline. */ .dr-poche{position:relative} .dr-poche::before{content:"";position:absolute;inset:6px -8px -8px 6px;background-image:repeating-linear-gradient(45deg, var(--ink-100) 0 1px, transparent 1px 5px);z-index:-1} /* Straight underline that overshoots the word, drawn twice like a pen restrike: full line + a shorter echo 3px below. */ .dr-under{position:relative;white-space:nowrap} .dr-under::before{content:"";position:absolute;left:-6px;right:-12px;bottom:-.08em;height:2px;background:var(--dr-ink)} .dr-under::after{content:"";position:absolute;left:2px;right:-4px;bottom:calc(-.08em - 4px);height:1px;background:var(--dr-ink);opacity:.5} /* Buttons: 3canvas geometry, snapped to the grid, poché shadow. */ .sk .c3-btn{height:48px;border-radius:0} .sk .c3-btn--primary{background:var(--dr-ink)} .sk .c3-btn--primary:hover:not(:disabled){background:var(--ink-700)} /* Inputs: drafted line weight, square, grid-snapped. */ .sk .c3-input,.sk .c3-textarea{border:var(--dr-line) solid var(--dr-ink);border-radius:0;height:48px;background:var(--paper)} .sk .c3-input:focus,.sk .c3-textarea:focus{box-shadow:inset 0 0 0 1px var(--dr-ink)} .sk .c3-check__box{border-width:var(--dr-line)} /* Figure frame: a drafted box with a spec caption. Placeholder body is hatched until a real scan drops in. */ .dr-fig{display:flex;flex-direction:column;gap:8px} .dr-fig__body{position:relative;display:flex;align-items:center;justify-content:center;min-height:160px} .dr-fig__body img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)} .dr-fig__tag{font:var(--type-spec);letter-spacing:var(--tracking-spec);color:var(--text-tertiary);text-transform:uppercase} .dr-fig__cap{font:var(--type-label-s);letter-spacing:var(--tracking-label-s);text-transform:uppercase;color:var(--text-secondary)} /* Dimension annotation: straight arrow with serif ticks, spec text. */ .dr-dim{display:flex;align-items:center;gap:8px;font:var(--type-spec);letter-spacing:var(--tracking-spec);color:var(--text-tertiary)} .dr-dim svg{overflow:visible} .dr-dim line{stroke:var(--dr-ink);stroke-width:1.5} /* Toast stays 3canvas. Only the radius law applies. */ .sk .c3-toast{border-radius:0} @media (prefers-reduced-motion:reduce){.sk *{transition:none!important;animation:none!important}}