{description}
. The empty H5 will add a line of vertical space and potentially extra margin between the title and the description, making those cards taller and more loosely set than other card grids on the site. Stray editor attribute on home page H1. Two H1/H2 elements on the home page carry xmind-vk-rich-text-fragment-id="..." attributes — residue from pasting from an outliner tool (XMind / Visual Komodo). Harmless functionally but it's dev exhaust that shouldn't be in production. Director cards have inconsistent paragraph markup, which produces visibly different spacing. On /about-us, Darryl Kennedy's bio is one with
between thoughts, while Steve Dennis's bio is three separate
tags. The two cards sit side-by-side, so the paragraph gaps will differ, making one card look more dense than the other.
Both director cards open in a new tab AND carry rel="nofollow noopener". Internal links to /darryl-kennedy and /steve-dennis shouldn't be either. Same pattern on the case study cards on /case-studies — every "Read more" opens in a new tab via target="_blank", which is inconsistent with the rest of the site's internal-link behaviour.
2. The same module appears in two different implementations
Two different blog-card components in use, with different markup and styling hooks.
Home "Our latest thinking" uses hhs-blog-post-card with a hhs-post-feat-img lazy-background div (no element, image set via JS-driven background image) and the reading time as
. That means the same "blog card" between pages will render with different image quality, different reading-time typography (an H6 vs a P at default font sizes), and different lazy-load behaviour. The home cards also have a long inline-style padding override style="padding-bottom: 0px; margin-bottom: 0px;" which the insights cards don't. Two different "client work" card grids with different titling conventions. On /case-studies the cards use long descriptive achievement titles ("Landing Currys' biggest platform change for now and next", "Saving Lovehoney £1.2m through smarter NetSuite testing"). On /what-we-do the same client work appears under short labels ("Salesforce live in record time", "NetSuite-Celigo Integration", "£££s saved in testing"). These need aligning to one voice and naming convention, otherwise the same case study is presented twice on the site with different positioning. The "FLOW step" icon FLOW_icon-01.svg is used as a placeholder for at least six distinct concepts across home, how-we-deliver and about-us (Maintaining quality, Consistent cadence, Clear path to go-live, Clarity Blueprint, Go-Live Certainty, and the FLOW overview). Visually it'll look like the design system never got finished. The Focus / Launch / Optimise / Wrap icons on /how-we-deliver are properly individualised, so the inconsistency is going to be obvious. Main nav and footer nav order disagree. Header: Home › What We Do › How We Deliver › Case Studies › Our Thinking › Careers › About Us › Contact Us. Footer: Home › About Us › What We Do › How We Deliver › The Clarity Blueprint › Case Studies › Our Thinking › Careers › Newsletter Sign Up › Contact Us. About Us is 7th vs 2nd, and the footer surfaces "The Clarity Blueprint" and "Newsletter Sign Up" pages that the header doesn't reference at all. FAQ module is titled differently in each instance. "Spike FAQ" on the home page, "Frequently Asked Questions" on /about-us. Same H3 component, different label. 3. Typography and CSS architecture No desktop heading sizes are defined anywhere in the brand CSS. I downloaded every linked stylesheet: template_spike.min.css — 0 bytes (completely empty file, despite being the named brand override) template_clean-foundation.min.css — 37 KB, contains zero font-size or font-family declarations template_main-head.min.css — 99 KB, has font-size rules for headings only inside @media (max-width: 992px) (h1=50px, h2=33px, h3=27px, h4=23px). There is no equivalent block for desktop. The practical result: desktop heading sizes are browser defaults (h1 ≈ 32px in most browsers), which will differ from the mobile sizes. There's also no system-wide H5/H6 size defined at any breakpoint, so the H5 / H6 used in various cards (reading time, sub-labels) is being styled ad hoc per module. No web font is loaded. No Google Fonts or @font-face rules appear anywhere. The header rules specify font-family: helvetica (lowercase, no fallback chain) in nav and footer. Helvetica isn't installed on Windows by default — Windows users will get the OS fallback (likely Arial), and the lowercase font name + missing fallback also disables proper rendering hints. macOS users see Helvetica; Windows users see something subtly different on every page. Body text uses Helvetica, Arial, sans-serif in one place I found on the home page, which is the correct pattern but isn't applied universally. !important is being used to fight the cascade. 295 occurrences on the home page, 213 on What We Do, 184 on Case Studies, etc. Most are inside HubSpot module overrides. This is a strong signal that modules are being patched in isolation rather than from a central design system. Inline style="..." attributes per page: home 171, what-we-do 125, how-we-deliver 113, about-us 114, case-studies 73, insights 49. A lot of layout decisions are baked into the page content rather than the stylesheet, which is exactly the kind of thing that causes the inconsistencies above. Mixed units across the codebase: heading sizes in px, body in a mix of px, em, rem, and one-offs like 0.95em, 0.88em. No clear scale. 4. Colour palette drift Black is both #000 and #000000 in different places, and formatting varies (color: #000 vs color:#000). White is both #fff and #ffffff. Multiple competing dark colours: #000000, #444444, #555555, #353f4e are all in use. At least one should probably go. HubSpot default cyan #00a4bd appears once on every page, in a leftover style. Unlikely to be a brand colour. Stray red-orange #ff0201 appears once each on What We Do, How We Deliver and About Us — in every case inside the broken "Interested?" CTA span (item 3). The Spike pinks ( #e10098 and #f78fc7) are consistent across pages, which is the bright spot here. 5. Heading hierarchy / accessibility Pages jump from H1 straight to H4 in the hero region. /case-studies, /how-we-deliver, /about-us all use H1 for the page title then H4 for the supporting strapline, skipping H2 and H3. Screen-reader users will navigate as if H2 and H3 don't exist on the page. Heading levels are used for visual styling rather than semantic structure. The "Clarity Commitment" promises on /about-us are H5 ("Be fully honest and transparent...", etc.) but they're list items, not subsections. Stat numbers on /case-studies ("86.2 %", "93.5 %") are split across separate elements with the % on its own line, which won't read correctly to assistive tech. 6. Image and asset issues Empty alt attributes on the 2nd, 3rd, 5th and 6th featured images on /insights. Several other articles' images have alt strings that look auto-generated from the file name (the AEO/SEO article has an extremely long alt string starting "The image depicts a futuristic digital landscape..."). Filenames not normalised: several AI-generated images on /insights still carry their original 100+ character generation prompts as the filename ("The image depicts a futuristic digital landscape with a sleek hightech user interface displaying a search engine results page In the foreground variou-1.png"). These show up in the URL and slow page weight. Insight thumbnails have mixed aspect ratios (16:9, 4:3, square). The card grid likely crops or letterboxes inconsistently. Case study thumbnail alt text is inconsistently capitalised: "Spike-Currys Case Study", "Spike-Currys peak trading case study", "Spike-Lovehoney Case Study". Choose one casing. "NBrown" vs "N Brown" — the card title uses "N Brown" (with a space), the image alt uses "Spike-NBrown" (no space). The client themselves use "N Brown" so the alt should match. 7. Copy and content inconsistencies The Insights section is called three different things: "Our Thinking" in the main nav, "Our latest thinking" on the home page section heading, and "Our Latest Thinking" as the page H1. "Read More" vs "Read more" — the home page latest-thinking cards use "Read more" (sentence case); the Insights index cards use "Read More" (title case). Article title casing on /insights is split between Title Case and sentence case. Around half the articles use one, half use the other. Pick one editorial style and apply it across. Trailing whitespace inside text elements on /case-studies — e.g.
(insights index). Four button variants (primary, secondary, ghost, inverse) plus size modifiers, with proper focus rings. How to roll it out safely Drop the file into HubFS as spike.css. Add it to the page template after template_clean-foundation.min.css and before the HubSpot module CSS files. That order is the reason the rules win against the foundation but lose against modules that already have working styles. Test on a staging page or duplicate first. Some HubSpot modules carry inline font-size overrides with !important (I counted between 158 and 295 per page), so those will need to be cleaned up over time before this file is fully authoritative. Once you're happy, retire the empty template_spike.min.css rather than keeping a dead file in production. A couple of decisions I made that you might want to override I set the desktop H1 at 4rem (64px) and the H2 at 3rem (48px). That's a big jump from the current mobile 50/33px. If you want a more conservative scale, the easy edit is one line per heading inside :root. Headings default to --sp-grey-800 (slate #353f4e) rather than pure black. If you want them pure black, change --sp-grey-800 references in the heading rule, or set color: var(--sp-ink). The pill-shaped buttons (radius 999px) are a choice. Swap --sp-radius-pill for --sp-radius-md in the .sp-btn rule if you'd rather have rounded rectangles. Want me to also draft a short adoption guide for the team (what to use where, with side-by-side before/after examples), or a follow-up patch file that targets the specific HubSpot module class names so we can start retiring inline styles? Spike Code · CSS Spike 2026 Brand Guidelines.pdf pdf Spike colour palette and hex codes 2026.docx docx All hyperlinks are now underlined, I dont want that to happen. Also make sure all colours are from our brand guide 28 May Reconciled brand guidelines with CSS updates for links and colors Reconciled brand guidelines with CSS updates for links and colors Brand guide received. Let me cross-check the colour palette doc against the PDF in case there's anything extra in there, then I'll rebuild the file. Reconciled brand colours and redesigned link styling comprehensively Reconciled brand colours and redesigned link styling comprehensively Good. Colour palette matches the PDF exactly. I have what I need. Updates I'm making: Links: no underline by default. Underline appears on hover for affordance, plus an outline ring on focus for accessibility. Tell me if you want them fully unstyled. Font stack: now leads with Helvetica Neue (your primary) before falling back to Helvetica, Arial, then sans-serif, exactly as the brand guide specifies. Heading weights mapped to the brand spec: H1 uses Black (900), H2/H3 use Bold (700), H4–H6 use Medium (500), body uses Regular (400). Colours: stripped out every non-brand grey and the placeholder pink-hover I'd invented. Only the 10 hex codes from the brand guide (plus white) are in the file now. Where buttons need to darken on hover, I'm using filter: brightness() rather than inventing a new shade, so we stay brand-compliant. Added the full primary palette as tokens (Sky Blue, Teal, Fresh Green, Sea Green) so designers can use them for accents and section variety, with comments noting which pairings the brand guide recommends. Ran 2 commands, created a file Ran 2 commands, created a file Verified. The only hex codes in the file are the 11 from the brand guide (10 named brand colours plus white). Nothing else. Presented file Presented file Quick summary of the changes Links are no longer underlined by default. Hover shows an underline (so users still know it's clickable), and keyboard focus shows an outline ring (accessibility). If you want some links with no hover underline at all, add class="sp-link-bare" on the anchor. If you want links to inherit the surrounding text colour (useful in nav and cards), use class="sp-link-quiet". Font stack is now Helvetica Neue, Helvetica, Arial, sans-serif, matching sections 3.1 and 3.2 of the brand guide. Heading weights match the brand spec: H1 uses Black (900), H2 and H3 use Bold (700), H4–H6 use Medium (500). Body uses Regular (400). Body copy on dark surfaces automatically uses Medium weight to match the brand rule about legibility on dark backgrounds. All 10 brand colours are now in the file as named tokens (--sp-pink, --sp-rhodamine, --sp-sky-blue, --sp-teal, --sp-fresh-green, --sp-sea-green, --sp-charcoal, --sp-blue-grey, --sp-night-black, --sp-lilac-white), plus white. The previous off-brand greys (#444, #555, #777, #c4c4c4, #1a1a1a) are gone. New surface utilities for sections that need a non-default background: .sp-surface-soft, .sp-surface-dark, .sp-surface-ink, .sp-surface-pink, .sp-surface-teal, .sp-surface-seagreen. They automatically flip text colour and weight to the brand pairing rules. Button hovers darken via filter: brightness() rather than a new hex code, so we don't add any colour outside the brand guide. Two judgement calls flagged for you Hover behaviour on links is "show an underline on hover only". If you'd rather there be no underline ever (and rely entirely on colour to indicate links), I can switch the default a:hover rule to keep text-decoration: none. There's an accessibility cost since colour alone is the WCAG minimum but isn't ideal for colour-blind users, but it's your brand. The brand guide doesn't define a button hover shade. I went with filter: brightness(0.88) to darken the rhodamine slightly. If you'd prefer the hover to swap to a different brand colour entirely (say, rhodamine button hovers to teal), I can change it. Want me to tweak either of those, or move on to drafting an adoption guide for the team? Spike Code · CSS Remove underline on all hover, hover shade using filter is fine 28 May Identifying remaining underline instances and comments Identifying remaining underline instances and comments I'll remove all hover underlines. I'll keep the focus-visible outline ring (the 2px solid ring already gives keyboard users a strong indicator without needing an underline), and leave the print stylesheet underlines alone since hover doesn't exist on paper. Viewed 2 files, edited 2 files Viewed 2 files, edited 2 files Now the surface variant link hovers: Viewed 2 files, edited a file Viewed 2 files, edited a file Now let me sweep the whole file to confirm no hover underlines remain anywhere: Identified redundant underline overrides and refined defensive styling comments Identified redundant underline overrides and refined defensive styling comments Only the print rule keeps an underline (intentional, since hover doesn't exist on paper). Let me also tidy a stale comment that referenced the old hover-underline behaviour: Viewed 2 files, edited a file Viewed 2 files, edited a file Now let me also update the v2 changelog at the top of the file to reflect the new hover behaviour: Viewed a file, edited a file Viewed a file, edited a file Final verification: Final check: confirm no hover underlines remain and brand palette is still pristine. Final check: confirm no hover underlines remain and brand palette is still pristine. All clean. The only text-decoration: underline rule left is the print stylesheet one (intentional, with comment explaining why). Brand palette still pristine: 11 hex codes, exactly matching the brand guide. Presented file Presented file What's different in this revision Default link state: rhodamine, no underline. Same as before. Link hover: now darkens via filter: brightness(0.85) (matches the button hover treatment). No underline. Link focus-visible: still shows the 2px rhodamine outline ring with offset, which is a strong accessible focus indicator on its own. No underline. Dark surface links (.sp-surface-dark a, .sp-surface-pink a, etc.) behave the same way: white text, brightness shift on hover, no underline. Anchor-based buttons (a.sp-btn) explicitly hold text-decoration: none as defensive styling. Print stylesheet keeps the underline on a, since users can't hover paper. One small accessibility note WCAG considers using colour alone to convey link state a borderline case. The brand-coloured rhodamine on white passes the colour-contrast threshold for text, so links remain identifiable to most users including those with mild colour-vision deficiency. The focus ring covers keyboard users. The one group this is slightly worse for is sighted users with severe achromatopsia who scan for visual differentiators, where an underline would help. Not a blocker, just worth knowing. Anything else to tweak, or shall I move on to the adoption guide I mentioned earlier? Spike Code · CSS Output the consistency audit to a spreadsheet 29 May Ran 2 commands, viewed a file, created a file Ran 2 commands, viewed a file, created a file Zero formula errors across all 24 formulas. Let me do a quick visual sanity check by rendering page one: Viewed 2 files, ran a command Viewed 2 files, ran a command Severity colour-coding renders correctly with the brand palette (Rhodamine for Critical, Pink for High, Sky Blue for Medium, Fresh Green for Low). The print rendering only shows the first few columns per page, but on screen in Excel/Sheets/Numbers the full row will display side-by-side. Check the brand colours reference sheet. Check the brand colours reference sheet. Status conditional formatting works (the warm red wash on "Open" rows is rendering correctly). Ran a command, read a file Ran a command, read a file What's in the workbook Four sheets, in this order: Overview — title, scope, severity definitions, effort definitions, and a guide to the tabs. Severity legend uses the brand palette (Rhodamine, Pink, Sky Blue, Fresh Green) so the visual coding matches Spike's colours throughout. Findings — all 43 audit items in a filterable table. Columns: ID, Severity, Category, Page(s), Area, Observation, Suggested fix, Effort, Status, Assignee, Notes. Severity and Status cells colour-code automatically as you change the value (conditional formatting), so as the team works through the list it stays visually informative. Summary — live counts by severity, category and status, driven by COUNTIF formulas pointing at the Findings table. If your team edits the Findings sheet (mark items Done, add new ones inside the table), the Summary updates without any intervention. Brand colours — the 10 Spike brand colours plus white, with hex, swatch and personality description, lifted from sections 2.1 and 2.2 of the 2026 Brand Guidelines. Useful as a quick reference for anyone working from this sheet. Notes on choices I used Arial throughout the sheet itself (the xlsx skill recommends Arial for spreadsheets, and it's also the Spike brand fallback typeface, so it's brand-consistent). The Status column uses warm red, amber, green and grey washes for Open/In Progress/Done/Won't Fix. These are deliberately outside the Spike brand palette so workflow status doesn't visually clash with brand colour usage elsewhere on the sheet. There's a comment in the build noting this. Easy to change if you'd rather force them onto brand colours. 43 findings sourced directly from the audit response, with severity assigned by my judgement on user impact, and effort sized to give you a rough order-of-magnitude planning view. The Findings sheet is an actual Excel table (named Findings), so it has auto-filter built in, and you can sort by any column without breaking the Summary formulas. If you want, I can also add a Sprint planning tab that lets you drag findings into Sprint 1 / Sprint 2 / Backlog, or generate an adoption guide for the new spike.css file (with the side-by-side before/after examples I mentioned). Which would be more useful next? Spike website consistency audit Spreadsheet · XLSX Check the Spike css file you created earlier. I need to ensure that default colour for any headings is night black #0f1012 and any paragraph or div text is Charcoal #353F4E 09:15 Identified color variable swap needed for headings and body text Identified color variable swap needed for headings and body text Quick check of the current setup, then I'll make the swap. Identified color variable swaps and refined stylesheet consistency strategically Identified color variable swaps and refined stylesheet consistency strategically Plan: swap the two semantic aliases (the cleanest fix — everything cascades from there), update the blockquote to use the body text token so it stays in sync going forward, and refresh the changelog. The inverse button on line 507 stays as is — that's UI styling, not text colour, and matches white-card-on-dark-section pairings the brand guide describes. Edited 2 files Edited 2 files Now update the changelog at the top so the file is self-documenting: Viewed a file, edited a file Viewed a file, edited a file Final verification that the cascade does what you want: Verified color scheme compliance across all elements Verified color scheme compliance across all elements Confirmed. Tracing the cascade: Element Resolved colour Result h1–h6 (light bg) #0F1012 night black ✓ body, p, div, li, label, input, blockquote, .sp-lead #353F4E charcoal ✓ .sp-meta, .reading-minutes, small #7C98AC blue grey unchanged (was always meta colour) Links #E10098 rhodamine unchanged Buttons, surfaces, focus rings unchanged unchanged Divs without an explicit colour inherit from body, which is now charcoal — so the rule "any paragraph or div text is charcoal" is satisfied by the cascade. Anywhere a heading appears, the explicit h1–h6 rule wins and gives you night black. Presented file Presented file Summary of the change Two semantic alias values swapped at the top of the file (lines 85–86), and the blockquote routed through the body text token so it stays in sync if you ever tweak the colour again. The changelog up top now explicitly records the assignment: Headings (h1–h6) → Night Black #0F1012 Body, paragraphs, divs → Charcoal #353F4E One thing worth flagging: this gives you slightly less contrast between heading and body than the previous setup did (night black headings on a white background are about as dark as it gets, while charcoal body text is a touch lighter). Whether that reads as "intentional hierarchy" or "muddy" depends on the design intent. If after rollout you find the headings don't pop enough against the body text, the fix is one line — switch back to charcoal headings on night black body, or introduce a heavier weight scaling to compensate. Anything else to adjust on the CSS, or shall I move on to the adoption guide? Spike Code · CSS Claude is AI and can make mistakes. Please double-check responses. Spike · CSS /* ========================================================================= spike.css (v2) Spike brand foundation: typography, colour tokens, buttons, links, spacing. Aligned with the Spike 2026 Brand Guidelines. What's changed since v1 - Helvetica Neue is now the primary typeface, with Arial as the documented fallback (per section 3.1 / 3.2 of the brand guide). - Heading weights mapped to the brand spec: H1 Helvetica Neue Black (900) H2 / H3 Helvetica Neue Bold (700) H4 / H5 / H6 Helvetica Neue Medium (500) Body Helvetica Neue Regular (400) - Hyperlinks are never underlined. Hover applies a subtle brightness shift via CSS filter (no underline). Keyboard focus shows an outline ring for accessibility, which is sufficient on its own. - Colour tokens now use only the 10 brand hex values from sections 2.1 and 2.2 of the brand guide, plus white. - Where buttons darken on hover, we use filter: brightness() rather than introducing a non-brand shade. - Text colour assignment on light backgrounds: Headings (h1-h6) Night Black #0F1012 Body, paragraphs, divs Charcoal #353F4E Load order (important) 1. template_clean-foundation.min.css (HubSpot foundation) 2. spike.css (this file) 3. Per-module CSS (HubSpot modules) 4. Inline styles (avoid where possible) Naming convention --sp-* Spike design tokens .sp-btn-* Button classes .sp-link-* Link variants .sp-stack-* Vertical spacing utilities .sp-surface-* Background surfaces Comments use UK English. Two-space indent throughout. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root { /* --- Primary colours (Brand Guide section 2.1) ---------------------- "Bright primary colours should only be used as backgrounds for large headings or illustrations to ensure legibility." Each primary has two shades for contrast and hierarchy. ---------------------------------------------------------------------- */ /* Pink family: Passionate, Confident, Fearless, Energetic */ --sp-pink: #F78FC7; /* PINK (lighter shade) */ --sp-rhodamine: #E10098; /* RHODAMINE (primary accent) */ /* Blue family: Trustworthy, Knowledgeable, Clear */ --sp-sky-blue: #61C9DA; /* SKY BLUE (lighter shade) */ --sp-teal: #0A7F91; /* TEAL (darker shade) */ /* Green family: Friendly, Humble, Genuine */ --sp-fresh-green: #74E3B3; /* FRESH GREEN (lighter shade) */ --sp-sea-green: #208756; /* SEA GREEN (darker shade) */ --sp-white: #FFFFFF; /* Also part of the primary palette */ /* --- Secondary colours (Brand Guide section 2.2) -------------------- Muted complementary tones for structure, hierarchy and balance. "Charcoal, night black, and lilac white can be used as backgrounds or typography interchangeably. Blue grey should be used as an accent colour on white backgrounds to create more hierarchy." ---------------------------------------------------------------------- */ --sp-charcoal: #353F4E; --sp-blue-grey: #7C98AC; --sp-night-black: #0F1012; --sp-lilac-white: #EFEBF2; /* --- Semantic aliases ------------------------------------------------ Use these in component rules instead of the raw colour tokens. Brand guide pairing rules: Lighter shades -> pair with night black or charcoal Darker shades -> pair with white or lilac white ---------------------------------------------------------------------- */ --sp-text: var(--sp-charcoal); /* Body copy on light bg */ --sp-text-heading: var(--sp-night-black); /* Headings on light bg */ --sp-text-muted: var(--sp-blue-grey); /* Meta, captions */ --sp-text-on-dark: var(--sp-lilac-white); /* Body on dark surface */ --sp-text-on-accent: var(--sp-white); /* Body on rhodamine bg */ --sp-bg: var(--sp-white); /* Default page surface */ --sp-bg-soft: var(--sp-lilac-white); /* Subtle section surface*/ --sp-bg-dark: var(--sp-charcoal); /* Dark section surface */ --sp-bg-ink: var(--sp-night-black); /* Deepest surface */ --sp-border: var(--sp-blue-grey); /* Default border colour */ --sp-border-soft: var(--sp-lilac-white); /* Quiet dividers */ --sp-accent: var(--sp-rhodamine); /* Primary accent (links, primary buttons, CTAs)*/ /* --- Typography (Brand Guide section 3.1 / 3.2) --------------------- Primary: Helvetica Neue with weights Regular, Medium, Bold, Black. Fallback: Arial. The system stack below mirrors that hierarchy and adds Windows-safe fallbacks so users without Helvetica Neue installed get Helvetica or Arial rather than a default browser sans. Note on case (brand rule): "Sentence case in all Spike copy." This is a content-side rule; we do not enforce text-transform here because proper nouns and abbreviations need to remain as written. ---------------------------------------------------------------------- */ --sp-font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", -apple-system, BlinkMacSystemFont, sans-serif; --sp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Weights aligned with the brand's four Helvetica Neue cuts */ --sp-weight-regular: 400; /* Bodycopy */ --sp-weight-medium: 500; /* Subheader */ --sp-weight-bold: 700; /* Section Header */ --sp-weight-black: 900; /* Larger Header (H1) */ /* Type scale (desktop). Mobile values set under @media below. */ --sp-size-base: 1rem; /* 16px body */ --sp-size-sm: 0.875rem; /* 14px small, captions */ --sp-size-xs: 0.75rem; /* 12px micro, legal */ --sp-size-lead: 1.25rem; /* 20px lead paragraph */ --sp-size-h1: 4rem; /* 64px */ --sp-size-h2: 3rem; /* 48px */ --sp-size-h3: 2.25rem; /* 36px */ --sp-size-h4: 1.75rem; /* 28px */ --sp-size-h5: 1.375rem; /* 22px */ --sp-size-h6: 1.125rem; /* 18px */ /* Line heights */ --sp-leading-tight: 1.15; /* Display headings */ --sp-leading-snug: 1.25; /* H4 H5 H6 */ --sp-leading-normal: 1.5; /* Body */ --sp-leading-relaxed: 1.65; /* Long-form articles */ /* Letter spacing */ --sp-tracking-tight: -0.01em; --sp-tracking-normal: 0; --sp-tracking-wide: 0.08em; /* --- Spacing scale (8-point baseline) ------------------------------ */ --sp-space-0: 0; --sp-space-1: 0.25rem; /* 4px */ --sp-space-2: 0.5rem; /* 8px */ --sp-space-3: 0.75rem; /* 12px */ --sp-space-4: 1rem; /* 16px */ --sp-space-5: 1.5rem; /* 24px */ --sp-space-6: 2rem; /* 32px */ --sp-space-7: 3rem; /* 48px */ --sp-space-8: 4rem; /* 64px */ --sp-space-9: 6rem; /* 96px */ /* --- Borders, radius, shadows -------------------------------------- */ --sp-radius-sm: 4px; --sp-radius-md: 8px; --sp-radius-lg: 16px; --sp-radius-pill: 999px; --sp-border-thin: 1px solid var(--sp-border); --sp-border-accent: 3px solid var(--sp-pink); --sp-shadow-sm: 0 1px 2px rgba(15, 16, 18, 0.06); --sp-shadow-md: 0 4px 12px rgba(15, 16, 18, 0.10); --sp-shadow-lg: 0 12px 32px rgba(15, 16, 18, 0.14); /* --- Motion -------------------------------------------------------- */ --sp-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --sp-duration-fast: 0.15s; --sp-duration-base: 0.25s; /* --- Layout -------------------------------------------------------- */ --sp-content-max: 1200px; --sp-prose-max: 65ch; /* Comfortable reading width */ } /* ------------------------------------------------------------------------- 2. Reset and base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sp-font-sans); font-size: var(--sp-size-base); font-weight: var(--sp-weight-regular); line-height: var(--sp-leading-normal); color: var(--sp-text); background-color: var(--sp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: 0; border-top: var(--sp-border-thin); margin: var(--sp-space-7) 0; } /* ------------------------------------------------------------------------- 3. Typography ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-space-4) 0; font-family: var(--sp-font-sans); color: var(--sp-text-heading); line-height: var(--sp-leading-tight); letter-spacing: var(--sp-tracking-tight); } /* Brand weights: Black for H1, Bold for H2/H3, Medium for H4-H6. */ h1 { font-size: var(--sp-size-h1); font-weight: var(--sp-weight-black); } h2 { font-size: var(--sp-size-h2); font-weight: var(--sp-weight-bold); } h3 { font-size: var(--sp-size-h3); font-weight: var(--sp-weight-bold); } h4 { font-size: var(--sp-size-h4); font-weight: var(--sp-weight-medium); line-height: var(--sp-leading-snug); letter-spacing: var(--sp-tracking-normal); } h5 { font-size: var(--sp-size-h5); font-weight: var(--sp-weight-medium); line-height: var(--sp-leading-snug); letter-spacing: var(--sp-tracking-normal); } h6 { font-size: var(--sp-size-h6); font-weight: var(--sp-weight-medium); line-height: var(--sp-leading-snug); letter-spacing: var(--sp-tracking-normal); } /* Suppress empty headings (covers the 12 empty
tags on the What We Do page until the CMS content is cleaned out). */ h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty { display: none; } p { margin: 0 0 var(--sp-space-4) 0; font-size: var(--sp-size-base); line-height: var(--sp-leading-relaxed); color: var(--sp-text); max-width: var(--sp-prose-max); } /* Lead paragraph (use under H1 for intros) */ .sp-lead, p.sp-lead { font-size: var(--sp-size-lead); font-weight: var(--sp-weight-medium); color: var(--sp-text); line-height: var(--sp-leading-normal); max-width: var(--sp-prose-max); } /* Reading time, captions, small print */ .sp-meta, .reading-minutes, small { font-size: var(--sp-size-sm); color: var(--sp-text-muted); font-weight: var(--sp-weight-medium); letter-spacing: var(--sp-tracking-wide); text-transform: uppercase; } /* Reading minutes specifically. Forces consistent rendering whether the markup is h6 (home cards) or p (insights index). */ .reading-minutes { margin: 0 0 var(--sp-space-2) 0; font-family: var(--sp-font-sans); line-height: 1; } strong, b { font-weight: var(--sp-weight-bold); } em, i { font-style: italic; } /* Lists */ ul, ol { margin: 0 0 var(--sp-space-4) 0; padding-left: var(--sp-space-5); } li { font-size: var(--sp-size-base); line-height: var(--sp-leading-relaxed); margin-bottom: var(--sp-space-2); } li::marker { color: var(--sp-rhodamine); } /* Blockquote */ blockquote, blockquote p { margin: var(--sp-space-6) 0; padding-left: var(--sp-space-5); border-left: var(--sp-border-accent); font-size: var(--sp-size-lead); font-style: normal; font-weight: var(--sp-weight-regular); color: var(--sp-text); line-height: var(--sp-leading-snug); max-width: var(--sp-prose-max); } /* Code */ code, kbd, samp, pre { font-family: var(--sp-font-mono); font-size: 0.9em; } code { background: var(--sp-lilac-white); padding: 0.1em 0.35em; border-radius: var(--sp-radius-sm); } pre { background: var(--sp-lilac-white); padding: var(--sp-space-4); border-radius: var(--sp-radius-md); overflow-x: auto; line-height: var(--sp-leading-normal); } pre code { background: transparent; padding: 0; } /* ------------------------------------------------------------------------- 4. Links Default: no underline. Colour alone (rhodamine on light backgrounds, white on dark backgrounds) distinguishes links from body text. Hover: colour shifts slightly (brightness filter) but no underline. Focus-visible: outline ring for keyboard users (the ring alone is a strong, accessible focus indicator; no underline needed). ------------------------------------------------------------------------- */ a { color: var(--sp-rhodamine); text-decoration: none; transition: color var(--sp-duration-fast) var(--sp-ease), text-decoration-color var(--sp-duration-fast) var(--sp-ease); } a:hover { filter: brightness(0.85); } a:focus-visible { outline: 2px solid var(--sp-rhodamine); outline-offset: 3px; border-radius: var(--sp-radius-sm); } /* Quiet link variant: inherits parent colour. For cards, nav items. */ .sp-link-quiet { color: inherit; text-decoration: none; } .sp-link-quiet:hover, .sp-link-quiet:focus-visible { color: var(--sp-rhodamine); } /* Bare link: no hover underline either. Use sparingly. */ .sp-link-bare, .sp-link-bare:hover, .sp-link-bare:focus-visible { text-decoration: none; } /* Arrow link: standalone link with an arrow that slides on hover */ .sp-link-arrow::after { content: " \2192"; display: inline-block; transition: transform var(--sp-duration-fast) var(--sp-ease); } .sp-link-arrow:hover::after, .sp-link-arrow:focus-visible::after { transform: translateX(3px); } /* ------------------------------------------------------------------------- 5. Buttons Hover darkening uses filter: brightness() rather than a new colour, so the file stays compliant with the brand guide colour palette. ------------------------------------------------------------------------- */ .sp-btn, button.sp-btn, a.sp-btn, input[type="button"].sp-btn, input[type="submit"].sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2); font-family: var(--sp-font-sans); font-size: var(--sp-size-base); font-weight: var(--sp-weight-bold); line-height: 1; padding: 0.85rem 1.75rem; border-radius: var(--sp-radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; text-align: center; letter-spacing: 0.01em; transition: background-color var(--sp-duration-base) var(--sp-ease), border-color var(--sp-duration-base) var(--sp-ease), color var(--sp-duration-base) var(--sp-ease), transform var(--sp-duration-fast) var(--sp-ease), filter var(--sp-duration-base) var(--sp-ease), box-shadow var(--sp-duration-base) var(--sp-ease); } /* Defensive: keep anchor-based buttons unstyled regardless of any inherited link underline behaviour. */ a.sp-btn:hover, a.sp-btn:focus-visible { text-decoration: none; } .sp-btn:focus-visible { outline: 2px solid var(--sp-rhodamine); outline-offset: 3px; } .sp-btn:active { transform: translateY(1px); } /* Primary: solid rhodamine. Pair with white text (brand pairing rule). */ .sp-btn-primary { background-color: var(--sp-rhodamine); color: var(--sp-white); border-color: var(--sp-rhodamine); } .sp-btn-primary:hover, .sp-btn-primary:focus-visible { filter: brightness(0.88); box-shadow: var(--sp-shadow-md); color: var(--sp-white); } /* Secondary: outline rhodamine. Fills on hover. */ .sp-btn-secondary { background-color: transparent; color: var(--sp-rhodamine); border-color: var(--sp-rhodamine); } .sp-btn-secondary:hover, .sp-btn-secondary:focus-visible { background-color: var(--sp-rhodamine); color: var(--sp-white); } /* Ghost: text-only button for tertiary actions */ .sp-btn-ghost { background-color: transparent; color: var(--sp-text); border-color: transparent; padding-left: var(--sp-space-3); padding-right: var(--sp-space-3); } .sp-btn-ghost:hover, .sp-btn-ghost:focus-visible { color: var(--sp-rhodamine); background-color: var(--sp-lilac-white); } /* Inverse: for dark backgrounds. White surface with charcoal text. */ .sp-btn-inverse { background-color: var(--sp-white); color: var(--sp-charcoal); border-color: var(--sp-white); } .sp-btn-inverse:hover, .sp-btn-inverse:focus-visible { background-color: var(--sp-rhodamine); color: var(--sp-white); border-color: var(--sp-rhodamine); } /* Size modifiers */ .sp-btn-sm { font-size: var(--sp-size-sm); padding: 0.6rem 1.25rem; } .sp-btn-lg { font-size: var(--sp-size-lead); padding: 1.1rem 2.25rem; } /* Disabled state */ .sp-btn[disabled], .sp-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ------------------------------------------------------------------------- 6. Forms ------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], textarea, select { font-family: var(--sp-font-sans); font-size: var(--sp-size-base); line-height: var(--sp-leading-normal); color: var(--sp-text); background-color: var(--sp-white); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 0.65rem 0.9rem; width: 100%; transition: border-color var(--sp-duration-fast) var(--sp-ease), box-shadow var(--sp-duration-fast) var(--sp-ease); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--sp-rhodamine); box-shadow: 0 0 0 3px rgba(225, 0, 152, 0.18); } label { display: block; font-size: var(--sp-size-sm); font-weight: var(--sp-weight-bold); color: var(--sp-text); margin-bottom: var(--sp-space-2); } /* ------------------------------------------------------------------------- 7. Spacing utilities ------------------------------------------------------------------------- */ /* Stack: consistent vertical spacing between direct children. */ .sp-stack-2 > * + * { margin-top: var(--sp-space-2); } .sp-stack-3 > * + * { margin-top: var(--sp-space-3); } .sp-stack-4 > * + * { margin-top: var(--sp-space-4); } .sp-stack-5 > * + * { margin-top: var(--sp-space-5); } .sp-stack-6 > * + * { margin-top: var(--sp-space-6); } .sp-stack-7 > * + * { margin-top: var(--sp-space-7); } /* Section padding (use on top-level