/* ========================================================================== EDGES — the site's boundary and surface system ========================================================================== Added 2026-09-13. Linked LAST on all six pages, after site/heads.css. A line on this site has to say one of four things — "this module is one thing", "this is selected", "these belong together", "you can use this". A line that says none of them is removed, and nothing replaces it. THE HIERARCHY, firmest outward page ground #F4F7FC / #FFFFFF no line module --eg-edge-parent 1.29:1 one perimeter, 16px selector row --pl-row ground no line — ground only chosen white paper weight, not a stroke card --eg-edge-card 1.21:1 quieter than its module, 12px divider --eg-edge-divider 1.14:1 only between two kinds of content Controls stand apart from that ladder, because they must be found: field / ghost --eg-edge-control 1.41:1 visible at rest, 10px under the pointer --eg-edge-hover 1.75:1 keyboard focus --eg-focus + ring the one strong edge, and only on focus Nothing structural on the site is darker than --eg-edge-hover. Before this file the darkest structural edges were #414958 (9.1:1, the Our Services frame) and #0B0D12 (19:1, the Contact office rules). RADII module 16 · card 12 · control and button 10 · chip 8 · pill 999 SHADOW only where a surface really floats (menus, the one hero field). A module is carried by its edge and its ground, not by elevation. HOW IT WINS Part 2 re-points the tokens every page already reads (--line, --line-b, --line-2, --r-*, --shadow-*, --cta-edge*, --pnl-*), on the same selectors that define them, so hundreds of borders move with no rule of their own. Parts 3–9 repeat each owning selector at its own specificity and win on source order — the rule every site layer follows. No !important. Where a page has a phone rule for the same selector, it is restated inside part 10 so a desktop correction can never leak onto a phone. Parts: 1 tokens · 2 shared tokens re-pointed · 3 buttons · 4 fields · 5 homepage · 6 Google Ads · 7 About Us · 8 Legal Documents · 9 Contact Us · 10 phones ========================================================================== */ /* ========================================================================== 1 · TOKENS ========================================================================== */ :root{ /* edges */ --eg-edge-parent: #DCE3EC; --eg-edge-card: #E5EAF1; --eg-edge-divider: #EDF0F5; --eg-edge-control: #D2DAE5; --eg-edge-hover: #BAC5D4; --eg-edge-tint: #D6E3F8; /* the edge of a light-blue tinted panel */ /* focus — strong, but only while it is needed */ --eg-focus: #1A73E8; --eg-focus-ring: 0 0 0 3px rgba(26, 115, 232, .18); /* surfaces (the existing ladder, named once) */ --eg-paper: #FFFFFF; --eg-ground: #F4F7FC; --eg-sunk: #F6F8FC; --eg-row: #EDF2F9; /* radii */ --eg-r-parent: 16px; --eg-r-card: 12px; --eg-r-control: 10px; --eg-r-chip: 8px; --eg-r-pill: 999px; /* shadows */ --eg-shadow-card: 0 1px 2px rgba(15, 27, 61, .04); --eg-shadow-parent: 0 1px 2px rgba(15, 27, 61, .04), 0 18px 36px -28px rgba(15, 27, 61, .16); --eg-shadow-float: 0 2px 6px rgba(15, 27, 61, .06), 0 20px 44px -18px rgba(15, 27, 61, .20); } /* ========================================================================== 2 · SHARED TOKENS, RE-POINTED AT THE LADDER Every scope that defines one of these is listed, because a section-level definition beats :root for everything inside that section. ========================================================================== */ /* the line trio — ~380 declarations read these */ :root, .gah, #svc3, #wcu8, #about5, #faq10, #sfoot, .iw2, .pg, .gsvc, .k-scrim, .k-panel, .hrv-scrim, .hrv, #gss-panel .sx{ --line: var(--eg-edge-card); --line-b: var(--eg-edge-parent); --line-2: var(--eg-edge-divider); } /* the radius ladder: 26/22/16/12 becomes 20/16/12/10 */ :root, #svc3, #wcu8, #about5, .iw2, .pg{ --r-xl: 20px; --r-lg: var(--eg-r-parent); --r-md: var(--eg-r-card); --r-sm: var(--eg-r-control); } /* the shadow ladder: same three steps, less blur spent */ :root, #svc3, #wcu8, #about5, #faq10, .iw2, .pg, .gsvc, .k-scrim, .k-panel, .hrv-scrim, .hrv{ --shadow-s: var(--eg-shadow-card); --shadow-m: 0 1px 2px rgba(15, 27, 61, .04), 0 14px 30px -20px rgba(15, 27, 61, .14); --shadow-l: var(--eg-shadow-parent); } /* shelf blocks, the tinted-panel edge, the paper ladder's ring */ :root{ --sh-edge: var(--eg-edge-card); --sh-edge-c: var(--eg-edge-tint); --ds-edge: var(--eg-edge-tint); --pl-ring: var(--eg-edge-card); --pl-ring-2: var(--eg-edge-parent); --edge: var(--eg-edge-tint); } /* the CTA system: a filled button carries itself. Its ring was #6A777A — a dark outline around a grey fill. It becomes a tone-on-tone edge that darkens the fill by a tenth, so hover and pressed keep their own edge. */ :root{ --cta-edge-1: rgba(11, 13, 18, .10); --cta-edge: var(--eg-edge-control); --cta-edge-h: var(--eg-edge-hover); } /* the selection-panel material: its hard 2–3px offset read as embossing */ :root{ --pnl-rim: var(--eg-edge-parent); --pnl-ring: var(--eg-edge-parent); --pnl-lift: 0 18px 36px -28px rgba(15, 27, 61, .16); --pnl-lift-s: 0 0 0 0 transparent; } /* section-scoped sets */ #svc3{ --r6-frame: var(--eg-edge-parent); /* was #414958 — the graphite frame */ --r6-rule: var(--eg-edge-card); --r6-rule2: var(--eg-edge-divider); } #wcu8{ --wcu-line: var(--eg-edge-card); --wcu-lift-1: var(--eg-shadow-card); --wcu-lift-2: var(--eg-shadow-parent); --wcu-lift-3: 0 1px 2px rgba(15, 27, 61, .05), 0 22px 44px -26px rgba(15, 27, 61, .20); } #gads-services.sv{ --ix-edge: var(--eg-edge-tint); --ix-rule: var(--eg-edge-card); --ix-hair: var(--eg-edge-divider); --ix-r: var(--eg-r-card); } .a9{ --a9-edge: var(--eg-edge-parent); --a9-line: var(--eg-edge-card); --a9-hair: var(--eg-edge-divider); } /* ========================================================================== 3 · BUTTONS — one radius, and no dark outline around a fill Radii ran 7, 8, 9, 10, 11, 12 and 13px across the six pages. ========================================================================== */ .btn, .px-btn, .sv-btn, .gss-btn, .h3 .h3-cta .btn, .hero .ctaRow .btn, .pg .ld-act-b, .pg .s3-cta, .pg .ld-form-go, #gads-services .sv-btn, #about5 .ab-btn, #hp1 .hp-ctab, #wcu8 .wc-btn, #wcu8 .wc-opin .a-more, #wcu8 .wc-opin .a-go{ border-radius: var(--eg-r-control); } .barbtn{ border-radius: var(--eg-r-chip); } /* ========================================================================== 4 · FIELDS — a quiet edge at rest, the accent only while in use ========================================================================== */ .px-f input, .px-f textarea, .px-f select{ border-color: var(--eg-edge-control); border-radius: var(--eg-r-control); } .px-f input:hover, .px-f textarea:hover, .px-f select:hover{ border-color: var(--eg-edge-hover); } .px-f input:focus, .px-f textarea:focus, .px-f select:focus{ border-color: var(--eg-focus); box-shadow: var(--eg-focus-ring); } .px-form{ border-color: var(--eg-edge-parent); border-radius: var(--eg-r-parent); } /* the homepage's audit field — the page's one floating object keeps its lift, at a little over half the old darkness (rgba .50 → .26) */ .hero .capture{ border-color: var(--eg-edge-control); box-shadow: 0 1px 2px rgba(15, 27, 61, .04), 0 24px 48px -30px rgba(15, 27, 61, .26); } .hero .capture:focus-within{ border-color: var(--eg-focus); box-shadow: 0 0 0 4px rgba(26, 115, 232, .13), 0 24px 48px -30px rgba(15, 27, 61, .26); } /* ========================================================================== 5 · HOMEPAGE ========================================================================== */ /* ---------- header: the services menu floats, so it may keep a shadow ---- */ .nav .svcm{ box-shadow: var(--eg-shadow-float); } /* ---------- Our Services --------------------------------------------------- The Bureau skin drew every part square and framed the rail and the five service blocks in #414958. The frame colour is re-pointed in part 2; here the site's radii come back, the 6px colour bar on each block goes (the service's icon plate already carries its colour), and so do the hover stripe, the embossed inner ring and the progress dashes under each rail. */ #svc3 .s3-catrail{ background: var(--pl-row); border-color: transparent; border-radius: var(--eg-r-card); box-shadow: none; } /* the chosen chip is white paper now — the Bureau filter that turned its icon white (for a blue fill that no longer exists) hid the icon */ #svc3 .s3-cat[aria-current="true"] .s3-lg{ filter: none; opacity: 1; } #svc3 .s3-row{ border-radius: var(--eg-r-parent); box-shadow: none; } #svc3 .s3-row::before{ display: none; } #svc3 .s3-num{ border-radius: var(--eg-r-control); box-shadow: inset 0 0 0 1px var(--eg-edge-card); } #svc3 .s3-badge{ border-radius: var(--eg-r-chip); } #svc3 .s3-card{ border-color: var(--eg-edge-card); border-radius: var(--eg-r-card); box-shadow: none; } #svc3 .s3-card:hover{ border-color: var(--eg-edge-hover); box-shadow: var(--eg-shadow-card); } #svc3 .s3-card::after{ display: none; } #svc3 .s3-mock{ border-radius: calc(var(--eg-r-card) - 1px) calc(var(--eg-r-card) - 1px) 0 0; border-bottom-color: var(--eg-edge-divider); box-shadow: none; } /* the sub-filter (All / Business Accounts / Personal Profile) joins the paper ladder: a row ground, and the chosen one is the only white paper */ #svc3 .s3-tabs{ background: var(--pl-row); border-color: transparent; border-radius: var(--eg-r-control); } #svc3 .s3-tab{ border-radius: var(--eg-r-chip); } #svc3 .s3-tab:hover{ background: var(--pl-hov); } #svc3 .s3-tab[aria-pressed="true"]{ background: var(--pl-on); color: var(--pl-ink); box-shadow: 0 0 0 1px var(--eg-edge-card); } #svc3 .s3-more i{ border-color: var(--eg-edge-card); border-radius: var(--eg-r-chip); } #svc3 .s3-more:hover i{ background: var(--eg-row); border-color: var(--eg-edge-hover); color: var(--ink); } #svc3 .s3-bchip{ border-radius: var(--eg-r-chip); } #svc3 .s3-dots{ display: none; } #svc3 a:focus-visible, #svc3 button:focus-visible{ outline-color: var(--eg-focus); border-radius: var(--eg-r-chip); } /* ---------- Client Proof -------------------------------------------------- */ #hp1 .hp-cta{ border-color: var(--eg-edge-card); border-radius: var(--eg-r-parent); } /* ---------- Why Choose Us ------------------------------------------------- */ #wcu8 .wc-sheet{ border-radius: var(--eg-r-card); } #wcu8 .wc-close{ border-radius: var(--eg-r-parent); } /* ========================================================================== 6 · GOOGLE ADS ========================================================================== */ /* the navy-led rule between the heading and the rail: spacing does that job */ #gads-services .sv-group.is-bare{ background: none; } /* the coloured dash above every campaign name, and the navy dash above "Not sure which campaign…" — marks that say nothing the title does not */ #gads-services #gsvc-six .sc-name::before{ display: none; } #gads-services .sv-next-t b::before{ display: none; } /* "Already running Google Ads…" — a module, not a floating card */ .gss-band{ border-color: var(--eg-edge-parent); border-radius: var(--eg-r-parent); box-shadow: var(--eg-shadow-card); } /* packages: the comparison frame is the module; its sticky strip keeps a whisper of shadow only so it reads as lifted when it pins */ .a9-chips{ border-color: transparent; } .v03-frame{ border-radius: var(--eg-r-parent); } .v03-strip{ border-radius: calc(var(--eg-r-parent) - 1px) calc(var(--eg-r-parent) - 1px) 0 0; box-shadow: 0 10px 18px -16px rgba(15, 27, 61, .20); } /* ========================================================================== 7 · ABOUT US ========================================================================== */ /* the 12-tick ruler above every section: an ornament. Its space stays, so the heading does not move. */ .k9-rule{ background-image: none; border-bottom-color: transparent; } #tc-close .k9-rule{ border-bottom-color: transparent; } /* the frames take the module radius. Rails, photos and tinted strips sit at their corners, so the frame clips them to its own shape. */ .k9-frame{ border-radius: var(--eg-r-parent); overflow: clip; } /* ========================================================================== 8 · LEGAL DOCUMENTS ========================================================================== */ /* the preview sheet: paper on a desk, not a floating card */ .w3 .w3-pv-a{ box-shadow: 0 1px 2px rgba(15, 27, 61, .05), 0 8px 18px -14px rgba(15, 27, 61, .16); } /* the white detail panel already stands off its tinted document block — its own border was the third nested box. Transparent, so nothing moves. */ .w3 .w3-detail{ border-color: transparent; } /* the open reference strip is carried by its tint */ .pg .ld-ref[data-open="true"]{ border-color: transparent; } /* the document tabs: a row ground holding 8px chips */ .w3 .w3-rail{ border-radius: var(--eg-r-card); } .w3 .w3-cat{ border-radius: var(--eg-r-chip); } /* ========================================================================== 9 · CONTACT US ========================================================================== */ /* the 2px ink rule under "OUR LOCATIONS" sat directly on the module's own top edge. Transparent keeps its 2px, so nothing below moves. */ .lx-hd{ border-bottom-color: transparent; } /* the ink rules above OFFICE TYPE / MANPOWER */ .lx-f > div{ border-top-color: var(--eg-edge-divider); } /* list markers: neutral, like every other list marker on the site */ .lx-l li::before{ background: var(--ink-4, #A7AEB9); } /* the flow's first step was ringed a step darker than the others */ .px-flow > div:first-child{ border-color: var(--eg-edge-parent); } /* the heading dash on internal-page eyebrows (Legal hero, Contact, Management) */ .fs-who .fs-h > .k-eyebrow::before, .pg .hp-head > .kick::before, .pg .hp-head > .hp-eyebrow::before, .px-sec > .w > .px-eye::before, .lx-head > .px-eye::before{ display: none; } /* ========================================================================== 10 · PHONES Every selector above that a page also sets inside a phone query is restated here, so the page's own phone layout keeps the last word on what it changed — only the edge values come from this system. ========================================================================== */ @media (max-width: 760px){ /* Our Services: the category bar is part of a white sticky strip */ #svc3 .s3-catrail{ background: none; border-color: transparent; border-radius: 0; } #svc3 .s3-catwrap{ border-bottom-color: var(--eg-edge-card); } #svc3 .s3-row{ border-radius: var(--eg-r-parent); } #svc3 .s3-card{ border-radius: var(--eg-r-card); } #svc3 .s3-explore{ border-top-color: var(--eg-edge-divider); } #hp1 .hp-cta{ border-radius: var(--eg-r-parent); } .w3 .w3-row{ border-radius: var(--eg-r-parent); } .w3 .w3-rail{ border-radius: var(--eg-r-card); } .w3 .w3-cat{ border-radius: var(--eg-r-chip); } }