/* Layout-guide designs, switchable from /content.json. * * The "guides" are the hairline rules the pages are built on -- the two margin * rails that run the full height of the homepage at * left/right: max(64px, (100vw - 1600px) / 2), and the horizontal rules that * close every section boundary. They are not decoration: they are the drawing * that shows how wide the measure is and where one block of content stops and * the next begins, which is why they sit behind everything * (pointer-events-none, aria-hidden) and why they are worth designing rather * than defaulting. * * theme.guides in the JSON picks one of five: * * "dash" the design the site ships in and the one styles.css paints on * its own -- a 6-on / 8-off technical dash in slate. Nothing in * this file applies; no attribute is set. * "rule" Engraved Rule -- continuous, and cut into the page rather than * drawn on it. A slate hairline with a paper-white companion line * a pixel below (or a pixel to the right, on a rail), which is the * two-line trick engravers and letterpress rules use to make a * single line read as an incision. Quietest of the four at a * glance, most present up close. * "measure" Measure -- the drafting-table reading of the same idea. A very * faint continuous ground carries the line all the way through, * and graduations sit on top of it: a minor mark every 16px and a * major one every 96px, so the rule states the module the layout * is set on instead of merely bounding it. * "fade" Vanishing Rule -- continuous and full strength across its * length, then dissolved into the paper over the last ~96px at * each end, so the frame never closes into a box. Section seams * breathe; the long rails still read as one unbroken edge. * "none" Unruled -- the guides drawn and then taken away. Every rule is * made invisible while keeping its box, so the page holds exactly * the measure the frame set and shows none of it. * * /theme.js reads the value in and puts it on as data-guides * before the first paint, so switching is a one-word edit to content.json and * a reload -- and, on localhost, ?guides=rule / ?guides=measure / ?guides=fade * / ?guides=none on the URL, so they can be put side by side in tabs while * choosing. The query string does nothing in production, for the same reason * ?buttons= does nothing there. * * ---- how these hook onto the markup -------------------------------------- * There is no .guide class on this site: every rule is a bare
sized by * Tailwind to one pixel on one axis and filled with the boundary grey -- * `h-px bg-[#e1e1e1]` across, `w-px bg-[#e1e1e1]` down, and `bg-[#585858]` * for the same rules where they cross a dark band. 91 of them on the homepage * alone match that pair of utilities, and the incidental hairlines drawn * inside cards and product screenshots (bg-[#e5e5e5], bg-white/15, the brand * tints) do not -- so that pair is the whole hook, and the selectors below are * the ones styles.css already uses, qualified by the attribute. * * Rules here must carry !important. Unlayered declarations already outrank * Tailwind's layered utilities, but the default dash in styles.css is itself * !important, and important beats specificity -- so matching it is what lets * a variant take over. * * ---- colours ------------------------------------------------------------- * One slate, 66 86 99, at four alphas: the colour the dash was already drawn * in. It is deliberately not a rung of the brand ladder -- the guides describe * the page's construction, not the brand, and an orange grid would read as * ornament. Over a dark band the same drawing is inverted to white; that * inversion is the last block under each variant. */ /* ===================================================== rule -- Engraved -- */ html[data-guides="rule"] :is([class~="h-px"], [class~="h-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { --guide-line-color: rgba(66, 86, 99, .26); --guide-line-companion: rgba(255, 255, 255, .9); background-color: var(--guide-line-color) !important; background-image: none !important; box-shadow: 0 1px 0 var(--guide-line-companion); } html[data-guides="rule"] :is([class~="w-px"], [class~="w-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { --guide-line-color: rgba(66, 86, 99, .26); --guide-line-companion: rgba(255, 255, 255, .9); background-color: var(--guide-line-color) !important; background-image: none !important; box-shadow: 1px 0 0 var(--guide-line-companion); } /* Same drawing on a dark band: the incision reads the other way up, so the companion goes to shadow rather than to paper. */ html[data-guides="rule"] [class~="bg-[#585858]"]:is([class~="h-px"], [class~="h-[1px]"], [class~="w-px"], [class~="w-[1px]"]) { --guide-line-color: rgba(255, 255, 255, .22); --guide-line-companion: rgba(0, 0, 0, .3); } /* ====================================================== measure -- Measure -- */ html[data-guides="measure"] :is([class~="h-px"], [class~="h-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { --guide-line-ground: rgba(66, 86, 99, .13); --guide-line-minor: rgba(66, 86, 99, .24); --guide-line-major: rgba(66, 86, 99, .46); background-color: transparent !important; background-image: repeating-linear-gradient(90deg, var(--guide-line-major) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, var(--guide-line-minor) 0 1px, transparent 1px 16px), linear-gradient(var(--guide-line-ground), var(--guide-line-ground)) !important; } html[data-guides="measure"] :is([class~="w-px"], [class~="w-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { --guide-line-ground: rgba(66, 86, 99, .13); --guide-line-minor: rgba(66, 86, 99, .24); --guide-line-major: rgba(66, 86, 99, .46); background-color: transparent !important; background-image: repeating-linear-gradient(180deg, var(--guide-line-major) 0 1px, transparent 1px 96px), repeating-linear-gradient(180deg, var(--guide-line-minor) 0 1px, transparent 1px 16px), linear-gradient(var(--guide-line-ground), var(--guide-line-ground)) !important; } html[data-guides="measure"] [class~="bg-[#585858]"]:is([class~="h-px"], [class~="h-[1px]"], [class~="w-px"], [class~="w-[1px]"]) { --guide-line-ground: rgba(255, 255, 255, .1); --guide-line-minor: rgba(255, 255, 255, .18); --guide-line-major: rgba(255, 255, 255, .34); } /* ====================================================== fade -- Vanishing -- */ /* The fade is a fixed 96px at each end, not a percentage: several of the rails are deliberately over-long (top:-100vh, bottom:-100vh) so that they carry through the section above or below, and a percentage fade would put their strong middle off-screen and leave only the tail in view. min() keeps the short in-line dividers -- the ~60px rules either side of a label -- from fading out entirely. */ html[data-guides="fade"] :is([class~="h-px"], [class~="h-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { --guide-line-color: rgba(66, 86, 99, .32); --guide-line-fade: min(96px, 30%); background-color: transparent !important; background-image: linear-gradient( 90deg, transparent 0, var(--guide-line-color) var(--guide-line-fade), var(--guide-line-color) calc(100% - var(--guide-line-fade)), transparent 100% ) !important; } html[data-guides="fade"] :is([class~="w-px"], [class~="w-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { --guide-line-color: rgba(66, 86, 99, .32); --guide-line-fade: min(96px, 30%); background-color: transparent !important; background-image: linear-gradient( 180deg, transparent 0, var(--guide-line-color) var(--guide-line-fade), var(--guide-line-color) calc(100% - var(--guide-line-fade)), transparent 100% ) !important; } html[data-guides="fade"] [class~="bg-[#585858]"]:is([class~="h-px"], [class~="h-[1px]"], [class~="w-px"], [class~="w-[1px]"]) { --guide-line-color: rgba(255, 255, 255, .26); } /* ========================================================== none -- Unruled -- */ /* The guides drawn and then taken away: the page keeps the measure they set, and shows nothing of it. Worth having as a real option rather than a straw man -- the homepage has enough structure in its own blocks that the frame is arguably doing work the layout already does. The rules are made invisible, not removed. Several of them are not absolute overlays but `h-px flex-1` spacers earning their width inside a flex row -- the two that flank the ASSETS SECURED label are the clearest case -- so display:none would collapse them and re-centre the label. Zeroing the paint and leaving the box is the only version of "no lines" that changes nothing but the drawing. */ html[data-guides="none"] :is([class~="h-px"], [class~="h-[1px]"], [class~="w-px"], [class~="w-[1px]"]):is([class~="bg-[#e1e1e1]"], [class~="bg-[#585858]"]) { background-color: transparent !important; background-image: none !important; box-shadow: none; }