/* ========================================================================== DIGITAL MARKETING DOCTOR — SHARED DESIGN SYSTEM ========================================================================== One visual language for every page that is not the homepage. Source of truth: index.html. Every value below was read off the live homepage — its :root, its section headers (#svc3, #ss1, #wcu8, #indwork, #about5, #faq10) and its footer (#sfoot). The homepage is the reference; it does not load this file and is not changed by it. How it wins: this stylesheet is the LAST one in the of each page, so where a page already declares the same selector at the same specificity, this file settles it. Where a page's rule is more specific, the bridge below repeats that page's own selector rather than inventing a stronger one, so nothing is forced with !important. Light-theme rule: nothing in here paints a large surface darker than #EDF2F9. Sections that used near-black or navy grounds are converted in section 9 to a white / off-white / brand-tinted equivalent. Layout: 1 · tokens 6 · buttons 2 · type scale 7 · cards 3 · baseline 8 · tags, tabs, rows 4 · section heads 9 · light conversions 5 · surfaces 10 · phones ========================================================================== */ /* ========================================================================== 1 · TOKENS — index.html :root, verbatim ========================================================================== */ :root{ color-scheme: light; /* spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ink and paper */ --paper: #FFFFFF; --ink: #0B0D12; --ink-2: #3A414C; --ink-3: #767E8B; --ink-4: #A7AEB9; --line: #E3E6EB; --line-2: #EFF1F4; --line-b: #DEE5F1; --gridline: rgba(11,13,18,.028); /* the light ground ladder — the only backgrounds a section may take. paper → pale → mist → ground → ground-2, plus the brand tint. */ --pale: #FCFDFF; --mist: #F6F8FC; --ground: #F4F7FC; --ground-2: #EDF2F9; --ds-tint: #EEF4FE; /* brand-tinted band */ --ds-tint-2: #F5F9FF; --ds-edge: #CFE0FD; /* the hairline that goes with --ds-tint */ /* Google's bright four — solid shapes only */ --g-blue-b: #4285F4; --g-red-b: #EA4335; --g-yellow-b: #FBBC04; --g-green-b: #34A853; /* Google's darker text variants — wherever colour carries words */ --g-blue: #1A73E8; --g-red: #D93025; --g-yellow: #E37400; --g-green: #188038; --accent: var(--g-blue); /* actions, links, the full stop */ --accent-ink: #1663CE; /* the one hover step under --accent */ --accent-soft: #EAF1FE; /* the selected-state ground */ /* the DMD logo's own two colours. --navy is a TEXT colour on internal pages; it is never a section background here. */ --brand: #0B57F5; --navy: #0F1B3D; --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r-xl: 26px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 9px; --shadow-s: 0 1px 2px rgba(11,13,18,.035), 0 6px 18px rgba(15,27,61,.045); --shadow-m: 0 2px 6px rgba(11,13,18,.045), 0 16px 36px rgba(15,27,61,.085); --shadow-l: 0 2px 8px rgba(11,13,18,.05), 0 26px 60px -18px rgba(15,27,61,.16); --ease: cubic-bezier(.4,0,.2,1); /* the one content width and edge inset the whole site shares */ --pad: clamp(18px, 4vw, 72px); --gut: 18px; --barh: 66px; --maxw: clamp(1280px, 80vw, 1920px); --grid-edge: max(var(--pad), calc((100% - var(--maxw)) / 2)); } /* ========================================================================== 2 · TYPE SCALE -------------------------------------------------------------------------- The homepage runs two heading scales, not one: a large scale for the sections that open a subject (#ss1 "Success Stories." 76/45px, #wcu8, #indwork, #about5) and a smaller one for blocks inside a section (#svc3's per-service h2 at 38/27px, #faq10 at 38px). Internal pages get the same two steps, pulled in a little because their pages are denser than the homepage's: desktop 1440 phone 390 homepage --ds-h2 section 69px 43px 72–76 / 45 --ds-h3 block 36px 25px 38 / 27 --ds-h4 card 17.5px 16.5px 17 Hero headlines are deliberately NOT in this table. Each page's hero is height-tuned so it clears its own first screen, and the family resemblance there comes from weight, tracking and leading, which section 3 sets for every heading on the page. ========================================================================== */ /* -------------------------------------------------------------------------- THE LADDER, RESET 2026-09-02. It was --ds-h2: clamp(34px, 4.8vw, 70px) — 69px at 1440 and 44px on a 390px phone. Three things were wrong with that: · a section head at 69px is within 13px of the hero H1 on every internal page, so nothing on the page was clearly the most important thing; · it cost roughly 330px of screen before any content, three or four times per page — about-us ran to 8246px, legal to 5708px; · at 44px on a phone a five-word heading took most of the first screen. The new ladder is the one approved on google-ads.html: a section head is now a clear step BELOW the hero, and a block head a clear step below that. Sizes only — weight, colour and the accent full stop are unchanged, so every page keeps its voice. was (1440 / 390) now (1440 / 390) --ds-h2 69px / 44px 44px / 28px --ds-h3 36px / 31px 28px / 22px -------------------------------------------------------------------------- */ :root{ --ds-h2: clamp(27px, 3.05vw, 44px); --ds-h3: clamp(19px, 1.95vw, 28px); --ds-h4: clamp(16px, 1.2vw, 17.5px); --ds-h2-lh: 1.02; --ds-h2-ls: -.042em; --ds-h3-lh: 1.08; --ds-h3-ls: -.04em; /* the eyebrow — mono, accent, .24em, 11px, weight 500 */ --ds-eye: 11px; --ds-eye-track: .24em; /* the standing paragraph: #ss1 .ss-sub / #wcu8 .wt-sub */ --ds-sub: clamp(15px, 1.15vw, 17px); --ds-sub-lh: 1.58; /* the section rhythm: #indwork / #ss1 */ --ds-sec-pt: clamp(40px, 5.4vw, 80px); --ds-sec-pb: clamp(48px, 5.4vw, 88px); } /* ========================================================================== 3 · BASELINE — one font stack, one heading voice, one paragraph ========================================================================== */ body{ font-family: var(--sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } /* every heading on every page is the homepage's heavy, tightly tracked, balanced sans. Sizes stay with whichever rule owns them. */ h1, h2, h3, h4{ font-weight: 800; letter-spacing: -.04em; text-wrap: balance; } /* the accent full stop — . — the homepage's signature */ h1 i, h2 i, h3 i, h4 i{ font-style: normal; color: var(--accent); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================================== 4 · SECTION HEADERS — the per-page bridge -------------------------------------------------------------------------- Each page named its own header parts. Rather than re-tag the markup, the page's own selectors are pointed at the tokens above, so all four pages open a section with the identical eyebrow, headline and sub. Alignment is left where each page already chose it. The homepage's own logic is followed: centred for a section that introduces or reassures, left for service detail, lists, teams, processes and reference content. ========================================================================== */ /* ---- the eyebrow: mono · 11px · .24em · accent -------------------------- */ .eyebrow, /* google-ads, our-management */ .k-eyebrow, /* gads-services / mgmt shared header */ .px-eye, /* contact-us */ .pg .kick, .pg .hp-eyebrow{ /* legal-documents */ margin: 0; font-family: var(--mono); font-size: var(--ds-eye); letter-spacing: var(--ds-eye-track); text-transform: uppercase; font-weight: 500; /* neutral, 2026-09-08. A tracked 11px mono label is already quiet; the hue was doing no work and put a blue mark at the head of every section on every page. The hero below keeps the one deliberate blue. */ color: var(--ink-2); } /* the hero keeps the logo's own blue, as on the Google Ads hero today */ .hero .eyebrow, .hero .k-eyebrow{ color: var(--brand); } /* ---- the section headline ---------------------------------------------- */ .head h2, /* google-ads */ .k-h2, .sv-head .k-h2, /* gads-services / our-management */ .px-h2, /* contact-us */ .pg .hp-h{ /* legal-documents */ margin-top: .4em; font-size: var(--ds-h2); font-weight: 800; letter-spacing: var(--ds-h2-ls); line-height: var(--ds-h2-lh); color: var(--ink); text-wrap: balance; } /* a second header inside the same page steps down one level, the way #faq10 steps down from #ss1 on the homepage */ .pg .hp-head.is-sm .hp-h, .pg .s2-h h2, .pg .s3 h2, /* legal: document + verification blocks */ .lv-t, /* our-management: the three team levels */ .sy-close h3{ /* our-management: the closing block */ font-size: var(--ds-h3); font-weight: 800; letter-spacing: var(--ds-h3-ls); line-height: var(--ds-h3-lh); color: var(--ink); } /* an FAQ, and any block that is really a list of rows, takes the second step — the homepage does the same thing with #faq10, which sits at 38px between two 76px neighbours. */ #answers .px-h2, /* contact-us: "Asked often enough…" */ #gafaq .faq-head h2{ /* google-ads (dead, kept) */ font-size: var(--ds-h3); letter-spacing: var(--ds-h3-ls); line-height: var(--ds-h3-lh); } /* legal set these two in navy at weight 760 — brought back to the site's ink and the site's weight so a heading reads the same on every page */ .pg h1{ font-weight: 800; letter-spacing: -.045em; color: var(--ink); } /* ---- the sub that follows a headline ----------------------------------- */ .head .sub, .k-sub, .px-p, .pg .lede, .pg .hp-sub, .pg .s2-h > p, .pg .s2-h div > p{ margin-top: clamp(14px, 1.6vw, 20px); font-size: var(--ds-sub); line-height: var(--ds-sub-lh); color: var(--ink-2); } /* the homepage holds its sub to 52ch so a centred header stays a block and not a banner. Left-aligned reference copy is allowed to run longer. */ .head.center .sub, .pg .hp-sub{ max-width: 52ch; } .k-sub, .px-p, .pg .lede{ max-width: 56ch; } /* ========================================================================== 5 · SURFACES — the alternating light grounds, and the footer -------------------------------------------------------------------------- The homepage changes ground to say a new subject has begun, and never uses more than the ladder in section 1. Every alternating band on every internal page is pinned to the same two values so the rhythm reads the same from page to page. ========================================================================== */ .sec.tint, .px-sec-alt, .pg .s-alt{ background: var(--ground); } .sec.tint-2{ background: var(--ground-2); } .sec.line-top, .px-sec-alt{ border-top: 1px solid var(--line-b); } .px-sec-alt{ border-bottom: 1px solid var(--line-b); } /* the footer is the homepage's, on every page: the --ground band with a hairline over it. google-ads and our-management were white. */ #sfoot{ background: var(--ground); border-top: 1px solid var(--line-b); } /* The footer's REACH US column pushed the whole PAGE 27px wider than the viewport between about 1000px and 1100px: `info@digitalmarketingdoctor.com` is 228px of unbreakable text, and the column it sits in had `min-width` at its `auto` default, so the grid track refused to go below the address's own min-content and the document overflowed sideways. Only contact-us hit it, because the other pages print the shorter placeholder address — which is exactly why it went unnoticed. Found 2026-09-02. */ #sfoot .f-ci{ min-width: 0; } #sfoot .f-ci a, #sfoot .f-ci span{ min-width: 0; overflow-wrap: anywhere; } /* the section rhythm — #indwork and #ss1 on the homepage */ .sec{ padding-block: var(--ds-sec-pt) var(--ds-sec-pb); } /* ---- one content lane for the whole site ------------------------------- */ /* google-ads pinned its lane at 1240px while every other page followed --maxw, so its sections were narrower than the same sections elsewhere at wide viewports (1240 against 1536 at 1920). The two deliberately narrow lanes, .wrap-nar and .wrap-mid, are left alone. */ .wrap{ width: min(var(--maxw), 100% - (2 * var(--pad))); } /* ---- the alternating grounds, per page --------------------------------- */ /* The homepage changes ground once per subject and never twice in a row. The Google Ads client rail gets the one band that separates the hero from the services below it — the same move #ss1 makes on the homepage. */ #q7{ /* google-ads: the client rail */ background: var(--ground); border-block: 1px solid var(--line-b); } /* ========================================================================== 6 · BUTTONS -------------------------------------------------------------------------- The homepage has exactly three, and no page needs a fourth: primary solid --accent, white text, hover --accent-ink ghost white, 1px --line-b, ink text, hover --mist pill white, 1px --accent, accent text, hover --accent-soft (#ss1 "View All Success Stories") Radius is 8–13px on a rectangular action and 999px on a pill, both of which the homepage already uses; nothing here rounds anything new. ========================================================================== */ .btn, .px-btn-p, .barbtn, .pg .s3-cta, .pg .ld-act-b[data-kind="view"], .pg .ld-form-go{ background: var(--accent); color: #fff; font-weight: 650; border-color: transparent; transition: background .18s var(--ease), transform .12s var(--ease); } .btn:hover, .px-btn-p:hover, .barbtn:hover, .pg .s3-cta:hover, .pg .ld-act-b[data-kind="view"]:hover, .pg .ld-form-go:hover{ background: var(--accent-ink); } /* secondary action — white with the site hairline, never a dark fill */ .btn.ghost, .px-btn-o, .pg .ld-act-b[data-kind="ask"], .pg .ld-act-b[data-kind="ghost"]{ background: var(--paper); color: var(--ink); border: 1px solid var(--line-b); } .btn.ghost:hover, .px-btn-o:hover, .pg .ld-act-b[data-kind="ask"]:hover, .pg .ld-act-b[data-kind="ghost"]:hover{ background: var(--mist); border-color: var(--ds-edge); } /* the accent pill the homepage ends a section on */ .pg .hp-all{ border: 1px solid var(--accent); border-radius: 999px; background: var(--paper); color: var(--accent); font-weight: 650; } .pg .hp-all:hover{ background: var(--accent-soft); } /* a text action is the accent, never an underline by default */ .btn.link{ color: var(--accent); font-weight: 650; } /* ========================================================================== 7 · CARDS — one radius family, one hairline, one lift -------------------------------------------------------------------------- The homepage's card is white on a light ground, --line-b hairline, --r-lg or --r-md radius, --shadow-s at rest and --shadow-m on hover with a 3px rise. Contact's cards carried their own hairline (#E7EBF2) and a much deeper drop shadow; both are brought back to the site's. ========================================================================== */ .px-ans, .px-card, .px-ch > *, .pg .hp-card{ border-color: var(--line-b); } .px-ans{ border-radius: var(--r-lg); box-shadow: var(--shadow-m); } .card, .px-card{ border-radius: var(--r-md); box-shadow: var(--shadow-s); } /* contact declared its own hairline token; point it at the site's so every rule that already uses it inherits the change */ .v05{ --line-s: var(--line-b); } /* ========================================================================== 8 · TAGS, TABS AND EXPANDABLE ROWS -------------------------------------------------------------------------- The homepage's selected state is a soft accent ground with accent text (#svc3 .s3-cat[aria-current]) — never a dark fill. The rule matters most on a phone, where the chip and the panel it opens have to read as one surface (the selected chip keeps the accent edge that the open card below it also carries). ========================================================================== */ .px-sugs button.is-on, .pg .hp-seg button[aria-pressed="true"]{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; } .px-sugs button:hover{ border-color: var(--ds-edge); color: var(--accent); background: var(--ds-tint-2); } /* an expandable row opens on the accent, the way #faq10 and #wcu8 do */ .px-q.is-open button svg, .px-q.is-open > button{ color: var(--accent); } /* ========================================================================== 9 · LIGHT CONVERSIONS -------------------------------------------------------------------------- Every dark surface on an internal page, rewritten light while keeping the same emphasis. Contrast is checked against #0B0D12 / #3A414C on the new ground, all of which clear AA comfortably. contact-us #start was #101828 full-bleed → --tint band, ink headline legal buttons were --navy fills → handled in section 6 ========================================================================== */ .px-final{ background: var(--ds-tint); border-top: 1px solid var(--ds-edge); border-bottom: 1px solid var(--ds-edge); color: var(--ink); } .px-final h2{ color: var(--ink); font-size: var(--ds-h2); letter-spacing: var(--ds-h2-ls); line-height: var(--ds-h2-lh); } .px-final h2 i{ color: var(--accent); } /* the closing band was the one section on contact-us with no eyebrow at all. `.px-final p` above is 0-2-0 and reaches it, so the eyebrow has to be restated here rather than merely spaced. */ .px-final .px-eye{ margin: 0 0 .5em; max-width: none; font-family: var(--mono); font-size: var(--ds-eye); letter-spacing: var(--ds-eye-track); text-transform: uppercase; font-weight: 500; line-height: 1.2; color: var(--ink-2); } .px-final h2{ margin-top: 0; } .px-final p{ color: var(--ink-2); font-size: var(--ds-sub); line-height: var(--ds-sub-lh); } /* the two actions that sat on the dark band get the site's real buttons */ .px-final .px-btn-o{ background: var(--paper); color: var(--ink); border-color: var(--line-b); } .px-final .px-btn-o:hover{ background: var(--mist); border-color: var(--ds-edge); } /* .final and #gafaq are components lifted out of this page — the CSS is still here, the markup is not. Both were converted at source on 2026-08-30; these lines stay as a guard, so a paste from an older copy of the file cannot put a dark band back. */ .final{ background: var(--ds-tint); color: var(--ink); border-top: 1px solid var(--ds-edge); } .final h2{ color: var(--ink); } .final .sub{ color: var(--ink-2); } .final .microline{ color: var(--ink-3); } .final .microline b{ color: var(--g-green); } #gafaq .faq-aside{ background: var(--ds-tint); border-right: 1px solid var(--ds-edge); } #gafaq .faq-eyebrow{ color: var(--ink-2); } #gafaq .faq-msg{ color: var(--ink); } #gafaq .faq-cta{ color: var(--accent); } /* ========================================================================== 9b · THE HEADER, ON THE SMALLEST PHONE -------------------------------------------------------------------------- Ported verbatim from index.html's own "0b" rule. The homepage's header already shrinks its wordmark and its action below 400px; the internal pages did not, so at 360px the Google Ads page's bar ran 26px past the screen edge and its action was cut off. Same header, same behaviour. ========================================================================== */ .wm{ flex: 0 1 auto; min-width: 0; overflow: hidden; } .baract{ flex: none; } @media (max-width: 400px){ .bar{ padding: 12px 12px; gap: 8px; } .wm{ font-size: 13.5px; } .mark{ width: 28px; height: 28px; margin-right: 8px; } .baract{ gap: 6px; margin-left: 6px; } .barbtn{ display: inline-flex; align-items: center; height: 33px; padding: 0 11px; font-size: 12px; } .barmenu{ width: 33px; height: 33px; } } /* ========================================================================== 10 · PHONES — the primary experience -------------------------------------------------------------------------- The homepage's mobile story layer: one 18px gutter for the whole page, one ground per section, and a heading scale that stays large enough to own the screen (#ss1 renders at 45px on a 390px phone, not 25px). ========================================================================== */ @media (max-width: 860px){ :root{ /* 11.2vw put a section head at 44px on a 390px screen. The heading is still the loudest thing on a phone at 28px, and now the sentence under it and the content below it get to be on the screen at the same time. */ --ds-h2: clamp(25px, 7.1vw, 32px); --ds-h3: clamp(18px, 5vw, 22px); --ds-h4: clamp(15.5px, 4.4vw, 17px); --ds-h2-lh: 1.04; --ds-h3-lh: 1.12; --ds-sub: 15px; --ds-sub-lh: 1.52; /* the homepage's own phone rhythm: 50px in, 54px out */ --ds-sec-pt: 50px; --ds-sec-pb: 54px; --pad: var(--gut); } /* a headline that has to break is allowed to; nothing is clipped. #gads-services .sv-head .k-h2 is the page's own phone rule, repeated here at the same weight so the shared scale is what applies. */ .head h2, .k-h2, .px-h2, .pg .hp-h{ max-width: none; } #gads-services .sv-head .k-h2{ max-width: none; font-size: var(--ds-h2); letter-spacing: var(--ds-h2-ls); line-height: var(--ds-h2-lh); } /* the sub sits closer to its headline on a phone */ .head .sub, .k-sub, .px-p, .pg .lede, .pg .hp-sub{ margin-top: 13px; max-width: none; } /* a section owns its screen: its ground runs edge to edge and the boundary between two sections is a real hairline, not a guess */ .sec.tint, .sec.tint-2, .px-sec-alt, .px-final{ border-top: 1px solid var(--line-b); } /* a selected chip and the panel it opens stay one surface */ .px-sugs button.is-on{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } }