/* ========================================================================== DIGITAL MARKETING DOCTOR — SHELF SYSTEM The site's background architecture. Applied site-wide 2026-09-08 ========================================================================== Picked from ten whole-page background systems at /doctor/background-master (this one was V06, "Large E-Commerce Platform"). The other nine are kept there as the record of what was considered and rejected. --------------------------------------------------------------------------- THE IDEA A visitor travels a very long way down these pages, quickly, and has to be able to tell — at speed, peripherally, without reading — where one part stops and the next begins. Lines do not do that job: a line has no thickness, so you have to already be looking at it. A SHELF EDGE you catch out of the corner of your eye while you are still moving. So every section is a physical block. Blocks have ends. The thin gap of white between two blocks is what tells you a new one started. --------------------------------------------------------------------------- THE FOUR SURFACES — all four already existed in site/ds.css. Nothing new entered the brand when this was applied. the aisle floor #FFFFFF --paper the gap between shelves, and every card, panel and record a shelf #F4F7FC --ground a section holding a set of things to choose between an editorial #FFFFFF --paper a section that is one argument rather than merchandise. It keeps the floor's white and is marked only by its two edges. the close #EEF4FE --ds-tint the one action block a page may end on, with --ds-edge #CFE0FD every block edge #E3E6EB --line --------------------------------------------------------------------------- THE RULE — how a section gets its surface A SHELF holds a set of comparable things the business is offering or showing: services, plans, industries, stories, proof, standards, offices, teams, markets, people, documents, questions. An EDITORIAL is the panel that is not merchandise: the hero, who we are, how we work, the story, the enquiry form. That is the whole decision. Nothing alternates, so nothing reads as a stripe: whether a section is a shelf depends only on what is in it, and on these six pages the answer happens to be "no" in eight places that are not evenly spaced. The irregularity belongs to the content, which is the only kind a reader takes as natural. --------------------------------------------------------------------------- THE THREE MOVES 1 THE BLOCK. Every section takes a 1px edge top and bottom and an aisle of white — 18px on a desktop, 14px on a phone. The aisle gets proportionally WIDER on a phone, not narrower: it is the one thing that says "that shelf ended" before a word of the next one has been read, and below about 12px it stops being catchable. 2 THE HEADING GOES INSIDE ITS SHELF. A heading used to sit in 78px of white above its section and 78px of white below the last one — the same gap on both sides, so the question "does this heading belong to what is above it or below it?" was a real one. Inside a block with an edge just above it, that question cannot be asked. 3 THE BREATH COMES DOWN. Section padding drops from 78/78 to 42/46, because a shelf edge does in one pixel what 78px of air was doing badly. The aisles give some of it back on purpose — a gap you cannot see is not a gap. Length is not the point; RHYTHM is: block, gap, block, gap, which is the fastest scanning pattern there is and the one every high-traffic store on earth arrived at independently. --------------------------------------------------------------------------- WHAT IS NEVER TOUCHED · The hero on every page. No shelf, no edge, no aisle above it, pure white. On the homepage its height is tuned against the work band directly under it, so that band keeps its exact geometry too and the aisle beneath it is given by the next block's own top margin. · Every word, card, image, tab, accordion, rail, link and behaviour. This file changes surfaces, boundaries and vertical breath. Nothing else. Proved by background-master/_integrity.py, which compares the rendered element signature, every word, every href and every aria state against the page before the change. --------------------------------------------------------------------------- ADDING A NEW PAGE, OR A NEW SECTION ← read this before building one 1 Link this file LAST in , after site/uifinish.css: (uifinish.css is last among the COMPONENT layers — it carries only the scrollbar system and touches no section background, so the two do not compete. This file is last among the SURFACE layers.) 2 Give each new section one class and nothing else:
a set of things to choose between
one argument, not merchandise
the page's one action block Those three classes are defined in part 2 below and need no further CSS. A hero gets none of them. 3 If the section is part of an existing page whose markup you cannot add a class to, add its selector to that page's list in part 3 instead, and write one line saying which of the two it is and why. 4 Then check it: python3 background-master/_qa.py 1440 390 ========================================================================== */ /* ========================================================================== 1 · THE TOKENS ========================================================================== */ :root{ --sh-floor: #FFFFFF; /* --paper */ --sh-shelf: #F4F7FC; /* --ground */ --sh-close: #EEF4FE; /* --ds-tint */ --sh-edge: #E3E6EB; /* --line */ --sh-edge-c: #CFE0FD; /* --ds-edge, the close block's own */ --sh-aisle: clamp(12px, 1.2vw, 18px); --sh-pt: clamp(30px, 3vw, 42px); --sh-pb: clamp(34px, 3.4vw, 46px); /* the distance from a heading to the goods under it, inside one block */ --sh-lede: clamp(24px, 2.6vw, 36px); } body{ background: var(--sh-floor); } /* ========================================================================== 2 · THE BLOCK — the shape every section takes, and the three classes a NEW section can opt into without any further CSS being written. ========================================================================== */ .sh-shelf, .sh-editorial, .sh-close{ border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } .sh-shelf { background: var(--sh-shelf); } .sh-editorial{ background: var(--sh-floor); } .sh-close { background: var(--sh-close); border-top-color: var(--sh-edge-c); border-bottom-color: var(--sh-edge-c); } /* ========================================================================== 3 · THE SIX PAGES AS THEY STAND TODAY Each section is listed once, with the reason it is a shelf or is not. ========================================================================== */ /* ── the hero, every page ──────────────────────────────────────────────── Named explicitly so no future edit can give one an edge by accident. */ .screen, .hero, #hx.h3, /* Google Ads */ .h8-hero, /* About Us */ .px-hero, /* Contact Us */ #top.hero{ /* Management Team */ background: var(--sh-floor); border-top: 0; margin-top: 0; } /* ── HOME index.html ───────────────────────────────────────────────────── */ .tail.show .stage, /* Our Work — pick a kind of work SHELF */ #svc3 .s3-svc, /* Our Services — five services SHELF */ #indwork, /* Industries — 22 industries, 130 types SHELF */ #ss1, /* Success Stories — ten stories SHELF */ #hp1, /* Client Proof — seven kinds of evidence SHELF */ #wcu8, /* Why Choose Us — eleven standards SHELF */ #about5, /* About Us — who we are EDITORIAL */ #faq10{ /* FAQ — a call, with questions beside it EDITORIAL: the block is dominated by the call, not by the questions. A page whose FAQ is only questions gets a shelf — see #gfaq, #answers. */ border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } .tail.show .stage, #svc3 .s3-svc, #indwork, #ss1, #hp1, #wcu8{ background: var(--sh-shelf); } #about5, #faq10{ background: var(--sh-floor); } /* the Google Ads tab panel holds a second copy of the client rail — same id, same classes as the section on the Google Ads page. It is content inside the Our Work shelf, not a shelf of its own, and is held flat here so that neither this file nor a later edit can give it a block of its own. */ .gah #q7.q7{ background: transparent; border-top: 0; border-bottom: 0; margin-block: 0; padding-block: 0; } /* the hero's height is tuned against the height of the work band directly under it, so a margin added to that band comes straight out of the headline. The band keeps its exact live geometry; the aisle below it is given by the next block's own top margin instead. */ .tail.show{ --wk-strip: var(--sh-shelf); --wk-strip-edge: var(--sh-edge); } .tail.show .stage{ margin-block: 0; padding-block: 0; border-top: 0; } #svc3 .s3-svc{ margin-top: var(--sh-aisle); } /* move 2 · the heading into its shelf */ #svc3 .s3-rows { margin-top: clamp(26px,2.8vw,38px); } #indwork .v03-card{ margin-top: clamp(24px,2.6vw,36px); } #ss1 .ss-deck { margin-top: clamp(26px,2.8vw,38px); } #hp1 .hp-tabs { margin-top: clamp(22px,2.4vw,32px); } #wcu8 .wc-reg { margin-top: clamp(26px,2.8vw,40px); } #about5 .ab-head { margin-bottom: clamp(20px,2.2vw,30px); } /* #mact is injected by script, on phones only, after Why Choose Us: the page's one full-width call before the company section. It is an action block, so it takes the close surface — the only place the brand tint appears full width on the phone homepage. It carried #F4F7FB, which was one unit off the ladder's --ground and belonged to nothing. */ #mact{ background: var(--sh-close); border-top: 1px solid var(--sh-edge-c); border-bottom: 1px solid var(--sh-edge-c); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } /* shelf interiors — the two textures a flat surface drew to give itself something to look at, which a shelf edge now does properly */ #svc3{ --r6-field: var(--sh-shelf); --r6-panel: #F0F3F9; --r6-rule: #D7DEEA; --r6-rule2: #E4E9F2; } #svc3 .s3-grid{ background-image: none; } #svc3 .s3-catwrap{ background: var(--sh-shelf); } #ss1 .ss-grid{ background-image: none; } /* Why Choose Us needs no interior texture rule: its eleven standards are sheets that carry their own edge and their own lift off the shelf. */ /* ── GOOGLE ADS MANAGEMENT google-ads.html ──────────────────── */ /* #q7 is on TWO pages. Here it is a section, a direct child of
. On the homepage the same id and the same eight classes sit INSIDE the Our Work drawer, in the Google Ads tab panel, because gads-clients/*.js hooks onto #q7 at load and has to find it in the DOM. An unscoped `#q7` rule therefore puts a shelf inside a shelf on the homepage. The child combinator is what keeps this rule on the page it was written for. */ /* Three of these carry the section's id AND a class — #gads-services.sv, #w8-system.w8, #wcu-ga.w8 — because four older skin files (vm.css, idx.css, v07.css, wcs-skin.css) each set their ground that way. A bare `#w8-system` here loses to `#w8-system.w8` on specificity no matter how late it loads, and loses SILENTLY: the border and the margin land, so the section looks handled while its ground and padding are still the old ones. The class is repeated here to match, not to be clever. */ main#top > #q7.q7, /* the client rail — 18 businesses SHELF */ #gads-services.sv, /* six services SHELF */ #w8-system.w8, /* Our System — how the work runs. EDITORIAL: the three stages happen in order to everyone; they are not three things to choose between. It is also the page's one rest, between the services above it and the standards below. */ #wcu-ga.w8, /* Why Choose Us — five standards SHELF */ #pricing, /* PPC plans — four plans SHELF */ #gfaq{ /* the questions, and only the questions SHELF */ border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } main#top > #q7.q7, #gads-services.sv, #wcu-ga.w8, #pricing, #gfaq{ background: var(--sh-shelf); } #w8-system.w8{ background: var(--sh-floor); } /* the two deep bands this page carried, #DFE6F2 with a #CBD6E8 hairline, were the only surfaces on the site outside the ds.css ladder */ #w8-system.w8, #wcu-ga.w8{ border-top-color: var(--sh-edge); border-bottom-color: var(--sh-edge); } /* ── ABOUT US about-us.html ────────────────────────────────────────────── */ #chapters, /* Our Story — a narrative EDITORIAL */ #journey, /* Milestones — the story continued EDITORIAL */ #reach, /* Our Markets — a set of markets SHELF */ #people, /* Our Team — a set of people SHELF */ #tc-system, /* Our Capabilities — what we offer SHELF */ #tc-who, /* The Company — who we are EDITORIAL */ #tc-close{ /* Talk To Us — the one action block CLOSE */ border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } #reach, #people, #tc-system{ background: var(--sh-shelf); } #chapters, #journey, #tc-who{ background: var(--sh-floor); } #tc-close{ background: var(--sh-close); border-top-color: var(--sh-edge-c); border-bottom-color: var(--sh-edge-c); } /* ── CONTACT US contact-us.html ────────────────────────────────────────── */ #ways, /* four ways to reach us SHELF */ #enquiry, /* the form — you fill it in EDITORIAL */ #after, /* what happens next EDITORIAL */ #teams, /* six teams SHELF */ #office, /* six offices, with the map SHELF */ #answers, /* the questions, and only the questions SHELF */ #start.px-final{ /* the one action block CLOSE */ border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } #ways, #teams, #office, #answers{ background: var(--sh-shelf); } #enquiry, #after{ background: var(--sh-floor); } #start.px-final{ background: var(--sh-close); border-top-color: var(--sh-edge-c); border-bottom-color: var(--sh-edge-c); } /* ── COMPANY LEGAL DOCUMENTS legal-documents.html ─────────────────────── */ #docs.s2, /* the documents themselves SHELF */ #verify.s3{ /* how to verify them SHELF */ background: var(--sh-shelf); border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } /* This page has no separate hero — its registration record IS the hero, and it sits directly under the header. A top edge there would land one pixel under the header's own hairline and read as a double rule, so it takes a bottom edge only, and the block below it supplies the other. */ #reg.s1{ background: var(--sh-floor); border-top: 0; border-bottom: 1px solid var(--sh-edge); margin-top: 0; margin-bottom: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } /* ── MANAGEMENT TEAM our-management.html ───────────────────────────────── */ #who.fs-who{ /* the leadership — a set of people SHELF */ background: var(--sh-shelf); border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } /* ========================================================================== 3b · THE LIT AISLE — the aisle a floor-coloured block has to paint itself Added 2026-09-09, after the Why Choose Us → About Us seam was reported as unclear. WHAT WAS ACTUALLY WRONG. The aisle is this system's separator, and it is transparent, so it shows `body` — which is --sh-floor. Measured down the gutter at 1440: Industries → Why Choose Us grey │ hairline │ 17px WHITE │ hairline │ grey Why Choose Us → About Us grey │ hairline │ 17px white │ hairline │ WHITE Between two shelves the aisle is a white band framed by grey on both sides and reads instantly. Where the next block is floor-coloured the aisle is the same white as that block, so it is DONATED to it: the gap disappears, the lower hairline is left stranded 17px inside the new section with white on both sides, and the whole separation collapses to one 1px #E3E6EB line. Nothing was missing from the seam — it simply could not be seen. THE RULE. The aisle must contrast with the block that follows it, because space belongs to what comes next. Between shelves it stays floor-white and is not touched here. A floor-coloured block paints its own aisle in the shelf tone: About Us now grey … grey │ hairline │ WHITE one decisive step FAQ now white │ hairline │ 17px GREY │ hairline │ white So a section always begins on an edge that can be seen, and the CTA above it can no longer read as the opening of the next section. HOW. The aisle stops being a margin and becomes a border of the same height, which is the only way to give it a colour. The block then pulls itself up by exactly one aisle so the gap is painted, not doubled — the same margin-collapse care section 4 takes with the footer. The negative margin, and not `:has(+ x){margin-bottom:0}` on the block above: the first attempt used `:has` and left the seam 34px tall, because #about5's DOM neighbour is #mact, which is display:none on desktop. A display:none element generates no box, so its margin never applied and the real neighbour was still #wcu8. Adjoining margins collapse straight THROUGH such an element, so the negative margin lands on whichever block is really above — on a phone, where #mact is shown, just as much as on a desktop. NOT DONE HERE, deliberately: no divider, no rule, no ornament, and no change to any shelf → shelf seam. The ones that already work are untouched. A NEW PAGE: a block that takes --sh-floor and is not the hero belongs in this list, or give it .sh-aisle-lit. ========================================================================== */ /* The About Us hero is the only block above a lit aisle that never carried a bottom margin of its own — the block below it always supplied the gap. Give it the aisle so the rule underneath can be one uniform line. Nothing moves today: 17.28 from the hero collapsing with -17.28 below is the same 17.28 the hero already had. */ .h8-hero{ margin-bottom: var(--sh-aisle); } .sh-aisle-lit, #about5, #faq10, /* Home */ #w8-system.w8, /* Google Ads — .w8 to match section 3 */ #chapters, #journey, #tc-who, /* About Us */ #enquiry, #after{ /* Contact Us */ margin-top: calc(-1 * var(--sh-aisle)); border-top: var(--sh-aisle) solid var(--sh-shelf); box-shadow: inset 0 1px 0 var(--sh-edge); } /* ========================================================================== 4 · THE END OF THE AISLE The footer takes the shelf colour with NO aisle above it, so the last thing a page does is close rather than open one more block. It is the same footer on all six pages, so this is written once. Setting margin-top:0 on the footer is not enough: the last block's own bottom margin collapses through
and becomes the gap. The last block on each page therefore gives up its bottom margin and its bottom edge — the footer's top edge is the one hairline at that seam, and two would read as a double rule. A NEW PAGE: add its final block to this list, or give it .sh-last. ========================================================================== */ #sfoot{ background: var(--sh-shelf); border-top: 1px solid var(--sh-edge); margin-top: 0; } .sh-last, #faq10, /* Home */ #gfaq, /* Google Ads */ #start.px-final, /* Contact Us */ #who.fs-who, /* Management Team */ #verify.s3, /* Legal Documents */ #tc-close{ /* About Us */ margin-bottom: 0; border-bottom: 0; } /* ========================================================================== 5 · PHONES The aisle is the whole point on a phone, and it is the one measurement that does NOT shrink in proportion: 14px of gap on a 390px screen is a larger share of the view than 18px on a 1440px one, which is correct, because a phone reader can only ever see one block at a time and needs the end of it to arrive unmistakably. ========================================================================== */ @media (max-width: 760px){ :root{ --sh-aisle: 14px; --sh-pt: 28px; --sh-pb: 32px; --sh-lede: 22px; } /* the same block, restated so a narrow rule in a page's own stylesheet cannot outrank it by specificity where this file wins only by order */ .sh-shelf, .sh-editorial, .sh-close, .tail.show .stage, #svc3 .s3-svc, #indwork, #ss1, #hp1, #wcu8, #about5, #faq10, main#top > #q7.q7, #gads-services.sv, #w8-system.w8, #wcu-ga.w8, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #ways, #enquiry, #after, #teams, #office, #answers, #start.px-final, #reg.s1, #docs.s2, #verify.s3, #who.fs-who{ border-top: 1px solid var(--sh-edge); border-bottom: 1px solid var(--sh-edge); margin-block: var(--sh-aisle); padding-block: var(--sh-pt) var(--sh-pb); } .sh-shelf, #svc3 .s3-svc, #indwork, #ss1, #hp1, #wcu8, main#top > #q7.q7, #gads-services.sv, #wcu-ga.w8, #pricing, #gfaq, #reach, #people, #tc-system, #ways, #teams, #office, #answers, #docs.s2, #verify.s3, #who.fs-who{ background: var(--sh-shelf); } .sh-editorial, #about5, #faq10, #w8-system.w8, #chapters, #journey, #tc-who, #enquiry, #after, #reg.s1{ background: var(--sh-floor); } .sh-close, #tc-close, #start.px-final, #mact{ background: var(--sh-close); border-top-color: var(--sh-edge-c); border-bottom-color: var(--sh-edge-c); } /* the page still has to land on a phone */ .sh-last, #faq10, #gfaq, #start.px-final, #who.fs-who, #verify.s3, #tc-close{ margin-bottom: 0; border-bottom: 0; } #reg.s1{ border-top: 0; margin-top: 0; } .tail.show .stage{ margin-block: 0; padding-block: 0; border-top: 0; } #svc3 .s3-svc{ margin-top: var(--sh-aisle); } .gah #q7.q7{ background: transparent; border-top: 0; border-bottom: 0; margin-block: 0; padding-block: 0; } .screen, .hero, #hx.h3, .h8-hero, .px-hero, #top.hero{ background: var(--sh-floor); border-top: 0; margin-top: 0; } #sfoot{ background: var(--sh-shelf); margin-top: 0; } } /* ========================================================================== 5b · THE LIT AISLE ON A PHONE Section 5 restates border-top and margin-block for every block by name, on purpose (so a narrow rule in a page's own sheet cannot outrank this file). That restatement also lands on the eight blocks section 3b lit, and puts their 1px hairline and transparent margin back — measured at 390: About Us → FAQs was white | 1px | white again, the worst seam on the site, and only on phones. So section 3b has to be restated here for the same reason. It matters more here, not less. A phone reader sees one block at a time and has no surrounding page to infer structure from, so the moment a section ends is carried entirely by the aisle. --sh-aisle is 14px at this width and the border follows it automatically. ========================================================================== */ @media (max-width: 760px){ .sh-aisle-lit, #about5, #faq10, #w8-system.w8, #chapters, #journey, #tc-who, #enquiry, #after{ margin-top: calc(-1 * var(--sh-aisle)); border-top: var(--sh-aisle) solid var(--sh-shelf); box-shadow: inset 0 1px 0 var(--sh-edge); } }