/* Wordnerds site — universal CSS Section scaffold: .wn-section / .wn-container / .wn-grid / .wn-col-* (Grid System Phase 0d) Typography: --fs-* Utopia tokens from tokens.css Spacing: --space-* Utopia tokens from tokens.css NOTE: The legacy --space-xs/sm/md/lg/xl local variables have been removed. They shadowed the Utopia --space-* tokens from tokens.css — see GRID.md §8. Phase 6: refactor inline CSS to linked stylesheets for Astro. */ /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--wn-font-regular); font-size: var(--fs-base); color: var(--wn-dark-grey); line-height: 1.65; background: var(--wn-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } figure { margin: 0; } a { color: inherit; text-decoration: none; } ::selection { background: var(--wn-brand-yellow); color: var(--wn-off-black); } /* ── Scrollbars ──────────────────────────────────────────────── Restrained, brand-aware version of the platform's branded scrollbars (DESIGN inheritance). Mouse devices only — touch keeps its native overlay scrollbars. Thin neutral thumb by default; brand-yellow on hover. */ @media (pointer: fine) { html { scrollbar-width: thin; scrollbar-color: var(--wn-border-grey) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--wn-border-grey); border-radius: var(--wn-radius-pill); border: 3px solid transparent; /* inset → ~4px visible thumb */ background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--wn-brand-yellow); background-clip: padding-box; } } /* ── Typography ─────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--wn-font-rounded); line-height: 1.1; font-weight: 700; color: var(--wn-off-black); } .wn-section--dark h1, .wn-section--dark h2, .wn-section--dark h3, .wn-section--dark h4 { color: var(--wn-white); } h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-l); letter-spacing: -0.025em; line-height: 1.05; font-weight: 800; } h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-l); letter-spacing: -0.025em; line-height: 1.05; font-weight: 800; max-width: 20ch; } h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2xs); font-weight: 700; letter-spacing: -0.005em; } h4 { font-size: var(--fs-sm); } p { margin-bottom: var(--space-s); max-width: 68ch; } p:last-child { margin-bottom: 0; } .eyebrow, .promo-band__kicker { display: inline-block; font-family: var(--wn-font-regular); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wn-brand-blue); margin-bottom: var(--space-s); } .wn-section--dark .eyebrow, .wn-section--dark .promo-band__kicker { color: var(--wn-brand-yellow); } /* Never brand-blue on a yellow surface — fails contrast (Pete, 2026-06-22). Covers the PromoBand kicker too (it's an .eyebrow alias but the override has to name it, or it keeps the blue base colour on the yellow band). */ .wn-section--yellow .eyebrow, .wn-section--yellow .promo-band__kicker { color: var(--wn-off-black); } /* Answer-capsule = the section's lead/thesis paragraph after H2. Standardised 2026-05-28: same colour as body text; bigger size + italic for hierarchy; yellow left border as the consistent "this is the lede" marker. Applies globally — problem-elaboration, consumption-split, proof-outcome, wherever a capsule sits between H2 and body. */ /* ── SECTION SUBTITLE — canonical treatment (PATTERNS.md §11.1) ── A section subtitle (the lede line under the

) is ALWAYS italic and never raw body text. Two treatments, by the section header's alignment: • LEFT-header sections → italic + yellow bar (the answer-capsule look). Every left-header subtitle class is listed below so it inherits it. • CENTRED-header sections → italic, NO bar (a yellow bar reads wrong under a centred title) — see the .walkthrough/.step-cards/.framework-layers rule. When adding a template with a subtitle, add its `__intro` class to whichever group matches its header alignment. Do not leave a subtitle class unstyled. */ .answer-capsule, .guide-proof__intro, .pricing-tiers__intro, .presenters__intro, .related-webinars__intro, .resource-cards__intro, .stat-band__intro, .testimonial-pair__intro, .integrations__intro { font-size: var(--fs-md); font-style: italic; color: var(--wn-dark-grey); border-left: 3px solid var(--wn-brand-yellow); padding-left: var(--space-s); margin-bottom: var(--space-l); max-width: 68ch; line-height: 1.55; } .wn-section--dark .answer-capsule, .wn-section--dark .guide-proof__intro, .wn-section--dark .pricing-tiers__intro, .wn-section--dark .presenters__intro, .wn-section--dark .related-webinars__intro, .wn-section--dark .resource-cards__intro, .wn-section--dark .stat-band__intro, .wn-section--dark .testimonial-pair__intro, .wn-section--dark .integrations__intro { color: var(--wn-white); border-color: var(--wn-brand-blue); } .wn-section--yellow .answer-capsule, .wn-section--yellow .guide-proof__intro, .wn-section--yellow .pricing-tiers__intro, .wn-section--yellow .presenters__intro, .wn-section--yellow .related-webinars__intro, .wn-section--yellow .resource-cards__intro, .wn-section--yellow .stat-band__intro, .wn-section--yellow .testimonial-pair__intro, .wn-section--yellow .integrations__intro { color: var(--wn-off-black); border-color: var(--wn-off-black); } /* Centred-header section subtitles → italic, no bar (PATTERNS §11.1). */ .walkthrough__intro, .step-cards__intro, .framework-layers__intro { font-style: italic; } /* Blockquotes = real customer quotes. Iterated 2026-05-28 to the Sainsbury's `.proof-stat` treatment: white card, brand-yellow top border, yellow `` highlight on the quote text itself, larger Rounded font. Same idiom as `.proof-stat__figure mark`. This is now the canonical voice container site-wide. */ blockquote { background: var(--wn-white); border-top: 4px solid var(--wn-brand-yellow); border-radius: var(--wn-radius-card); padding: var(--space-l); margin: var(--space-l) 0; box-shadow: var(--wn-shadow-card); position: relative; } blockquote::before { display: none; } .wn-section--dark blockquote { background: var(--wn-off-black); border-top-color: var(--wn-brand-yellow); } blockquote p { font-family: var(--wn-font-rounded); font-size: var(--fs-xl); font-style: normal; font-weight: 800; color: var(--wn-off-black); line-height: 1.2; letter-spacing: -0.02em; max-width: none; padding-left: 0; margin: 0 0 var(--space-m); } blockquote p mark { background: var(--wn-brand-yellow); color: var(--wn-off-black); padding: 0.06em 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .wn-section--dark blockquote p { color: var(--wn-white); } .wn-section--dark blockquote p mark { background: var(--wn-brand-yellow); color: var(--wn-off-black); } /* Inline emphasis — [[blue]]…[[/blue]] token rendered by renderRichText(). Semantic rule: yellow mark = customer voice (quotes); blue mark = value translation — the customer-value half of a capability→value pair only. */ .wn-mark-blue { background: var(--wn-brand-blue); color: var(--wn-white); padding: 0.06em 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } blockquote cite { display: block; margin-top: 0; font-family: var(--wn-font-regular); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-mid-grey); font-style: normal; } .wn-section--dark blockquote cite { color: var(--wn-white-muted); } /* rich_text "### " subheading (e.g. the batch section's Pattern 1/2/3 subtitles). */ .rich-text__subhead { font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; color: var(--wn-off-black); margin: var(--space-m) 0 var(--space-2xs); } .rich-text__subhead:first-child { margin-top: 0; } /* STAIRs StepCards intro — match the other section ledes (answer-capsule style: left-aligned, italic, yellow vertical callout). Scoped so the centred default on other StepCards (e.g. homepage how-it-works) is untouched. */ #stairs .step-cards__intro { text-align: left; max-width: none; margin: 0 0 var(--space-l); font-style: italic; color: var(--wn-dark-grey); border-left: 3px solid var(--wn-brand-yellow); padding-left: var(--space-s); } /* ── OutcomesBand: "what you'll take away" brand-blue panel ──────── A contained brand-blue card (element accent, not a section wash — DESIGN §2) with a tick list. Off-black text + ticks for contrast (Pete 2026-06-18). */ .outcomes-band__panel { background: var(--wn-brand-blue); color: var(--wn-off-black); border-radius: var(--wn-radius-card); padding: var(--space-xl); box-shadow: var(--wn-shadow-card); } .outcomes-band__head h2 { color: var(--wn-off-black); margin: 0; } .outcomes-band__head .eyebrow { color: var(--wn-off-black); opacity: 0.7; } .outcomes-band__list { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s) var(--space-l); } .outcomes-band__list li { position: relative; padding-left: var(--space-l); font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-md); color: var(--wn-off-black); line-height: 1.3; } .outcomes-band__list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; } /* Single-column stack — used when the panel sits in a narrow column (the hero split right column). */ .outcomes-band__list--stack { grid-template-columns: 1fr; } /* Hero split: the outcomes panel sits in the col-5 right column, vertically centred against the copy. */ .hero__outcomes { margin: 0; align-self: center; } @media (max-width: 768px) { .outcomes-band__list { grid-template-columns: 1fr; } .outcomes-band__panel { padding: var(--space-l); } } .blockquote__attribution { display: flex; align-items: center; gap: var(--space-xs); } .blockquote__headshot { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--wn-border-grey); } .blockquote__headshot img { width: 100%; height: 100%; object-fit: cover; display: block; } .blockquote__headshot .img-placeholder { min-height: unset; height: 100%; border-radius: 50%; border: none; } .blockquote__headshot .img-placeholder::before { display: none; } .blockquote__headshot .img-placeholder span { display: none; } ul.feature-list { list-style: none; margin: var(--space-l) 0; } ul.feature-list li { padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m); position: relative; } ul.feature-list li::before { content: "→"; position: absolute; left: 0; color: var(--wn-brand-yellow); font-weight: 700; } /* ── Buttons (.wn-btn — canonical: design-system/components/form-inputs.html) ── */ .wn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-l); border: none; border-radius: var(--wn-radius-card); font-family: var(--wn-font-rounded); font-size: var(--fs-base); font-weight: 700; line-height: 1; letter-spacing: 0.01em; cursor: pointer; user-select: none; text-decoration: none; transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease; } .wn-btn:focus-visible { outline: 2px solid var(--wn-brand-yellow); outline-offset: 3px; } .wn-btn--primary { background: var(--wn-brand-yellow); color: var(--wn-off-black); } .wn-btn--primary:hover { opacity: 0.9; box-shadow: var(--wn-shadow-glow-yellow); } .wn-btn--primary:active { transform: translateY(1px); opacity: 1; box-shadow: none; } /* Marked hero (hero--marked): the H1 carries the yellow customer-voice , which takes the surface's yellow (DESIGN §2) — so the primary CTA moves to brand blue, the sanctioned accent "where yellow is already taken". Off-black text per the same legibility rationale as the yellow primary. */ .hero--marked .wn-btn--primary { background: var(--wn-brand-blue); color: var(--wn-off-black); } .hero--marked .wn-btn--primary:hover { opacity: 0.9; box-shadow: var(--wn-shadow-glow-blue); } /* Yellow customer-voice highlight on the hero H1 (DESIGN §9 hero exception). Same treatment as the blockquote mark: brand yellow behind off-black text, cloned across line wraps. */ .hero h1 mark { background: var(--wn-brand-yellow); color: var(--wn-off-black); padding: 0.06em 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* A marked H1 needs air: the default hero line-height (1.0) lets the mark's background box overwrite the line above. Also widen the centred measure so the headline runs two balanced lines on desktop instead of three. */ .hero.hero--marked h1 { line-height: 1.22; } .hero--marked.hero--centred h1 { max-width: 38ch; text-wrap: balance; } .wn-section--yellow .wn-btn--primary { background: var(--wn-off-black); color: var(--wn-brand-yellow); } .wn-section--yellow .wn-btn--primary:hover { background: var(--wn-white); color: var(--wn-off-black); } .wn-btn--secondary { background: var(--wn-off-black); color: var(--wn-white); } .wn-btn--secondary:hover { opacity: 0.85; } .wn-btn--secondary:active { transform: translateY(1px); } .wn-btn--ghost { background: transparent; color: var(--wn-off-black); border: 1.5px solid var(--wn-off-black); } .wn-btn--ghost:hover { background: var(--wn-off-black); color: var(--wn-white); } .wn-section--dark .wn-btn--ghost, .hero .wn-btn--ghost { color: var(--wn-white); border-color: var(--wn-white-border-muted); } .wn-section--dark .wn-btn--ghost:hover, .hero .wn-btn--ghost:hover { background: var(--wn-white); color: var(--wn-off-black); border-color: var(--wn-white); } .wn-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .wn-btn--lg { padding: var(--space-s) var(--space-l); font-size: var(--fs-md); border-radius: var(--wn-radius-input); } .wn-btn--full { width: 100%; } /* ── HubSpot embedded form (HubSpotFormTemplate — e.g. CX Corner signup) ── HubSpot injects the fields client-side with .hs-form / .hs-input / .hs-button markup. We restyle them into Wordnerds style: a generous rounded card, big pill inputs, and a brand-yellow rounded submit button matching .wn-btn. */ .hsform__inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; } .hsform__text { text-align: left; display: flex; flex-direction: column; } .hsform__heading { margin: 0 0 0.75rem; } .hsform__intro { margin: 0; color: var(--wn-dark-grey); } .hsform__form { min-width: 0; margin-top: 2.5rem; } /* The image fills the text+form column's height (absolute inside a clipped box), so it never grows taller than the form side — the form column drives the height. */ .hsform__media { min-width: 0; position: relative; } /* Image matches the text+form column height and is shown in full (contain, never cropped). Absolute so the tall portrait image doesn't inflate the row height. */ .hsform__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: var(--wn-radius-card); } @media (max-width: 860px) { .hsform__inner { grid-template-columns: 1fr; gap: 1.5rem; } .hsform__media { order: -1; position: static; } .hsform__media img { position: static; width: auto; height: auto; max-width: 100%; max-height: 340px; margin: 0 auto; } } .hsform__target { background: var(--wn-white); border: var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); padding: clamp(1.25rem, 2.5vw, 1.75rem); text-align: left; } .hsform .hs-form-field { margin-bottom: 0.85rem; } .hsform .hs-form-field > label { display: block; font-family: var(--wn-font-regular); font-weight: 600; font-size: var(--fs-sm, 0.95rem); margin-bottom: 0.45rem; color: var(--wn-off-black); } .hsform .hs-input:not([type="checkbox"]):not([type="radio"]) { width: 100%; box-sizing: border-box; padding: var(--space-xs) var(--space-m); font-family: var(--wn-font-regular); font-size: var(--fs-md, 1.0625rem); color: var(--wn-off-black); background: var(--wn-white); border: 1.5px solid var(--wn-border-grey); border-radius: var(--wn-radius-input); transition: border-color 150ms ease, box-shadow 150ms ease; } .hsform .hs-input:focus { outline: none; border-color: var(--wn-brand-yellow); box-shadow: var(--wn-shadow-focus); } .hsform textarea.hs-input { border-radius: var(--wn-radius-card); min-height: 120px; } .hsform .hs-error-msgs, .hsform .hs-error-msg { color: var(--wn-dark-grey); font-size: var(--fs-xs); list-style: none; padding: 0; margin: var(--space-3xs) 0 0; } .hsform .hs-submit .actions { margin-top: 0.5rem; } .hsform .hs-button, .hsform input[type="submit"].hs-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-xs) var(--space-l); border: none; cursor: pointer; background: var(--wn-brand-yellow); color: var(--wn-off-black); font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-md, 1.0625rem); letter-spacing: 0.01em; border-radius: var(--wn-radius-card); transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease; } .hsform .hs-button:hover { opacity: 0.9; box-shadow: var(--wn-shadow-glow-yellow); } .hsform .hs-button:active { transform: translateY(1px); opacity: 1; box-shadow: none; } /* Arrow-link secondary CTA */ .cta-secondary { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--wn-brand-blue); font-weight: 600; font-size: var(--fs-sm); position: relative; padding-bottom: 2px; transition: color 200ms ease, gap 200ms ease; } .cta-secondary::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform 280ms ease; } .cta-secondary:hover { gap: 0.6rem; color: var(--wn-off-black); } .wn-section--dark .cta-secondary { color: var(--wn-brand-blue); } .wn-section--dark .cta-secondary:hover { color: var(--wn-brand-yellow); } .wn-section--yellow .cta-secondary { color: var(--wn-off-black); } .wn-section--yellow .cta-secondary:hover { color: var(--wn-white); } .cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-l); } /* ── Image placeholders ─────────────────────────────────────── */ /* Rendered by renderImage() when src starts with "PLACEHOLDER:" */ .img-placeholder { background: var(--wn-background-grey); border: 2px dashed var(--wn-border-grey); border-radius: var(--wn-radius-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 200px; width: 100%; padding: var(--space-m); color: var(--wn-mid-grey); font-family: var(--wn-font-regular); font-size: var(--fs-sm); text-align: center; } .img-placeholder::before { content: "[ IMAGE PLACEHOLDER ]"; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wn-border-grey); } .img-placeholder span { max-width: 24ch; } .wn-section--dark .img-placeholder { background: var(--wn-white-hover); border-color: var(--wn-white-border-muted); color: var(--wn-white-ghost); } .wn-section--dark .img-placeholder::before { color: var(--wn-white-border); } .hero__visual .img-placeholder { min-height: 360px; } .integration-callout__visual .img-placeholder { aspect-ratio: 4/3; min-height: auto; } /* ── Navigation ─────────────────────────────────────────────── */ /* Sticky lives on
, not on .site-nav. Reason: sticky only works while the containing block is in the viewport. With
as parent, becomes the scroll container — nav stays pinned. */ header[role="banner"] { position: sticky; top: 0; z-index: 100; } .site-nav { background: var(--wn-black); color: var(--wn-white); transition: padding 250ms ease, box-shadow 250ms ease, background 250ms ease; border-bottom: 1px solid var(--wn-white-hover); } .site-nav.is-scrolled { box-shadow: var(--wn-shadow-nav-scroll); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-s) var(--space-l); max-width: var(--wn-content-max); margin: 0 auto; transition: padding 250ms ease; } .site-nav.is-scrolled .site-nav__inner { padding-top: 0.65rem; padding-bottom: 0.65rem; } .site-nav__logo { display: inline-flex; align-items: center; } .site-nav__logo img { height: 34px; width: auto; display: block; transition: height 250ms ease; } .site-nav.is-scrolled .site-nav__logo img { height: 28px; } .site-nav__links { display: flex; gap: var(--space-l); align-items: center; list-style: none; } .site-nav__links a { font-size: var(--fs-sm); font-weight: 500; color: var(--wn-white-muted); transition: color 200ms ease; padding: 0.25rem 0; position: relative; } .site-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--wn-brand-blue); transform: scaleX(0); transform-origin: left; transition: transform 280ms ease; } .site-nav__links a:hover { color: var(--wn-white); } .site-nav__links a:hover::after { transform: scaleX(1); } .site-nav__links a.is-active { color: var(--wn-white); } .site-nav__links a.is-active::after { background: var(--wn-brand-yellow); transform: scaleX(1); } .site-nav__cta { background: var(--wn-brand-yellow); color: var(--wn-off-black); padding: 0.6em 1.2em; border-radius: var(--wn-radius-card); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .site-nav__cta:hover { background: var(--wn-white); color: var(--wn-off-black); transform: translateY(-1px); box-shadow: var(--wn-shadow-nav-glow-yellow); } .site-nav__actions { display: flex; align-items: center; gap: var(--space-xs); } /* Customer log-in — brand-blue lozenge (blue = secondary CTA, DESIGN §2). Off-black text: white-on-brand-blue fails contrast at this size. */ .site-nav__login { background: var(--wn-brand-blue); color: var(--wn-off-black); padding: 0.6em 1.2em; border-radius: var(--wn-radius-card); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .site-nav__login:hover { background: var(--wn-white); color: var(--wn-off-black); transform: translateY(-1px); box-shadow: var(--wn-shadow-nav-glow-blue); } /* Drawer-only "Log in" item — hidden on desktop (the bar's blue login lozenge serves desktop); surfaced inside the mobile drawer foot (see ≤768px rules). */ .site-nav__links-login { display: none; } /* Hamburger button — hidden on desktop; shown ≤768px when JS is present (the mobile drawer toggle lives in renderer.ts REVEAL_SCRIPT). Three bars that animate to an X when the drawer is open. */ .site-nav__burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: var(--space-2xs); padding: 0; background: none; border: 0; color: var(--wn-white); cursor: pointer; } .site-nav__burger-bars { position: relative; } .site-nav__burger-bars, .site-nav__burger-bars::before, .site-nav__burger-bars::after { content: ""; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease, background 200ms ease; } .site-nav__burger-bars::before { position: absolute; left: 0; top: -7px; } .site-nav__burger-bars::after { position: absolute; left: 0; top: 7px; } .site-nav.is-open .site-nav__burger-bars { background: transparent; } .site-nav.is-open .site-nav__burger-bars::before { transform: translateY(7px) rotate(45deg); } .site-nav.is-open .site-nav__burger-bars::after { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .site-nav__burger-bars, .site-nav__burger-bars::before, .site-nav__burger-bars::after { transition: none; } } /* Nav dropdown (e.g. Resources → Blog / Webinars / Playbooks). Opens on hover and on keyboard focus-within; desktop only (nav hidden < 768px). */ .site-nav__has-menu { position: relative; } .site-nav__menu-trigger { display: inline-flex; align-items: center; gap: 0.35em; font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--wn-white-muted); background: none; border: 0; padding: 0.25rem 0; cursor: pointer; transition: color 200ms ease; } .site-nav__menu-trigger:hover, .site-nav__has-menu:focus-within .site-nav__menu-trigger { color: var(--wn-white); } .site-nav__chev { transition: transform 200ms ease; } .site-nav__has-menu:hover .site-nav__chev, .site-nav__has-menu:focus-within .site-nav__chev { transform: rotate(180deg); } .site-nav__menu { position: absolute; top: 100%; left: 0; margin-top: 0.6rem; min-width: 180px; list-style: none; background: var(--wn-off-black); border: 1px solid var(--wn-white-border); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-pop); padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; z-index: 10; } /* Hover-gap bridge so the menu doesn't close when the cursor crosses the margin. */ .site-nav__menu::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; } .site-nav__has-menu:hover .site-nav__menu, .site-nav__has-menu:focus-within .site-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__menu a { display: block; padding: 0.5rem 0.7rem; border-radius: var(--wn-radius-input); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-white-muted); transition: color 160ms ease, background 160ms ease; } .site-nav__menu a:hover, .site-nav__menu a:focus-visible { color: var(--wn-white); background: var(--wn-white-hover); } /* ── Hero ───────────────────────────────────────────────────── */ /* Gradient: atmospheric yellow at right-centre (behind product visual area), subtle blue accent at bottom-left. Both stay atmospheric — not flat shapes. */ .hero { background: radial-gradient(ellipse 60% 75% at 75% 55%, rgba(250,179,22,0.28) 0%, rgba(250,179,22,0.06) 50%, transparent 70%), radial-gradient(ellipse 45% 55% at 12% 88%, rgba(57,184,225,0.14) 0%, transparent 55%), var(--wn-off-black); color: var(--wn-white); overflow: hidden; position: relative; z-index: 1; } /* Hero headline — always --fs-3xl, dramatic size statement */ .hero h1 { font-size: var(--fs-3xl); color: var(--wn-white); margin-bottom: var(--space-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; } /* Option A — centred layout (default; use when no real product visual) */ .hero__copy { align-self: center; padding-bottom: var(--space-2xl); } .hero__copy--centred { text-align: center; } .hero__copy--centred h1 { max-width: 18ch; margin-left: auto; margin-right: auto; } .hero__body { font-size: var(--fs-base); color: var(--wn-white-soft); margin-bottom: var(--space-l); line-height: 1.6; } .hero__copy--centred .hero__body { max-width: 52ch; margin-left: auto; margin-right: auto; } .hero__copy--centred .cta-group { justify-content: center; } /* Option B — split layout (use once real product visual is available) */ .hero__entity-canonical { font-size: var(--fs-base); color: var(--wn-white-soft); margin-bottom: var(--space-l); max-width: 56ch; line-height: 1.6; } /* Visual fills to the bottom edge of the dark section; overflow:hidden on .hero clips it cleanly */ .hero__visual { margin: 0 auto; align-self: stretch; } .hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--wn-radius-card); } /* height: 100% fills the figure so the placeholder reaches the section edge */ .hero__visual .img-placeholder { height: 100%; min-height: 420px; } /* Cutout variant (dark-split-cutout): a transparent-background character that stands in the hero and is clipped at the dark/light section join. No card radius/shadow (it's a free-standing figure, not a panel). Bottom-anchored and nudged below the section edge so the figure's lower edge is cut by the join. */ .hero__visual--cutout { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; } .hero__visual--cutout img { width: auto; height: auto; max-width: 100%; max-height: 560px; object-fit: contain; object-position: bottom center; border-radius: 0; box-shadow: none; /* bleed past the section's bottom edge → clipped at the dark/light join */ margin-bottom: calc(-1 * var(--space-l)); } /* Contained variant (dark-split-contained): an illustration hero (e.g. a sector page) that should sit WITHIN the dark section with a bottom buffer, rather than bleeding flush to the bottom edge like a person cutout/product card. The image keeps its rounded-card cover treatment; the margin lifts it clear of the dark/light join so it reads as a contained illustration, not a bleed. */ .hero__visual--contained { margin-bottom: var(--space-2xl); } /* Boxed variant (dark-split-boxed): a self-contained illustration at its natural aspect ratio — top-aligned with the copy column, dark hero space below the box. The figure does not stretch to fill the row; height is driven by the image's own ratio. The bottom buffer is set explicitly here (not left to depend on the copy column being taller than the image) so the dark space below the box survives a short hero body. */ .hero__visual--boxed { align-self: start; padding-bottom: var(--space-2xl); } .hero__visual--boxed img { height: auto; object-fit: contain; } /* Centred hero variant — landscape screenshot bleeds to the bottom section edge */ .hero--centred { padding-top: var(--space-xl); padding-bottom: 0; } .hero--centred h1 { font-size: var(--fs-2xl); max-width: 22ch; } .hero--centred .hero__copy { padding-bottom: var(--space-l); } /* ── Animated hero (Phenom-style): product recessed into the background ── Layers, back to front: 0 .hero__bg — product screenshot, darkened, slow Ken Burns drift 1 ::before/after — brand-colour glow blobs, drifting (the colour + life) 2 > .wn-container — the centred copy The product stays visible but recessed; the motion (zoom + glow drift) is clearly readable. Honour prefers-reduced-motion before production. */ .hero--animated { background: var(--wn-off-black); padding-bottom: var(--space-3xl); } /* Product screenshot as a full-bleed, darkened, slowly-zooming backdrop. */ .hero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; overflow: hidden; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; animation: hero-kenburns 30s ease-in-out infinite alternate; } .hero__bg .img-placeholder { width: 100%; height: 100%; min-height: 0; border: none; border-radius: 0; } /* Dark veil so the white headline stays readable over the dashboard. Two-layer strategy: a concentrated blob protects the centred copy; a low-opacity base wash sets the atmospheric dark tone. Combined at copy centre ~79% dark (readable); at edges ~55% (product visible). */ .hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 65% at 50% 42%, rgba(34,34,34,0.72) 0%, rgba(34,34,34,0.35) 55%, transparent 80%), linear-gradient(to bottom, rgba(34,34,34,0.25), rgba(34,34,34,0.55)); } .hero--animated::before, .hero--animated::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); z-index: 1; pointer-events: none; } .hero--animated::before { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; right: -10%; top: -25%; background: radial-gradient(circle, rgba(250,179,22,0.50) 0%, rgba(250,179,22,0.12) 45%, transparent 70%); } .hero--animated::after { width: 55vw; height: 55vw; max-width: 720px; max-height: 720px; left: -12%; bottom: -30%; background: radial-gradient(circle, rgba(57,184,225,0.42) 0%, rgba(57,184,225,0.08) 50%, transparent 70%); } .hero--animated > .wn-container { position: relative; z-index: 2; } .hero--animated h1, .hero--animated .hero__body { text-shadow: 0 2px 28px rgba(0,0,0,0.45); } /* PREVIEW: animation is ungated so it runs even with OS "Reduce motion" on, letting Pete evaluate the effect. RE-GATE behind @media (prefers-reduced-motion: no-preference) before production. */ .hero--animated::before { animation: hero-drift-a 22s ease-in-out infinite alternate; } .hero--animated::after { animation: hero-drift-b 26s ease-in-out infinite alternate; } @keyframes hero-drift-a { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-8%, 10%) scale(1.18); } } @keyframes hero-drift-b { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10%, -8%) scale(1.22); } } @keyframes hero-kenburns { 0% { transform: scale(1.06) translate(0, 0); } 100% { transform: scale(1.20) translate(-2%, -3%); } } .hero__visual--centred { margin: var(--space-l) 0 0; } .hero__visual--centred img { height: auto; object-fit: unset; border-radius: var(--wn-radius-card) var(--wn-radius-card) 0 0; } .hero__visual--centred .img-placeholder { height: auto; min-height: unset; } /* About hero: the landscape team photo gets a dark bottom buffer + all four corners rounded, rather than the homepage flush-to-bottom bleed. */ .page-about .hero--centred { padding-bottom: var(--space-2xl); } .page-about .hero__visual--centred img { border-radius: var(--wn-radius-card); } /* Careers hero = dark-split with a PORTRAIT team photo in the side column (user 2026-06-22). Show it uncropped (height auto overrides the default object-fit:cover stretch), vertically centred against the copy, with a bottom buffer so it isn't flush against the white who-we-are section. */ .page-careers .hero__visual { align-self: center; margin-bottom: var(--space-2xl); } .page-careers .hero__visual img { height: auto; object-fit: contain; } /* Brand logo at the top of a hero (e.g. customer-story pages). */ .hero__logo { margin: 0 0 var(--space-m); } .hero__logo img { max-height: 64px; max-width: 220px; width: auto; height: auto; display: block; } .hero__copy--centred .hero__logo img { margin-inline: auto; } /* Customer-story hero illustration: smaller + centred, with a bottom buffer and all four corners rounded (overrides the full-width, flush-to-bottom homepage treatment). Scoped to story pages (page-customer-stories-), not the listing (page-customer-stories). */ [class*="page-customer-stories-"] .hero__visual--centred { max-width: 880px; margin: var(--space-l) auto var(--space-2xl); } [class*="page-customer-stories-"] .hero__visual--centred img { border-radius: var(--wn-radius-card); } /* ── Page dateline (AEO freshness) ──────────────────────────── */ /* Slim band below the hero on dated editorial pages (playbooks): the visible "Published … · Last updated …" counterpart to the Article JSON-LD. */ .page-dateline { padding-block: var(--space-s); background: var(--wn-white); } .page-dateline__text { margin: 0; font-size: var(--fs-sm); color: var(--wn-mid-grey); text-align: right; } .page-dateline time { font-weight: 600; color: var(--wn-off-black); } /* Inline variant — the freshness line rides at the top of the first ProblemStatement section on playbooks, right-aligned, with the same bold/off-black dates as the band (the band-only `.page-dateline time` rule doesn't reach it). Scoped under .problem-elaboration to win the cascade. */ .problem-elaboration .page-dateline__text--inline { margin: 0 0 var(--space-s); max-width: none; /* override the global `p { max-width: 68ch }` so the line spans the full width and right-aligns to the container edge, not mid-page */ text-align: right; } .problem-elaboration .page-dateline__text--inline time { font-weight: 600; color: var(--wn-off-black); } /* ── Breadcrumbs ────────────────────────────────────────────── */ /* Visible trail on subpages (≥2 slug segments) so a reader knows they're inside a listing. Slim white band above the hero; mirrors the BreadcrumbList JSON-LD (lib/renderer.ts buildCrumbs). */ .breadcrumbs { padding-block: var(--space-s); background: var(--wn-white); } .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--wn-mid-grey); } .breadcrumbs__list li { display: flex; align-items: center; gap: var(--space-2xs) var(--space-xs); } /* "›" separator before every crumb except the first */ .breadcrumbs__list li + li::before { content: "›"; color: var(--wn-border-grey); } .breadcrumbs__list a { color: var(--wn-mid-grey); text-decoration: none; } .breadcrumbs__list a:hover { color: var(--wn-off-black); text-decoration: underline; } .breadcrumbs__current { color: var(--wn-off-black); font-weight: 600; } /* ── Promo band — media-left variant ────────────────────────── */ /* Optional portrait image on the left (col-4), copy on the right (col-8) — mirrors the worksheet's media-left layout. Cols collapse to full width ≤768px (GRID §5), so the image stacks above the copy on mobile. */ .promo-band__grid { align-items: center; } .promo-band__media { margin: 0; } .promo-band__media img, .promo-band__media .img-placeholder { width: 100%; height: auto; border-radius: var(--wn-radius-card); } /* ── Problem statement ──────────────────────────────────────── */ .problem-elaboration h2 { margin-bottom: var(--space-s); } .problem-elaboration__visual { border-radius: var(--wn-radius-card); overflow: hidden; margin-bottom: var(--space-l); box-shadow: var(--wn-shadow-card); } .problem-elaboration__visual img { display: block; width: 100%; height: auto; } /* Smart Segmentation Playbook — page-scoped overrides. 1. The TL;DR heading ("What does this playbook do?") is 27ch; the global h2 max-width:20ch forced "do?" onto a second line. Lift the cap so it sits on one line (still wraps at the container edge on narrow screens). 2. The TL;DR illustration is a transparent PNG and must sit flat — no card background, radius, or shadow — at every breakpoint (the base .problem-elaboration__visual card chrome otherwise wraps it below 769px). */ .page-playbooks-smart-segmentation-playbook #tldr h2 { max-width: none; } .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__visual { box-shadow: none; background: none; border-radius: 0; } @media (min-width: 769px) { /* First section (TL;DR): wider body (8 cols), narrow image (4 cols). The image is height-capped to the text beside it (object-fit: contain inside an aside stretched to the text height), so it can never run longer than the copy and stays narrow for the portrait illustration. The page class out-specifies the global #tldr rules, so these win. */ .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__inner > div.wn-col-6 { grid-column: span 8; } .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__inner > aside.wn-col-6 { grid-column: span 4; } .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__inner { align-items: stretch; } .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__inner > aside { position: relative; } .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__visual { position: absolute; inset: 0; margin: 0; max-width: none; } .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__visual img { width: 100%; height: 100%; object-fit: contain; object-position: top center; } } /* "Four layers of understanding" overview graphic (stops-at-layer-1): sit flat with no shadow, a touch smaller than the full column, with rounded corners (the graphic has its own dark background, so clip it to the card radius). */ .page-playbooks-smart-segmentation-playbook #stops-at-layer-1 .problem-elaboration__visual { box-shadow: none; background: none; border-radius: var(--wn-radius-card); overflow: hidden; max-width: 360px; margin-inline: auto; } @media (min-width: 769px) { /* Wider body, narrower image column (8/4) — give the copy more room. */ .page-playbooks-smart-segmentation-playbook #stops-at-layer-1 .problem-elaboration__inner > div.wn-col-6 { grid-column: span 8; } .page-playbooks-smart-segmentation-playbook #stops-at-layer-1 .problem-elaboration__inner > aside.wn-col-6 { grid-column: span 4; } } /* "When segmentation becomes how decisions get made": lift the global h2 20ch cap so this long heading runs wider (fewer lines). The team-headshot strip sits flat (no card border/shadow), and on desktop is capped to the height of the text beside it in a 2:1 text-to-image split (matches the TL;DR treatment). */ .page-playbooks-smart-segmentation-playbook #decisions h2 { max-width: none; } .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__visual { box-shadow: none; background: none; border-radius: 0; max-width: 200px; /* mobile: keep the tall strip modest */ margin-inline: auto; } @media (min-width: 769px) { .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__inner > div.wn-col-6 { grid-column: span 8; } .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__inner > aside.wn-col-6 { grid-column: span 4; } .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__inner { align-items: stretch; } .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__inner > aside { position: relative; } .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__visual { position: absolute; inset: 0; margin: 0; max-width: none; /* fill the col-4 aside; height comes from the text */ } .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__visual img { width: 100%; height: 100%; object-fit: contain; object-position: top center; } } /* ── Problem statement: column alignment ────────────────────── */ /* Top-align so the body paragraphs flow naturally from the answer-capsule above the grid, and the blockquote sits level with the top of the body. Whitespace at the bottom of the shorter column is intentional. The blockquote's default top margin is stripped here so its top edge lines up exactly with the body's first paragraph. */ .problem-elaboration .wn-grid { align-items: start; } .problem-elaboration__inner blockquote { margin-top: 0; } /* ── Feature pillars ────────────────────────────────────────── */ /* Optional header row:

