/* * HJS Catchall Tray Designer - storefront styling. * * v0.2.4 - THE DARK WORKSHOP THEME. Up to v0.2.3 this file was deliberately theme-agnostic and * light: white panels, hairline grey borders, and the merchant's own theme showing through. It is * now a self-contained dark theme - near-black panels, warm brown/wood-tone borders and one amber * accent - because the designer is a workbench, not a form, and a tray rendered on a white card * reads as an admin screen rather than a product being made. The palette is the one already in * use on hjsolutions.com's own tray designer, so the two look like the same tool. * * TWO THINGS ABOUT THAT CHANGE, SAID PLAINLY BECAUSE BOTH ARE DELIBERATE: * * 1. Everything is still scoped under .hjs-ctd. Nothing outside the designer's own wrapper is * touched - the page heading, the breadcrumb, the theme's header and footer all stay exactly * as the merchant's theme draws them, so this drops into any theme as a dark panel on that * theme's page rather than fighting it. * 2. It now DOES restyle core Bootstrap classes (.btn, .alert) - but only INSIDE .hjs-ctd. That * is a change of stance from v0.2.3's "nothing here restyles a core element", made on purpose: * a default white Bootstrap button sitting on a near-black panel is the one thing that would * give the theme away as bolted on. A merchant who prefers their own buttons can delete the * "theme's own buttons" block near the bottom of this file and lose nothing else. * * The colours live in the custom properties on .hjs-ctd below. A merchant who wants a different * timber only has to change those - every rule in this file reads them rather than repeating a * hex code, with the single documented exception of the artwork thumbnails (see there). * * The engraving fonts are Google Fonts. A shop that must not make third-party requests can * delete this @import - the three system fonts at the top of the font list still work, and the * rest fall back to the browser's default rather than breaking. */ @import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:wght@500&family=Dancing+Script:wght@500;700&family=Great+Vibes&family=IM+Fell+English+SC&family=Lobster&family=MedievalSharp&family=Pacifico&family=Pirata+One&family=Playfair+Display:wght@600&family=Rye&family=Tangerine:wght@400;700&family=UnifrakturCook:wght@700&family=Yeseva+One&display=swap'); /* -------------------------------------------------------------------------------------------- THE PALETTE. Read from hjsolutions.com's own tray designer so the two are the same tool, not two tools that happen to both be dark. --hjs-ctd-accent the amber. Unchanged from v0.2.3 - it already was the site's amber. --hjs-ctd-bg panel face. The near-black everything sits on. --hjs-ctd-bg-sunk a shade below the panel, for things set INTO it: the canvas, the artwork gallery well, the pocket editor. Depth, not decoration. --hjs-ctd-bg-raised a shade above the panel, for things that sit ON it: layout buttons, shape buttons, fields. What you can press or type in. --hjs-ctd-line the wood tone. Warm brown, and it is the borders alone that make this read as timber - there is no texture image anywhere in this product, and the site's own designer does not use one either. --hjs-ctd-line-soft the same idea, quieter, for internal rules that should not compete. --hjs-ctd-text white. --hjs-ctd-muted, the grey for everything secondary. color-scheme: dark is doing real work, not tidying: it tells the browser to draw the parts of a