/* ========================================================================== site/align.css · ONE COLOUR SYSTEM FOR THE WHOLE SITE Written 2026-09-20, taken from the two approved references: the finalized Homepage first screen and the finalized Google Ads hero. Linked LAST in the of all six live pages. --------------------------------------------------------------------------- WHY THIS FILE EXISTS --------------------------------------------------------------------------- The homepage was finished in the new colour system. The five inner pages were never moved onto it. Read off the live pages before this file: token index.html the other five pages --accent #1E4FD6 (pinned 0760C6) #1A73E8 the old Google blue --cta (pinned #0760C6) #99A2A4 Glacier grey --cta-ink (pinned #0760C6) #535D5E Glacier grey --pl-row (pinned #C6D9F4) #EDF2F9 a grey selection band --pl-ink (pinned #004594) #0B0D12 a near-black chosen word The consequences were visible, not theoretical: · six primary buttons still shipped Glacier grey — "Call +91 9999-123-123" on contact-us sits next to a bright green WhatsApp button, where a grey fill reads as disabled; · every inner-page link, section full stop and icon was Google blue while every homepage one is the action blue; · four selection rails (Milestones, Our Team, Documents, Our Offices) were grey bands with a colourless chosen key. --------------------------------------------------------------------------- THE ROLES — one colour each, and never two roles sharing a treatment --------------------------------------------------------------------------- identity #004594 the header bar, the footer, the "you are here" word ACTION #0760C6 every CTA — hover #004EA6, pressed #003D82, white label, matte, no glow. This is the CTA colour the homepage hero button already carries. action, quiet #0760C6 ink on white, #C9D9EF edge, #EAF2FD hover ground selection #C6D9F4 the band / the chosen key's fill the light #1F8FEA the active dot, and nothing else idle #15335C a control you can choose but have not pale ground #F3F7FC Action and selection stay in one family but never share a form: an action is the only filled blue mass; a selection is a white key on a blue band, or a blue key on white. See the hero for both. --------------------------------------------------------------------------- DELIBERATELY NOT TOUCHED --------------------------------------------------------------------------- · the main menu bar — its cobalt, its white current-page key, its words · the Homepage hero and the Google Ads hero, and the hero carried onto the four inner pages: every rule here is scoped away from .screen / #overview · --brand and --g-blue, the drawn Google SERP / Shopping / ad mock-ups, the per-client avatar hues, #svc3's five per-service hues and the legal page's five document-family hues. Those are pictures and colour CODES, not accents · the cobalt closing bands, the footer, geometry, type, spacing, radii UNDO: delete the one line that loads this file from each page. ========================================================================== */ /* ========================================================================== 1 · THE ROLES, NAMED ONCE ========================================================================== */ :root{ --dmd-cobalt: #004594; /* identity + the "you are here" word */ --dmd-act: #0760C6; /* THE action colour */ --dmd-act-h: #004EA6; --dmd-act-a: #003D82; --dmd-on-act: #FFFFFF; --dmd-sel: #C6D9F4; /* the selection band / the chosen key */ --dmd-light: #1F8FEA; /* the active dot */ --dmd-edge: #C9D9EF; /* a quiet action's hairline */ --dmd-soft: #EAF2FD; /* a quiet action's hover ground */ --dmd-ground: #F3F7FC; /* the pale ground */ --dmd-ink: #0E1E35; --dmd-ink-2: #15335C; /* idle / unchosen */ } /* ========================================================================== 2 · THE CTA SYSTEM site/cta.css routes every action on the site through these tokens, so re-pointing them moves all of them at once — primary fill, label, hover, pressed, the secondary's ink and hairline, and the disabled state. This retires Glacier Medium (#99A2A4 + a near-black label). It also closes the defect recorded against it: the old primary #99A2A4 and the old disabled #D0D5D5 were one lightness step apart, so the most important button on a page could be read as switched off. ========================================================================== */ :root{ --cta: #0760C6; /* primary fill — the hero button's own blue */ --cta-h: #004EA6; --cta-a: #003D82; --cta-fg: #FFFFFF; /* white label; every icon is currentColor */ --cta-edge-1: #0760C6; /* flush with the fill: the primary is one mass */ --cta-ink: #0760C6; /* secondary + tertiary text */ --cta-ink-h: #004EA6; --cta-edge: #C9D9EF; /* the secondary's hairline */ --cta-edge-h: #0760C6; --cta-soft: #EAF2FD; /* the secondary's hover ground */ --cta-soft-2: #DCE8FA; --cta-dis: #DCE3EE; /* now unmistakably NOT the primary */ --cta-dis-fg: #7C889B; --cta-ring: rgba(7,96,198,.42); } /* matte. The only non-flat property an action may carry is its 1px inset edge, and the primary's edge is its own fill, so it renders flush. */ .btn, .btn.ghost, .btn.link, .px-btn-p, .px-btn-o, .px-submit, .sv-btn, .gss-btn, .s3-cta, .ld-form-go, .ld-act-b, .hrec-next, .ss-all, .hp-all{ background-image: none; text-shadow: none; } /* ========================================================================== 3 · THE ACCENT RETIRES --accent was still the old Google blue #1A73E8 on all five inner pages: section full stops, links, phone and email, icon chips, the open FAQ label. The homepage carries #0760C6 for every one of those. One value, one blue. --brand and --g-blue are NOT changed — they belong to the wordmark and to the drawn Google mock-ups, which must stay Google blue. ========================================================================== */ :root{ --accent: #0760C6; } /* the legal page's five document-family hues stay a colour CODE; only its blue member joins the site's blue. */ .pg [data-grp="reg"]{ --hue: #0760C6; --hue-pale: #EAF2FD; --hue-edge: #C9D9EF; } /* ========================================================================== 4 · THE SELECTION SYSTEM site/paper.css routes every selection rail on the site through --pl-*. Before this file those rails were a grey band (#EDF2F9) with a white key and a near-black word — no blue anywhere, so "chosen" was said in a different language on the inner pages than on the homepage. After it, every rail on the site speaks once: band #C6D9F4 · chosen key white · chosen word #004594 cobalt · idle word #15335C · hover a white wash, never a second plate. ========================================================================== */ :root{ --pl-row: #C6D9F4; /* level 1 · the selection band */ --pl-row-2: #DDE9F9; /* level 2 · a rail inside a chosen panel */ --pl-row-3: #EEF4FC; /* level 3 */ --pl-on: #FFFFFF; /* the chosen key, at every level */ --pl-hov: rgba(255,255,255,.55); --pl-hov-s: #EAF2FD; --pl-prs: rgba(255,255,255,.86); --pl-ring: #C6D9F4; --pl-ring-2:#AEC9EF; --pl-ink: #004594; /* the chosen word */ --pl-off: #15335C; /* the words you have not chosen */ } /* The four docks that set their own chosen/idle ink rather than reading --pl-ink. Same structure, same band — only the word's colour joins in. */ html body :is(#w8-system, #wcu-ga) .w8-tab[aria-selected="true"] :is(.w8-tab-n, b){ color: #004594 !important; } html body :is(#w8-system, #wcu-ga) .w8-tab:not([aria-selected="true"]) :is(.w8-tab-n, b){ color: #15335C !important; } html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab[aria-selected="true"]{ color: #004594 !important; } html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab[aria-selected="true"] :is(b, span){ color: #004594 !important; } /* a selection rail is paper on a band — never a raised card. */ html body :is(#docs .w3-rail, #office .lx-rail, #journey .k9-seg, #people .k9-five){ box-shadow: none !important; } /* ========================================================================== 5 · BLUE THAT WAS SAYING THE WRONG THING ========================================================================== */ /* 5a · The Specialized Google Ads Solutions band sits on #C6D9F4 — the selection colour — and its button was WHITE, which is exactly the chosen white key of the dock a few pixels above it. The band is the approved design and stays; the button becomes the action, so the only white key on that screen is still the one that means "chosen". #0760C6 on #C6D9F4 is 4.18:1 as a shape; white on #0760C6 is 5.98:1. */ html body :is(#w8-system, #wcu-ga) .gss-band .gss-btn{ background: #0760C6 !important; color: #FFFFFF !important; box-shadow: none !important; } html body :is(#w8-system, #wcu-ga) .gss-band .gss-btn:hover{ background: #004EA6 !important; color: #FFFFFF !important; } html body :is(#w8-system, #wcu-ga) .gss-band .gss-btn:active{ background: #003D82 !important; } html body :is(#w8-system, #wcu-ga) .gss-band .gss-btn svg{ stroke: currentColor !important; } /* 5b · legal-documents' "See the documents" key was a pale blue plate in the old Google blue — a filled blue shape that is not the CTA. It becomes the site's quiet action: white, action ink, action hairline. */ html body #reg .hrec-next{ background: #FFFFFF !important; color: #0760C6 !important; border-color: #C9D9EF !important; } html body #reg .hrec-next:hover{ background: #EAF2FD !important; border-color: #0760C6 !important; } /* ========================================================================== 6 · THE SECTION ROW UNDER THE MENU The main bar is untouched. Its section row was #D3DDEC — a blue-grey that reads dull against a page whose every other pale is a clean blue. Lifted into the same family at the same level, and kept clearly apart from the selection band #C6D9F4 so the row can never be mistaken for a chosen state. The white current-section key, its cobalt word and its dot are unchanged. ========================================================================== */ html body header.bar .krow{ background: #D8E4F6 !important; } /* ========================================================================== 7 · THE LAST FOUR PLACES THAT STILL SPOKE THE OLD LANGUAGE Found by reading the live pages again after sections 1–6 landed: four controls set their own ink instead of reading the tokens, so they kept a near-black chosen word or a grey idle one. ========================================================================== */ /* 7a · the two Google Ads docks — the chosen word already joined in through --pl-ink; the words you have NOT chosen were still near-black. */ html body :is(#w8-system, #wcu-ga) .w8-tab:not([aria-selected="true"]), html body :is(#w8-system, #wcu-ga) .w8-tab:not([aria-selected="true"]) :is(.w8-tab-n, .w8-tab-t, b){ color: #15335C !important; } /* 7b · About Us › Milestones and Our Team. Each set its chosen colour on a different node, so one kept a near-black chosen name and the other kept near-black idle words. Both now say it on the control and on its parts. */ html body :is(#journey .k9-sg, #people .k9-pc).on, html body :is(#journey .k9-sg, #people .k9-pc).on :is(b, span){ color: #004594 !important; } html body :is(#journey .k9-sg, #people .k9-pc):not(.on), html body :is(#journey .k9-sg, #people .k9-pc):not(.on) :is(b, span){ color: #15335C !important; } /* 7c · hover must never rehearse the chosen state. The homepage hover is a faint wash that keeps the idle ink; three inner rails were washing AND flipping the word to the chosen cobalt, so a pointer moving along the row lit every key as if it had been picked. */ html body :is(#journey .k9-sg, #people .k9-pc, #docs .w3-cat, #office .lx-r):hover:not(.on):not([aria-current="true"]):not([aria-selected="true"]), html body :is(#journey .k9-sg, #people .k9-pc, #docs .w3-cat, #office .lx-r):hover:not(.on):not([aria-current="true"]):not([aria-selected="true"]) :is(b, span){ color: #15335C !important; } /* 7d · Specialized Google Ads Solutions, the panel behind the CTA. Its solution tabs were a white key on a near-white ground with grey words — the selection was all but invisible. They take the homepage's own chosen-key treatment: a blue key, a cobalt word, plain words when closed. */ html body .sx .v3-tab[aria-selected="true"]{ background: #C6D9F4 !important; color: #004594 !important; border-color: transparent !important; box-shadow: none !important; } html body .sx .v3-tab:not([aria-selected="true"]){ color: #15335C !important; border-color: transparent !important; } html body .sx .v3-tab:not([aria-selected="true"]):hover{ background: #F3F7FC !important; color: #15335C !important; } /* and its two actions join the action system */ html body .sx .sx-btn{ color: #0760C6 !important; } html body .sx .sx-btn:not(.is-ghost){ background: #0760C6 !important; color: #FFFFFF !important; box-shadow: none !important; } html body .sx .sx-btn:not(.is-ghost):hover{ background: #004EA6 !important; } html body .sx .sx-btn.is-ghost:hover{ background: #EAF2FD !important; color: #004EA6 !important; }