left, a co-brand logo/lockup right, level with the title (e.g. C-Rating offer section's Housemark × Wordnerds lockup). */ .guide-proof__header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap; margin-bottom: var(--space-m); /* keep the (wrapped) title clear of the answer-capsule below */ } .guide-proof__header-row h2 { margin: 0; } .guide-proof__header-media { margin: 0; flex-shrink: 0; } .guide-proof__header-media img { display: block; height: 56px; width: auto; } @media (max-width: 768px) { .guide-proof__header-media img { height: 44px; } } .guide-proof__pillars { list-style: none; margin-top: var(--space-xl); align-items: start; } /* 4-up icon-grid variant: each pillar is wn-col-6 (2×2 grid). Header row = blue numbered chip + h3 on one line; body sits below. Numbers (1-4) are computed from the index in the fragment, not from data. Iterated 2026-05-28 per Pete: replaces the icon-image chip — no per-pillar image used in this variant. */ /* align-items: stretch so cards in the same row equalise to the tallest — bottoms line up (Pete, 2026-06-18). Harmless on plain (un-boxed) pillars; essential where the pillars carry a card background (e.g. Consumer Standards). */ .guide-proof__pillars--icon-grid { grid-template-rows: auto; align-items: stretch; } .guide-proof__pillars--icon-grid .guide-proof__pillar { display: block; padding-top: 0; } .guide-proof__pillars--icon-grid .guide-proof__pillar::before { display: none; } .guide-proof__pillar-header { display: flex; align-items: center; gap: var(--space-s); margin-bottom: var(--space-s); } /* Numbered circle chip — two sizes/colours by surface. FeaturePillars 4-up (actionable methods): 40px, brand-blue, white digit — works in the wider 2×2 columns and reads as "this is a list". StepCards (how-it-works): 28px, brand-yellow, off-black digit — fits the narrower 3-up columns; yellow ties step numbers to the "this is the action arc" register of the page. */ .guide-proof__pillar-number { width: 40px; height: 40px; border-radius: 50%; background: var(--wn-brand-blue); color: var(--wn-white); font-family: var(--wn-font-rounded); font-weight: 800; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .step__number { width: 28px; height: 28px; border-radius: 50%; background: var(--wn-brand-yellow); color: var(--wn-off-black); font-family: var(--wn-font-rounded); font-weight: 800; font-size: var(--fs-base); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .guide-proof__pillars--icon-grid .guide-proof__pillar h3 { margin: 0; } .guide-proof__pillar { padding-top: var(--space-s); position: relative; } /* Image-pillars are plain block flow (image → heading → body). They were once `display: grid; grid-template-rows: subgrid; grid-row: span 3` to align each pillar's image/heading/body across the row, but WebKit (Safari + every iOS browser) collapses the subgrid tracks and prints the heading+body ON TOP of the image — at every viewport, not just mobile (reported on iPhone 2026-06-24, confirmed on desktop Safari 2026-06-25). Since all pillar images share an aspect-ratio and column width they align without subgrid anyway, so block flow is both correct cross-engine and simpler. Do not reintroduce subgrid here. */ .guide-proof__pillar::before { content: ""; position: absolute; top: 0; left: 0; width: 84px; height: 3px; /* Uniform accent across all pillars (PATTERNS §4 — no alternating colours). Blue, not yellow: yellow is reserved for the one primary CTA per surface. */ background: var(--wn-brand-blue); } .guide-proof__pillar h3 { color: var(--wn-off-black); margin: 0.75rem 0 0.5rem; } .guide-proof__pillar p { font-size: var(--fs-base); color: var(--wn-mid-grey); line-height: 1.6; } .guide-proof__pillar--with-image { padding-top: 0; } .guide-proof__pillar--with-image::before { display: none; } /* "What our consultants do" (/consultancy) — render the six service pillars as white cards on the grey (light-alt) section instead of the bare blue accent bar, which read as sparse/floaty without per-pillar images. Scoped to the section id so the global guide-proof pillars (homepage etc.) are untouched. Card, not bordered: shadow + radius per DESIGN §6 (never both border+shadow). */ #what-consultants-do .guide-proof__pillars { align-items: stretch; } #what-consultants-do .guide-proof__pillar { background: var(--wn-white); border-radius: var(--wn-radius-card); padding: var(--space-l); box-shadow: var(--wn-shadow-card); } #what-consultants-do .guide-proof__pillar::before { content: none; } #what-consultants-do .guide-proof__pillar h3 { margin-top: 0; } /* "The four Consumer Standards" (c-rating-playbook) — render the 4-up numbered pillars as white cards (2×2 on grey), so the four Standards read as cards with their blue number chip (image removed; it just repeated the copy). */ #consumer-standards .guide-proof__pillar { background: var(--wn-white); border-radius: var(--wn-radius-card); padding: var(--space-l); box-shadow: var(--wn-shadow-card); } #consumer-standards .guide-proof__pillar h3 { margin-top: 0; } /* The 13 May batch (c-rating-playbook) — give the centred figure clear space from the capsule above, and cap the (wide) image so it isn't overpowering pending a reproportioned asset. */ #batch .diagram-explainer__visual { margin-top: var(--space-xl); } #batch .diagram-explainer__visual img { max-width: 720px; } /* Pillar icon — 40×40 rounded square, yellow (pillar 1+3) or blue (pillar 2) */ .guide-proof__pillar-icon { width: 40px; height: 40px; border-radius: var(--wn-radius-card); background: var(--wn-brand-yellow); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-s); color: var(--wn-off-black); flex-shrink: 0; } .guide-proof__pillar-image { border-radius: var(--wn-radius-sm); overflow: hidden; margin-bottom: var(--space-s); aspect-ratio: 16/9; } .guide-proof__pillar-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .guide-proof__pillar-image .img-placeholder { aspect-ratio: 16/9; min-height: auto; height: 100%; } /* ── Logo bar (coded — replaces single logo-strip image) ────── */ .logo-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--space-l) var(--space-xl); list-style: none; margin-top: var(--space-xl); padding: var(--space-l) var(--space-xl); background: var(--wn-lighter-grey); border-radius: var(--wn-radius-card); } .logo-bar__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); flex: 0 1 160px; } .logo-bar__item img { max-height: 40px; width: auto; max-width: 120px; filter: grayscale(100%); opacity: 0.6; transition: opacity 200ms ease, filter 200ms ease; } .logo-bar__item:hover img { opacity: 1; filter: none; } .logo-bar__stat { font-size: var(--fs-sm); color: var(--wn-mid-grey); text-align: center; max-width: 18ch; line-height: 1.4; } .logo-bar__item .img-placeholder { min-height: 40px; height: 40px; width: 120px; padding: var(--space-2xs); } .logo-bar__item .img-placeholder::before { display: none; } .logo-bar__item .img-placeholder span { font-size: var(--fs-xs); } /* ── Step cards ─────────────────────────────────────────────── */ .how-it-works__steps { margin-top: var(--space-xl); } .step { background: var(--wn-white); border: 1px solid var(--wn-border-grey); border-radius: var(--wn-radius-card); padding: var(--space-l); overflow: hidden; box-shadow: var(--wn-shadow-lift-sm); transition: transform 0.3s ease, box-shadow 0.3s ease; } .step:hover { transform: translateY(-4px); box-shadow: var(--wn-shadow-lift-md); } /* Ghost card — fills the lonely slot when a row has 5 cards (3 + 2 → 3 + 3) so the gap reads as a deliberate placeholder, not an accident. Dotted outline, no fill, no shadow, no hover. Hidden on mobile (single column, no gap). */ .step--ghost { background: var(--wn-background-grey); /* subtle shading inside the dashed blank card (Pete, 2026-06-19) */ border: 2px dashed var(--wn-border-grey); box-shadow: none; opacity: 0.5; } .step--ghost:hover { transform: none; box-shadow: none; } @media (max-width: 768px) { .step--ghost { display: none; } } .step__image { margin: calc(-1 * var(--space-l)); margin-bottom: var(--space-s); line-height: 0; } .step__image img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .step__image .img-placeholder { aspect-ratio: 16/9; min-height: auto; border-radius: 0; border-left: none; border-right: none; border-top: none; } .step__image .img-placeholder::before { display: none; } .step__image .img-placeholder span { display: none; } /* Step card header row: yellow circular number chip + h3 heading. Top-aligned (flex-start) so the chip sits by the FIRST line of the heading when it wraps — not centred against all wrapped lines. Iterated 2026-05-28: smaller chip + yellow background. */ .step__header { display: flex; align-items: flex-start; gap: var(--space-s); margin-bottom: var(--space-s); } .step h3 { color: var(--wn-off-black); font-weight: 700; margin: 0; } .step p { font-size: var(--fs-base); color: var(--wn-mid-grey); } /* ── StepCards · journey/timeline variant ──────────────────────────── A connected vertical path of milestones (About "how we got here"): yellow nodes on a rail joined by a line, each with a year/era tag + card. */ .how-it-works__steps--journey { list-style: none; margin: var(--space-xl) 0 0; padding: 0; /* Not a template constraint — just a readability cap for the timeline. Widened from 760px (2026-06-19) now the photo sits beside the text. The section container (~1180px) is the real ceiling if it needs to go fuller. */ max-width: 960px; display: flex; flex-direction: column; gap: var(--space-l); } .step.step--journey { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-m); background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; } .step.step--journey:hover { transform: none; box-shadow: none; } .step--journey .step__rail { position: relative; } .step--journey .step__node { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin: var(--space-3xs) auto 0; border-radius: 50%; background: var(--wn-brand-yellow); border: 3px solid var(--wn-white); box-shadow: 0 0 0 1px var(--wn-border-grey); } /* The connecting line: runs from this node down through the flex gap to the next node. Hidden on the last milestone. */ .step--journey .step__rail::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 5px; bottom: calc(-1 * var(--space-l)); width: 2px; background: var(--wn-border-grey); } .step--journey:last-child .step__rail::before { display: none; } .step--journey .step__card { background: var(--wn-white); border: 1px solid var(--wn-border-grey); border-radius: var(--wn-radius-card); padding: var(--space-m) var(--space-l); box-shadow: var(--wn-shadow-lift-sm); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .step--journey .step__card:hover { transform: translateY(-2px); box-shadow: var(--wn-shadow-lift-md); background: var(--wn-section-blue-tint); border-color: var(--wn-brand-blue); } /* Milestone photo sits beside the text: the card becomes a [photo | text] grid. */ .step--journey .step__card--with-photo { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-m); align-items: center; } .step--journey .step__photo { margin: 0; } .step--journey .step__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wn-radius-md); } .step--journey .step__body { min-width: 0; } @media (max-width: 600px) { /* Stack on narrow screens: photo on top, text below. */ .step--journey .step__card--with-photo { grid-template-columns: 1fr; } .step--journey .step__photo { margin-bottom: var(--space-s); } } .step--journey .step__year { display: block; font-family: var(--wn-font-rounded); font-weight: 800; font-size: var(--fs-sm); color: var(--wn-brand-blue); margin-bottom: var(--space-3xs); } .step--journey .step__card h3 { color: var(--wn-off-black); margin: 0 0 var(--space-2xs); } .step--journey .step__card p { font-size: var(--fs-base); color: var(--wn-mid-grey); margin: 0; line-height: 1.6; } /* ── Pathway cards ──────────────────────────────────────────── */ .persona-pathways__cards { margin-top: var(--space-xl); } .persona-card { background: var(--wn-white); border: 1px solid var(--wn-border-grey); border-radius: var(--wn-radius-card); padding: var(--space-l); box-shadow: var(--wn-shadow-lift-sm); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .persona-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wn-brand-yellow); transform: scaleX(0); transform-origin: left; transition: transform 320ms ease; } .persona-card:hover { border-color: var(--wn-off-black); transform: translateY(-8px); box-shadow: var(--wn-shadow-lift-lg); } .persona-card:hover::before { transform: scaleX(1); } .persona-card h3 { color: var(--wn-off-black); font-weight: 700; } .persona-card p { font-size: var(--fs-base); color: var(--wn-mid-grey); margin: var(--space-s) 0 var(--space-m); } .persona-card__footer { display: flex; align-items: center; gap: var(--space-s); margin-top: auto; } .persona-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--wn-border-grey); } .persona-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .persona-card__avatar .img-placeholder { min-height: unset; height: 100%; border-radius: 50%; border: none; } .persona-card__avatar .img-placeholder::before { display: none; } .persona-card__avatar .img-placeholder span { display: none; } .persona-card .cta-secondary { font-size: var(--fs-sm); } /* Thumb variant (`*-thumb`): a large image banner topping the card, bleeding to the card edges above the padded content. Used by the /playbooks listing. */ .persona-card--thumb { padding-top: 0; } .persona-card__thumb { margin: 0 calc(-1 * var(--space-l)) var(--space-m); aspect-ratio: 4 / 3; overflow: hidden; background: var(--wn-light-grey); } .persona-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Integrations directory ─────────────────────────────────── */ .integrations__intro { max-width: 64ch; color: var(--wn-mid-grey); margin-top: var(--space-s); } .integrations__group { margin-top: var(--space-xl); } .integrations__group-heading { color: var(--wn-off-black); font-weight: 700; } .integrations__group-body { max-width: 64ch; color: var(--wn-mid-grey); margin-top: var(--space-2xs); } /* Uses the design-system .wn-grid (12-col + token gutter). Every card spans wn-col-4 (3-up) so boxes stay wide and uniform whatever a category holds; a short group (2 cards) simply leaves the trailing columns empty. */ .integrations__cards { margin-top: var(--space-m); list-style: none; padding: 0; } .integration-card { background: var(--wn-white); border: 1px solid var(--wn-border-grey); border-radius: var(--wn-radius-card); padding: var(--space-m); box-shadow: var(--wn-shadow-lift-sm); display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .integration-card:hover { border-color: var(--wn-off-black); transform: translateY(-4px); box-shadow: var(--wn-shadow-pop); } /* Fixed logo box keeps mixed-aspect partner logos visually uniform. */ .integration-card__logo { height: 40px; margin: 0 0 var(--space-s); display: flex; align-items: center; justify-content: flex-start; } .integration-card__logo img { max-height: 40px; max-width: 140px; width: auto; object-fit: contain; display: block; } .integration-card__logo .img-placeholder { min-height: 40px; height: 40px; width: auto; padding-inline: var(--space-s); } .integration-card__name { color: var(--wn-off-black); font-weight: 700; font-size: var(--fs-base); } .integration-card__desc { font-size: var(--fs-sm); color: var(--wn-mid-grey); margin: var(--space-2xs) 0 0; } /* Linked cards (e.g. Power BI → /power-bi): make the whole card clickable. */ .integration-card--link { padding: 0; } .integration-card__link { display: flex; flex-direction: column; height: 100%; padding: var(--space-m); text-decoration: none; color: inherit; } /* ── Proof outcome ──────────────────────────────────────────── */ /* Note: the .proof-outcome-specific answer-capsule overrides were removed 2026-05-28 — the global .answer-capsule now uses --fs-md + italic + body colour, so the proof-outcome treatment is the same as everywhere else. */ /* Stat panel: right column — large metric as the focal proof element */ .proof-stat-panel { display: flex; flex-direction: column; } .proof-stat { background: var(--wn-white); border-radius: var(--wn-radius-card); padding: var(--space-l); box-shadow: var(--wn-shadow-card); border-top: 4px solid var(--wn-brand-yellow); display: flex; flex-direction: column; gap: var(--space-m); height: 100%; } .proof-stat__figure { font-family: var(--wn-font-rounded); font-size: var(--fs-xl); font-weight: 800; color: var(--wn-off-black); line-height: 1.2; letter-spacing: -0.02em; margin: 0; max-width: none; } .proof-stat__figure mark { background: var(--wn-brand-yellow); color: var(--wn-off-black); padding: 0.06em 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .proof-stat__attribution { display: flex; align-items: center; gap: var(--space-s); margin-top: auto; padding-top: var(--space-s); border-top: 1px solid var(--wn-border-grey); } .proof-stat__logo { width: 72px; height: 36px; flex-shrink: 0; display: flex; align-items: center; } .proof-stat__logo img { max-width: 72px; max-height: 32px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.7; } .proof-stat__logo .img-placeholder { min-height: 32px; height: 32px; width: 72px; padding: 4px; } .proof-stat__logo .img-placeholder::before { display: none; } .proof-stat__logo .img-placeholder span { font-size: 9px; } .proof-stat__customer strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--wn-off-black); line-height: 1.3; } .proof-stat .cta-secondary { margin-top: 0; font-size: var(--fs-sm); align-self: flex-start; } /* Customer-story impact quote: it's a sentence, not a punchy stat — render it at body-quote size so the panel doesn't tower over the text column beside it. Scoped to story pages only. */ [class*="page-customer-stories-"] .proof-stat__figure { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; letter-spacing: normal; } /* The card hugs its content (no stretch-to-column-height) and centres beside the text — so a short quote doesn't leave a big blank gap before the attribution. */ [class*="page-customer-stories-"] .proof-stat-panel { justify-content: center; } [class*="page-customer-stories-"] .proof-stat { height: auto; } [class*="page-customer-stories-"] .proof-stat__attribution { margin-top: var(--space-m); } /* Customer-story challenge quote (problem-elaboration aside): same treatment as the impact quote above — it's a sentence, not a punchy pull-stat, so render it at body-quote size so the blockquote doesn't run taller than the text column beside it. Scoped to story pages only. */ [class*="page-customer-stories-"] .problem-elaboration blockquote p { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; letter-spacing: normal; } /* ── /for-cx-managers page-scoped overrides ─────────────────── 1. Proof aside: the quote is a sentence, not a punchy pull-stat, so the card hugs its content (no `height:100%` stretch) and centres beside the text — otherwise `margin-top:auto` shoves the attribution to the bottom and leaves a big gap after the quote. Same idiom as the customer-story panels above. 2. Centre the brief how-it-works heading to match its already-centred intro. */ .page-for-cx-managers .proof-stat, .page-for-cx-leaders .proof-stat { height: auto; } .page-for-cx-managers .proof-stat-panel, .page-for-cx-leaders .proof-stat-panel { justify-content: center; } .page-for-cx-managers .proof-stat__attribution, .page-for-cx-leaders .proof-stat__attribution { margin-top: var(--space-m); } /* StepCards is a CENTRED-header template (PATTERNS §11.1): centre the section heading to match its already-centred subtitle (.step-cards__intro) and body (.step-cards__body). The global h2 cap (max-width:20ch) otherwise pins the heading box to the left, so text-align alone only centres within that narrow box — lift the cap and centre the box. Applies to every StepCards section EXCEPT `#stairs` (the C-rating playbook deliberately runs its StepCards left-aligned with a yellow-bar subtitle — see `#stairs .step-cards__intro`). This replaces the old per-persona-page override (now redundant). */ .how-it-works:not(#stairs) > .wn-container > h2 { text-align: center; max-width: none; margin-inline: auto; } /* Leaders single-source-of-truth callout: it carries a tall portrait illustration, so top-align the columns (pin the image to the top of the section) rather than letting it float vertically centred against the copy. */ .page-for-cx-leaders .integration-callout__inner, .page-for-analysts .integration-callout__inner, .page-for-cx-managers .integration-callout__inner { align-items: start; } /* dark-header-split: full-width heading + capsule, then a 50:50 media / body row. */ .integration-callout__inner--header-split { align-items: start; row-gap: var(--space-l); } .integration-callout__inner--header-split .integration-callout__header { margin-bottom: 0; } .integration-callout__inner--header-split .integration-callout__copy > :first-child { margin-top: 0; } .integration-callout__inner--header-split .integration-callout__visual img { max-width: 100%; } /* CX Leaders: the source-of-truth artwork is tall/portrait, so cap its height to the adjacent body-copy column and scale it down proportionally to match. */ @media (min-width: 769px) { .page-for-cx-leaders .integration-callout__inner--header-split .integration-callout__visual { position: relative; align-self: stretch; } .page-for-cx-leaders .integration-callout__inner--header-split .integration-callout__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; } } .wn-verbatim { background: var(--wn-lighter-grey); border-radius: var(--wn-radius-card); padding: 0; overflow: hidden; margin: var(--space-m) 0; } .wn-verbatim__inner { background: var(--wn-white); margin: var(--space-2xs); padding: var(--space-s) var(--space-m); border-radius: var(--wn-radius-sm); } .wn-verbatim__header { font-family: var(--wn-font-regular); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-dark-grey); } .wn-verbatim__meta { font-family: var(--wn-font-regular); font-size: var(--fs-xs); font-weight: 300; color: var(--wn-mid-grey); margin: 2px 0 10px; } .wn-verbatim__body { font-family: var(--wn-font-regular); font-size: var(--fs-base); font-style: italic; color: var(--wn-dark-grey); line-height: 1.55; margin: 0; } .success-vision { background: var(--wn-lighter-grey); border-radius: var(--wn-radius-card); padding: var(--space-l); border-top: 3px solid var(--wn-brand-blue); } .success-vision p { font-size: var(--fs-sm); color: var(--wn-mid-grey); margin: 0; max-width: none; line-height: 1.65; } /* ── Integration callout ────────────────────────────────────── */ .integration-callout__visual { background: var(--wn-white); border-radius: var(--wn-radius-card); padding: var(--space-xl) var(--space-l); display: flex; align-items: center; justify-content: center; } .integration-callout__visual img { display: block; width: 100%; max-width: 460px; height: auto; } /* On a dark integration-callout the media is an on-black logo lockup, so the white card box would defeat the point — drop it and sit the logo on the dark. */ .integration-callout.wn-section--dark .integration-callout__visual { background: transparent; padding: 0; box-shadow: none; } /* Consultancy "It's software and a service" — the team photo is the "service" half. Show it as a clean rounded photo (not the white lockup card), top-aligned level with the subhead. Desktop only; the columns stack on mobile. Scoped via the section's aria-labelledby (IntegrationCallout sections carry no id). */ [aria-labelledby="complements-platform-heading"] .integration-callout__inner { align-items: start; } [aria-labelledby="complements-platform-heading"] .integration-callout__visual { background: transparent; padding: 0; } [aria-labelledby="complements-platform-heading"] .integration-callout__visual img { max-width: 100%; border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); } @media (min-width: 769px) { /* Drop the photo past the two-line heading so its top sits level with the top of the left-hand text block. */ [aria-labelledby="complements-platform-heading"] .integration-callout__visual { margin-top: calc(var(--space-3xl) + var(--space-m)); } } /* ── Diagram explainer ──────────────────────────────────────── */ /* A large centred diagram as the section centrepiece, framed by a heading + AEO answer-capsule above and explanatory prose below. */ /* Heading + capsule are left-aligned (validated 2026-06-04, Pete): a centred multi-line H2 over a centred diagram read awkwardly. The diagram itself stays centred (rule below); the intro text sits left within the centred col-8 band. */ .diagram-explainer__intro { text-align: left; } .diagram-explainer__intro .answer-capsule { margin-top: var(--space-m); margin-bottom: 0; } .diagram-explainer__visual { margin: var(--space-xl) auto 0; max-width: 960px; } .diagram-explainer__visual img { display: block; width: 100%; height: auto; border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); } .diagram-explainer__visual .img-placeholder { width: 100%; min-height: 320px; } .diagram-explainer__visual figcaption { text-align: center; font-size: var(--fs-sm); color: var(--wn-mid-grey); margin-top: var(--space-s); } .diagram-explainer__body { margin-top: var(--space-xl); } .wn-section--dark .diagram-explainer__visual figcaption { color: var(--wn-light-grey); } /* media-top: a left-aligned column — the banner image, heading and body share one width and the same left edge, so the body matches the image width. */ .diagram-explainer--media-top .diagram-explainer__visual { margin: 0 auto; max-width: 860px; } .diagram-explainer--media-top .diagram-explainer__intro, .diagram-explainer--media-top .diagram-explainer__body { grid-column: 1 / -1; max-width: 860px; width: 100%; margin-inline: auto; text-align: left; } /* Let the heading use the full band width (global h2 max-width:20ch would force a wrap), and size it to the proper H2 step (fs-xl, not the H1-sized fs-2xl) so the title fits on one line within the band. */ .diagram-explainer--media-top .diagram-explainer__intro h2 { max-width: none; font-size: var(--fs-xl); } /* media-side: image beside the text (two-column split) instead of a centred diagram. Text (heading + capsule + body) left, image + caption right. */ .diagram-explainer--media-side .diagram-explainer__split { align-items: center; row-gap: var(--space-l); } .diagram-explainer--media-side .diagram-explainer__split-text { text-align: left; } .diagram-explainer--media-side .diagram-explainer__split-text h2 { max-width: none; } .diagram-explainer--media-side .diagram-explainer__split-text .answer-capsule { margin-top: var(--space-m); margin-bottom: var(--space-m); } .diagram-explainer--media-side .diagram-explainer__split-media { margin: 0; } .diagram-explainer--media-side .diagram-explainer__split-media img { display: block; width: 100%; height: auto; border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); } .diagram-explainer--media-side .diagram-explainer__split-media figcaption { text-align: left; font-size: var(--fs-sm); color: var(--wn-mid-grey); margin-top: var(--space-xs); } .wn-section--dark .diagram-explainer--media-side .diagram-explainer__split-media figcaption { color: var(--wn-light-grey); } /* ── FAQ ────────────────────────────────────────────────────── */ .faq__list { margin-top: var(--space-l); } details { border-bottom: 1px solid var(--wn-border-grey); transition: padding 200ms ease; } details:first-child { border-top: 1px solid var(--wn-border-grey); } details[open] { padding-bottom: 8px; } summary { cursor: pointer; padding: 1.1rem 0; font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-base); list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--wn-off-black); gap: var(--space-l); transition: color 200ms ease; } summary:hover { color: var(--wn-brand-blue); } summary::-webkit-details-marker { display: none; } summary::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 2px, 2px 100%; background-position: center; background-repeat: no-repeat; color: var(--wn-brand-yellow); transition: transform 280ms ease; } details[open] summary::after { transform: rotate(45deg); background-size: 100% 2px, 0 100%; } .faq__answer { padding: 0 0 1.25rem; max-width: 72ch; } .faq__answer p { color: var(--wn-mid-grey); font-size: var(--fs-sm); line-height: 1.65; } /* ── Footer CTA ─────────────────────────────────────────────── */ .footer-cta .wn-col-8-centred { text-align: center; } .footer-cta h2 { max-width: 18ch; margin-left: auto; margin-right: auto; } .footer-cta p { margin: 0 auto var(--space-l); max-width: 52ch; font-size: var(--fs-base); } .footer-cta .cta-group { justify-content: center; } /* ── Resources row ──────────────────────────────────────────── */ .resources-row__image { border-radius: var(--wn-radius-sm); overflow: hidden; margin-bottom: var(--space-s); aspect-ratio: 16/9; } .resources-row__image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Boxed graphics (report-cover thumbnails) whose aspect doesn't match the 16:9 well: show the whole image on white rather than cropping/zooming it. */ .resources-row__image--contain { background: var(--wn-white); } .resources-row__image--contain img { object-fit: contain; } .resources-row__image .img-placeholder { aspect-ratio: 16/9; min-height: auto; } .resources-row__image .img-placeholder::before { display: none; } .resources-row__col h3 { margin-bottom: var(--space-s); } .resources-row__items { list-style: none; margin-bottom: var(--space-s); } .resources-row__items li { padding: var(--space-3xs) 0; border-bottom: 1px solid var(--wn-border-grey); } .resources-row__items a { font-size: var(--fs-sm); color: var(--wn-dark-grey); transition: color 150ms ease; } .resources-row__items a:hover { color: var(--wn-brand-blue); } .resources-row__cta { margin-top: var(--space-s); } /* ── CX Corner band (above footer, distinct colour) ─────────── */ .cx-corner-band { background: var(--wn-dark-grey); color: var(--wn-white); padding: var(--space-l) 0; } .cx-corner-band__inner { display: flex; align-items: center; gap: var(--space-l); } .cx-corner-band p { font-size: var(--fs-sm); max-width: 72ch; margin-bottom: 0; flex: 1; } .cx-corner-band a { color: var(--wn-brand-yellow); font-weight: 600; } .cx-corner-band a:hover { text-decoration: underline; } .cx-corner-band__avatar { width: 130px; height: 130px; border-radius: var(--wn-radius-card); overflow: hidden; flex-shrink: 0; border: 2px solid var(--wn-white-border-muted); } .cx-corner-band__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .cx-corner-band__avatar .img-placeholder { min-height: unset; height: 100%; border-radius: 50%; border: none; background: var(--wn-white-border); } .cx-corner-band__avatar .img-placeholder::before { display: none; } .cx-corner-band__avatar .img-placeholder span { font-size: var(--fs-xs); color: var(--wn-white-ghost); } /* ── Footer ─────────────────────────────────────────────────── */ .site-footer { background: var(--wn-off-black); color: var(--wn-white-soft); padding: var(--space-xl) 0 var(--space-l); } .site-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl); } .site-footer__identity { max-width: 52ch; } .site-footer__brand { display: inline-flex; align-items: center; } .site-footer__brand img { height: 32px; width: auto; display: block; } .site-footer__tagline { font-family: var(--wn-font-rounded); font-size: var(--fs-md); color: var(--wn-white); margin-top: var(--space-s); max-width: none; } .site-footer__description { font-size: var(--fs-sm); color: var(--wn-white-dim); margin-top: var(--space-xs); max-width: none; } /* Certification badges (Cyber Essentials Plus now; ISO 27001 joins the row later — the flex row takes additional s with no layout change). */ .site-footer__certs { display: flex; align-items: center; gap: var(--space-m); } .site-footer__certs img { height: 104px; width: auto; display: block; } .site-footer__columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-l); margin-bottom: var(--space-xl); } .site-footer__nav h4 { color: var(--wn-white); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; font-weight: 700; font-family: var(--wn-font-regular); font-size: var(--fs-sm); } .site-footer__nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .site-footer__nav a { font-size: var(--fs-sm); transition: color 120ms ease; } .site-footer__nav a:hover { color: var(--wn-brand-yellow); } .site-footer__social a { font-size: var(--fs-sm); } .site-footer__social a:hover { color: var(--wn-brand-yellow); } .site-footer__legal { border-top: 1px solid var(--wn-white-divider); padding-top: var(--space-s); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2xs); font-size: var(--fs-xs); color: var(--wn-white-dim); } .site-footer__legal a:hover { color: var(--wn-brand-yellow); } /* ── Form inputs (canonical: design-system/components/form-inputs.html) ── */ .wn-form-group { display: flex; flex-direction: column; gap: var(--space-3xs); } .wn-form-label { font-family: var(--wn-font-regular); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-dark-grey); line-height: 1.4; } .wn-form-input { appearance: none; display: block; width: 100%; padding: 14px 20px; background: var(--wn-white); border: 1.5px solid var(--wn-border-grey); border-radius: var(--wn-radius-input); font-family: var(--wn-font-regular); font-size: var(--fs-base); color: var(--wn-dark-grey); line-height: 1.4; outline: 2px solid transparent; outline-offset: 2px; transition: border-color 150ms ease, outline-color 150ms ease; } .wn-form-input::placeholder { color: var(--wn-mid-grey); } .wn-form-input:focus { border-color: var(--wn-brand-yellow); outline-color: var(--wn-brand-yellow); } .wn-form-input--error { border-color: var(--wn-dark-grey); } .wn-form-input:disabled { background: var(--wn-background-grey); border-color: var(--wn-background-grey); color: var(--wn-mid-grey); cursor: not-allowed; } .wn-form-textarea { appearance: none; display: block; width: 100%; padding: 14px 20px; background: var(--wn-white); border: 1.5px solid var(--wn-border-grey); border-radius: var(--wn-radius-card); font-family: var(--wn-font-regular); font-size: var(--fs-base); color: var(--wn-dark-grey); line-height: 1.6; resize: vertical; min-height: 120px; outline: 2px solid transparent; outline-offset: 2px; transition: border-color 150ms ease, outline-color 150ms ease; } .wn-form-textarea::placeholder { color: var(--wn-mid-grey); } .wn-form-textarea:focus { border-color: var(--wn-brand-yellow); outline-color: var(--wn-brand-yellow); } .wn-form-textarea--error { border-color: var(--wn-dark-grey); } .wn-form-textarea:disabled { background: var(--wn-background-grey); border-color: var(--wn-background-grey); color: var(--wn-mid-grey); cursor: not-allowed; } .wn-form-hint { font-family: var(--wn-font-regular); font-size: var(--fs-xs); color: var(--wn-mid-grey); line-height: 1.4; } .wn-form-error { display: flex; align-items: flex-start; gap: var(--space-3xs); font-family: var(--wn-font-regular); font-size: var(--fs-xs); color: var(--wn-dark-grey); line-height: 1.4; } .wn-form-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--wn-dark-grey); color: var(--wn-white); font-size: 8px; font-weight: 900; margin-top: 1px; } /* ── Grid system (Phase 0d — Utopia-aligned, 12-col) ────────── */ .wn-section { position: relative; padding-block: var(--space-2xl); } .wn-section--generous { padding-block: var(--space-2xl-3xl); } .wn-section--hero { padding-top: var(--space-3xl); padding-bottom: 0; } .wn-section--alt { background: var(--wn-light-grey); } .wn-section--lighter-grey { background: var(--wn-lighter-grey); } .wn-section--dark { background: var(--wn-off-black); color: var(--wn-white); } .wn-section--yellow { background: var(--wn-brand-yellow); color: var(--wn-off-black); } .wn-section--yellow-tint { background: var(--wn-section-yellow-tint); } .wn-section--blue-tint { background: var(--wn-section-blue-tint); } .wn-section--alt + .wn-section--alt, .wn-section--lighter-grey + .wn-section--lighter-grey, .wn-section--dark + .wn-section--dark, .wn-section--yellow + .wn-section--yellow, .wn-section--yellow-tint + .wn-section--yellow-tint, .wn-section--blue-tint + .wn-section--blue-tint { padding-top: 0; } /* Two consecutive white sections: collapse the second section's top padding so the join reads as a single section gap, not a double one. Background modifiers and hero (which has its own dark gradient) are excluded from this rule. */ .wn-section:not(.wn-section--alt):not(.wn-section--lighter-grey):not(.wn-section--dark):not(.wn-section--yellow):not(.wn-section--yellow-tint):not(.wn-section--blue-tint):not(.wn-section--hero) + .wn-section:not(.wn-section--alt):not(.wn-section--lighter-grey):not(.wn-section--dark):not(.wn-section--yellow):not(.wn-section--yellow-tint):not(.wn-section--blue-tint):not(.wn-section--hero) { padding-top: 0; } .wn-container { max-width: var(--wn-content-max); margin-inline: auto; padding-inline: var(--space-l); } .wn-container--narrow { max-width: 1180px; } .wn-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-m); } .wn-col-3 { grid-column: span 3; } .wn-col-4 { grid-column: span 4; } .wn-col-5 { grid-column: span 5; } .wn-col-6 { grid-column: span 6; } .wn-col-7 { grid-column: span 7; } .wn-col-8 { grid-column: span 8; } .wn-col-10 { grid-column: span 10; } .wn-col-12 { grid-column: span 12; } .wn-col-10-centred { grid-column: 2 / 12; } .wn-col-8-centred { grid-column: 3 / 11; } @media (max-width: 768px) { .wn-col-3, .wn-col-4, .wn-col-5, .wn-col-6, .wn-col-7, .wn-col-8, .wn-col-10, .wn-col-12, .wn-col-10-centred, .wn-col-8-centred { grid-column: 1 / -1; } .wn-container { padding-inline: var(--space-s); } } /* ── Reveal-on-scroll ────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 768px) { .site-footer__columns { grid-template-columns: repeat(2, 1fr); } .site-footer__certs img { height: 88px; } .hero__visual { max-width: 280px; } /* Mobile nav — a hamburger-toggled drawer. The burger + the collapse only engage when JS is present (html.has-js, set by REVEAL_SCRIPT); without JS the links wrap and stay reachable rather than vanishing. */ .has-js .site-nav__burger { display: inline-flex; } .site-nav { position: relative; } /* anchor for the absolute drawer */ .has-js .site-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-s) var(--space-l) var(--space-l); background: var(--wn-off-black); border-top: 1px solid var(--wn-white-border); box-shadow: var(--wn-shadow-nav-scroll); max-height: calc(100dvh - 100%); overflow-y: auto; } .has-js .site-nav.is-open .site-nav__links { display: flex; } /* No-JS fallback: keep the links visible by wrapping the row. */ :not(.has-js) .site-nav__links { flex-wrap: wrap; gap: var(--space-s) var(--space-m); } /* Stacked rows, generous tap targets. */ .site-nav__links > li { width: 100%; } .has-js .site-nav__links a { display: block; padding: 0.7rem 0; font-size: var(--fs-base); } /* "Log in" moves into the drawer foot on mobile (the bar keeps logo + the "Book a diagnostic" CTA + burger; login + CTA + burger would overflow 375px). A divider separates it from the nav links. */ .has-js .site-nav__login { display: none; } .has-js .site-nav__links-login { display: block; margin-top: var(--space-2xs); padding-top: var(--space-2xs); border-top: 1px solid var(--wn-white-border); } /* Dropdown children render inline + indented (no hover popover on touch). */ .has-js .site-nav__menu-trigger { width: 100%; padding: 0.7rem 0; font-size: var(--fs-base); cursor: default; } .has-js .site-nav__chev { display: none; } .has-js .site-nav__menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; margin: 0 0 var(--space-2xs); padding: 0 0 0 var(--space-s); background: none; border: 0; box-shadow: none; } .has-js .site-nav__menu::before { display: none; } } @media (max-width: 480px) { .site-footer__columns { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* Logo + two lozenges must fit a 375px viewport */ .site-nav__actions { gap: var(--space-2xs); } .site-nav__login, .site-nav__cta { padding: 0.55em 0.85em; letter-spacing: 0.04em; } } /* ── AlternatingWalkthroughTemplate ─────────────────────────── */ /* Linear-pattern method walkthrough: each step gets a full-width row with text + visual on alternating sides. */ .walkthrough h2 { text-align: center; max-width: 26ch; margin: 0 auto var(--space-s); } .walkthrough__intro { text-align: center; max-width: 60ch; margin: 0 auto var(--space-2xl); color: var(--wn-mid-grey); font-size: var(--fs-md); font-style: italic; /* subtitle under a centred title is italic, no yellow bar — PATTERNS §11 */ } .walkthrough__step { align-items: center; margin-block: var(--space-2xl); } .walkthrough__step:first-of-type { margin-block-start: 0; } .walkthrough__step:last-of-type { margin-block-end: 0; } .walkthrough__number { font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; color: var(--wn-brand-yellow); letter-spacing: 0.04em; margin-bottom: var(--space-2xs); } .walkthrough__heading { font-family: var(--wn-font-rounded); font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; margin-bottom: var(--space-s); } .walkthrough__body { font-size: var(--fs-base); color: var(--wn-dark-grey); max-width: 48ch; } .walkthrough__visual { margin: 0; border-radius: var(--wn-radius-card); overflow: hidden; background: var(--wn-light-grey); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } .walkthrough__visual img, .walkthrough__visual .img-placeholder { width: 100%; height: 100%; object-fit: cover; } .walkthrough__cta { justify-content: center; margin-top: var(--space-2xl); } @media (max-width: 768px) { /* On mobile the grid collapses to one column; preserve visual-then-text order regardless of flipped flag so steps read top-down consistently. */ .walkthrough__step--flipped .walkthrough__visual { order: -1; } .walkthrough__step { row-gap: var(--space-m); } } /* ── FrameworkLayersTemplate ─────────────────────────────────── */ /* A sequence of framework layers/pillars. Each layer is a full-width alternating row: illustration on one side, numbered heading + labelled sub-blocks (+ optional verbatim quote) on the other. Reuses the alternating-row rhythm of the walkthrough with richer text structure. */ .framework-layers h2 { text-align: center; max-width: 26ch; margin: 0 auto var(--space-s); } .framework-layers__intro { text-align: center; max-width: 60ch; margin: 0 auto var(--space-2xl); color: var(--wn-mid-grey); font-size: var(--fs-md); } .framework-layer { align-items: center; margin-block: var(--space-2xl); } .framework-layer:first-of-type { margin-block-start: 0; } .framework-layer:last-of-type { margin-block-end: 0; } /* Playbook framework rows (C-Rating pillars + Smart Segmentation layers): root the illustration to the top of the text column rather than vertically centring it against the (taller) blocks. */ #four-pillars .framework-layer, #four-layers .framework-layer { align-items: flex-start; } /* Let the body text run the full column width (matches the quote card on C-Rating; fills the wider text column on both). */ #four-pillars .framework-layer__intro, #four-pillars .framework-layer__blocks, #four-layers .framework-layer__intro, #four-layers .framework-layer__blocks { max-width: none; } /* Larger "Pillar 1…4" / "Layer 1…4" labels. */ #four-pillars .framework-layer__number, #four-layers .framework-layer__number { font-size: var(--fs-lg); } /* A divider line between each row for clearer separation. */ #four-pillars .framework-layer + .framework-layer, #four-layers .framework-layer + .framework-layer { border-top: 1px solid var(--wn-border-grey); padding-top: var(--space-2xl); } .framework-layer__number { font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; color: var(--wn-brand-yellow); letter-spacing: 0.04em; margin-bottom: var(--space-2xs); } .framework-layer__heading { font-family: var(--wn-font-rounded); font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; margin-bottom: var(--space-s); } .framework-layer__intro { font-size: var(--fs-base); color: var(--wn-dark-grey); max-width: 52ch; margin-bottom: var(--space-m); } .framework-layer__blocks { display: flex; flex-direction: column; gap: var(--space-s); max-width: 52ch; } .framework-layer__block-label { font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: var(--space-2xs); color: var(--wn-off-black); } .framework-layer__block p { font-size: var(--fs-base); color: var(--wn-dark-grey); margin: 0 0 var(--space-2xs); } .framework-layer__block p:last-child { margin-bottom: 0; } .framework-layer__bullets { margin: var(--space-2xs) 0 0; padding-left: 1.25em; list-style: disc; } .framework-layer__bullets li { font-size: var(--fs-base); color: var(--wn-dark-grey); line-height: 1.55; margin-bottom: var(--space-2xs); } .framework-layer__bullets li:last-child { margin-bottom: 0; } /* The framework-layer quote uses the CANONICAL blockquote treatment (PATTERNS §3: white card, yellow TOP border, yellow behind the text, plain ) — no overrides. Standardised 2026-06-18 (was a non-standard yellow left-border card). Only spacing within the layer is tuned. */ .framework-layer__quote { margin: var(--space-m) 0 0; } .framework-layer__visual { margin: 0; display: flex; align-items: center; justify-content: center; } /* Two stacked illustrations in one visual column (e.g. Layer 1's layers graphic above the demographics infographic). */ .framework-layer__visual--stack { flex-direction: column; gap: var(--space-l); } /* Portrait illustrations (the playbook layer/pillar art is tall) render at their natural ratio up to a generous max-height, so they read large beside the text column rather than being letterboxed inside a fixed box. */ .framework-layer__visual img { max-width: 100%; max-height: 600px; width: auto; height: auto; border-radius: var(--wn-radius-card); } .framework-layer__visual .img-placeholder { width: 100%; aspect-ratio: 3 / 4; } /* Optional per-layer full-width banner separator. Generous space above breaks it from the previous layer; tight space below so it reads as the header of its own row. */ .framework-layer__separator { margin: var(--space-2xl) 0 var(--space-l); border-radius: var(--wn-radius-card); overflow: hidden; } .framework-layer__separator:first-of-type { margin-block-start: 0; } .framework-layer__separator img { display: block; width: 100%; height: auto; } /* A layer row that immediately follows its own separator hugs it. */ .framework-layer__separator + .framework-layer { margin-block-start: 0; } @media (max-width: 768px) { /* Collapse to one column; show the visual above the text regardless of the flipped flag so layers read top-down consistently. */ .framework-layer--flipped .framework-layer__visual { order: -1; } .framework-layer { row-gap: var(--space-m); } } /* ── FrameworkLayers: sticky-nav variant ───────────────────────── A sticky left sub-nav (layer names) beside the layers stacked on the right; a scroll-spy active state shows progress through a long section. ALL content is server-rendered (AEO — nothing hidden); the highlight is progressive enhancement and degrades to a plain anchor list with no JS. Active accent is brand-BLUE (yellow stays reserved for the one footer CTA). */ .framework-sticky { align-items: start; } .framework-sticky__nav { position: sticky; top: var(--space-xl); align-self: start; } .framework-sticky__nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3xs); } .framework-sticky__nav a { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-s); color: var(--wn-mid-grey); text-decoration: none; border-left: 3px solid var(--wn-border-grey); font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-base); line-height: 1.2; transition: color var(--wn-motion-fast), border-color var(--wn-motion-fast); } .framework-sticky__nav a:hover { color: var(--wn-off-black); } .framework-sticky__nav a.is-active { color: var(--wn-off-black); border-left-color: var(--wn-brand-blue); } .framework-sticky__num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--wn-border-grey); color: var(--wn-white); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); transition: background var(--wn-motion-fast); } .framework-sticky__nav a.is-active .framework-sticky__num { background: var(--wn-brand-blue); } .framework-sticky__layer { scroll-margin-top: var(--space-xl); } .framework-sticky__layer + .framework-sticky__layer { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--wn-border-grey); } /* Per-layer banner image: fills the content column at the top of the layer. Same visual treatment as the alternating-variant separator (card radius, clipped); the keeps its natural ratio. */ .framework-sticky__layer-image { margin: 0 0 var(--space-m); border-radius: var(--wn-radius-card); overflow: hidden; } .framework-sticky__layer-image img { display: block; width: 100%; height: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (max-width: 768px) { /* Nav becomes a horizontal progress strip above the content. */ .framework-sticky__nav { position: static; margin-bottom: var(--space-m); } .framework-sticky__nav ol { flex-direction: row; flex-wrap: wrap; gap: var(--space-2xs); } .framework-sticky__nav a { border-left: none; border-bottom: 3px solid var(--wn-border-grey); padding: var(--space-2xs) var(--space-xs); font-size: var(--fs-sm); } .framework-sticky__nav a.is-active { border-left: none; border-bottom-color: var(--wn-brand-blue); } .framework-sticky__num { width: 22px; height: 22px; } } /* ── FeaturePillars: media-left split variant ────────────────── */ /* Image left, heading + intro + a vertical stack of pillars on the right (e.g. the C-Rating "four Consumer Standards"). */ .guide-proof--media-left h2 { text-align: left; } .guide-proof__split { align-items: flex-start; } .guide-proof__media-left { margin: 0; } .guide-proof__media-left img { width: 100%; height: auto; border-radius: var(--wn-radius-card); display: block; } .guide-proof__pillars--stacked { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-m); } .guide-proof__pillar--stacked { padding-top: var(--space-s); } .guide-proof__pillar--stacked h3 { font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; color: var(--wn-off-black); margin: 0 0 var(--space-3xs); } .guide-proof__pillar--stacked p { font-size: var(--fs-base); color: var(--wn-dark-grey); margin: 0; } /* ── IntegrationCallout: media-left variant (small image + CTA) ── */ /* A small image on the left with the CTA directly beneath it, copy on the right (e.g. the C-Rating self-assessment worksheet + download button). */ .integration-callout--media-left .integration-callout__inner { align-items: center; } .integration-callout__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); } .integration-callout__visual--left { /* Strip the base __visual white-card box (background + padding) — the worksheet preview is itself a document, so the card framed it in white. */ background: transparent; padding: 0; margin: 0; max-width: 340px; } .integration-callout__visual--left img { width: 100%; height: auto; display: block; border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); } @media (max-width: 768px) { .guide-proof__split { row-gap: var(--space-m); } } /* ── MediaTextSplit: feature image beside prose ──────────────── */ /* Asymmetric 7+5. The narrow column carries a real image (typically a portrait photograph); all text lives in the wide column. Columns are vertically centred so a portrait photo sits balanced against the copy. image-left = figure first (col-5 left); image-right = copy first. */ /* Top-align the columns: the portrait image and the heading start on the same line, so the section reads cleanly from the top down. (Centring left an uneven bottom edge between the image and the shorter/taller text column.) */ .media-text-split__inner { align-items: start; } .media-text-split__visual { margin: 0; } .media-text-split__visual img { width: 100%; height: auto; display: block; border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); } .media-text-split__copy > h2:first-child, .media-text-split__copy .eyebrow + h2 { margin-top: 0; } @media (max-width: 768px) { /* On mobile the grid collapses to one column (GRID.md §5). Keep the image above the copy for both variants — image-right would otherwise drop the photo below a long text block. */ .media-text-split--image-right .media-text-split__visual { order: -1; } } /* ── Proof-stat headshot ─────────────────────────────────────── */ /* Renders the verbatim speaker's headshot as an 80×80 circle inside the proof-outcome stat panel. Placeholder shows the spec'd dimensions visibly. */ .proof-stat__headshot { width: 80px; height: 80px; margin: 0 var(--space-xs) 0 0; flex-shrink: 0; } .proof-stat__headshot img, .proof-stat__headshot .img-placeholder { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; } .proof-stat__headshot .img-placeholder { min-height: 80px; font-size: 12px; font-weight: 600; text-align: center; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--wn-border-grey); overflow: hidden; white-space: nowrap; } .proof-stat__headshot .img-placeholder span { display: block; max-width: 70px; overflow: hidden; text-overflow: ellipsis; color: var(--wn-mid-grey); } .proof-stat__headshot .img-placeholder::before { display: none; } .proof-stat__attribution { display: flex; align-items: center; gap: var(--space-xs); } /* ── StepCards intro — lead paragraph, not a quote ────────────── */ /* Replaces the old .how-it-works__intro blockquote treatment. Renders as a centred lead paragraph above the step cards. */ .step-cards__intro { text-align: center; max-width: 60ch; margin: 0 auto var(--space-2xl); font-size: var(--fs-md); color: var(--wn-mid-grey); line-height: 1.55; font-style: italic; /* subtitle under a centred title is italic — PATTERNS §11 */ } /* Optional normal body paragraph beneath the (italic) subtitle. When both are present the big gap belongs below the body (before the steps), so tighten the subtitle→body gap. Body is upright body text — deliberately NOT a subtitle. */ .step-cards__intro:has(+ .step-cards__body) { margin-bottom: var(--space-s); } .step-cards__body { text-align: center; max-width: 62ch; margin: 0 auto var(--space-2xl); font-size: var(--fs-base); color: var(--wn-dark-grey); line-height: 1.6; } /* ── Book a diagnostic — sector-routed scheduler ──────────────── */ .book-diagnostic__intro { max-width: 60ch; margin-bottom: var(--space-l); color: var(--wn-dark-grey); } .book-diagnostic__intro p { margin-bottom: var(--space-s); } .book-diagnostic__selector { display: flex; flex-direction: column; gap: var(--space-2xs); max-width: 32rem; margin-bottom: var(--space-l); } .book-diagnostic__selector label { font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; color: var(--wn-off-black); } .book-diagnostic__select { font-family: var(--wn-font-regular); font-size: var(--fs-base); color: var(--wn-off-black); padding: var(--space-xs) var(--space-s); /* Room for the custom chevron on the right. */ padding-right: var(--space-xl); border: 2px solid var(--wn-border-grey); border-radius: var(--wn-radius-input); background-color: var(--wn-white); width: 100%; cursor: pointer; /* Replace the tiny native arrow with a properly-sized brand chevron. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-s) center; background-size: 20px 20px; } .book-diagnostic__select:focus-visible { outline: none; border-color: var(--wn-off-black); } /* Panel area: prompt until a sector is chosen, then the matched rep. */ .book-diagnostic__prompt { color: var(--wn-mid-grey); font-size: var(--fs-base); max-width: 60ch; padding: var(--space-l); border: 2px dashed var(--wn-border-grey); border-radius: var(--wn-radius-card); text-align: center; } .book-diagnostic__rep { background: var(--wn-white); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); padding: var(--space-l); } .book-diagnostic__rep-intro { display: flex; gap: var(--space-m); align-items: flex-start; margin-bottom: var(--space-m); } .book-diagnostic__rep-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin: 0; } .book-diagnostic__rep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .book-diagnostic__rep-detail h3 { margin: 0 0 var(--space-3xs); } .book-diagnostic__rep-title { font-family: var(--wn-font-rounded); font-size: var(--fs-md); color: var(--wn-brand-blue); margin: 0 0 var(--space-2xs); } .book-diagnostic__rep-bio { color: var(--wn-dark-grey); font-size: var(--fs-base); line-height: 1.55; margin: 0; } /* HubSpot Meetings scheduler container. While empty (lazy-loading) reserve a placeholder height so the panel doesn't collapse-then-jump; once the embed script injects the iframe the container is no longer empty and the iframe's own auto-sized height governs. (The `meetings-iframe-container` class is added by JS only for the selected rep — see the fragment.) */ /* Wrap holds the scheduler container + an absolutely-positioned preloader that overlays the reserved space while the HubSpot iframe fetches and renders. */ .book-diagnostic__scheduler-wrap { position: relative; margin-top: var(--space-m); } .book-diagnostic__scheduler:empty { min-height: 600px; } .book-diagnostic__scheduler iframe { width: 100%; border: 0; } /* Preloader — shown until the scheduler iframe's calendar has loaded (the JS sets [hidden] on load). Spinner uses brand-blue (secondary accent — yellow stays the one CTA per surface). */ .book-diagnostic__scheduler-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; /* Top-anchored so it's visible without scrolling into the reserved space — the scheduler iframe renders from the top, so the loader meets it there. */ justify-content: flex-start; padding-top: var(--space-xl); gap: var(--space-s); color: var(--wn-mid-grey); font-size: var(--fs-sm); } .book-diagnostic__scheduler-loading[hidden] { display: none; } .book-diagnostic__scheduler-loading p { margin: 0; } .book-diagnostic__spinner { width: 2.5rem; height: 2.5rem; border-radius: var(--wn-radius-pill); border: 3px solid var(--wn-border-grey); border-top-color: var(--wn-brand-blue); animation: bd-spinner-rotate 0.8s linear infinite; } @keyframes bd-spinner-rotate { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* No spin for reduced-motion users — a static ring + the "Loading…" text still signals the calendar is on its way. */ .book-diagnostic__spinner { animation: none; } } .book-diagnostic__privacy { margin-top: var(--space-m); font-size: var(--fs-sm); color: var(--wn-mid-grey); max-width: 60ch; } @media (max-width: 768px) { .book-diagnostic__rep-intro { flex-direction: column; align-items: center; text-align: center; } } /* ── Ways to work together — image-topped cards ───────────────── */ /* Scoped to #ways-to-work so the homepage feature-pillars are untouched. Each pillar is a white card with an image that bleeds to the top edges — the same look as the homepage step cards, minus the number chip. */ #ways-to-work .guide-proof__pillars { margin-top: var(--space-l); } #ways-to-work .guide-proof__pillar { background: var(--wn-white); border: 1px solid var(--wn-border-grey); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); padding: var(--space-l); overflow: hidden; } /* Image bleeds to the card's top/left/right edges (negative margins cancel the card padding), with a single-row separator below — mirrors .step__image. */ #ways-to-work .guide-proof__pillar-image { margin: calc(-1 * var(--space-l)); margin-bottom: var(--space-s); border-radius: 0; } #ways-to-work .guide-proof__pillar-image .img-placeholder { border-radius: 0; border-left: none; border-right: none; border-top: none; } #ways-to-work .guide-proof__pillar h3 { margin-top: 0; } /* ── Testimonial pair — two real customer quotes side by side ──── */ .testimonial-pair__intro { max-width: 60ch; margin-top: var(--space-s); color: var(--wn-mid-grey); } .testimonial-pair__quotes { margin-top: var(--space-xl); align-items: stretch; } /* Equal-height cards; cite pinned to the bottom of each card. */ .testimonial-pair__quotes blockquote { margin: 0; display: flex; flex-direction: column; } .testimonial-pair__quotes blockquote p { flex: 1 0 auto; } .testimonial-pair__quotes blockquote cite { margin-top: auto; } /* ── Pricing tiers — priced subscription cards (pricing page) ──── */ .pricing-tiers__intro { max-width: 60ch; margin-top: var(--space-s); color: var(--wn-mid-grey); } .pricing-tiers__grid { margin-top: var(--space-xl); align-items: stretch; /* equal-height cards across the row */ } .pricing-tier { list-style: none; position: relative; display: flex; flex-direction: column; background: var(--wn-white); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); padding: var(--space-l); } /* Featured (recommended) tier: off-black active-state accent + stronger elevation. The single yellow element on this surface is the featured CTA — the card itself uses the off-black accent, never a second yellow. */ .pricing-tier--featured { border: 2px solid var(--wn-off-black); box-shadow: var(--wn-shadow-pop); } @media (min-width: 769px) { .pricing-tier--featured { transform: translateY(-12px); } } .pricing-tier__badge { position: absolute; top: 0; right: var(--space-l); transform: translateY(-50%); background: var(--wn-off-black); color: var(--wn-white); font-family: var(--wn-font-rounded); font-size: var(--fs-sm); font-weight: 700; padding: var(--space-3xs) var(--space-s); border-radius: var(--wn-radius-pill); } .pricing-tier__header { border-bottom: 1px solid var(--wn-border-grey); padding-bottom: var(--space-s); margin-bottom: var(--space-s); } .pricing-tier__name { font-family: var(--wn-font-rounded); color: var(--wn-off-black); font-size: var(--fs-lg); margin: 0; } .pricing-tier__price { font-family: var(--wn-font-rounded); color: var(--wn-off-black); font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; margin: var(--space-2xs) 0 0; } .pricing-tier__price-prefix, .pricing-tier__price-period { font-family: var(--wn-font-regular); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-mid-grey); } .pricing-tier__audience { font-size: var(--fs-base); color: var(--wn-mid-grey); margin: var(--space-2xs) 0 0; } .pricing-tier__volume { font-size: var(--fs-base); font-weight: 600; color: var(--wn-dark-grey); margin: 0 0 var(--space-s); } .pricing-tier__features { list-style: none; margin: 0 0 var(--space-l); padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1 0 auto; /* grow so the CTA pins to the card bottom */ } .pricing-tier__features li { position: relative; padding-left: var(--space-m); font-size: var(--fs-base); color: var(--wn-dark-grey); line-height: 1.5; } .pricing-tier__features li::before { content: "\2713"; /* ✓ — neutral tick, never the brand yellow */ position: absolute; left: 0; top: 0; color: var(--wn-dark-grey); font-weight: 700; } .pricing-tier__cta { margin-top: auto; } .pricing-tier__cta .wn-btn { display: block; width: 100%; text-align: center; } .pricing-tiers__footnote { margin-top: var(--space-l); /* Centre the box on the page, not just the text within it — the global `p { max-width: 68ch }` otherwise left-anchors the box and text-align:center only centres inside that left-aligned box (looks offset left). */ margin-inline: auto; font-size: var(--fs-sm); color: var(--wn-mid-grey); text-align: center; } /* Quiet agent-facing link to /pricing.md, centred below the footnote. */ .pricing-tiers__agent-link { margin-top: var(--space-s); margin-inline: auto; text-align: center; } /* ════════════════════════════════════════════════════════════════ Webinar pages (transcript + listings) WebinarVideoTemplate · PresentersTemplate · TranscriptTemplate · RelatedWebinarsTemplate. Tokens only — see DESIGN.md. ════════════════════════════════════════════════════════════════ */ /* ── Hero eyebrow (optional kicker / back-link above the H1) ──────── */ .hero__eyebrow { display: inline-block; margin-bottom: var(--space-xs); font-family: var(--wn-font-rounded); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--wn-brand-yellow); text-decoration: none; } a.hero__eyebrow:hover { text-decoration: underline; } /* Light-background heroes (rare) keep the eyebrow readable. */ .hero:not(.wn-section--dark):not(.wn-section--hero) .hero__eyebrow { color: var(--wn-link); } /* Created / last-updated dateline on the (dark) hero. */ .hero__dates { margin-top: var(--space-m); font-size: var(--fs-sm); color: var(--wn-white-soft); } .hero--centred .hero__dates { margin-inline: auto; } /* ── WebinarVideoTemplate — click-to-load YouTube facade ─────────── */ .webinar-video__intro { text-align: center; } /* The base h2 is max-width:20ch with no auto margins, so it pins left; centre the heading box (not just its text) so it sits over the centred video. */ .webinar-video__intro h2 { margin-inline: auto; } /* Figure lives inside the centred col-8 with the heading, so it's centred by the grid; it just spans the column full-width. */ .webinar-video__figure { margin: var(--space-l) 0 0; max-width: 100%; } .webinar-video__facade, .webinar-video__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-pop); } .webinar-video__facade { position: relative; padding: 0; cursor: pointer; background-color: var(--wn-off-black); background-size: cover; background-position: center; overflow: hidden; } .webinar-video__facade::after { /* darken slightly so the play button reads on any thumbnail */ content: ""; position: absolute; inset: 0; background: rgba(20, 20, 24, 0.18); transition: background 0.2s ease; } .webinar-video__facade:hover::after, .webinar-video__facade:focus-visible::after { background: rgba(20, 20, 24, 0.32); } .webinar-video__play { position: absolute; top: 50%; left: 50%; z-index: 1; width: 84px; height: 84px; transform: translate(-50%, -50%); border-radius: var(--wn-radius-pill); background: var(--wn-brand-yellow); box-shadow: var(--wn-shadow-card); transition: transform 0.2s ease; } .webinar-video__facade:hover .webinar-video__play { transform: translate(-50%, -50%) scale(1.06); } .webinar-video__play::before { /* play triangle */ content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--wn-off-black); } .webinar-video__caption { margin-top: var(--space-s); text-align: center; font-size: var(--fs-sm); color: var(--wn-mid-grey); } /* ── DemoBandTemplate — click-to-load Storylane facade ───────────── */ /* Reuses the webinar-video figure/facade/iframe; adds only the labelled launch lozenge (a play triangle would mislead — this is a click-through tour, not a video). Slightly stronger scrim so the pill reads over a light dashboard poster. */ .demo-band .answer-capsule { text-align: left; } .demo-band__facade::after { background: rgba(20, 20, 24, 0.28); } .demo-band__facade:hover::after, .demo-band__facade:focus-visible::after { background: rgba(20, 20, 24, 0.4); } .demo-band__launch { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); display: inline-block; padding: var(--space-xs) var(--space-l); border-radius: var(--wn-radius-card); background: var(--wn-brand-yellow); color: var(--wn-off-black); font-family: var(--wn-font-rounded); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; box-shadow: var(--wn-shadow-card); transition: transform 0.2s ease; } .demo-band__facade:hover .demo-band__launch { transform: translate(-50%, -50%) scale(1.06); } @media (max-width: 768px) { .demo-band__launch { white-space: normal; text-align: center; width: max-content; max-width: 80%; } } /* ── PresentersTemplate ──────────────────────────────────────────── */ .presenters__intro { max-width: 60ch; margin-top: var(--space-s); color: var(--wn-mid-grey); } .presenters__grid { margin-top: var(--space-xl); align-items: stretch; } .presenters__card { display: flex; gap: var(--space-m); align-items: center; background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); padding: var(--space-m); box-shadow: var(--wn-shadow-card); } .presenters__photo { flex: 0 0 auto; margin: 0; width: 132px; height: 132px; border-radius: var(--wn-radius-pill); overflow: hidden; } .presenters__photo img, .presenters__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; } .presenters__text { min-width: 0; } /* 3-up cards (narrower col-4) stack vertically: headshot on top, text below filling the card. 2-up/4-up (col-6) stay horizontal (photo left). */ .presenters__card.wn-col-4 { flex-direction: column; align-items: flex-start; } @media (max-width: 480px) { .presenters__card { gap: var(--space-s); } .presenters__photo { width: 96px; height: 96px; } } /* Ghost card — fills the lonely 6th slot when a row has 5 presenters (3 + 2 → 3 + 3) so the gap reads as deliberate, not an accident. Dashed outline, grey fill, no shadow; stretches to the row height. Hidden on mobile (1 column). */ .presenters__card--ghost { background: var(--wn-background-grey); border: 2px dashed var(--wn-border-grey); box-shadow: none; } @media (max-width: 768px) { .presenters__card--ghost { display: none; } } .presenters__name { margin: 0; } .presenters__role { margin: var(--space-3xs) 0 var(--space-2xs); font-weight: 700; color: var(--wn-brand-blue); font-size: var(--fs-sm); } .presenters__bio { margin: 0; color: var(--wn-text); } /* Playful Likes / Dislikes pair on the team cards (in place of a prose bio). */ .presenters__quirks { margin-top: var(--space-2xs); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); width: 100%; } @media (max-width: 480px) { .presenters__quirks { grid-template-columns: 1fr; } } .presenters__quirk-label { display: block; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3xs); color: var(--wn-mid-grey); } /* Likes / Dislikes labels: neutral grey (inherits the .presenters__quirk-label --wn-mid-grey above) — no colour, so they don't echo the role subtitle. */ .presenters__quirk-list { margin: 0; padding-left: var(--space-s); color: var(--wn-text); font-size: var(--fs-sm); line-height: 1.4; } .presenters__quirk-list li { margin: 0 0 var(--space-3xs); } /* ── Flip cards (own-team / About presenters) ──────────────────────── Front face = cartoon headshot + Likes. On hover/focus the card flips on its Y axis to the back face = the real-person photo + Dislikes. Splitting Likes/Dislikes across the two faces gives each list room (no longer the cramped side-by-side pair). Webinar presenters (.presenters__card without --flip) are untouched. */ .presenters__card.presenters__card--flip { display: block; background: transparent; border: 0; box-shadow: none; padding: 0; perspective: 1400px; } /* Faces are grid-stacked (both in the same cell) so the card grows to its TALLER side's content — no fixed height, so long Likes/Dislikes keep their bottom padding instead of overflowing. */ .presenters__flip { position: relative; width: 100%; height: 100%; min-height: 420px; display: grid; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .presenters__card--flip:hover .presenters__flip, .presenters__card--flip:focus-within .presenters__flip { transform: rotateY(180deg); } .presenters__card--flip:focus { outline: none; } .presenters__card--flip:focus-visible { outline: 3px solid var(--wn-brand-blue); outline-offset: 4px; border-radius: var(--wn-radius-card); } .presenters__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); padding: var(--space-l) var(--space-m); overflow: hidden; } .presenters__face--back { transform: rotateY(180deg); background: var(--wn-section-blue-tint); } /* Larger circular avatar on the flip faces (the round real photos are 1:1; the cartoon crops are 4:5 so bias their framing upward to keep head + shoulders inside the circle). */ .presenters__face .presenters__photo { width: 150px; height: 150px; border-radius: var(--wn-radius-pill); } .presenters__face--front .presenters__photo img { object-fit: cover; object-position: 50% 20%; } .presenters__face--back .presenters__photo img { object-fit: cover; object-position: 50% 50%; } .presenters__face .presenters__name { font-size: var(--fs-lg); } .presenters__face .presenters__role { margin: 0; color: var(--wn-brand-blue); font-weight: 700; font-size: var(--fs-sm); } /* Back face has no role text, but reserves the role line's space so Dislikes line up with Likes when the card flips (no upward jump). */ .presenters__role--ghost { visibility: hidden; } /* Single, centred Likes/Dislikes list at normal body size — one list per face so it reads comfortably rather than crammed. */ .presenters__face .presenters__quirk { width: 100%; } .presenters__face .presenters__quirk-label { color: var(--wn-mid-grey); } .presenters__face .presenters__quirk-list { list-style: none; padding-left: 0; text-align: center; font-size: var(--fs-base); line-height: 1.5; } .presenters__soon { margin: 0; color: var(--wn-mid-grey); font-style: italic; } @media (prefers-reduced-motion: reduce) { .presenters__flip { transition: none; } } /* ── TranscriptTemplate ──────────────────────────────────────────── */ .transcript__intro { color: var(--wn-mid-grey); margin-bottom: var(--space-m); } .transcript__section { margin: var(--space-l) 0 var(--space-s); font-family: var(--wn-font-rounded); } .transcript__turn { margin: 0 0 var(--space-s); line-height: 1.7; } .transcript__turn--cont { margin-top: calc(-1 * var(--space-2xs)); } .transcript__speaker { color: var(--wn-off-black); font-weight: 700; } .transcript__disclosure > summary, .transcript__more > summary { cursor: pointer; font-family: var(--wn-font-rounded); font-weight: 700; padding: var(--space-s) 0; color: var(--wn-link); } .transcript__disclosure[open] > summary, .transcript__more[open] > summary { margin-bottom: var(--space-m); } /* Preview: the read-more sits directly under the first paragraph. */ .transcript__more { margin-top: var(--space-s); } /* "What's this webinar about?": 2/3 text, 1/3 image. The illustration is capped to the height of the copy beside it — never taller than the text — keeps its aspect (no crop) and sits flat with no card background. The aside stretches to the text height; the image is absolutely filled into it with object-fit so its own (portrait) height can't inflate the row. Desktop only; mobile stacks. */ @media (min-width: 769px) { #tldr .problem-elaboration__inner > div.wn-col-6 { grid-column: span 8; } #tldr .problem-elaboration__inner > aside.wn-col-6 { grid-column: span 4; } #tldr .problem-elaboration__inner { align-items: stretch; } #tldr .problem-elaboration__inner > aside { position: relative; } #tldr .problem-elaboration__visual { position: absolute; inset: 0; margin: 0; box-shadow: none; /* no background/card chrome — image sits flat */ background: none; border-radius: 0; } #tldr .problem-elaboration__visual img { width: 100%; height: 100%; object-fit: contain; /* whole illustration, scaled to the text height */ object-position: top center; } } /* c-rating-playbook #tldr: the image is a LANDSCAPE card graphic that should fill the half-width (col-6) aside — same width as the why-c1 quote box below — not the narrow 2/3+1/3 portrait treatment above. Restore the even 6+6 split and let the figure flow normally so its own 16:9 aspect drives height (Pete, 2026-06-19). */ @media (min-width: 769px) { .page-playbooks-c-rating-playbook #tldr .problem-elaboration__inner > div.wn-col-6 { grid-column: span 6; } .page-playbooks-c-rating-playbook #tldr .problem-elaboration__inner > aside.wn-col-6 { grid-column: span 6; } .page-playbooks-c-rating-playbook #tldr .problem-elaboration__inner { align-items: start; } .page-playbooks-c-rating-playbook #tldr .problem-elaboration__inner > aside { position: static; } .page-playbooks-c-rating-playbook #tldr .problem-elaboration__visual { position: static; inset: auto; margin: 0; } .page-playbooks-c-rating-playbook #tldr .problem-elaboration__visual img, .page-playbooks-c-rating-playbook #tldr .problem-elaboration__visual .img-placeholder { position: static; width: 100%; height: auto; object-fit: contain; } } /* "What will you learn?": 50/50 text-to-image (default 6+6). Same rule as above — the image is capped to the text height (never taller), aspect kept, no crop, flat. The answer-capsule widens to the full row so its right edge meets the image. Gated on the section having an image. Desktop only; mobile stacks. */ @media (min-width: 769px) { #covers:has(.problem-elaboration__inner aside) .answer-capsule { max-width: none; } #covers .problem-elaboration__inner { align-items: stretch; } #covers .problem-elaboration__inner > aside { position: relative; } #covers .problem-elaboration__visual { position: absolute; inset: 0; margin: 0; box-shadow: none; background: none; border-radius: 0; } #covers .problem-elaboration__visual img { width: 100%; height: 100%; object-fit: contain; object-position: top center; } } /* Rounded corners on the new playbook illustration images (Stella, 2026-06-23). These three sections forced border-radius:0 above (flat for the old placeholders); restore the standard card radius now they hold real illustrations — matching the already-rounded #stops-at-layer-1 section. Source order + specificity beat the earlier 0 rules at every width. */ .page-playbooks-c-rating-playbook #tldr .problem-elaboration__visual, .page-playbooks-smart-segmentation-playbook #tldr .problem-elaboration__visual, .page-playbooks-smart-segmentation-playbook #decisions .problem-elaboration__visual { border-radius: var(--wn-radius-card); overflow: hidden; } /* Imageless TL;DR / "What will you learn?" sections: hang the answer-capsule's lede marker (yellow border + padding) into the left gutter so the capsule text lines up flush-left with the body paragraphs and shares the exact same 68ch measure — i.e. quote and body are the same width. Only applies when the section has no image (with an image the capsule is full-width to meet the image edge). Desktop only; mobile stacks and keeps the default marker. */ @media (min-width: 769px) { #tldr:not(:has(.problem-elaboration__inner aside)) .answer-capsule, #covers:not(:has(.problem-elaboration__inner aside)) .answer-capsule { /* Match the body font size so the 68ch measure resolves to the same pixel width on both (ch scales with font size — a bigger capsule font made its 68ch physically wider). Italic + the yellow marker still mark it as the lede. The +padding/border on max-width and the negative margin keep the text flush-left and flush-right with the body. */ font-size: var(--fs-base); max-width: calc(68ch + var(--space-s) + 3px); margin-left: calc(-1 * (var(--space-s) + 3px)); } } /* ── RelatedWebinarsTemplate — "see other webinars" + listings ───── */ .related-webinars__intro { max-width: 60ch; margin-top: var(--space-s); color: var(--wn-mid-grey); } .related-webinars__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wn-gap); margin-top: var(--space-l); } .related-webinars__group { margin-top: var(--space-xl); } .related-webinars__sector { margin: 0 0 var(--space-s); font-family: var(--wn-font-rounded); } .related-webinars__group .related-webinars__cards { margin-top: var(--space-s); } .related-webinars__cta { margin-top: var(--space-l); } .webinar-card { background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .webinar-card:hover { box-shadow: var(--wn-shadow-pop); transform: translateY(-2px); } .webinar-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .webinar-card__thumb, .webinar-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--wn-light-grey); background-size: cover; background-position: center; object-fit: cover; } /* /webinars topic dropdown filter */ .related-webinars__filter { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; margin: var(--space-l) 0; } .related-webinars__filter label { font-family: var(--wn-font-rounded); font-weight: 700; } .related-webinars__select { font: inherit; /* Extra right padding leaves room for the custom chevron, which is inset from the edge (not pinned to it like the native arrow). */ padding: var(--space-2xs) var(--space-xl) var(--space-2xs) var(--space-s); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-input); background-color: var(--wn-white); color: var(--wn-text); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-s) center; background-size: 12px 8px; } .webinar-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m); } .webinar-card__title { font-family: var(--wn-font-rounded); font-weight: 700; line-height: 1.3; } .webinar-card__oneliner { color: var(--wn-text); font-size: var(--fs-sm); line-height: 1.5; } .webinar-card__meta { margin-top: auto; padding-top: var(--space-2xs); color: var(--wn-mid-grey); font-size: var(--fs-xs); } @media (max-width: 860px) { .related-webinars__cards { grid-template-columns: 1fr; } .webinar-video__play { width: 64px; height: 64px; } } /* ── Blog: /blog listing (featured + filter + grid) ──────────────── */ .blog-listing__intro { max-width: 60ch; margin-top: var(--space-s); color: var(--wn-mid-grey); } /* Blog section headings ("Latest article", "Read more from the blog") sit a clear step below the page/post title. */ .blog-listing h2, .blog-listing__featured-heading { font-size: var(--fs-lg); max-width: none; } .blog-listing__featured-heading { font-family: var(--wn-font-rounded); margin: 0 0 var(--space-m); } /* When the intro follows the featured card it needs to clear it before the filter */ .blog-featured + .blog-listing__intro { margin-top: var(--space-xl); } .blog-listing__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wn-gap); margin-top: var(--space-l); } .blog-listing__cta { margin-top: var(--space-l); } /* Topic dropdown — clones the /webinars filter */ .blog-listing__filter { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; margin: var(--space-l) 0; } .blog-listing__filter label { font-family: var(--wn-font-rounded); font-weight: 700; } .blog-listing__select { font: inherit; padding: var(--space-2xs) var(--space-xl) var(--space-2xs) var(--space-s); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-input); background-color: var(--wn-white); color: var(--wn-text); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-s) center; background-size: 12px 8px; } /* Standard card */ .blog-card { background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .blog-card:hover { box-shadow: var(--wn-shadow-pop); transform: translateY(-2px); } .blog-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .blog-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--wn-light-grey); object-fit: cover; } .blog-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m); } .blog-card__title { font-family: var(--wn-font-rounded); font-weight: 700; line-height: 1.3; } .blog-card__excerpt { color: var(--wn-text); font-size: var(--fs-sm); line-height: 1.5; } .blog-card__meta { margin-top: auto; padding-top: var(--space-2xs); color: var(--wn-mid-grey); font-size: var(--fs-xs); } /* ---------------------------------------------------------------------------- ResourceCardsTemplate — the drop-in "Useful resources" band. Card chrome mirrors .blog-card; the kicker labels the content type (From the blog / CX Corner / Playbook) and the hub link is a separate anchor below the main card link (no nested anchors). */ .resource-cards .wn-grid { align-items: stretch; } .resource-card { display: flex; flex-direction: column; background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .resource-card:hover { box-shadow: var(--wn-shadow-pop); transform: translateY(-2px); } .resource-card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } .resource-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--wn-light-grey); object-fit: cover; } .resource-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m) var(--space-m) var(--space-2xs); } .resource-card__kicker { font-family: var(--wn-font-regular); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wn-mid-grey); } .resource-card__title { font-family: var(--wn-font-rounded); font-weight: 700; line-height: 1.3; } .resource-card__excerpt { color: var(--wn-text); font-size: var(--fs-sm); line-height: 1.5; } /* Flex-column container → arrow link must not stretch (PATTERNS §5) */ .resource-card__hub { align-self: flex-start; margin: var(--space-2xs) var(--space-m) var(--space-m); font-size: var(--fs-sm); } .resource-cards__intro { max-width: 60ch; } .resource-cards__cta { margin-top: var(--space-l); } /* Featured (newest) card — large, neutral surface (no yellow: that's the footer CTA) */ .blog-featured { background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .blog-featured:hover { box-shadow: var(--wn-shadow-pop); transform: translateY(-2px); } .blog-featured__link { display: grid; grid-template-columns: 5fr 7fr; text-decoration: none; color: inherit; min-height: 0; } .blog-featured__media { display: block; } .blog-featured__img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; background-color: var(--wn-light-grey); object-fit: cover; } .blog-featured__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-l); justify-content: center; } .blog-featured__title { font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; } .blog-featured__excerpt { color: var(--wn-text); font-size: var(--fs-md); line-height: 1.55; max-width: 60ch; } .blog-featured__meta { color: var(--wn-mid-grey); font-size: var(--fs-xs); } /* ── CustomerStoriesTemplate — /customer-stories listing + related-row ─ */ .customer-stories__intro { max-width: 60ch; margin-top: var(--space-s); color: var(--wn-mid-grey); } .customer-stories__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wn-gap); margin-top: var(--space-l); } .customer-stories__cta { margin-top: var(--space-l); } /* Sector dropdown — clones the /webinars + /blog filter */ .customer-stories__filter { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; margin: var(--space-l) 0; } .customer-stories__filter label { font-family: var(--wn-font-rounded); font-weight: 700; } .customer-stories__select { font: inherit; padding: var(--space-2xs) var(--space-xl) var(--space-2xs) var(--space-s); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-input); background-color: var(--wn-white); color: var(--wn-text); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-s) center; background-size: 12px 8px; } .customer-story-card { background: var(--wn-white); border: 1px solid var(--wn-border-default); border-radius: var(--wn-radius-card); box-shadow: var(--wn-shadow-card); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .customer-story-card:hover { box-shadow: var(--wn-shadow-pop); transform: translateY(-2px); } .customer-story-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .customer-story-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--wn-light-grey); object-fit: cover; } /* Logo-on-panel fallback when there's no story illustration yet */ .customer-story-card__logo-panel { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; background-color: var(--wn-lighter-grey); } .customer-story-card__logo { max-width: 55%; max-height: 50%; object-fit: contain; } .customer-story-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m); } .customer-story-card__eyebrow { font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-xs); color: var(--wn-mid-grey); text-transform: uppercase; letter-spacing: 0.04em; } .customer-story-card__title { font-family: var(--wn-font-rounded); font-weight: 700; line-height: 1.3; } .customer-story-card__excerpt { color: var(--wn-text); font-size: var(--fs-sm); line-height: 1.5; } /* ── StatBandTemplate — headline metrics row (customer-story results) ── */ .stat-band__intro { max-width: 60ch; margin-top: var(--space-s); } .stat-band__grid { margin-top: var(--space-l); row-gap: var(--space-l); text-align: center; } .stat-item { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: center; } .stat-item__value { font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-2xl); line-height: 1; color: var(--wn-text); } /* On a dark band the figures invert to brand yellow (the one accent per surface). */ .wn-section--dark .stat-item__value { color: var(--wn-brand-yellow); } .stat-item__label { font-size: var(--fs-sm); line-height: 1.4; color: var(--wn-mid-grey); } /* Optional eyebrow above the stats (e.g. "Key Metrics" on a customer story) — centred over the centred grid; removes the top-heavy grid margin so the band sits balanced in its grey bar. */ .stat-band__eyebrow { display: block; text-align: center; margin-bottom: var(--space-s); } .stat-band:has(.stat-band__eyebrow) .stat-band__grid { margin-top: 0; } @media (max-width: 860px) { .customer-stories__cards { grid-template-columns: 1fr; } } /* ── Customer story (case-study) refinements — scoped to page-type-case-study ─ */ /* Hero: the customer logo larger (the default 64px reads too small as the case-study's lead identity mark). */ .page-type-case-study .hero__logo { margin-bottom: var(--space-l); } .page-type-case-study .hero__logo img { max-height: 104px; max-width: 300px; } /* Hero back-link ("← All customer stories") in brand-blue, matching the CX Corner archive back-link. */ .page-type-case-study .hero__eyebrow { color: var(--wn-brand-blue); } /* About [customer]: a FULL-BLEED hairline rule above the section gives the page foot structure (matching the CX Corner full-bleed rule). The border sits on the section, which spans the viewport; the container padding clears the heading from the rule (the section's own top padding stays collapsed). */ .page-type-case-study .integration-callout { border-top: 1px solid var(--wn-border-grey); } .page-type-case-study .integration-callout > .wn-container { padding-top: var(--space-2xl); } /* ── Blog: single post (grey header block + white content band) ─────────── */ /* The masthead sits in a light-grey full-bleed band for structure; the breadcrumbs stay a white strip above it (between the dark nav and the grey header) for consistency with the rest of the site. The substantive content runs on plain white below. Added 2026-06-22 per review. */ /* CX Corner publication masthead — black header under the breadcrumbs: a square rounded cartoon (Pete at his computer) left, then the publication name ("CX Corner", brand-yellow rounded title), the issue + date (white), and the standing boilerplate (off-white). The publication identity for every issue. */ .blog-post__pubhead { background: var(--wn-off-black); padding-block: var(--space-m); color: var(--wn-white); } /* Cartoon sized to span the (constant) text block — top of "CX Corner" to the bottom of the boilerplate. A fixed square is reliable here because the masthead copy is the same on every issue. Centred against the text block. */ .blog-post__pubhead-inner { display: flex; align-items: center; gap: var(--space-m); } .blog-post__pubhead-cartoon { flex: 0 0 auto; width: 150px; height: 150px; border-radius: var(--wn-radius-card); object-fit: cover; } .blog-post__pubhead-text { min-width: 0; } /* Quiet "← All issues" archive back-link, top-right of the black masthead. */ .blog-post__pubhead-back { margin-left: auto; align-self: flex-start; flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; color: var(--wn-brand-blue); text-decoration: none; white-space: nowrap; } .blog-post__pubhead-back:hover { text-decoration: underline; } @media (max-width: 560px) { .blog-post__pubhead-back { display: none; } } .blog-post__pubhead-brand { margin: 0; font-family: var(--wn-font-rounded); font-weight: 800; font-size: var(--fs-xl); line-height: 1.05; color: var(--wn-brand-yellow); } .blog-post__pubhead-issue { margin: var(--space-3xs) 0 0; font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-md); color: var(--wn-white); } .blog-post__pubhead-blurb { margin: var(--space-2xs) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--wn-white-muted); max-width: 70ch; } @media (max-width: 560px) { .blog-post__pubhead-inner { gap: var(--space-s); align-items: flex-start; } .blog-post__pubhead-cartoon { width: 88px; height: 88px; } .blog-post__pubhead-brand { font-size: var(--fs-lg); } } .blog-post__head { background: var(--wn-light-grey); padding-block: var(--space-l) var(--space-xs); } .blog-post__head .blog-post__masthead, .blog-post__head .blog-post__hero { margin-bottom: 0; } .blog-post__content { background: var(--wn-white); padding-block: 0 var(--space-2xl); } .blog-post__inner { max-width: 760px; margin-inline: auto; } .blog-post__header { margin-bottom: var(--space-l); } .blog-post__eyebrow { display: inline-block; font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; color: var(--wn-mid-grey); margin-bottom: var(--space-s); } .blog-post__eyebrow:hover { color: var(--wn-text); } .blog-post__meta { color: var(--wn-mid-grey); font-size: var(--fs-sm); margin: 0 0 var(--space-2xs); } /* Category tag — a pill chip in the masthead (brings the category to life vs a run-in meta line). White on the grey header block so it stays legible; never yellow (CTA) or sentiment. */ .blog-post__category { display: inline-block; margin: 0 0 var(--space-s); padding: 0.35em 0.95em; border-radius: var(--wn-radius-pill); background: var(--wn-white); border: 1px solid var(--wn-border-grey); color: var(--wn-dark-grey); font-family: var(--wn-font-rounded); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; } .blog-post__header h1 { font-family: var(--wn-font-rounded); line-height: 1.15; margin: 0; } .blog-post__subtitle { font-size: var(--fs-md); line-height: 1.5; color: var(--wn-text); margin-top: var(--space-s); } /* Byline bar — the first element of the white content band: author (avatar + name) left, created/updated dateline (bold, right-aligned) right. No rule above (the grey header block's bottom edge separates it). It's a FULL-BLEED strip — the bottom rule runs edge to edge off both sides of the viewport — while the author/dates row is held to the reading column by the inner container and centred vertically by the symmetric padding. */ .blog-post__byline { margin: 0 0 var(--space-l); padding-block: var(--space-s); border-bottom: 1px solid var(--wn-border-grey); } .blog-post__byline-row { max-width: 760px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-m); } .blog-post__byline-row--split { max-width: 720px; } .blog-post__author { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--wn-mid-grey); } .blog-post__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .blog-post__author strong { color: var(--wn-off-black); font-weight: 700; font-family: var(--wn-font-rounded); } .blog-post__dates { margin: 0; font-size: var(--fs-sm); color: var(--wn-mid-grey); text-align: right; } .blog-post__dates time { font-weight: 700; color: var(--wn-off-black); } /* Multi-author byline — a cluster of round avatars (overlapped, each ringed in white) + "Written by A, B & C (Org)". The optional org marks a guest co-author. */ .blog-post__avatars { display: inline-flex; flex: 0 0 auto; margin-right: var(--space-3xs); } .blog-post__author--multi .blog-post__avatar { border: 2px solid var(--wn-white); } .blog-post__author--multi .blog-post__avatars .blog-post__avatar:not(:first-child) { margin-left: -12px; } .blog-post__author-org { color: var(--wn-mid-grey); font-weight: 400; font-family: var(--wn-font-regular); } /* Co-brand lockup above the H1 on joint pieces (e.g. Wordnerds × Housemark). The light-background lockup variant, sized to sit comfortably over the title. */ .blog-post__lockup { margin: 0 0 var(--space-s); } .blog-post__lockup img { height: 40px; width: auto; max-width: 100%; display: block; } /* CX Corner personal intro — a contained yellow rounded box (not a full-bleed band) holding Pete's chatty newsletter opening, set apart from the substance below. Reuses .blog-post__body for typography. */ .blog-post__intro { background: var(--wn-section-yellow-tint); border-radius: var(--wn-radius-card); padding: var(--space-l); margin-bottom: var(--space-xl); } .blog-post__intro > *:last-child { margin-bottom: 0; } /* CX Corner grey masthead — top-align the hero image with the title text (the article header has no eyebrow above the H1 on CX Corner, so the image top lines up with the title), rather than the blog's vertical centring. */ .blog-post--cxc .blog-post__inner--split .blog-post__masthead { align-items: start; } /* CX Corner has no byline bar, so the white content band opens straight onto the yellow intro box — give it top breathing room from the grey masthead above. */ .blog-post--cxc .blog-post__content { padding-top: var(--space-xl); } /* Full-bleed closing rule (e.g. before a CX Corner P.S.) — runs to the viewport edges, escaping the reading column. Selector matches `.blog-post__body > *` specificity-plus-one so the body's `max-width: 65ch` cap doesn't clamp it. */ .blog-post__body > .blog-post__rule { border: 0; border-top: 1px solid var(--wn-border-grey); max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); margin-block: var(--space-l); } /* Contained hero — deliberately not a full-bleed statement image */ .blog-post__hero { margin: 0 0 var(--space-xl); } .blog-post__hero img { display: block; width: 100%; max-height: 420px; border-radius: var(--wn-radius-card); object-fit: cover; } /* article-split: title + hero side by side at the top; hero at natural proportions (not cropped). Body runs full-width (readable) below. */ .blog-post__inner--split { max-width: 940px; } .blog-post__inner--split .blog-post__masthead { display: grid; grid-template-columns: 1fr minmax(0, 360px); gap: var(--space-l); align-items: center; margin-bottom: var(--space-xl); } .blog-post__inner--split .blog-post__header { margin-bottom: 0; } .blog-post__inner--split .blog-post__hero { margin: 0; } .blog-post__inner--split .blog-post__hero img { max-height: none; height: auto; object-fit: contain; } .blog-post__inner--split .blog-post__body { max-width: 720px; margin-inline: auto; } @media (max-width: 760px) { .blog-post__inner--split .blog-post__masthead { grid-template-columns: 1fr; } } /* article-centred: a centred masthead header with a big statement hero stacked below it. The head band runs wider than the reading column so the 16:9 hero reads large; the header text is centred and capped for line length; the body stays at the normal reading width (only the head band widens). */ .blog-post__head .blog-post__inner--centred { max-width: 960px; } .blog-post__inner--centred .blog-post__header { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: var(--space-l); } .blog-post__inner--centred .blog-post__lockup img { margin-inline: auto; } .blog-post__inner--centred .blog-post__hero { margin: 0; } .blog-post__inner--centred .blog-post__hero img { max-height: none; } /* Centred byline — the author cluster + dateline sit together, centred under the hero (the article-split left/right split would orphan the date here). */ .blog-post__byline-row--centred { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2xs); } .blog-post__byline-row--centred .blog-post__dates { text-align: center; } /* Long-form body — matches the site's base body size */ .blog-post__body { font-size: var(--fs-base); line-height: 1.65; color: var(--wn-text); } .blog-post__body > * { max-width: 65ch; } .blog-post__body h2 { font-family: var(--wn-font-rounded); font-size: var(--fs-lg); line-height: 1.25; max-width: none; margin: 0 0 var(--space-s); } .blog-post__body h3 { font-family: var(--wn-font-rounded); font-size: var(--fs-md); line-height: 1.3; margin: 0 0 var(--space-xs); } .blog-post__body p { margin: 0 0 var(--space-m); } .blog-post__body ul, .blog-post__body ol { margin: 0 0 var(--space-m); padding-left: var(--space-l); } .blog-post__body li { margin-bottom: var(--space-2xs); } .blog-post__body a { color: var(--wn-link); text-decoration: underline; } .blog-post__figure { margin: var(--space-l) 0; max-width: 100%; } .blog-post__figure img { display: block; width: 100%; border-radius: var(--wn-radius-card); } .blog-post__figure figcaption { margin-top: var(--space-2xs); font-size: var(--fs-sm); color: var(--wn-mid-grey); } .blog-post__body .webinar-video__figure { margin: var(--space-l) 0; max-width: 100%; } .blog-table-wrap { max-width: 100%; overflow-x: auto; margin: var(--space-l) 0; } .blog-post__body table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); } .blog-post__body th, .blog-post__body td { border: 1px solid var(--wn-border-default); padding: var(--space-xs) var(--space-s); text-align: left; vertical-align: top; } .blog-post__body thead th { background: var(--wn-lighter-grey); font-family: var(--wn-font-rounded); } /* Legal pages (cookie-policy, privacy-policy) embed raw HTML directly in .blog-post__body without the .blog-table-wrap scroll container the blog renderer adds around markdown tables. A long unbreakable token (e.g. the Mixpanel cookie name) therefore pushed the whole page into horizontal scroll on mobile. Make legal-page tables scroll within their own box, and let long code tokens wrap, so the page itself never scrolls sideways. (Found by `npm run smoke`, 2026-06-24.) */ .page-type-legal .blog-post__body table { display: block; overflow-x: auto; } .page-type-legal .blog-post__body td code { word-break: break-word; overflow-wrap: anywhere; } .blog-callout { margin: var(--space-l) 0; padding: var(--space-m); border-radius: var(--wn-radius-md); background: var(--wn-lighter-grey); } .blog-callout--comparison { background: var(--wn-section-blue-tint); } .blog-callout h3 { margin: 0 0 var(--space-xs); font-family: var(--wn-font-rounded); } .blog-callout p:last-child { margin-bottom: 0; } /* Key-takeaways / TL;DR summary panel — an AEO snippet surface near the top of a post. A solid brand-blue panel with off-black text + tick bullets, matching the site's existing "what you'll take away" treatment (OutcomesBand) — brings colour to the top of the page and stands out against the white content. Off-black (not white) text: white-on-brand-blue fails contrast (DESIGN §8). Added 2026-06-22; recoloured to the blue panel per review. */ .blog-takeaways { margin: 0 0 var(--space-xl); padding: var(--space-l); border-radius: var(--wn-radius-card); background: var(--wn-brand-blue); color: var(--wn-off-black); box-shadow: var(--wn-shadow-card); } .blog-takeaways__heading { font-family: var(--wn-font-rounded); font-size: var(--fs-lg); font-weight: 700; color: var(--wn-off-black); margin: 0 0 var(--space-m); } .blog-takeaways ul { list-style: none; margin: 0; padding: 0; } .blog-takeaways li { position: relative; padding-left: var(--space-l); margin-bottom: var(--space-s); font-family: var(--wn-font-rounded); font-weight: 700; font-size: var(--fs-md); line-height: 1.3; color: var(--wn-off-black); } .blog-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; } .blog-takeaways li:last-child { margin-bottom: 0; } /* Inline mid-article conversion band — off-black panel + the single yellow primary CTA (its own surface, so the yellow doesn't compete with the footer CTA; DESIGN §2). Copy + left-aligned button on the left; an image on the right when the block carries one. Added 2026-06-22 for the enriched blog-post class; image variant added the same day per review. */ .blog-cta { margin: var(--space-xl) 0; padding: var(--space-l); border-radius: var(--wn-radius-card); background: var(--wn-off-black); color: var(--wn-white); } .blog-cta--with-media { display: grid; grid-template-columns: 1fr minmax(0, 240px); gap: var(--space-l); align-items: center; } .blog-cta__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); } .blog-cta__text { margin: 0; font-family: var(--wn-font-rounded); font-size: var(--fs-md); line-height: 1.35; } .blog-cta__media img { display: block; width: 100%; border-radius: var(--wn-radius-card); } /* `.blog-post__body a` (0,1,1) would otherwise win over `.wn-btn--primary` and recolour/underline the button — this two-class rule (0,2,0) reasserts the primary-button look (off-black text on yellow, no underline). The button is left-aligned (align-items:flex-start on .blog-cta__body) to line up with the paragraph. */ .blog-cta .wn-btn { flex: 0 0 auto; color: var(--wn-off-black); text-decoration: none; } @media (max-width: 760px) { .blog-cta--with-media { grid-template-columns: 1fr; } } @media (max-width: 860px) { .blog-listing__cards { grid-template-columns: 1fr; } .blog-featured__link { grid-template-columns: 1fr; } .blog-featured__img { aspect-ratio: 16 / 9; } }