/* ========================================================================== site/hier.css · THE INTERACTION-COLOUR LADDER Loaded LAST on every page, after ds.css / shelf.css / uifinish.css and after each page's own sheets, so every rule below wins on source order at the SAME specificity as the rule it corrects. No !important anywhere. --------------------------------------------------------------------------- WHY THIS FILE EXISTS --------------------------------------------------------------------------- The site carried two saturated blues seven degrees of hue apart: --brand #0B57F5 the DMD wordmark's blue — the hero accent word --accent #1A73E8 Google blue — every button, tab, chip and dot At a glance nobody can tell them apart. So every one of the 39 solid blue surfaces measured across the six live pages read as "the brand colour", and the brand colour was therefore spent dozens of times per visit instead of once. The blue was not too bright; it was too EVENLY distributed. The fix is not less blue. It is blue that means something: TIER 0 · IDENTITY --brand #0B57F5, as TEXT ONLY. The hero accent word, the section full stop, the wordmark. Never a surface, never a button. TIER 1 · PRIMARY --accent #1A73E8, as a SOLID FILL. One per screen. The only saturated blue surface in a viewport. Brand and action never share a form, so they cannot compete. TIER 2 · SECONDARY ink text, or a ghost outline. NO blue. TIER 3 · SELECTED --navy #0F1B3D — the wordmark's OTHER colour. A selection is a state, not an offer. TIER 4 · DECORATION neutral grey. Dots, ticks, rules, meta badges. NOT TOUCHED: the drawn Google SERP / Shopping / WhatsApp mock-ups. Those are pictures of a real product and their blue is content, not interface. ========================================================================== */ :root{ --hr-sel: #0F1B3D; /* selected / active — the logo navy */ --hr-sel-2: #1B2A55; /* its one hover step */ --hr-sel-ink: #FFFFFF; --hr-sel-dim: #AEB7CA; /* meta inside a selected surface */ --hr-quiet: #7A828F; /* tier-4 decoration */ --hr-quiet-2: #C4CBD7; } /* ========================================================================== 1 · TIER 0 — THE BRAND BLUE IS RECLAIMED Two buttons on the Google Ads page were filled with --brand, the hero word's own colour. A button is an action, not an identity: they move to --accent and #0B57F5 goes back to being something the eye meets twice. ========================================================================== */ #gads-services .sv-btn:not(.is-ghost){ background: var(--accent); } #w8-system .w8-close .gss-btn{ background: var(--accent); } .gss-btn{ background: var(--accent); } /* The hero eyebrow was --brand too — a category label wearing the identity colour, two lines above the headline word that has to carry it. Every other eyebrow on the site is already --ink-3; these three now match, so the accent word is the FIRST blue the eye meets in a hero, not the third. */ .hero .label{ color: var(--ink-3); } .h3-eye{ color: var(--ink-3); } .hero .eyebrow{ color: var(--ink-3); } /* ========================================================================== 2 · TIER 2 — SECONDARY ACTIONS STOP COMPETING `.btn.link` sat beside `.btn` in the same blue, so "Talk to us" pulled as hard as "See how it works together" and the hero had two first actions. Ink text keeps it obviously clickable — it is a link, underlined on hover — while the fill beside it becomes unmistakably the primary. ========================================================================== */ .btn.link{ color: var(--ink); font-weight: 650; } .btn.link:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .h3 .h3-cta .btn.link{ color: var(--ink); } .h3 .h3-cta .btn.link:hover{ text-decoration: underline; text-underline-offset: 3px; } .hero .ctaRow .btn.link{ color: var(--ink); } /* the Google Ads system close — a blue text link directly opposite a solid blue button, both asking for the same audit. The link goes quiet. */ #w8-system .w8-close-say a{ color: var(--ink); } /* ========================================================================== 3 · TIER 3 — SELECTED STATES BECOME NAVY, NOT BLUE A selected tab and a call to action were the same colour at the same weight. Navy is still the wordmark's own colour, so nothing leaves the palette; it simply stops shouting in the register reserved for actions. ========================================================================== */ /* homepage · Our Services category tabs. --cur is read off the element by BOTH the base rule and the desktop media-query rule, so setting the token here corrects the pair at once, whichever one is live. */ #svc3 .s3-cat[aria-current="true"]{ --cur: var(--hr-sel); background: var(--hr-sel); color: var(--hr-sel-ink); } /* homepage · Client Proof evidence types. The selected chip used to sit in the same viewport as "Request a Live Proof Walkthrough" wearing the same blue; a filter must never read as loud as the section's conversion action. 2026-09-10 the group became an underline chooser (.hp-tab) and its ink is set by paper.css's ladder, which loads after this file — so the demotion this block existed to make is now made there, and nothing is left to say here. The rule is kept as a record of what the group must never go back to: a saturated blue chip beside a blue button. */ /* Google Ads · billing-period toggle */ .pricing-period.active{ background: var(--hr-sel); color: var(--hr-sel-ink); } /* Google Ads · Our System and Why Choose Us tab wells. The lit bar and the number badge carried the loudest blue on the page directly above a solid blue CTA. */ #w8-system .w8-tab[aria-selected="true"]::before, #wcu-ga .w8-tab[aria-selected="true"]::before{ background: linear-gradient(180deg, #2C3A63 0%, var(--hr-sel) 100%); box-shadow: 0 1px 0 rgba(15,27,61,.55); } #wcu-ga .w8-tab[aria-selected="true"] .w8-tab-b{ background: linear-gradient(180deg, #3A4770 0%, var(--hr-sel) 100%); color: var(--hr-sel-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(15,27,61,.55), 0 1px 2px rgba(15,27,61,.40); } #w8-system .w8-tab[aria-selected="true"] .w8-tab-w, #wcu-ga .w8-tab[aria-selected="true"] .w8-tab-w{ color: var(--hr-sel); } .w8-tab[aria-selected="true"] .w8-tab-w{ color: var(--hr-sel); } /* client rail · the selected business cue */ #q7 .mp-i.is-sel .cc-cue{ background: var(--hr-sel); color: var(--hr-sel-ink); } #q7 .mp-i.is-sel:hover .cc-cue{ background: var(--hr-sel-2); color: var(--hr-sel-ink); } @media (hover:hover) and (pointer:fine){ #q7 .mp-i:hover .cc-cue{ background: var(--hr-sel-2); color: var(--hr-sel-ink); } } /* ========================================================================== 4 · TIER 4 — DECORATION GOES QUIET Eighteen blue ticks in one panel is not emphasis, it is texture. Ink says "included" just as clearly and lets the panel's one CTA be the only thing in it wearing colour. ========================================================================== */ .w8-li li::after{ border-color: var(--hr-sel); } .w8-dots i.on{ background: var(--hr-sel); } #w8-system .w8-dots i.on, #wcu-ga .w8-dots i.on{ background: var(--hr-sel); } #w8-system .w8-num b{ background: var(--hr-sel); } /* ========================================================================== 5 · TIER 1 — ONE PRIMARY PER SCREEN Measured document positions (desktop 1440, viewport 900) decided this, not taste. Two blue fills that never share a screen do not compete; two that sit 271px apart do. index.html 407 · Get free audit PRIMARY, kept 6360 · Request a Live Proof … alone on its screen, kept 9365 · Schedule a Call kept 10323 · Explore About Us 958px later — DEMOTED 10851 · Book the First Call 528px later, the closing ask google-ads-… 404 · Get My Google Ads Audit PRIMARY, kept 1932 · Get a Free Account Review KEPT — it is the solid half of a ghost+solid pair, and the "Get My Campaign Plan" that looked 271px away is visibility:hidden inside a closed chooser panel. It never competes. 2909 · Explore Specialized … DEMOTED on purpose, not proximity: it only opens an in-page panel. The two demoted on the Google Ads page are also the two that were never lead actions: one repeats the hero's audit ask, the other only opens an in-page panel. "Explore About Us" is pure navigation sitting between two conversion asks. Ghost keeps all three obviously clickable while letting the page answer "what should I notice first?" with one button. ========================================================================== */ /* the ghost, matching the site's existing .btn.ghost exactly */ #about5 .ab-btn, #w8-system .w8-close .gss-btn, .pg .ld-act-b[data-kind="view"]{ background: var(--paper, #fff); color: var(--ink, #0B0D12); border: 1px solid var(--line-b, #DEE5F1); box-shadow: none; } #about5 .ab-btn:hover, #w8-system .w8-close .gss-btn:hover, .pg .ld-act-b[data-kind="view"]:hover{ background: var(--mist, #F6F8FC); border-color: var(--ds-edge, #CFE0FD); color: var(--ink, #0B0D12); filter: none; } /* secondary links beside a demoted button follow the same ladder */ #about5 .ab-lnk{ color: var(--ink); } #about5 .ab-lnk:hover{ color: var(--ink); } /* ========================================================================== 6 · TIER 3 — THE LEGAL DOCUMENT TAB STRIP Already the quietest selected state on the site (tint + accent text) — it only needed to speak the same language as the other three tab systems. ========================================================================== */ .pg [data-grp="reg"]{ --hue: var(--hr-sel); } /* ========================================================================== 7 · TIER 3 — THE REMAINING TWO STATE SYSTEMS ========================================================================== */ /* the header's "you are here" underline. The label above it is already --navy; the rule under it was --accent, so the indicator disagreed with the text it belonged to. One mark, one colour. */ a.kid.on::after{ background: var(--hr-sel); } /* Google Ads · the six service cards' four-question accordion. The open row keeps its pale brand ground — that tint is what joins the row to the answer underneath it — but the 3px rail, the heading and the toggle stop wearing the action blue. Six cards × four rows meant this accent could repeat two dozen times on one page. */ #gsvc-six{ --gsa-accent: var(--hr-sel); --gsa-ink: var(--hr-sel); } /* ========================================================================== 8 · THE LAST TWO, FOUND BY RE-AUDITING RATHER THAN BY EYE ========================================================================== */ /* about-us.html's hero eyebrow is `.ab3-eye.brand`, not `.hero .eyebrow`, so section 1 above missed it and the page kept a brand-blue label over a brand-blue headline word. Its own base class is already --ink-2. */ .ab3-eye.brand{ color: var(--ink-2); } /* homepage · Why Choose Us — the open disclosure's icon plate, and the open standard's number plate. An open row is a state, so both join the other selected states rather than the CTAs. (The section became the Layered Depth register on 2026-09-10; the two plates are .wc-opic and .wc-n.) */ #wcu8 .wc-op.is-open .wc-opic{ background: var(--hr-sel); border-color: var(--hr-sel); } #wcu8 .wc-sheet.is-open .wc-n{ background: var(--hr-sel); color: var(--hr-sel-ink); } /* ========================================================================== 9 · THE ACCORDION, CORRECTED AT ITS REAL SOURCE Section 7 redefined --gsa-accent on #gsvc-six and the token DID change — measured #0F1B3D on .gsa-r — but nothing moved, because gads-index-column/idx.css restyles the same accordion one level up at `#gads-services #gsvc-six …` (2,2,0) using its own --ix-blue trio. The token was right and invisible. --ix-blue is NOT redefined wholesale: it also paints the section's full stop (identity, Tier 0) and the focus ring (accessibility). Only the open-state rules move, each repeating idx.css's own selector. ========================================================================== */ #gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"])::before{ background: var(--hr-sel); } #gads-services #gsvc-six .gsa-h[aria-expanded="true"]{ color: var(--hr-sel); } #gads-services #gsvc-six .gsa-h[aria-expanded="true"] svg{ background: var(--hr-sel); border-color: var(--hr-sel); color: #FFFFFF; } #gads-services #gsvc-six .gsa-h:hover{ color: var(--hr-sel); } #gads-services #gsvc-six .gsa-h:not([aria-expanded="true"]):hover svg{ border-color: #C2CBDA; color: var(--hr-sel); } /* the same lesson, one section down: v07.css paints the tick at `#w8-system .w8-li li::after` (1,2,0), which outranks section 4's `.w8-li li::after`. Eighteen ticks stayed blue until this line. */ #w8-system .w8-li li::after{ border-color: var(--hr-sel); }