/* ========================================================================== The brief sketch, dressed in the Professional theme ========================================================================== Overrides the wireframe's greys so the customer sees the theme the site would actually be built in rather than a generic layout diagram. WHY THIS MIGHT BE WORTH DOING. A grey wireframe answers "what shape is the page". It cannot answer "will I like it", which is the question a customer is actually asking, and the one that costs a round trip when the answer turns out to be no. THE OBJECTION, AND DOUGLAS'S ANSWER TO IT. A drawing that looks designed can be read as THE design, and the charter's brief-rail note says the sketch must not look like a finished page. His call, 2026-08-17: the sketch gives a feel for what it could structurally look like, and it changes dramatically once the real build starts — so the risk is smaller than the round trip that a grey diagram costs when the customer cannot tell whether they will like it. THE GREYS WERE NOT A ONE-FOR-ONE MAP. Half of them sat on pale bands and now sit on navy, and three rendered exactly wrong on the dark ground: the hero bars, the "faint" hatch, and the raised panel's text. Each is fixed and commented where it sits. ========================================================================== */ :root { /* Straight from WebSandpit/Themes/professional/tokens.css. Copied rather than imported because the two are separate products with separate lifecycles — if the theme's navy changes, this is a deliberate edit, not a silent one. */ --tp-primary: #0B2545; --tp-accent: #C9A227; --tp-ink: #1C2B3A; --tp-ink-soft: #5B6675; --tp-paper: #FFFFFF; --tp-paper-alt: #F6F7F9; --tp-line: #DDE1E8; } /* --- the page grounds --------------------------------------------------- */ .wf-page { fill: var(--tp-paper); } .wf-edge { stroke: var(--tp-line); } .wf-band { fill: var(--tp-primary); } /* the hero is a navy slab */ .wf-band-alt { fill: var(--tp-paper-alt); } .wf-band-none { fill: var(--tp-paper-alt); } /* --- text --------------------------------------------------------------- A bar on the navy hero has to be light or it disappears; a bar on paper has to be dark. The sketch has one class for both, so the hero's bars are given their own rule rather than the shared one being fudged to a mid grey that works nowhere. */ .wf-bar { fill: var(--tp-ink); } .wf-bar-soft { fill: var(--tp-ink-soft); } .wf-bar-light { fill: #FFFFFF; } /* SAID IN THE MARKUP, NOT BY ANCESTRY. The first attempt at this was `#wf-treat .wf-bar`, which is inert: a descendant selector cannot cross the shadow boundary a creates, so the rule matched nothing while looking entirely reasonable. The treatment symbols now carry these classes directly. */ .wf-bar-softlight { fill: rgb(255 255 255 / 72%); } /* --- blocks, cards and rules ------------------------------------------- */ .wf-block { fill: #C8D0DA; } .wf-block-a { fill: var(--tp-primary); } .wf-block-b { fill: #7C8CA0; } .wf-block-c { fill: #B6C0CD; } .wf-tile { fill: var(--tp-paper-alt); } .wf-card { fill: var(--tp-paper); stroke: var(--tp-line); } .wf-field { fill: var(--tp-paper); stroke: var(--tp-line); } .wf-rule { stroke: var(--tp-line); } /* FAINT MEANS FAINT. The treatment is called "faint pattern behind" and this was drawing bold white diagonals across the navy — because the hatch was re-pointed at the line colour, which is near-white and therefore nearly maximum contrast on a dark ground. It described the opposite of its own name. The class is used by exactly one treatment and that treatment always paints the navy hero, so it can be tuned for that ground specifically: white at 9%, and a 1-unit stroke instead of 2. Just enough to see a texture is there, which is the whole claim being made. */ .wf-hatch { stroke: rgb(255 255 255 / 9%); stroke-width: 1; } .wf-dash { stroke: var(--tp-line); } /* THE ACCENT IS THE ONE THING THAT SHOULD NOT SPREAD. The Professional theme's own note about this colour is that it appears rarely enough to still mean "this is the action" — so it stays exactly where the sketch already put it. */ .wf-accent { fill: var(--tp-accent); } /* --- the photograph ----------------------------------------------------- THE HERO'S PICTURE IS THE THEME'S OWN, and the gallery's frames stay empty. That is the honest line: the concrete is an asset the Professional theme ships, so showing it is showing what they are buying. A photograph in a GALLERY frame would be standing in for the customer's own work, which we do not have — and the rail already tells them so in words. Filling those would make the picture contradict the caption. */ .wf-frame-hero { fill: url(#tp-photo); } /* THE DASHES MEANT "EMPTY" AND THE FRAMES ARE NOT EMPTY ANY MORE. A dashed outline round a photograph reads as a fault rather than as a placeholder, so the border goes solid now that there is something in it. */ .wf-frame, .wf-frame-sm { stroke: var(--tp-line); stroke-dasharray: none; } .wf-frame-x { stroke: #C3CCD6; } /* --- the logo sketch ---------------------------------------------------- THE ESTATE'S WORDMARK IS TWO-TONE — the first half in the primary, the second in the gold, never flat. The sketch already draws the name as two bars, so it can show exactly that. These are styled by their OWN classes, not by ancestry. The first attempt wrote `.wf-logo .wf-name`, which matched nothing: a descendant selector cannot cross the shadow boundary a creates, so the rule looked correct and the logo stayed grey. */ /* TWO-TONE, AS TEXT. The estate's rule is that the wordmark is never flat: first half in the primary, second in the gold. Drawing it as text rather than two bars means the customer reads their own name in the sketch, and the rule is demonstrated rather than described. `dominant-baseline` is not used — support for it in SVG text is uneven, and a fixed `y` on a 48-unit canvas is predictable everywhere. */ .wf-name-a, .wf-name-b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; } .wf-name-a { fill: var(--tp-primary); } .wf-name-b { fill: var(--tp-accent); } /* The icon takes the same pair — mark in the primary, the cut-out and the secondary shape in gold, so a symbol lockup reads as one family with the wordmark rather than as a grey box beside a coloured word. */ .wf-logo-mark { fill: var(--tp-primary); } .wf-logo-cut { fill: var(--tp-accent); } .wf-logo-mark-s { fill: var(--tp-primary); } .wf-logo-mark-o { fill: var(--tp-accent); } .wf-logo-rib { stroke: var(--tp-accent); } .wf-logo-dash { stroke: var(--tp-line); } /* --- the gallery photographs ------------------------------------------- */ .tp-b { fill: url(#tp-photo-b); } .tp-c { fill: url(#tp-photo-c); } .tp-d { fill: url(#tp-photo-d); }