/* Styles for the SVG sheet only. This file is also inlined into the PNG export, so it must stand alone — no dependency on variables or fonts declared elsewhere in the page. Note :root resolves to in the page and to in the export; both work, which is why the palette lives here. */ :root { --sheet-tint: #1c2126; /* paper margin, title block and rulers — the app's own sidebar grey */ --sheet: #b7bec3; /* the board itself — a lighter grey, distinct from the margin */ --edge: #242a30; /* highlighted board boundary — a step up from the margin behind it */ --ink: #1b1f23; --ink-soft: #5c646b; --paper-text: #ffffff; /* layout name, title block values, ruler numbers */ --paper-text-dim: rgba(255, 255, 255, 0.55); /* title block captions, frame lines, ticks */ --terrain: #9aa4ab; /* footprint fill — flat grey, the real kit is drawn as art on top */ --terrain-stroke: #49535b; --deploy-a: #e0761b; /* orange */ --deploy-b: #1f5c8b; /* blue */ --amber: #e0761b; --blue: #1f5c8b; /* selection / ghost accent — same hue as deploy-b, kept separate */ --meas: #ffffff; /* general dimensioning overlay */ --meas-strong: #ffffff; /* the heavier callout on a selected piece */ } /* Strokes are given in inches, matching the viewBox units. */ .sheet-paper { fill: var(--sheet-tint); } .sheet-board { fill: var(--sheet); } .grid-minor { stroke: rgba(27, 31, 35, 0.09); stroke-width: 0.02; } .grid-major { stroke: rgba(27, 31, 35, 0.2); stroke-width: 0.035; } .grid-centre { stroke: rgba(27, 31, 35, 0.42); stroke-width: 0.05; stroke-dasharray: 0.42 0.34; } .board-edge { fill: none; stroke: var(--edge); stroke-width: 0.16; } /* Deployment zones — reference overlay, drawn under the terrain. */ .dz { opacity: 0.2; } .dz-a { fill: var(--deploy-a); } .dz-b { fill: var(--deploy-b); } /* Objectives are terrain, so the mark sits on the piece it belongs to. */ .obj-mark { pointer-events: none; } .piece.is-objective .piece-outline { stroke-width: 0.13; } /* ------------------------------------------------------------------ pieces */ /* Flat grey — the real kit is drawn as terrain art on top, not baked into the footprint's own fill. */ .piece-body { fill: var(--terrain); } .piece-outline { fill: none; stroke: var(--terrain-stroke); stroke-width: 0.08; stroke-linejoin: round; } .piece-tick { stroke: rgba(27, 31, 35, 0.34); stroke-width: 0.06; stroke-linecap: round; } .piece { cursor: grab; } .piece:hover .piece-outline { stroke: var(--ink); } .piece.is-selected .piece-body { fill: #c8cfd4; } .piece.is-selected .piece-outline { stroke: var(--blue); stroke-width: 0.14; } .ghost { fill: rgba(31, 92, 139, 0.28); stroke: var(--blue); stroke-width: 0.1; stroke-dasharray: 0.4 0.28; pointer-events: none; } /* ------------------------------------------------------------------ terrain */ /* Real terrain art, sitting on top of the footprints — see js/terrain.js. A soft shadow reads as "standing on" the footprint below it, the way a published layout diagram's kit art sits above its own template. */ .terrain-piece { cursor: grab; } .terrain-art { filter: drop-shadow(0 0.06px 0.1px rgba(0, 0, 0, 0.45)); } .terrain-outline { fill: none; stroke: var(--blue); stroke-width: 0.1; stroke-dasharray: 0.22 0.16; } .ghost-terrain { opacity: 0.55; pointer-events: none; } /* --------------------------------------------------- rulers and dimensions */ .ruler-tick { stroke: var(--paper-text-dim); stroke-width: 0.04; } .ruler-label { fill: var(--paper-text); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 1.05px; font-weight: 600; text-anchor: middle; letter-spacing: 0.02px; } .ruler-label-y { dominant-baseline: middle; } .callout-line { stroke: var(--meas-strong); stroke-width: 0.045; stroke-dasharray: 0.28 0.2; } .callout-cap { stroke: var(--meas-strong); stroke-width: 0.055; } .callout-text { fill: var(--meas-strong); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 1.15px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--ink); stroke-width: 0.2; stroke-linejoin: round; } .callout-text-y { text-anchor: start; dominant-baseline: middle; } /* The point both dimensions are taken from. */ .callout-node { fill: var(--meas-strong); stroke: var(--ink); stroke-width: 0.05; } /* Printed dimensions for every measured piece. Lighter than the selection callout so a selected piece still stands out against a fully dimensioned sheet. */ .measures { pointer-events: none; } .measure-line { stroke: var(--meas); stroke-width: 0.035; stroke-dasharray: 0.26 0.19; } .measure-cap { stroke: var(--meas); stroke-width: 0.045; } .measure-text { fill: var(--meas); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 0.98px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: var(--ink); stroke-width: 0.24; stroke-linejoin: round; } .measure-text-y { text-anchor: start; dominant-baseline: middle; } .measure-node { fill: var(--meas); stroke: var(--ink); stroke-width: 0.045; } /* The second point on a tilted piece — hollow, so it reads as the pair-mate of the solid primary corner rather than a separate piece. */ .measure-node-second { fill: var(--sheet); stroke: var(--meas); stroke-width: 0.08; } .callout-node-second { fill: var(--sheet); stroke: var(--meas-strong); stroke-width: 0.09; } /* -------------------------------------------------------------- title block */ .tb-frame { fill: none; stroke: var(--paper-text-dim); stroke-width: 0.07; } .tb-rule { stroke: var(--paper-text-dim); stroke-width: 0.045; } .tb-label { fill: var(--paper-text-dim); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 0.72px; font-weight: 600; letter-spacing: 0.11px; } .tb-value { fill: var(--paper-text); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 1.25px; font-weight: 700; } /* "FORMA" set light against the bold "TERRA" — same two-weight treatment as the masthead wordmark's .wordmark b / .wordmark b i (css/app.css). */ .tb-logo { fill: var(--paper-text); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 1.15px; font-weight: 700; letter-spacing: 0.15px; } .tb-logo-light { font-weight: 300; fill: var(--paper-text-dim); } .tb-url { fill: var(--paper-text-dim); font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-size: 0.58px; font-weight: 600; letter-spacing: 0.05px; }