/* THE UNIT: the plan on the left, the same plan in three dimensions on the right. The same split the rest of the page speaks in -- a panel of reading beside a picture you can move -- so opening a site reads as going one level further in rather than as arriving somewhere else. It covers the map rather than replacing it: the map is still standing behind this with the pin lit, and Back is one click. The body's state class is `unit`, not `shop`: the section is `.shop`, and one word for both made this rule apply to too. See the note in src/shop.js. Everything in here is drawn from assets/data/shop.json by src/plan2d.js and src/plan3d.js. This stylesheet sets the WEIGHT of the lines, which is the whole of a floor plan's craft: walls heaviest, fixtures lighter, services lighter again and dashed, dimensions lightest. */ .shop{ position:fixed; inset:0; z-index:var(--z-shop); background:var(--paper); display:flex; opacity:0; pointer-events:none; transition:opacity var(--t-mid) ease; } body.unit .shop{ opacity:1; pointer-events:auto; } .shop[aria-hidden="true"]{ visibility:hidden; } body.unit .shop[aria-hidden="false"]{ visibility:visible; } .shop-l{ width:46%; min-width:0; display:flex; flex-direction:column; padding:22px var(--gutter) 18px; background:var(--surface); overflow:auto; } .shop-r{ flex:1 1 auto; min-width:0; position:relative; background:var(--paper); overflow:hidden; } .shop3d{ position:absolute; inset:0; touch-action:none; cursor:grab; } .shop3d:active{ cursor:grabbing; } /* the model keeps rendering under a still rather than being torn down: coming back to it is the same scene at the same angle, not a rebuild */ .shop3d.under{ visibility:hidden; } /* A STILL, and it is given the whole pane. `contain`, because the render is 1560x975 and the pane is whatever the window leaves: cropping a room to fill a box throws away the corner that tells you how big it is. */ .shop .shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; background:var(--paper); } .shop .cap{ position:absolute; left:18px; top:14px; margin:0; z-index:var(--z-outline); font:500 var(--fs-11) var(--font-mono); letter-spacing:var(--ls-tag); text-transform:uppercase; color:var(--text-soft); pointer-events:none; } .shop .cap:empty{ display:none; } /* THE STRIP. The model first, then the four views, because the model is what this is and the views are what it looks like. Small: it is a way back to the picture, not a gallery. */ .strip{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 12px; overflow-x:auto; overscroll-behavior-x:contain; background:linear-gradient(to top, var(--paper) 62%, transparent); } .strip .sh{ flex:0 0 auto; display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; cursor:pointer; color:var(--text-soft); font:400 var(--fs-10) var(--font-mono); text-align:left; transition:color var(--t-tap) ease; } .strip .sh:hover{ color:var(--ink); } .strip .sh.on{ color:var(--ink); } .strip .sh img{ display:block; width:84px; height:53px; object-fit:cover; background:var(--surface-hover); outline:var(--rule) solid var(--grey-200); outline-offset:-1px; transition:outline-color var(--t-tap) ease; } .strip .sh:hover img, .strip .sh.on img{ outline-color:var(--ink); } /* the model's own button has no thumbnail, so it needs a box the same size to stand in */ .strip .sh:first-child{ justify-content:flex-end; min-width:84px; } .strip .sh:first-child .shn{ padding:4px 0; } .strip .sh:first-child::before{ content:''; display:block; width:84px; height:53px; background:var(--surface-hover); outline:var(--rule) solid var(--grey-200); outline-offset:-1px; } .strip .sh:first-child.on::before, .strip .sh:first-child:hover::before{ outline-color:var(--ink); } /* the rule between the halves, the same one the map split uses */ .shop-r::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--rule); background:var(--ink); z-index:var(--z-outline); } .shop-head{ flex:0 0 auto; margin-bottom:14px; } .shop-head h2{ margin:12px 0 3px; font:var(--w-title) var(--fs-panel)/var(--lh-tight) var(--font-title); letter-spacing:var(--ls-tight); text-transform:uppercase; color:var(--ink); } .shop-head .sub{ margin:0; font:400 var(--fs-12)/var(--lh-copy) var(--font-mono); color:var(--text-soft); } /* a SURFACE (styles/surface.css) */ .shop .back{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 8px; cursor:pointer; font:500 var(--fs-12) var(--font-mono); color:var(--ink); transition:background-color var(--t-tap) ease; } .shop .back:hover{ background-color:var(--surface-hover); } .shop .back svg{ width:15px; height:15px; } /* the drawing takes whatever the head and the key leave it */ .planwrap{ flex:1 1 auto; min-height:0; display:flex; } .planwrap svg.plan{ width:100%; height:100%; display:block; } .shop .std{ flex:0 0 auto; margin:12px 0 0; font:400 var(--fs-11)/var(--lh-copy) var(--font-mono); color:var(--text-muted); } /* ---- the floor plan itself ------------------------------------------------------------- Drawing conventions, not decoration. A wall is POCHE -- filled solid to its real thickness -- because that is how you tell a wall from a line on a plan; a partition is lighter than a shell wall because it is a lighter thing; a door shows the quarter circle it sweeps. */ .plan .wall{ fill:var(--ink); stroke:none; } .plan .wall.part{ fill:var(--shop-part-ink); } .plan .room{ fill:var(--shop-room); stroke:none; transition:fill var(--t-tap) ease; } .plan .room.lit{ fill:var(--shop-room-lit); } /* A ROOM NAME IS A LABEL ON A DRAWING, so it is knocked out of whatever it lands on rather than fighting it: paint-order puts the paper-coloured stroke UNDER the fill, which is how a drawing has masked its annotation since long before there were stylesheets. Without it the duct run reads straight through the middle of the words. */ .plan .rn, .plan .ra{ text-anchor:middle; paint-order:stroke; stroke:var(--paper); stroke-width:9px; stroke-linejoin:round; } .plan .rn{ font:500 42px var(--font-mono); fill:var(--text-soft); } .plan .ra{ font:400 34px var(--font-mono); fill:var(--text-muted); } .plan .dimtx, .plan .fxlab{ paint-order:stroke; stroke:var(--paper); stroke-width:8px; stroke-linejoin:round; } /* glazing: the pane, drawn as the thin thing it is, between two jambs */ .plan .glass{ stroke:var(--ink); stroke-width:7; } .plan .reveal{ stroke:var(--ink); stroke-width:4; } /* the leaf and its arc. The arc is the lightest line on the drawing because it is the only one that is not a thing -- it is where a thing goes. */ .plan .leaf{ stroke:var(--ink); stroke-width:8; } .plan .swing{ fill:none; stroke:var(--text-muted); stroke-width:3; stroke-dasharray:14 10; } .plan .fxs{ fill:var(--shop-fx-fill); stroke:var(--ink); stroke-width:4; } .plan .fx.fit .fxs{ fill:none; stroke:var(--text-soft); stroke-width:3.5; stroke-dasharray:20 9; } .plan .bowl{ fill:none; stroke:var(--ink); stroke-width:3.5; } .plan .fx.fit .bowl{ stroke:var(--text-soft); } /* the clearance the restroom has to hold. A construction line: it is a rule, not a thing. */ .plan .clear{ fill:none; stroke:var(--text-muted); stroke-width:3; stroke-dasharray:9 9; } .plan .run{ fill:none; stroke:var(--ink); stroke-linecap:butt; } .plan .run.under{ stroke:var(--text-soft); } /* below the slab, so drawn back */ .plan .node{ fill:var(--paper); stroke:var(--ink); stroke-width:4; } .plan .dimline, .plan .ext{ stroke:var(--text-muted); stroke-width:2.5; } .plan .tick{ stroke:var(--ink); stroke-width:3.5; } .plan .dimtx{ font:400 33px var(--font-mono); fill:var(--text-soft); text-anchor:middle; } /* THE LAYER SWITCHES DRIVE THE DRAWING AND THE MODEL TOGETHER. Turning the services off takes them out of both at once, which is the argument this whole view is making: there is one plan, and these are two views of it. */ .plan.no-fit .fx.fit{ display:none; } .plan.no-svc .pl-svc{ display:none; } .plan.no-shell .fx.shell, .plan.no-shell .clear{ display:none; } /* ---- the key ---------------------------------------------------------------------------- */ .legend{ flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; } /* a SURFACE */ .legend .lyr{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:8px 11px; cursor:pointer; text-align:left; min-width:0; transition:background-color var(--t-tap) ease; } .legend .lyr:hover{ background-color:var(--surface-hover); } .legend .lyr.on{ background-color:var(--ink); color:var(--on-ink); } .legend .ln{ font:500 var(--fs-12) var(--font-mono); } .legend .lw{ font:400 var(--fs-10)/1.35 var(--font-mono); color:var(--text-muted); } .legend .lyr.on .lw{ color:var(--on-ink-muted); } .legend .runs{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:2px; } .legend .rk{ display:inline-flex; align-items:center; gap:7px; font:400 var(--fs-10) var(--font-mono); color:var(--text-soft); } .legend .rk svg{ width:46px; height:8px; color:var(--ink); } /* too narrow to stand the drawing beside the model: the plan takes the top, the model the bottom, which is the same fold the map split takes at this width */ @media (max-width:860px){ .shop{ flex-direction:column; } .shop-l{ width:auto; height:56%; padding:16px var(--gutter) 12px; } .shop-r{ flex:1 1 auto; } .shop-r::before{ left:0; right:0; top:0; bottom:auto; width:auto; height:var(--rule); } .legend{ grid-template-columns:1fr 1fr; } .legend .lw{ display:none; } /* the switch still says what it is; the why does not fit */ /* THE DRAWING GETS A FLOOR, AND THE PANEL SCROLLS. Everything in this column is flex:0 0 auto except the plan, so on a 780px phone the head, the note and the four switches took 390 of the 437 the column has and left the drawing fifty pixels -- a letterboxed sliver with the whole plan inside it. A minimum big enough to read pushes the note and the key below the fold instead, which is the right thing to lose first. */ .planwrap{ min-height:300px; } .strip{ padding:8px 10px; } .strip .sh img, .strip .sh:first-child::before{ width:64px; height:40px; } .shop .std{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } }